/* Mellow UI — the shared look of every app on mellowspots.com (tool site, ProcessLab, ProcessStat, …).
   Link it first in every page:  <link rel="stylesheet" href="/tools/assets/mellow-ui/mellow-ui.css">
   Then style your app with the tokens (var(--ink), var(--surface), …) and the classes below. Never hard-code colours.
   Dark mode is automatic (prefers-color-scheme); <html data-theme="light|dark"> forces one.
   Version 2026-10-20. Source of truth: src/mellow-ui/mellow-ui.css in the tool-site repo (reports/mellow-ui-spec.md explains the rules). */

/* ---------- 1. Tokens ---------- */
:root {
  --paper: #ffffff;      /* page background */
  --surface: #f2f3f5;    /* panels, cards, rails */
  --surface-2: #e6e8eb;  /* stronger panel, table header, badges */
  --ink: #14171a;        /* text, primary buttons, selected states */
  --ink-2: #48505a;      /* secondary text */
  --ink-3: #737c87;      /* hints, borders of inputs */
  --line: #d6dadf;       /* hairlines, card borders */
  --tape: #ffd400;       /* THE accent: measuring-tape yellow — stripe, focus ring, one highlight per screen */
  --tape-ink: #14171a;
  --tape-soft: #fff4b8;
  --ok: #17794a; --warn: #a85800; --bad: #c62f2b; --info: #1d5bd0;
  --ok-soft: #e3f4ea; --warn-soft: #fdf0dc; --bad-soft: #fde8e6; --info-soft: #e5edfb;
  /* data colours for charts (same order in light and dark) */
  --chart-1: #1d5bd0; --chart-2: #17794a; --chart-3: #a85800; --chart-4: #8b3fc0; --chart-5: #c62f2b; --chart-6: #0f7f8a;
  --radius: 6px; --radius-lg: 10px; --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic UI", "PingFang SC", "Microsoft YaHei", "Noto Sans", "Noto Sans CJK KR", "Noto Sans Devanagari", "Nirmala UI", "Noto Sans Thai", Thonburi, "Leelawadee UI", Tahoma, sans-serif;
  --font-num: "Barlow Semi Condensed", var(--font);  /* numbers, counters, wordmark */
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --mm: 3.7795px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #15181c; --surface: #1e2227; --surface-2: #2a2f36; --ink: #f0f2f4; --ink-2: #bcc3ca; --ink-3: #8b939d;
  --line: #363c44; --tape-soft: #4d4200;
  --ok: #5fd39a; --warn: #f2b266; --bad: #ff8a84; --info: #8db4ff;
  --ok-soft: #173326; --warn-soft: #3a2a12; --bad-soft: #3d1c1a; --info-soft: #172741;
  --chart-1: #8db4ff; --chart-2: #5fd39a; --chart-3: #f2b266; --chart-4: #c9a2f0; --chart-5: #ff8a84; --chart-6: #6fd3de;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15181c; --surface: #1e2227; --surface-2: #2a2f36; --ink: #f0f2f4; --ink-2: #bcc3ca; --ink-3: #8b939d;
    --line: #363c44; --tape-soft: #4d4200;
    --ok: #5fd39a; --warn: #f2b266; --bad: #ff8a84; --info: #8db4ff;
    --ok-soft: #173326; --warn-soft: #3a2a12; --bad-soft: #3d1c1a; --info-soft: #172741;
    --chart-1: #8db4ff; --chart-2: #5fd39a; --chart-3: #f2b266; --chart-4: #c9a2f0; --chart-5: #ff8a84; --chart-6: #6fd3de;
    color-scheme: dark;
  }
}
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url("/tools/assets/vendor/fonts/barlow-semi-condensed-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("/tools/assets/vendor/fonts/barlow-semi-condensed-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url("/tools/assets/vendor/fonts/barlow-semi-condensed-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; }
:lang(hi) body { line-height: 1.7; } :lang(th) body { line-height: 1.65; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(24px, 4vw, 32px); } h2 { font-size: 20px; } h3 { font-size: 17px; }
p { margin: 0 0 1em; } a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tape); border-radius: 3px; }
.muted { color: var(--ink-2); } .small { font-size: 13.5px; } .hint { font-size: 13px; color: var(--ink-3); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
kbd { font: 600 12px/1 var(--font-num); padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }

/* ---------- 3. The measuring-tape stripe and the app header ---------- */
.mw-tape { height: 14px; flex: none; background-color: var(--tape);
  background-image: repeating-linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px calc(var(--mm) * 10)), repeating-linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px calc(var(--mm) * 5)), repeating-linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px var(--mm));
  background-size: 100% 100%, 100% 60%, 100% 34%; background-repeat: no-repeat; }
.mw-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.mw-home { font: 700 20px/1 var(--font-num); letter-spacing: .01em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.mw-home i { display: inline-block; width: 8px; height: 8px; background: var(--tape); border: 1.5px solid var(--ink); border-radius: 50%; margin-left: 2px; }
.mw-home span { font-weight: 500; color: var(--ink-2); }
.mw-app { font-size: 17px; font-weight: 700; display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.mw-app small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.mw-header .mw-actions { margin-inline-start: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mw-lang { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-size: 14.5px; }
.mw-lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; appearance: none; font-size: 16px; }
.mw-lang:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tape); }
.mw-main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 24px 20px 56px; } .mw-main.wide { max-width: 1400px; }
.mw-footer { border-top: 1px solid var(--line); padding: 18px 20px 28px; color: var(--ink-3); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mw-footer a { color: var(--ink-2); }
@media (max-width: 640px) { .mw-header { padding: 8px 14px; } .mw-app { font-size: 15.5px; } .mw-main { padding: 18px 16px 48px; } }

/* ---------- 4. Layout helpers ---------- */
.stack { display: flex; flex-direction: column; gap: var(--gap); } .stack.tight { gap: 8px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 900px) { .split { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); } }
.panel { background: var(--surface); border-radius: var(--radius-lg); padding: 18px; } .panel.outline { background: transparent; border: 1px solid var(--line); }
.section-title { font-size: 17px; margin: 6px 0 2px; }
.sep { width: 1px; align-self: stretch; background: var(--line); }

/* ---------- 5. Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.25; cursor: pointer; text-decoration: none; text-align: center; user-select: none; max-width: 100%; }
.btn:hover { background: var(--surface); } .btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: var(--paper); } .btn.primary:hover { background: var(--ink-2); }
.btn.tape { background: var(--tape); color: var(--tape-ink); border-color: var(--tape-ink); } .btn.tape:hover { filter: brightness(.95); }
.btn.ghost { border-color: transparent; } .btn.ghost:hover { background: var(--surface); }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: 13.5px; } .btn.big { min-height: 54px; padding: 12px 26px; font-size: 18px; }
.btn.icon { padding: 8px; min-width: 42px; } .btn.small.icon { min-width: 32px; padding: 4px; }
@media (pointer: coarse) { .btn.small { min-height: 40px; } .btn.small.icon { min-width: 40px; } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.input, .select, .textarea { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--ink-3); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .input.code, .textarea.code { font-family: var(--mono); font-size: 14px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 4px var(--tape); }
.input[aria-invalid="true"] { border-color: var(--bad); } .input.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 1.08em; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink-3); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.seg label { position: relative; cursor: pointer; flex: 1 1 auto; margin-inline-end: -1px; } .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; height: 100%; padding: 8px 14px; font-size: 15px; text-align: center; border-inline-end: 1px solid var(--line); min-height: 40px; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; } .check input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; background: var(--paper); }
button.chip { cursor: pointer; } button.chip:hover { border-color: var(--ink); } .chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- 6. Feedback, tables, dialogs ---------- */
.note { border-inline-start: 4px solid var(--ink-3); background: var(--surface); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 14.5px; color: var(--ink-2); }
.note.info { border-color: var(--info); background: var(--info-soft); } .note.ok { border-color: var(--ok); background: var(--ok-soft); }
.note.warn { border-color: var(--warn); background: var(--warn-soft); } .note.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--ink); }
.empty { text-align: center; color: var(--ink-3); padding: 36px 16px; border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .table th, .table td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.table th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); } .table td.n, .table th.n { text-align: end; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.result-row > .k { color: var(--ink-2); font-size: 14.5px; flex: 1; } .result-row > .v { font: 600 19px/1.2 var(--font-num); font-variant-numeric: tabular-nums; text-align: end; }
details.fold { border: 1px solid var(--line); border-radius: var(--radius); } details.fold > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); }
details.fold > summary:hover { background: var(--surface); } details.fold[open] > summary { border-bottom: 1px solid var(--line); } details.fold > :not(summary) { padding: 12px 14px; }
dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; width: min(640px, calc(100% - 24px)); background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgb(0 0 0 / .25); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 99px; font-size: 14.5px; box-shadow: 0 6px 24px rgb(0 0 0 / .25); z-index: 100; }
.toast.bad { background: var(--bad); color: #fff; }
.mark { background: linear-gradient(transparent 62%, var(--tape) 62% 92%, transparent 92%); }
@media print { /* paper is always white on paper, whatever the screen theme */
  :root, :root[data-theme="dark"] { --paper: #ffffff; --surface: #f2f3f5; --surface-2: #e6e8eb; --ink: #14171a; --ink-2: #48505a; --ink-3: #737c87; --line: #d6dadf; --tape-soft: #fff4b8;
    --ok: #17794a; --warn: #a85800; --bad: #c62f2b; --info: #1d5bd0; --ok-soft: #e3f4ea; --warn-soft: #fdf0dc; --bad-soft: #fde8e6; --info-soft: #e5edfb; color-scheme: light; }
  .mw-tape, .mw-header, .mw-footer, .toast, .no-print { display: none !important; } body { background: #fff; color: #000; } }