/* ---------- Browse as cards, level by level (Drew, 2026-11-10 19:20 "Browse A is perfect"; proposals/browse-cards-2.html A,
   js/motion.js browseLevel, js/cardstyle.js). A card = icon (tap: colour + icon), title, count, then a preview of the
   first few things inside. Colours arrive as --hue (icon), --fg (title), --tint, --solid / --on (js/cardstyle.js). */
/* every card at a level is the same size (Drew, 2026-11-10 22:46: "Remove N more menu so that all cards match in size"): each
   shows its first 4 (top level) / 3 rows, no "N more"; every grid row is as tall as the tallest card, a card fills its cell */
.bc-grid { display: grid; gap: 10px; padding: 2px 10px 16px; align-items: stretch; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.bc-grid.l0 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.bc { --hue: var(--ink55); --fg: var(--ink); position: relative; border-radius: 16px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); overflow: hidden; min-width: 0;
  --ds-bg: var(--sheet); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 120ms var(--ease, ease); }
.bc:active { transform: scale(.985); }
.bc.f-tint { background: var(--tint); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue) 26%, transparent); }
.bc.f-solid { background: var(--solid); box-shadow: none; --fg: var(--on); --ink: var(--on); --ink85: var(--on);
  --ink55: color-mix(in srgb, var(--on) 72%, transparent); --ink40: color-mix(in srgb, var(--on) 62%, transparent); --ink25: color-mix(in srgb, var(--on) 40%, transparent);
  --ink22: color-mix(in srgb, var(--on) 55%, transparent); --line: color-mix(in srgb, var(--on) 16%, transparent); --fill8: color-mix(in srgb, var(--on) 14%, transparent); }
/* one icon column for the card's title and its rows (Drew, 2026-11-10 21:44: titles "aligned awkwardly due to card main icon"):
   x 14, 24 wide, 9 to the text, so the title and the row titles share the 47 px edge; the card's icon is bare, no tile */
.bch { display: flex; align-items: center; gap: 9px; padding: 11px 10px 8px 14px; }
.bc .bt, .bc-head .bt { all: unset; box-sizing: border-box; position: relative; flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  color: var(--hue); background: none; }
.bc.f-solid .bt { color: var(--on); }
.bct { flex: 1; min-width: 0; font-size: 16px; line-height: 21px; font-weight: 700; color: var(--fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bc.f-solid .bct { color: var(--on); }
.bc.l0 .bct { font-size: 18px; line-height: 23px; }
.bcn { flex: none; font-size: 13px; font-weight: 650; color: var(--ink40); font-variant-numeric: tabular-nums; }
.bcg { flex: none; display: flex; color: var(--ink25); margin-left: -4px; }
.bc-st { flex: none; font-size: 11px; font-weight: 750; padding: 1px 7px; border-radius: 6px; background: var(--fill8); color: var(--ink55); white-space: nowrap; }
/* preview rows: the row anatomy one step smaller */
.bc-pv { display: flex; align-items: center; gap: 9px; min-height: 31px; padding: 3px 12px 3px 14px; position: relative; }
/* a row is its own tap (its item), across the card's whole width; the card under it doesn't shrink while it's pressed */
.bc-pv[data-bc-task], .bc-pv[data-bc-doc], .bc-pv[data-bc-kid] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bc-pv:active { background: var(--fill4); }
.bc.f-solid .bc-pv:active { background: color-mix(in srgb, var(--on) 12%, transparent); }
.bc:has(.bc-pv:active) { transform: none; }
.bc-pv + .bc-pv::before { content: ''; position: absolute; top: 0; left: 47px; right: 0; height: 1px; background: var(--line); }
.bc-bx { flex: none; width: 16px; height: 16px; margin: 0 4px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ink22); }
.bc-bx.over { box-shadow: inset 0 0 0 1.5px var(--red70, #e5484d); }
.bc-bx.done { background: var(--accent); box-shadow: none; }
.bc-kt, .bc .ds-tile.bc-kt { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; }
.bc .ds-tile.bc-kt svg { width: 14px; height: 14px; }
.bc-kid { color: var(--hue); background: color-mix(in srgb, var(--hue) 18%, transparent); }
.bc-kid.f-icon:not([class*="cs-"]):not([style*="--hue"]) { color: var(--ink55); background: var(--fill8); }
/* on a solid card every small icon takes the card's text colour, even a child with a colour of its own */
.bc.f-solid { color: var(--on); }
.bc.f-solid .bc-kt, .bc.f-solid .ds-tile.bc-kt { color: inherit !important; background: color-mix(in srgb, currentColor 16%, transparent) !important; }
.bc.f-solid .ds-tile.bc-kt svg { color: inherit; }
.bc-pt { flex: 1; min-width: 0; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--ink85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-pn { flex: none; font-size: 12px; font-weight: 650; color: var(--ink40); font-variant-numeric: tabular-nums; }
.bc-d { flex: none; font-size: 12px; font-weight: 650; color: var(--accent); }
.bc-d.over { color: var(--redText); }
.bc.f-solid .bc-d { color: var(--ink55); }
.bc-end { height: 6px; }
.bc-tx { margin: 0; padding: 0 14px 12px; font-size: 13px; line-height: 18px; color: var(--ink55); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bc-tx.empty { color: var(--ink40); }

/* a level's header: crumbs, then [Back] [icon] Title  count  [pin] */
.bc-head { --hue: var(--ink55); --fg: var(--ink); margin: 4px 16px 10px; }
.bc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 20px; padding-left: 48px; font-size: 13px; font-weight: 650; }
.bc-crumbs button { all: unset; cursor: pointer; color: var(--accent); padding: 2px 4px; margin: -2px -1px; border-radius: 6px; }
.bc-crumbs button:active { background: var(--fill8); }
.bc-crumbs i { font-style: normal; color: var(--ink25); padding: 0 2px; }
.bc-ht { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.bc-ht b { flex: 1; min-width: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-head .bt { width: 28px; height: 28px; }
.bc-head.f-tint .bt, .bc-head.f-solid .bt { color: var(--hue); }
.bc-level .hb-chips { margin-top: 0; }

/* the level being left, a snapshot under / over the new one while it slides */
.bc-old { position: absolute; box-sizing: border-box; overflow: hidden; pointer-events: none; background: var(--app); }
.hb.bc-moving { position: relative; z-index: 2; background: var(--app); box-shadow: -14px 0 32px rgba(0,0,0,.18); }

/* Logbook rows: done */
.hb .ds-row.task.done .ds-box { background: var(--accent); box-shadow: none; }
.hb .ds-row.task.done .ds-title { color: var(--ink40); text-decoration: line-through; }

/* open mode A: Browse keeps the whole screen (its levels slide on it); the pane only holds a to-do's docked menu,
   on the right in landscape (the bottom card in portrait is open.css's) */
html.op-land .phone #scr-browse { right: var(--op-rail); width: auto; }
html.op-land .phone.op-open #scr-browse { right: calc(var(--op-tm-w) + var(--op-rail)); }
html.op-land .phone .op-det[data-op-tab="browse"] { left: auto; width: var(--op-tm-w); }
html.op-land .phone .op-det[data-op-tab="browse"]:not(.has-tm) { display: none; }

/* ---------- the card picker: Colour (set, swatches, fill) | Icon (Phosphor or emoji) ---------- */
.cs-catch { position: fixed; inset: 0; z-index: 90; }
.cs-pop { position: fixed; z-index: 91; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; padding: 10px; border-radius: 20px; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); box-shadow: var(--glassRing), 0 18px 50px rgba(0,0,0,.36);
  -webkit-user-select: none; user-select: none; }
.cs-seg { display: flex; padding: 2px; border-radius: 10px; background: var(--fill8); flex: none; }
.cs-seg + .cs-seg { margin-top: 8px; }
.cs-seg button { all: unset; flex: 1; text-align: center; cursor: pointer; padding: 6px 2px; white-space: nowrap; border-radius: 8px; font-size: 13px; font-weight: 650; color: var(--ink55); }
.cs-seg button.on { background: var(--thumb); color: var(--ink); box-shadow: var(--pill); }
.cs-cap { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 4px 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink40); }
.cs-cap i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
.cs-sws { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 0 2px; }
.cs-sw { all: unset; cursor: pointer; justify-self: center; position: relative; width: 38px; height: 38px; border-radius: 19px; background: var(--sw, var(--hue)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.cs-sw.on::after { content: ''; position: absolute; inset: -4px; border-radius: 23px; box-shadow: 0 0 0 2.5px var(--ink); }
.cs-fills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; --hue: var(--ink40); --tint: var(--fill8); --solid: var(--ink40); }
.cs-fl { all: unset; cursor: pointer; height: 54px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 650;
  color: var(--ink55); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
.cs-fl i { display: block; width: 34px; height: 16px; border-radius: 5px; }
.cs-fl i.fl-icon { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--line), inset 8px 0 0 -1px var(--hue); }
.cs-fl i.fl-tint { background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, transparent); }
.cs-fl i.fl-solid { background: var(--solid); }
.cs-fl.on { box-shadow: inset 0 0 0 2px var(--accent); color: var(--ink); }
.cs-fl[disabled] { opacity: .4; cursor: default; }
.cs-acts { display: flex; gap: 8px; margin-top: 10px; flex: none; }
.cs-acts button { all: unset; cursor: pointer; flex: 1; text-align: center; height: 34px; line-height: 34px; border-radius: 10px; background: var(--fill8); font-size: 13.5px; font-weight: 650; color: var(--ink85); }
.cs-acts button.on { background: var(--a12); color: var(--accent); }
.cs-find { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex: none; }
.cs-find input { flex: 1; min-width: 0; height: 34px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 10px; background: var(--fill8); color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.cs-find .cs-seg { flex: none; width: 150px; margin: 0; }
.cs-grid { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 8px -4px 0; padding: 0 4px; }
.cs-gh { font-size: 11.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink40); margin: 10px 2px 6px; }
.cs-gh:first-child { margin-top: 2px; }
.cs-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.cs-cell { all: unset; cursor: pointer; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--ink85); }
.cs-cell:active { background: var(--fill8); }
.cs-cell.on { background: var(--a12); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.cs-none { margin: 20px 0; text-align: center; color: var(--ink40); font-size: 14px; }
.cs-emo { line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; }
.cs-cell .cs-emo { font-size: 24px; }
.cs-ph { display: block; }