/* =====================================================================
   Daft Dad · shared interface system (admin + maker portal)
   ---------------------------------------------------------------------
   One source of truth for hierarchy, type, feedback and accessibility,
   following Apple's interface principles. Every page loads this LAST so
   it settles the look over the older per-page layers.

   Edit THIS file (design/ui.css), then run scripts/sync-ui.sh — it copies
   it into admin/ and portal/, which are what Netlify deploys.
   ===================================================================== */

:root {
  /* colour — text in three strengths, one accent, colour = meaning only */
  --ui-text: #1d1d1f;
  --ui-text-2: #6e6e73;          /* secondary: supporting detail */
  --ui-text-3: #86868b;          /* tertiary: labels, timestamps */
  --ui-sep: #e5e5ea;             /* hairline separators */
  --ui-fill: #f2f2f7;            /* quiet fills: segmented track, chips */
  --ui-bg: #f5f5f7;
  --ui-card: #ffffff;
  --ui-accent: #227A86;
  --ui-accent-press: #1b616b;
  --ui-accent-soft: #e6f0ef;
  --ui-red: #c8372b;   --ui-red-soft: #fdecea;
  --ui-amber: #8a6100; --ui-amber-soft: #faf3e2;
  --ui-focus: rgba(34, 122, 134, .45);

  /* type scale (rem, so it grows with the reader's text-size setting) */
  --ui-title: 1.75rem;           /* 28 — screen title */
  --ui-title2: 1.25rem;          /* 20 — section title */
  --ui-title3: 1.0625rem;        /* 17 — card / row title */
  --ui-body: .9375rem;           /* 15 */
  --ui-foot: .8125rem;           /* 13 — supporting text */
  --ui-cap: .75rem;              /* 12 — labels, badges */

  --ui-radius: 12px; --ui-radius-lg: 16px;
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --ui-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

/* ---------- type: weight + size + leading as a set; tracking by size ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--ui-font) !important; color: var(--ui-text); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1 { font-family: var(--ui-font-display) !important; font-size: var(--ui-title) !important;
  font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -.022em !important; }
h2 { font-family: var(--ui-font-display) !important; font-weight: 600 !important;
  line-height: 1.25 !important; letter-spacing: -.016em !important; }
h3 { font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; }
.sub { color: var(--ui-text-2) !important; font-size: var(--ui-body) !important; line-height: 1.45 !important; }
.section, .section-h { font-size: var(--ui-cap) !important; font-weight: 600 !important; text-transform: uppercase;
  letter-spacing: .06em !important; color: var(--ui-text-3) !important; }
/* money and counts line up in columns */
.amt, .n, .tot, .wk-n, .todo-val, td, .recon .m b, .olist-due, .tk-at { font-variant-numeric: tabular-nums; }

/* ---------- top bar: a translucent material, content scrolls beneath ---------- */
header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}
/* wayfinding: the current section is unmistakable */
.nav a { border-radius: 8px; transition: background-color .12s, color .12s; }
.nav a.active { color: var(--ui-accent) !important; font-weight: 600 !important;
  background: var(--ui-accent-soft) !important; }
/* Sign out is a quiet, low-priority action — never a primary button */
.signout, #out { background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--ui-accent) !important; font-weight: 500 !important; font-size: var(--ui-foot) !important;
  padding: 8px 10px !important; min-height: 0 !important; white-space: nowrap; }

/* ---------- controls: feedback on press, never on release ---------- */
button, .btn, a.btn, .navbtn, .olist-row, .tk, .todo-row, .sup, .otk-row, .seg button {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn, a.btn { transition: transform 100ms ease-out, background-color .12s, opacity .12s; }
.btn:active:not(:disabled), a.btn:active, .navbtn:active, .seg button:active { transform: scale(.97); }
.olist-row:active, .tk:active, .todo-row:active, .sup:active, .otk-row:active, .row[data-id]:active {
  transform: scale(.995); background: #fafafa !important; }
.btn:disabled { cursor: not-allowed; }
/* destructive actions read as destructive */
.btn.danger, .btn.red, .link.oos, .oos { color: var(--ui-red) !important; }

/* one segmented control everywhere */
.seg { background: var(--ui-fill) !important; border-radius: 10px !important; padding: 3px !important; gap: 2px !important; }
.seg button { border-radius: 8px !important; font-size: .875rem !important; font-weight: 500 !important;
  color: var(--ui-text-2) !important; min-height: 34px; }
.seg button.on { background: #fff !important; color: var(--ui-text) !important; font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1) !important; }

/* one pill / badge shape everywhere */
.pill, .tkstat, .tkchip, .tag { border-radius: 999px !important; font-size: var(--ui-cap) !important;
  font-weight: 600 !important; letter-spacing: .01em; padding: 3px 10px !important; line-height: 1.35 !important;
  border: 0 !important; box-shadow: none !important; white-space: nowrap; }
.pill.wait, .pill.part, .pill.paused { background: var(--ui-amber-soft) !important; color: var(--ui-amber) !important; }
.unread-dot, .navdot, .segn.danger { background: #e2574c !important; color: #fff !important; }

/* inputs: 16px stops phones zooming in; a clear focus ring */
input, select, textarea { font-family: inherit; }
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }

/* ---------- keyboard: every control shows where focus is ---------- */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ui-focus) !important; outline-offset: 2px !important; border-radius: 8px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0 !important; }

/* ---------- touch: comfortable targets on phones ---------- */
@media (pointer: coarse) {
  .btn, a.btn, .seg button, .navmenu button, .nav a, .backlink, .linklike { min-height: 44px; }
  .btn.sm { min-height: 40px; }
}

/* ---------- accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:active, .olist-row:active, .tk:active, .todo-row:active, .seg button:active { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  header { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ui-text-2: #3a3a3c; --ui-text-3: #48484a; --ui-sep: #8e8e93; }
  header { background: #fff !important; backdrop-filter: none; border-bottom-color: #8e8e93 !important; }
  .row, .card, .job, .wo, .olist-row, .tk, .todo-row, .msgpanel, .makers, .convo, .sup { border-color: #8e8e93 !important; }
  .sub, .meta, .rmeta, .olist-meta, .tk-prev { color: var(--ui-text-2) !important; }
}

@media print { header, .navmenu, .navtoggle { display: none !important; } }

/* the admin has one user — the email in the bar adds noise, and only some pages had it */
header span.who, header .r > span { display: none !important; }

/* ---------- consistency fixes from the design review ---------- */
/* one content width across every admin page, so nothing jumps between tabs */
[data-app="admin"] main { max-width: 1080px !important; margin-inline: auto !important; }
/* buttons that are links never look like links; links inside help text are teal */
a.btn, a.btn:hover { text-decoration: none !important; }
.guide a, .note a, .sub a, .help a, .map-note a, .infobar a { color: var(--ui-accent) !important;
  font-weight: 600; text-decoration: none !important; }
.guide a:hover, .note a:hover, .sub a:hover { text-decoration: underline !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-accent); width: 18px; height: 18px; }
/* back links: one shape everywhere ("‹ Where you're going") */
.backlink, a.back { color: var(--ui-accent) !important; font-weight: 500 !important; text-decoration: none !important; }
/* long text inside flex rows wraps instead of pushing the page wider */
.sup-main, .tk-main, .olist-main, .todo-main, .otk-sub, .otk-maker, .convo, .thread, .rt > div, .detail { min-width: 0; }
.m2-bubble, .msg-bubble, .exhead, .rmeta { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  [data-app="admin"] main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* tab bars scroll sideways rather than wrapping onto two lines */
  .seg { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: 0 0 auto; }
  /* order rows: the price stays on the title line */
  [data-app="admin"] #list .row { position: relative; }
  [data-app="admin"] #list .rt { padding-right: 76px; }
  [data-app="admin"] #list .rt .amt { position: absolute; right: 16px; top: 14px; }
}
/* admin phone menu button: says where you are, like the maker portal */
.navtoggle { width: auto !important; padding: 0 12px !important; gap: 8px; font-size: 15px !important; font-weight: 600; white-space: nowrap; }
.navtoggle .navdot-sm { width: 8px; height: 8px; border-radius: 50%; background: #e2574c; }

/* ---------- in-app sheet (replaces browser alert/confirm/prompt) + toast ---------- */
.ui-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 100; display: flex;
  align-items: flex-end; justify-content: center; padding: 16px; }
@media (min-width: 641px) { .ui-scrim { align-items: center; } }
.ui-sheet { background: #fff; border-radius: 18px; width: 100%; max-width: 440px; padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 10px; }
.ui-sheet h2 { font-size: var(--ui-title2) !important; margin: 0; }
.ui-sheet p { margin: 0; color: var(--ui-text-2); line-height: 1.45; }
.ui-sheet label { font-size: var(--ui-foot); font-weight: 600; color: var(--ui-text-2); margin-top: 6px; }
.ui-sheet input { width: 100%; padding: 11px 13px; border: 1px solid #d2d2d7; border-radius: 10px; font: inherit; }
.ui-sheet .ui-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap-reverse; }
.ui-sheet .ui-actions button { flex: 1 1 140px; min-height: 46px; border-radius: 12px; border: 0; font: inherit;
  font-weight: 600; cursor: pointer; }
.ui-sheet .ui-cancel { background: var(--ui-fill); color: var(--ui-text); }
.ui-sheet .ui-ok { background: var(--ui-accent); color: #fff; }
.ui-sheet .ui-ok.danger { background: var(--ui-red); }
.ui-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 110; background: rgba(29, 29, 31, .94); color: #fff; padding: 12px 18px; border-radius: 14px;
  font-size: .9375rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px);
  text-align: center; }
.field-err { color: var(--ui-red); font-size: var(--ui-foot); font-weight: 500; margin: 6px 0 0; }
.input-err { border-color: var(--ui-red) !important; }
@media (prefers-reduced-motion: no-preference) {
  .ui-sheet { animation: ui-rise .22s cubic-bezier(.2, .8, .2, 1); }
  .ui-toast { animation: ui-fade .2s ease-out; }
}
@keyframes ui-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ui-fade { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

/* jump-to links land below the sticky top bar, not under it */
[id] { scroll-margin-top: 76px; }

/* the unread badge, styled once for every page (it was only defined on three) */
.unread-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 6px; border-radius: 18px; font-size: 11.5px; font-weight: 700; line-height: 1;
  vertical-align: middle; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* admin menu: one clean row on computers; the hamburger takes over below 1100px so the
   ten links never wrap onto a second line (James, 2026-10-21) */
html[data-app="admin"] header .nav { flex-wrap: nowrap; }
@media (max-width: 1099px) {
  html[data-app="admin"] header { position: relative; }
  html[data-app="admin"] header .nav { display: none; position: absolute; top: 54px; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid #e1e1e6; flex-direction: column; align-items: stretch; padding: 6px 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .1); z-index: 40; gap: 2px; }
  html[data-app="admin"] header.nav-open .nav { display: flex; }
  html[data-app="admin"] header .nav a { padding: 12px !important; border-radius: 8px; width: 100%; font-size: 15px !important; }
  html[data-app="admin"] header .navtoggle { display: inline-flex !important; align-items: center; justify-content: center;
    margin-left: auto; height: 38px; border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; color: var(--text, #1d1d1f); cursor: pointer; }
  html[data-app="admin"] header .who { display: none; }
  html[data-app="admin"] header .signout { margin-left: 6px !important; }
}