/* THINK-UI v2 (rosé pine) — canonical copy; sites embed a copy, marker: THINK-UI v2 */
/* ============================================================
   think-ui v2 — unified design system for private *.dth.ink tools
   Direction: Rosé Pine "вечірній лаунж" — dark = Rosé Pine main,
   light = Rosé Pine Dawn. Same token NAMES/structure as v1, so a
   site that embedded v1 upgrades by a mechanical value swap.

   v2 changes vs v1 (values only, plus two mechanics):
   - Palette → Rosé Pine (main/Dawn), accent default = iris.
   - Radii per the winning demo: 10 / 12 / 14 px.
   - Elevation: overlay/surface steps + soft shadows instead of
     hairlines-everywhere; cards & table-wrap drop visible borders.
   - CONTRAST RULE (RP is low-contrast): body text sits on --bg or
     --surface only — never long text on --surface-2 (overlay);
     --surface-2 is for hover/nested/selected chrome. --fg-faint is
     decorative-tier (timestamps, counts), not for essential copy.

   Per-app identity = override --accent* only (see THINK-UI.md:
   books=pine/foam, money=gold, media=love; iris is the default).
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- palette · light = Rosé Pine Dawn ------------------- */
  --bg:        #faf4ed;   /* Dawn base — warm paper            */
  --surface:   #fffaf3;   /* Dawn surface — cards, sticky th   */
  --surface-2: #f2e9e1;   /* Dawn overlay — hover / nested     */
  --fg:        #575279;   /* Dawn text                         */
  --fg-muted:  #6f6b8a;   /* Dawn subtle, darkened for AA      */
  --fg-faint:  #797593;   /* decorative tier only              */
  --line:      #dfdad9;   /* Dawn highlight-med                */
  --line-2:    #cecacd;   /* Dawn highlight-high (inputs)      */

  /* accent — default RP iris. Per-app identity is a 3–4 line
     override of --accent/--accent-strong/--accent-soft
     (+ --accent-contrast if the fill needs dark text).         */
  --accent:          #766288;  /* Dawn iris #907aa9 darkened for AA */
  --accent-strong:   #5f4d77;
  --accent-contrast: #fffaf3;
  --accent-soft:     #907aa91f;
  --sel:             #907aa933;   /* text selection wash        */

  /* semantic — up/down/warn are load-bearing in these tools    */
  --ok:      #286983;  --ok-soft: #2869831a;   /* Dawn pine     */
  --up:      #286983;
  --down:    #a35168;                          /* love, darkened*/
  --warn:    #a06514;  --warn-soft: #ea9d341f; /* gold, darkened*/
  --danger:  #a35168;  --danger-soft: #b4637a1f;

  /* ---- type ----------------------------------------------- */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI Variable Display", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo,
               Consolas, "Liberation Mono", monospace;
  --fs-xs:   0.75rem;   /* 12 — badges, th, footnotes          */
  --fs-sm:   0.8125rem; /* 13 — labels, table body             */
  --fs-base: 0.9375rem; /* 15 — UI body (phone-first, dense)   */
  --fs-lg:   1.0625rem; /* 17 — card titles, prose body        */
  --fs-xl:   1.25rem;   /* 20 — page h1, stat values           */
  --fs-2xl:  1.625rem;  /* 26 — hero numbers                   */
  --lh: 1.45;
  --track-caps: .06em;  /* letter-spacing for uppercase labels */

  /* ---- space / radius / shadow ---------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --page-pad: clamp(var(--sp-3), 3vw, var(--sp-6));

  --r-sm: 10px;   /* buttons, inputs, badges  */
  --r-md: 12px;   /* cards, tables            */
  --r-lg: 14px;   /* modals, hero panels      */
  --r-full: 999px;

  /* Dawn shadows are ink-tinted (#575279), not black            */
  --shadow-1: 0 1px 3px rgb(87 82 121 / .07);
  --shadow-2: 0 2px 8px rgb(87 82 121 / .08), 0 1px 2px rgb(87 82 121 / .06);
  --shadow-3: 0 8px 24px rgb(87 82 121 / .14);

  /* ---- layout / mechanics --------------------------------- */
  --content-max: 1200px;
  --tap-min: 44px;                       /* touch target floor  */
  --sat: max(env(safe-area-inset-top),    12px);
  --sar: max(env(safe-area-inset-right),  12px);
  --sal: max(env(safe-area-inset-left),   12px);
  --sab: calc(env(safe-area-inset-bottom) + 12px);
  --t-fast: .12s ease;
  --t-med:  .2s ease;
}

/* ---- palette · dark = Rosé Pine main -----------------------
   Depth = base→surface→overlay steps + soft shadow, hairlines
   only where structure needs them (table rows, hr).
   AA notes: --fg-muted uses RP *subtle* (#908caa, 5.4:1); RP
   muted #6e6a86 (3.4:1) is demoted to --fg-faint = decorative.
   --ok/--up text = foam (pine #31748f is a FILL color on dark —
   use it via --ok-soft washes, not as small text).              */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #191724;   /* RP base    */
    --surface:   #1f1d2e;   /* RP surface */
    --surface-2: #26233a;   /* RP overlay */
    --fg:        #e0def4;   /* RP text    */
    --fg-muted:  #908caa;   /* RP subtle  */
    --fg-faint:  #6e6a86;   /* RP muted — decorative tier only  */
    --line:      #26233a;   /* overlay as hairline              */
    --line-2:    #403d52;   /* RP highlight-med (inputs)        */

    --accent:          #c4a7e7;  /* RP iris                     */
    --accent-strong:   #d9c5f0;
    --accent-contrast: #191724;  /* dark text on iris fills     */
    --accent-soft:     #c4a7e724;
    --sel:             #c4a7e72e;

    --ok:      #9ccfd8;  --ok-soft: #31748f38;  /* foam text, pine wash */
    --up:      #9ccfd8;
    --down:    #eb6f92;                          /* RP love     */
    --warn:    #f6c177;  --warn-soft: #f6c17724; /* RP gold     */
    --danger:  #eb6f92;  --danger-soft: #eb6f9224;

    --shadow-1: 0 2px 8px rgb(0 0 0 / .25);
    --shadow-2: 0 4px 14px rgb(0 0 0 / .30);
    --shadow-3: 0 8px 24px rgb(0 0 0 / .35);
  }
}

/* ============================================================
   Base elements
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }

html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-base)/var(--lh) var(--font-sans);
  font-variant-numeric: tabular-nums;   /* numbers align by default */
  -webkit-font-smoothing: antialiased;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
}
::selection { background: var(--sel); }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3); line-height: 1.25;
  font-weight: 650; letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }
h4, .label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: var(--track-caps);
}
p { margin: 0 0 var(--sp-3); }
small, .muted { color: var(--fg-muted); font-size: var(--fs-sm); }
.faint { color: var(--fg-faint); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

code, kbd, pre, .num { font-family: var(--font-mono); }
code { font-size: .875em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
pre  { background: var(--surface); border: 0; border-radius: var(--r-md);
       box-shadow: var(--shadow-1);
       padding: var(--sp-3); overflow-x: auto; font-size: var(--fs-sm); }
pre code { background: none; padding: 0; }

/* numbers: every dashboard column, price, size, timestamp */
.num, td.num, .stat-value { font-variant-numeric: tabular-nums; }
.up   { color: var(--up); }
.down { color: var(--down); }
.ok   { color: var(--ok); }
.warn { color: var(--warn); }
.err, .danger { color: var(--danger); }
.flat { color: var(--fg-muted); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
img, video, svg { max-width: 100%; height: auto; }

/* ---- long-form reading (books pages, docs, guides) ---------
   Dense UI is the default; reading pages opt in with .prose.
   RP contrast rule: prose stays on --bg or --surface ground.   */
.prose {
  font-size: var(--fs-lg);
  line-height: 1.6;
  max-width: 65ch;
  margin-inline: auto;
}
.prose p { margin-bottom: var(--sp-4); }

/* ---- buttons ----------------------------------------------- */
button, .btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 14px;
  font: 600 var(--fs-sm)/1 var(--font-sans);
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
button:hover, .btn:hover { background: var(--surface-2); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary, button.primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover, button.primary:hover {
  background: var(--accent-strong); border-color: var(--accent-strong);
}
.btn-danger, button.danger {
  background: var(--danger-soft); border-color: transparent; color: var(--danger);
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }

/* toggle state (chips, range switches, filter pills) */
button[aria-pressed="true"], .btn.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}

@media (pointer: coarse) {
  button, .btn, input, select { min-height: var(--tap-min); }
}

/* ---- inputs ------------------------------------------------ */
input, select, textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: max(16px, var(--fs-base));  /* >=16px: no iOS focus zoom */
  line-height: var(--lh);
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 12px;
  transition: border-color var(--t-fast);
}
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="checkbox"], input[type="radio"] {
  width: auto; min-height: 0; accent-color: var(--accent);
}
label { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-muted); }

.field-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.field-row > input { flex: 1; min-width: 180px; width: auto; }

/* ---- cards -------------------------------------------------
   v2: elevation by surface step + shadow, no visible hairline.
   Transparent 1px border keeps v1 metrics and lets .sel /
   hover states light the border up without layout shift.       */
.card {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; border-color: var(--line-2); box-shadow: var(--shadow-2); }
.card.sel, .card[aria-selected="true"] {
  border-color: var(--accent); background: var(--surface-2);
}
.card-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card-grid.tight {          /* stat tiles: money/widget dash */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2);
}

/* stat tile (money/widget pattern, standardized) */
.stat .stat-label { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .stat-value { font-size: var(--fs-xl); font-weight: 700; margin-top: var(--sp-1); }
.stat .stat-delta { font-size: var(--fs-sm); font-weight: 600; margin-top: 2px; }

/* section header with rule (money's .ghead / books' .sec, generalized)
   v2: rule fades out to the right (demo look) instead of a flat line */
.section-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: var(--track-caps);
}
.section-head::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent); }

/* ---- tables ------------------------------------------------
   v2: wrap is elevated (shadow, no outer border); row hairlines
   use --line (= overlay tone in dark). Long text still sits on
   --surface; hover overlay is transient chrome.                */
.table-wrap { overflow-x: auto; border: 0; box-shadow: var(--shadow-1);
  border-radius: var(--r-md); background: var(--surface);
  -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left; font-size: var(--fs-xs); font-weight: 700;
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--track-caps);
  padding: 10px 12px; border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; }

/* ---- badges ------------------------------------------------ */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}
.badge-ok     { background: var(--ok-soft);     color: var(--ok); }
.badge-warn   { background: var(--warn-soft);   color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* ---- layout helpers ---------------------------------------- */
.container, main.page {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-pad);
}

/* respect reduced motion (also the Boox/e-ink degradation path) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}