/* ============================================================================
   BUTTRESS OS — SHOWROOM SKIN
   Architecture Practice OS · Accelerated Experiences LLC

   Palette note: warm bone + graphite + brass. Deliberately NOT the retired
   blue/navy brand (SSOT Art. VII.2). Reads like a drafting room, not a
   dashboard template. Tenant palette is swappable via the Skin Machine.
   ============================================================================ */

:root{
  /* surfaces */
  --paper:#f4f1ea;      /* bone — the sheet */
  --card:#fffdf8;       /* trace overlay */
  --sunk:#eae5da;
  --rail:#221f1b;       /* graphite rail */
  --rail-2:#2c2823;

  /* ink */
  --ink:#1d1a16;
  --ink-2:#4a443b;
  --mut:#6d6457;
  --line:#ddd6c8;
  --line-2:#efe9dd;
  --on-rail:#e8e2d5;
  --on-rail-mut:#a79d90;

  /* brass — the one accent */
  --brass:#a8762c;
  --brass-2:#8a5f21;
  --brass-3:#c9954a;
  --brass-wash:rgba(168,118,44,.10);

  /* department accents */
  --a-pursuits:#8a6a3c;
  --a-studio:#6d6350;
  --a-ca:#9c5f2e;
  --a-money:#4a6b4f;
  --a-standards:#7a5a7c;
  --a-coord:#41667a;
  --a-ops:#7b6a55;
  --a-law:#8a4b46;
  --a-it:#4d6f6b;

  /* semantic */
  --good:#4a6b4f;
  --watch:#a8762c;
  --bad:#8a4b46;
  --good-w:rgba(74,107,79,.12);
  --watch-w:rgba(168,118,44,.13);
  --bad-w:rgba(138,75,70,.12);

  --r:10px; --r-lg:14px;
  --sh:0 1px 2px rgba(29,26,22,.05), 0 8px 24px -12px rgba(29,26,22,.18);
  --sh-lg:0 2px 4px rgba(29,26,22,.06), 0 24px 56px -24px rgba(29,26,22,.32);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:640; letter-spacing:-.011em}
p{margin:0}
button{font:inherit}

/* the drafting-grid ground */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(168,118,44,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,118,44,.045) 1px,transparent 1px);
  background-size:34px 34px;
}

/* ------------------------------------------------------------------ layout */
.app{position:relative; z-index:1; display:grid; grid-template-columns:246px 1fr; min-height:100vh}
.main{min-width:0; display:flex; flex-direction:column}
.content{padding:22px 30px 40px; flex:1; max-width:1360px; width:100%}

/* ----------------------------------------------------------------- sidebar */
.sidebar{
  background:linear-gradient(176deg,var(--rail) 0%,var(--rail-2) 100%);
  color:var(--on-rail); padding:16px 12px 26px; position:sticky; top:0;
  height:100vh; overflow-y:auto; border-right:1px solid #17140f;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#3c362e; border-radius:3px}

.brand{display:flex; align-items:center; gap:11px; padding:6px 8px 16px; text-decoration:none; color:inherit}
.bmark{
  width:38px;height:38px;border-radius:9px; display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brass) 0%,var(--brass-2) 100%);
  color:#1d1a16; box-shadow:0 2px 10px -3px rgba(168,118,44,.6);
}
.bt{font-weight:680; font-size:15px; letter-spacing:-.02em}
.bs{font-size:10.5px; color:var(--on-rail-mut); letter-spacing:.05em; text-transform:uppercase; margin-top:1px}

.nav{display:flex; flex-direction:column; gap:1px}
.nav-group{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-rail-mut); padding:15px 10px 5px; font-weight:640;
}
.navlink{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:#c9c2b5; font-size:13.2px; position:relative;
  transition:background .13s, color .13s;
}
.navlink .ic{
  width:19px; text-align:center; font-size:13px; color:var(--brass-3); flex:none;
  opacity:.85;
}
.navlink .lb{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.navlink:hover{background:rgba(255,255,255,.045); color:#f0ebe0}
.navlink.active{background:rgba(168,118,44,.16); color:#fff}
.navlink.active .ic{opacity:1; color:var(--brass-3)}
.navlink.active::before{
  content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px;
  background:var(--brass-3); border-radius:0 3px 3px 0;
}
.navlink.locked{opacity:.42}
.navlink.locked:hover{opacity:.72; background:rgba(168,118,44,.08); cursor:pointer}
.tier-tag{
  font-size:9.5px; padding:2px 5px; border-radius:5px; flex:none;
  background:rgba(168,118,44,.22); color:var(--brass-3); font-weight:640;
  font-family:var(--mono);
}

/* ------------------------------------------------------------------ ribbon */
.ribbon{
  background:linear-gradient(90deg,rgba(168,118,44,.16),rgba(168,118,44,.05));
  border-bottom:1px solid var(--line);
  padding:7px 30px; font-size:12.2px; color:var(--ink-2);
}
.ribbon .live{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; font-weight:700;
  background:var(--rail); color:var(--brass-3); padding:3px 7px; border-radius:5px; margin-right:7px;
}
.ribbon a{color:var(--t-brass); font-weight:600}

/* ------------------------------------------------------------------ topbar */
.topbar{
  display:flex; align-items:center; gap:14px; padding:12px 30px;
  border-bottom:1px solid var(--line); background:rgba(255,253,248,.86);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:40;
}
.crumbs{font-size:13px; color:var(--mut)}
.crumbs b{color:var(--ink); font-weight:640}
.spacer{flex:1}

.tierpill{
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  border:1px solid var(--line); background:var(--card); padding:6px 11px;
  border-radius:999px; font-size:12.5px; box-shadow:var(--sh);
}
.tierpill:hover{border-color:var(--brass); background:var(--field,#fff)}
.tierpill .dot{width:7px;height:7px;border-radius:50%;background:var(--good); flex:none}
.tierpill b{font-weight:660}
.tierpill .cfg{
  font-style:normal; font-size:9.5px; font-family:var(--mono); color:var(--brass-2);
  background:var(--brass-wash); padding:1px 5px; border-radius:4px; margin-left:3px;
}
.tierpill .price{color:var(--mut); margin-left:4px; font-family:var(--mono); font-size:11.5px}
.tierpill .chev{color:var(--mut); font-size:11px}

.who{display:flex; align-items:center; gap:9px; font-size:12.2px; line-height:1.3}
.who .av{
  width:32px;height:32px;border-radius:50%; display:grid;place-items:center;
  background:var(--rail); color:var(--brass-3); font-weight:660; font-size:11.5px; flex:none;
}

/* ------------------------------------------------------- the configurator */
.tiermenu{
  position:absolute; right:120px; top:56px; width:520px; max-height:74vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); z-index:60; display:none; padding:6px;
}
.tiermenu.open{display:block}
.tm-head{padding:12px 12px 10px; font-size:12.3px; color:var(--ink-2); line-height:1.55; border-bottom:1px solid var(--line-2)}
.tm-sub{
  padding:13px 12px 7px; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mut); font-weight:660;
}
.tieropt{padding:10px 12px; border-radius:9px; cursor:pointer; border:1px solid transparent}
.tieropt:hover{background:var(--sunk)}
.tieropt.on{background:var(--brass-wash); border-color:rgba(168,118,44,.32)}
.to-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.to-name{font-weight:680; font-size:14px}
.to-price{font-family:var(--mono); font-size:11.5px; color:var(--brass-2); font-weight:600}
.to-desc{font-size:12px; color:var(--ink-2); margin-top:3px; line-height:1.5}
.to-base{font-size:11px; color:var(--mut); margin-top:3px}

.roomlist{display:flex; flex-direction:column; gap:1px}
.roomrow{
  display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center;
  padding:7px 10px; border-radius:8px; cursor:pointer; font-size:12.6px;
}
.roomrow:hover{background:var(--sunk)}
.rr-box{
  width:17px;height:17px;border-radius:5px; border:1.5px solid var(--line);
  display:grid;place-items:center; font-size:10px; color:transparent; background:var(--field,#fff);
}
.roomrow.on .rr-box{background:var(--brass); border-color:var(--brass); color:var(--on-brass)}
.roomrow:not(.on) .rr-box{color:var(--mut)}
.rr-name{font-weight:560}
.rr-flag{
  font-style:normal; font-size:9px; font-family:var(--mono); padding:1px 4px;
  border-radius:4px; margin-left:5px; vertical-align:1px;
}
.rr-flag.add{background:var(--good-w); color:var(--good)}
.rr-flag.off{background:var(--bad-w); color:var(--bad)}
.rr-price{font-family:var(--mono); font-size:11px; color:var(--ink-2); text-align:right; line-height:1.3}
.rr-price i{display:block; font-style:normal; font-size:9.5px; color:var(--mut)}
.rr-why{grid-column:2/4; font-size:11px; color:var(--mut); line-height:1.45; margin-top:-2px}

.tm-total{margin:8px 4px 4px; padding:11px 12px; background:var(--sunk); border-radius:10px}
.tt-line{display:flex; justify-content:space-between; font-size:12.3px; padding:2px 0; color:var(--ink-2)}
.tt-line b{font-family:var(--mono); font-weight:600}
.tt-line.add b{color:var(--good)}
.tt-line.off b{color:var(--bad)}
.tt-line.grand{
  border-top:1px solid var(--line); margin-top:6px; padding-top:8px;
  font-size:13.5px; color:var(--ink); font-weight:660;
}
.tt-line.grand b{color:var(--brass-2)}
.tt-save{font-size:11.3px; color:var(--good); margin-top:7px; line-height:1.5}
.tt-draft{font-size:10.5px; color:var(--mut); margin-top:6px; font-style:italic}

/* -------------------------------------------------------------- page heads */
.pagehead{display:flex; align-items:flex-start; gap:18px; margin:4px 0 20px}
.pagehead h1{font-size:23px; letter-spacing:-.024em}
.pagehead .sub{font-size:13.2px; color:var(--mut); margin-top:5px; max-width:78ch; line-height:1.55}
.pagehead-actions{margin-left:auto; display:flex; gap:8px; align-items:center; flex:none}

/* ------------------------------------------------------------------- cards */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:17px 18px; box-shadow:var(--sh); margin-bottom:16px;
}
.card > h2{font-size:14.5px; margin-bottom:3px}
.card > .card-sub{font-size:12.2px; color:var(--mut); margin-bottom:13px; line-height:1.55}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto}
  .g2,.g3,.g4{grid-template-columns:1fr}.content{padding:18px}.tiermenu{right:8px;left:8px;width:auto}}

/* ------------------------------------------------------------------- stats */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:11px}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 13px; border-left:3px solid var(--line);
}
.stat .s-l{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--mut); font-weight:640}
.stat .s-v{font-size:22px; font-weight:680; letter-spacing:-.028em; margin-top:5px; font-family:var(--mono)}
.stat .s-n{font-size:11.2px; color:var(--mut); margin-top:4px; line-height:1.45}
.stat.good{border-left-color:var(--good)} .stat.good .s-v{color:var(--t-good)}
.stat.watch{border-left-color:var(--watch)} .stat.watch .s-v{color:var(--t-watch)}
.stat.bad{border-left-color:var(--bad)} .stat.bad .s-v{color:var(--t-bad)}

/* ------------------------------------------------------------------ tables */
table{width:100%; border-collapse:collapse; font-size:12.8px}
thead th{
  text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); font-weight:660; padding:0 10px 7px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{padding:9px 10px; border-bottom:1px solid var(--line-2); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(168,118,44,.035)}
td.num,th.num{text-align:right; font-family:var(--mono); white-space:nowrap}
td.k{font-family:var(--mono); font-size:11.8px; color:var(--ink-2); white-space:nowrap}
.t-main{font-weight:580}
.t-sub{font-size:11.2px; color:var(--mut); margin-top:2px; line-height:1.45}

/* -------------------------------------------------------------------- tags */
.tag{
  display:inline-block; font-size:10.5px; padding:2px 7px; border-radius:5px;
  background:var(--sunk); color:var(--ink-2); font-weight:600; white-space:nowrap;
}
.tag.good{background:var(--good-w); color:var(--t-good)}
.tag.watch{background:var(--watch-w); color:var(--t-watch)}
.tag.bad{background:var(--bad-w); color:var(--t-bad)}
.tag.mono{font-family:var(--mono); font-size:10px}
.tag.ghost{background:transparent; border:1px solid var(--line); color:var(--mut)}

/* ------------------------------------------------------------------ inputs */
label.f{display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mut); font-weight:640; margin-bottom:5px}
input,select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--field,#fff); color:var(--ink); font-family:inherit; font-size:13px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-wash)}
input[type=range]{padding:0; border:none; background:transparent; accent-color:var(--brass)}
.field{margin-bottom:13px}
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn:hover{background:#000}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--sunk); border-color:var(--brass)}
.btn.brass{background:var(--brass); border-color:var(--brass); color:var(--on-brass);}
.btn.brass:hover{background:var(--brass-2); border-color:var(--brass-2)}
.btn.sm{padding:5px 10px; font-size:12px}

/* -------------------------------------------------------------- the fences */
.fence{
  border-left:3px solid var(--brass); background:var(--brass-wash);
  padding:10px 13px; border-radius:0 9px 9px 0; font-size:12.4px;
  color:var(--ink-2); line-height:1.55;
}
.fence b{color:var(--ink)}
.srcnote{font-size:10.8px; color:var(--mut); margin-top:8px; font-style:italic; line-height:1.5}
.muted{color:var(--mut)} .small{font-size:11.5px}
.mono{font-family:var(--mono)}

/* ------------------------------------------------------------- the bus log */
.bus{display:flex; flex-direction:column; gap:0; font-size:12.4px}
.busrow{display:grid; grid-template-columns:52px 1fr; gap:11px; padding:8px 0; border-bottom:1px solid var(--line-2)}
.busrow:last-child{border-bottom:none}
.bus-t{font-family:var(--mono); font-size:10.5px; color:var(--mut); padding-top:2px}
.bus-topic{font-family:var(--mono); font-size:10px; color:var(--brass-2); letter-spacing:.02em}
.bus-from{font-size:11.3px; color:var(--mut); margin:2px 0}
.bus-from b{color:var(--ink-2); font-weight:600}
.bus-body{line-height:1.55; color:var(--ink-2)}
.busrow.conclude .bus-body{color:var(--ink); font-weight:520}
.busrow.conclude{background:var(--good-w); border-radius:8px; padding:9px 11px; border-bottom:none; margin:3px 0}
.busrow.reject{background:var(--bad-w); border-radius:8px; padding:9px 11px; border-bottom:none; margin:3px 0}

/* the confidence meter */
.conf{display:flex; align-items:center; gap:9px; margin-top:8px; font-size:11.5px}
.conf-bar{flex:1; height:6px; background:var(--sunk); border-radius:3px; overflow:hidden; position:relative; max-width:220px}
.conf-fill{height:100%; border-radius:3px; background:var(--good)}
.conf-fill.under{background:var(--bad)}
.conf-gate{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink)}
.conf-n{font-family:var(--mono); font-weight:660}

/* reason chips */
.reasons{list-style:none; padding:0; margin:9px 0 0; display:flex; flex-direction:column; gap:5px}
.reasons li{display:flex; gap:8px; font-size:12.2px; line-height:1.55; color:var(--ink-2)}
.rtag{
  font-family:var(--mono); font-size:9px; letter-spacing:.06em; padding:2px 5px; border-radius:4px;
  height:fit-content; flex:none; margin-top:2px; font-weight:700;
}
.rtag.data{background:var(--good-w); color:var(--good)}
.rtag.assumption{background:var(--watch-w); color:var(--t-watch)}

/* ------------------------------------------------------------------ toasts */
#toast-wrap{position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:8px}
.toast{
  background:var(--ink); color:var(--paper); padding:10px 15px; border-radius:9px;
  font-size:12.8px; box-shadow:var(--sh-lg); transition:opacity .25s; max-width:400px;
}
.toast.ok{border-left:3px solid var(--brass-3)}

/* ------------------------------------------------------------------ footer */
.ae-credit{
  padding:18px 30px 26px; font-size:11.5px; color:var(--mut);
  border-top:1px solid var(--line); margin-top:auto;
}
.ae-credit b{color:var(--ink-2)}

/* --------------------------------------------------------------- utilities */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.between{display:flex; justify-content:space-between; align-items:center; gap:12px}
.stack{display:flex; flex-direction:column; gap:10px}
.empty{padding:26px; text-align:center; color:var(--mut); font-size:12.6px}
.divider{height:1px; background:var(--line-2); margin:13px 0}
.bar{height:6px; background:var(--sunk); border-radius:3px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--brass); border-radius:3px}

/* ── the way out ─────────────────────────────────────────────────────────────
   Pinned to the foot of the rail on every page. Lands in the store, on this
   product's own pricing sheet — deliberately not the marketing homepage. */
.sideout{ margin:14px 10px 18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.075); }
.so-main{
  display:flex; align-items:center; gap:8px; padding:11px 12px;
  border-radius:11px; text-decoration:none;
  background:linear-gradient(180deg, rgba(168,118,44,.20), rgba(168,118,44,.11));
  border:1px solid rgba(168,118,44,.42);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.so-main:hover{ background:linear-gradient(180deg, rgba(168,118,44,.30), rgba(168,118,44,.17));
  border-color:rgba(168,118,44,.62); transform:translateY(-1px); }
.so-k{ font-family:var(--mono,"IBM Plex Mono",monospace); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brass-3,#d8a552); opacity:.92; display:block; }
.so-t{ flex:1; display:block; font-size:13px; font-weight:620; color:#f4efe4; line-height:1.25; margin-top:1px; }
.so-main .so-k, .so-main .so-t{ min-width:0; }
.so-main > .so-a{ font-size:15px; color:var(--brass-3,#d8a552); flex:none; }
.so-main span:first-child{ flex:1; min-width:0; }
.so-sub{
  display:block; margin-top:9px; text-align:center; font-size:11.5px;
  color:rgba(240,235,224,.52); text-decoration:none; letter-spacing:.005em;
}
.so-sub:hover{ color:rgba(240,235,224,.86); text-decoration:underline; }

/* — the product mark ————————————————————————————————————————
   The real Buttress OS icon from the AE icon set, not a drawn stand-in.
   Served from the .com so one file updates every property. */
.bmark.art{ background:none; box-shadow:none; border-radius:10px; overflow:hidden; }
.bmark.art img{ width:100%; height:100%; object-fit:contain; display:block; }

/* === AE mobile drawer + cutoff fix (Jul 27 2026) === */
.navscrim{position:fixed; inset:0; background:rgba(20,16,12,.5); z-index:49; opacity:0; visibility:hidden; transition:opacity .2s}
.ae-navtoggle{display:none}
@media(max-width:860px){
  html,body{overflow-x:hidden}
  .app{grid-template-columns:1fr !important}
  .topbar{display:flex !important; align-items:center; flex-wrap:wrap; gap:9px}
  .ae-navtoggle{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; border:1px solid var(--line,rgba(0,0,0,.15)); background:var(--card,#fff); color:inherit; cursor:pointer; flex:none; padding:0}
  .ae-navtoggle svg{width:20px; height:20px}
  .sidebar{position:fixed !important; top:0 !important; left:0 !important; z-index:50; width:272px; max-width:84vw; height:100vh; height:100dvh; overflow-y:auto; transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 24px 56px -24px rgba(0,0,0,.55)}
  .app.nav-open .sidebar{transform:translateX(0) !important}
  .app.nav-open .navscrim{opacity:1; visibility:visible}
  .content{padding:16px 14px 40px !important}
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; font-size:12px}
  #toast-wrap{left:12px !important; right:12px !important}
}


/* Seven-figure money was clipping at the card edge: grid children default to
   min-width:auto and refuse to shrink, so the value overflowed. Fixed. */
.stat{ min-width:0 }
.stat .s-v{ font-size:clamp(15px, 4.4vw, 22px); min-width:0; white-space:nowrap; letter-spacing:-.035em }
.stat.headline .s-v{ font-size:clamp(17px, 5.1vw, 26px) }


/* ------------------------------------------------------- the Skin Machine
   Tokens the skins need that the original bone sheet never had to name,
   plus the two things that break the moment the floor goes dark:
   a baked-cream topbar, and form controls with no colour of their own. */
:root{
  --glass:rgba(255,253,248,.86);
  --t-brass:#7a5417; --t-good:#35543a; --t-watch:#7a5417; --t-bad:#8a4b46;
  --on-brass:#140d04; --chip-ink:var(--ink-2);
  --dot-1:rgba(168,118,44,.05); --dot-2:rgba(65,102,122,.05);
}
.topbar{background:var(--glass)}
button,input,select,textarea{color:var(--ink)}

.skinwrap{position:relative; margin-top:10px}
.skinpill{display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:9px 12px; border-radius:11px; background:var(--rail-2);
  border:1px solid rgba(255,255,255,.08); color:var(--on-rail);
  font-size:12.5px; font-weight:600; transition:.14s}
.skinpill:hover{background:var(--rail); border-color:var(--brass-3)}
.skinpill .sw{width:14px; height:14px; border-radius:5px; flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.skinpill .car{margin-left:auto; font-size:9px; opacity:.6}
.skinmenu{position:absolute; left:0; right:0; bottom:calc(100% + 8px);
  background:var(--card); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--sh-lg); padding:9px; display:none; z-index:60}
.skinmenu.open{display:block}
.skinmenu h4{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut); margin:3px 6px 8px}
.skinopt{display:flex; align-items:center; gap:10px; padding:8px 9px;
  border-radius:9px; cursor:pointer; color:var(--ink); font-size:13px}
.skinopt:hover{background:var(--sunk)}
.skinopt.on{background:var(--brass-wash); font-weight:640}
.skinopt .chips{display:flex; gap:3px; flex:none}
.skinopt .chips i{width:11px; height:18px; border-radius:3px; display:block;
  box-shadow:0 0 0 1px rgba(128,128,128,.25) inset}
.skinmore{display:block; margin:7px 6px 3px; font-size:12px; color:var(--brass-2);
  text-decoration:none; font-weight:600}
.skinmore:hover{text-decoration:underline}

/* the Skin Machine room */
.sk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:15px}
.sk-card{border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--card); cursor:pointer; transition:.15s}
.sk-card:hover{transform:translateY(-2px); box-shadow:var(--sh-lg); border-color:var(--brass-3)}
.sk-card.on{border-color:var(--brass); box-shadow:0 0 0 2px var(--brass-wash)}
.sk-prev{height:112px; display:flex}
.sk-prev .rail{width:34%} .sk-prev .body{flex:1; padding:11px; display:flex;
  flex-direction:column; gap:7px}
.sk-prev .bar{height:9px; border-radius:5px}
.sk-meta{padding:12px 14px; border-top:1px solid var(--line-2)}
.sk-meta b{display:block; font-size:14px; margin-bottom:3px}
.sk-meta span{font-size:12px; color:var(--ink-2); line-height:1.5}
.sk-swatches{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.sk-swatches button{width:34px; height:34px; border-radius:9px; border:2px solid var(--line);
  cursor:pointer; padding:0}
.sk-swatches button.on{border-color:var(--ink)}
.sk-live{background:var(--brass); color:var(--on-brass) !important; border:0;
  border-radius:10px; padding:10px 15px; font-weight:640; cursor:pointer}

/* ---------------------------------------------- the aliases that were missing
   Connect, Records, Contacts, Calendar, Meet and the org bus were all written
   against a palette this OS never had (--blue, --amber, --mag, --indigo,
   --panel, --text...). Twenty-seven names resolved to nothing, so those rooms
   have been painting with invalid colours since before the skins existed.
   Point them at Buttress's own tokens and they inherit every skin for free. */
:root{
  --blue:var(--a-coord); --blue-2:var(--t-coord); --blue-3:var(--a-coord);
  --blue-wash:var(--coord-wash);
  --amber:var(--brass); --amber-2:var(--t-brass); --amber-3:var(--brass-3);
  --amber-wash:var(--brass-wash);
  --mag:var(--a-standards); --mag-2:var(--t-standards); --mag-wash:var(--standards-wash);
  --gold-3:var(--brass-3);
  --char:var(--rail); --char2:var(--rail-2);
  --indigo:var(--a-standards); --indigo2:var(--brass-2); --indigo3:var(--brass-3);
  --panel:var(--card); --panel-2:var(--sunk);
  --text:var(--ink); --muted:var(--mut);
  --ok:var(--good); --warn:var(--watch); --brand:var(--brass);
  --r-pill:999px;
  /* washes + text-on-wash the aliases above depend on */
  --coord-wash:rgba(65,102,122,.13); --standards-wash:rgba(122,90,124,.13);
  --t-coord:#2f4d5e; --t-standards:#5d4260;
}

/* accent fills need ink that flips with the skin, not a baked #fff */
.cn-btn.call{background:var(--a-coord) !important; border-color:var(--a-coord) !important; color:var(--on-accent) !important}
.cn-btn.call:hover{background:var(--t-coord) !important}
.cn-btn.amber{background:var(--brass) !important; border-color:var(--brass) !important; color:var(--on-brass) !important}
.cn-av{color:var(--on-rail) !important}
.cn-av.me{color:var(--on-brass) !important}
.cal-views button.on{background:var(--a-standards) !important; color:var(--on-accent) !important}

/* the primary button carried white on brass — 2.46:1, under AA since day one */
.btn.brass, .btn.brass:hover{color:var(--on-brass) !important}
.cn-av{background:linear-gradient(160deg,var(--rail-2),var(--rail)) !important}

/* --- illustrated room icons (Buttress kit, lives in this repo) --- */
.navlink .ic-img{width:30px; height:30px; border-radius:8px; object-fit:cover; opacity:1;
  flex:none; background:#0d1216; box-shadow:0 1px 2px rgba(0,0,0,.35)}
.navlink.active .ic-img{box-shadow:0 0 0 2px var(--brass-3)}
.crumb-ic{width:40px; height:40px; border-radius:10px; object-fit:cover; flex:none;
  margin-right:12px; box-shadow:var(--sh)}
@media (max-width:760px){ .crumb-ic{width:32px; height:32px; border-radius:8px; margin-right:8px} }
input::placeholder,textarea::placeholder{color:var(--mut); opacity:1}
select option{background:var(--field,#fff); color:var(--ink)}
input[type=date]::-webkit-calendar-picker-indicator{filter:var(--pick-filter,none)}
input[type=checkbox],input[type=radio]{accent-color:var(--brass); width:auto}
:root[data-skin="blueprint"],:root[data-skin="basalt"],:root[data-skin="ironwood"]{color-scheme:dark}