/* ============================================================================
   kelbin.css — Kelbin two-wing shell · DRAFT 1
   Sana · 17 Aug 2026 · PLAT-6329

   TOKENS: verbatim from the Kelbin V1 spec §13 (12-token palette). The four
   semantic hues and Slate-on-sand are FILLS/BADGES ONLY — measured this week:
   Terracotta 3.26, Amber 2.26, Muted Green 3.78, Slate-on-sand 4.32. Text is
   Ink Navy or the two indigos (4.55+ / 6.02+), nothing else.

   DRAFT-1 NOTE: this file favours legibility of the IDEA over polish. The
   Website wing deliberately reuses the Atelier page anatomy (eyebrow · serif
   H1 · desc · actions) so the split reads as two wings of one product.
   ============================================================================ */
:root{
  --sand:#F7F3EC;        /* main background */
  --white:#FFFCF8;       /* primary surface */
  --soft:#F1ECE4;        /* secondary surface, recessed wells */
  --ink:#152033;         /* primary text */
  --slate:#697386;       /* secondary text — WARM WHITE CARDS ONLY, fails on sand */
  --indigo:#5B5CEB;      /* Kelbin / primary action */
  --indigo-deep:#4848D4; /* hover + accent TEXT (6.0:1) */
  --indigo-soft:#ECEBFF; /* soft action state */
  --green:#5E8C68;       /* done — fills only */
  --terra:#C97855;       /* booking/human — fills only */
  --amber:#D5A249;       /* attention — fills only */
  --grey:#E5DED4;        /* border/divider */
  --serif:"Newsreader",Georgia,serif;
  --sans:"Figtree",-apple-system,system-ui,sans-serif;
  --r:10px; --r-lg:14px;
  --sh1:0 1px 2px rgba(21,32,51,.05);
  --sh2:0 6px 22px -8px rgba(21,32,51,.12),0 2px 6px -2px rgba(21,32,51,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--sans);
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}

/* ── draft banner ───────────────────────────────────────────────────────── */
.draftbar{background:var(--ink);color:#EDEAE2;font-size:12px;padding:7px 18px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.draftbar b{color:#fff}
.draftbar .tag{background:#2A3853;border:1px solid #3A4761;border-radius:99px;padding:1px 9px;
  font-size:10.5px}

/* ── shell ──────────────────────────────────────────────────────────────── */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:58px;flex:none;display:flex;align-items:center;gap:20px;
  padding:0 22px;background:var(--white);border-bottom:1px solid var(--grey);
  position:sticky;top:0;z-index:40}
.wm{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;
  letter-spacing:-.01em}
.wm .mark{width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,#6D6EF0,#4848D4);display:grid;
  place-items:center;color:#fff;font-size:13px;font-weight:800}
.nav{display:flex;gap:4px;height:100%}
.nav button{display:flex;align-items:center;gap:7px;padding:0 15px;
  font-size:14.5px;font-weight:500;color:var(--slate);
  border-bottom:2.5px solid transparent;margin-bottom:-1px}
.nav button:hover{color:var(--ink)}
.nav button.on{color:var(--ink);font-weight:650;border-bottom-color:var(--indigo)}
.nav .nbadge{min-width:19px;height:19px;border-radius:99px;background:var(--amber);
  color:var(--ink);font-size:11px;font-weight:800;display:grid;place-items:center;
  padding:0 5px}
.grow{flex:1}
.acct{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--slate)}
.acct .ava{width:31px;height:31px;border-radius:99px;background:var(--indigo);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}

/* views */
.view{display:none;flex:1}
.view.on{display:block}
.wrap{max-width:1080px;margin:0 auto;padding:30px 24px 170px}

/* the canonical page header (Atelier anatomy, Kelbin skin) */
.phead{display:flex;align-items:flex-start;gap:18px;padding-bottom:18px;
  border-bottom:1px solid var(--grey);margin-bottom:22px}
.phead .id{flex:1;min-width:0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--indigo-deep);margin-bottom:6px}
h1.pt{font-family:var(--serif);font-weight:500;font-size:31px;
  letter-spacing:-.015em;line-height:1.1;margin:0}
.pdesc{font-size:14px;color:var(--slate);margin:7px 0 0;max-width:62ch}
.pacts{display:flex;align-items:center;gap:9px;padding-top:16px;flex:none}

.btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:650;border-radius:var(--r);padding:9px 15px;border:1px solid transparent}
.btn.primary{background:var(--indigo);color:#fff}
.btn.primary:hover{background:var(--indigo-deep)}
.btn.ghost{background:var(--white);border-color:var(--grey);color:var(--ink)}
.btn.ghost:hover{background:var(--soft)}
.btn.quiet{color:var(--indigo-deep);font-weight:650}

.card{background:var(--white);border:1px solid var(--grey);
  border-radius:var(--r-lg);box-shadow:var(--sh1)}
.sec{margin-bottom:26px}
.sech{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.sech h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.sech .sub{font-size:12.5px;color:var(--slate)}
.sech .more{margin-left:auto;font-size:13px;font-weight:650;color:var(--indigo-deep)}

/* badges — semantic hue as FILL, ink text */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  font-weight:700;border-radius:99px;padding:3px 10px;white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:99px;flex:none}
.badge.done{background:#E9F1EB;color:#2F5B3B}   .badge.done::before{background:var(--green)}
.badge.book{background:#F8ECE5;color:#7A452E}   .badge.book::before{background:var(--terra)}
.badge.attn{background:#F7EFDC;color:#6B5320}   .badge.attn::before{background:var(--amber)}
.badge.kelbin{background:var(--indigo-soft);color:var(--indigo-deep)} .badge.kelbin::before{background:var(--indigo)}

/* ── HOME (= the app home) ──────────────────────────────────────────────── */
.hero-summary{display:flex;align-items:center;gap:14px;background:var(--white);
  border:1px solid var(--grey);border-radius:var(--r-lg);box-shadow:var(--sh1);
  padding:16px 20px;margin-bottom:26px;flex-wrap:wrap}
.hero-summary .kface{width:44px;height:44px;border-radius:14px;flex:none;
  background:linear-gradient(135deg,#6D6EF0,#4848D4);display:grid;
  place-items:center;color:#fff;font-size:20px;font-weight:800}
.hero-summary .kt{flex:1;min-width:220px}
.hero-summary .kt b{display:block;font-size:16px}
.hero-summary .kt span{font-size:13px;color:var(--slate)}
.hero-summary .stats{display:flex;gap:18px;font-size:12.5px;color:var(--slate)}
.hero-summary .stats b{display:block;font-family:var(--serif);font-size:24px;
  font-weight:500;color:var(--ink);line-height:1.1}

/* Needs You */
.ny{border-left:4px solid var(--amber)}
.nycard{display:grid;grid-template-columns:1fr auto;gap:4px 16px;
  padding:15px 18px;border-bottom:1px solid var(--grey);align-items:center}
.nycard:last-child{border-bottom:0}
.nycard .t{font-weight:650;font-size:14.5px;grid-column:1}
.nycard .d{grid-column:1;font-size:13px;color:var(--slate)}
.nycard .why{grid-column:1;font-size:12px;color:#6B5320;background:#F7EFDC;
  border-radius:7px;padding:5px 10px;margin-top:6px;justify-self:start}
/* explicit column, learned from the render: grid items with a definite ROW are
   placed before auto items, so without grid-column:2 this seized column 1 and
   the full 1fr width — giant buttons left, title exiled right. */
.nycard .acts{grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;
  gap:7px;justify-content:center}
.nycard .acts .btn{padding:7px 14px;font-size:13px;justify-content:center}
.nydone{padding:14px 18px;font-size:13.5px;color:#2F5B3B;background:#E9F1EB;
  border-radius:0 0 var(--r-lg) var(--r-lg);display:none}
.nydone.show{display:block}

/* Handled feed — receipts */
.receipt{display:grid;grid-template-columns:auto 1fr auto;gap:3px 13px;
  padding:13px 18px;border-bottom:1px solid var(--grey);align-items:baseline}
.receipt:last-child{border-bottom:0}
.receipt .ic{width:24px;height:24px;border-radius:99px;display:grid;
  place-items:center;font-size:11px;font-weight:800;align-self:center}
.receipt.r-done .ic{background:#E9F1EB;color:#2F5B3B}
.receipt.r-book .ic{background:#F8ECE5;color:#7A452E}
.receipt.r-site .ic{background:var(--indigo-soft);color:var(--indigo-deep)}
.receipt .t{font-size:14px;font-weight:550}
.receipt .m{grid-column:2;font-size:12.5px;color:var(--slate)}
.receipt .when{font-size:12px;color:var(--slate);white-space:nowrap}
.receipt.new{animation:slidein .35s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}

/* ── FRONT DESK ─────────────────────────────────────────────────────────── */
.fdtabs{display:flex;gap:5px;margin-bottom:18px;flex-wrap:wrap}
.fdtabs button{font-size:13px;font-weight:600;color:var(--slate);
  border:1px solid var(--grey);background:var(--white);border-radius:99px;
  padding:7px 15px}
.fdtabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.fdsec{display:none}
.fdsec.on{display:block}

.convo{display:grid;grid-template-columns:1fr auto auto;gap:3px 14px;
  padding:14px 18px;border-bottom:1px solid var(--grey);align-items:center}
.convo:last-child{border-bottom:0}
.convo .q{font-weight:600;font-size:14px}
.convo .m{grid-column:1;font-size:12.5px;color:var(--slate)}
.convo .open{font-size:13px;font-weight:650;color:var(--indigo-deep)}

.bkrow{display:grid;grid-template-columns:66px 1fr auto;gap:2px 16px;
  padding:13px 18px;border-bottom:1px solid var(--grey);align-items:center}
.bkrow:last-child{border-bottom:0}
.bkrow .time{font-family:var(--serif);font-size:17px;text-align:center}
.bkrow .time small{display:block;font-family:var(--sans);font-size:10.5px;
  color:var(--slate);text-transform:uppercase;letter-spacing:.06em}
.bkrow .who{font-weight:600;font-size:14px}
.bkrow .svc{grid-column:2;font-size:12.5px;color:var(--slate)}

.idgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:11px;padding:16px 18px}
.idopt{border:1.5px solid var(--grey);border-radius:var(--r);padding:13px;
  text-align:center;cursor:pointer;background:var(--white)}
.idopt:hover{border-color:#C9C2F5}
.idopt.on{border-color:var(--indigo);background:var(--indigo-soft)}
.idopt .face{width:38px;height:38px;border-radius:12px;margin:0 auto 8px;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.idopt b{display:block;font-size:13.5px}
.idopt span{font-size:11px;color:var(--slate)}
.idnote{padding:0 18px 16px;font-size:12.5px;color:var(--slate);max-width:70ch}

/* ── WEBSITE wing ───────────────────────────────────────────────────────── */
.sitegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px}
.site{overflow:hidden}
.site .thumb{height:120px;background:linear-gradient(140deg,#EDE6D8,#DFD5C1);
  display:grid;place-items:center;font-family:var(--serif);font-style:italic;
  color:#8B8271;font-size:15px}
.site .sb{padding:13px 16px}
.site .sn{font-weight:650;font-size:14.5px}
.site .sm{font-size:12.5px;color:var(--slate);margin-top:2px}
.site .sf{display:flex;align-items:center;gap:9px;padding:11px 16px;
  border-top:1px solid var(--grey)}
.site .sf .open{margin-left:auto;font-size:13px;font-weight:650;color:var(--indigo-deep)}

/* ── GLOBAL COMPOSER — pinned, present on every view ────────────────────── */
.composer-zone{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
  padding:0 16px 18px}
.thread{pointer-events:auto;width:min(680px,100%);margin-bottom:10px;
  display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow-y:auto}
.msg{max-width:88%;font-size:13.5px;line-height:1.5;border-radius:14px;
  padding:10px 14px;box-shadow:var(--sh2);animation:slidein .3s ease}
.msg.you{align-self:flex-end;background:var(--ink);color:#F2EFE8;
  border-bottom-right-radius:5px}
.msg.kelbin{align-self:flex-start;background:var(--white);
  border:1px solid var(--grey);border-bottom-left-radius:5px}
.msg.kelbin .kb{display:flex;align-items:center;gap:7px;font-size:10.5px;
  font-weight:800;letter-spacing:.09em;color:var(--indigo-deep);
  text-transform:uppercase;margin-bottom:4px}
.msg.kelbin .kb::before{content:"";width:8px;height:8px;border-radius:3px;
  background:linear-gradient(135deg,#6D6EF0,#4848D4)}
.msg .route{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-size:11.5px;font-weight:700;color:var(--indigo-deep);
  background:var(--indigo-soft);border-radius:99px;padding:3px 11px;cursor:pointer}
.composer{pointer-events:auto;width:min(680px,100%);display:flex;
  align-items:center;gap:10px;background:var(--white);
  border:1.5px solid var(--grey);border-radius:999px;box-shadow:var(--sh2);
  padding:8px 8px 8px 18px}
.composer:focus-within{border-color:var(--indigo)}
.composer .kdot{width:20px;height:20px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,#6D6EF0,#4848D4)}
.composer input{flex:1;border:0;outline:none;background:transparent;
  font-size:14.5px;min-width:0}
.composer input::placeholder{color:#9AA1B0}
.composer .send{width:38px;height:38px;border-radius:99px;background:var(--indigo);
  color:#fff;display:grid;place-items:center;font-size:16px;flex:none}
.composer .send:hover{background:var(--indigo-deep)}
.chint{pointer-events:auto;font-size:11.5px;color:var(--slate);margin-top:7px;
  background:var(--sand);padding:0 8px}

@media (max-width:760px){
  .nav button{padding:0 9px;font-size:13px}
  .acct .an{display:none}   /* name overflowed a 390px topbar by 74px — avatar carries identity on phones */
  .phead{flex-direction:column}
  .pacts{padding-top:4px}
  .hero-summary .stats{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   DRAFT 2 additions — the empty desk, the site hero, the report strip
   ══════════════════════════════════════════════════════════════════════════ */

/* greeting + suggestion chips (they hand the composer words — ONE input) */
.hello{padding:26px 0 30px;text-align:center}
.hello h1.pt{font-size:34px}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.chip{font-size:13px;font-weight:600;color:var(--indigo-deep);background:var(--white);
  border:1px solid var(--grey);border-radius:99px;padding:8px 16px}
.chip:hover{border-color:#C9C2F5;background:var(--indigo-soft)}

/* the day, folded to one line */
.dayline{width:100%;display:flex;align-items:center;gap:11px;background:var(--white);
  border:1px solid var(--grey);border-radius:var(--r-lg);box-shadow:var(--sh1);
  padding:13px 18px;text-align:left}
.dayline:hover{background:#FFFDF9}
.dayline .dt2{font-size:14.5px;font-weight:550}
.dayline .ds{font-size:12.5px;color:var(--slate);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.caret{color:var(--slate);font-size:13px;transition:transform .15s;flex:none}
.fold{margin-top:8px}

/* tomorrow line + drill-ins */
.today{display:flex;align-items:center;gap:12px;padding:13px 18px;flex-wrap:wrap}
.today .tt{font-size:14px;font-weight:550;flex:1;min-width:180px}
.drills{display:flex;gap:6px;flex-wrap:wrap}
.drill{font-size:12.5px;font-weight:650;color:var(--indigo-deep);
  border:1px solid var(--grey);background:var(--white);border-radius:99px;padding:6px 13px}
.drill:hover{background:var(--indigo-soft)}
.drill.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* WEBSITE — the site hero with a live-thumbnail stand-in */
.sitehero{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:24px;
  padding:22px;align-items:center;margin-bottom:26px}
.shot{border-radius:10px;overflow:hidden;border:1px solid var(--grey);
  box-shadow:var(--sh2);background:#fff}
.mini{font-family:var(--sans)}
.mini-nav{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid #EEE7DB;font-size:8.5px;letter-spacing:.12em;font-weight:800;
  color:#20323E}
.mini-nav i{width:10px;height:10px;border-radius:3px;background:#2E6E8E;flex:none}
.mini-nav em{margin-left:auto;font-style:normal;background:#2E6E8E;color:#fff;
  border-radius:4px;padding:3px 8px;font-size:7.5px}
.mini-hero{padding:18px 14px 14px;background:linear-gradient(150deg,#F3F8FA,#E4EFF3)}
.mini-hero b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;
  line-height:1.15;color:#182B36}
.mini-hero span{display:block;font-size:8.5px;color:#5A7382;margin-top:6px}
.mini-row{display:flex;gap:7px;padding:11px 14px 14px;background:#fff}
.mini-row u{height:26px;flex:1;border-radius:5px;background:#F0EBE2;text-decoration:none}
.siteinfo{min-width:0}
.healthline{display:inline-flex;align-items:center;gap:8px;margin-top:10px}
.healthline .caret{transition:transform .15s}

/* the report strip */
.stats4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat{padding:15px 17px}
.stat b{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.05;display:block}
.stat span{font-size:12.5px;color:var(--slate);display:block;margin-top:3px}
.stat i{font-style:normal;font-size:11.5px;color:var(--slate);display:block;margin-top:7px}
.stat i.up{color:#2F5B3B}

@media (max-width:820px){
  .sitehero{grid-template-columns:1fr}
  .hello h1.pt{font-size:27px}
}