/* Hattie's Gifts console.
   Colour tokens are copied verbatim from client-brand-kit/BRAND.md - do not
   re-derive them. Density and layout rules are the console build standard;
   see the `console-build` skill in the arvin2.0 workspace before changing them. */

@font-face { font-family:"Faculty Glyphic"; src:url("/static/fonts/facultyglyphic-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/static/fonts/inter-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/static/fonts/inter-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root{
  /* brand - from client-brand-kit */
  --brand:#ab8c52; --brand-strong:#806430; --brand-bright:#9a7e4a; --brand-soft:#e8d4ae;
  --brand-wash:rgba(171,140,82,.05);
  --navy:#1e2c42; --navy-surface:#263854; --sage:#aecfb8;
  --bg:#fcfbf9; --surface:#fff; --sunken:#f5f2ec; --deep:#eae6dd; --brighter:#f4f0e8;
  --ink:#212121; --ink-strong:#000; --ink-muted:#636262;
  --border:#d1cdc4; --border-light:#e2dfd9; --hairline:#f7f4ef; --border-dark:#a49c8b;
  --success:#56ad6a; --success-wash:rgba(86,173,106,.2);
  --warning:#dca031; --danger:#bb0404; --danger-wash:#f8d7da;
  --pill:300px; --control:20px; --card:10px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* density scale - one place to tune "how big everything feels" */
  --fs-base:15px; --fs-sm:13px; --fs-xs:11.5px;
  --fs-h1:24px; --fs-h2:18px; --fs-h3:15px;
  --lh:1.45;
  --sidebar-w:206px;
  --content-max:1400px;      /* ultrawide cap - content centres, sidebar does not */
  --pad-x:26px; --pad-y:22px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;
     font-size:var(--fs-base);line-height:var(--lh);-webkit-font-smoothing:antialiased}
a{color:var(--brand-strong)}
h1,h2,h3{font-family:"Faculty Glyphic",serif;font-weight:400;letter-spacing:0;margin:0}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- centred auth card (login, invite) ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px}
.auth{width:100%;max-width:380px}
.auth .logo{display:block;height:30px;width:auto;margin:0 auto 22px}
.card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--card);
      padding:24px 24px 20px}
.card h1{font-size:22px;margin-bottom:3px}
.card .sub{color:var(--ink-muted);font-size:var(--fs-sm);margin:0 0 18px}

label{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.02em;
      color:var(--ink-muted);margin:0 0 5px}
input[type=text],input[type=email],input[type=password]{
  width:100%;padding:8px 13px;border:1px solid var(--border);border-radius:var(--control);
  font-family:Inter,sans-serif;font-size:14px;background:var(--surface);color:var(--ink)}
input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.field{margin-bottom:13px}
.hint{font-size:var(--fs-xs);color:var(--ink-muted);margin:5px 0 0}

.btn{font-family:Inter,sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.025em;
     padding:8px 18px;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;
     line-height:1.2}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:#2e2e2e}
.btn.gold{background:var(--brand);color:var(--ink-strong);border-color:var(--brand)}
.btn.gold:hover{background:var(--brand-bright)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--border-dark)}
.btn.small{padding:5px 12px;font-size:11px}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.block{width:100%;padding:9px 18px}

.alert{border-radius:var(--card);padding:9px 12px;font-size:var(--fs-sm);margin:0 0 14px}
.alert.error{background:var(--danger-wash);color:#8c1218;border:1px solid #f5c6cb}
.alert.ok{background:var(--success-wash);color:#2f6b3d;border:1px solid rgba(86,173,106,.4)}
.alert.info{background:var(--brand-wash);color:var(--brand-strong);border:1px solid var(--brand)}

/* ---------- app shell ----------
   Sidebar is pinned to the viewport's left edge at full height and never
   stretches with page content. Main content is capped and centred, so on an
   ultrawide monitor the reading column stays sane while the nav stays put. */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.side{background:var(--navy);padding:18px 11px;display:flex;flex-direction:column;
      position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
.side .logo{height:22px;width:auto;margin:0 0 20px 7px}
.side a{display:block;color:#cfd5de;text-decoration:none;font-size:13px;padding:7px 11px;
        border-radius:7px;margin-bottom:1px;line-height:1.3}
.side a:hover{background:rgba(255,255,255,.06);color:#fff}
.side a.on{background:rgba(171,140,82,.18);color:#fff;box-shadow:inset 2px 0 0 var(--brand)}
.side .who{margin-top:auto;padding:12px 11px 0;border-top:1px solid #2f4463;color:#cfd5de;
           font-size:var(--fs-xs)}
.side .who b{display:block;color:#fff;font-weight:500;font-size:var(--fs-sm)}
.side .who .role{color:var(--brand-soft);font-size:var(--fs-xs)}
.side .who button{margin-top:8px;background:transparent;border:1px solid #4a5c78;color:#cfd5de;
                  border-radius:var(--pill);padding:5px 12px;font-size:11px;text-transform:uppercase;
                  letter-spacing:.025em;cursor:pointer;font-family:Inter,sans-serif}
.side .who button:hover{border-color:var(--brand);color:#fff}

.main{padding:var(--pad-y) var(--pad-x) 44px;width:100%;max-width:var(--content-max);margin:0 auto}
.main h1{font-size:var(--fs-h1);margin-bottom:2px}
.main .lede{color:var(--ink-muted);font-size:var(--fs-sm);margin:0 0 20px}

.panel{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--card);
       padding:16px 18px;margin-bottom:14px}
.panel h2{font-size:var(--fs-h2);margin-bottom:2px}
.panel .note{color:var(--ink-muted);font-size:var(--fs-sm);margin:0 0 13px}

table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th{text-align:left;font-weight:500;font-size:var(--fs-xs);text-transform:uppercase;
   color:var(--ink-muted);background:var(--sunken);padding:7px 11px;
   border-bottom:1px solid var(--border-light)}
td{padding:8px 11px;border-bottom:1px solid var(--border-light);vertical-align:middle}
tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto;border:1px solid var(--border-light);border-radius:var(--card);
        background:var(--surface)}

.tag{display:inline-block;font-size:10.5px;padding:2px 9px;border-radius:var(--pill);font-weight:500}
.tag.sys{background:var(--navy);color:#fff}
.tag.on{background:var(--success-wash);color:#2f6b3d}
.tag.off{background:var(--deep);color:var(--ink-muted)}
.tag.gold{background:var(--brand-wash);color:var(--brand-strong);border:1px solid var(--brand)}

.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:7px;margin:9px 0 12px}
.checks label{display:flex;align-items:center;gap:8px;text-transform:none;font-size:var(--fs-sm);
              color:var(--ink);background:var(--sunken);border:1px solid var(--border-light);
              border-radius:7px;padding:7px 10px;margin:0;cursor:pointer;letter-spacing:0}
.checks input{accent-color:var(--brand);width:15px;height:15px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end}
.row .field{margin-bottom:0;flex:1;min-width:150px}
select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--control);
       font-family:Inter,sans-serif;font-size:var(--fs-sm);background:var(--surface);color:var(--ink)}

.linkbox{background:var(--navy);color:#fff;border-radius:var(--card);padding:12px 14px;margin:0 0 14px}
.linkbox .k{font-size:var(--fs-xs);text-transform:uppercase;color:var(--brand-soft);margin-bottom:6px}
.linkbox code{font-family:var(--mono);font-size:12px;word-break:break-all;color:#fff;display:block}
.linkbox .warn{font-size:var(--fs-xs);color:#cfd5de;margin-top:8px}

.empty{color:var(--ink-muted);font-size:var(--fs-sm);padding:12px 0}
form.inline{display:inline}

/* ---------- VPS + automation health ---------- */
.hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}

.hcard{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--card);
       padding:15px 17px 11px}
.hcard .head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.hcard .head b{font-weight:500;font-size:14px}
.hcard .sub{color:var(--ink-muted);font-size:var(--fs-xs);margin:0 0 11px}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
.dot.ok{background:var(--success)}
.dot.warn{background:var(--warning)}
.dot.bad{background:var(--danger)}
.dot.idle{background:var(--border-dark)}

.metric{padding:7px 0 6px;border-bottom:1px dashed var(--border-light)}
.metric:last-child{border-bottom:0}
.metric .line{display:flex;align-items:baseline;gap:9px}
.metric .k{color:var(--ink-muted);font-size:var(--fs-xs);white-space:nowrap}
.metric .lead{flex:1;border-bottom:1px dotted var(--border);transform:translateY(-3px)}
.metric .v{font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.metric .v small{color:var(--ink-muted);font-weight:400;font-size:var(--fs-xs)}

.bar{height:3px;border-radius:2px;background:var(--sunken);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:2px}
.bar i.warn{background:var(--warning)}
.bar i.bad{background:var(--danger)}

.sechead{display:flex;align-items:baseline;gap:10px;margin:24px 0 10px;flex-wrap:wrap}
.sechead h2{font-size:var(--fs-h2)}
.sechead .note{color:var(--ink-muted);font-size:var(--fs-sm);margin:0}

.pcard .when{font-size:var(--fs-xs);color:var(--ink-muted);margin:0 0 10px}
.pcard .blank{background:var(--sunken);border:1px dashed var(--border);border-radius:7px;
              padding:11px 13px;color:var(--ink-muted);font-size:var(--fs-xs)}
.asof{color:var(--ink-muted);font-size:var(--fs-xs);margin:14px 0 0}

/* ---------- responsive ----------
   Three sizes. Ultrawide needs no query: --content-max applies at every width,
   it simply stops mattering below it. */

/* tablet / narrow laptop */
@media(max-width:1080px){
  :root{--sidebar-w:186px;--pad-x:20px}
}

/* phone: nav becomes a horizontal bar, sidebar stops being sticky */
@media(max-width:760px){
  :root{--fs-base:14.5px;--fs-h1:21px;--pad-x:15px;--pad-y:17px}
  .shell{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px;padding:10px 12px;
        position:static;height:auto;overflow:visible}
  .side .logo{margin:0 10px 0 3px}
  .side a{padding:5px 9px;font-size:12.5px}
  .side .who{margin:0 0 0 auto;border:0;padding:0;display:flex;align-items:center;gap:10px}
  .side .who b{display:inline}
  .side .who .role{display:none}
  .side .who button{margin:0}
  .hgrid{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr 1fr}
}

/* ---------- API Connection: guided steps ---------- */
.svc{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--card);
     padding:0;margin-bottom:16px;overflow:hidden}
.svc > .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
            padding:14px 18px;border-bottom:1px solid var(--border-light);background:var(--sunken)}
.svc > .top h2{font-size:var(--fs-h2);margin:0}
.svc > .top .spacer{flex:1}
.svc > .body{padding:16px 18px 6px}
.svc .facts{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 14px;font-size:var(--fs-xs);
            color:var(--ink-muted)}
.svc .facts b{color:var(--ink);font-weight:500}

.state{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:500;
       padding:3px 11px;border-radius:var(--pill)}
.state.ok{background:var(--success-wash);color:#2f6b3d}
.state.mid{background:rgba(220,160,49,.2);color:#7a5511}
.state.off{background:var(--deep);color:var(--ink-muted)}

.steps2{list-style:none;padding:0;margin:0}
.steps2 > li{display:grid;grid-template-columns:24px 1fr;gap:13px;padding:0 0 20px;position:relative}
.steps2 > li:last-child{padding-bottom:6px}
.steps2 > li::before{content:"";position:absolute;left:11.5px;top:26px;bottom:2px;width:1px;
                     background:var(--border-light)}
.steps2 > li:last-child::before{display:none}
.steps2 .n{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
           justify-content:center;font-size:11.5px;font-weight:500;z-index:1;
           background:var(--sunken);color:var(--ink-muted);border:1px solid var(--border)}
.steps2 li.done .n{background:var(--success);color:#fff;border-color:var(--success)}
.steps2 li.now  .n{background:var(--brand);color:#000;border-color:var(--brand)}
.steps2 .t{font-weight:500;font-size:14px;margin:2px 0 3px}
.steps2 li.todo .t{color:var(--ink-muted)}
.steps2 .d{font-size:var(--fs-sm);color:var(--ink-muted);margin:0 0 10px;max-width:70ch}
.steps2 .d b{color:var(--ink)}

.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:12px}
.cur{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-muted);margin:4px 0 0}
.cur.set{color:#2f6b3d}

.copyline{display:flex;align-items:center;gap:9px;background:var(--navy);border-radius:8px;
          padding:9px 12px;margin:0 0 10px;flex-wrap:wrap}
.copyline code{font-family:var(--mono);font-size:12px;color:#fff;word-break:break-all;flex:1}
.copyline .lbl{font-size:10.5px;text-transform:uppercase;color:var(--brand-soft);letter-spacing:.03em}

.profiles{display:grid;gap:8px;margin-bottom:12px}
.prof{display:flex;align-items:center;gap:12px;border:1px solid var(--border-light);
      border-radius:8px;padding:10px 12px;background:var(--sunken);flex-wrap:wrap}
.prof .who{flex:1;min-width:160px}
.prof .who b{font-weight:500;font-size:var(--fs-sm);display:block}
.prof .who span{font-size:var(--fs-xs);color:var(--ink-muted)}

.testrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
         border-top:1px solid var(--border-light);padding:12px 0 4px;margin-top:4px}
.testrow .res{font-size:var(--fs-xs);color:var(--ink-muted);flex:1;min-width:200px}
.testrow .res.bad{color:#8c1218}
.testrow .res.good{color:#2f6b3d}

/* copy-on-click affordance */
.copyline{cursor:pointer;position:relative;transition:background .15s}
.copyline:hover{background:#26374f}
.copyline::after{content:"Click to copy";font-size:10px;color:var(--brand-soft);
                 letter-spacing:.03em;white-space:nowrap}
.copyline.copied{background:#2f6b3d}
.copyline.copied::after{content:"Copied";color:#fff}

.rot{font-size:var(--fs-xs);margin:3px 0 0}
.rot.ok{color:var(--ink-muted)}
.rot.warn{color:#7a5511;font-weight:500}
.rot.bad{color:#8c1218;font-weight:500}