/* Hifz: design tokens and layout. Colours/type follow the approved Claude Design handoff (dark, calm, strength = luminance,
   weakness = the only warm colour). Dynamic values are applied inline by the UI modules; this file owns structure and responsiveness. */
:root {
  --bg: oklch(0.16 0.007 70); --fg: oklch(0.93 0.012 80); --fg-hi: oklch(0.96 0.012 80);
  --line: oklch(0.22 0.008 70); --line-2: oklch(0.25 0.008 70); --line-3: oklch(0.225 0.008 70); --line-4: oklch(0.235 0.008 70);
  --muted: oklch(0.62 0.015 75); --muted-2: oklch(0.66 0.015 75); --dim: oklch(0.5 0.012 75);
  --cream: oklch(0.9 0.03 82); --ink: oklch(0.18 0.008 70); --btn-line: oklch(0.34 0.01 75);
  --warm: oklch(0.8 0.12 45); --surface: oklch(0.215 0.008 70);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --arabic: 'Noto Naskh Arabic', 'Amiri', serif;
  --bar-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font-family: var(--sans); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; }
#app { min-height: 100%; display: flex; flex-direction: column; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; border-radius: 4px; }
::selection { background: oklch(0.4 0.04 80); }
.serif { font-family: var(--serif); }
.tnum { font-variant-numeric: tabular-nums; }
.kicker { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
[hidden] { display: none !important; }
svg text { font-family: var(--sans); }

/* ---- app bar ---- */
.bar { height: var(--bar-h); flex: none; display: flex; align-items: center; gap: 36px; padding: 0 36px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 20; }
.brand { font: 500 20px var(--serif); letter-spacing: 0.01em; }
.tabs { display: flex; gap: 26px; font-size: 14px; color: var(--muted); }
.tabs a { padding: 20px 0 19px; transition: color 150ms; }
.tabs a:hover { color: var(--fg-hi); }
.tabs a.on { color: var(--fg-hi); box-shadow: inset 0 -1px 0 var(--fg-hi); }
.sp { flex: 1; }
.date { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pill { font-size: 13.5px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--btn-line); color: oklch(0.9 0.012 80); white-space: nowrap; transition: background 150ms, border-color 150ms; }
.pill:hover { background: oklch(0.22 0.01 70); }
.pill.solid { background: var(--cream); color: var(--ink); border-color: transparent; font-weight: 500; }
.pill.solid:hover { background: oklch(0.94 0.03 82); }
.pill.big { font-size: 16px; padding: 14px 30px; }
.pill.dashed { border: 1.5px dashed var(--cream); color: oklch(0.95 0.02 82); font-weight: 500; }
.pill.sm { font-size: 13px; padding: 7px 14px; }
.pill[disabled] { opacity: 0.4; cursor: default; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: color 150ms, background 150ms; }
.icon-btn:hover { color: var(--fg-hi); background: oklch(0.22 0.01 70); }
.link { color: oklch(0.7 0.015 75); cursor: pointer; font-size: 13px; }
.link:hover { color: var(--fg-hi); }
.bottom-tabs { display: none; }
#screen { flex: 1; min-height: 0; outline: none; display: flex; flex-direction: column; }

/* ---- generic rows / stat strips ---- */
.stats4 { display: grid; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.row-k { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-4, oklch(0.235 0.008 70)); font-size: 13px; }
.row-k > :first-child { color: var(--muted); }
.list-row { display: grid; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-3); cursor: pointer; transition: background 120ms; }
.list-row:hover { background: oklch(0.18 0.008 70); }
.spine { height: 1px; background: var(--line-2); }

/* ---- map ---- */
.screen-map { flex: 1; display: grid; grid-template-columns: minmax(0, 920px) minmax(360px, 1fr); min-height: 0; }
.map-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px; min-height: 0; }
.map-wrap { position: relative; width: min(100%, 800px, calc(100vh - var(--bar-h) - 40px)); aspect-ratio: 1; }
.map-wrap svg { display: block; width: 100%; height: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.map-center { position: absolute; left: 50%; top: 50%; width: 47%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.map-center > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 180ms ease; }
.map-legend { position: absolute; left: 36px; bottom: 28px; display: flex; flex-direction: column; gap: 9px; font-size: 12px; color: oklch(0.64 0.015 75); }
.map-legend > div { display: flex; align-items: center; gap: 9px; }
.map-hint { position: absolute; right: 28px; bottom: 28px; font-size: 12px; color: oklch(0.52 0.012 75); }
.inspector { border-left: 1px solid var(--line); padding: 28px 40px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
.back { font-size: 13px; color: oklch(0.72 0.015 75); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.back:hover { color: oklch(0.95 0.012 80); }
.esc { font-size: 12px; color: var(--dim); padding: 2px 7px; border: 1px solid oklch(0.28 0.008 70); border-radius: 4px; }
.bars { display: flex; align-items: flex-end; border-bottom: 1px solid oklch(0.3 0.008 70); }
.bar-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: pointer; }
.bar-col > i { display: block; width: 100%; border-radius: 2px 2px 0 0; transition: box-shadow 120ms; }

/* ---- sheet / toast ---- */
.sheet { position: fixed; inset: 0; z-index: 50; background: oklch(0.1 0.005 70 / 0.62); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); }
.sheetbox { background: oklch(0.2 0.009 70); border: 1px solid oklch(0.3 0.01 70); border-radius: 16px; box-shadow: 0 30px 80px oklch(0 0 0 / 0.55); padding: 24px 26px; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.sheetbox.wide { width: min(860px, 100%); }
.sheetbox h2 { margin: 0 0 6px; font: 400 26px/1.15 var(--serif); }
.sheetbox p { color: var(--muted-2); margin: 6px 0 14px; line-height: 1.5; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 60; background: oklch(0.93 0.012 80); color: var(--ink); padding: 10px 14px 10px 18px; border-radius: 999px; font-size: 13.5px; display: flex; gap: 14px; align-items: center; box-shadow: 0 12px 40px oklch(0 0 0 / 0.5); max-width: calc(100vw - 32px); }
.toast-act { font-weight: 600; border: 1px solid oklch(0.18 0.008 70 / 0.4); border-radius: 999px; padding: 3px 12px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 13px; color: var(--muted-2); }
.field input, .field select, .field textarea { background: oklch(0.17 0.007 70); color: var(--fg); border: 1px solid oklch(0.3 0.01 70); border-radius: 8px; padding: 9px 11px; font: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cream); outline-offset: 1px; }

/* ---- today ---- */
.screen-today { flex: 1; display: grid; grid-template-columns: minmax(0, 920px) minmax(340px, 1fr); min-height: 0; }
.today-main { padding: 34px 48px 32px; display: flex; flex-direction: column; min-width: 0; }
.today-side { border-left: 1px solid var(--line); padding: 34px 40px 32px; display: flex; flex-direction: column; min-width: 0; }
.focus-bar { height: var(--bar-h); flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 36px; border-bottom: 1px solid var(--line); }
.tile { position: relative; width: 50px; height: 150px; border-radius: 6px; border: 1px solid transparent; overflow: hidden; cursor: pointer; transition: filter 120ms; flex: none; }
.tile:hover { filter: brightness(1.12); }
.tile .fill { position: absolute; left: 0; right: 0; bottom: 0; }
.tile .num { position: absolute; left: 0; right: 0; top: 9px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gap-join { position: relative; width: 14px; height: 150px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 3px; flex: none; }
.gap-join:hover { background: oklch(0.21 0.008 70); }
.tiles-row { display: flex; align-items: flex-start; width: max-content; min-width: 100%; }
.tiles-scroll { position: relative; overflow-x: auto; padding: 78px 0 4px; margin: 0 -8px; }
.pop { position: absolute; width: 380px; background: oklch(0.215 0.009 70); border: 1px solid oklch(0.3 0.01 70); border-radius: 14px; box-shadow: 0 24px 60px oklch(0 0 0 / 0.5); padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; z-index: 5; }
.grade-btn { height: 64px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; position: relative; background: oklch(0.185 0.008 70); }
.grade-btn:hover { background: oklch(0.27 0.012 70); }
.trail-chip { display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 12px; border-radius: 999px; border: 1px solid oklch(0.3 0.01 70); font-size: 13px; cursor: pointer; }
.trail-chip .x { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dim2, oklch(0.55 0.012 75)); font-size: 14px; }
.trail-chip .x:hover { background: oklch(0.27 0.01 70); color: oklch(0.9 0.012 80); }
.rep-row { display: grid; grid-template-columns: 44px 200px minmax(0, 1fr) minmax(0, 470px); gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-3); }
.chip-grade { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 8px 12px; border-radius: 999px; border: 1px solid oklch(0.32 0.01 75); cursor: pointer; }
.chip-grade:hover { background: oklch(0.22 0.01 70); }

/* ---- stats ---- */
.screen-stats { flex: 1; overflow-y: auto; }
.stats-sec { padding: 0 48px 44px; display: flex; flex-direction: column; }
.stats-sec h3 { margin: 16px 0 0; font: 400 40px/1.15 var(--serif); letter-spacing: -0.01em; }
.stats-sec .sub { font-size: 15px; line-height: 1.55; color: oklch(0.72 0.015 75); margin-top: 8px; max-width: 980px; text-wrap: pretty; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid oklch(0.28 0.008 70); }
.seg button { font-size: 13px; padding: 5px 14px; border-radius: 999px; color: oklch(0.72 0.015 75); }
.seg button.on { background: var(--cream); color: var(--ink); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tip { position: absolute; width: 230px; padding: 12px 14px; border-radius: 10px; background: oklch(0.21 0.009 70); border: 1px solid oklch(0.3 0.01 70); box-shadow: 0 16px 40px oklch(0 0 0 / 0.45); pointer-events: none; display: flex; flex-direction: column; gap: 7px; z-index: 5; }
.stats-two { display: grid; grid-template-columns: minmax(0, 820px) minmax(0, 1fr); gap: 44px; margin-top: 22px; }
.mobile-only { display: none; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .screen-map, .screen-today { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .inspector { padding: 24px 28px; } .today-main { padding: 28px 32px; } .today-side { padding: 28px 28px; }
  .stats-two { grid-template-columns: minmax(0, 1fr); } .stats-sec { padding: 0 32px 40px; }
}
@media (max-width: 820px) {
  :root { --bar-h: 52px; }
  .bar { padding: 0 16px; gap: 14px; } .tabs { display: none; } .date, #btn-log { display: none; } .sp { flex: 1; }
  .brand { font-size: 19px; }
  .bottom-tabs { display: flex; position: sticky; bottom: 0; z-index: 20; background: var(--bg); border-top: 1px solid oklch(0.26 0.008 70); padding: 6px 0 calc(6px + var(--safe-b)); justify-content: space-around; }
  .bottom-tabs a { flex: 1; text-align: center; padding: 10px 0 8px; font-size: 12.5px; color: oklch(0.6 0.015 75); }
  .bottom-tabs a.on { color: oklch(0.95 0.012 80); font-weight: 600; }
  .screen-map { display: flex; flex-direction: column; }
  .map-stage { padding: 4px 0 0; } .map-wrap { width: min(100%, 100vh); }
  .map-legend { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; padding: 4px 16px 10px; } .map-hint { display: none; }
  .inspector { border-left: 0; border-top: 1px solid var(--line); padding: 20px 20px 28px; overflow: visible; }
  .screen-today { display: flex; flex-direction: column; } .today-main { padding: 22px 20px 12px; } .today-side { border-left: 0; border-top: 1px solid var(--line); padding: 22px 20px 28px; }
  .focus-bar { padding: 0 16px; grid-template-columns: auto 1fr auto; gap: 10px; } .focus-bar .fb-title { display: none; }
  .rep-row { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; } .rep-row .rep-why { grid-column: 2; } .rep-row .rep-act { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .stats-sec { padding: 0 20px 32px; } .stats-sec h3 { font-size: 26px; } .stats-sec .sub { font-size: 13.5px; }
  .sheetbox { padding: 20px; border-radius: 16px 16px 0 0; align-self: flex-end; max-height: 88vh; } .sheet { padding: 0; align-items: flex-end; }
  .pop { width: min(380px, calc(100vw - 24px)); }
  .desktop-only { display: none !important; } .mobile-only { display: block; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ---- additions ---- */
.save-warning { background: oklch(0.3 0.08 40); color: oklch(0.95 0.03 60); padding: 10px 20px; font-size: 13.5px; text-align: center; position: sticky; top: 0; z-index: 70; }
.chip { cursor: pointer; transition: background 120ms; }
.chip[disabled] { cursor: default; opacity: .5; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.list-row:focus-visible, .back:focus-visible { outline-offset: -2px; }

/* desktop shell is locked to the viewport: Map and Today never scroll the page; the inspector / side column scroll instead */
@media (min-width: 821px) {
  html, body, #app { height: 100%; } #app { height: 100vh; height: 100dvh; }
  #screen { overflow: hidden; }
  .screen-map, .screen-today { height: 100%; } .today-main, .today-side { overflow-y: auto; }
  .screen-stats { height: 100%; }
}
/* today additions */
@media (max-width: 820px) {
  .tile { width: 44px; height: 110px; } .gap-join { height: 110px; width: 18px; }
  #active-body { padding: 36px 16px 24px !important; } .rep-body { padding: 24px 16px !important; }
  .complete-grid { display: block !important; } .complete-grid > div { padding: 28px 20px !important; } .sum-stats { grid-template-columns: 1fr 1fr !important; }
}
.today-main > div:first-child { }
.link { background: none; }
body.focus .bar, body.focus .bottom-tabs { display: none; }
.tiles-scroll { margin: 0; }
.map-legend.mobile-only { display: none; }
@media (max-width: 820px) {
  .map-stage { flex-direction: column; align-items: stretch; padding: 6px 0 0; }
  .map-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
  .map-legend.desktop-only { display: none !important; }
  .map-legend.mobile-only { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; padding: 6px 16px 10px; font-size: 11.5px; }
  .map-hint { display: none; }
}
.fb-title { display: flex; align-items: baseline; gap: 12px; }
@media (max-width: 820px) { .fb-title { display: none; } }
.icon-btn.attn { color: var(--warm); position: relative; }
.icon-btn.attn::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: oklch(0.72 0.15 45); box-shadow: 0 0 0 2px var(--bg); }

/* ---- touch comfort (phones and tablets): 44px hit areas without changing the approved look ----
   Small text controls grow by padding that is cancelled by an equal negative margin, so layout is unchanged but the tappable
   area (and the focus ring) is comfortable. Visible buttons get a real 44px minimum height. */
@media (max-width: 820px), (pointer: coarse) {
  .link, .back, .toast-act, summary.link, .tile-clear, [data-clear], [data-remove], [data-removejoin] { display: inline-block; padding: 15px 10px !important; margin: -15px -10px; }
  .toast-act { padding: 13px 14px; margin: -11px -4px; }
  button[data-act]:not(.pill):not(.link):not(.chip-grade) { min-height: 44px; min-width: 44px; }
  .pill, .chip-grade { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .seg button { min-height: 44px; min-width: 44px; padding: 5px 16px; }
  .icon-btn { width: 44px; height: 44px; }
  .bottom-tabs a { padding: 15px 0 13px; }
  .gap-join { width: 26px; margin: 0 -4px; }
  input, select, textarea { min-height: 44px; }
  .chip { min-height: 44px; }
}