/* ============================================================================
   OfficeKiln — site.css v1
   The office-operations kiln. Identity "Console/Blue", approved by John 2026-09-05:
   Space Grotesk (display) + Inter (sans) + Space Mono. Night-desk graphite
   ground, signal-blue accent, amber counter. No sibling kiln repeats.
   ========================================================================== */

:root{
  --bg:#131317; --bg2:#191921; --panel-hi:#22222d; --well:#0c0c10;
  --hair:rgba(255,255,255,.10); --hair2:rgba(255,255,255,.20);
  --text:#eeedf4; --muted:#a8a5b8; --faint:#8f8ca0;
  --acc:#4f80ff; --acc-hi:#7fa8ff; --acc-deep:#2f5ce0;
  --acc-dim:rgba(79,128,255,.13); --acc-glow:rgba(79,128,255,.4);
  --amber:#ffb054; --amber-hi:#ffc77e; --amber-dim:rgba(255,176,84,.12);
  --err:#d95f52; --on-acc:#0c1630;
  --paper:#fdfcf8; --paper-ink:#221d15; --paper-faint:#6d675c; --paper-hair:#d9d2c4;
  --panel-grad:linear-gradient(180deg,var(--panel-hi),var(--bg2) 46%);
  --shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -24px rgba(0,0,0,.75),0 4px 14px -6px rgba(0,0,0,.5);
  --inset:inset 0 2px 8px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.04);
  --display:"Space Grotesk",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eceef3; --bg2:#f7f8fb; --panel-hi:#ffffff; --well:#dfe2ea;
  --hair:rgba(27,29,40,.13); --hair2:rgba(27,29,40,.30);
  --text:#1b1d24; --muted:#5c5f6e; --faint:#8b8e9c;
  --acc:#2b52d9; --acc-hi:#1f42c0; --acc-deep:#2b52d9;
  --acc-dim:rgba(43,82,217,.10); --acc-glow:rgba(43,82,217,.24);
  --amber:#c47c10; --amber-hi:#a3660c; --amber-dim:rgba(196,124,16,.10);
  --err:#bb4437; --on-acc:#ffffff;
  --panel-grad:linear-gradient(180deg,#ffffff,#f1f2f7 46%);
  --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 22px 46px -20px rgba(24,28,48,.38),0 4px 12px -5px rgba(24,28,48,.22);
  --inset:inset 0 2px 6px rgba(24,28,48,.13),inset 0 -1px 0 rgba(255,255,255,.7);
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#eceef3; --bg2:#f7f8fb; --panel-hi:#ffffff; --well:#dfe2ea;
    --hair:rgba(27,29,40,.13); --hair2:rgba(27,29,40,.30);
    --text:#1b1d24; --muted:#5c5f6e; --faint:#8b8e9c;
    --acc:#2b52d9; --acc-hi:#1f42c0; --acc-deep:#2b52d9;
    --acc-dim:rgba(43,82,217,.10); --acc-glow:rgba(43,82,217,.24);
    --amber:#c47c10; --amber-hi:#a3660c; --amber-dim:rgba(196,124,16,.10);
    --err:#bb4437; --on-acc:#ffffff;
    --panel-grad:linear-gradient(180deg,#ffffff,#f1f2f7 46%);
    --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 22px 46px -20px rgba(24,28,48,.38),0 4px 12px -5px rgba(24,28,48,.22);
    --inset:inset 0 2px 6px rgba(24,28,48,.13),inset 0 -1px 0 rgba(255,255,255,.7);
    color-scheme:light;
  }
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;
  background-image:radial-gradient(1100px 500px at 78% -140px,var(--acc-dim),transparent 60%);}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,3vw,36px)}
a{color:inherit}

/* ── header ─────────────────────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--hair)}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:54px}
.wordmark{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.01em;text-decoration:none}
.wordmark i{font-style:normal;color:var(--acc)}
nav.top{margin-left:auto;display:flex;align-items:center;gap:18px}
nav.top a{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;color:var(--muted);text-decoration:none;padding:14px 2px;display:inline-block}
nav.top a:hover{color:var(--text)}
.toggle{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;color:var(--muted);background:var(--bg2);
  border:1px solid var(--hair2);border-radius:7px;padding:6px 11px;cursor:pointer}
.toggle:hover{color:var(--text);border-color:var(--acc)}

/* ── hero (homepage) ────────────────────────────────────────────────────── */
.hero{padding:clamp(34px,6vw,72px) 0 clamp(20px,3vw,34px)}
.eyebrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.eyebrow b{color:var(--acc);font-weight:500}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,5.2vw,58px);line-height:1.06;
  letter-spacing:-.015em;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--acc);text-shadow:0 0 26px var(--acc-glow)}
.hero .sub{color:var(--muted);font-size:clamp(16px,1.6vw,18.5px);max-width:56ch;margin-top:16px}

/* ── homepage tool cards ────────────────────────────────────────────────── */
.tool-index{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:18px;margin-top:26px}
.tool-index a{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--panel-grad);
  border:1px solid var(--hair);border-radius:14px;padding:18px 18px 16px;box-shadow:var(--shadow);
  transition:border-color .18s,transform .18s}
.tool-index a:hover{border-color:var(--acc);transform:translateY(-3px)}
.tool-index .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.tool-index .t{font-family:var(--display);font-weight:560;font-size:21px}
.tool-index .d{color:var(--muted);font-size:14.5px}
.tool-index .go{margin-top:auto;align-self:flex-end;color:var(--acc);font-size:19px}
.spec{display:block;border-radius:10px;background:var(--well);box-shadow:var(--inset);border:1px solid var(--hair);
  padding:12px;min-height:132px;overflow:hidden;position:relative}

/* mini itinerary sheet inside the card */
.spec .sheetmini{display:block;background:var(--paper);color:var(--paper-ink);border-radius:5px;padding:10px 12px;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6);transition:transform .25s}
.spec .sm-title{display:block}
.spec .sm-rule{display:block}
.tool-index a:hover .sheetmini{transform:scale(1.035)}
.spec .sm-title{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.01em}
.spec .sm-rule{height:2px;background:var(--acc);width:38%;margin:4px 0 7px;border-radius:2px}
.spec .sm-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--paper-faint);
  border-top:1px solid var(--paper-hair);padding:3.5px 0}
.spec .sm-row b{color:var(--paper-ink);font-weight:500}
.spec .sm-row .fl{color:#2b4ea8}

/* "next out of the kiln" strip */
.bench{margin-top:26px;border:1px dashed var(--hair2);border-radius:12px;padding:14px 18px;display:flex;
  gap:10px 26px;flex-wrap:wrap;align-items:baseline}
.bench .bt{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.bench span{color:var(--muted);font-size:14px}

/* ── tool page: titlebar + forge ────────────────────────────────────────── */
.titlebar{padding:clamp(16px,2.4vw,26px) 0 12px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.titlebar h1{font-family:var(--display);font-weight:560;font-size:clamp(24px,3vw,33px);letter-spacing:-.01em}
.titlebar h1 em{font-style:normal;color:var(--acc)}
.titlebar .sub{color:var(--muted);font-size:14.5px;max-width:64ch}

.forge{background:var(--panel-grad);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:26px;height:calc(100vh - 200px);min-height:480px;display:flex;flex-direction:column}
.forge-body{display:grid;grid-template-columns:minmax(300px,380px) 1fr;min-height:0;flex:1}
@media (max-width:900px){.forge-body{grid-template-columns:1fr}}

/* left rail (inputs) */
.rail{padding:16px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:14px;
  height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;min-width:0}
@media (max-width:900px){.forge{height:auto}.rail{height:auto;max-height:60vh;border-right:0;border-bottom:1px solid var(--hair)}}
.grp{background:var(--bg2);border:1px solid var(--hair);border-radius:11px;padding:13px 13px 11px}
.grp-t{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);margin-bottom:9px}
.ctl{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.ctl label{font-size:12px;color:var(--muted)}
.ctl{min-width:0}
.ctl input,.ctl textarea,.ctl select{min-width:0;width:100%;background:var(--well);color:var(--text);border:1px solid var(--hair2);
  border-radius:7px;padding:8px 10px;font:inherit;font-size:14px;box-shadow:var(--inset)}
.ctl input:focus,.ctl textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* segment cards */
.segcard{background:var(--bg2);border:1px solid var(--hair);border-left:3px solid var(--acc);border-radius:11px;
  padding:11px 12px 9px;position:relative}
.segcard.hotel{border-left-color:var(--amber)}
.segcard.car{border-left-color:var(--acc-deep)}
.segcard.meet{border-left-color:var(--acc-hi)}
.segcard.note{border-left-color:var(--faint)}
.seghead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.seghead .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.segcard.hotel .tag{color:var(--amber-hi)}
:root[data-theme="light"] .segcard.hotel .tag{color:var(--amber)}
.seghead .mv{margin-left:auto;display:flex;gap:4px}
.seghead button{background:var(--well);border:1px solid var(--hair2);color:var(--muted);border-radius:6px;
  font-size:11px;padding:3px 8px;cursor:pointer;line-height:1.2}
.seghead button:hover{color:var(--text);border-color:var(--acc)}
.seghead button.del:hover{color:var(--err);border-color:var(--err)}

/* add-segment bar */
.addbar{display:flex;gap:7px;flex-wrap:wrap}
.addbar button{background:var(--well);border:1px solid var(--hair2);color:var(--text);border-radius:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;padding:8px 12px;cursor:pointer;box-shadow:var(--inset)}
.addbar button:hover{border-color:var(--acc);color:var(--acc-hi)}
:root[data-theme="light"] .addbar button:hover{color:var(--acc)}

/* right side: sheet preview */
.deskside{padding:18px;display:flex;flex-direction:column;min-height:0;background:
  radial-gradient(700px 320px at 50% -80px,var(--acc-dim),transparent 65%)}
/* accordion console (John: Split Ledger, 2026-09-05) */
.grp.collapsed > *:not(.grp-t){display:none}
.grp .grp-t{cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-bottom:0;user-select:none}
.grp:not(.collapsed) .grp-t{margin-bottom:9px}
.grp .grp-t::after{content:"+";color:var(--faint);font-size:14px}
.grp:not(.collapsed) .grp-t::after{content:"−"}
.seghead button:disabled{opacity:.28;cursor:default}
.seghead button:disabled:hover{color:var(--muted);border-color:var(--hair2)}
.deskbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.deskbar .zoom{display:flex;gap:0;border:1px solid var(--hair2);border-radius:7px;overflow:hidden}
.deskbar .zoom button{background:var(--bg2);color:var(--muted);border:0;font-family:var(--mono);font-size:11px;
  padding:6px 11px;cursor:pointer}
.deskbar .zoom button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
.sheetport{flex:1;overflow:hidden;border-radius:10px;background:var(--well);box-shadow:var(--inset);
  border:1px solid var(--hair);padding:22px;display:flex;justify-content:center;align-items:center;min-height:340px}
@media (max-width:900px){.sheetport{min-height:50vh}}
.sheetscale{transform-origin:top center}

/* ── THE SHEET (the product) ────────────────────────────────────────────── */
.sheet{width:740px;min-height:958px;background:var(--paper);color:var(--paper-ink);padding:52px 56px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.65);font-family:var(--sans);font-size:13.5px;line-height:1.45}
.sheet .s-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.sheet .s-title{font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-.01em;line-height:1.12}
.sheet .s-for{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);margin-top:6px}
.sheet .s-dates{text-align:right;font-family:var(--mono);font-size:12px;color:var(--paper-faint);white-space:nowrap}
.sheet .s-rule{height:3px;background:linear-gradient(90deg,#3a52c8,#8fa7ff);margin:16px 0 6px;border-radius:2px}
.sheet .s-day{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#3b52c0;margin:20px 0 4px;border-bottom:1px solid var(--paper-hair);padding-bottom:5px}
.sheet .s-seg{display:grid;grid-template-columns:64px 1fr;gap:0 16px;padding:9px 0;border-bottom:1px solid var(--paper-hair)}
.sheet .s-seg:last-child{border-bottom:0}
.sheet .s-time{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--paper-ink);padding-top:1px}
.sheet .s-main .s-l1{font-weight:600;font-size:14px}
.sheet .s-main .s-l1 .rt{font-family:var(--mono);font-weight:500;font-size:12.5px;color:#2b4ea8;margin-left:8px}
.sheet .s-main .s-l2{color:var(--paper-faint);font-size:12.5px;margin-top:2px}
.sheet .s-main .s-conf{font-family:var(--mono);font-size:11.5px;color:var(--paper-faint);margin-top:2px}
.sheet .s-main .s-conf b{color:var(--paper-ink);font-weight:600;letter-spacing:.06em}
.sheet .s-note{color:var(--paper-ink);font-size:12.5px;margin-top:3px;font-style:italic}
.sheet .s-contacts{margin-top:26px;border-top:2px solid var(--paper-ink);padding-top:10px}
.sheet .s-contacts h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:6px}
.sheet .s-contacts p{font-size:12.5px;white-space:pre-wrap}
.sheet .s-foot{margin-top:30px;display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;color:var(--paper-faint)}
.sheet .s-empty{color:var(--paper-faint);font-style:italic;padding:40px 0;text-align:center}

/* ── action bar ─────────────────────────────────────────────────────────── */
.bar{display:flex;align-items:center;gap:12px;border-top:1px solid var(--hair);padding:13px 18px;flex-wrap:wrap}
.act{background-color:var(--acc);background-image:linear-gradient(180deg,var(--acc-hi),var(--acc));color:var(--on-acc);border:0;border-radius:9px;
  font:600 14.5px var(--sans);padding:11px 22px;cursor:pointer;box-shadow:0 6px 18px -6px var(--acc-glow)}
.act:hover{filter:brightness(1.06)}
.ghost{background:var(--bg2);color:var(--text);border:1px solid var(--hair2);border-radius:9px;
  font:500 13.5px var(--sans);padding:10px 16px;cursor:pointer}
.ghost:hover{border-color:var(--acc)}
.ghost.danger:hover{border-color:var(--err);color:var(--err)}
.local-note{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--faint);margin-left:auto}
.local-note::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);
  margin-right:7px;vertical-align:1px}

/* ── prose / faq / footer ───────────────────────────────────────────────── */
.prose{max-width:760px;padding:10px 0 26px}
.prose h2{font-family:var(--display);font-weight:560;font-size:23px;margin:26px 0 10px}
.prose p{color:var(--muted);margin-bottom:12px}
.prose a{padding-block:3px;display:inline-block}
.prose b{color:var(--text)}
details.faq{border:1px solid var(--hair);border-radius:10px;background:var(--bg2);margin-bottom:9px;overflow:hidden}
details.faq summary{cursor:pointer;padding:13px 16px;font-weight:600;font-size:15px;list-style:none;position:relative;padding-right:40px}
details.faq summary::after{content:"+";position:absolute;right:16px;top:10px;font-size:19px;color:var(--acc)}
details.faq[open] summary::after{content:"–"}
details.faq div{padding:0 16px 14px;color:var(--muted);font-size:14.5px}
footer.site{border-top:1px solid var(--hair);margin-top:30px}
footer.site .wrap{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:baseline;padding-block:22px;
  font-size:13px;color:var(--faint)}
footer.site a{color:var(--muted);text-decoration:none;padding:8px 2px;display:inline-block}
footer.site a:hover{color:var(--text)}
footer.site a[href*="filekiln.com"]{font-weight:700;color:var(--acc)}
footer.site a[href*="gradekiln.com"]{font-weight:700;color:var(--amber)}
footer.site a[href*="shapekiln.com"]{font-weight:700;color:var(--acc-hi)}
footer.site a[href*="makerkiln.com"]{font-weight:700;color:var(--amber-hi)}

/* compact tabular people rows (WGL) */
.party{border:1px solid var(--hair);border-left:3px solid var(--acc);border-radius:10px;background:var(--bg2);padding:10px 10px 8px;min-width:0}
.party .prowtop{display:grid;grid-template-columns:1fr 1.2fr 74px;gap:6px;align-items:end}
.party .prowtop .rowbtns{display:flex;gap:4px;justify-content:flex-end;padding-bottom:2px}
.rowbtns button{background:var(--well);border:1px solid var(--hair2);color:var(--muted);border-radius:6px;font-size:11px;width:22px;height:22px;line-height:1;cursor:pointer;padding:0}
.rowbtns button:hover{color:var(--text);border-color:var(--acc)}
.rowbtns button.del:hover{color:var(--err);border-color:var(--err)}
.rowbtns button:disabled{opacity:.25;cursor:default}
.rowbtns button:disabled:hover{color:var(--muted);border-color:var(--hair2)}
.phead{display:grid;grid-template-columns:1.1fr 1fr 1fr 24px;gap:4px;margin:8px 0 2px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.prow{display:grid;grid-template-columns:1.1fr 1fr 1fr 24px;gap:4px;margin-bottom:4px;align-items:center}
.prow input{min-width:0;width:100%;background:var(--well);color:var(--text);border:1px solid var(--hair);border-radius:6px;
  padding:6px 8px;font:13px var(--sans);box-shadow:none}
.prow input:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.prow .rowx{background:none;border:0;color:var(--faint);font-size:12px;cursor:pointer;padding:2px}
.prow .rowx:hover{color:var(--err)}
.addline{background:none;border:0;color:var(--acc);font:500 12.5px var(--sans);cursor:pointer;padding:8px 0;text-align:left}
.addline:hover{text-decoration:underline}

/* the whole page always in frame */
.sheetscale{transform-origin:top left}

/* ── squeeze tier ───────────────────────────────────────────────────────── */
@media (max-height:700px){
  .titlebar{padding-top:10px}
  .rail{max-height:calc(100vh - 150px)}
  .sheetport{max-height:calc(100vh - 250px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ── print: the sheet IS the page ───────────────────────────────────────── */
@media print{
  body{background:#fff}
  header.site,.titlebar,.rail,.deskbar,.bar,.prose,footer.site,nav,.bench{display:none!important}
  .forge{border:0;box-shadow:none;border-radius:0;margin:0}
  .forge-body{display:block}
  .deskside{padding:0;background:none}
  .sheetport{all:unset;display:block}
  .sheetscale{transform:none!important}
  .sheet{width:auto;min-height:0;box-shadow:none;padding:0;color:#000}
  .sheet .s-day{break-after:avoid}
  .sheet .s-seg{break-inside:avoid}
  @page{margin:16mm}
}