/* css/theme-things.css
 *
 * The "Things" style — an OPTIONAL re-skin, switched on from Settings → Style
 * and carried as `data-theme="things"` on <html>. Every rule here is scoped to
 * that attribute, so with the default style this file is inert and the base
 * stylesheets are exactly what they were.
 *
 * Loaded LAST on purpose: it overrides by source order where its specificity
 * ties, and the `:root[data-theme]` prefix adds (0,2,0) where it does not. The
 * collapse rules at the bottom re-state narrow.css under the same prefix for
 * the same reason — without them this file's wider grids would beat the media
 * query and the sidebar would come back at 800px.
 *
 * It is a skin, not a new product. The markup is untouched: the same sidebar
 * (Day / Week / Month / Year, Notes, Last time, Trash), the same toolbar, the
 * same day (markers, habit strip, morning / afternoon / evening), the same
 * rows. What changes is the frame (a floating window on a wallpaper), the
 * palette (warm greys, one blue), the type (system face, smaller scale) and
 * the proportions (taller rows, square ticks, ruled section heads).
 *
 * Both appearances are covered: light is the default, and the dark block
 * below follows the same auto / light / dark switch the base theme uses.
 */

/* ---- palette ------------------------------------------------------------ */
:root[data-theme="things"] {
  --canvas:    #ffffff;
  --chrome:    #f3f4f6;      /* sidebar and rail */
  --chrome-2:  #e9ebef;
  --fill:      #eef0f3;
  --sep:       #d4d7dc;
  --sep-soft:  #e4e6ea;

  --text:      #1c1e21;
  --text-2:    #5d6370;
  --text-3:    #8b919c;

  --accent:    #3f83f8;
  --accent-ink:#ffffff;
  --ok:        #27a65a;
  --danger:    #ef3e5e;

  --shadow:    0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.12), 0 30px 70px -20px rgba(0,20,40,.45), 0 8px 24px -8px rgba(0,20,40,.25);

  --radius:    10px;
  --radius-sm: 7px;

  /* Theme-only tokens. Prefixed so they cannot collide with the base set.
     The wallpaper is drawn from the app icon rather than invented: its coral
     (#e6361c) and the near-navy of its numeral (#1e2432) are the two colours
     the product already owns, so the window sits on Eva's own palette instead
     of the teal-and-beige pair that belonged to nothing. Both are pulled
     towards their darker, less saturated neighbours — a wallpaper is a
     backdrop for a white card, so it stays quiet: a blue that deepens towards
     the top and washes out to near-white at the bottom, with no hard edge
     anywhere. The coral the icon is built on turned out to be too loud for a
     full-bleed wallpaper — the window read as a warning sign — so the blue the
     app already uses for its accent does the work instead. */
  --th-wall-a:  #4f7fe8;
  --th-wall-b:  #7ba4f5;
  --th-wall-c:  #eef2fb;
  --th-agenda:  #f2f5f8;
  --th-active:  #e3e6ea;
  --th-tick:    #b9bec7;

  /* System face by default — the reference is set in SF. The picker still
     wins: `--pick` is the same variable the base theme reads. */
  --sans: var(--pick, -apple-system), BlinkMacSystemFont, "SF Pro Text", "Inter",
          system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --display: var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="things"]:not([data-force="light"]) {
    --canvas:    #27292e;
    --chrome:    #1f2125;
    --chrome-2:  #2e3137;
    --fill:      #2e3137;
    --sep:       #41454c;
    --sep-soft:  #34373d;
    --text:      #ececef;
    --text-2:    #b2b6be;
    --text-3:    #7f848e;
    --accent:    #4f8ef7;
    --ok:        #34c26a;
    --danger:    #f25c77;
    --shadow:    0 0 0 .5px rgba(255,255,255,.06);
    --shadow-lg: 0 0 0 .5px rgba(255,255,255,.08), 0 30px 70px -20px rgba(0,0,0,.8);
    --th-wall-a: #16233f;
    --th-wall-b: #29406e;
    --th-wall-c: #0d1017;
    --th-agenda: #2f3238;
    --th-active: #34383f;
    --th-tick:   #5a5f68;
  }
}
:root[data-theme="things"][data-force="dark"] {
  --canvas:    #27292e;
  --chrome:    #1f2125;
  --chrome-2:  #2e3137;
  --fill:      #2e3137;
  --sep:       #41454c;
  --sep-soft:  #34373d;
  --text:      #ececef;
  --text-2:    #b2b6be;
  --text-3:    #7f848e;
  --accent:    #4f8ef7;
  --ok:        #34c26a;
  --danger:    #f25c77;
  --shadow:    0 0 0 .5px rgba(255,255,255,.06);
  --shadow-lg: 0 0 0 .5px rgba(255,255,255,.08), 0 30px 70px -20px rgba(0,0,0,.8);
  /* The light block's blue, taken down to what a dark appearance can carry:
     it survives as the glow at the top of the radial and gives way to
     near-black below. */
  --th-wall-a: #16233f;
  --th-wall-b: #29406e;
  --th-wall-c: #0d1017;
  --th-agenda: #2f3238;
  --th-active: #34383f;
  --th-tick:   #5a5f68;
}

/* ---- type scale --------------------------------------------------------- */
/* The whole app is `em` against body. 17px is the iOS body size the base theme
   was tuned for; the reference sits at 15 and reads denser. 15.5 keeps the
   secondary rows (0.82em → 12.7px) just above the readability floor. */
:root[data-theme="things"] body { font-size: 15.5px; line-height: 1.35; }

/* ---- the window on its wallpaper --------------------------------------- */
:root[data-theme="things"] body:not(.signed-out) {
  /* Two colours from the app icon, blended rather than butted together. The
     original pair met at a hard 58% line, which reads as a seam the moment the
     two are as far apart as coral and navy are — so the linear ramp now hands
     over across a band, and the radial warms the top without a cut edge of its
     own. */
  background:
    radial-gradient(130% 80% at 50% -15%, var(--th-wall-b) 0%, color-mix(in srgb, var(--th-wall-b) 45%, var(--th-wall-a)) 30%, transparent 70%),
    linear-gradient(180deg, var(--th-wall-a) 0 32%, color-mix(in srgb, var(--th-wall-a) 50%, var(--th-wall-c)) 58%, var(--th-wall-c) 82%);
  background-attachment: fixed;
}
:root[data-theme="things"] #appView { padding: 28px; }
:root[data-theme="things"] .win {
  max-width: 1380px; border-radius: 14px;
  background: var(--chrome); box-shadow: var(--shadow-lg);
}
/* Sidebar · main · rail, with the grey frame showing between them. The middle
   pane is a white card inset in the frame; the rail keeps the frame's grey so
   its own cards read as cards. */
:root[data-theme="things"] .app {
  grid-template-columns: 270px minmax(0, 1fr) 292px;
  background: var(--chrome); column-gap: 0;
}
:root[data-theme="things"] body:not(.view-day) .app { grid-template-columns: 270px minmax(0, 1fr); }
:root[data-theme="things"] .main {
  background: var(--canvas); border-radius: 12px;
  margin: 10px 10px 10px 0;
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--sep) 60%, transparent);
}

/* ---- sidebar ------------------------------------------------------------ */
:root[data-theme="things"] .side {
  background: var(--chrome); border-right: 0;
  padding: 18px 14px 0; gap: 18px;
}
:root[data-theme="things"] .brandrow { padding: 0 10px 6px; }
/* The mark is an image now, so the theme sets its size and corner and nothing
   else — the grey fill this used to paint would sit behind an opaque icon and
   only round it differently. */
:root[data-theme="things"] .glyph-brand {
  width: 20px; height: 20px; border-radius: 6px;
}
:root[data-theme="things"] .brandrow b { font-weight: 600; color: var(--text-2); font-size: 0.93em; }
:root[data-theme="things"] .grp { gap: 0; }
/* The seam is breathing room, not a line — the reference groups by space. */
:root[data-theme="things"] .navsep { height: 18px; background: none; margin: 0; }
:root[data-theme="things"] .navrow {
  width: 100%; margin: 0; padding: 0 10px; height: 36px; gap: 10px;
  border-radius: 8px; font-size: 0.97em; font-weight: 500;
}
:root[data-theme="things"] .navrow > svg { width: 18px; height: 18px; color: var(--text-2); }
:root[data-theme="things"] .navrow .n { font-size: 0.9em; color: var(--text-3); }
:root[data-theme="things"] .navrow:hover { background: var(--chrome-2); }
/* Selected is a grey pill with normal ink — the reference spends its one blue
   on ticks and "today", never on the sidebar. */
:root[data-theme="things"] .navrow[aria-current="true"] { background: var(--th-active); color: var(--text); }
:root[data-theme="things"] .navrow[aria-current="true"] > svg { color: var(--text-2); opacity: 1; }
:root[data-theme="things"] .navrow[aria-current="true"] .n { color: var(--text-3); opacity: 1; }
:root[data-theme="things"] .trashgrp { margin-top: 0; }
:root[data-theme="things"] .side-foot {
  border-top: 1px solid var(--sep); padding: 12px 10px 12px; gap: 4px;
  font-size: 0.84em;
}
:root[data-theme="things"] .side-foot .conn { font-weight: 500; color: var(--text-3); }
:root[data-theme="things"] .side-foot .whoami,
:root[data-theme="things"] .side-foot .synced { font-size: 0.95em; color: var(--text-3); }
:root[data-theme="things"] .side-acts { margin-top: 6px; gap: 2px; }
:root[data-theme="things"] .side-acts button {
  font-size: 0.95em; padding: 4px 8px; border-radius: 6px;
  background: transparent; border: 0; box-shadow: none; color: var(--text-2);
}
:root[data-theme="things"] .side-acts button:hover:not(:disabled) { background: var(--chrome-2); filter: none; color: var(--text); }

/* ---- toolbar ------------------------------------------------------------ */
/* The reference has no toolbar: the title lives in the content and the few
   controls float at the top-right. The toolbar stays (it carries the steppers,
   the modes and search) but goes quiet: no rule under it, ghost steppers, and
   the period title steps back so the day's own masthead leads. */
:root[data-theme="things"] .appbar {
  border-bottom: 0; padding: 14px 28px 0 32px; min-height: 48px; gap: 8px;
}
:root[data-theme="things"] .appbar h3.periodtitle { font-size: 0.93em; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
:root[data-theme="things"] body.view-day .appbar h3.periodtitle { display: none; }
:root[data-theme="things"] body.view-day .appbar .count { display: none; }
:root[data-theme="things"] .periodnav { gap: 2px; }
:root[data-theme="things"] .periodnav .step { width: 28px; height: 28px; border-radius: 7px; color: var(--text-3); }
:root[data-theme="things"] .periodnav .step svg { width: 15px; height: 15px; }
:root[data-theme="things"] .periodnav .todaybtn {
  font-size: 0.87em; font-weight: 600; padding: 4px 10px; border-radius: 7px;
  background: transparent; border: 0; color: var(--text-2);
}
:root[data-theme="things"] .periodnav .todaybtn:hover { background: var(--fill); filter: none; color: var(--text); }
:root[data-theme="things"] .segmented { background: transparent; gap: 4px; padding: 0; }
:root[data-theme="things"] .segmented button {
  font-size: 0.87em; font-weight: 500; padding: 4px 12px; border-radius: 15px;
  border: 1px solid var(--sep); color: var(--text); background: var(--canvas);
}
:root[data-theme="things"] .segmented button:hover:not([aria-pressed="true"]) { background: var(--fill); filter: none; }
:root[data-theme="things"] .segmented button[aria-pressed="true"],
:root[data-theme="things"] .daymodebar button[aria-checked="true"],
:root[data-theme="things"] .daymodebar button[aria-checked="true"]:hover {
  background: var(--th-active); border-color: var(--th-active); color: var(--text); font-weight: 600; box-shadow: none;
}
:root[data-theme="things"] .twodaybtn {
  font-size: 0.87em; padding: 4px 12px; border-radius: 15px;
  border: 1px solid var(--sep); background: var(--canvas); color: var(--text);
}
:root[data-theme="things"] .twodaybtn.on { background: var(--th-active); border-color: var(--th-active); color: var(--text); font-weight: 600; }
:root[data-theme="things"] .searchbox { height: 30px; border-radius: 15px; background: var(--fill); }

/* ---- the working column ------------------------------------------------- */
:root[data-theme="things"] .mainscroll { padding: 10px 56px 40px 60px; }
:root[data-theme="things"] body.view-day .mainscroll > *,
:root[data-theme="things"] body.view-list .mainscroll > * { max-width: 780px; }
:root[data-theme="things"] .banner { border-radius: 10px; }

/* masthead — "⭐ Today", the date as the aside */
:root[data-theme="things"] .dayhead { margin: 0 0 18px; padding: 14px 0 0; border-bottom: 0; }
:root[data-theme="things"] .dayhead .dow {
  font-size: 0.87em; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-3); order: 2; margin-top: 4px;
}
:root[data-theme="things"] .dayhead.is-today .dow { color: var(--text-3); }
:root[data-theme="things"] .dayhead { display: flex; flex-direction: column; }
:root[data-theme="things"] .dayhead h2 {
  order: 1; margin: 0; font-size: 1.75em; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
}
:root[data-theme="things"] .dayhead.is-today h2::before { content: "⭐ "; }
:root[data-theme="things"] .dayhead .year { font-size: 0.6em; font-weight: 600; }
:root[data-theme="things"] .dayrel { order: 3; font-size: 0.8em; letter-spacing: .03em; }
:root[data-theme="things"] .twoday .dayhead h2 { font-size: 1.4em; min-height: 0; }

/* marker banner → the agenda block: tinted panel, one marker per line, a
   coloured bar leading each */
:root[data-theme="things"] .daymarkers {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--th-agenda); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 22px;
}
:root[data-theme="things"] .daymarkers.is-empty { display: none; }
:root[data-theme="things"] .twoday .daymarkers.is-empty { display: block; padding: 0; margin: 0; background: none; }
:root[data-theme="things"] .daymarkers .dm {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.97em; padding: 0; border-radius: 0; background: none; color: var(--text);
}
:root[data-theme="things"] .daymarkers .dm::before {
  content: ""; width: 2.5px; height: 18px; border-radius: 2px; background: var(--accent); flex: none; margin-right: 2px;
}

/* habit strip — rings on the page, not in a card */
:root[data-theme="things"] .habitstrip {
  background: none; box-shadow: none; padding: 4px 0 6px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fill, 72px); gap: 10px 8px;
}
:root[data-theme="things"] .habitstrip .hs-head { display: none; }
:root[data-theme="things"] .hring { width: 72px; gap: 6px; }
:root[data-theme="things"] .hring .disc { background: var(--fill); }
:root[data-theme="things"] .hring .lbl { font-size: 0.76em; color: var(--text-2); }
:root[data-theme="things"] .hring .badge { background: var(--canvas); box-shadow: 0 0 0 1.5px var(--canvas), inset 0 0 0 .5px var(--sep); }
/* The rule above outweighs day.css's `.hring.done .badge` (the theme selector
   is heavier), which painted the DONE badge canvas-on-canvas: a white tick on
   a white circle — an empty ring where the checkmark should be. Restate the
   done state at theme weight. */
:root[data-theme="things"] .hring.done .badge {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 1.5px var(--canvas);
}

/* section heads — ruled, title-case, with a count-style weight */
:root[data-theme="things"] .day-view .tod {
  font-size: 1.03em; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--text); padding: 0 0 10px; margin: 26px 0 4px;
  border-bottom: 1px solid var(--sep);
}
:root[data-theme="things"] .day-view .tod:first-child { margin-top: 8px; }
:root[data-theme="things"] .day-view .tod::first-letter { text-transform: uppercase; }

/* rows — rail at the left edge, the time moved to the right, square tick */
:root[data-theme="things"] .trow {
  grid-template-columns: 3px minmax(0, 1fr) auto; gap: 0 12px;
  padding: 9px 10px 9px 12px; margin: 0 -10px 0 -12px; border-radius: 7px;
  align-items: start;
}
:root[data-theme="things"] .trow:hover { background: var(--fill); }
:root[data-theme="things"] .trow .rail { align-self: stretch; min-height: 20px; background: transparent; }
:root[data-theme="things"] .trow .clock {
  order: 3; padding-top: 3px; font-size: 0.84em; font-weight: 500; color: var(--text-3);
}
:root[data-theme="things"] .trow .clock:empty { display: none; }
:root[data-theme="things"] .trow-cell { gap: 12px; }
:root[data-theme="things"] .trow .name { font-size: 1.0em; line-height: 1.35; }
:root[data-theme="things"] .trow .sub { font-size: 0.86em; color: var(--text-3); margin-top: 2px; }
/* Done is grey, not struck — the filled tick already says it. */
:root[data-theme="things"] .trow.done .name { text-decoration: none; color: var(--text-3); }
:root[data-theme="things"] .trow.skipped .name { color: var(--text-3); text-decoration: line-through; }
:root[data-theme="things"] .trow .badges { font-size: 0.9em; }
:root[data-theme="things"] .cbox {
  width: 18px; height: 18px; border-radius: 5px; margin-top: 2px;
  border: 1.5px solid var(--th-tick);
}
:root[data-theme="things"] .cbox svg { width: 12px; height: 12px; }
:root[data-theme="things"] .cbox:hover { border-color: var(--accent); }
:root[data-theme="things"] .cbox[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
:root[data-theme="things"] .trow .del { font-size: 1.15em; color: var(--text-3); }
:root[data-theme="things"] .trow .glyph { width: 18px; }
/* marker rows keep the agenda-block tint the banner used to carry */
:root[data-theme="things"] .trow.marker {
  background: color-mix(in srgb, var(--mk, var(--accent)) 10%, var(--th-agenda));
  border-radius: 10px;
}
:root[data-theme="things"] .trow.marker:hover { background: color-mix(in srgb, var(--mk, var(--accent)) 16%, var(--th-agenda)); }
:root[data-theme="things"] .trow.marker .rail { background: var(--mk, var(--accent)); }

/* matrix / timeline keep their shapes; just the surfaces */
:root[data-theme="things"] .day-view .mx-cell { background: var(--th-agenda); box-shadow: none; border-radius: 10px; }
:root[data-theme="things"] .day-view .tl-hour { border-right-color: var(--sep); }

/* empty day */
:root[data-theme="things"] .empty { background: none; box-shadow: none; color: var(--text-3); }

/* the two-day composer row */
:root[data-theme="things"] .colad { border-radius: 7px; }
:root[data-theme="things"] .colad-plus { border: 1.5px dashed var(--sep); border-radius: 5px; width: 18px; height: 18px; margin-left: 12px; }
:root[data-theme="things"] .colad-plus svg { width: 11px; height: 11px; }

/* ---- list rows (search, day sheet) — the same row language ------------- */
:root[data-theme="things"] li.task .check { width: 18px; height: 18px; border-radius: 5px; border-color: var(--th-tick); }
:root[data-theme="things"] li.task.done .check { background: var(--accent); border-color: var(--accent); }
:root[data-theme="things"] li.task.done .title { text-decoration: none; color: var(--text-3); }
:root[data-theme="things"] .tod-label,
:root[data-theme="things"] .day-label .d-title { letter-spacing: 0; text-transform: none; font-weight: 700; }

/* ---- add bar ------------------------------------------------------------ */
:root[data-theme="things"] .addbar {
  background: var(--canvas); border-top: 1px solid var(--sep-soft);
  border-radius: 0 0 12px 12px; padding: 10px 56px 12px 60px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-theme="things"] body.view-day .addbar .inner,
:root[data-theme="things"] body.view-list .addbar .inner { max-width: 780px; }
:root[data-theme="things"] .addbar input {
  border-radius: 9px; background: var(--fill); border: 0; box-shadow: none; padding: 8px 12px;
}
:root[data-theme="things"] .addbar input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
:root[data-theme="things"] .addbar button { border-radius: 9px; font-weight: 600; }

/* ---- digest rail -------------------------------------------------------- */
:root[data-theme="things"] .digest { border-left: 0; background: var(--chrome); padding: 10px 10px 10px 0; gap: 8px; }
:root[data-theme="things"] .digest .d-title { padding: 8px 4px 0; letter-spacing: .04em; }
:root[data-theme="things"] .dcard { border-radius: 10px; box-shadow: none; background: var(--canvas); padding: 12px 14px; }
:root[data-theme="things"] .dcard h4 { letter-spacing: .04em; }
:root[data-theme="things"] .dcard .temp b { font-weight: 600; letter-spacing: -.02em; }

/* ---- sheets and the editor — square ticks, flatter panels --------------- */
:root[data-theme="things"] .taskedit .pane,
:root[data-theme="things"] .daysheet .panel,
:root[data-theme="things"] .trashsheet .panel { border-radius: 14px; }
:root[data-theme="things"] .setsheet .seg button[aria-checked="true"] { background: var(--th-active); color: var(--text); }

/* ---- calendar ----------------------------------------------------------
   The base grids inherit the tokens, but the CHIPS did not: they are the one
   surface whose colour is set by the task, so the theme's flatter palette left
   every untimed chip as the same pale box on white. The reference draws a task
   as ink on a tinted ground with a coloured lead — so the chip gets a real
   fill, more room, and a done state that greys the INK rather than the fill.
   Otherwise a finished chip lost its colour entirely and read as an empty box,
   which is what "не видно" on the week strip actually was. */
:root[data-theme="things"] .chip {
  font-size: 0.82em; line-height: 1.35; padding: 3px 7px 3px 8px;
  border-radius: 6px; border-left-width: 3px;
  /* The uncoloured fallback is re-pointed as a TOKEN, not as a `background`
     declaration and not through `:not([style*="--hl"])`. Both of those beat
     the colour mix in calendar.css — the attribute selector on specificity,
     a flat `background` on source order — and the result was every chip going
     grey no matter what colour the task carried. One token, and the mix in
     calendar.css serves the coloured and uncoloured cases alike. */
  --hl-fallback: var(--th-tick);
}
:root[data-theme="things"] .wallday {
  padding: 5px 5px 6px; gap: 3px; min-height: 32px;
}
/* Hover deepens the chip's OWN colour rather than replacing it with a flat
   grey — swapping the fill on hover threw away the one thing that tells the
   chips apart. */
:root[data-theme="things"] .wallday .chip:hover {
  background: color-mix(in srgb, var(--hl, var(--hl-fallback, var(--text-3))) 38%, var(--canvas));
}
:root[data-theme="things"] .wallday-lbl { letter-spacing: .05em; padding-top: 7px; }
/* Weekend columns as a wash, the way the reference separates the week's edge
   without a rule or a second ink colour. */
:root[data-theme="things"] .cell.we:not(.now):not(.dim) { background: color-mix(in srgb, var(--chrome) 45%, transparent); }
:root[data-theme="things"] .cell .num { font-weight: 500; }
:root[data-theme="things"] .whead .n { font-weight: 590; }
:root[data-theme="things"] .cell.now { background: color-mix(in srgb, var(--accent) 7%, transparent); }
/* Today's disc gets a ring against the canvas so it reads as a marker set ON
   the grid rather than a cell that happens to be blue. */
:root[data-theme="things"] .whead.now .n {
  box-shadow: 0 0 0 3px var(--canvas), 0 0 0 4.5px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---- year --------------------------------------------------------------
   The month cards lose their shadow for a hairline (the reference stacks
   panels with edges, not elevation) and gain air: at the base spacing twelve
   grids read as one dense block. */
:root[data-theme="things"] .ymonth {
  box-shadow: none; border: 1px solid var(--sep-soft);
  border-radius: 12px; padding: 14px 14px 16px;
}
:root[data-theme="things"] .yeargrid { gap: 18px; }
:root[data-theme="things"] .ymonth h4 { font-weight: 640; margin-bottom: 10px; }
:root[data-theme="things"] .ymonth .yc { border-radius: 7px; font-size: 0.78em; }
/* The wash carries further on this warmer, flatter ground, so each step sits
   a little lighter than the base theme's — the deepest one still has to hold
   ink, and the reference never lets a fill go loud enough to shout. */
:root[data-theme="things"] .ymonth .yc.l1 { background: color-mix(in srgb, var(--accent) 12%, transparent); }
:root[data-theme="things"] .ymonth .yc.l2 { background: color-mix(in srgb, var(--accent) 24%, transparent); }
:root[data-theme="things"] .ymonth .yc.l3 { background: color-mix(in srgb, var(--accent) 40%, transparent); }
:root[data-theme="things"] .ymonth .yc.l4 { background: color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---- sheets ------------------------------------------------------------
   The note editor is already the modern surface — grouped rows, concentric
   radii, a real switch. The task editor, the day sheet and the slot composer
   never got that pass, so they still read as 2007: tight padding, a hard
   16px box, uppercase micro-labels floating over bare inputs. This aligns
   them with the note editor rather than inventing a third language. */
:root[data-theme="things"] .taskedit .pane,
:root[data-theme="things"] .daysheet .panel,
:root[data-theme="things"] .trashsheet .panel { border-radius: 18px; }
:root[data-theme="things"] .taskedit .pane:not(.noteedit) { padding: 18px 20px 20px; }
:root[data-theme="things"] .daysheet .panel { padding: 18px 20px 18px; }
/* Scrim: dimmer and softer. The base 34% black with a 3px blur reads as a
   grey sheet of glass; the reference darkens less and blurs more, so the app
   behind stays recognisable as the place you came from. */
:root[data-theme="things"] .taskedit,
:root[data-theme="things"] .daysheet {
  background: rgba(16,20,28,.28);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
:root[data-theme="things"] .taskedit .pane,
:root[data-theme="things"] .daysheet .panel {
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--sep) 70%, transparent),
              0 24px 60px -12px rgba(0,20,40,.34);
}
/* Field labels: sentence case at reading weight, not shouted caps. Uppercase
   9px tracking is the single strongest "old" tell on these panels. */
:root[data-theme="things"] .taskedit .lbl {
  text-transform: none; letter-spacing: 0; font-size: 0.82em;
  font-weight: 500; color: var(--text-2); margin-bottom: 6px;
}
:root[data-theme="things"] .taskedit .ehead { margin-bottom: 16px; }
:root[data-theme="things"] .taskedit .ehead .who { font-size: 1.08em; font-weight: 650; letter-spacing: -.01em; }
:root[data-theme="things"] .taskedit label.fld { margin-bottom: 14px; }
:root[data-theme="things"] .taskedit input[type="text"],
:root[data-theme="things"] .taskedit input[type="time"],
:root[data-theme="things"] .taskedit input[type="date"] {
  padding: 9px 12px; border-radius: 9px; background: var(--fill);
  border: 0; box-shadow: none;
}
:root[data-theme="things"] .taskedit input:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
:root[data-theme="things"] .taskedit .row2 { gap: 10px; }
:root[data-theme="things"] .taskedit .swatches { gap: 8px; margin-bottom: 16px; }
:root[data-theme="things"] .taskedit .sw { border-radius: 9px; }
:root[data-theme="things"] .taskedit .eactions { gap: 10px; margin-top: 6px; }
:root[data-theme="things"] .taskedit .eactions .save,
:root[data-theme="things"] .taskedit .edel { border-radius: 10px; min-height: 38px; }
:root[data-theme="things"] .taskedit .ro { border-radius: 10px; padding: 10px 12px; }
/* Grouped rows in the note editor: rounder, and the group sits on the sheet
   with an edge instead of a fill, which is how the reference stacks panels. */
:root[data-theme="things"] .noteedit .ne-rows,
:root[data-theme="things"] .noteedit .ne-group { border-radius: 12px; }
:root[data-theme="things"] .noteedit .ne-body { gap: 20px; padding: 20px 22px 22px; }
:root[data-theme="things"] .noteedit .ne-cap {
  text-transform: none; letter-spacing: 0; font-size: 0.82em;
  font-weight: 500; color: var(--text-2); margin-bottom: 8px;
}
:root[data-theme="things"] .noteedit .ne-del { border-radius: 12px; }
:root[data-theme="things"] .daysheet .sheet-head { margin-bottom: 16px; }
:root[data-theme="things"] .daysheet .sheet-head h3 { font-weight: 660; letter-spacing: -.015em; }
:root[data-theme="things"] .slotcompose .pop { border-radius: 14px; padding: 12px 13px 13px; }

/* ---- notes + last time: tokens do most of it -------------------------- */

/* ---- collapse — narrow.css re-stated under this prefix ------------------ */
@media (max-width: 1100px) {
  :root[data-theme="things"] .app,
  :root[data-theme="things"] body:not(.view-day) .app { grid-template-columns: minmax(0, 1fr); }
  :root[data-theme="things"] body.view-day .app { grid-template-rows: minmax(0, 1fr) auto; }
  :root[data-theme="things"] .main { margin: 8px; }
  :root[data-theme="things"] .digest { padding: 0 8px 8px; border-top: 0; }
  :root[data-theme="things"] .appbar { padding: 10px 16px 0; }
  :root[data-theme="things"] .mainscroll { padding: 8px 20px 28px; }
  :root[data-theme="things"] .addbar { padding: 10px 20px 12px; }
}
@media (max-width: 900px) {
  :root[data-theme="things"] #appView { padding: 0; }
  :root[data-theme="things"] body:not(.signed-out) { background: var(--chrome); }
  :root[data-theme="things"] .win { border-radius: 0; box-shadow: none; max-width: none; }
  :root[data-theme="things"] .main { margin: 0; border-radius: 0; box-shadow: none; }
}
@media (max-width: 760px) {
  :root[data-theme="things"] .mainscroll { padding: 6px 14px 20px; }
  :root[data-theme="things"] .appbar { padding: 8px 12px 0; }
  :root[data-theme="things"] .dayhead { margin: 0 0 12px; padding: 8px 0 0; }
  :root[data-theme="things"] .addbar { padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); }
}