@charset "UTF-8";
:root {
  --ink:#203c35;
  --muted:#758078;
  --green:#28634e;
  --line:#dce3dc;
  --paper:#f5f7f2;
  --white:#fff;
  --lime:#e6efbf
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

a {
  color:var(--green);
  text-decoration:none
}

a:hover {
  text-decoration:underline
}

button,input,textarea {
  font:inherit
}

button,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 18px;
  cursor:pointer;
  font-weight:600;
  background:#fff;
  color:var(--ink)
}

button:hover,.button:hover {
  filter:brightness(.97);
  text-decoration:none
}

button:disabled {
  opacity:.45;
  cursor:not-allowed
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #8aa675;
  outline-offset:3px
}

.primary {
  background:var(--green);
  color:#fff;
  border-color:var(--green)
}

.secondary {
  background:white
}

.danger {
  background:#fff;
  color:#9f3838;
  border-color:#e7cccc
}

.text-button {
  border:0;
  padding:0;
  background:none;
  font-weight:400
}

.topbar {
  height:82px;
  border-bottom:1px solid var(--line);
  background:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(5vw,24px)
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:650;
  letter-spacing:-.7px
}

.brandmark {
  width:31px;
  height:33px;
  border-radius:9px 9px 2px 9px;
  color:white;
  background:var(--green);
  text-align:center;
  font-size:26px;
  line-height:29px
}

.tag {
  font-size:10px;
  padding:2px 5px;
  border:1px solid var(--line);
  letter-spacing:1px;
  margin-left:4px;
  color:var(--muted)
}

nav {
  display:flex;
  align-items:center;
  gap:28px
}

nav form {
  margin:0
}

main {
  max-width:1200px;
  margin:auto;
  padding:48px 30px 70px
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.eyebrow {
  font-size:11px;
  letter-spacing:1.6px;
  font-weight:700;
  color:#7c887d
}

h1 {
  font-size:36px;
  line-height:1.2;
  letter-spacing:-1.4px;
  font-weight:600;
  margin:12px 0
}

h2 {
  font-size:20px;
  letter-spacing:-.4px;
  font-weight:600;
  margin:0
}

h3 {
  font-size:15px;
  margin:10px 0
}

p {
  margin:10px 0 18px
}

.page-heading p {
  color:var(--muted)
}

.steps {
  display:flex;
  gap:40px;
  border-bottom:1px solid var(--line);
  margin:22px 0 30px;
  color:#a0aaa1
}

.steps span {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  font-size:12px
}

.steps b {
  font-size:13px;
  font-weight:500
}

.steps .active {
  color:var(--green);
  border-bottom:2px solid var(--green)
}

.editor-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 305px;
  gap:24px
}

.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px;
  margin-bottom:24px
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px
}

.panel-heading .icon {
  color:var(--green);
  font-size:24px
}

.panel-heading h2 {
  flex:1
}

.muted {
  color:var(--muted)
}

.small {
  font-size:12px
}

textarea,input[type=email],input[type=password] {
  width:100%;
  border:1px solid #d8dfd5;
  background:#fbfcf9;
  border-radius:8px;
  padding:16px;
  color:var(--ink)
}

textarea {
  resize:vertical;
  min-height:185px;
  line-height:1.7;
  margin-top:6px
}

textarea::placeholder {
  color:#9aa399
}

label {
  display:block;
  font-size:13px;
  font-weight:600;
  margin:14px 0 6px
}

.examples {
  display:flex;
  gap:8px;
  align-items:center;
  margin:15px 0 25px;
  flex-wrap:wrap
}

.examples span {
  color:var(--muted);
  font-size:11px;
  margin-right:3px
}

.examples button {
  border-radius:30px;
  font-size:11px;
  padding:5px 11px;
  background:#fafbf8;
  font-weight:400
}

.site-card {
  padding:22px
}

.site-art {
  height:160px;
  border-radius:8px;
  background:#e4eadb;
  margin:17px 0;
  position:relative;
  overflow:hidden;
  padding:22px
}

.site-art>span {
  font:600 35px/1 Georgia,serif;
  letter-spacing:-2px
}

.site-art small {
  display:block;
  font-size:9px;
  letter-spacing:2px
}

.leaf {
  font-size:30px;
  margin-left:5px
}

.landscape {
  position:absolute;
  bottom:-110px;
  right:-45px;
  width:265px;
  height:210px;
  border-radius:50%;
  background:#91a57b;
  box-shadow:-85px 25px 0 #b3c49b,55px -13px 0 #66856a;
  transform:rotate(-25deg)
}

.status {
  font-size:12px;
  margin:6px 0 18px
}

.dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5d9470;
  margin-right:6px
}

hr {
  border:0;
  border-top:1px solid var(--line);
  margin:20px 0
}

.site-card p {
  font-size:13px
}

.site-card a {
  font-size:13px
}

.empty-note {
  text-align:center;
  padding:30px;
  color:var(--muted)
}

.empty-note>span {
  display:inline-block;
  background:#eaf0e4;
  border-radius:50%;
  width:36px;
  height:36px;
  line-height:36px;
  color:var(--green)
}

.empty-note h3 {
  font-weight:500
}

.empty-note p {
  font-size:12px
}

.app-footer {
  border-top:1px solid var(--line);
  padding:20px max(5vw,24px);
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px
}

.login-card {
  max-width:430px;
  margin:5vh auto 10vh
}

.login-card h1 {
  font-size:40px;
  margin:16px 0
}

.login-card .primary {
  width:100%;
  margin-top:24px;
  justify-content:space-between
}

.login-card .muted {
  text-align:center;
  font-size:11px;
  margin-top:24px
}

.notice {
  padding:14px 18px;
  border:1px solid #bbd1af;
  background:#eef5e5;
  border-radius:8px;
  margin-bottom:24px
}

.error {
  background:#fff0ed;
  border-color:#edc3bc
}

.badge {
  font-size:11px;
  white-space:nowrap;
  border-radius:20px;
  padding:4px 10px;
  background:#edf2e4;
  color:#506b48
}

.metrics {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:20px
}

.metrics span {
  font-size:12px;
  color:var(--muted)
}

.metrics b {
  display:block;
  color:var(--ink);
  font-size:16px;
  font-weight:500
}

blockquote {
  border-left:3px solid #afc39c;
  margin:20px 0;
  padding:0 18px;
  font-size:18px
}

pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  tab-size:2;
  font:12px/1.65 ui-monospace,Consolas,monospace
}

.validation {
  background:#f6f7f4;
  padding:15px;
  border-radius:6px
}

.diff {
  border:1px solid var(--line);
  border-radius:6px;
  margin:12px 0;
  overflow:hidden
}

.diff summary {
  padding:13px 16px;
  font:13px ui-monospace,Consolas,monospace;
  cursor:pointer
}

.diff summary span {
  float:right;
  color:var(--muted);
  font:11px system-ui
}

.diff pre {
  margin:0;
  overflow-x:auto;
  white-space:pre;
  padding:12px;
  background:#fafbf8
}

.diff pre span {
  display:block;
  min-height:19px
}

.added {
  background:#e4f2dd;
  color:#2d5e2d
}

.removed {
  background:#fce8e5;
  color:#943838
}

.diff-legend {
  font-size:11px;
  color:var(--muted);
  padding:8px 14px;
  border-top:1px solid var(--line)
}

.review-actions {
  display:flex;
  gap:12px;
  margin-top:22px
}

.publish-form {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:24px
}

.checkbox {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:400;
  margin-bottom:16px
}

.checkbox input {
  margin-top:5px;
  accent-color:var(--green)
}

.history-item {
  border-bottom:1px solid var(--line);
  padding:22px 0
}

.history-item:last-child {
  border:0
}

.history-item h3 {
  max-width:80%
}

.request-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}

.request-row small {
  display:block;
  color:var(--muted);
  font-size:11px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}

@media(max-width:800px) {
  main {
    padding:28px 18px
  }
  .editor-grid {
    grid-template-columns:1fr
  }
  .site-card {
    display:none
  }
  h1 {
    font-size:29px
  }
  .page-heading {
    align-items:flex-start;
    flex-direction:column
  }
  .topbar {
    padding:0 18px
  }
  .brand {
    font-size:17px
  }
  nav {
    gap:14px;
    font-size:12px
  }
  .tag {
    display:none
  }
  .steps {
    gap:22px
  }
  .panel {
    padding:20px
  }
  .app-footer {
    gap:20px
  }
  .app-footer span {
    max-width:180px
  }
  .review-actions {
    flex-wrap:wrap
  }
  .login-card h1 {
    font-size:36px
  }
}

/* OSMFAB editor branding; public website styling is retained separately. */
:root { --green:#173653; --ink:#233548; --lime:#dce8ee; }
.site-art { background:#e3e8ed; }
.steel-lines { height:80px; margin-top:14px; background:repeating-linear-gradient(150deg,#8597a8 0 12px,#afbeca 13px 30px,#d1dbe1 31px 50px); transform:skewX(-12deg); }
input[type=text] { width:100%; border:1px solid var(--line); border-radius:8px; padding:14px; }