/* Stud — blueprint & framing. Ink on blueprint paper, data set in mono
   like spec stamps, one amber "lumber-pencil" accent. Mobile-first. */
:root{
  --ink:#15181d; --ink-2:#454c57; --paper:#e7ecee; --panel:#ffffff;
  --line:#ccd3d6; --line-2:#dde3e5;
  --amber:#c07a0c; --blueprint:#2b6a7e; --flag:#a8442b; --ok:#3f7d52;
  --shadow:0 1px 0 var(--line-2), 0 6px 22px -16px rgba(21,24,29,.35);
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.5 Inter,system-ui,sans-serif;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:28px 28px;background-position:-1px -1px;
}
a{color:var(--blueprint);text-underline-offset:2px}
.mono,code{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:var(--ink);color:#fff;
  border-bottom:3px solid var(--amber)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:#fff}
.brand .word{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:.18em;
  font-size:20px;text-transform:uppercase}
.brand .tick{font-family:"IBM Plex Mono",monospace;color:var(--amber);
  font-size:12px;letter-spacing:.1em}
.brand small{display:block;color:#9aa3ad;font-size:11px;letter-spacing:.04em;margin-top:-2px}
.top .who{font-size:13px;color:#aeb6bf}
.top .who a{color:#fff}

.wrap{max-width:880px;margin:0 auto;padding:22px 18px 64px}

/* Cards / panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px 18px}
.panel + .panel{margin-top:16px}
h1{font-family:Archivo,sans-serif;font-weight:800;font-size:26px;letter-spacing:-.01em;margin:.1em 0 .3em}
h2{font-family:Archivo,sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blueprint)}

/* Forms */
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:12px 0 5px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;font:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blueprint);outline-offset:1px;border-color:var(--blueprint)}
textarea{min-height:64px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > div{flex:1 1 160px}
.btn{appearance:none;cursor:pointer;border:0;border-radius:8px;
  background:var(--ink);color:#fff;font:600 15px Inter,sans-serif;
  padding:12px 18px;margin-top:16px;letter-spacing:.01em}
.btn:hover{background:#000}
.btn.amber{background:var(--amber)} .btn.amber:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);margin-top:0;padding:8px 12px;font-size:13px}
.hint{font-size:12.5px;color:var(--ink-2);margin-top:6px}

/* Flash */
.flash{margin:0 0 16px;padding:11px 14px;border-radius:8px;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--amber);font-size:14px}

/* Lists */
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 4px;border-bottom:1px solid var(--line-2)}
.plist li:last-child{border-bottom:0}
.plist a.name{font-weight:600;text-decoration:none;color:var(--ink)}
.plist a.name:hover{color:var(--blueprint)}
.muted{color:var(--ink-2);font-size:13px}

/* Tags */
.tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  padding:2px 7px;border-radius:5px;border:1px solid var(--line);background:#f4f7f8;color:var(--ink-2)}
.tag.code{border-color:#cbe0e6;background:#eef6f8;color:var(--blueprint)}
.tag.must{border-color:#e7c9bf;background:#faece8;color:var(--flag)}
.tag.room{border-color:#dfd3bd;background:#f7f0e2;color:#8a6516}

/* Selections table */
.sel{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.sel th{text-align:left;font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);padding:6px 8px;border-bottom:1px solid var(--line)}
.sel td{padding:9px 8px;border-bottom:1px solid var(--line-2);vertical-align:top}
.sel .ff{color:var(--ink-2);font-size:13px}

.empty{padding:18px;text-align:center;color:var(--ink-2);font-size:14px;
  border:1px dashed var(--line);border-radius:8px;background:#fbfcfc}

/* Centered auth */
.auth{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:24px}
.auth .panel{width:100%;max-width:380px}
.steps{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--ink-2);margin-bottom:6px}

@media (prefers-reduced-motion:no-preference){.panel{transition:box-shadow .2s}}

/* --- Branding: login header + Emerald logo --- */
:root{ --emerald:#1d7a46; }
.auth-head{text-align:center;margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid var(--line-2)}
.login-logo{display:block;width:210px;max-width:72%;height:auto;margin:2px auto 12px}
.word-lg{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:.2em;
  font-size:30px;text-transform:uppercase;color:var(--ink);line-height:1}
.tagline{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--emerald);margin-top:6px}
@media (max-width:560px){ .brand small.acronym{display:none} }

/* --- Print room confirm --- */
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:6px}
.check{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;font-size:14px;font-weight:500;cursor:pointer}
.check input{width:auto;margin:0}
.check:hover{border-color:var(--blueprint)}

/* --- Progress overlay --- */
#js-progress-overlay{position:fixed;inset:0;background:rgba(21,24,29,.55);
  display:none;align-items:center;justify-content:center;z-index:50}
#js-progress-overlay.show{display:flex}
.prog-card{background:#fff;border-radius:14px;padding:28px 34px;text-align:center;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5);max-width:320px}
.prog-spin{width:34px;height:34px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--amber);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prog-msg{font-weight:600;color:var(--ink)}
.prog-sub{font-size:12.5px;color:var(--ink-2);margin-top:4px}

/* --- Room page --- */
.room-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.viewtoggle a{padding:6px 14px;font-size:13px;font-weight:600;text-decoration:none;color:var(--ink-2);background:#fff}
.viewtoggle a.on{background:var(--ink);color:#fff}
a.tag.room{text-decoration:none}
a.tag.room:hover{border-color:var(--blueprint);color:var(--blueprint)}

/* --- Suggestions --- */
.sugg-list{display:grid;gap:12px;margin-top:6px}
.sugg{border:1px solid var(--line);border-left:3px solid var(--emerald);border-radius:8px;padding:13px 15px;background:#fff}
.sugg-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sugg-why{font-size:14px;color:var(--ink-2);margin:5px 0}
.sugg-meta{font-size:13px;margin-top:5px}
.sugg-meta .lbl{font-weight:600;color:var(--ink-2);margin-right:4px}
.sugg-meta.dep{color:var(--flag)}
.tag.prem{border-color:#d8c7e6;background:#f3ecf8;color:#6b3fa0}
.btn.sm{font-size:13px;padding:7px 12px;margin-top:10px}
.tradegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin:4px 0 4px}

/* --- Room on the plan --- */
.plan-img{display:block;width:100%;max-width:560px;height:auto;border:1px solid var(--line);
  border-radius:8px;background:#fff}
.plan-img:hover{border-color:var(--blueprint)}

/* --- Delete / danger --- */
.btn.danger{background:var(--flag)} .btn.danger:hover{filter:brightness(1.05)}
.btn.danger.ghost-danger{background:transparent;color:var(--flag);border:1px solid var(--flag);margin-top:0;padding:8px 14px;font-size:13px}
.btn.danger.ghost-danger:hover{background:var(--flag);color:#fff}
.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-color:#e7c9bf}
.danger-panel{border-color:#e7c9bf;border-left:3px solid var(--flag)}

/* --- Selection sheet --- */
.sheet{display:flex;flex-direction:column}
.srow{display:flex;gap:14px;padding:10px 2px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.srow:last-child{border-bottom:0}
.slabel{flex:0 0 160px;font-weight:600;font-size:14px;padding-top:8px}
.sinput{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.sinput select,.sinput input{max-width:420px}
.snote{font-size:13px;color:var(--ink-2)}
.inh{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.inh input{width:auto;margin:0}
.strades{margin-top:2px}
@media (max-width:560px){ .srow{flex-direction:column;gap:6px} .slabel{flex-basis:auto;padding-top:0} }

/* --- v1.2: version stamp + build-standard groups --- */
.ver{font-family:var(--mono);font-size:11px;color:var(--amber);border:1px solid var(--line-2);
  border-radius:4px;padding:1px 6px;margin-left:10px;letter-spacing:.04em;align-self:center}
.stdgroup{margin:6px 0 14px}
.stdgroup h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);
  margin:10px 0 4px;font-weight:600}
.st-custom{margin-top:4px}

/* --- v1.3: whole-home upgrades + dependency banner --- */
.dep-banner{border-color:#e7c9bf;border-left:3px solid var(--flag);background:#fdf6f3}
.dep-banner h2{color:var(--flag)}
.dep-why{display:block;font-size:12.5px;margin-top:2px}
.tag.ok{background:#e3f3e8;color:#1f7a44;border-color:#bfe3cc}
.tag.flagtag{background:#fbeae3;color:#a4441f;border-color:#e7c9bf}
.srow.upg{align-items:flex-start}
.upg-note{font-weight:400;font-size:12px;color:var(--ink-2);margin-top:3px;max-width:280px}

/* --- v1.4: siding layout --- */
.siding-sum{font-size:15px;font-weight:500;margin:2px 0 10px}
.siding-read .plist li{align-items:flex-start}

/* --- v1.5: from-print provenance --- */
.tag.frm{background:#eaf1fb;color:#23598f;border-color:#cdddf2}

/* --- v1.6: bid requests --- */
.bidlist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.bidcard{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--paper-2,#fff)}
.bidhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bid-scope{white-space:pre-wrap;font-family:var(--mono);font-size:12.5px;line-height:1.5;
  background:#f7f6f3;border:1px solid var(--line-2);border-radius:6px;padding:12px;margin-top:8px;overflow-x:auto}
.bid-edit{width:100%;min-height:460px;font-family:var(--mono);font-size:13px;line-height:1.5}
.bidactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.bidactions select{padding:4px 8px;font-size:12px}
.tag.status-draft{background:#f0eee9;color:#6b6457;border-color:#ddd7cc}
.tag.status-sent{background:#eaf1fb;color:#23598f;border-color:#cdddf2}
.tag.status-awarded{background:#e3f3e8;color:#1f7a44;border-color:#bfe3cc}

/* --- v1.8: room chips with delete --- */
.roomchips{display:flex;flex-wrap:wrap;gap:8px}
.roomchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
  border-radius:6px;padding:4px 6px 4px 10px;background:var(--paper-2,#fff);font-size:13px}
.roomchip a{text-decoration:none;font-weight:500}
.roomchip form{display:inline;margin:0}
.roomx{border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:12px;line-height:1;
  padding:2px 4px;border-radius:4px}
.roomx:hover{background:var(--flag);color:#fff}

/* --- v1.9: richer progress overlay (step cycling + first-time note) --- */
#js-progress-msg{transition:opacity .2s}
.prog-sub{transition:opacity .2s}
.prog-once{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);
  font-size:12.5px;color:#cde6d4;max-width:340px}
.prog-once::before{content:"✓ ";color:#7fd6a0;font-weight:700}

/* --- v2.1: builder-view audience tags (who sees each option) --- */
.srow{position:relative}
.aud{position:absolute;right:2px;top:9px;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;padding:2px 8px;border-radius:10px;white-space:nowrap;border:1px solid transparent}
.aud-d{background:#f1e8fb;color:#6b3fa0;border-color:#e0cdf4}   /* Designer */
.aud-s{background:#e7eefb;color:#2f5aa0;border-color:#cfddf4}   /* Sup */
.aud-b{background:#eef1f3;color:#566069;border-color:#dde2e6}   /* Designer + Sup */
@media (max-width:560px){ .aud{position:static;align-self:flex-start;margin-top:4px} }

/* --- v2.2: editable per-project visibility (builder view) --- */
.audwrap{position:absolute;right:2px;top:7px;display:inline-flex;align-items:center;gap:4px}
.audsel{font-size:10.5px;font-weight:700;letter-spacing:.02em;border-radius:10px;padding:3px 8px;
  border:1px solid transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.audsel.aud-d{background:#f1e8fb;color:#6b3fa0;border-color:#e0cdf4}
.audsel.aud-s{background:#e7eefb;color:#2f5aa0;border-color:#cfddf4}
.audsel.aud-b{background:#eef1f3;color:#566069;border-color:#dde2e6}
.audsel.aud-x{background:#fbecec;color:#9a3b3b;border-color:#f1cccc}
.visreset{border:0;background:none;cursor:pointer;color:var(--ink-2);font-size:13px;padding:0 2px;line-height:1}
.visreset:hover{color:var(--ink)}
.vishint{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:560px){ .audwrap{position:static;margin-top:4px} }

/* --- v2.3: user management --- */
.rolekey{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.tag.rd{background:#f1e8fb;color:#6b3fa0;border-color:#e0cdf4}
.tag.rs{background:#e7eefb;color:#2f5aa0;border-color:#cfddf4}
.tag.rb{background:#e3f3e8;color:#1f7a44;border-color:#bfe3cc}
.userlist{display:flex;flex-direction:column;gap:0}
.userrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 2px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.userrow:last-child{border-bottom:0}
.userrow.inactive{opacity:.55}
.uinfo strong{font-size:15px}
.uemail{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-top:2px}
.uactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.uactions select{padding:5px 8px;font-size:13px}