/* 所務看板 — compact layout. Base 12px / 1.25, 4px rhythm, no heavy shadows. */

:root {
  /* 日本の伝統色 palette (2026-10-25). Named colors: nipponcolors.com (exact hex); 裏葉色 → nipponcolors 裏柳,
     羊羹色 and 枯草色 are not on nipponcolors → colordic.org 和色大辞典. Tints/shades below are mixes of these. */
  --jp-shironeri: #FCFAF2;  /* 白練 SHIRONERI  page background */
  --jp-shironezumi: #BDC0BA;/* 白鼠 SHIRONEZUMI  neutral greys are tints of it */
  --jp-yokan: #383C3C;      /* 羊羹色  text */
  --jp-masuhana: #577C8A;   /* 舛花 MASUHANA  accent */
  --jp-kokiake: #86473F;    /* 深緋 KOKIAKE  overdue / ≤3 days, danger */
  --jp-ohni: #F05E1C;       /* 黄丹 OHNI  4–7 days (as a tint) */
  --jp-urayanagi: #B5CAA0;  /* 裏柳 URAYANAGI (≈裏葉色)  ok tint */
  --jp-karekusa: #E4DC8A;   /* 枯草色  warning tint */
  --bg: #FCFAF2;
  --panel: #fefdfa;
  --white: #ffffff;
  --col-bg: #eeede6;
  --col-bg-hover: #e9e9e1;
  --line: #e0e0d9;
  --line-soft: #eeede6;
  --input-line: #d5d6cf;
  --text: #383C3C;
  --text-strong: #2d3030;
  --text-2: #555857;
  --muted: #5f6260;         /* ≥4.5:1 on every background incl. card tints */
  --muted-card: #535755;
  --desc: #9487a7;          /* owner's choice for descriptions / notes (below AA on tinted cards, by request) */
  --href: #619cd8;          /* owner's choice for hyperlinks, no underline */
  --faint: #8a8c88;         /* icons, borders, weekend labels: ≥3:1 on white; not for body text */
  --accent: #577C8A;        /* 舛花: white text on it 4.5:1 */
  --accent-hover: #516f7a;
  --accent-soft: #e7edef;
  --accent-line: #abbec4;
  --link: #4f6c76;
  --btn: #f4f3eb;
  --btn-hover: #eeede6;
  --th: #f6f4ec;
  --row-hover: #f4f3eb;
  --chip: #e6e7e5;          /* neutral badge (due later than 7 days, calendar entries) */
  --chip-hover: #dbdcd9;
  --warn-bg: #f6f3d6;       /* 枯草色 tint */
  --warn-line: #b9b476;
  --warn-text: #7f6623;     /* on --warn-bg: 4.9:1 */
  --danger: #86473F;        /* 深緋 */
  --danger-hover: #76453e;
  --danger-bg: #f3edec;
  --danger-line: #d1b9b6;
  --ok: #105b46;
  --ok-bg: #e1ead9;         /* 裏柳 tint */
  --shadow: rgba(56, 60, 60, .10);
  --col-w: 330px;
  --due-urgent-bg: #e76a5a; /* owner's choice: overdue / <= 3 days */
  --due-urgent-text: #1C1C1C; /* 墨 on it: higher than white */
  --due-urgent-ink: #86473F; /* 深緋 for urgency text on white (calendar 逾期 header) */
  --due-near-bg: #f9ce74;   /* owner's choice: 4–7 days */
  --due-near-line: #e3b04f;
  --due-near-text: #383C3C; /* 羊羹 */
  /* due badges (v10, 2026-10-29): thin red frame, black text, the palest fill per tier.
     --due-urgent-bg / --due-near-bg / --due-near-line stay as the strong calendar dots + legend. */
  --due-line: #d44c47;        /* badge frame (Notion red) */
  --due-text: #191919;        /* badge text */
  --due-urgent-fill: #fdebe6; /* overdue / today / <= 3 days: palest coral */
  --due-near-fill: #fdf5d6;   /* 4–7 days: palest yellow */
  --due-later-fill: #f4f3f1;  /* later: palest gray */
  --chip-text: #555857;     /* neutral due chip text (= --text-2) */
  /* card label colours, Notion palette (2026-10-29): -bd = the card's 1px frame, -bg = light fill
     (calendar entries, swatches). Cards themselves are always white. Stored colour names unchanged.
     Themable in 配色 (public/theme.js). */
  --card-white-bd: #dfdedb; --card-white-bg: #f7f7f5; /* Notion default / gray */
  --card-yellow-bd: #CB912F; --card-yellow-bg: #FBF3DB; /* Notion yellow */
  --card-red-bd: #D44C47; --card-red-bg: #FDEBEC; /* Notion red */
  --card-green-bd: #448361; --card-green-bg: #EDF3EC; /* Notion green */
  --card-blue-bd: #337EA9; --card-blue-bg: #E7F3F8; /* Notion blue */
  --card-purple-bd: #9065B0; --card-purple-bg: #F6F3F9; /* Notion purple */
  --card-orange-bd: #D9730D; --card-orange-bg: #FBECDD; /* Notion orange */
  --card-cyan-bd: #2E8A87; --card-cyan-bg: #E6F3F2; /* teal: Notion has no cyan, kept distinct from blue */
  --card-brown-bd: #9F6B53; --card-brown-bg: #F4EEEE; /* Notion brown */
  --card-magenta-bd: #C14C8A; --card-magenta-bg: #FAF1F5; /* Notion pink */
  --glow: 10%;              /* legacy theme key; unused since the Notion restyle (no stripe, no glow) */
  /* card colour as a glow rising from the bottom edge (inset shadow; colour = --c-bd), 2026-10-29 v9 */
  --card-glow: inset 0 -4px 5px -3px;        /* thin + subtle (v10: ~1/3 of v9) */
  --card-glow-hover: inset 0 -6px 7px -4px;
  --cal-glow: inset 0 -3px 3px -2px;         /* calendar entries: same idea, compact */
  --card-edge: rgba(55, 53, 47, .09);   /* faint neutral 1px border */
  --card-lift: 0 1px 3px rgba(15, 15, 15, .08);
  /* column groups (Notion board look): tinted column, pill title, count in the same hue. Picked by position. */
  --nh-orange-col: #FBEDE1; --nh-orange-tag: #FADEC9; --nh-orange-ink: #49290E; --nh-orange-cnt: #C76A10;
  --nh-red-col: #FEEEEC;    --nh-red-tag: #FFE2DD;    --nh-red-ink: #5D1715;    --nh-red-cnt: #C4554D;
  --nh-purple-col: #F3EEF6; --nh-purple-tag: #E8DEEE; --nh-purple-ink: #412454; --nh-purple-cnt: #9065B0;
  --nh-blue-col: #E8F1F7;   --nh-blue-tag: #D3E5EF;   --nh-blue-ink: #183347;   --nh-blue-cnt: #337EA9;
  --nh-green-col: #EBF4EB;  --nh-green-tag: #DBEDDB;  --nh-green-ink: #1C3829;  --nh-green-cnt: #448361;
  --nh-yellow-col: #FCF4E1; --nh-yellow-tag: #FDECC8; --nh-yellow-ink: #402C1B; --nh-yellow-cnt: #B07E25;
  --nh-pink-col: #F9EEF3;   --nh-pink-tag: #F5E0E9;   --nh-pink-ink: #4C2337;   --nh-pink-cnt: #C14C8A;
  --nh-brown-col: #F5EEEB;  --nh-brown-tag: #EEE0DA;  --nh-brown-ink: #442A1E;  --nh-brown-cnt: #9F6B53;
  --nh-gray-col: #F0F0EE;   --nh-gray-tag: #E3E2E0;   --nh-gray-ink: #32302C;   --nh-gray-cnt: #787774;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  font: 12px/1.25 -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button {
  border: 1px solid var(--line);
  background: var(--btn);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  line-height: 1.25;
}
button:hover:not(:disabled) { background: var(--btn-hover); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.danger { color: var(--danger); }
button.small { padding: 1px 6px; font-size: 11px; }

input[type="text"], input[type="search"], input[type="password"], input[type="date"], input[type="time"],
input:not([type]), select, textarea {
  border: 1px solid var(--input-line);
  border-radius: 3px;
  padding: 2px 5px;
  background: var(--white);
  min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); outline-offset: 0; border-color: var(--accent-line); }
textarea { resize: vertical; line-height: 1.35; }

.muted { color: var(--muted); }
.spacer { flex: 1; }

/* ---------- login ---------- */
.login { height: 100%; display: flex; align-items: center; justify-content: center; }
.login-box {
  display: flex; flex-direction: column; gap: 8px; width: 240px;
  background: var(--white); padding: 16px; border: 1px solid var(--line); border-radius: 6px;
}
.login-box h1 { font-size: 16px; margin: 0 0 4px; text-align: center; }
.login-box input, .login-box button { padding: 6px 8px; }
.login-error { color: var(--danger); min-height: 15px; font-size: 11px; text-align: center; }

/* ---------- app shell ---------- */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
  flex: none; height: 32px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px; background: var(--white); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 13px; white-space: nowrap; }
.search { width: 220px; height: 22px; }
.toggle { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; color: var(--text-2); }
.toggle input { margin: 0; }
.toggle .short { display: none; }
.status { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tb-btn { height: 22px; padding: 0 7px; }
.arch-open { display: inline-flex; align-items: center; gap: 4px; }
.arch-open:hover:not(:disabled) { color: var(--warn-text); border-color: var(--warn-line); background: var(--warn-bg); }
.arch-cnt {
  font-size: 10px; line-height: 14px; min-width: 14px; padding: 0 4px; border-radius: 7px;
  background: var(--line-soft); color: var(--text-2); text-align: center; font-variant-numeric: tabular-nums;
}
.arch-cnt:empty { display: none; }

/* ---------- board & columns ---------- */
.board {
  flex: 1; min-height: 0;
  display: flex; align-items: stretch; gap: 4px;
  padding: 4px;
  overflow-x: auto; overflow-y: hidden;
}

.col {
  flex: 0 0 var(--col-w); width: var(--col-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--col-bg); border-radius: 4px;
}
.col-hd {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding: 4px 4px 3px 7px; font-weight: 600; min-height: 24px;
}
.col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-cnt { color: var(--muted); font-weight: 400; font-size: 11px; }
/* Notion-style groups: hue class by column position (ch-orange, ch-red, …; public/app.js COL_HUES) */
.col[class*="ch-"] { background: var(--nh-col); border-radius: 6px; }
.col[class*="ch-"] .col-hd { padding: 6px 4px 5px 7px; gap: 7px; }
.col[class*="ch-"] .col-name {
  background: var(--nh-tag); color: var(--nh-ink); border-radius: 4px;
  padding: 1px 7px; font-weight: 500; font-size: 13.5px; line-height: 20px;
}
.col[class*="ch-"] .col-cnt { color: var(--nh-cnt); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.ch-orange { --nh-col: var(--nh-orange-col); --nh-tag: var(--nh-orange-tag); --nh-ink: var(--nh-orange-ink); --nh-cnt: var(--nh-orange-cnt); }
.ch-red    { --nh-col: var(--nh-red-col);    --nh-tag: var(--nh-red-tag);    --nh-ink: var(--nh-red-ink);    --nh-cnt: var(--nh-red-cnt); }
.ch-purple { --nh-col: var(--nh-purple-col); --nh-tag: var(--nh-purple-tag); --nh-ink: var(--nh-purple-ink); --nh-cnt: var(--nh-purple-cnt); }
.ch-blue   { --nh-col: var(--nh-blue-col);   --nh-tag: var(--nh-blue-tag);   --nh-ink: var(--nh-blue-ink);   --nh-cnt: var(--nh-blue-cnt); }
.ch-green  { --nh-col: var(--nh-green-col);  --nh-tag: var(--nh-green-tag);  --nh-ink: var(--nh-green-ink);  --nh-cnt: var(--nh-green-cnt); }
.ch-yellow { --nh-col: var(--nh-yellow-col); --nh-tag: var(--nh-yellow-tag); --nh-ink: var(--nh-yellow-ink); --nh-cnt: var(--nh-yellow-cnt); }
.ch-pink   { --nh-col: var(--nh-pink-col);   --nh-tag: var(--nh-pink-tag);   --nh-ink: var(--nh-pink-ink);   --nh-cnt: var(--nh-pink-cnt); }
.ch-brown  { --nh-col: var(--nh-brown-col);  --nh-tag: var(--nh-brown-tag);  --nh-ink: var(--nh-brown-ink);  --nh-cnt: var(--nh-brown-cnt); }
.ch-gray   { --nh-col: var(--nh-gray-col);   --nh-tag: var(--nh-gray-tag);   --nh-ink: var(--nh-gray-ink);   --nh-cnt: var(--nh-gray-cnt); }
.col-strip[class*="ch-"] { background: var(--nh-col); border-radius: 6px; }
.col-strip[class*="ch-"] .strip-cnt { color: var(--nh-cnt); font-weight: 600; }
.col-strip[class*="ch-"] .strip-name { color: var(--nh-ink); }
.col-menu-btn {
  margin-left: auto; border: 0; background: none; color: var(--muted);
  padding: 0 5px; font-size: 14px; line-height: 16px; border-radius: 3px;
}
.col-menu-btn:hover:not(:disabled) { background: rgba(0, 0, 0, .07); color: var(--text); }
.col-rename { flex: 1; font-weight: 600; padding: 1px 4px; }

.col-list {
  flex: 1 1 auto; min-height: 24px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; /* 8px between cards */
  padding: 0 4px 4px;
  scrollbar-width: thin;
}
.col-ft { flex: none; padding: 2px 4px 4px; }
.add-card {
  width: 100%; text-align: left; border: 0; background: none;
  color: var(--muted); padding: 2px 4px;
}
.add-card:hover:not(:disabled) { background: rgba(0, 0, 0, .06); color: var(--text); }
.add-card-input { width: 100%; display: block; resize: none; padding: 3px 5px; }
.type-seg { display: inline-flex; margin-top: 3px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.type-opt { border: 0; border-radius: 0; background: var(--btn); color: var(--muted); font-size: 10.5px; padding: 1px 8px; }
.type-opt + .type-opt { border-left: 1px solid var(--line); }
.type-opt.on, .type-opt.on:hover:not(:disabled) { background: var(--line-soft); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--input-line); }

/* Collapsed column = narrow vertical strip */
.col-strip {
  flex: 0 0 26px; width: 26px; align-items: center; gap: 6px;
  padding: 6px 0; cursor: pointer; overflow: hidden;
}
.col-strip:hover { background: var(--col-bg-hover); }
.strip-cnt { font-size: 11px; color: var(--muted); }
.strip-name {
  writing-mode: vertical-rl; font-weight: 600; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%;
}
.col-strip.drop-hot { background: var(--accent-soft); }

.add-col-wrap { flex: 0 0 170px; width: 170px; background: transparent; }
.add-col {
  border: 1px dashed var(--input-line); background: transparent; color: var(--muted);
  text-align: left; padding: 4px 8px;
}
.add-col:hover:not(:disabled) { background: rgba(255, 255, 255, .5); color: var(--text); }
.add-col-input { width: 100%; padding: 3px 6px; }

/* ---------- cards ---------- */
/* card label colours (stored names unchanged): values live in :root (--card-*-bd / --card-*-bg) */
.c-white   { --c-bd: var(--card-white-bd); --c-bg: var(--card-white-bg); }
.c-yellow  { --c-bd: var(--card-yellow-bd); --c-bg: var(--card-yellow-bg); }
.c-red     { --c-bd: var(--card-red-bd); --c-bg: var(--card-red-bg); }
.c-green   { --c-bd: var(--card-green-bd); --c-bg: var(--card-green-bg); }
.c-blue    { --c-bd: var(--card-blue-bd); --c-bg: var(--card-blue-bg); }
.c-purple  { --c-bd: var(--card-purple-bd); --c-bg: var(--card-purple-bg); }
.c-orange  { --c-bd: var(--card-orange-bd); --c-bg: var(--card-orange-bg); }
.c-cyan    { --c-bd: var(--card-cyan-bd); --c-bg: var(--card-cyan-bg); }
.c-brown   { --c-bd: var(--card-brown-bd); --c-bg: var(--card-brown-bg); }
.c-magenta { --c-bd: var(--card-magenta-bd); --c-bg: var(--card-magenta-bg); }
/* muted text on cards: a touch darker so small text stays >= 4.5:1 (WCAG AA) */
.card, .arch-item { --muted: var(--muted-card); }

.card {
  flex: none;
  /* Notion look (2026-10-29): always white; the card's colour glows up from its bottom edge (inset shadow),
     a faint neutral 1px border + soft outer shadow separate the cards. No stripe. */
  background: var(--white);
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  padding: 8px;
  box-shadow: var(--card-glow) var(--c-bd, var(--card-white-bd)), var(--card-lift);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.card:hover { box-shadow: var(--card-glow-hover) var(--c-bd, var(--card-white-bd)), 0 2px 8px rgba(15, 15, 15, .10); }
.card.dragging { opacity: .35; }

.card-hd { display: flex; align-items: flex-start; gap: 3px; }
.card-hd .title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--text-strong); }
.card-due { margin-top: 3px; line-height: 1.25; }
.card-due .due { font-size: 11.5px; }
.meta { flex: none; display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; line-height: 17.5px; }
/* [archive] button: inline right after the title text; faint grey, orange on hover */
.arch-btn {
  display: inline-block; vertical-align: 1px; margin-left: 5px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 10px; font-weight: 400; line-height: 13px; padding: 0 4px; border-radius: 3px;
  white-space: nowrap; letter-spacing: .2px;
}
.arch-btn:hover:not(:disabled), .arch-btn:focus-visible {
  background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); outline: none;
}
.arch-btn:active { background: var(--warn-line); }
.arch-btn + .arch-btn { margin-left: 3px; }
/* 清除子項 deletes permanently: same faint pill, but red (danger) on hover */
.arch-clear:hover:not(:disabled), .arch-clear:focus-visible { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.arch-clear:active { background: var(--danger-line); }
button.danger-solid { background: var(--danger); border-color: var(--danger); color: var(--white); }
button.danger-solid:hover:not(:disabled) { background: var(--danger-hover); border-color: var(--danger-hover); }
.cf-list {
  margin: 0; padding: 4px 8px 4px 22px; max-height: 30vh; overflow-y: auto;
  background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: 4px; color: var(--danger);
}
.cf-list li { padding: 1px 0; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.cf .dlg-title { color: var(--danger); }
#cf-msg { white-space: pre-line; }
/* 移入其他卡片: the listed sub-items move along (kept), so no strike-through */
.cf-list.keep { background: var(--panel); border-color: var(--line); color: var(--text-2); }
.cf-list.keep li { text-decoration: none; }
.cnt { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cnt.all { color: var(--ok); }

/* due badge (v10): 1px red frame, black text, palest fill by urgency tier (public/due.js, Taipei days):
   overdue / today / <= 3 days = coral, 4–7 days = yellow, later = gray. Height stays <= the text line. */
.due {
  font-size: .85em; font-weight: 400; line-height: 12px; padding: 1px 4px; border-radius: 999px;
  background: var(--due-later-fill); color: var(--due-text); border: 1px solid var(--due-line);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.due.urgent { background: var(--due-urgent-fill); }
.due.near { background: var(--due-near-fill); }
.due.done { background: transparent; border-color: transparent; color: var(--muted); text-decoration: line-through; }

.desc {
  margin-top: 2px; color: var(--desc); font-size: 11.5px; line-height: 1.35;
  white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}

/* full description (MEMO body, or any description holding a table): no 2-line clamp */
.desc.desc-full { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.md-text { white-space: pre-line; }
.card.memo .desc-full { font-size: 11.5px; color: var(--text-2); }
.desc-view .md-text { white-space: pre-wrap; }
.md-text + .md-table-wrap, .md-table-wrap + .md-text, .md-table-wrap + .md-table-wrap { margin-top: 4px; }

/* Markdown pipe tables (Notion-like): light grid, bold header, scroll sideways instead of widening the column */
.md-table-wrap {
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; margin: 2px 0;
}
.md-table {
  border-collapse: collapse; font-size: 11.5px; line-height: 1.3; color: var(--text-2);
  background: rgba(255, 255, 255, .7); white-space: normal;
}
.md-table th, .md-table td {
  border: 1px solid var(--line); padding: 2px 6px; text-align: left; vertical-align: top;
  min-width: 3.5em; max-width: 22em; overflow-wrap: break-word; word-break: normal;
}
.md-table th { background: var(--th); font-weight: 600; color: var(--text); white-space: nowrap; }
.md-table td:empty::after { content: "\00a0"; }
.desc-view .md-table { font-size: 12px; background: var(--white); }

/* ---------- MEMO cards: collapsed by default ---------- */
/* .memo-body slides between 0fr and 1fr rows; it opens when pinned (Expand), when searching,
   while something inside has focus, and on hover on devices that can hover. */
.memo-body, .memo-hint {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
.memo-inner, .memo-hint-in { min-height: 0; overflow: hidden; }
.memo-inner { visibility: hidden; transition: visibility 0s linear .22s; }
.memo-hint { grid-template-rows: 1fr; }
.memo-hint-in {
  font-size: 11px; line-height: 1.3; color: var(--muted);
  white-space: nowrap; text-overflow: ellipsis; margin-top: 1px;
}
.card.memo.has-body.pinned .memo-body, .card.memo.has-body.q-open .memo-body,
.card.memo:not(.has-body) .memo-body { grid-template-rows: 1fr; }
.card.memo.has-body.pinned .memo-inner, .card.memo.has-body.q-open .memo-inner,
.card.memo:not(.has-body) .memo-inner { visibility: visible; transition-delay: 0s; }
.card.memo.has-body.pinned .memo-hint, .card.memo.has-body.q-open .memo-hint { grid-template-rows: 0fr; }
/* keep it open while typing inside (e.g. the inline "add item" input); separate rules so old browsers without :has() keep the rest */
.card.memo.has-body:has(.memo-inner :focus) .memo-body { grid-template-rows: 1fr; }
.card.memo.has-body:has(.memo-inner :focus) .memo-inner { visibility: visible; transition-delay: 0s; }
.card.memo.has-body:has(.memo-inner :focus) .memo-hint { grid-template-rows: 0fr; }
@media (hover: hover) {
  /* small delay before opening, so sweeping the mouse across the column does not flash every memo */
  .card.memo.has-body:hover:not(.dragging):not(.hover-off) .memo-body { grid-template-rows: 1fr; transition-delay: .12s; }
  .card.memo.has-body:hover:not(.dragging):not(.hover-off) .memo-inner { visibility: visible; transition-delay: .12s; }
  .card.memo.has-body:hover:not(.dragging):not(.hover-off) .memo-hint { grid-template-rows: 0fr; transition-delay: .12s; }
}
@media (prefers-reduced-motion: reduce) {
  .memo-body, .memo-hint, .memo-inner { transition: none !important; }
}
/* [Expand] / [Collapse] pill: same faint style as Archive, neutral grey on hover */
.memo-toggle {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 10px; font-weight: 400; line-height: 13px; padding: 0 4px; border-radius: 3px; white-space: nowrap;
}
.memo-toggle:hover:not(:disabled), .memo-toggle:focus-visible { background: var(--th); border-color: var(--faint); color: var(--text-2); outline: none; }
.card.pinned .memo-toggle { color: var(--text-2); border-color: var(--input-line); background: var(--th); }

.add-st-hd {
  border: 0; background: none; padding: 0 2px; color: var(--faint);
  font-size: 13px; line-height: 14px; opacity: 0;
}
.card:hover .add-st-hd, .add-st-hd:focus { opacity: 1; }
.add-st-hd:hover:not(:disabled) { background: none; color: var(--accent); }

/* On-board subtasks: tight, checkable rows */
.sts { list-style: none; margin: 1px 0 0; padding: 0; cursor: default; }
.st { display: flex; align-items: flex-start; gap: 3px; font-size: 13.5px; line-height: 1.25; padding: 0; margin: 5px 0; color: var(--text-2); }
.st label { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 4px; cursor: pointer; }
.st input[type="checkbox"] {
  flex: none; width: 13px; height: 13px; margin: calc((1.25em - 13px) / 2) 0 0; cursor: pointer; accent-color: var(--accent);
}
.st .nm { min-width: 0; cursor: text; }
.st .nm:hover { text-decoration: underline dotted rgba(56, 60, 60, .45); text-underline-offset: 2px; }
.st-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* optional subtask description: small muted text, 2 lines on the board; long URLs wrap instead of widening the column */
.st-desc {
  margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--desc); cursor: text;
  white-space: pre-line; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* links in card titles / descriptions / subtask names (named [Name](url) or bare URLs): wrap, never widen a column */
.card a, .arch-name a, .arch-st-nm a, .rf a, .desc-view a {
  color: var(--href); text-decoration: none; text-underline-offset: 2px;
  overflow-wrap: anywhere; word-break: break-word; cursor: pointer; border-radius: 2px;
}
/* no underline; underline on hover only where there is a real hover (desktop), and a visible keyboard focus ring */
@media (hover: hover) {
  .card a:hover, .arch-name a:hover, .arch-st-nm a:hover, .rf a:hover, .desc-view a:hover { text-decoration: underline; }
}
.card a:focus-visible, .arch-name a:focus-visible, .arch-st-nm a:focus-visible, .rf a:focus-visible, .desc-view a:focus-visible {
  outline: 2px solid var(--href); outline-offset: 1px; text-decoration: underline;
}
.st.done .nm a { color: inherit; }
.st.done .st-desc { color: var(--desc); opacity: .8; }

/* MEMO cards: bulleted items, no checkboxes */
/* TODO/MEMO label: small neutral grey (no blue); on cards the MEMO label sits after the title */
.type-tag {
  display: inline-block; vertical-align: 1px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .4px; line-height: 13px;
  padding: 0 4px; border-radius: 3px; background: var(--th); color: var(--muted); border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.memo-tag { margin-left: 5px; }
.type-tag.todo-tag { background: var(--th); color: var(--muted); }
.memo-items .mi { gap: 5px; }
.mi-dot { flex: none; width: 13px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.25; }
.st.done .nm { color: var(--muted); text-decoration: line-through; }
/* same size as the subtask text and centred on its first line */
.st .due { flex: none; margin-top: .5px; } /* 16px pill on a 16.9px first line */
body.hide-done .st.done { display: none; }

.st-add { line-height: 14px; padding: 0; }
.add-st {
  border: 0; background: none; padding: 0 2px; color: var(--muted);
  font-size: 13px; line-height: 14px; opacity: .75;
}
.card:hover .add-st { opacity: 1; }
.add-st:hover:not(:disabled) { background: none; color: var(--accent); }
.st-new { width: 100%; font-size: 13.5px; padding: 1px 4px; margin: 1px 0; }

.drop-ind { flex: none; height: 2px; margin: -3px 0; background: var(--accent); border-radius: 1px; }

/* ---------- popover menu ---------- */
.menu {
  position: fixed; z-index: 60; min-width: 130px;
  display: flex; flex-direction: column; padding: 3px;
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 2px 8px rgba(56, 60, 60, .12);
}
.menu button { border: 0; background: none; text-align: left; padding: 4px 8px; border-radius: 3px; }
.menu button:hover:not(:disabled) { background: var(--row-hover); }

/* ---------- modal ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 8px 8px; background: rgba(56, 60, 60, .32);
}
.modal {
  width: min(640px, 100%); max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border-radius: 6px; padding: 8px 10px 10px;
  border-top: 4px solid var(--c-bd, var(--input-line));
  box-shadow: 0 6px 24px rgba(56, 60, 60, .18);
}
.icon-btn { border: 0; background: none; padding: 2px 6px; color: var(--muted); font-size: 13px; }

.m-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.m-lbl { color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.m-grid select { justify-self: start; max-width: 100%; }

.swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.sw {
  width: 22px; height: 18px; padding: 0; border-radius: 3px;
  background: var(--white); border: 2px solid var(--c-bd); border-radius: 5px;
}
.sw:hover:not(:disabled) { background: var(--c-bg); }
.sw.on { outline: 2px solid var(--text); outline-offset: 1px; }

.m-sec { display: flex; flex-direction: column; gap: 4px; }
.m-sec-hd { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 11px; letter-spacing: .04em; color: var(--text-2); }
.desc-view {
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4;
  padding: 4px 6px; border: 1px solid transparent; border-radius: 3px; background: var(--panel);
  cursor: text; max-height: 40vh; overflow-y: auto;
}
.desc-view:hover { border-color: var(--line); }
#m-desc { width: 100%; min-height: 70px; }

.m-sts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ms { display: flex; align-items: center; gap: 4px; }
.ms input[type="checkbox"] { flex: none; margin: 0; width: 14px; height: 14px; accent-color: var(--accent); }
.ms-name { flex: 1; min-width: 90px; resize: none; overflow: hidden; overflow-wrap: anywhere; line-height: 1.4; font: inherit; padding: 3px 6px; }
.ms.done .ms-name { color: var(--muted); text-decoration: line-through; }
.ms-date { width: 122px; }
.ms-time { width: 104px; }
.ms button { border: 0; background: none; padding: 1px 4px; color: var(--muted); }
.ms button:hover:not(:disabled) { background: var(--btn-hover); color: var(--text); }
.ms .ms-del:hover:not(:disabled) { color: var(--danger); }
.ms { flex-wrap: wrap; }
.ms-dot { flex: none; width: 14px; text-align: center; color: var(--muted); }
.ms-desc {
  flex: 1 0 100%; margin-left: 18px; max-width: calc(100% - 18px);
  font-size: 11.5px; color: var(--text-2); resize: vertical; min-height: 22px; padding: 2px 5px;
}
.m-type { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-type .type-tag { margin: 0; }
.m-type-hint { font-size: 11px; }
.convert-btn:hover:not(:disabled) { border-color: var(--faint); color: var(--text); background: var(--th); }
.m-st-add { display: flex; gap: 4px; }
.m-st-add input { flex: 1; }

.m-meta { font-size: 10.5px; }

.dlg {
  width: min(340px, 100%); display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border-radius: 6px; padding: 12px; margin-top: 10vh;
  box-shadow: 0 6px 24px rgba(56, 60, 60, .18);
}
.dlg-title { font-weight: 700; font-size: 13px; }
.dlg-msg { color: var(--text-2); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- edit sheets: card editor (#modal) + subtask editor (.sp) ----------
   header (title + ✕) / scrolling body / footer (刪除 left, 取消 + 儲存 right).
   Desktop: centered card. Phones (<=700px): bottom sheet above the keyboard (see trackViewport in app.js). */
.modal, .dlg.sp {
  max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; gap: 0; padding: 0;
  background: var(--bg); border-radius: 10px; box-shadow: 0 10px 32px rgba(56, 60, 60, .20);
}
.modal { width: min(640px, 100%); border-top: 4px solid var(--c-bd, var(--line)); }
.dlg.sp { width: min(480px, 100%); margin-top: 8vh; }
.sheet-hd { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 8px 2px 16px; }
.sheet-title { flex: 1; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--text-2); }
.sheet-x { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 14px; color: var(--muted); }
.sheet-x:hover:not(:disabled) { background: var(--btn-hover); color: var(--text); }
.sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px; padding: 6px 16px 14px;
}
.sheet-ft {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel);
}
.sheet-ft button { min-height: 32px; padding: 4px 18px; border-radius: 6px; }
.sheet-ft button.text-danger { border-color: transparent; background: none; padding: 4px 8px; margin-left: -8px; }
.sheet-ft button.text-danger:hover:not(:disabled) { background: var(--danger-bg); }
.sheet-ft button.text-act { border-color: transparent; background: none; padding: 4px 8px; color: var(--text-2); }
.sheet-ft button.text-act:hover:not(:disabled) { background: var(--btn-hover); color: var(--text); }

/* card picker (移入其他卡片) */
.dlg.pk { width: min(460px, 100%); max-height: 80vh; }
.pk-search { width: 100%; min-height: 30px; }
.pk-list {
  list-style: none; margin: 0; padding: 2px; flex: 1 1 auto; min-height: 0; max-height: 50vh; overflow-y: auto;
  overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.pk-row { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.pk-row:hover { background: var(--row-hover); }
.pk-row.on { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -1px; }
.pk-name { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.pk-name .type-tag { margin-left: 6px; }
.pk-meta { font-size: 11px; }
.pk-empty { padding: 10px 4px; text-align: center; }

.fld { display: flex; flex-direction: column; gap: 5px; }
.fld-lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-2); }
.fld-hint { font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.fld textarea, .due-part input, .m-grid select, #m-desc, .m-st-add input {
  background: var(--white); border: 1px solid var(--input-line); border-radius: 6px; padding: 6px 9px; line-height: 1.45;
}
.fld textarea:focus, .due-part input:focus, .m-grid select:focus, #m-desc:focus, .m-st-add input:focus {
  border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0;
}
.m-title, #sp-name {
  width: 100%; resize: none; overflow: hidden; display: block;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-strong); overflow-wrap: anywhere;
}
#sp-desc, #m-desc { width: 100%; display: block; resize: vertical; min-height: 64px; line-height: 1.5; }
.m-sec { gap: 6px; }
.desc-view { border-radius: 6px; background: var(--white); border-color: var(--line); padding: 6px 9px; }
/* rendered view of an editor field that contains links (tap text or ✎ to edit the raw text) */
.rf {
  display: flex; align-items: flex-start; gap: 8px; min-width: 0; cursor: text;
  background: var(--white); border: 1px solid var(--input-line); border-radius: 6px; padding: 6px 9px;
}
.rf-text { flex: 1; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.rf-blocks { white-space: normal; }
.rf-blocks .md-text { white-space: pre-wrap; }
.rf-blocks .md-table { font-size: 12px; }
.rf-edit {
  flex: none; align-self: flex-start; border: 0; background: none; padding: 0 2px;
  font-size: 11.5px; font-weight: 400; line-height: 1.7; color: var(--muted); white-space: nowrap;
}
.rf-edit:hover:not(:disabled) { color: var(--accent); background: none; }
.rf-sp-name, .rf-m-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-strong); }
.rf-sp-desc { line-height: 1.5; }
.rf-ms-name { flex: 1; min-width: 90px; padding: 3px 6px; }
.rf-ms-desc {
  flex: 1 0 100%; margin-left: 18px; max-width: calc(100% - 18px);
  font-size: 11.5px; color: var(--text-2); padding: 2px 5px;
}

.due-fld { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.due-part { display: flex; flex-direction: column; gap: 3px; }
.due-sub { font-size: 10.5px; color: var(--muted); }
.due-part input[type="date"] { width: 150px; }
.due-part input[type="time"] { width: 112px; }
.due-part input { min-height: 30px; -webkit-appearance: none; appearance: none; text-align: left; }
.due-part input::-webkit-date-and-time-value { text-align: left; }
.link-btn {
  border: 0; background: none; padding: 4px 2px; margin-bottom: 4px; font-size: 12px;
  color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 2px;
}
.link-btn:hover:not(:disabled) { background: none; color: var(--accent-hover); text-decoration-color: currentColor; }

/* phones: bottom sheets, ≥44px targets, 16px+ inputs (no iOS zoom), safe-area padding */
@media (max-width: 700px) {
  .backdrop { align-items: flex-end; padding: 0; top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100%); }
  .modal, .dlg.sp {
    width: 100%; margin: 0; border-radius: 14px 14px 0 0;
    max-height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top, 0px) - 12px);
  }
  .modal { border-top-width: 5px; }
  .sheet-hd { padding: 14px 6px 2px 18px; }
  .sheet-hd::before {
    content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
    border-radius: 2px; background: var(--line);
  }
  .sheet-title { font-size: 13px; }
  .sheet-x { width: 44px; height: 44px; font-size: 16px; }
  .sheet-body { gap: 16px; padding: 6px 18px 18px; }
  .sheet-ft { padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .sheet-ft button { min-height: 44px; padding: 0 22px; font-size: 15px; border-radius: 8px; }
  .sheet-ft button.text-danger { padding: 0 10px; margin-left: -10px; }
  .sheet-ft button.text-act { padding: 0 8px; }
  .dlg.pk { max-height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top, 0px) - 12px); }
  .pk-search { min-height: 44px; font-size: 16px; } /* 16px: no iOS focus zoom */
  .pk-list { max-height: none; }
  .pk-row { min-height: 44px; justify-content: center; padding: 8px 10px; font-size: 15px; }
  .pk-meta { font-size: 12.5px; }
  .fld-lbl, .m-lbl, .m-sec-hd { font-size: 12.5px; }
  .fld-hint { font-size: 12px; }
  .m-title, #sp-name { font-size: 17px; padding: 9px 11px; }
  .fld textarea, #m-desc { padding: 9px 11px; }
  .rf { padding: 9px 11px; font-size: 16px; }
  .rf-sp-name, .rf-m-title { font-size: 17px; }
  .rf-edit { min-height: 44px; min-width: 44px; margin: -11px -8px -11px 0; padding: 0 8px; font-size: 13px; }
  .m-grid { gap: 12px 14px; }
  .m-grid select { min-height: 44px; }
  .due-fld { gap: 8px 10px; }
  .due-part { flex: 1 1 140px; }
  .due-part:nth-child(2) { flex: 1 1 110px; }
  .due-part input[type="date"], .due-part input[type="time"] { width: 100%; min-height: 44px; }
  .due-sub { font-size: 12px; }
  .link-btn { min-height: 44px; margin: 0; padding: 0 6px; font-size: 14px; }
  .sw { width: 34px; height: 30px; }
  .swatches { gap: 8px; }
  .m-st-add input { min-height: 40px; }
  .m-st-add button { min-height: 40px; padding: 0 14px; }
  /* confirm / select dialogs become small bottom sheets too */
  .dlg:not(.sp) {
    width: 100%; margin: 0; border-radius: 14px 14px 0 0; gap: 12px;
    padding: 18px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .dlg:not(.sp) .dlg-title { font-size: 15px; }
  .dlg:not(.sp) .dlg-msg { font-size: 14px; line-height: 1.5; }
  .dlg:not(.sp) select { min-height: 44px; }
  .dlg-actions button { min-height: 44px; padding: 0 20px; font-size: 15px; border-radius: 8px; }
}

.toast {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 70;
  background: var(--text); color: var(--white); padding: 6px 12px; border-radius: 4px;
  max-width: 90vw; box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.toast.err { background: var(--danger); }
.toast { display: flex; align-items: center; gap: 10px; }
.toast-act { flex: none; white-space: nowrap; border: 0; background: none; color: var(--warn-line); font-weight: 600; padding: 0 2px; }
.toast-act:hover:not(:disabled) { background: none; color: var(--warn-line); text-decoration: underline; }

/* ---------- Archive panel ---------- */
.arch-panel {
  width: min(560px, 100%); max-height: 84vh; display: flex; flex-direction: column; gap: 6px;
  background: var(--white); border-radius: 6px; padding: 8px 10px 10px;
  border-top: 4px solid var(--warn-line); box-shadow: 0 6px 24px rgba(56, 60, 60, .18);
}
.arch-top { display: flex; align-items: center; gap: 8px; }
.arch-title { font-weight: 700; font-size: 14px; }
.arch-title .muted { font-weight: 400; font-size: 11.5px; margin-left: 4px; }
.arch-search { width: 100%; height: 24px; }
.arch-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.arch-item {
  display: flex; flex-direction: column; gap: 3px; padding: 5px 6px;
  background: var(--white); border: 1px solid var(--card-edge); border-radius: 6px;
  box-shadow: var(--cal-glow) var(--c-bd, var(--card-white-bd)), var(--card-lift);
}
.arch-row { display: flex; align-items: center; gap: 8px; }
.arch-main { flex: 1; min-width: 0; }
.arch-tag {
  margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 400; line-height: 14px;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-line); vertical-align: 1px;
}
.arch-sts { list-style: none; margin: 0; padding: 2px 0 0 4px; border-top: 1px dashed rgba(56, 60, 60, .1); }
.arch-st { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12.5px; color: var(--text-2); }
.arch-st-ck { flex: none; width: 12px; text-align: center; color: var(--ok); font-size: 11px; }
.arch-st:not(.done) .arch-st-ck { color: var(--faint); }
.arch-st-nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.arch-st.done .arch-st-nm { color: var(--muted); }
.arch-st-at { flex: none; font-size: 10.5px; white-space: nowrap; }
.arch-st-restore { flex: none; }
.arch-name { font-weight: 600; font-size: 13px; color: var(--text-strong); overflow-wrap: anywhere; }
.arch-meta { font-size: 11px; margin-top: 2px; }
.arch-col { color: var(--text-2); }
.arch-acts { flex: none; display: flex; gap: 4px; }
.arch-acts button { padding: 2px 9px; }
.arch-restore:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent); }
.arch-empty, .arch-loading { padding: 16px 4px; text-align: center; }

/* ---------- touch / no hover ---------- */
@media (hover: none) {
  .add-st-hd, .add-st { opacity: 1; color: var(--muted); }
}

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  :root { --col-w: 85vw; }
  .board { scroll-snap-type: x mandatory; padding: 4px 6px; gap: 6px; }
  .col { scroll-snap-align: start; }
  .col-strip, .add-col-wrap { scroll-snap-align: none; }
  .add-col-wrap { scroll-snap-align: start; }
  .add-col-wrap { flex-basis: 60vw; width: 60vw; }

  .topbar { gap: 6px; padding: 0 6px; }
  .brand { display: none; }
  .topbar .search { flex: 1; width: auto; min-width: 64px; }
  .toggle .long { display: none; }
  .toggle .short { display: inline; }

  .card-hd .title { font-size: 15px; }
  .meta { line-height: 18.75px; }
  .st { align-items: center; padding: 0; font-size: 14px; }
  .st label { min-height: 26px; align-items: center; gap: 6px; }
  .st:has(.st-desc) label, .st:has(.st-desc) { align-items: flex-start; }
  .st-desc { font-size: 12.5px; }
  .desc { font-size: 12.5px; }
  .card-due .due, .st .due { font-size: 12px; line-height: 13px; } /* 17px pill (13 + 2px padding + 2px frame) on a 17.5px line */
  .mi-dot { font-size: 16px; line-height: 26px; }
  .memo-items .mi { min-height: 26px; align-items: center; }
  .memo-items .mi:has(.st-desc) { align-items: flex-start; }
  .type-opt { font-size: 12px; padding: 4px 12px; }
  .ms-desc { margin-left: 26px; max-width: calc(100% - 26px); font-size: 16px; }
  .st input[type="checkbox"] { width: 18px; height: 18px; margin: 0 2px 0 0; }
  /* top-align so the due chip sits on the FIRST line even when the name wraps */
  .st, .st label, .st:has(.st-desc) label, .st:has(.st-desc) { align-items: flex-start; }
  .st label { padding: 4px 0; min-height: 26px; }
  .st input[type="checkbox"] { margin-top: 0; }
  .st .due { margin-top: 4.25px; }
  .st-new { font-size: 14px; }
  .add-st, .add-st-hd { min-width: 28px; min-height: 26px; font-size: 15px; }
  /* bigger hit area without changing the title's line height */
  .arch-btn { font-size: 11px; line-height: 16px; padding: 4px 6px; margin: -4px 0 -4px 4px; border-color: var(--line); }
  .arch-btn + .arch-btn { margin-left: 3px; }
  .memo-toggle { font-size: 11px; line-height: 16px; padding: 4px 7px; margin: -4px 0; }
  .md-table { font-size: 12.5px; }
  .md-table th, .md-table td { padding: 3px 7px; }
  .cf-list li { padding: 3px 0; }
  .topbar .tb-btn { padding: 0 6px; }
  .arch-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .arch-item { padding: 7px 8px; }
  .arch-row { flex-wrap: wrap; }
  .arch-st { flex-wrap: wrap; font-size: 13.5px; padding: 3px 0; }
  .arch-st-at { order: 3; flex-basis: 100%; padding-left: 18px; }
  .arch-st-restore { min-height: 30px; padding: 3px 12px; }
  .arch-acts { margin-left: auto; }
  .arch-acts button { min-height: 32px; padding: 4px 14px; }
  .arch-search { height: 32px; font-size: 14px; }

  .backdrop { padding: 0; }
  .ms { flex-wrap: wrap; padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
  .ms input[type="checkbox"] { width: 20px; height: 20px; }
  /* row 1: checkbox · name · ↑↓✕   row 2: date · time   row 3: note */
  .ms { gap: 6px 4px; padding: 8px 0; align-items: flex-start; }
  .ms input[type="checkbox"], .ms-dot { margin-top: 12px; }
  .ms-name { order: 1; flex: 1 1 calc(100% - 150px); min-width: 0; min-height: 44px; font-size: 16px; padding: 10px 8px; }
  .ms button { order: 2; min-width: 32px; min-height: 44px; font-size: 15px; }
  .ms-date { order: 3; margin-left: 26px; flex: 1 1 150px; min-width: 0; min-height: 44px; }
  .ms-time { order: 4; flex: 1 1 130px; min-width: 0; min-height: 44px; }
  .ms-desc { order: 5; }
  .rf-ms-name { order: 1; flex: 1 1 calc(100% - 150px); min-width: 0; min-height: 44px; padding: 10px 8px; }
  .rf-ms-desc { order: 5; margin-left: 26px; max-width: calc(100% - 26px); font-size: 16px; }
  .ms-name, .ms-date, .ms-time { background: var(--white); border: 1px solid var(--input-line); border-radius: 6px; }
  /* card editor: labels above fields, like the subtask sheet */
  .m-grid { grid-template-columns: 1fr; gap: 4px; }
  .m-grid > .m-lbl { margin-top: 10px; }
  .m-grid > .m-lbl:first-child { margin-top: 0; }
}

/* ---------- column indicator (phone only) ---------- */
.col-dots { display: none; }

/* ---------- phone: one column per screen, swipe between columns ---------- */
@media (max-width: 640px) {
  :root { --col-w: calc(100vw - 12px); }
  .board {
    padding: 0 6px 4px; gap: 12px; scroll-padding: 0 6px;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .col, .col-strip, .add-col-wrap {
    flex: 0 0 var(--col-w); width: var(--col-w);
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .col-hd { position: sticky; top: 0; z-index: 2; background: var(--nh-col, var(--col-bg)); border-radius: 6px 6px 0 0; min-height: 30px; }
  .col-list { overscroll-behavior-y: contain; }
  /* collapsed column becomes a full-width "tap to expand" panel */
  .col-strip { flex-direction: row; justify-content: center; align-items: center; padding: 12px; }
  .col-strip .strip-name { writing-mode: horizontal-tb; font-size: 14px; }
  .col-strip::after { content: "（已摺疊，點一下展開）"; color: var(--muted); font-size: 11px; }
  .add-col-wrap { display: flex; align-items: flex-start; justify-content: center; padding-top: 20px; }

  .col-dots {
    flex: none; display: flex; gap: 4px; align-items: center;
    overflow-x: auto; scrollbar-width: none; padding: 3px 6px;
    background: var(--white); border-bottom: 1px solid var(--line);
  }
  .col-dots::-webkit-scrollbar { display: none; }
  .dot {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--line); background: var(--th); color: var(--text-2);
    border-radius: 999px; padding: 2px 8px; font-size: 11px; line-height: 16px; min-height: 22px;
    white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
  }
  .dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
  .dot.on { background: var(--accent); border-color: var(--accent); color: var(--white); font-weight: 600; }
  .dot.on, .dot.on:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--white); }
  .dot:focus { outline: none; }
  .dot:focus-visible { outline: 2px solid var(--accent-line); }
  .dot.on::before { background: var(--white); }
}

/* ---------- view tabs (看板 / 行事曆) ---------- */
.view-tabs { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.vtab {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  color: var(--text-2); text-decoration: none; background: var(--btn); white-space: nowrap;
}
.vtab + .vtab { border-left: 1px solid var(--line); }
.vtab:hover { background: var(--btn-hover); }
.vtab[aria-current] { background: var(--accent); color: var(--white); font-weight: 600; }
.vtab:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
body.view-cal .topbar > .toggle, body.view-cal .col-dots { display: none !important; }

/* ---------- calendar (read-only; entries open the card / subtask editor) ---------- */
.cal { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.cal-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cal-range { font-weight: 700; font-size: 13px; color: var(--text-strong); }
.cal-legend { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }
.cal-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--chip); margin-left: 6px; }
.cal-legend .lg.urgent { background: var(--due-urgent-bg); }
.cal-legend .lg.near { background: var(--due-near-bg); border: 1px solid var(--due-near-line); }
.cal-hd { font-weight: 700; color: var(--text-strong); margin-bottom: 4px; display: flex; align-items: baseline; gap: 6px; }
.cal-overdue { background: var(--white); border: 1px solid var(--danger-line); border-left: 3px solid var(--due-urgent-bg); border-radius: 4px; padding: 6px 8px; margin-bottom: 8px; }
.cal-overdue .cal-hd { color: var(--due-urgent-ink); }
.cal-overdue .cal-evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; color: var(--muted); font-size: 11px; padding: 2px 0; }
.cal-dow.we { color: var(--muted); }
.cal-cell {
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  min-height: 110px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.cal-cell.we { background: var(--panel); }
.cal-cell.out { background: transparent; border-style: dashed; border-color: var(--line); }
.cal-cell.today { border: 2px solid var(--accent); padding: 3px; box-shadow: 0 0 0 2px var(--accent-soft); }
.cal-date { font-size: 11px; color: var(--muted); }
.cal-cell.today .cal-date { color: var(--link); font-weight: 700; }

.cal-ev {
  display: flex; align-items: flex-start; gap: 4px; width: 100%; min-width: 0;
  border-radius: 3px; padding: 2px 4px 2px 3px; line-height: 1.3;
  background: var(--white); border: 1px solid var(--card-edge); color: var(--text);
  box-shadow: var(--cal-glow) var(--c-bd, var(--card-white-bd)), 0 1px 2px rgba(15, 15, 15, .06);
}
.cal-ev:hover { filter: brightness(.97); }
.cal-ck { margin: 2px 0 0; flex: none; width: 13px; height: 13px; cursor: pointer; accent-color: var(--accent); }
.cal-ck:disabled { cursor: default; }
.cal-ev-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; min-width: 0;
  text-align: left; border: 0; background: transparent; padding: 0; line-height: inherit; color: inherit; border-radius: 2px;
}
.cal-ev-body:hover:not(:disabled) { background: transparent; }
.cal-ev-time { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; }
.cal-ev-title { font-size: 12px; overflow-wrap: anywhere; }
.cal-ev.card .cal-ev-title { font-weight: 600; }
.cal-ev-meta { font-size: 10.5px; color: var(--muted-card); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* urgency: a dot (the background is the card's color) */
.cal-urg { display: none; width: 7px; height: 7px; border-radius: 50%; flex: none; margin-right: 3px; vertical-align: 1px; }
.urgent .cal-urg { display: inline-block; background: var(--due-urgent-bg); }
.near .cal-urg { display: inline-block; background: var(--due-near-bg); box-shadow: 0 0 0 1px var(--due-near-line); }
/* board items in the calendar: the time / date is a due badge like on the cards (red frame, black text, tier fill) */
.cal-ev:not(.gcal) .cal-ev-time, .wk-chip.kb .wk-t, .wk-ev.kb .wk-t {
  padding: 0 4px; border: 1px solid var(--due-line); border-radius: 999px; line-height: 12px;
  background: var(--due-later-fill); color: var(--due-text); font-weight: 400;
}
.wk-chip.kb .wk-t, .wk-ev.kb .wk-t { padding: 0 3px; line-height: 11px; }
.cal-ev.urgent:not(.gcal) .cal-ev-time, .wk-chip.kb.urgent .wk-t, .wk-ev.kb.urgent .wk-t { background: var(--due-urgent-fill); color: var(--due-text); }
.cal-ev.near:not(.gcal) .cal-ev-time, .wk-chip.kb.near .wk-t, .wk-ev.kb.near .wk-t { background: var(--due-near-fill); }
.cal-ev.done:not(.gcal) .cal-ev-time, .wk-chip.kb.done .wk-t, .wk-ev.kb.done .wk-t { background: transparent; border-color: transparent; color: var(--muted); }
/* the badge carries the tier, so no extra dot next to it (time-less entries keep the dot) */
.cal-ev-time .cal-urg, .wk-chip .cal-urg:has(+ .wk-t) { display: none !important; }
.done .cal-urg { display: none; }
.cal-ev.done { opacity: .62; }
.cal-ev.done .cal-ev-title { text-decoration: line-through; }
.cal-ev-body:focus-visible, .wk-ev:focus-visible, .wk-chip:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.cal-legend .lg { border-radius: 50%; width: 8px; height: 8px; }

/* view switch: 本週時間表 | 接下來兩週 */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; flex: none; }
.seg-b { border: 0; border-radius: 0; padding: 3px 10px; font-size: 12px; }
.seg-b + .seg-b { border-left: 1px solid var(--line); }
.seg-b[aria-pressed="true"] { background: var(--accent); color: var(--white); font-weight: 600; }
.seg-b[aria-pressed="true"]:hover { background: var(--accent); }
.wk-nav { display: inline-flex; gap: 2px; }
.gc-st { font-size: 11px; display: inline-flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.gc-err { color: var(--danger); }
.gc-off { color: var(--muted); border: 1px dashed var(--line); border-radius: 3px; padding: 0 5px; }
.gc-chip { border-radius: 999px; padding: 0 6px; background: var(--gc-bg); color: var(--gc-ink); border: 1px solid var(--gc-bd); }

/* ---------- 本週時間表 (Google Calendar-like, 09:00–16:00) ---------- */
.gc0 { --gc-bd: #6f8fa6; --gc-bg: #e5edf3; --gc-ink: #2d4555; }
.gc1 { --gc-bd: #7d9a6a; --gc-bg: #e9f0e3; --gc-ink: #344628; }
.gc2 { --gc-bd: #a2826a; --gc-bg: #f2ebe4; --gc-ink: #4d3626; }
.gc3 { --gc-bd: #8c7aa6; --gc-bg: #eee9f4; --gc-ink: #3d3050; }
.gc4 { --gc-bd: #6a9a98; --gc-bg: #e3efee; --gc-ink: #284645; }
.cal.cal-week { --wk-row: 17px; }
.wk-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.wk {
  display: grid; grid-template-columns: 42px repeat(var(--days), minmax(118px, 1fr));
  grid-template-rows: auto auto auto auto; min-width: min-content;
}
.wk-corner, .wk-lbl, .wk-times { position: sticky; left: 0; z-index: 3; background: var(--white); border-right: 1px solid var(--line); }
.wk-corner { border-bottom: 1px solid var(--line); }
.wk-dh { display: flex; align-items: baseline; gap: 5px; padding: 3px 6px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line-soft); font-size: 12px; }
.wk-dh .wk-dow { font-weight: 700; color: var(--text-strong); }
.wk-dh .wk-dn { color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-dh.today .wk-dow, .wk-dh.today .wk-dn { color: var(--link); font-weight: 700; }
.wk-dh.past { opacity: .7; }
.wk-lbl { font-size: 10px; color: var(--muted); padding: 3px 4px; border-bottom: 2px solid var(--line); text-align: right; }
.wk-ad { border-left: 1px solid var(--line-soft); border-bottom: 2px solid var(--line); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-height: 22px; min-width: 0; }
.wk-ad.today, .wk-col.today { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.wk-chip {
  display: flex; align-items: center; gap: 3px; min-width: 0; border-radius: 3px; padding: 1px 4px 1px 3px;
  font-size: 11px; line-height: 1.3; background: var(--white); border: 1px solid var(--card-edge);
  box-shadow: var(--cal-glow) var(--c-bd, var(--card-white-bd)), 0 1px 2px rgba(15, 15, 15, .06);
}
.wk-chip .cal-ev-body { flex-direction: row; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; }
.wk-chip.gcal { background: var(--gc-bg); border-color: var(--gc-bd); color: var(--gc-ink); box-shadow: none; cursor: default; }
.wk-ti { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wk-t { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 10px; flex: none; }
.wk-chip.done, .wk-ev.done { opacity: .6; }
.wk-chip.done .wk-ti, .wk-ev.done .wk-ti { text-decoration: line-through; }
.wk-times { position: sticky; height: calc(var(--wk-row) * var(--rows)); }
.wk-hr { position: absolute; right: 4px; top: calc(var(--wk-row) * var(--top)); transform: translateY(-50%); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--white); padding: 0 1px; }
.wk-hr:first-child { transform: none; }
.wk-hr:last-child { transform: translateY(-100%); }
.wk-col {
  position: relative; height: calc(var(--wk-row) * var(--rows)); border-left: 1px solid var(--line-soft); min-width: 0;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--wk-row) * 2 - 1px), var(--line) calc(var(--wk-row) * 2 - 1px), var(--line) calc(var(--wk-row) * 2)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--wk-row) - 1px), var(--line-soft) calc(var(--wk-row) - 1px), var(--line-soft) var(--wk-row));
}
.wk-col.past { background-color: color-mix(in srgb, var(--panel) 50%, transparent); }
.wk-ev {
  position: absolute; z-index: 1; overflow: hidden;
  top: calc(var(--wk-row) * var(--top) + 1px); height: calc(var(--wk-row) * var(--h) - 2px);
  left: calc((100% - 6px) * var(--lane) / var(--lanes) + 1px); width: calc((100% - 6px) / var(--lanes) - 1px);
  display: flex; align-items: flex-start; gap: 3px; padding: 0 3px; border-radius: 3px;
  font-size: 10.5px; line-height: calc(var(--wk-row) - 2px);
  background: var(--white); border: 1px solid var(--card-edge); box-shadow: var(--cal-glow) var(--c-bd, var(--card-white-bd)), 0 1px 2px rgba(15, 15, 15, .06);
}
.wk-ev.gcal { background: var(--gc-bg); border-color: var(--gc-bd); color: var(--gc-ink); box-shadow: none; cursor: default; z-index: 0; }
.wk-ev.gcal { flex-direction: row; flex-wrap: wrap; column-gap: 4px; align-content: flex-start; }
.wk-ev.gcal.tall { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.wk-ev.gcal .wk-ti { font-weight: 600; }
.wk-ev.gcal.tall .wk-ti { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-ev.gcal .wk-t { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wk-ev.gcal.tall .wk-ti { flex-shrink: 0; }
.wk-ev.gcal.tall .wk-t { flex-shrink: 1; min-height: 0; }
.wk-loc { font-size: 10px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wk-ev.kb .cal-ev-body { flex-direction: row; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; height: calc(var(--wk-row) - 2px); }
.wk-ev .cal-ck { margin: calc((var(--wk-row) - 2px - 12px) / 2) 0 0; width: 12px; height: 12px; }
.wk-ev.clip-top { border-top: 2px dotted var(--c-bd, var(--gc-bd)); border-top-left-radius: 0; border-top-right-radius: 0; }
.wk-ev.clip-bot { border-bottom: 2px dotted var(--c-bd, var(--gc-bd)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* 接送時間: bold black line whose bottom edge is the time (so 16:00 sits flush on the grid's bottom edge), label above, right */
.wk-pickup { position: absolute; left: 0; right: 0; top: calc(var(--wk-row) * var(--top) - 3px); height: 3px; background: #1C1C1C; z-index: 3; pointer-events: none; }
.wk-pickup-lbl { position: absolute; right: 3px; top: 100%; margin-top: 1px; font-size: 10px; line-height: 12px; font-weight: 400; color: #1C1C1C;
  white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none;
  /* plain text under the line, no box: a soft white halo keeps it readable over event blocks */
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
/* thin strip under the 16:00 edge so a 16:00 pickup label (under its line) is not clipped */
.wk-tail { height: var(--wk-tail, 14px); border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
.wk-tail-lbl { position: sticky; left: 0; z-index: 3; background: var(--white); border-left: 0; border-right: 1px solid var(--line); }
.wk-now { position: absolute; left: 0; right: 0; top: calc(var(--wk-row) * var(--top)); height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.wk-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.wk-drag { cursor: grab; }
.wk-drag .cal-ev-body { cursor: inherit; }
body.wk-dragging, body.wk-dragging * { cursor: grabbing !important; user-select: none; }
.wk-drag.dragging { opacity: .35; }
.wk-ghost {
  position: absolute; left: 1px; right: 1px; z-index: 4; pointer-events: none;
  top: calc(var(--wk-row) * var(--top)); height: calc(var(--wk-row) * var(--h));
  border: 2px dashed var(--accent); border-radius: 3px; background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 10.5px; padding: 0 3px; color: var(--text-strong);
}
.wk-ghost.allday { position: static; height: auto; }
.wk-foot { font-size: 11px; margin-top: 6px; }
.wk-week { min-width: min-content; }
.wk-week-hd { position: sticky; left: 0; width: max-content; display: flex; align-items: baseline; gap: 6px; padding: 5px 8px 4px; font-size: 12px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.wk-week-lbl { font-weight: 700; color: var(--link); }
.wk-week-n { font-weight: 400; font-size: 11px; }

/* lower section of 本週時間表: next two weeks as per-day lists on a pale tint (not white) */
.cal { --later-bg: #edf1f2; --later-bg: color-mix(in srgb, var(--accent-soft) 80%, var(--bg)); --later-line: #d3dde0; --later-line: color-mix(in srgb, var(--accent-line) 45%, var(--line)); }
.wk-later { margin-top: 10px; background: var(--later-bg); border: 1px solid var(--later-line); border-radius: 4px; padding: 6px 8px 8px; }
.wk-later-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 2px; }
.wk-later-ttl { font-weight: 700; color: var(--text-strong); }
.wk-later-wk + .wk-later-wk { margin-top: 6px; }
.wk-later .wk-week-hd { position: static; padding: 4px 0 3px; }
.wk-ag { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wk-ag-day { min-width: 0; min-height: 58px; padding: 3px; display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--later-line); border-radius: 4px; background: rgba(255, 255, 255, .35); }
.wk-ag-day.empty { background: transparent; border-style: dashed; }
.wk-ag-day.today { border-color: var(--accent); }
.wk-ag-dh { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-ag-dh b { color: var(--text-strong); font-weight: 700; }
.wk-ag-day.we .wk-ag-dh b { color: var(--muted); }
.wk-ag-day.drop-on { outline: 2px solid var(--accent); outline-offset: -1px; }
.wk-ag .cal-ev { font-size: 11px; }
.wk-ag .cal-ev-meta { font-size: 10px; }
.wk-ag-none { font-size: 11px; padding: 2px 0 0; }
.cal-ev.gcal { background: var(--gc-bg); border-color: var(--gc-bd); color: var(--gc-ink); box-shadow: none; cursor: default; padding-left: 5px; }
.cal-ev.gcal .cal-ev-title { font-weight: 600; }
.cal-ev.gcal .cal-ev-meta { color: var(--gc-ink); opacity: .8; }
.cal-ev.gcal:hover { filter: none; }
.cal-none { padding: 16px 0; text-align: center; }

.cal-agenda { display: none; }
.cal-day { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; margin-bottom: 6px; }
.cal-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-today-tag { background: var(--accent); color: var(--white); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 600; }
.cal-rel { font-weight: 400; font-size: 11px; }
.cal-day .cal-evs { display: flex; flex-direction: column; gap: 4px; }
.cal-empty { font-size: 12px; }

@media (max-width: 700px) {
  .cal { padding: 6px; }
  .cal-grid { display: none; }
  .cal-agenda { display: block; }
  .cal-legend { display: none; }
  .cal-overdue .cal-evs { grid-template-columns: 1fr; }
  .cal-ev { padding: 6px 8px 6px 5px; min-height: 40px; }
  .cal-ck { width: 18px; height: 18px; margin-top: 1px; }
  .wk { grid-template-columns: 34px repeat(var(--days), minmax(92px, 1fr)); }
  .cal.cal-week { --wk-row: 18px; }
  .wk-hr { font-size: 9px; }
  .wk-foot { display: none; }
  .wk-ag { grid-template-columns: 1fr; }
  .wk-ag-day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .wk-ag-day .wk-ag-dh { flex: 0 0 52px; padding-top: 2px; }
  .wk-ag-day > .cal-ev { flex: 1 1 calc(100% - 60px); }
  .wk-ag-day > .cal-ev ~ .cal-ev { margin-left: 55px; }
  .wk-ag-day.empty { display: none; }
  .cal-ev-title { font-size: 14px; }
  .cal-ev-time, .cal-ev-meta { font-size: 12px; }
  .cal-hd { font-size: 13px; }
}
/* tasks host (tasks.ntujour.org): only 工作看板 + 行事曆 tabs; a thin accent line tells the two sites apart */
.vtab[hidden] { display: none !important; }
body.host-tasks .topbar { box-shadow: inset 0 2px 0 var(--accent); }
body.host-tasks #tab-tasks { border-left: 0; } /* first visible tab: its hidden neighbour would leave a divider */
body.host-tasks .login-box { border-top: 3px solid var(--accent); }
/* ---------- six view tabs: 新聞所看板 / 工作看板 / 個人看板 / 行事曆 / 服務總覽 / 配色 ----------
   desktop: text tabs in the top bar; mid widths: short labels; phones (≤700px): fixed bottom tab bar
   with icon + short label, so the top bar keeps search / Archive / 登出. */
.vt-icon { display: none; width: 15px; height: 15px; vertical-align: -3px; flex: none; }
.vt-short { display: none; }
@media (max-width: 1100px) and (min-width: 701px) {
  .topbar .vtab { padding: 0 6px; }
  .topbar .vtab .vt-text { display: none; }
  .topbar .vtab .vt-short { display: inline; }
}
@media (max-width: 700px) {
  :root { --tabbar-h: 52px; }
  .app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .topbar > .view-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: var(--white); padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .04);
  }
  .topbar .vtab, .topbar .vtab + .vtab {
    flex: 1 1 0; min-width: 0; height: var(--tabbar-h); padding: 4px 2px 3px;
    flex-direction: column; justify-content: center; gap: 2px;
    border: 0; background: var(--white); color: var(--muted); font-size: 11px; line-height: 1.2;
  }
  .topbar .vtab:hover { background: var(--white); }
  .topbar .vtab[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 700; box-shadow: inset 0 2px 0 var(--accent); }
  .topbar .vtab .vt-icon { display: block; width: 20px; height: 20px; }
  .topbar .vtab .vt-text { display: none; }
  .topbar .vtab .vt-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px); }
  /* phone header: the empty spacer/status leave the flex flow so they cost no gap */
  .topbar > .spacer { position: absolute; }
  .topbar > .status:empty { position: absolute; }
  .topbar > #reload { margin-left: auto; }
  .topbar { gap: 4px; }
  .topbar .tb-btn { padding: 0 5px; white-space: nowrap; }
}
/* very narrow phones: tighten the header so the search box keeps its placeholder */
@media (max-width: 380px) {
  .topbar { gap: 4px; }
  .topbar .tb-btn { padding: 0 4px; }
  .topbar .search { min-width: 60px; }
  .topbar .vtab, .topbar .vtab + .vtab { font-size: 10.5px; }
}
body.view-services .topbar > .toggle, body.view-services .topbar > .search, body.view-services .col-dots { display: none !important; }
.board-empty { align-self: flex-start; padding: 12px; font-size: 12px; background: transparent; }

/* ---------- 配色 view (#theme, public/theme.js) ---------- */
body.view-theme .topbar > .toggle, body.view-theme .topbar > .search, body.view-theme .col-dots { display: none !important; }
.theme-view { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.th-loading { padding: 16px; }
.th-bar {
  flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px; background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.th-bar .spacer { flex: 1; }
.th-prof { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.th-prof select { max-width: 160px; }
.th-count { font-size: 11px; }
.th-dirty { color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 999px; padding: 0 6px; font-size: 11px; }
.th-wrap { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 440px); gap: 8px; padding: 8px; align-items: start; }
.th-pv-wrap { position: sticky; top: 44px; min-width: 0; }
.th-pv-toggle { display: none; }
.th-preview { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.th-pv-board { background: var(--bg); color: var(--text); padding: 6px; }
.th-pv-ui { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.th-pv-ui .vtab { cursor: default; }
.th-pv-txt { font-size: 12px; }
.th-pv-overdue { font-weight: 700; color: var(--due-urgent-ink); font-size: 12px; }
.th-pv-cols { display: flex; gap: 6px; align-items: flex-start; overflow-x: auto; }
.th-pv-cols .col.th-pv-col { flex: 1 1 0; width: auto; min-width: 250px; max-width: var(--col-w); }
.th-pv-col .col-hd { position: static; }
.th-pv-col .col-list { overflow: visible; max-height: none; }
.th-preview a, .th-preview button, .th-preview input, .th-preview label { cursor: default; }
.th-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.th-group { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.th-group h3 { margin: 0 0 4px; font-size: 13px; color: var(--text-strong); }
.th-group h3 small { color: var(--muted); font-weight: 400; }
.th-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px 74px 22px; align-items: center; gap: 6px; padding: 2px 0; }
.th-row + .th-row { border-top: 1px solid var(--line-soft); }
.th-lbl { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.th-lbl small { color: var(--faint); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; }
.th-row.changed .th-lbl { font-weight: 600; }
.th-color { width: 36px; height: 24px; padding: 0 2px; border: 1px solid var(--input-line); border-radius: 4px; background: var(--white); cursor: pointer; }
.th-range { width: 36px; margin: 0; }
.th-row:has(.th-range) { grid-template-columns: minmax(0, 1fr) 110px 74px 22px; }
.th-row:has(.th-range) .th-range { width: 110px; }
.th-hex { width: 74px; padding: 2px 4px; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.th-hex.bad { border-color: var(--danger); outline-color: var(--danger-bg); }
.th-reset { border: 0; background: none; color: var(--muted); padding: 0; width: 22px; height: 22px; font-size: 14px; }
.th-reset:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.th-reset[hidden] { display: inline-block !important; visibility: hidden; }
@media (max-width: 900px) {
  .th-wrap { grid-template-columns: 1fr; padding: 0 6px 8px; gap: 6px; }
  .th-pv-wrap {
    top: var(--th-bar-h, 0px); z-index: 4; background: var(--white);
    margin: 0 -6px; padding: 4px 6px; border-bottom: 1px solid var(--line); box-shadow: 0 2px 4px var(--shadow);
  }
  .th-pv-toggle { display: block; width: 100%; margin-bottom: 4px; padding: 2px 6px; font-size: 12px; }
  .th-preview { max-height: 42vh; overflow: auto; overscroll-behavior: contain; }
  .th-pv-wrap.closed .th-preview { display: none; }
  .th-pv-cols .col.th-pv-col { min-width: min(300px, calc(100vw - 40px)); }
  .th-bar { position: static; }
  .th-row { grid-template-columns: minmax(0, 1fr) 44px 84px 28px; min-height: 40px; }
  .th-color { width: 44px; height: 32px; }
  .th-hex { width: 84px; }
  .th-reset { width: 28px; height: 28px; }
}

/* ---------- iOS: inputs under 16px make Safari zoom on focus ---------- */
@media (max-width: 700px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}

/* ---------- 服務總覽 view (#services, public/services.js): port of services.ntujour.org's app.css,
   scoped to .svc-view / .svc-dlg and drawn with the kanban's (theme-able) variables ---------- */
.svc-view { flex: 1; min-height: 0; overflow: auto; font-size: 13px; line-height: 1.45; }
.svc-view .svc-wrap { padding: 6px 12px 24px; max-width: 1600px; }
.svc-view .svc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 2px; }
.svc-view .svc-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.svc-view h1 { font-size: 16px; margin: 0; color: var(--text-strong); }
.svc-view .svc-sub { font-size: 12px; }
.svc-view .svc-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 12px; }
.svc-view .svc-reload { font: inherit; font-size: 12px; padding: 1px 8px; }
.svc-view a, .svc-dlg a { color: var(--href); text-decoration: none; }
.svc-view a:hover, .svc-dlg a:hover { text-decoration: underline; }
.svc-view .muted, .svc-dlg .muted { color: var(--muted); }
.svc-view h2 { font-size: 16px; margin: 0; }
.svc-view h3, .svc-dlg h3 { font-size: 13px; margin: 14px 0 6px; color: var(--accent); }
.svc-view .sec { margin: 8px 0 20px; }
.svc-view .sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 6px 0 0; border-top: 2px solid var(--accent); }
.svc-view .sec-head h2 { font-size: 15px; color: var(--text-strong); }
.svc-view .sec-head .muted { font-size: 12px; }
.svc-view #sec-rt .sec-head { border-top-color: var(--line); }
.svc-view #sec-rt .sec-head h2 { font-size: 14px; }
.svc-view .summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.svc-view .card, .svc-dlg .card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; min-width: 84px; box-shadow: none; }
.svc-view .card b { display: block; font-size: 19px; line-height: 1.2; }
.svc-view .card b.sm { font-size: 14px; }
.svc-view .card.ok b { color: var(--ok); }
.svc-view .card.warn b { color: var(--warn-text); }
.svc-view .card.fail b { color: var(--danger); }
.svc-view .card.wide { flex: 1 1 260px; }
.svc-view .card.alert { border-color: var(--danger-line); background: var(--danger-bg); }
.svc-view .card.alert ul { margin: 2px 0 0; padding-left: 18px; }
.svc-view .card.notion { border-color: var(--warn-line); background: var(--warn-bg); }
.svc-view .card.notion b { color: var(--warn-text); }
.svc-view .filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 8px; }
.svc-view .filters input, .svc-view .filters select { font: inherit; padding: 4px 8px; border: 1px solid var(--input-line); border-radius: 4px; background: var(--white); color: var(--text); }
.svc-view .filters input { flex: 1; max-width: 360px; }
.svc-view .tablewrap { background: var(--white); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.svc-view table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.svc-view col.c-name { width: 13%; } .svc-view col.c-url { width: 10%; } .svc-view col.c-where { width: 10%; }
.svc-view col.c-status { width: 8%; } .svc-view col.c-ppl { width: 6%; } .svc-view col.c-sched { width: 11%; }
.svc-view col.c-desc { width: 17%; } .svc-view col.c-note { width: 19%; }
.svc-view col.r-name { width: 15%; } .svc-view col.r-owner { width: 7%; } .svc-view col.r-sched { width: 12%; }
.svc-view col.r-state { width: 10%; } .svc-view col.r-last { width: 8%; } .svc-view col.r-res { width: 10%; }
.svc-view col.r-svc { width: 12%; } .svc-view col.r-note { width: 26%; }
.svc-view th, .svc-dlg th { background: var(--th); text-align: left; font-weight: 600; padding: 5px 6px; border-bottom: 1px solid var(--line); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-view td, .svc-dlg td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.svc-view tbody tr { cursor: pointer; }
.svc-view tbody tr:hover { background: var(--row-hover); }
.svc-view tbody tr:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.svc-view tbody tr.empty { cursor: default; }
.svc-view tbody tr.extra td:first-child { border-left: 3px solid var(--accent); }
.svc-view tbody tr.notion-row td:first-child { border-left: 3px solid var(--warn-line); }
.svc-view .clamp, .svc-dlg .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.svc-view td.desc .clamp { color: var(--desc); }
.svc-view td.name .clamp { font-weight: 600; }
.svc-view .chip, .svc-dlg .chip { display: inline-block; padding: 1px 4px; border-radius: 3px; background: var(--chip); font-size: 11.5px; font-weight: 400; white-space: nowrap; line-height: 1.3; }
.svc-view .chip.ok, .svc-dlg .chip.ok { background: var(--ok-bg); color: var(--ok); }
.svc-view .chip.warn, .svc-dlg .chip.warn { background: var(--warn-bg); color: var(--warn-text); }
.svc-view .chip.fail, .svc-dlg .chip.fail { background: var(--danger-bg); color: var(--danger); }
.svc-view .chip.dev, .svc-dlg .chip.dev { background: var(--accent-soft); color: var(--accent); }
.svc-view .chip.unk, .svc-dlg .chip.unk { color: var(--muted); }
.svc-view .chip.off, .svc-dlg .chip.off { color: var(--muted); text-decoration: line-through; }
.svc-view .chip.notion, .svc-dlg .chip.notion { background: var(--warn-bg); color: var(--warn-text); font-weight: 600; }
.svc-view .mon, .svc-dlg .mon { margin-left: 4px; }
.svc-view .legend { font-size: 12px; margin: 6px 2px; }
.svc-view .notice { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: 6px; }
.svc-view .notice h3 { margin: 0 0 4px; color: var(--warn-text); }
.svc-view .notice ul { margin: 0; padding-left: 18px; }
.svc-view .subs { margin-top: 14px; }
.svc-view .subs summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 4px 0; }
.svc-view .subs .tablewrap { margin-top: 4px; }
.svc-view table.subtbl td, .svc-view table.subtbl th { font-size: 12px; }
.svc-view table.subtbl tbody tr { cursor: default; }
.svc-view .scroll, .svc-dlg .scroll { overflow-x: auto; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; }
.svc-view table.mini, .svc-dlg table.mini { table-layout: auto; font-size: 12px; margin-top: 0; width: 100%; border-collapse: collapse; }
.svc-view table.mini th, .svc-view table.mini td, .svc-dlg table.mini th, .svc-dlg table.mini td { padding: 3px 6px; white-space: nowrap; }
.svc-view table.mini tbody tr { cursor: default; }
.svc-view .wrapcell, .svc-dlg .wrapcell { white-space: normal; display: inline-block; min-width: 16em; max-width: 40em; }
.svc-view .bad, .svc-dlg .bad { color: var(--danger); }
.svc-view .good, .svc-dlg .good { color: var(--ok); }
.svc-view .meh, .svc-dlg .meh { color: var(--warn-text); }
/* detail dialog (row click): run / crawler history */
.svc-dlg { border: 1px solid var(--line); border-radius: 8px; padding: 0; width: min(920px, 96vw); max-height: 90vh; background: var(--white); color: var(--text); font-size: 13px; }
.svc-dlg::backdrop { background: rgba(56, 60, 60, .35); }
.svc-dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--white); z-index: 1; }
.svc-dlg-head h2 { font-size: 15px; margin: 0; }
.svc-dlg-close { border: 0; background: var(--btn); border-radius: 4px; padding: 2px 10px; font: inherit; }
.svc-dlg-body { padding: 4px 12px 14px; }
.svc-dlg dl.kv { display: grid; grid-template-columns: 7em 1fr; gap: 4px 10px; margin: 8px 0; }
.svc-dlg dl.kv dt { color: var(--muted); }
.svc-dlg dl.kv dd { margin: 0; word-break: break-word; }
.svc-dlg .mcard { margin: 6px 0; }
/* phones: rows become cards (as on services.ntujour.org ≤760px) */
@media (max-width: 760px) {
  .svc-view .svc-wrap { padding: 4px 10px 16px; }
  .svc-view .sec-head { flex-direction: column; gap: 2px; }
  .svc-view .tablewrap { border: 0; background: none; }
  .svc-view table.svc-tbl, .svc-view table.rt-tbl, .svc-view table.subtbl,
  .svc-view table.svc-tbl tbody, .svc-view table.rt-tbl tbody, .svc-view table.subtbl tbody,
  .svc-view table.svc-tbl tr, .svc-view table.rt-tbl tr, .svc-view table.subtbl tr,
  .svc-view table.svc-tbl td, .svc-view table.rt-tbl td, .svc-view table.subtbl td { display: block; width: 100%; }
  .svc-view table.svc-tbl thead, .svc-view table.rt-tbl thead, .svc-view table.subtbl thead, .svc-view colgroup { display: none; }
  .svc-view table.svc-tbl tbody tr, .svc-view table.rt-tbl tbody tr, .svc-view table.subtbl tbody tr { background: var(--white); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; padding: 6px 8px; }
  .svc-view table.svc-tbl td, .svc-view table.rt-tbl td, .svc-view table.subtbl td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 5.5em 1fr; gap: 6px; }
  .svc-view table.svc-tbl td::before, .svc-view table.rt-tbl td::before, .svc-view table.subtbl td::before { content: attr(data-l); color: var(--muted); font-size: 12px; }
  .svc-view td.name { grid-template-columns: 1fr !important; }
  .svc-view td.name::before { display: none; }
  .svc-view td.name .clamp { font-size: 14px; }
  .svc-view td:empty { display: none !important; }
  .svc-view tr.empty td::before { display: none; }
  .svc-view .filters input, .svc-view .filters select { font-size: 16px; min-height: 40px; }
  .svc-view .filters input { max-width: none; }
  .svc-dlg { width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .svc-dlg dl.kv { grid-template-columns: 5.5em 1fr; }
  .svc-dlg-close { min-height: 40px; min-width: 44px; }
}

/* ---------- 行事曆 item details: docked side panel / popover / bottom sheet (app.js cd*) ---------- */
.cd { position: fixed; z-index: 30; background: var(--white); color: var(--text); font-size: 13px; line-height: 1.45; overflow: auto; overscroll-behavior: contain; }
.cd[hidden], .cd-backdrop[hidden] { display: none; }
.cd-dock { right: 0; bottom: 0; width: var(--cd-w); border-left: 1px solid var(--line); box-shadow: -2px 0 8px rgba(0, 0, 0, .04); }
body.cal-dock { --cd-w: 300px; }
body.cal-dock #calendar { margin-right: var(--cd-w); }
.cd-pop { z-index: 45; width: min(340px, calc(100vw - 16px)); max-height: min(70vh, 520px); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }
.cd-sheet { z-index: 48; left: 0; right: 0; bottom: 0; max-height: 72dvh; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.cd-backdrop { position: fixed; inset: 0; z-index: 47; background: rgba(0, 0, 0, .28); }
.cd-hd { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; background: var(--white); border-bottom: 1px solid var(--line-soft); }
.cd-hd-t { flex: 1; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.cd-sheet .cd-hd::before { content: ""; position: absolute; left: 50%; top: 3px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
.cd-x { border: 0; background: none; font-size: 20px; line-height: 1; padding: 2px 6px; color: var(--muted); cursor: pointer; min-width: 32px; min-height: 32px; }
.cd-sheet .cd-x { min-width: 44px; min-height: 40px; font-size: 24px; }
.cd-body { padding: 10px 12px 14px; border-left: 3px solid var(--c-bd, var(--line)); } /* Google events / empty state */
.cd-body.gcal { border-left-color: var(--gc-bd); }
.cd-empty { border-left-color: transparent; font-size: 12px; }
.cd-kind { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.cd-title { font-size: 15px; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; margin-bottom: 6px; }
.cd-row { display: flex; gap: 8px; margin: 3px 0; overflow-wrap: anywhere; }
.cd-lbl { flex: 0 0 2.6em; color: var(--muted); font-size: 12px; padding-top: 1px; }
.cd-val { min-width: 0; }
.cd-cal { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 12px; background: var(--gc-bg); color: var(--gc-ink); box-shadow: inset 0 0 0 1px var(--gc-bd); }
.cd-sec { margin-top: 10px; }
.cd-sec-t { font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; padding-bottom: 1px; }
.cd-desc { overflow-wrap: anywhere; }
.cd-desc .md-text { white-space: pre-wrap; }
/* board items: the real card (renderCard) — same look and controls as on the board */
.cd-card-wrap { border-left: 0; background: var(--nh-gray-col); }
.cd-card-wrap .cd-kind { margin: 0 0 5px 2px; }
.cd-card-wrap .card { cursor: pointer; }
.cd .st.cd-cur { background: color-mix(in srgb, var(--c-bd, var(--line)) 22%, transparent); box-shadow: inset 2px 0 0 var(--c-bd, var(--line)); border-radius: 3px; margin-left: -4px; margin-right: -2px; padding: 1px 2px 1px 4px; }
.cd .st.cd-cur .nm { font-weight: 600; }
body.hide-done .cd .st.done.cd-cur, body.hide-done .cd .st.done.cd-keep { display: flex; } /* the item you came from stays visible */
.cd-note { font-size: 11px; margin: 12px 0 0; }
.cal .cd-on { outline: 2px solid var(--link); outline-offset: 0; }