/* ============================================================================
   JACK F. ALTRADES — global mobile-first design system
   ----------------------------------------------------------------------------
   ONE stylesheet. Every page links only this (+ the IBM Plex / Special Elite
   font line). No per-page :root token blocks — change a token here, the whole
   app moves.

   SKIN: the existing "field-manual" identity — cream paper, ink, blueprint
   grid, IBM Plex (Serif italic display / Sans body / Mono labels), Special
   Elite stamps, crisp hairline rules, blue accent. UNCHANGED from the app you
   know. What changed is the STRUCTURE: built thumb-first — single column,
   52px tap targets, top app bar, bottom nav, bottom sheets.
   ============================================================================ */

/* ─── 1. TOKENS (mirrored from the original shell — single source of truth) ─ */
:root{
  /* paper + surfaces */
  --paper:#f4ecd8;
  --paper-2:#ecdfba;
  --paper-3:#e3d4a8;
  --field:#fbf8ee;            /* card / input surface */
  --field-2:#f5eede;

  /* ink */
  --ink:#1a1814;
  --ink-2:#3f3a31;
  --ink-3:#6f6755;
  --ink-4:#9e947c;

  /* hairline rules */
  --rule:#bfb290;
  --rule-2:#d7ca9f;
  --rule-3:#e7daae;

  /* accents */
  --blue:#13427a;
  --blue-2:#1f5e9e;
  --blue-3:#3a7ab8;
  --blue-wash:#dbe5ef;
  --red:#9a3322;
  --red-wash:#e7d4ce;
  --green:#3a6b2e;
  --green-wash:#dde7d3;
  --amber:#9a6b22;
  --amber-wash:#efe2c5;
  --stamp:rgba(154,51,34,.82);
  --shadow:0 1px 0 rgba(26,24,20,.04),0 12px 36px -18px rgba(26,24,20,.22);

  /* type */
  --f-display:'IBM Plex Serif',Georgia,serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --f-stamp:'Special Elite','IBM Plex Mono',monospace;

  /* radius — crisp, document-like (kept from the original) */
  --r-xs:2px;
  --r-sm:3px;
  --r:4px;
  --r-lg:6px;
  --r-pill:999px;

  /* layout */
  --app-max:540px;
  --tap:52px;
  --nav-h:66px;
  --bar-h:56px;
  --gut:18px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}

/* ─── 2. RESET / BASE ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background-color:var(--paper);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* blueprint grid + paper light — exactly the original atmosphere */
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,255,255,.5),transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%,rgba(120,90,40,.06),transparent 70%),
    linear-gradient(rgba(19,66,122,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,66,122,.07) 1px,transparent 1px),
    linear-gradient(rgba(19,66,122,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,66,122,.03) 1px,transparent 1px);
  background-size:auto,auto,96px 96px,96px 96px,16px 16px,16px 16px;
  background-attachment:fixed;
}
/* fine paper grain */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}

/* ─── 3. APP FRAME ───────────────────────────────────────────────────────── */
.app{
  position:relative;z-index:1;
  max-width:var(--app-max);
  margin:0 auto;
  min-height:100dvh;
  padding-bottom:calc(var(--nav-h) + var(--sab) + 8px);
  background:rgba(251,248,238,.34);
  border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
.screen{padding:14px var(--gut) 28px}
.screen > * + *{margin-top:20px}

/* ─── 4. TOP APP BAR (masthead, compacted) ───────────────────────────────── */
.appbar{
  position:sticky;top:0;z-index:40;
  height:calc(var(--bar-h) + var(--sat));
  padding:var(--sat) var(--gut) 0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,var(--paper-2),rgba(244,236,216,.92));
  backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--ink);
}
.appbar::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--rule)}
.appbar .brand{
  font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:21px;letter-spacing:-.01em;line-height:1;color:var(--ink);
  display:flex;align-items:baseline;gap:1px;
}
.appbar .brand .amp{color:var(--blue);font-style:normal;font-weight:400}
.appbar .brand sup{
  font-family:var(--f-mono);font-style:normal;font-weight:500;font-size:8px;
  letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-left:5px;
}
.appbar-actions{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:42px;height:42px;flex:0 0 auto;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--field);
  display:grid;place-items:center;color:var(--ink-2);
  transition:transform .08s, background .15s, color .15s, border-color .15s;
}
.icon-btn:active{transform:scale(.93);background:var(--paper-3);color:var(--ink);border-color:var(--ink-3)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* in-screen back bar */
.backbar{display:flex;align-items:center;gap:10px;padding:2px 0 4px}
.backbar .icon-btn{width:38px;height:38px}
.backbar .crumb{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}

/* ─── 5. TYPE HELPERS ────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
}
.h1{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:30px;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.h1 em{font-style:italic;color:var(--blue)}
.h2{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:22px;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.lede{color:var(--ink-3);font-size:14px;line-height:1.5}
.muted{color:var(--ink-3)}
.mono{font-family:var(--f-mono)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:11px;padding-bottom:7px;border-bottom:1px solid var(--rule);
}
.section-head .t{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;gap:8px;
}
.section-head .t .ct{
  color:var(--ink-3);background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-pill);padding:0 7px;font-size:10px;
}
.section-head .more{font-family:var(--f-body);font-size:11.5px;font-weight:500;color:var(--blue);letter-spacing:.02em}
.section-head .more:active{color:var(--blue-2)}

/* stamp — the typewriter mark, unchanged in spirit */
.stamp{
  display:inline-block;font-family:var(--f-stamp);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stamp);border:1.5px solid var(--stamp);border-radius:var(--r-xs);
  padding:2px 9px;transform:rotate(-1.5deg);
}

/* ─── 6. HERO ────────────────────────────────────────────────────────────── */
.hero{padding:6px 2px 2px}
.hero .eyebrow{display:block;margin-bottom:9px}
.hero .h1{margin-bottom:9px}
.hero .date{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}

/* ─── 7. CARD ────────────────────────────────────────────────────────────── */
.card{
  background:var(--field);
  border:1px solid var(--rule);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.card.pad{padding:16px}
.card-head{
  padding:11px 15px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper));
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);
}

/* ─── 8. QUICK-ACTION TILES (thumb grid) ─────────────────────────────────── */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.qa{
  position:relative;overflow:hidden;
  min-height:96px;padding:14px;
  background:var(--field);border:1px solid var(--rule);border-radius:var(--r);
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--shadow);
  transition:transform .09s, border-color .15s, background .15s;
}
.qa:active{transform:scale(.975);background:var(--field-2);border-color:var(--ink-3)}
.qa .ico{
  width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--rule);color:var(--blue);
}
.qa .ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qa .lbl{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.qa .sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;margin-top:2px}
.qa.is-primary{background:var(--blue);border-color:var(--blue)}
.qa.is-primary .ico{background:var(--blue-2);border-color:var(--blue-3);color:#fff}
.qa.is-primary .lbl{color:#fff}
.qa.is-primary .sub{color:var(--blue-wash)}
.qa.is-wide{grid-column:1/-1;min-height:auto;flex-direction:row;align-items:center;gap:14px}

/* ─── 9. LIST ROWS ───────────────────────────────────────────────────────── */
.list{display:flex;flex-direction:column;background:var(--field);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:12px 14px;min-height:var(--tap);
  border-bottom:1px solid var(--rule-3);
  transition:background .12s;
}
.row:last-child{border-bottom:none}
.row:active{background:var(--field-2)}
.row .lead{
  width:36px;height:36px;flex:0 0 auto;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--rule);
  font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--blue);
}
.row .lead.ghost{background:transparent;color:var(--ink-3)}
.row .main{min-width:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.row .main .name{display:block;font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .main .sub{display:block;font-family:var(--f-mono);font-size:10px;color:var(--ink-3);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.row .trail{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.row .trail .v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;color:var(--ink)}
.row .trail .v.amt{color:var(--blue)}
.row .trail .v.bad{color:var(--red)}
.row .trail .m{font-family:var(--f-mono);font-size:9.5px;color:var(--ink-4);letter-spacing:.04em}

/* ─── 10. STAT TILES ─────────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.stat{background:var(--field);padding:14px 15px}
.stat .v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:22px;color:var(--ink);letter-spacing:-.02em;line-height:1}
.stat .v.blue{color:var(--blue)}
.stat .v.good{color:var(--green)}
.stat .v.bad{color:var(--red)}
.stat .l{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}

/* ─── 11. PILLS (unchanged variants) ─────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink-4)}
.pill.is-active::before,.pill.is-draft::before{background:var(--ink-3)}
.pill.is-sent::before,.pill.is-on-hold::before{background:var(--amber)}
.pill.is-sent,.pill.is-on-hold{border-color:var(--amber);color:var(--amber);background:var(--amber-wash)}
.pill.is-accepted::before,.pill.is-complete::before,.pill.is-paid::before,.pill.is-in-progress::before{background:var(--green)}
.pill.is-accepted,.pill.is-complete,.pill.is-paid{border-color:var(--green);color:var(--green);background:var(--green-wash)}
.pill.is-declined::before,.pill.is-overdue::before,.pill.is-blocked::before{background:var(--red)}
.pill.is-declined,.pill.is-overdue{border-color:var(--red);color:var(--red);background:var(--red-wash)}

/* CRM pipeline stage chips (shared by crm.html + customers.html) */
.stagechip{display:inline-block;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.stage-lead{background:var(--field);color:var(--ink-3);border-color:var(--rule)}
.stage-contacted{background:var(--blue-wash);color:var(--blue);border-color:var(--blue-3)}
.stage-estimating{background:var(--amber-wash);color:var(--amber);border-color:var(--amber)}
.stage-proposal{background:#eee7fb;color:#6a4caa;border-color:#d6c9f0}
.stage-won{background:var(--green-wash);color:var(--green);border-color:var(--green)}
.stage-lost{background:var(--red-wash);color:var(--red);border-color:var(--red)}

/* ─── 12. BUTTONS (the original button language) ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 18px;border-radius:0;
  font-family:var(--f-body);font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  transition:transform .07s, background .14s, border-color .14s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:active{background:var(--blue-2)}
.btn.ghost{background:transparent;border-color:var(--rule)}
.btn.danger{background:var(--paper);border-color:var(--red);color:var(--red)}
.btn.block{display:flex;width:100%}
.btn.lg{min-height:var(--tap);font-size:14px}
.btn.sm{min-height:38px;font-size:11px;padding:0 12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-row{display:flex;gap:9px;flex-wrap:wrap}
.btn-row .btn{flex:1;min-width:120px}

/* sticky bottom action bar (forms) — above the nav */
.action-bar{
  position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--sab));z-index:35;
  max-width:var(--app-max);margin:0 auto;padding:11px var(--gut);
  background:linear-gradient(180deg,rgba(244,236,216,.7),var(--paper));
  backdrop-filter:blur(8px);border-top:1px solid var(--rule);
  display:flex;gap:10px;
}
.action-bar .btn{flex:1}

/* ─── 13. FORM FIELDS ────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field + .field{margin-top:15px}
.field label{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
  display:flex;justify-content:space-between;align-items:baseline;
}
.field label .unit{color:var(--ink-4);letter-spacing:.08em}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--tap);
  background:var(--field);border:1px solid var(--rule);border-radius:0;
  padding:0 13px;font-size:16px;/* 16px = no iOS zoom */
  color:var(--ink);outline:none;
  transition:border-color .14s, background .14s;
}
.field textarea{padding:12px 13px;min-height:96px;line-height:1.5;resize:vertical;font-family:var(--f-body)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:#fff}
.field input[type=number]{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.field select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236f6755' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;
}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.field-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
/* fields inside a grid row must not inherit the vertical-stack top margin
   (.field + .field is for stacked forms; in a gap-based grid it drops the 2nd cell) */
.field-2 > .field + .field,.field-3 > .field + .field{margin-top:0}

/* segmented control */
.seg{display:flex;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);padding:3px;gap:3px}
.seg button{
  flex:1;min-height:40px;border-radius:var(--r-xs);
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);transition:background .14s,color .14s;
}
.seg button.on{background:var(--blue);color:#fff}

/* search */
.search{position:relative}
.search input{padding-left:40px}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* ─── 14. READOUT (calculator results) ───────────────────────────────────── */
.readout{background:var(--field);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.readout-head{
  padding:9px 15px;background:var(--blue-wash);
  border-bottom:1px solid var(--rule);
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue);
}
.readout-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;border-bottom:1px solid var(--rule-3)}
.readout-row:last-child{border-bottom:none}
.readout-row .n{font-size:13px;color:var(--ink-2)}
.readout-row .v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;color:var(--ink)}
.readout-row .v .u{font-size:10px;color:var(--ink-4);margin-left:4px}
.readout-row.hot{background:var(--blue-wash)}
.readout-row.hot .n{color:var(--blue)}
.readout-row.hot .v{color:var(--blue);font-size:19px}

.note{
  background:var(--paper);border-left:3px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:11px 14px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
}

/* ─── 15. EMPTY / SKELETON ───────────────────────────────────────────────── */
.empty{padding:30px 20px;text-align:center;color:var(--ink-3)}
.empty .big{font-size:28px;margin-bottom:8px;opacity:.7}
.empty p{font-size:13px;line-height:1.5;max-width:300px;margin:0 auto;font-style:italic}
.skel{background:linear-gradient(90deg,var(--paper-3) 25%,var(--paper-2) 50%,var(--paper-3) 75%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r-xs)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ─── 16. BOTTOM SHEET ───────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(26,24,20,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:61;
  max-width:var(--app-max);margin:0 auto;
  background:var(--paper);border:1px solid var(--ink);border-bottom:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -10px 40px -12px rgba(26,24,20,.5);
  padding:8px var(--gut) calc(18px + var(--sab));
  transform:translateY(110%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  max-height:84dvh;overflow-y:auto;
}
.sheet.open{transform:translateY(0)}
.sheet .grip{width:38px;height:4px;border-radius:99px;background:var(--rule);margin:6px auto 12px}
.sheet .sheet-title{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:20px;margin-bottom:3px;color:var(--ink)}
.sheet .grid-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.sheet .grid-nav a{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:15px 8px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--field);
  transition:background .12s,border-color .12s;
}
.sheet .grid-nav a:active{background:var(--field-2);border-color:var(--ink-3)}
.sheet .grid-nav .ico{width:30px;height:30px;color:var(--blue)}
.sheet .grid-nav .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sheet .grid-nav span{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-2);text-align:center;text-transform:uppercase}

/* ─── 17. BOTTOM NAV (thumb spine) ───────────────────────────────────────── */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-width:var(--app-max);margin:0 auto;
  height:calc(var(--nav-h) + var(--sab));
  padding-bottom:var(--sab);
  display:flex;
  background:linear-gradient(180deg,rgba(244,236,216,.94),var(--paper));
  backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-top:1px solid var(--ink);
}
.bottomnav a{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--ink-3);transition:color .15s;
}
.bottomnav a .ic{width:23px;height:23px}
.bottomnav a .ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bottomnav a span{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.bottomnav a:active{color:var(--ink-2)}
.bottomnav a.on{color:var(--blue)}
.bottomnav a.on::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:32px;height:2px;background:var(--blue);
}

/* ─── 18. TOAST (elevated card + status icon) ────────────────────────────── */
#toast-host{position:fixed;top:calc(var(--sat,0px) + 14px);right:14px;left:auto;bottom:auto;z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;width:min(94vw,380px)}
.toast{
  pointer-events:auto;display:flex;align-items:flex-start;gap:11px;width:100%;
  background:var(--field);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:12px 12px 12px 14px;
  box-shadow:0 10px 30px -8px rgba(26,24,20,.35),0 1px 0 rgba(26,24,20,.05);
  font-family:var(--f-body);font-size:13.5px;line-height:1.4;
  animation:toast-in .22s cubic-bezier(.2,.7,.2,1);
}
.toast.is-out{animation:toast-out .18s ease forwards}
.toast-ico{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-weight:700;font-size:13px;background:var(--blue);color:#fff;margin-top:1px}
.toast.is-ok    .toast-ico{background:var(--green)}
.toast.is-error .toast-ico{background:var(--red)}
.toast.is-warn  .toast-ico{background:var(--amber)}
.toast-msg{flex:1;min-width:0;padding-top:1px;word-break:break-word}
.toast-x{flex:none;background:none;border:0;color:var(--ink-3);font-family:var(--f-mono);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;margin:-2px -2px 0 0}
.toast-x:hover{color:var(--ink)}
@keyframes toast-in{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toast-out{to{transform:translateX(20px);opacity:0}}
@media (max-width:560px){#toast-host{left:10px;right:10px;width:auto;align-items:stretch}}

/* ─── 18b. MODAL DIALOG (confirm + shared dialogs from jack-shell.js) ───────
   These pages use jack-shell.js's confirmDialog()/openDialog() but load app.css
   (not jack-shell.css), so the .shell-dialog markup must be styled here to match
   our sheets + toasts. Without this the dialog falls back to the raw native
   <dialog> box (the ugly top-left alert). */
dialog.shell-dialog{
  max-width:min(440px,calc(100vw - 28px));width:100%;
  padding:0;border:1px solid var(--ink);border-radius:var(--r-lg);
  background:var(--paper);color:var(--ink);
  box-shadow:0 24px 60px -18px rgba(26,24,20,.55),0 1px 0 rgba(26,24,20,.05);
  overflow:hidden;
}
dialog.shell-dialog::backdrop{background:rgba(26,24,20,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
dialog.shell-dialog[open]{display:flex;flex-direction:column}

/* injected drag bar — kept minimal: only the close affordance, top-right.
   The title is hidden (the .dialog-head h2 already names the dialog) and the
   bar is non-draggable so a transient confirm always stays centered. */
.shell-dialog .jack-dlg-header{
  display:flex;align-items:center;justify-content:flex-end;
  padding:8px 10px 0;background:none;border:none;cursor:default;pointer-events:none;
}
.shell-dialog .jack-dlg-title,.shell-dialog .jack-dlg-min{display:none}
.shell-dialog .jack-dlg-close{
  pointer-events:auto;flex:none;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:17px;line-height:1;color:var(--ink-3);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.shell-dialog .jack-dlg-close:hover{color:var(--red);border-color:var(--rule);background:var(--field)}

.shell-dialog .dialog-head{padding:2px 22px 0;border:none;background:none}
.shell-dialog .dialog-head h2{
  font-family:var(--f-display);font-style:italic;font-weight:400;font-size:21px;
  letter-spacing:-.01em;margin:0;color:var(--ink);
}
.shell-dialog .dialog-body{padding:11px 22px 4px;font-family:var(--f-body);font-size:14px;line-height:1.5;color:var(--ink-2)}
.shell-dialog .dialog-foot{
  display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;
  padding:16px 22px 18px;border:none;background:none;
}
.shell-dialog .dialog-foot .btn{min-width:108px}

/* button variant aliases — jack-shell.js emits is-primary/is-ghost/is-danger */
.btn.is-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.is-primary:active{background:var(--blue-2)}
.btn.is-ghost{background:transparent;border-color:var(--rule)}
.btn.is-danger{background:var(--paper);border-color:var(--red);color:var(--red)}

/* minimized-dialog chip host (jack-shell.js _addMinimizedChip) */
#jack-min-host{position:fixed;left:14px;bottom:calc(var(--nav-h) + var(--sab) + 14px);display:flex;gap:6px;flex-wrap:wrap;z-index:8000;pointer-events:none}
.jack-min-chip{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--blue);color:#fff;border:1px solid var(--ink);border-radius:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;cursor:pointer;box-shadow:0 2px 8px rgba(26,24,20,.25)}
.jack-min-chip:hover{background:var(--blue-2)}
.jack-min-chip .glyph{opacity:.8;font-size:13px}

/* ─── 19. ENTRANCE MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards}
  .rise:nth-child(1){animation-delay:.02s}.rise:nth-child(2){animation-delay:.07s}
  .rise:nth-child(3){animation-delay:.12s}.rise:nth-child(4){animation-delay:.17s}
  .rise:nth-child(5){animation-delay:.22s}.rise:nth-child(6){animation-delay:.27s}
  .rise:nth-child(7){animation-delay:.32s}.rise:nth-child(8){animation-delay:.37s}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* keep the assistant chat launcher clear of the bottom nav, and out of the way while a sheet is open */
.jchat-launch,.jchat-bubble{bottom:calc(var(--nav-h) + var(--sab) + 14px)!important}
body.sheet-open .jchat-launch,body.sheet-open .jchat-bubble{display:none!important}

/* ─── 20. AUTH SCREENS (login / setup / signup — no shell) ───────────────── */
.authwrap{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;max-width:440px;margin:0 auto;padding:28px 20px calc(28px + var(--sab))}
.authwrap .authhead{text-align:center;margin-bottom:20px}
.authwrap .authhead h1{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:32px;color:var(--ink);margin-top:14px;letter-spacing:-.02em;line-height:1.05}
.authwrap .authhead h1 .amp{color:var(--blue);font-style:normal}
.authwrap .authfoot{text-align:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3);margin-top:18px}
.authwrap .authfoot a{color:var(--blue)}
.show-pw{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.show-pw input{width:auto;min-height:0;accent-color:var(--blue)}
.formsg{font-family:var(--f-mono);font-size:11.5px;padding:9px 11px;border-left:3px solid var(--red);background:var(--red-wash);color:var(--red);border-radius:0 var(--r-sm) var(--r-sm) 0}
.formsg.ok{border-left-color:var(--green);background:var(--green-wash);color:var(--green)}

/* utility */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.hide{display:none!important}

/* ─── 21. RESPONSIVE — ONE layout, three tiers (mobile / tablet / desktop) ─────
   MOBILE (<768): the base styles above — phone column (--app-max) + bottom tab
   bar. TABLET (768–1023): wider column + denser grids, bottom bar kept (touch).
   DESKTOP (≥1024): the bottom bar becomes a left sidebar and the frame uses the
   full width. Same HTML throughout — purely responsive CSS. */

/* ===== TABLET & UP (≥768) — shared widening ===== */
@media (min-width:768px){
  .qa-grid{grid-template-columns:repeat(4,1fr)}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  /* catalogs (calculators, presets, assemblies…) → responsive CARD GRID.
     Opt-in via `.list.cards`; record lists stay rows. */
  .list.cards{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;
    background:none; border:none; border-radius:0; overflow:visible; box-shadow:none;
  }
  .list.cards .row{
    border:1px solid var(--rule); border-radius:var(--r-lg);
    background:var(--field); box-shadow:var(--shadow); min-height:66px;
    transition:transform .12s, box-shadow .12s, border-color .12s;
  }
}

/* ===== TABLET ONLY (768–1023) — wider phone column, keep the bottom tab bar ===== */
@media (min-width:768px) and (max-width:1023px){
  :root{ --app-max:720px; }
  .screen{padding:18px 24px 34px}
  .field{max-width:560px}
  .field-2{max-width:560px}
}

/* ===== DESKTOP (≥1024) — bottom bar → left sidebar, full-width frame ===== */
@media (min-width:1024px){
  /* bottom thumb-spine → fixed LEFT sidebar (same .bottomnav element) */
  .bottomnav{
    top:0; bottom:0; left:0; right:auto;
    width:236px; height:100dvh; max-width:none; margin:0;
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    gap:2px; padding:16px 12px;
    border-top:none; border-right:1px solid var(--ink);
    background:linear-gradient(180deg,var(--paper-2),rgba(244,236,216,.92));
  }
  .bottomnav a{
    flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:13px;
    padding:11px 15px; border-radius:var(--r);
  }
  .bottomnav a .ic,.bottomnav a .ic svg{width:21px;height:21px}
  .bottomnav a span{font-size:11px;letter-spacing:.08em}
  .bottomnav a.on{background:var(--field-2)}
  .bottomnav a.on::before{top:50%;left:0;transform:translateY(-50%);width:3px;height:22px}

  /* app frame: drop the phone clamp, sit right of the sidebar, use the width */
  .app{ max-width:none; margin:0 0 0 236px; border:none; padding-bottom:36px; }
  .appbar{padding-left:32px;padding-right:32px}
  /* content gets a comfortable, centered reading column inside the wide area */
  .screen{max-width:1100px;margin:0 auto;padding:24px 32px 48px}
  .screen > * + *{margin-top:24px}

  /* forms read as a tidy column on desktop — not 1100px-wide inputs */
  .field{max-width:560px}
  .field-2{max-width:560px}
  .field-3{max-width:640px}

  /* a touch wider catalog cards at desktop */
  .list.cards{grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}

  /* premium hover affordances (pointer devices have hover; touch doesn't) */
  .list .row{cursor:pointer}
  .list .row:hover{background:var(--field-2)}
  .list.cards .row:hover{border-color:var(--blue); transform:translateY(-1px); box-shadow:0 6px 18px -8px rgba(19,66,122,.3); background:var(--field)}
  .qa{transition:transform .12s, box-shadow .12s, border-color .12s, background .12s}
  .qa:hover{border-color:var(--blue); box-shadow:0 6px 18px -8px rgba(19,66,122,.22); transform:translateY(-1px)}
  .qa.is-primary:hover{box-shadow:0 8px 22px -8px rgba(19,66,122,.5)}

  /* no bottom nav to clear → seat the Jack launcher in the corner */
  .jchat-launch,.jchat-bubble{bottom:18px!important}
}