/* Sirnia — shared foundation.
   Layout: full-width bands separated by hairline rules, never stacked cards.
   Tokens are the single source of truth; both pages derive everything from them. */
:root{
  --paper:#EDEFEA;
  --panel:#F7F8F5;
  --ink:#141A17;
  --muted:#5C6760;
  --rule:#CDD3CC;
  --signal:#2742D0;
  --signal-soft:#E2E6FA;
  --flag:#8A6212;
  --on-signal:#FFFFFF;

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1413; --panel:#171E1C; --ink:#E7EBE6; --muted:#9BA69F;
    --rule:#2C3733; --signal:#8098FF; --signal-soft:#1C2444; --flag:#D9AB52;
    --on-signal:#0F1413;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1413; --panel:#171E1C; --ink:#E7EBE6; --muted:#9BA69F;
  --rule:#2C3733; --signal:#8098FF; --signal-soft:#1C2444; --flag:#D9AB52;
  --on-signal:#0F1413;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px; margin-inline:auto; padding-left:var(--gut); padding-right:var(--gut-r)}
a{color:inherit}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:400}
:focus-visible{outline:2px solid var(--signal); outline-offset:2px}

/* masthead */
.mast{border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:18px}
.logo{
  display:flex; align-items:baseline; gap:9px; text-decoration:none;
  font-family:var(--display); font-size:27px; letter-spacing:.01em;
}
.logo i{
  width:9px; height:9px; border-radius:50%; background:var(--signal);
  display:inline-block; transform:translateY(-3px); flex:none;
}
.navlinks{display:flex; gap:26px; font-size:14.5px; color:var(--muted)}
.navlinks a{text-decoration:none}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink)}
@media (max-width:720px){ .navlinks{display:none} }

/* buttons */
.btn{
  font:inherit; font-size:15.5px; font-weight:500; cursor:pointer;
  padding:12px 22px; border-radius:3px; border:1px solid transparent;
  text-decoration:none; display:inline-block; text-align:center;
  transition:background .15s, border-color .15s;
}
.btn-a{background:var(--signal); color:var(--on-signal); border-color:var(--signal)}
.btn-a:hover{filter:brightness(.92)}
.btn-b{border-color:var(--rule); color:var(--ink)}
.btn-b:hover{border-color:var(--ink)}
.cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:34px}

/* bands */
.band{border-top:1px solid var(--rule)}
.band .wrap{padding-block:62px}
h2{font-family:var(--display); font-size:clamp(28px,3.5vw,40px); line-height:1.12; letter-spacing:-.008em}
.intro{margin:15px 0 0; max-width:40em; color:var(--muted); font-size:17px}

/* three-part rows: label, explanation, concrete artifact */
.rows{margin-top:40px; display:flex; flex-direction:column}
.row{
  display:grid; grid-template-columns:minmax(0,13em) minmax(0,1fr) minmax(0,15em);
  gap:28px; padding-block:24px; border-top:1px solid var(--rule); align-items:start;
}
.row:last-child{border-bottom:1px solid var(--rule)}
.row h3{font-size:17px; font-weight:600; min-width:0}
.row p{margin:0; color:var(--muted); font-size:15.5px; min-width:0}
.row .fig{
  font-family:var(--mono); font-size:13px; color:var(--ink); min-width:0;
  border-left:2px solid var(--signal); padding-left:13px; line-height:1.7;
}
.row .fig s{color:var(--muted); text-decoration-color:var(--flag)}

footer{border-top:1px solid var(--rule); color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; padding-block:26px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

@media (max-width:900px){
  .row{grid-template-columns:1fr; gap:10px}
  .row .fig{border-left:none; padding-left:0; border-top:2px solid var(--signal); padding-top:11px; margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* app tabs, shared by the builder and the responses view */
.tabs{display:flex; gap:3px; margin-left:6px}
.tabs a{font-size:13.5px; text-decoration:none; color:var(--muted); padding:6px 12px; border-radius:3px}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--signal-soft); color:var(--signal)}