/* Design tokens (light + dark), reset and page layout. */

/*
 * Colours are tokens only — never write a hex value in a component rule. Light values live in
 * :root; dark values are listed twice (auto via prefers-color-scheme, and forced via
 * [data-theme="dark"], set by js/theme.js). Keep the two dark blocks identical.
 */
:root {
  color-scheme: light;

  --bg: #F4F4F8;
  --surface: #FFFFFF;
  --surface-hover: #F4F4F8;

  --text: #1C1C2E;
  --text-muted: #666;
  --text-subtle: #888;
  --text-soft: #999;
  --text-faint: #AAA;
  --text-ghost: #BBB;
  --text-tab: #7B7A99;

  --border: #E8E7F5;
  --border-input: #D0CFF0;
  --border-hover: #C8C6EC;
  --border-tab: #E0DFF0;
  --border-btn-hover: #B0AFDC;

  --accent: #3D35B5;
  --accent-hover: #322BA0;
  --accent-alt: #5B4FCF;
  --accent-soft: #F0EFFE;
  --accent-ring: #E8E6FA;
  --on-accent: #FFFFFF;

  --success: #4CAF7D;
  --on-success: #FFFFFF;
  --danger: #B52020;
  --danger-border: #EECCCC;
  --danger-soft: #FFF0F0;

  --icon: #555;
  --icon-faint: #CCC;
  --cell-empty: #EEE;
  --scrollbar: #DDD;

  --overlay: rgba(0, 0, 0, .45);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, .18);
  --shadow-drag: 0 6px 18px rgba(28, 28, 46, .12);

  --toast-bg: #1C1C2E;
  --toast-text: #FFFFFF;
  --toast-action: #B3ADFF;

  --chart-bar: rgba(61, 53, 181, .65);
  --chart-bar-hover: rgba(61, 53, 181, .9);
  --chart-grid: rgba(0, 0, 0, .06);
  --chart-tick: #666;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12121C; --surface: #1C1C2B; --surface-hover: #262638;
    --text: #E9E8F5; --text-muted: #B4B3C8; --text-subtle: #9C9BB3; --text-soft: #8E8DA5;
    --text-faint: #7D7C94; --text-ghost: #62617A; --text-tab: #9C9BB3;
    --border: #2A2A40; --border-input: #3B3A5A; --border-hover: #4B4A74; --border-tab: #2A2A40; --border-btn-hover: #5A58A0;
    --accent: #9A93FF; --accent-hover: #B0AAFF; --accent-alt: #A69FFF; --accent-soft: #252347; --accent-ring: #353170; --on-accent: #14132B;
    --danger: #FF8A8A; --danger-border: #5C2E33; --danger-soft: #2D1B20;
    --icon: #B4B3C8; --icon-faint: #55546C; --cell-empty: #2A2A3E; --scrollbar: #3B3A5A;
    --overlay: rgba(0, 0, 0, .6); --shadow-modal: 0 8px 32px rgba(0, 0, 0, .5); --shadow-drag: 0 6px 18px rgba(0, 0, 0, .45);
    --toast-bg: #E9E8F5; --toast-text: #14132B; --toast-action: #3D35B5;
    --chart-bar: rgba(154, 147, 255, .7); --chart-bar-hover: rgba(154, 147, 255, .95); --chart-grid: rgba(255, 255, 255, .08); --chart-tick: #9C9BB3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12121C; --surface: #1C1C2B; --surface-hover: #262638;
  --text: #E9E8F5; --text-muted: #B4B3C8; --text-subtle: #9C9BB3; --text-soft: #8E8DA5;
  --text-faint: #7D7C94; --text-ghost: #62617A; --text-tab: #9C9BB3;
  --border: #2A2A40; --border-input: #3B3A5A; --border-hover: #4B4A74; --border-tab: #2A2A40; --border-btn-hover: #5A58A0;
  --accent: #9A93FF; --accent-hover: #B0AAFF; --accent-alt: #A69FFF; --accent-soft: #252347; --accent-ring: #353170; --on-accent: #14132B;
  --danger: #FF8A8A; --danger-border: #5C2E33; --danger-soft: #2D1B20;
  --icon: #B4B3C8; --icon-faint: #55546C; --cell-empty: #2A2A3E; --scrollbar: #3B3A5A;
  --overlay: rgba(0, 0, 0, .6); --shadow-modal: 0 8px 32px rgba(0, 0, 0, .5); --shadow-drag: 0 6px 18px rgba(0, 0, 0, .45);
  --toast-bg: #E9E8F5; --toast-text: #14132B; --toast-action: #3D35B5;
  --chart-bar: rgba(154, 147, 255, .7); --chart-bar-hover: rgba(154, 147, 255, .95); --chart-grid: rgba(255, 255, 255, .08); --chart-tick: #9C9BB3;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Author `display` rules (e.g. `.modal-overlay { display: flex }`) beat the UA's [hidden] rule,
   so make `hidden` always win. */
[hidden] { display: none !important; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
/* No double-tap-to-zoom delay on controls (iOS). */
button, input, label, summary, [data-action] { touch-action: manipulation; }

/* viewport-fit=cover: keep content clear of the notch / rounded corners in landscape. */
.shell {
  max-width: 760px; margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 60px max(16px, env(safe-area-inset-left));
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(20px, env(safe-area-inset-top)) 0 0; margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--text); }
.logo svg { flex-shrink: 0; }

.tabs { display: flex; border-bottom: 1.5px solid var(--border-tab); margin-bottom: 24px; }
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--text-tab); border: none; background: none; font-family: inherit;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab-icon { display: none; flex-shrink: 0; }
.tab:hover { color: var(--accent); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }

/* Phones: the tab bar moves to the bottom, within thumb reach, like a native app. */
@media (max-width: 640px) {
  :root { --bottom-nav-h: 58px; }
  header { padding-top: max(14px, env(safe-area-inset-top)); margin-bottom: 16px; }
  .shell { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 32px); }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; margin: 0;
    border-bottom: none; border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .tab {
    flex: 1; flex-direction: column; gap: 2px; justify-content: center;
    height: var(--bottom-nav-h); padding: 6px 0 4px; font-size: 11px;
    border-bottom: none; margin: 0;
  }
  .tab-icon { display: block; }
  .tab[aria-selected="true"] { color: var(--accent); }
}

/* iOS zooms the page when a focused field's text is under 16px. */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}

/* Theme changes apply instantly (see theme.js), not as a fade of every control. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* iOS keeps fixed bottom bars at the bottom of the *layout* viewport, so while the keyboard is up
   the tab bar can float over the field being typed in. Hide it while typing on touch screens. */
@media (pointer: coarse) and (max-width: 640px) {
  body:has(input[type="text"]:focus, input[type="number"]:focus, textarea:focus) .tabs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}