/* Poppins is bundled so the app works offline (SIL Open Font License) */
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('fonts/poppins-latin-600-normal.woff2') format('woff2'); }

:root {
  /* highlighter colours for the whiteboard's Highlighter (board.css .wb-shape.mark): the same in every theme on purpose, like a pen on paper; they are
     multiplied with what lies under them, so black words stay black */
  --hl-yellow: #ffe866; --hl-green: #b8f2c8; --hl-blue: #b5e2fb; --hl-pink: #ffc2dc; --hl-violet: #e2cbff;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --paper: #FFFFFF;
  --ink: #000000;
  --ink-2: #2B2B2B;
  --mute: #6B6B6B;
  --faint: #C9C9C9;
  --line: #E7E7E7;
  --wash: #F5F5F5;
  --gold: #A8843A;       /* now: bars, rings, the mark. 3.48:1 on white, so never small text */
  --gold-text: #7F6128;  /* gold as words: 5.76:1 on white */
  --red: #B2301F;
  --on-ink: #FFFFFF; --ink-hover: #3A3A3A; --on-gold: #000000; --on-red: #FFFFFF; --bar: var(--ink);
  --ft-green: #1E7F45; --ft-blue: #2458C6; --ft-amber: #A35F00; --ft-red: #B42318; --ft-violet: #7A3DB8; /* link types, 3:1 or more on page and raised */
  --duck: #FFD23F; --duck-bill: #F28C1B; --duck-ink: #3B2A05; --duck-hi: #FFFFFF; /* Chichi, the pixel duck: her own colours, the same in every theme (like an emoji) */
  --note-yellow: #FFF1A8; --note-green: #CDEFC9; --note-blue: #CFE3FF; --note-pink: #FFD3DC; --note-violet: #E4D5FF; /* sticky notes (whiteboard): --ink on them 7:1 */
  --stage: #15131B; --on-stage: #F3F1F7; --stage-accent: #A8843A; /* presenting a whiteboard: the stage around the scene card */
  --qr-ink: #111111; --qr-paper: #FFFFFF; /* a QR code stays dark on light in every theme: camera apps read that best */
  --dim: #B5B5B5; --wkend: #FAFAFA; --done: #8C8C8C; --blocked-bg: #F2D6D1; --shared-bar: #DCCBA6; --shared-bar-hi: #9C7E3F;
  color-scheme: light;
  --font: 'Poppins', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.1,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2 { font-weight: 600; margin: 0; letter-spacing: -.01em; }

/* ---------- top bar: sits in the corner, the page stays white ---------- */
.top {
  position: fixed; top: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 16px 28px 0 0;
}
.top-row { display: flex; align-items: center; gap: 14px; }
.brand { display: inline-flex; align-items: center; height: 38px; margin-right: 14px; color: var(--ink); }
.brand svg { height: 17px; width: auto; display: block; }
.brand .bm-now { fill: var(--gold); transition: transform .5s cubic-bezier(.3,1.3,.5,1); transform-origin: 0 50%; transform-box: fill-box; }
.brand:hover .bm-now { transform: scaleX(1.12); }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.top-row.sub { gap: 16px; }
body:not(.on-timeline) .filters { display: none; }
body:not(.on-timeline):not(.on-gantt) .top-row.sub { display: none; }
.filters, .views { display: flex; gap: 4px; position: relative; }
.nav-ind { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--bar); width: 0; transition: transform .45s cubic-bezier(.3,1.25,.5,1), width .45s cubic-bezier(.3,1.25,.5,1), opacity .2s; pointer-events: none; }
.filters .nav-ind { height: 2px; }
.proj-filter { font-size: 13.5px; color: var(--mute); border-bottom-width: 1.5px; padding: 4px 2px; max-width: 220px; cursor: pointer; }
.proj-filter.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.proj-clear { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; flex: none; }
.proj-clear[hidden] { display: none; }
.tl-team { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tl-team[hidden], body:not(.on-timeline):not(.on-gantt) .tl-team { display: none; }
.tl-team.off { color: var(--mute); border-style: dashed; }
.tl-team.off svg { opacity: .55; }
.tl-team-x { font-size: inherit; font-variant-numeric: tabular-nums; }
.tl-team-x em { font-style: normal; }
.tl-team-x[hidden] { display: none; }
/* the picker of teammates' tasks */
.th-pop { width: min(380px, calc(100vw - 16px)); max-height: min(560px, calc(100vh - 16px)); display: flex; flex-direction: column; }
.th-on { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink); padding: 4px 0; cursor: pointer; }
.th-paused { margin: 0 0 4px 26px; font-size: 12.5px; color: var(--mute); }
.th-def { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; padding: 6px 0 8px; border-bottom: 1px solid var(--line); }
.th-def label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.th-pop input[type="checkbox"], .th-pop input[type="radio"] { width: auto; margin: 0; padding: 0; flex: none; accent-color: var(--ink); }
.th-list { overflow: auto; flex: 1 1 auto; min-height: 0; padding: 4px 0; }
.th-p { border-bottom: 1px solid var(--line); }
.th-p summary { display: flex; align-items: center; gap: 8px; padding: 7px 0; cursor: pointer; list-style: none; }
.th-p summary::-webkit-details-marker { display: none; }
.th-p summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; flex: none; border-right: 1.6px solid var(--mute); border-bottom: 1.6px solid var(--mute); transform: rotate(45deg); transition: transform .15s; }
.th-p[open] summary::after { transform: rotate(-135deg); }
.th-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-p summary small, .th-t small { color: var(--mute); font-size: 12px; white-space: nowrap; }
.th-rule { font-style: normal; font-size: 11.5px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.th-t { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0 4px 22px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.th-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-t.done span { text-decoration: line-through; color: var(--mute); }
.th-more { margin: 2px 0 8px 22px; font-size: 12px; color: var(--mute); }
.th-foot { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.th-note { margin: -4px 0 10px; font-size: 13px; color: var(--mute); }
.th-note .link { font-size: 13px; }
@media (hover: none) { .th-t span { white-space: normal; } }
.tl-team:hover, .tl-team:focus-visible { border-color: var(--ink); color: var(--ink); }
.proj-clear:hover, .proj-clear:focus-visible { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
kbd { font: 500 11px var(--font); border: 1px solid currentColor; padding: 0 5px; margin-left: 6px; opacity: .7; }
.filters button, .views button {
  background: none; border: 0; padding: 6px 8px; font-size: 14px; color: var(--mute); position: relative;
}
.filters button:hover, .views button:hover { color: var(--ink); }
.filters button[aria-pressed="true"], .views button[aria-current="page"] { color: var(--ink); }

.count { font-size: 11px; background: var(--ink); color: var(--on-ink); border-radius: 9px; padding: 0 6px; margin-left: 2px; vertical-align: 1px; }
.count:empty { display: none; }

/* ---------- controls ---------- */
.btn {
  border: 1.5px solid var(--ink); background: var(--paper) linear-gradient(var(--ink), var(--ink)) no-repeat left / 0% 100%; color: var(--ink);
  height: 38px; padding: 0 18px; border-radius: 0; font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background-size .32s cubic-bezier(.2,.7,.1,1), color .2s, transform .12s; display: inline-flex; align-items: center; text-decoration: none;
}
.btn:hover { background-size: 100% 100%; color: var(--on-ink); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.primary { background: var(--ink) linear-gradient(var(--ink-hover), var(--ink-hover)) no-repeat left / 0% 100%; color: var(--on-ink); }
.btn.primary:hover { background-size: 100% 100%; }
.btn.ghost { border-color: transparent; background: transparent linear-gradient(var(--wash), var(--wash)) no-repeat left / 0% 100%; }
.btn.ghost:hover { background-size: 100% 100%; color: var(--ink); }
.btn.ghost.danger:hover { color: var(--red); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn.danger { color: var(--red); }
.btn.small { height: 32px; padding: 0 13px; font-size: 13px; }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.icon-btn { width: 38px; height: 38px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink); }
.icon-btn:hover { background: var(--wash); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#btn-notify.on svg { fill: var(--ink); }
#btn-notify .bell-off { display: none; }
#btn-notify.muted .bell-off { display: inline; }
#btn-notify.muted svg { opacity: .75; }
/* the bell's earlier messages (nfToggle in app.js): a dot with the number missed, and the list under the bell */
#btn-notify { position: relative; }
#btn-notify.has-new::after { content: attr(data-n); position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: var(--on-red); font: 700 10px/16px var(--font); text-align: center; box-sizing: border-box; }
.nf-pop { position: fixed; z-index: 85; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; animation: toastIn .25s var(--ease); }
.nf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.nf-list { list-style: none; margin: 0; padding: 0 0 6px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.nf-day { padding: 10px 14px 4px; font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.nf-i { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 8px 14px; border-left: 3px solid transparent; }
.nf-i.new { border-left-color: var(--red); background: var(--wash); }
.nf-i.alarm b::before { content: '⏰ '; }
.nf-t { font-size: 12px; color: var(--mute); padding-top: 2px; font-variant-numeric: tabular-nums; }
.nf-i b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.nf-i p { margin: 2px 0 0; color: var(--mute); font-size: 13.5px; overflow-wrap: anywhere; }
.nf-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nf-empty { padding: 14px; margin: 0; color: var(--mute); }
.nf-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.spacer { flex: 1; }

label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--mute); }
label.inline { flex-direction: row; align-items: center; gap: 6px; }
input, select, textarea { border: 0; border-bottom: 1.5px solid var(--faint); border-radius: 0; background: transparent; padding: 7px 0; font-size: 15px; color: var(--ink); min-width: 0; }
select { padding-right: 4px; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--ink); }
textarea { resize: vertical; border: 1.5px solid var(--faint); padding: 8px 10px; }
textarea:focus { border-color: var(--ink); }
input[type="range"] { border: 0; accent-color: var(--ink); padding: 0; }
input[type="number"] { width: 64px; }
output { color: var(--ink); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.grid2 > *, .grid2 select, label > select { min-width: 0; max-width: 100%; } /* a long option (a task title) must not push the dialog wider */

.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--paper); border: 1.5px solid var(--ink); padding: 6px; z-index: 50; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; font-size: 14px; }
.menu button:hover { background: var(--wash); }

/* ---------- timeline ---------- */
.timeline { position: fixed; inset: 0; overflow: hidden; }
.tl-rail { position: absolute; inset: 0; right: auto; width: 60vw; overflow: hidden; cursor: grab; touch-action: none; user-select: none; outline: none; }
.tl-rail:active { cursor: grabbing; }
.br-row { position: absolute; left: 0; top: 0; width: 100%; height: var(--rowH); will-change: transform; contain: layout style; } /* a bar's width change stays inside its row */
.br-bar { position: absolute; left: 0; top: 50%; height: var(--thick); margin-top: calc(var(--thick) / -2); background: var(--bar); transition: background .35s; }
.br-c1, .br-c2 { position: absolute; top: 50%; translate: 0 -50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--label); line-height: 1.3; }
.br-c1 { left: var(--c1x); max-width: calc(var(--c2x) - var(--c1x) - 16px); color: var(--mute); }
/* laptops: a long date ("23 Jul 2027, 09:00") or name takes a second line instead of ending in "..." (owner, 9 Oct 2026: text cropped on a laptop) */
@media (min-width: 821px) { .br-c1, .br-c2 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.25; padding-block: .12em; overflow-wrap: anywhere; } }
.br-c2 { left: var(--c2x); max-width: var(--c2w); color: var(--ink); }
.br-bar::after { content: ''; position: absolute; right: 12px; top: 50%; height: 34%; width: 24px; translate: 0 -50%; background: var(--paper); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.3,1.3,.5,1) .06s; }
.br-row.sel .br-bar::after { transform: scaleX(1); }
.br-row.event .br-bar { background: transparent; box-shadow: inset 0 0 0 3px var(--ink); }
.br-row.event.past .br-bar { box-shadow: inset 0 0 0 3px var(--faint); }
.br-row.event.sel .br-bar::after { background: var(--bar); }
.br-row.event.live .br-bar { box-shadow: inset 0 0 0 3px var(--gold); }
.br-row.event.live .br-c1 { color: var(--gold-text); }
.br-row.past .br-bar { background: var(--faint); }
.br-row.past.sel .br-bar { background: var(--bar); }
.br-row.event.past.sel .br-bar { background: transparent; box-shadow: inset 0 0 0 3px var(--ink); }
.br-row.now .br-bar { background: var(--gold); }
.br-row.overdue .br-c1 { color: var(--red); }
.br-row.past .br-c2 { color: var(--mute); }

.tl-heading { position: absolute; left: var(--hx); top: var(--cy); width: var(--hw); transform: translateY(-50%); pointer-events: none; }
.tl-heading h1 { font-size: var(--hsize); line-height: 1.08; font-weight: 600; letter-spacing: -.015em; overflow-wrap: break-word; cursor: pointer; pointer-events: auto; }
.tl-heading h1.small { font-size: calc(var(--hsize) * .72); }
.tl-heading h1.smaller { font-size: calc(var(--hsize) * .56); }
/* a very long title (a pasted message) stops after a few lines; the whole of it is on the card below */
.tl-heading h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; padding-bottom: .14em; margin-bottom: -.14em; } /* the tails of g, p, y hang below a 1.08 line: without the padding the last line lost them */
.tl-heading h1.smaller { -webkit-line-clamp: 4; line-clamp: 4; }
.tl-heading h1.tiny { font-size: calc(var(--hsize) * .46); }
@media (min-width: 821px) { .tl-heading h1, .tl-heading h1.smaller, .tl-heading h1.tiny { -webkit-line-clamp: 2; line-clamp: 2; } } /* a computer: two lines at most, the panel beside it has the whole name */

.tl-panel {
  position: absolute; left: var(--px); right: 3vw; top: 104px; bottom: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; gap: 0;
  overflow-y: auto; scrollbar-width: none;
}
.tl-panel::-webkit-scrollbar { display: none; }
.tl-panel.now .p-body { font-size: clamp(15px, 1.15vw, 18px); max-width: 32em; }
.p-body.small { font-size: 15px; font-weight: 400; color: var(--ink-2); }
.p-date { font-size: clamp(17px, 1.4vw, 22px); font-weight: 600; line-height: 1.25; margin-bottom: 4px; display: flex; flex-wrap: wrap; justify-content: inherit; gap: 2px 10px; align-items: baseline; }
.p-date span { font-size: .72em; font-weight: 500; color: var(--mute); }
.p-meta:empty { display: none; }
.tl-panel p.p-body.small { white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.p-kind.live { color: var(--gold-text); }
.rd { display: inline-block; }
.roll { position: relative; overflow: hidden; vertical-align: bottom; }
.rd-new { display: inline-block; }
.rd-old { position: absolute; left: 0; top: 0; }
.p-big sup .rd, .p-big sup .roll { vertical-align: baseline; }

/* needs a decision */
.dec { width: min(560px, 100%); margin-top: 24px; text-align: left; }
.dec-h { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; }
.dec ol { list-style: none; margin: 0; padding: 0; }
.dec li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dec-bar { height: 5px; background: var(--bar); transition: width .3s; }
.dec li.late .dec-bar { background: var(--red); }
.dec-txt b { display: block; font-weight: 500; font-size: 14px; line-height: 1.3; }
.dec-txt small { display: block; font-size: 12px; color: var(--mute); }
.dec li.late small { color: var(--red); }
.dec-acts { display: flex; gap: 2px; }
.dec-acts button { background: none; border: 0; font-size: 12.5px; padding: 5px 7px; color: var(--ink); position: relative; }
.dec-acts button::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 2px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.dec-acts button:hover::after { transform: scaleX(1); }
.dec-more { font-size: 12px; color: var(--mute); padding-top: 8px; }
.p-kind { font-size: 13.5px; color: var(--mute); margin-bottom: 6px; }
.p-kind.alert { color: var(--red); }
.p-priv { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 1px 8px 1px 6px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--mute); font: inherit; font-size: 12px; line-height: 18px; vertical-align: 1px; cursor: help; }
.p-priv svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-priv:hover, .p-priv:focus-visible { color: var(--ink); border-color: var(--ink); }
.p-priv.shared { color: var(--gold-text); border-color: var(--gold); }
.p-doneby { margin: 6px 0 0; font-size: 13px; color: var(--mute); }
.p-doneby::before { content: "\2713  "; color: var(--ft-green); font-weight: 700; }
.p-carry { margin: 6px 0 0; font-size: 13px; color: var(--gold-text); }
.r-share { display: grid; gap: 10px; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--line); background: var(--wash); }
.r-share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.r-share-l { min-width: 110px; font-size: 13px; color: var(--mute); }
.r-seg button { height: 32px; }
.r-seg button:disabled { opacity: .45; cursor: not-allowed; }
.r-alert-people { display: flex; flex-wrap: wrap; gap: 6px; }
.r-alert-p { cursor: pointer; font: inherit; background: var(--paper); }
.r-alert-p[aria-pressed="false"] { opacity: .55; }
.r-alert-p[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.r-share-hint { font-size: 12.5px; color: var(--mute); line-height: 1.45; }
.r-share-hint.warn { color: var(--red); }
.p-big { font-size: var(--hsize); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; }
.p-big sup { font-size: .32em; font-weight: 500; vertical-align: .95em; margin-left: .15em; letter-spacing: 0; color: var(--gold-text); }
.p-body { font-size: clamp(16px, 1.45vw, 22px); line-height: 1.45; max-width: 36em; margin: 18px 0 0; font-weight: 500; }
.p-meta { font-size: 14px; color: var(--mute); margin-top: 12px; }
.p-body.long { font-size: 15.5px; font-weight: 400; line-height: 1.55; text-align: left; width: min(34em, 100%); color: var(--ink-2); }
.p-body.long p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; max-height: calc(1.55em * 8); overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.p-body.long.open p { max-height: none; -webkit-mask-image: none; mask-image: none; }
.p-more { margin-top: 8px; font-size: 13.5px; }
.p-body.long.fits p { -webkit-mask-image: none; mask-image: none; }
.p-body.long.fits .p-more { display: none; }
.p-span { width: min(420px, 90%); margin-top: 22px; }
.p-span .track { height: 12px; background: var(--line); position: relative; }
.p-span .fill { position: absolute; inset: 0 auto 0 0; background: var(--bar); }
.p-span .ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mute); margin-top: 6px; }
.p-receipt { margin-top: 26px; max-height: min(34vh, 320px); max-width: 60%; transform: rotate(-5deg); box-shadow: 8px 10px 0 -2px var(--wash), 0 12px 30px -16px rgba(0,0,0,.35); background: #fff; cursor: zoom-in; }
.p-file { margin-top: 20px; font-size: 14px; }
.p-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.p-empty { color: var(--mute); }

.tl-now { position: absolute; left: 24px; bottom: 22px; background: var(--paper); border: 1.5px solid var(--ink); height: 34px; padding: 0 14px; font-size: 13px; font-weight: 500; z-index: 5; }
.tl-now:hover { background: var(--ink); color: var(--on-ink); }
/* the key for it, like the other buttons with a shortcut (computers only; phones have no N key to press) */
@media (pointer: fine) { .tl-now::after { content: 'N'; font: 500 11px var(--font); border: 1px solid currentColor; padding: 0 5px; margin-left: 8px; opacity: .7; } }
.sample-note { position: absolute; right: 28px; bottom: 18px; font-size: 13px; color: var(--mute); }
.sample-note .link { color: var(--mute); margin-left: 4px; }

/* ---------- pages (Gantt, Ledger) ---------- */
.page { padding: 110px 40px 48px; min-height: 100vh; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head h1 { font-size: 44px; line-height: 1; }
.page-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hint { color: var(--mute); font-size: 13px; margin: 12px 0 0; }
.seg { display: inline-flex; border: 1.5px solid var(--ink); }
.seg button { border: 0; background: transparent; height: 34px; padding: 0 14px; font-size: 13.5px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.seg a.ck-inv { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 13.5px; color: var(--ink); text-decoration: none; border-left: 1px solid var(--line); }
.seg a.ck-inv::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .6; } /* opens its own page */
.seg a.ck-inv:hover { background: var(--wash); }

/* gantt: the same black bars, laid on a calendar */
.gantt { --label-w: 240px; --dpx: 26px; --row-h: 46px; --head-h: 56px; border-top: 1.5px solid var(--ink); overflow: auto; position: relative; max-height: calc(100vh - 220px); }
.g-inner { position: relative; min-width: 100%; }
.g-head { position: sticky; top: 0; z-index: 10; display: flex; background: var(--paper); border-bottom: 1px solid var(--line); height: var(--head-h); }
.g-corner { position: sticky; left: 0; z-index: 7; width: var(--label-w); flex: none; background: var(--paper); padding: 10px 0; display: flex; align-items: flex-end; font-size: 13px; color: var(--mute); }
.g-scale { position: relative; flex: none; }
.g-month { position: absolute; top: 6px; height: 20px; border-left: 1.5px solid var(--ink); }
.g-month span { position: sticky; left: calc(var(--label-w) + 8px); display: inline-block; padding-left: 6px; font-size: 13px; font-weight: 600; line-height: 20px; white-space: nowrap; background: var(--paper); }
.g-dayn { position: absolute; bottom: 6px; width: var(--dpx); text-align: center; font-size: 11.5px; color: var(--mute); }
.g-dayn.wk { color: var(--dim); }
.g-dayn.today { color: var(--on-gold); font-weight: 500; }
.g-dayn.today::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 18px; transform: translate(-50%,-50%); background: var(--gold); z-index: -1; }
.g-body { position: relative; }
.g-bg { position: absolute; top: 0; bottom: 0; left: var(--label-w); pointer-events: none; }
.g-wkend { position: absolute; top: 0; bottom: 0; background: var(--wkend); }
.g-weekline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.g-nowline { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold); z-index: 3; }
.g-row { display: flex; height: var(--row-h); position: relative; }
.g-label { position: sticky; left: 0; z-index: 9; width: var(--label-w); flex: none; background: var(--paper); padding-right: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.g-label:hover .gl-title { text-decoration: underline; text-underline-offset: 3px; }
.gl-title { overflow: hidden; font-size: 14px; line-height: 1.25; flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; } /* long names take two lines, the rest in a tip */
.gl-pct { font-size: 12px; color: var(--mute); }
.g-row.project { height: 44px; }
.g-row.project .g-label { cursor: default; }
.g-row.project .gl-title { font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; }
.g-track { position: relative; flex: none; }
.g-span { position: absolute; top: 27px; height: 3px; background: var(--bar); }
.g-span::before, .g-span::after { content: ''; position: absolute; top: -5px; width: 3px; height: 8px; background: var(--bar); }
.g-span::before { left: 0; } .g-span::after { right: 0; }
.g-bar { position: absolute; top: 15px; height: 16px; background: var(--line); cursor: grab; touch-action: none; user-select: none; z-index: 4; }
.g-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bar); }
.g-bar.done .fill { background: var(--done); }
.g-bar.blocked { background: var(--blocked-bg); }
.g-bar.blocked .fill { background: var(--red); }
.g-bar.planned { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.g-bar .txt { position: absolute; left: 100%; top: 50%; translate: 0 -50%; padding-left: 10px; font-size: 12.5px; white-space: nowrap; pointer-events: none; color: var(--ink-2); }
.g-bar.done .txt { color: var(--mute); }
.g-bar .h { position: absolute; top: -4px; bottom: -4px; width: 9px; cursor: ew-resize; }
.g-bar .h.l { left: -4px; } .g-bar .h.r { right: -4px; }
.g-bar.dragging { cursor: grabbing; outline: 2px solid var(--gold); outline-offset: 2px; }
.g-bar:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* a one-day task: the diamond moves it, the tab on its right stretches it */
.g-bar.milestone .h.r { right: auto; left: 15px; top: 1px; bottom: 1px; width: 22px; }
.g-bar.milestone .h.r::after { content: ''; position: absolute; left: 3px; top: 50%; width: 12px; height: 8px; margin-top: -4px; background: var(--faint); transform: scaleX(.35); transform-origin: left; opacity: 0; transition: transform .25s var(--ease), opacity .2s; }
.g-bar.milestone:hover .h.r::after, .g-bar.milestone:focus-visible .h.r::after { opacity: 1; transform: none; }
.g-bar.milestone .h.r:hover::after { background: var(--bar); }
.g-bar.milestone .txt { padding-left: 28px; }
.g-bar.milestone { background: none; box-shadow: none; width: 18px !important; margin-left: -9px; top: 14px; height: 18px; }
.g-bar.milestone::before { content: ''; position: absolute; inset: 3px; background: var(--bar); transform: rotate(45deg); }
.g-bar.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 30% { outline: 3px solid var(--gold); outline-offset: 4px; } }
.g-rem { position: absolute; top: 3px; width: 3px; height: 12px; margin-left: -1.5px; background: var(--gold); z-index: 5; cursor: pointer; transform-origin: bottom; }
.g-rem::before { content: ''; position: absolute; left: -3.5px; top: -3px; width: 10px; height: 8px; background: inherit; }
.g-rem:hover { outline: 2px solid var(--gold); outline-offset: 3px; }
.g-rem.late { background: var(--red); }
.g-rem.done { background: var(--faint); }
.g-rem.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gold); cursor: pointer; }
.g-rem.ghost::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gold); }
.g-rem.dragging { cursor: grabbing; outline: 2px solid var(--gold); outline-offset: 3px; z-index: 8; }
.g-rem[data-rid] { cursor: grab; }
/* reminders that would sit on top of each other share one marker with a count */
.g-rem.g-stack { width: 3px; }
.g-rem.g-stack::before { left: -7px; top: -5px; width: 17px; height: 13px; }
.g-rem.g-stack b { position: absolute; left: -7px; top: -5px; width: 17px; height: 13px; font: 600 10px/13px var(--font); color: var(--on-gold); text-align: center; z-index: 1; }
.g-row.project .g-rem { top: 14px; height: 16px; }
.g-upd { position: absolute; top: 36px; width: 5px; height: 5px; margin-left: -2.5px; background: var(--bar); z-index: 4; transform-origin: top; }
.g-upd.many { width: 11px; margin-left: -2.5px; }
.g-upd::after { content: ''; position: absolute; inset: -5px; }
.g-over { position: absolute; top: 8px; height: 0; border-top: 1.5px dashed var(--gold); z-index: 3; }
.g-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.g-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.g-legend .lg-rem { width: 3px; height: 14px; background: var(--gold); }
.g-legend .lg-stack { font: 600 10px/13px var(--font); font-style: normal; color: var(--on-gold); background: var(--gold); width: 17px; text-align: center; }
.g-legend .lg-upd { width: 5px; height: 5px; background: var(--bar); }
.g-legend .lg-over { width: 22px; border-top: 1.5px dashed var(--gold); }
.g-tip { position: fixed; z-index: 60; background: var(--ink); color: var(--on-ink); font-size: 12.5px; line-height: 1.45; padding: 6px 10px; pointer-events: none; white-space: pre-line; max-width: 360px; }
.g-tip::first-line { font-weight: 600; }
.g-pop { position: fixed; z-index: 61; background: var(--paper); border: 1.5px solid var(--ink); padding: 6px 0; min-width: 240px; max-width: 360px; animation: fade .15s; }
.g-pop-h { font-size: 12px; color: var(--mute); padding: 2px 12px 6px; }
.g-pop button[data-pick] { display: flex; gap: 12px; width: 100%; border: 0; background: transparent; text-align: left; padding: 7px 12px; font-size: 13.5px; cursor: pointer; }
.g-pop button[data-pick]:hover, .g-pop button[data-pick]:focus-visible { background: var(--wash); outline: none; }
.g-pop .gp-time { color: var(--mute); white-space: nowrap; }
.g-pop .late .gp-time { color: var(--red); }
.g-pop .done .gp-title { color: var(--mute); text-decoration: line-through; }
.g-pop.rem-info { width: min(360px, calc(100vw - 16px)); max-width: none; padding: 12px 14px 12px; display: grid; gap: 6px; }
.rem-info .ri-kind { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--mute); }
.rem-info .ri-kind.late { color: var(--red); }
.rem-info .ri-kind span { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); }
.rem-info .ri-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.rem-info .ri-when { display: grid; font-size: 14px; color: var(--ink); }
.rem-info .ri-when small { font-size: 12.5px; color: var(--mute); }
.rem-info .ri-line { font-size: 13px; color: var(--mute); }
.rem-info .ri-place { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rem-info .ri-place svg { flex: none; width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rem-info .ri-notes { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rem-info .ri-acts { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.rem-info .ri-acts .spacer { flex: 1; }
.rem-info .ri-notes.open { display: block; -webkit-line-clamp: none; overflow: visible; }
.rem-info .ri-more { justify-self: start; font-size: 12.5px; }
.rem-info .ri-x { margin-left: auto; flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: var(--mute); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; align-self: center; }
.rem-info .ri-kind span + .ri-x { margin-left: 4px; }
.rem-info .ri-x:hover, .rem-info .ri-x:focus-visible { background: var(--wash); color: var(--ink); outline: none; }
.ri-scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 28%, transparent); animation: fade .15s; }
.g-pop.rem-info.mid { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); max-height: min(78vh, 680px); overflow: auto; padding: 18px 20px 16px; gap: 8px; box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 22%, transparent); }
.g-pop.rem-info.mid .ri-title { font-size: 19px; }
.g-pop.rem-info.mid .ri-when { font-size: 15px; }
.g-pop.rem-info.solo .ri-nbox { padding: 10px 12px; background: var(--wash); border-radius: 8px; }
.g-pop.rem-info.mid .ri-notes { font-size: 14px; line-height: 1.55; -webkit-line-clamp: 10; }
.g-pop.rem-info.mid .ri-notes.open { -webkit-line-clamp: none; }
.g-pop.rem-info.sheet { max-height: 85vh; overflow: auto; }
.g-pop.rem-info.sheet .ri-notes { -webkit-line-clamp: 8; }
.g-pop.rem-info.sheet .ri-notes.open { -webkit-line-clamp: none; }
.g-pop.rem-info.sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-width: 1.5px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); animation: riUp .2s ease-out; }
.g-pop.rem-info.sheet .ri-acts .btn { min-height: 40px; }
@keyframes riUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .g-pop.rem-info.sheet { animation: none; } }
.g-empty { padding: 60px 0; color: var(--mute); }

/* ledger */
.ledger-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); margin-bottom: 28px; }
.ledger-sum button { background: none; border: 0; border-right: 1px solid var(--line); padding: 16px 16px 14px 0; text-align: left; display: flex; flex-direction: column; }
.ledger-sum button + button { padding-left: 16px; }
.ledger-sum button:last-child { border-right: 0; }
.ledger-sum button[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--ink); }
.ledger-bar { display: flex; justify-content: flex-end; margin: -16px 0 10px; }
.ledger-bar[hidden] { display: none; }
.ld-hide { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.ld-hide input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.ld-hide b { font-weight: 600; color: var(--ink); background: var(--wash); border-radius: 999px; padding: 0 7px; font-size: 12.5px; }
.ls-name { font-size: 13px; color: var(--mute); }
.ls-amt { font-size: 22px; font-weight: 600; line-height: 1.3; }
.ls-n { font-size: 12px; color: var(--mute); }
.ls-owe .ls-name { color: var(--ink); font-weight: 600; }
.ls-owe .ls-amt { font-size: 30px; line-height: 1.2; }
.ls-owe.on .ls-n:not(.ls-all) { color: var(--ink); }
.ls-owe .ls-all { margin-top: 2px; }
.table-wrap { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th { text-align: left; font-weight: 400; color: var(--mute); font-size: 13px; padding: 8px 10px 8px 0; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
.ledger td { padding: 13px 10px 13px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ledger .num { text-align: right; white-space: nowrap; padding-right: 24px; }
.ledger td.desc { cursor: pointer; font-weight: 500; }
.ledger td.desc:hover { text-decoration: underline; text-underline-offset: 3px; }
.ledger tfoot td { border-bottom: 0; font-weight: 600; }
/* ticking claims: their sum as x + y = z, copied for WhatsApp */
.ledger .csel-td { width: 34px; padding-right: 6px; }
.ledger input.csel { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); cursor: pointer; vertical-align: middle; }
.ledger tr.picked td { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.csel-bar { position: sticky; bottom: 16px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; padding: 12px 14px 12px 18px;
  background: var(--ink); color: var(--on-ink); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .55); animation: cselIn .22s var(--ease, ease); }
.csel-n { font-size: 13px; opacity: .8; white-space: nowrap; }
.csel-sum { flex: 1 1 260px; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.csel-acts { display: flex; gap: 8px; margin-left: auto; }
.csel-bar .btn.primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
/* receipts of the ticked claims, one Copy per picture */
.pf-top { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-height: min(52vh, 520px); overflow: auto; }
.pf-list li { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.pf-h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; }
.pf-h b { min-width: 0; overflow-wrap: anywhere; } .pf-h span { color: var(--mute); font-size: 12.5px; white-space: nowrap; }
.pf-rcs { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-rc { display: grid; grid-template-rows: 96px auto; width: 132px; padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; text-decoration: none; overflow: hidden; }
.pf-rc img { width: 100%; height: 96px; object-fit: cover; display: block; object-position: top; }
.pf-rc i { display: grid; place-items: center; font-style: normal; font-weight: 600; color: var(--mute); background: var(--wash); }
.pf-rc span { padding: 6px 8px; font-size: 12.5px; font-weight: 600; text-align: center; border-top: 1px solid var(--line); }
.pf-rc span em { font-style: normal; color: var(--ink); }
.pf-rc:hover:not(:disabled) { border-color: var(--ink); }
.pf-rc:disabled { cursor: default; opacity: .65; }
.pf-rc.done span { background: var(--ink); color: var(--on-ink); }
.pf-rc.bad span { color: var(--red); }
.pf-rc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pf-sheets { display: grid; gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.pf-sheets .p-meta { margin: 0; }
.pf-shs { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-sh { display: grid; grid-template-rows: 150px auto; width: 128px; padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; overflow: hidden; }
.pf-sh img { width: 100%; height: 150px; object-fit: cover; object-position: top; display: block; background: #fff; }
.pf-sh span { padding: 6px 8px; font-size: 12.5px; font-weight: 600; text-align: center; border-top: 1px solid var(--line); }
.pf-sh:hover { border-color: var(--ink); }
.pf-sh.done span { background: var(--ink); color: var(--on-ink); }
.pf-sh:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.csel-bar .btn.ghost { color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 35%, transparent); background: none; }
@keyframes cselIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .csel-bar { animation: none; } }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.status i { width: 14px; height: 5px; background: var(--bar); }
.status.draft i { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.status.submitted i { background: var(--faint); }
.status.approved i { background: var(--gold); }
.status.paid i { background: var(--bar); }
.status.rejected i { background: var(--red); }
.receipt-current { font-size: 13px; color: var(--mute); }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--paper) 60%, transparent); z-index: 60; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); background: var(--paper); z-index: 61; border-left: 1.5px solid var(--ink); transform: translateX(102%); transition: transform .42s var(--ease); overflow-y: auto; padding: 24px 28px 40px; }
.drawer.open { transform: none; }
.drawer form { display: flex; flex-direction: column; gap: 16px; }
.drawer-head { display: flex; gap: 10px; align-items: center; }
.title-input { flex: 1; font-size: 26px; font-weight: 600; border-bottom-width: 3px; border-bottom-color: var(--ink); }
.row-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.drawer-section { margin-top: 30px; }
.drawer-section h2 { font-size: 18px; margin: 0 0 10px; }
.drawer-section h2:not(:first-child) { margin-top: 28px; }
.update-form { display: flex; flex-direction: column; gap: 8px; }
.update-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.updates { list-style: none; margin: 18px 0 0; padding: 0; }
.updates li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding-bottom: 14px; }
.updates li::before { content: ''; height: 5px; background: var(--bar); margin-top: 9px; }
.updates li:not(:first-child)::before { background: var(--faint); width: 18px; }
.u-when { font-size: 12px; color: var(--mute); }
.u-text { font-size: 14.5px; white-space: pre-wrap; }
.u-pct { margin-left: 6px; color: var(--ink); font-weight: 500; }
.u-del { font-size: 12px; color: var(--mute); background: none; border: 0; padding: 0; margin-left: 8px; text-decoration: underline; }
.updates:empty::after { content: 'No updates yet.'; color: var(--mute); font-size: 14px; }
.mini-reminders { list-style: none; padding: 0; margin: 0 0 10px; }
.mini-reminders li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mr-time { font-weight: 600; font-size: 15px; }
.mr-title { font-size: 14px; }
.mr-when { font-size: 12.5px; color: var(--mute); }
.mini-reminders:empty { display: none; }

/* ---------- modals ---------- */
.modal { border: 1.5px solid var(--ink); border-radius: 0; padding: 0; width: min(560px, calc(100vw - 32px)); color: var(--ink); background: var(--paper); }
.modal.wide { width: min(940px, calc(100vw - 32px)); }
.modal::backdrop { background: color-mix(in srgb, var(--paper) 72%, transparent); }
.modal[open] { animation: pop .32s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }
.modal form { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { font-size: 22px; }

.picker { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 34px; }
.picker-col { position: relative; height: 440px; margin-left: -28px; overflow: hidden; }
.picker-rail { position: absolute; inset: 0; cursor: grab; touch-action: none; user-select: none; outline: none; }
.picker-rail:focus-visible { box-shadow: inset 3px 0 0 var(--gold); }
.picker-rail .br-c1 { color: var(--mute); }
.picker-heading { position: absolute; left: 196px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.picker-heading b { display: block; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.picker-heading small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 6px; }
.picker-fields { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* time zones: "08:00" + WITA beside it; zoned times carry a small tag */
.time-zone { display: flex; gap: 6px; min-width: 0; }
.time-zone input { flex: 1 1 auto; min-width: 0; }
.time-zone select { flex: 0 0 auto; width: auto; max-width: 9.5em; }
.picker-heading b .zn { font-style: normal; font-size: .36em; font-weight: 600; letter-spacing: .04em; margin-left: .3em; vertical-align: .9em; color: var(--gold-text); }
.picker-heading .zn-here { color: var(--ink); }
.br-c2 small.zn { font-size: .78em; color: var(--mute); margin-left: .35em; letter-spacing: .02em; }
.clk-zone { font-size: .26em; font-weight: 600; letter-spacing: .06em; color: var(--mute); margin-left: .5em; vertical-align: .2em; }
.p-zones { font-size: 13.5px; color: var(--mute); margin-top: 6px; font-variant-numeric: tabular-nums; white-space: pre-wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1.5px solid var(--faint); background: var(--paper); height: 30px; padding: 0 11px; font-size: 12.5px; }
.chip:hover { border-color: var(--ink); }
/* a heads-up before the reminder (owner, 1 Nov 2026, migration *_reminder_early.sql): several may be picked */
.r-early { display: grid; gap: 6px; margin-top: 2px; }
.r-early[hidden] { display: none; }
.r-early-l { font-size: 13px; color: var(--mute); }
.r-early-c { display: flex; flex-wrap: wrap; gap: 6px; }
.r-early-c .chip { padding: 0 12px; height: 32px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.r-early-c .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.r-early-c .chip[aria-pressed="true"]::before { content: '✓'; margin-right: 5px; font-weight: 600; }
.r-early-say { font-size: 12.5px; color: var(--mute); }
.r-early-def { font-size: 12.5px; color: var(--mute); }
.r-early-def[hidden] { display: none; }
.r-early-dl { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 24px; bottom: 60px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.toast { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); padding: 12px 6px 12px 0; width: 360px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 12px 10px; align-items: start; animation: toastIn .4s var(--ease); box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); }
.toast .t-x { width: 30px; height: 30px; margin-top: -4px; border: 0; background: none; color: var(--mute); display: grid; place-items: center; padding: 0; cursor: pointer; }
.toast .t-x:hover, .toast .t-x:focus-visible { color: var(--ink); background: var(--wash); }
.toast .t-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.toast::before { content: ''; height: 6px; background: var(--bar); margin-top: 9px; transform-origin: left; animation: barIn .6s cubic-bezier(.3,1.3,.5,1) .08s backwards; }
.toast.alarm::before { background: var(--gold); animation: barIn .6s cubic-bezier(.3,1.3,.5,1) .08s backwards, pulse 1.6s ease-in-out .7s 3; }
/* a message that closes by itself: its bar drains to show the time left, and stops while a mouse rests on it */
.toast.timed::before { animation: barIn .6s cubic-bezier(.3,1.3,.5,1) .08s backwards, toastDrain var(--tt, 6s) linear .7s forwards; }
.toast.timed.held::before { animation-play-state: paused; }
@keyframes toastDrain { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast.timed::before { animation: none; } }
@keyframes barIn { from { transform: scaleX(0); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } }
.t-title { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
/* a long address or name wraps inside the card (never past its edge) and stops after 4 lines */
.t-sub { font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.t-actions { display: flex; gap: 6px 14px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.t-actions .link { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- the corner bar on laptops ----------
   On pages that scroll (projects, ledger, gantt) the bar is a full-width band with the page colour, so text never
   runs underneath it; a hairline shows once the page has scrolled. The timeline keeps the bare corner.
   Between 821 and 1299px the row is squeezed step by step so it always fits beside the greeting: tighter gaps and
   only the avatar (under 1300), no Quick add button (under 1100, "/" and N still work), only the brand mark and
   tighter tabs (under 960). */
@media (min-width: 821px) {
  body:not(.on-timeline) .top { left: 0; background: var(--paper); padding-bottom: 8px; transition: box-shadow .2s; }
  body.scrolled:not(.on-timeline) .top { box-shadow: 0 1px 0 var(--line); }
}
@media (min-width: 821px) and (max-width: 1299px) {
  .top-row { gap: 6px; }
  .ck-hello span { display: none !important; }
}
@media (min-width: 821px) and (max-width: 1099px) {
  #btn-quick { display: none; }
}
@media (min-width: 821px) and (max-width: 959px) {
  .brand { width: 18px; overflow: hidden; margin-right: 8px; }
  .brand svg { width: auto; height: 17px; }
  .views button { padding: 6px 5px; }
}

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  .top { left: 0; padding: 10px 12px 0; gap: 8px; flex-wrap: wrap; background: var(--paper); }
  .filters { order: 3; width: 100%; overflow-x: auto; }
  .views { padding-left: 0; border-left: 0; margin-right: auto; }
  .filters button, .views button { font-size: 13px; padding: 6px 6px; }
  .timeline { position: relative; inset: auto; min-height: 100vh; overflow: visible; }
  .tl-rail { position: relative; width: 100%; height: 58vh; margin-top: 88px; }
  /* phones: the time sits small above the title, so every row says when */
  .br-c1 { left: var(--c2x); max-width: var(--c2w); font-size: 11.5px; translate: 0 -118%; letter-spacing: .01em; }
  .br-c2 { translate: 0 -8%; }
  .br-row.now .br-c1 { display: none; }
  .br-row.now .br-c2 { translate: 0 -50%; }
  .tl-panel { position: static; padding: 24px 18px 90px; }
  .tl-now { position: fixed; }
  .sample-note { position: static; text-align: center; padding-bottom: 20px; }
  .page { padding: 110px 16px 40px; }
  .gantt { --label-w: 150px; }
  .ledger-sum { grid-template-columns: repeat(2, 1fr); }
  .picker { grid-template-columns: 1fr; }
  .picker-col { height: 300px; }
  .toasts { left: 16px; right: 16px; bottom: 16px; }
  .toast { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- quick add ---------- */
.modal.qa { width: min(760px, calc(100vw - 32px)); margin-top: 16vh; }
.modal.qa::backdrop { background: color-mix(in srgb, var(--paper) 82%, transparent); }
.modal.qa form { padding: 26px 30px 22px; gap: 14px; }
.qa-input { font-size: 26px; font-weight: 500; border-bottom: 3px solid var(--ink); padding: 6px 0 10px; letter-spacing: -.01em; }
.qa-kinds { display: flex; gap: 2px; flex-wrap: wrap; }
.qa-kinds button { background: none; border: 0; font-size: 12.5px; color: var(--mute); padding: 4px 8px; position: relative; }
.qa-kinds button[aria-pressed="true"] { color: var(--on-ink); }
.qa-kinds button[aria-pressed="true"]::before { content: ''; position: absolute; inset: 0; background: var(--ink); z-index: -1; animation: chipIn .28s var(--ease); }
.qa-kinds button { z-index: 0; }
@keyframes chipIn { from { transform: scaleX(.3); opacity: 0; } }
.qa-preview { display: flex; align-items: baseline; gap: 12px; min-height: 30px; flex-wrap: wrap; }
.qa-bar { align-self: center; height: 8px; width: 16px; background: var(--faint); transition: width .45s cubic-bezier(.3,1.3,.5,1), background .2s; flex: none; }
.qa-preview.ok .qa-bar { width: 64px; background: var(--bar); }
.qa-k { font-size: 12.5px; color: var(--mute); }
.qa-t { font-weight: 600; font-size: 17px; }
.qa-d { font-size: 14px; color: var(--ink-2); }
.qa-preview:not(.ok):not(.empty) .qa-d { color: var(--red); }
.qa-preview.empty .qa-d { color: var(--mute); }
.qa-p { font-size: 12px; border: 1px solid var(--ink); padding: 0 7px; }
.qa-hint { font-size: 12.5px; color: var(--mute); line-height: 1.6; }
.qa-hint b { font-weight: 500; color: var(--ink-2); }
.qa-foot { display: none; justify-content: flex-end; gap: 8px; }
@media (pointer: coarse), (max-width: 720px) { .qa-foot { display: flex; } .qa-keys { display: none; } } /* no Enter key on a phone with the keyboard down */

/* ---------- close the day, week report, calendars ---------- */
.lede { margin: -4px 0 4px; color: var(--ink-2); font-size: 14.5px; }
#close-tasks h3, #close-rems h3 { font-size: 14px; font-weight: 600; margin: 8px 0 4px; }
.ct { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 80px; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ct-name b { display: block; font-weight: 500; font-size: 14px; }
.ct-name small { display: block; font-size: 12px; color: var(--mute); }
.ct-track { display: block; height: 5px; background: var(--line); margin-top: 6px; }
.ct-track i { display: block; height: 100%; background: var(--bar); }
.ct-pct { justify-content: flex-end; }
.cr { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.cr input { margin-top: 4px; accent-color: var(--ink); }
.cr b { display: block; font-weight: 500; font-size: 14px; }
.cr small { display: block; font-size: 12px; color: var(--mute); }
.week-text { width: 100%; height: min(56vh, 520px); font: 13.5px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; border: 1.5px solid var(--ink); padding: 14px 16px; white-space: pre; overflow: auto; color: var(--ink); }
#week-proj { font-size: 13.5px; }
.steps { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.cal-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cal-bar { height: 6px; box-shadow: inset 0 0 0 2px var(--ink); }
.cal-bar.err { box-shadow: inset 0 0 0 2px var(--red); }
.cal-row b { display: block; font-weight: 500; font-size: 14px; }
.cal-row small { display: block; font-size: 12px; color: var(--mute); }
.cal-feed-add { margin-top: 6px; } /* the Calendars dialog; .cal-add is the + on a day in the month view */

/* ---------- projects ---------- */
.projects { padding-left: 0; padding-right: 0; }
.pj { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 110px); }
.pj-list { padding: 8px 0 40px; border-right: 1px solid var(--line); }
.pj-cat { font-size: 12.5px; color: var(--mute); padding: 18px 24px 6px 0; margin-left: 150px; }
.pj-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; width: 100%; background: none; border: 0; text-align: left; padding: 9px 20px 9px 0; position: relative; }
.pj-bar { height: 12px; background: var(--faint); width: calc(36px + var(--p) * 1px); transition: width .5s cubic-bezier(.3,1.25,.5,1), background .3s; }
.pj-row:hover .pj-bar { width: calc(48px + var(--p) * 1px); background: var(--mute); }
.pj-row.sel .pj-bar { width: 138px; background: var(--bar); }
.pj-name { grid-column: 2; font-size: 14.5px; line-height: 1.3; padding-left: 0; }
.pj-row.sel .pj-name { font-weight: 600; }
.pj-n { grid-column: 2; font-size: 12px; color: var(--mute); }
.pj-addp { margin: 18px 0 0 150px; font-size: 13.5px; }
/* many projects: find, sort, pin, fold */
.pj-tools { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-left: 24px; padding: 6px 20px 8px 0; background: var(--paper); }
.pj-tools[hidden] { display: none; }
.pj-find { width: 100%; font: 400 14px var(--font); padding: 7px 0; border: 0; border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink); }
.pj-find:focus { outline: none; border-bottom-color: var(--ink); }
.pj-sort { font-size: 12.5px; justify-self: start; max-width: 100%; color: var(--mute); }
.pj-found { font-size: 12.5px; color: var(--mute); padding: 12px 20px 6px 0; margin-left: 150px; }
.pj-item { position: relative; }
.pj-pin { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--mute); cursor: pointer; opacity: 0; transition: opacity .15s; }
.pj-pin svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.pj-item:hover .pj-pin, .pj-pin:focus-visible, .pj-item.pinned .pj-pin { opacity: 1; }
.pj-pin[aria-pressed="true"] { color: var(--gold-text); }
.pj-pin[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }
.pj-pin:hover { color: var(--ink); }
button.pj-cat { display: flex; align-items: center; gap: 8px; width: calc(100% - 150px); background: none; border: 0; text-align: left; font: inherit; font-size: 12.5px; color: var(--mute); cursor: pointer; }
button.pj-cat:hover { color: var(--ink); }
button.pj-cat small { font-size: 11.5px; color: var(--faint); margin-left: auto; padding-right: 20px; }
.pj-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; margin-left: -15px; }
button.pj-cat[aria-expanded="true"] .pj-chev { transform: rotate(45deg); }
.pj-row { padding-right: 40px; }
.pj-detail { padding: 8px 40px 60px; min-width: 0; }
.pjd-cat { font-size: 13px; color: var(--mute); }
.pjd-title { font-size: clamp(32px, 3.2vw, 52px); line-height: 1.05; margin: 2px 0 6px; }
.pjd-note { margin: 0 0 8px; color: var(--ink-2); max-width: 60ch; }
.pjd-actions { display: flex; gap: 6px; margin-top: 8px; }
.pjd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); margin: 26px 0 8px; }
.pjd-stats > div { padding: 12px 16px 12px 0; border-right: 1px solid var(--line); }
.pjd-stats > div + div { padding-left: 16px; }
.pjd-stats > div:last-child { border-right: 0; }
.pjd-stats span { display: block; font-size: 12.5px; color: var(--mute); }
.pjd-stats b { font-size: 22px; font-weight: 600; }
.pjd-meter { display: block; height: 4px; background: var(--line); margin-top: 4px; }
.pjd-meter i { display: block; height: 100%; background: var(--bar); }
.pjd-sec { margin-top: 30px; min-width: 0; }
.pjd-sec h2 { font-size: 18px; display: flex; align-items: baseline; gap: 12px; border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; margin-bottom: 10px; }
.pjd-sec h2 small { font-size: 13px; color: var(--mute); font-weight: 400; }
.pjd-sec h2 .link { font-size: 13px; font-weight: 400; margin-left: auto; }
.pjd-boards { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: 36px; align-items: start; }
/* the clipboard stays in view while the links scroll (wide screens) */
@media (min-width: 1101px) { .pjd-boards > .pjd-clips { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: thin; } } /* no overscroll-behavior: at its end the wheel goes on to the page, it never traps */
.pt-list { display: flex; flex-direction: column; }
.pt-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 150px; gap: 16px; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 0; text-align: left; }
.pt-row:hover .pt-name { text-decoration: underline; text-underline-offset: 3px; }
.pt-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-track { height: 8px; background: var(--line); }
.pt-track i { display: block; height: 100%; background: var(--bar); transition: width .6s var(--ease); }
.rm-row { grid-template-columns: minmax(0, 1fr) auto; }
.rm-row.late .pt-meta { color: var(--red); }
.jd-row .pt-name { color: var(--ink-2); }
.jd-row .pt-name::before { content: ''; display: inline-block; width: 10px; height: 5px; margin: 0 9px 3px 2px; border-left: 2px solid var(--done); border-bottom: 2px solid var(--done); transform: rotate(-45deg); }
/* next steps and the archive (justDoneBlock / archiveBlock in app.js) */
.jd-item { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.jd-item .pt-row { flex: 1; min-width: 0; border-bottom: 0; }
.jd-after { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-after { grid-column: 1 / -1; margin-top: -4px; }
.jd-next { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.jd-next:hover, .jd-next:focus-visible { background: var(--wash); border-color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .jd-item .jd-next, .ar-row .jd-next { opacity: .55; } .jd-item:hover .jd-next, .ar-row:hover .jd-next, .jd-next:focus-visible { opacity: 1; } }
.p-after, .r-after { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 13px; color: var(--ink-2); }
.r-after { padding: 6px 8px; background: var(--wash); }
.r-after span { flex: 1; min-width: 0; }
.r-after-x { border: 0; background: none; color: var(--mute); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pjd-arch .ar-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.pjd-arch .ar-q { flex: 1 1 220px; min-width: 0; }
.pjd-arch .ar-dates { display: inline-flex; align-items: center; gap: 6px; }
.pjd-arch .ar-dates[hidden] { display: none; }
.pjd-arch .ar-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ar-month { position: sticky; top: 0; z-index: 1; margin: 14px 0 2px; padding: 6px 0; background: var(--paper); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); }
.ar-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ar-day { flex: none; width: 34px; display: grid; justify-items: center; line-height: 1.1; }
.ar-day b { font-size: 17px; font-weight: 600; color: var(--ink); }
.ar-day small { font-size: 11px; color: var(--mute); }
.ar-main { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ar-main[disabled] { cursor: default; }
.ar-main:not([disabled]):hover .ar-title { text-decoration: underline; text-underline-offset: 3px; }
.ar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-main small { font-size: 12px; color: var(--mute); }
.ar-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.au .au-lead { margin: -2px 0 8px; font-size: 13px; color: var(--mute); max-width: 70ch; }
.au .au-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.au .au-q { flex: 1 1 200px; min-width: 0; }
.au .au-dates { display: inline-flex; align-items: center; gap: 6px; }
.au .au-dates[hidden] { display: none; }
.au-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.au-time { flex: none; width: 44px; padding-top: 1px; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.au-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.au-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.au-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; text-align: left; }
button.au-title { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
.au-kind { flex: none; font-size: 11.5px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.au-who { font-size: 12.5px; color: var(--mute); }
.au-who b { color: var(--ink); font-weight: 600; }
.au-proj { margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--line); }
.au-via { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; line-height: 18px; color: var(--ink); }
.au-row.delete .au-title { text-decoration: line-through; text-decoration-color: var(--mute); }
.au-ch { list-style: none; margin: 3px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--ink); }
.au-ch li { min-width: 0; overflow-wrap: anywhere; }
.au-ch li.q { color: var(--mute); font-style: italic; }
.au-f { color: var(--mute); }
.au-f::after { content: ':'; }
.au-ch s { color: var(--mute); text-decoration-thickness: 1px; }
.au-arrow { color: var(--mute); padding: 0 2px; }
.au-ch b { font-weight: 600; }
.pjt button.corner ~ button.corner { margin-left: 0; }
.audit-pane { max-width: 900px; }
.ar-recap { max-width: 640px; width: calc(100vw - 32px); }
.ar-text { max-height: 55vh; overflow: auto; margin: 10px 0; padding: 12px; background: var(--wash); color: var(--ink); font: 13px/1.5 var(--font); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 640px) { .jd-next span { display: none; } .jd-next { padding: 6px 8px; } }
.pt-row.done .pt-track i { background: var(--done); }
.pt-row.blocked .pt-track i { background: var(--red); }
.pt-meta { font-size: 12.5px; color: var(--mute); text-align: right; }
.pj-add { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.pj-add input { flex: 1; font-size: 14px; }
.pj-add input[name="title"] { flex: .6; }
.pj-add textarea { flex: 1; font-size: 14px; min-height: 44px; }
.pj-search { width: 100%; font-size: 13.5px; margin-bottom: 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.card { position: relative; border: 1.5px solid var(--line); padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, transform .2s var(--ease); overflow: hidden; }
.card:hover { border-color: var(--ink); }
.card.pinned { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--ink); }
.card-main { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-title { font-weight: 500; font-size: 14.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-main:hover .card-title { text-decoration: underline; text-underline-offset: 3px; }
.card-sub { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-acts { display: flex; flex-wrap: wrap; gap: 2px; opacity: .0; transition: opacity .2s; margin-left: -6px; }
.card:hover .card-acts, .card:focus-within .card-acts { opacity: 1; }
.card-acts button { background: none; border: 0; font-size: 12px; color: var(--mute); padding: 2px 6px; }
.card-acts button:hover { color: var(--ink); }
.clip-body { background: none; border: 0; padding: 0; text-align: left; cursor: copy; }
.clip-text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.copied { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bar); transform: scaleX(0); transform-origin: left; }
.card.did-copy::after { content: 'Copied'; position: absolute; right: 10px; top: 8px; font-size: 11.5px; font-weight: 500; background: var(--ink); color: var(--on-ink); padding: 1px 7px; animation: fade .2s; }
.inline-edit { width: 100%; font-size: 14px; border: 1.5px solid var(--ink); padding: 6px 8px; }

@media (max-width: 1100px) {
  .pjd-boards { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .top { align-items: stretch; }
  .top-row { flex-wrap: wrap; gap: 6px; }
  .top-row.sub { justify-content: space-between; }
  #btn-quick { display: none; }
  .brand { margin-right: 4px; }
  .brand svg { width: 17px; }
  .g-row.project .gl-pct { display: none; }
  .views button { padding: 6px 5px; }
  .tl-rail { margin-top: 120px; }
  .pj { grid-template-columns: 1fr; }
  .pj-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .pj-detail { padding: 8px 16px 60px; }
  .pjd-stats { grid-template-columns: repeat(2, 1fr); }
  .pt-row { grid-template-columns: 1fr 90px; }
  .pt-meta { display: none; }
  .ct { grid-template-columns: 1fr; gap: 6px; }
  .modal.qa { margin-top: 8vh; }
  .qa-input { font-size: 20px; }
}

/* ---------- licence (paywall.js) ---------- */
.ck-lic { position: fixed; left: 24px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 48px); font-size: 13px; color: var(--mute); background: var(--paper); padding: 6px 10px 6px 0; }
.ck-lic i { display: block; width: 22px; height: 6px; background: var(--bar); flex: none; }
.ck-lic.quiet i { background: var(--faint); }
.ck-lic.ro { color: var(--ink); border: 1.5px solid var(--ink); padding: 8px 12px 8px 0; }
.ck-lic.ro i { background: var(--red); }
.ck-lic .link { font-size: 13px; font-weight: 500; white-space: nowrap; }
.ck-lic-modal h3 { font-size: 15px; font-weight: 600; margin: 4px 0 8px; }
.ck-lic-modal section { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.ck-lic-modal textarea { font: 500 12.5px/1.5 ui-monospace, Menlo, monospace; word-break: break-all; }
.ck-pay-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-wait { font-size: 13.5px; color: var(--ink-2); }
body.ck-readonly #btn-new, body.ck-readonly #btn-quick { opacity: .45; }
@media (max-width: 820px) { .ck-lic { left: 16px; bottom: 12px; } }

/* language switch and island button in the top bar */
.lang-btn { height: 38px; padding: 0 6px; border: 0; background: transparent; font-size: 12.5px; color: var(--mute); letter-spacing: .02em; white-space: nowrap; }
.lang-btn b { color: var(--ink); font-weight: 600; }
.lang-btn:hover { color: var(--ink); }

/* ---------- shared (team) projects and name chips ---------- */
.pj-tag { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); border: 1px solid var(--gold); line-height: 1.4; }
.pj-row.shared .pj-bar { background: var(--shared-bar); }
.pj-row.shared:hover .pj-bar { background: var(--shared-bar-hi); }
.pj-row.shared.sel .pj-bar { background: var(--gold); }
.pj-row.shared .pj-n { color: var(--gold-text); }
.pj-on { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--ink); white-space: nowrap; }
.pj-on[hidden] { display: none; }
.pj-on i { width: 8px; height: 8px; border-radius: 50%; background: var(--ft-green); box-shadow: 0 0 0 2px var(--paper); }
.pj-on b { font-weight: 600; }
.pj-detail.shared .pjd-head { border-left: 6px solid var(--gold); padding-left: 18px; margin-left: -24px; }
.pj-detail.shared .pjd-stats { border-top-color: var(--gold); }
.pjd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--mute); }
.pjd-share .pj-tag { margin-left: 0; vertical-align: 0; }
.pjd-share strong { color: var(--ink); font-weight: 600; }
.pjd-share em { font-style: normal; }
.pjd-share em::before { content: '('; } .pjd-share em::after { content: ')'; }
.pjd-share .link { font-size: 13px; }
.pjd-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pjd-people .chip[data-uid]:not(.me) { cursor: pointer; }
.chip { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); background: var(--paper); font-size: 12.5px; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.chip > span { overflow: hidden; text-overflow: ellipsis; }
.chip i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.chip.me { border-color: var(--gold); }
.chip.me i { background: var(--gold); color: var(--on-gold); }
.chip.viewer i { background: var(--faint); color: var(--ink); }
.chip small { font-size: 11px; color: var(--mute); }
.chip.more { padding: 3px 10px; color: var(--mute); }
.card-by { display: flex; }
.card-by .chip { padding: 2px 8px 2px 2px; font-size: 11.5px; border-color: transparent; background: var(--wash); }
.card-by .chip i { width: 18px; height: 18px; font-size: 9px; }
@media (max-width: 820px) { .pj-detail.shared .pjd-head { margin-left: 0; padding-left: 14px; } .pj-detail.shared .pjd-actions { flex-wrap: wrap; } }

/* ---------- link cards: click to copy, icons to copy or open ---------- */
.card.lnk .card-main { background: none; border: 0; padding: 0 64px 0 0; text-align: left; cursor: copy; font: inherit; }
.card.lnk .card-main:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.card-ics { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
.ic { display: grid; place-items: center; width: 28px; height: 28px; background: none; border: 1px solid transparent; color: var(--mute); padding: 0; cursor: pointer; }
.ic:hover, .ic:focus-visible { color: var(--ink); border-color: var(--line); background: var(--wash); }
.card.lnk.did-copy::after { top: auto; bottom: 10px; }
@media (hover: none) { .card-acts { opacity: 1; } }
/* words that live in CSS, in Indonesian (i18n.js sets <html lang>) */
html:lang(id) .updates:empty::after { content: 'Belum ada update.'; }
html:lang(id) .card.did-copy::after { content: 'Tersalin'; }

/* ---------- choosing calendar events ---------- */
.pick-modal { width: min(640px, calc(100vw - 32px)); }
.pk-modes { display: grid; gap: 8px; margin: 4px 0 14px; }
.pk-modes label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); cursor: pointer; }
.pk-modes label:has(input:checked) { border-color: var(--gold); background: var(--wash); }
.pk-modes b { display: block; font-weight: 600; font-size: 14px; }
.pk-modes small { display: block; font-size: 12.5px; color: var(--mute); }
.pk-words { display: grid; gap: 4px; font-size: 13px; color: var(--mute); margin-bottom: 12px; }
.pk-words input { font-size: 14px; }
.pk-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pk-tools input { flex: 1; min-width: 0; font-size: 14px; }
.pk-list { max-height: min(46vh, 420px); overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pk-row:last-child { border-bottom: 0; }
.pk-t { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-m { font-size: 12px; color: var(--mute); white-space: nowrap; }
.pk-count { font-size: 12.5px; color: var(--mute); }
@media (max-width: 560px) { .pk-row { grid-template-columns: auto minmax(0, 1fr); } .pk-m { grid-column: 2; } }
.pk-modes label { flex-direction: row; }
.pk-modes input { flex: none; width: auto; margin: 3px 0 0; }
.pk-row input { width: auto; margin: 0; }
.pk-m em { font-style: normal; color: var(--gold-text); }
/* editing a link in place */
.card.lnk.editing > :not(.lnk-edit):not(.copied) { display: none; }
.lnk-edit { display: grid; gap: 8px; }
.lnk-edit label { display: grid; gap: 2px; font-size: 12px; color: var(--mute); }
.lnk-edit input { font-size: 14px; min-width: 0; width: 100%; }
.lnk-edit-acts { display: flex; justify-content: flex-end; gap: 6px; }
/* who sees a shared project */
.pjd-access { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 8px; font-size: 12.5px; color: var(--mute); }
.pjd-access .link { font-size: 12.5px; }
.acc-list { border-top: 1px solid var(--line); max-height: 46vh; overflow: auto; }
.acc-list .pk-row { grid-template-columns: auto auto minmax(0, 1fr); }
.acc-list .pk-m { text-align: right; }

/* ---------- team projects: tags, announcements, gallery ---------- */
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--mute); }
.tag-btn { border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 12.5px; padding: 3px 9px; cursor: pointer; }
.tag-btn:hover { border-color: var(--gold); background: var(--wash); }
mark.mention { background: transparent; color: var(--gold-text); font-weight: 600; }
mark.mention.me { background: var(--wash); box-shadow: inset 0 -2px 0 var(--gold); color: var(--ink); }
#update-tags .tagrow { margin: 6px 0 2px; }
.pj-ann .ann-new { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.pj-ann .ann-new input, .pj-ann .ann-new textarea { font-size: 14px; width: 100%; min-width: 0; }
.ann-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } /* on a 360 px phone the three controls ran 13 px past the screen */
.ann-foot .spacer { flex: 1; }
.ann-list { display: grid; gap: 10px; }
.ann { border: 1.5px solid var(--line); padding: 12px 14px; display: grid; gap: 6px; }
.ann.pinned { border-color: var(--gold); }
.ann.fresh { box-shadow: inset 4px 0 0 var(--gold); }
.ann header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ann header time { font-size: 12px; color: var(--mute); }
.ann h3 { font-size: 15.5px; font-weight: 600; margin: 0; }
.ann p { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ann-acts { display: flex; gap: 12px; }
.ann-acts .link, .pj-ann > .link { font-size: 12.5px; }
.pj-tag.new { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.pj-gal h2 .gal-add { margin-left: auto; font-size: 13px; font-weight: 400; cursor: pointer; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; min-height: 60px; border: 1.5px dashed transparent; transition: border-color .15s; }
.gal.over { border-color: var(--gold); background: var(--wash); }
.gal-i { position: relative; margin: 0; aspect-ratio: 1; background: var(--wash); overflow: hidden; }
.gal-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gal-open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.gal-open:hover img { transform: scale(1.04); }
.gal-by { position: absolute; left: 6px; top: 6px; pointer-events: none; }
.gal-by .chip { background: color-mix(in srgb, var(--paper) 90%, transparent); border-color: transparent; padding: 2px 7px 2px 2px; font-size: 11px; }
.gal-by .chip i { width: 18px; height: 18px; font-size: 9px; }
/* caption, date, place and tags on the photo; the picture stays visible above */
.gal-i figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 7px; display: grid; gap: 1px; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35) 65%, transparent); color: #fff; font-size: 12px; line-height: 1.3; }
.gal-i figcaption b { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-i figcaption small { font-size: 11px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.gal-i:hover .gal-acts, .gal-acts:focus-within { opacity: 1; }
.gal-acts button { width: 28px; height: 28px; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gal-acts button:hover { background: rgba(0,0,0,.8); }
@media (hover: none) { .gal-acts { opacity: 1; } }
.gal-acts .gal-more { display: none; }
/* phones: one ⋯ per photo (app.js data-ph-more); its pin, grip, details and remove open on a tap and wrap inside the tile */
@media (hover: none) and (max-width: 760px) {
  .gal-acts { left: 6px; flex-wrap: wrap; justify-content: flex-end; pointer-events: none; }
  .gal-acts button { pointer-events: auto; }
  .gal-acts .gal-more { display: grid; font-size: 16px; letter-spacing: 1px; }
  .gal-i:not(.acts-open) .gal-acts > :not(.gal-more) { display: none; }
  .gal-i.acts-open .gal-acts .gal-more { background: var(--ink); color: var(--on-ink); }
}
.gal-m { grid-column: 1 / -1; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--mute); letter-spacing: .02em; }
.gal-m:first-child { margin-top: 0; }
.gal-tools { display: grid; gap: 8px; margin: 0 0 12px; }
.gal-tools input[type=search] { max-width: 360px; font-size: 14px; }
.gal-tags, .ph-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gtag { border: 1px solid var(--line); background: none; color: var(--ink-2); font-size: 12.5px; padding: 3px 9px; cursor: pointer; }
.gtag small { color: var(--mute); font-size: 11px; margin-left: 2px; }
.gtag:hover { border-color: var(--ink); color: var(--ink); }
.gtag.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.gtag.on small { color: var(--on-ink); opacity: .75; }
.ph-prev { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ph-prev:empty { display: none; }
.ph-prev img { width: 64px; height: 64px; object-fit: cover; display: block; background: var(--wash); }
.ph-prev img:only-child { width: 100%; height: auto; max-height: 220px; object-fit: contain; }
.ph-prev span { font-size: 13px; color: var(--mute); }
.ann-foot label.inline { display: flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; color: var(--ink-2); }
.ann-foot label.inline input { width: auto; margin: 0; }

/* ---------- several receipts per claim ---------- */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rc-t { position: relative; border: 1.5px solid var(--line); background: var(--wash); aspect-ratio: 1; overflow: hidden; }
.rc-t.new { border-style: dashed; border-color: var(--gold); }
.rc-t.gone { opacity: .45; }
.rc-t.gone img { filter: grayscale(1); }
.rc-open { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.rc-open img { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.rc-file { flex: 1; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--mute); letter-spacing: .04em; }
.rc-open img, .rc-open .rc-file { pointer-events: none; }
.rc-t.on { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
.rc-open img.pdf { object-position: top center; background: #fff; }
/* the receipt in view beside the amounts: a photo as itself, a PDF drawn as its pages (6 Nov 2026) */
.cl-view { display: grid; gap: 6px; margin: 8px 0; }
.cl-vhead { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.cl-vhead b { flex: none; }
.cl-vname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); }
.cl-vhead .icon-btn { width: 30px; height: 30px; font-size: 18px; }
.cl-vpic { height: min(46vh, 440px); overflow: auto; display: grid; place-items: center; background: var(--wash); border: 1px solid var(--line); cursor: zoom-in; }
.cl-vpic img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cl-vpic.zoom { place-items: start; cursor: zoom-out; }
.cl-vpic.zoom img { max-width: none; max-height: none; width: 200%; }
.cl-vnote { color: var(--mute); }
.cl-view.min { margin: 4px 0; }
.rc-name { font-size: 10.5px; padding: 3px 6px; background: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.rc-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.rc-undo { position: absolute; inset: auto 4px 22px 4px; border: 0; background: var(--ink); color: var(--on-ink); font-size: 11.5px; padding: 5px 4px; cursor: pointer; }
.rc-note { font-size: 12.5px; color: var(--red); margin: 6px 0 0; }
.p-rc { position: relative; display: inline-block; }
.p-rc-n { position: absolute; right: -6px; bottom: -6px; background: var(--ink); color: var(--on-ink); font-size: 12px; padding: 3px 7px; transform: rotate(-5deg); }

/* Recycle bin */
.bin-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-height: min(58vh, 560px); overflow-y: auto; }
.bin-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bin-thumb { width: 44px; height: 44px; object-fit: cover; background: var(--line); }
.bin-kind { width: 44px; height: 44px; display: block; background: var(--line); position: relative; }
.bin-kind::after { content: ''; position: absolute; left: 12px; right: 12px; top: 19px; height: 6px; background: var(--bar); }
.bin-kind.k-projects::after, .bin-kind.k-tasks::after { background: var(--gold); }
.bin-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bin-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bin-main small { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-acts { display: flex; gap: 6px; }
.bin-empty { padding: 24px 0; text-align: center; }
@media (max-width: 760px) {
  .bin-list { max-height: none; }
  .bin-row { grid-template-columns: 40px minmax(0, 1fr); }
  .bin-thumb, .bin-kind { width: 40px; height: 40px; }
  .bin-acts { grid-column: 2; }
  .bin-acts .btn { flex: 1; min-height: 40px; }
}

/* Gantt on touch screens: swipes scroll, a long press moves (app.js holdToDrag); bigger ends to grab */
@media (pointer: coarse) {
  .g-bar, .g-rem { touch-action: pan-x pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .g-bar .h { width: 18px; top: -8px; bottom: -8px; }
  .g-bar .h.l { left: -9px; } .g-bar .h.r { right: -9px; }
}
/* a phone turned sideways: the chart takes the whole height (the page scrolls it into view) */
@media (max-height: 520px) and (orientation: landscape) {
  .top { position: absolute; } /* the corner bar scrolls away instead of covering the chart */
  .ck-hello { position: absolute !important; } /* the greeting goes with it, never floating over the page */
  .gantt { --row-h: 38px; --head-h: 52px; max-height: calc(100dvh - 8px); scroll-margin-top: 4px; }
  .g-row.project { height: 38px; }
  .g-bar { top: 11px; }
}

/* Link and snippet boards: icons, drag to rearrange, pins */
.card-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.card-row > .card-main, .card-row > .clip-body { flex: 1; min-width: 0; }
.card-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; line-height: 1; background: var(--wash); border: 1px solid var(--line); cursor: pointer; padding: 0; }
.card-icon.mono { font: 600 13px var(--font); color: var(--ink-2); }
.card-icon:hover { border-color: var(--ink); }
.card-grip { cursor: grab; touch-action: none; display: grid; place-items: center; width: 26px; color: var(--mute); }
.card-grip:active { cursor: grabbing; }
.card.moving { border-color: var(--gold); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); z-index: 3; opacity: .92; }
.card.lnk.pinned .card-title::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--gold); margin-right: 6px; vertical-align: 1px; }
.ic-pop { position: fixed; z-index: 70; width: 292px; background: var(--paper); border: 1.5px solid var(--ink); padding: 10px; display: grid; gap: 8px; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .4); }
.ic-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.ic-grid button { border: 1px solid transparent; background: none; font-size: 18px; line-height: 1; padding: 5px 0; cursor: pointer; min-width: 0; overflow: hidden; }
.ic-grid button:hover, .ic-grid button[aria-pressed="true"] { border-color: var(--ink); background: var(--wash); }
.ic-own { display: flex; gap: 6px; }
.ic-own input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--paper); padding: 6px 8px; font-size: 14px; }
.ic-auto { justify-self: start; font-size: 12.5px; }
@media (hover: none) { .card-grip { width: 34px; height: 30px; } }

/* Pay and kasbon (Ledger) */
.ledger-tabs { margin: 0 0 18px; }
.ledger-tabs .lt-more { color: var(--mute); }
.ledger-tabs .lt-more.few { padding-left: 12px; padding-right: 12px; letter-spacing: 1px; }
.lt-pop { width: 300px; gap: 2px; }
.lt-pop-p { margin: 2px 0 8px; font-size: 13px; color: var(--mute); }
label.lt-opt { flex-direction: row; color: var(--ink); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.lt-opt:hover { background: var(--wash); }
.lt-opt input { flex: none; width: auto; margin: 3px 0 0; accent-color: var(--ink); }
.lt-opt span { display: grid; gap: 2px; }
.lt-opt b { font-size: 14px; font-weight: 600; }
.lt-opt small { font-size: 12.5px; color: var(--mute); line-height: 1.35; }
.lt-opt.used { cursor: default; }
.pay-pane { display: grid; gap: 28px; }
.pay-empty { max-width: 560px; display: grid; gap: 12px; padding: 12px 0; }
.pay-empty p { margin: 0; color: var(--mute); }
.pay-group { display: grid; gap: 14px; }
.pay-proj { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; }
.pay-card { border: 1.5px solid var(--line); padding: 16px 18px; display: grid; gap: 12px; max-width: 880px; }
.pay-card.late { border-color: var(--red); }
.pay-card.inactive { opacity: .6; }
.pay-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pay-head b { font-size: 18px; font-weight: 600; display: block; }
.pay-head small { color: var(--mute); font-size: 13px; }
.pay-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-status { margin: 0; font-size: 13.5px; color: var(--mute); }
.pay-status.alert { color: var(--red); font-weight: 500; }
.pay-next { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-end; background: var(--wash); padding: 12px 14px; }
.pay-when { font-size: 13px; color: var(--ink-2); }
.pay-sum { display: grid; grid-template-columns: auto auto; gap: 2px 18px; margin: 0; font-size: 13.5px; }
.pay-sum dt { color: var(--mute); } .pay-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pay-sum .pay-total { color: var(--ink); font-weight: 600; font-size: 15px; border-top: 1px solid var(--line); padding-top: 4px; }
.pay-sum.big { font-size: 15px; background: var(--wash); padding: 12px 14px; }
.pay-sum.big .pay-total { font-size: 18px; }
.pay-loans { display: grid; gap: 4px; }
.pay-loans h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.pay-loans h3 small { color: var(--red); font-weight: 500; }
.pay-loan { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 10px; align-items: baseline; font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.pay-loan span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-loan .pl-mode, .pay-loan small { color: var(--mute); font-size: 12.5px; }
.pay-hist summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.pay-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.pay-table th, .pay-table td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.pay-table th { font-weight: 500; color: var(--mute); }
.pay-table .num { text-align: right; }
.pay-closed { font-size: 12.5px; color: var(--mute); margin: 8px 0 0; }
.pay-modal fieldset { border: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 8px; margin: 0; }
.pay-modal legend { font-size: 13px; color: var(--mute); padding: 0 4px; }
.pay-mode label { display: flex; gap: 8px; align-items: center; }
.pay-cut { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; }
.pay-cut span { display: grid; font-size: 13.5px; } .pay-cut small { color: var(--mute); font-size: 12px; }
.pay-cut input { text-align: right; }
.pay-warn { margin: 0; color: var(--red); font-size: 13px; min-height: 1em; }
.pay-live { margin: 0; color: var(--mute); font-size: 13px; }
.pay-modal .check { display: flex; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .pay-card { padding: 14px; }
  .pay-acts { width: 100%; } .pay-acts .btn { flex: 1; min-height: 42px; }
  .pay-next { display: grid; }
  .pay-loan { grid-template-columns: minmax(0, 1fr) auto; }
  .pay-loan .pl-mode, .pay-loan small { grid-column: 1; }
  .pay-cut { grid-template-columns: minmax(0, 1fr) 120px; }
}

/* readers in a team project: everything shows, nothing offers to change */
#pj-detail.ro .pj-add, #pj-detail.ro .card-acts > :not([data-ca="copy"]):not([data-la="copy"]), #pj-detail.ro .grip, #pj-detail.ro [data-ic] { display: none !important; }
.pjd-ro, .pjd-role { margin: 10px 0 0; font-size: 13px; color: var(--mute); }
.pjd-role .link { margin-left: 6px; font-size: 13px; }
/* owners and admins: each person's plan in the team (app.js planBlock) */
.pjd-plans { margin: 12px 0 0; font-size: 13px; max-width: 640px; }
.pjd-plans summary { cursor: pointer; color: var(--mute); list-style: none; display: inline-flex; gap: 6px; align-items: baseline; }
.pjd-plans summary::-webkit-details-marker { display: none; }
.pjd-plans summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.pjd-plans[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.pjd-plans summary b { font-weight: 500; color: var(--ink); }
.pjd-plans summary b.bad { color: var(--red); } .pjd-plans summary b.soon { color: var(--gold-text); }
.pp-list { display: grid; margin-top: 8px; border-top: 1px solid var(--line); }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.pp-st { color: var(--mute); white-space: nowrap; }
.pp-row > .chip { justify-self: start; max-width: 100%; }
.pp-row.bad .pp-st { color: var(--red); } .pp-row.soon .pp-st { color: var(--gold-text); }
.pp-foot { margin: 8px 0 0; color: var(--mute); }
@media (max-width: 560px) { .pp-row { grid-template-columns: minmax(0, 1fr) auto; } .pp-row .link { grid-column: 1 / -1; justify-self: start; } }
#drawer.ro #task-form button[type="submit"], #drawer.ro #task-delete, #drawer.ro #update-form { display: none !important; }
#drawer.ro #task-form :disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.rep-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 4px; font-size: 14px; color: var(--ink-2); }
.rep-custom input { width: 64px; text-align: center; }
.rep-custom select { width: auto; min-width: 110px; }
.rep-custom small { flex-basis: 100%; font-size: 12.5px; color: var(--mute); }
/* search and commands (Ctrl K / Cmd K) and the shortcuts list */
.ck-pal { border: 1.5px solid var(--ink); border-radius: 0; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: min(70vh, 620px); margin: 12vh auto auto; background: var(--paper); color: var(--ink); display: none; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .35); }
.ck-pal[open] { display: flex; }
.ck-pal::backdrop { background: color-mix(in srgb, var(--paper) 60%, transparent); }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1.5px solid var(--ink); }
.pal-in svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--mute); }
.pal-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 17px/1.3 var(--font); color: var(--ink); padding: 4px 0; }
.pal-in input::-webkit-search-cancel-button { display: none; }
.ck-pal kbd { font: 500 11px var(--font); border: 1px solid var(--line); background: var(--wash); color: var(--ink-2); padding: 1px 6px; margin-left: 4px; opacity: 1; }
.pal-x { flex: none; border: 0; background: none; padding: 6px 0 6px 6px; margin: -6px 0; color: var(--ink); font: 500 14px var(--font); cursor: pointer; }
.pal-x span { display: none; }
.pal-list { overflow: auto; padding: 6px 0; overscroll-behavior: contain; }
.pal-h { padding: 10px 16px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.pal-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 16px; color: var(--ink); cursor: pointer; border-left: 3px solid transparent; }
.pal-i:has(> .pal-ic) { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; }
.pal-ic { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 17px; line-height: 1; overflow: hidden; }
.pal-ic.em, .pal-ic:empty { background: none; }
.pal-ic.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pal-ic img.fav { width: 16px; height: 16px; }
.pal-i .pal-ic ~ .pal-t, .pal-i .pal-ic ~ small { grid-column: 2; }
.pal-i .pal-ic ~ kbd { grid-column: 3; }
.pal-list.no-ic .pal-ic { display: none; }
.pal-list.no-ic .pal-i { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.pal-list.no-ic .pal-i .pal-ic ~ .pal-t, .pal-list.no-ic .pal-i .pal-ic ~ small { grid-column: 1; }
.pal-list.no-ic .pal-i .pal-ic ~ kbd { grid-column: 2; }
.pal-i .pal-t { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i small { grid-column: 1; font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i kbd { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pal-i.hi, .pal-i:hover { background: var(--wash); border-left-color: var(--gold); }
.pal-i mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.pal-empty { padding: 14px 16px; color: var(--mute); font-size: 13.5px; margin: 0; }
.pal-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.pal-foot kbd { margin: 0 2px 0 0; }
.ck-keys { padding: 18px 20px 8px; }
.keys-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.keys-h h2 { font-size: 20px; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 20px; overflow: auto; }
.keys div { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.keys span { flex: none; min-width: 74px; }
.keys b { font-weight: 400; color: var(--ink-2); }
@media (max-width: 760px) { .ck-pal { margin-top: 8px; max-height: calc(100dvh - 16px); } .pal-foot { display: none; } }
@media (max-width: 760px), (pointer: coarse) { .pal-x kbd { display: none; } .pal-x span { display: block; min-height: 44px; line-height: 44px; padding: 0 4px 0 10px; text-decoration: underline; text-underline-offset: 3px; } .pal-x { margin: -12px -6px -12px 0; } } /* no Esc key there: a Close button with a full touch target */
/* the keys stay on phones (owner, 2 Oct 2026): pressing a row presses its key, so the same key is familiar on a laptop later */
.pal-i kbd { border-bottom-width: 2px; transition: transform .09s ease-out, background-color .09s, color .09s, border-color .09s; }
.pal-i.press kbd, .pal-i:active kbd { transform: translateY(2px); background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
@media (pointer: coarse) { .pal-i .pal-t { align-self: center; } .pal-i kbd { min-width: 30px; padding: 4px 8px; font-size: 13px; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .pal-i kbd { transition: none; } .pal-i.press kbd, .pal-i:active kbd { transform: none; } }

/* dropdowns: one look everywhere (the list itself is public/select.js on computers, the native picker on phones) */
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 26px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 2px center; background-size: 15px 15px; cursor: pointer; text-overflow: ellipsis; }
select:not([multiple]):not([size]):hover { border-bottom-color: var(--mute); }
select:not([multiple]):not([size])[aria-expanded="true"] { border-bottom-color: var(--ink); }
select option, select optgroup { background: var(--paper); color: var(--ink); }
select:disabled { opacity: .55; cursor: default; }
.place-row { display: flex; align-items: center; gap: 12px; }
.place-row input { flex: 1; }
.place-open { flex: none; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.p-place { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 6px; font-size: 14.5px; color: var(--ink-2); }
.p-place svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-place span { overflow-wrap: anywhere; }
@media (max-width: 640px) { .gal-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .gal-tags .gtag { flex: none; } }

/* ---------- standby: the full screen clock (B) ---------- */
html.in-standby, html.in-standby body { overflow: hidden; }
.standby { position: fixed; inset: 0; z-index: 88; background: var(--paper); color: var(--ink); display: grid; place-items: stretch center; outline: none; overflow: hidden; --sb-pets: 184px; }
.standby[hidden] { display: none; }
.standby.idle { cursor: none; }
/* the words sit centred in the room ABOVE the companions (owner's screenshot, 14 Oct 2026: on a short window the pets walked over the day's line, and the
   clock broke into two lines: its digits are inline-blocks in a flex row that was allowed to shrink). Sizes follow the height too. */
.sb-in { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; text-align: center; padding: 24px 24px calc(var(--sb-pets) + 12px + env(safe-area-inset-bottom)); max-width: 100vw; transition: translate 4s cubic-bezier(.4,0,.2,1); }
.sb-date { font-size: clamp(13px, min(1.6vw, 2.8vh), 24px); color: var(--mute); letter-spacing: .01em; }
.sb-clock { display: flex; align-items: flex-start; justify-content: center; line-height: .9; font-weight: 600; letter-spacing: -.035em; margin-top: .12em; white-space: nowrap; }
.sb-clock > * { flex: none; }
.sb-hm { font-size: clamp(64px, min(18vw, 27vh), 320px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-hm .rd, .sb-s .rd { display: inline-block; }
.sb-side { display: flex; flex-direction: column; align-items: flex-start; gap: .5em; margin-left: .35em; padding-top: .45em; font-size: clamp(18px, min(3.6vw, 5.4vh), 60px); }
.sb-s { color: var(--gold-text); font-weight: 500; letter-spacing: 0; line-height: 1; vertical-align: 0; white-space: nowrap; }
.sb-zone { font-size: .42em; font-weight: 600; letter-spacing: .12em; color: var(--mute); }
.sb-bar { flex: none; width: min(560px, 62vw); height: 4px; background: var(--line); margin: clamp(10px, 3vh, 34px) 0 clamp(8px, 2.4vh, 26px); overflow: hidden; }
.sb-bar i { display: block; height: 100%; background: var(--bar); transform-origin: left; transform: scaleX(0); transition: transform 1s linear; }
.sb-zones { font-size: clamp(13px, min(1.5vw, 2.6vh), 22px); color: var(--mute); white-space: pre; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.sb-line { font-size: clamp(15px, min(1.9vw, 3.4vh), 28px); margin-top: clamp(8px, 3vh, 32px); max-width: 32em; font-weight: 500; }
.sb-next { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3em .6em; margin-top: clamp(6px, 1.4vh, 12px); font-size: clamp(13px, min(1.5vw, 2.6vh), 21px); color: var(--mute); max-width: 36em; }
.sb-next:empty { display: none; }
.sb-next span { text-transform: uppercase; letter-spacing: .12em; font-size: .72em; font-weight: 600; color: var(--gold-text); }
.sb-next b { color: var(--ink); font-weight: 600; }
.sb-next em { font-style: normal; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22em; }
.sb-hint, .sb-set { transition: opacity .6s; }
.sb-hint { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); text-align: center; font-size: 12.5px; color: var(--mute); pointer-events: none; }
.standby.idle .sb-hint, .standby.idle .sb-set:not(:focus-within) { opacity: 0; }
.sb-x { display: none; }
.rc-drop .rc-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .rc-drop .rc-touch { display: inline; } .rc-drop .rc-desk { display: none; } } /* a phone cannot drop files */
@media (hover: none) { /* touch: a way out that is not a tap on empty space (with treats, laser or bubbles every tap is play) */
  .sb-x { display: grid; place-items: center; position: absolute; left: calc(12px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); width: 44px; height: 44px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 50%; z-index: 3; transition: opacity .6s; }
  .standby.idle .sb-x { opacity: .45; }
}
.sb-set { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 2; }
.sb-set-b { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: 500 13px var(--font); cursor: pointer; }
.sb-set-b:hover, .sb-set-b:focus-visible, .sb-set-b[aria-expanded="true"] { border-color: var(--ink); }
.sb-set-m { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--paper); border: 1.5px solid var(--ink); padding: 6px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); }
.sb-set-h { font-size: 12px; color: var(--mute); padding: 4px 10px 6px; }
.sb-set-g { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 10px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.sb-set-m button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: 400 14px var(--font); padding: 8px 10px; cursor: pointer; }
.sb-set-m button::before { content: ''; width: 12px; height: 4px; background: var(--line); flex: none; }
.sb-set-m button[aria-checked="true"]::before { background: var(--gold); }
.sb-set-m button:hover, .sb-set-m button:focus-visible { background: var(--wash); outline: none; }
.sb-set-m p { font-size: 12px; color: var(--mute); padding: 6px 10px 2px; max-width: 220px; }
@media (max-width: 820px) { .sb-side { margin-left: .2em; } }

/* companions (public/pets.js): line art in ink and gold, so every theme has them */
.sb-pets { position: absolute; left: 0; right: 0; bottom: calc(44px + env(safe-area-inset-bottom)); height: 140px; pointer-events: none; } /* --sb-pets on .standby = bottom + height */
.pet { position: absolute; left: 0; bottom: 0; will-change: transform; }
.pet-flip { position: relative; transform-origin: center bottom; }
.pet svg { display: block; overflow: visible; }
.pet svg * { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pet .body, .pet .fill, .pet .leg, .pet .puff, .pet .foot, .pet .ear { fill: var(--paper); }
.pet .tail, .pet .mark, .pet .whisk, .pet .collar, .pet .nose, .pet .mouth, .pet .wing, .pet .tuft, .pet .thread { fill: none; }
.pet .whisk, .pet .mark { stroke-width: 1.4; }
.pet .eye circle, .pet .nosedot { fill: var(--ink); stroke: none; }
.pet .bell, .pet .beak { fill: var(--gold); stroke-width: 1.4; }
.pet .collar { stroke: var(--gold); stroke-width: 2.4; }
.pet-blackcat .body, .pet-blackcat .fill, .pet-blackcat .leg { fill: var(--ink); }
.pet-blackcat .eye circle { fill: var(--gold); }
.pet-blackcat .whisk { stroke: var(--mute); }
.pet-dog .ear { fill: var(--gold); }
.pet-yarn .body { fill: var(--gold); }
.pet-yarn .ball { transform-box: fill-box; transform-origin: center; }
.pet .leg, .pet .tail, .pet .head, .pet .ear, .pet .eye { transform-box: fill-box; }
.pet .leg { transform-origin: 50% 10%; }
.pet .tail { transform-origin: 100% 100%; animation: petTail 2.6s ease-in-out infinite; }
.pet .tail.wag { animation: petWag .28s ease-in-out infinite alternate; }
.pet .eye { transform-origin: center; animation: petBlink 5.5s infinite; }
.pet .head { transform-origin: 20% 80%; transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.pet.walking .l1, .pet.walking .l3 { animation: petLegA .42s ease-in-out infinite alternate; }
.pet.walking .l2, .pet.walking .l4 { animation: petLegB .42s ease-in-out infinite alternate; }
.pet.running .leg { animation-duration: .16s !important; }
.pet.running .pet-flip { animation: petBob .16s ease-in-out infinite alternate; }
.pet.walking:not(.running) .pet-flip { animation: petBob .42s ease-in-out infinite alternate; }
.pet.sitting .l3, .pet.sitting .l4 { transform: translateY(-3px) scaleY(.6); }
.pet.sitting .body { transform: rotate(-9deg); transform-box: fill-box; transform-origin: 0% 100%; }
.pet.sitting .head { transform: translateY(-3px); }
.pet.grooming .head { animation: petGroom .5s ease-in-out infinite alternate; }
.pet.sleeping .leg { opacity: 0; }
.pet.sleeping .pet-flip svg { transform: translateY(6px) scaleY(.92); transform-origin: bottom; }
.pet.sleeping .eye { animation: none; transform: scaleY(.15); }
.pet.sleeping .head { transform: translate(-3px, 5px) rotate(8deg); }
.pet.sleeping .tail { animation-duration: 6s; }
.pet.stretching .pet-flip svg { animation: petStretch 1.6s ease-in-out; transform-origin: bottom; }
.pet-bunny .ear1 { transform-origin: 30% 100%; animation: petEar 3.2s ease-in-out infinite; }
.pet-bunny .ear2 { transform-origin: 30% 100%; animation: petEar 3.2s ease-in-out .4s infinite; }
.pet-z { position: absolute; left: 50%; top: -8px; font: 600 13px var(--font); color: var(--mute); opacity: 0; pointer-events: none; }
.pet-z i, .pet-z b { font-style: normal; font-weight: 600; position: absolute; left: 8px; top: -10px; font-size: 11px; }
.pet-z b { left: 16px; top: -20px; font-size: 9px; }
.pet.sleeping .pet-z { opacity: 1; animation: petZ 3s ease-in-out infinite; }
@keyframes petLegA { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes petLegB { from { transform: rotate(22deg); } to { transform: rotate(-22deg); } }
@keyframes petBob { from { translate: 0 0; } to { translate: 0 -2px; } }
@keyframes petTail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes petWag { from { transform: rotate(-16deg); } to { transform: rotate(18deg); } }
@keyframes petBlink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes petGroom { from { transform: rotate(10deg) translateY(2px); } to { transform: rotate(22deg) translateY(4px); } }
@keyframes petStretch { 0%, 100% { transform: none; } 40%, 60% { transform: scaleX(1.18) scaleY(.82); } }
@keyframes petEar { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-14deg); } }
@keyframes petZ { 0% { opacity: 0; transform: translateY(4px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
/* play on the standby screen (public/pets.js): pet, feed, a laser dot, bubbles */
.standby { touch-action: none; }
.sb-set { display: flex; gap: 8px; align-items: flex-start; }
.sb-play { display: flex; border: 1.5px solid var(--line); background: var(--paper); height: 36px; }
.sb-play[hidden] { display: none; }
.sb-play button { width: 38px; height: 33px; display: grid; place-items: center; border: 0; background: none; color: var(--mute); cursor: pointer; position: relative; }
.sb-play button + button { border-left: 1px solid var(--line); }
.sb-play button:hover, .sb-play button:focus-visible { color: var(--ink); background: var(--wash); outline: none; }
.sb-play button[aria-pressed="true"] { color: var(--ink); }
.sb-play button[aria-pressed="true"]::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 3px; background: var(--gold); }
.standby.play-hand .sb-pets .pet { pointer-events: auto; cursor: grab; }
.standby.play-hand .sb-pets .pet:active { cursor: grabbing; }
.standby.play-treat, .standby.play-bubbles { cursor: crosshair; }
.standby.play-laser, .standby.play-laser * { cursor: none; }
@media (max-width: 520px) { .standby { --sb-pets: 210px; } .sb-pets { bottom: calc(70px + env(safe-area-inset-bottom)); } .sb-hint { padding: 0 18px; font-size: 12px; } }
/* pixel art companions (pets.js PX): one <g class="fr"> per frame, shown by the act classes; steps, never smooth */
.sb-pets .c-k, .sb-pets .c-e { fill: var(--ink); } .sb-pets .c-p { fill: var(--paper); } .sb-pets .c-g, .sb-pets .c-y { fill: var(--gold); }
.sb-pets .c-r { fill: var(--note-pink); } .sb-pets .c-n { fill: var(--ft-green); }
.pet.px svg rect { stroke: none; }
.pet.px .fr { display: none; }
.pet.px .fr-stand { display: inline; }
.pet.px:is(.walking, .hopping, .sitting, .sleeping, .eating) .fr-stand { display: none; }
.pet.px.walking:not(.hopping) .fr-w1, .pet.px.walking:not(.hopping) .fr-w2 { display: inline; animation: pxStep .44s steps(1) infinite; }
.pet.px.walking:not(.hopping) .fr-w2 { animation-delay: -.22s; }
.pet.px.running:not(.hopping) .fr-w1, .pet.px.running:not(.hopping) .fr-w2 { animation-duration: .2s; }
.pet.px.running:not(.hopping) .fr-w2 { animation-delay: -.1s; }
.pet.px.hopping .fr-w1 { display: inline; }
.pet.px:is(.sitting, .eating):not(.walking, .hopping, .sleeping) .fr-sit { display: inline; }
.pet.px.sleeping .fr-sleep { display: inline; }
.pet.px:is(.grooming, .eating) .fr-sit { animation: pxNod .5s steps(1) infinite; }
.pet.px.loved .fr-sit { animation: pxNod .3s steps(1) infinite; }
.pet.px .c-e { animation: pxBlink 5.5s steps(1) infinite; }
.pet.px .c-y { animation: pxBlinkY 5.5s steps(1) infinite; }
.pet.px .fr-sleep rect { animation: none; }
.pet.px.walking .pet-flip, .pet.px.running .pet-flip { animation: none; }
.pet.px.sleeping .pet-flip svg, .pet.px.stretching .pet-flip svg { transform: none; animation: none; }
.pet.px .pet-z { font-family: var(--mono, ui-monospace, monospace); }
.pet-heart.px rect { stroke: none; }
.pet-heart.px .c-k { fill: var(--ink); } .pet-heart.px .c-g { fill: var(--gold); }
.pet-treat .tr-w { fill: var(--paper); }
@keyframes pxStep { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pxNod { 0% { transform: none; } 50% { transform: translateY(1px); } }
@keyframes pxBlink { 0% { fill: var(--ink); } 96% { fill: var(--lid, var(--paper)); } }
@keyframes pxBlinkY { 0% { fill: var(--gold); } 96% { fill: var(--lid, var(--ink)); } }
.pet-heart, .pet-purr, .pet-treat, .pet-bubble, .pet-pop, .pet-laser, .pet-crumb { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.pet-crumb i { position: absolute; width: 3px; height: 3px; background: var(--ink); }
.pet-crumb i + i { left: 6px; top: 3px; background: var(--gold); }
.pet-heart svg { display: block; overflow: visible; }
.pet-heart path { fill: var(--gold); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.pet-purr { font: 600 13px var(--font); color: var(--mute); white-space: nowrap; letter-spacing: .04em; }
.pet-treat svg { display: block; overflow: visible; }
.pet-treat svg * { stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pet-treat .tr-b { fill: var(--paper); } .pet-treat .tr-g { fill: var(--gold); } .pet-treat .tr-l { fill: none; } .pet-treat .tr-e { fill: var(--ink); stroke: none; }
.pet-bubble { border-radius: 50%; border: 1.5px solid var(--ink); opacity: .8;
  background: radial-gradient(circle at 32% 30%, var(--paper) 0 16%, transparent 19%), color-mix(in srgb, var(--gold) 12%, transparent); }
.pet-pop { width: 12px; height: 12px; }
.pet-pop i { position: absolute; left: 5px; top: -4px; width: 2px; height: 6px; background: var(--ink); transform-origin: 1px 10px; }
.pet-pop i:nth-child(2) { transform: rotate(90deg); } .pet-pop i:nth-child(3) { transform: rotate(180deg); } .pet-pop i:nth-child(4) { transform: rotate(270deg); }
.pet-laser i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent), 0 0 20px 6px color-mix(in srgb, var(--gold) 45%, transparent); animation: petLaser .7s ease-in-out infinite alternate; }
.pet-laser.dim i { opacity: .35; }
.pet.loved .eye { animation: none; transform: scaleY(.15); }
.pet.loved .head { transform: translateY(-3px) rotate(-7deg); }
.pet.loved .tail { animation-duration: .9s; }
.pet-dog.loved .tail.wag { animation-duration: .1s; }
.pet-bunny.loved .ear1, .pet-bunny.loved .ear2 { animation: none; transform: rotate(30deg); transition: transform .4s; }
.pet.eating .head { animation: petMunch .26s ease-in-out infinite alternate; }
.pet.full .pet-flip svg { animation: petFull 1.4s ease-in-out; transform-origin: bottom; }
.pet.full .eye { animation: none; transform: scaleY(.3); }
.standby.play-hand .pet:hover .head { transform: translateY(-2px); }
@keyframes petMunch { from { transform: translateY(4px) rotate(12deg); } to { transform: translateY(7px) rotate(18deg); } }
@keyframes petFull { 0%, 100% { transform: none; } 45% { transform: scaleX(1.08) scaleY(1.05); } }
@keyframes petLaser { from { scale: 1; } to { scale: 1.25; } }
@media (prefers-reduced-motion: reduce) { .standby { --sb-pets: 24px; } .sb-in { transition: none; } .sb-pets, .sb-play { display: none; } }
.modal .hint-group { margin-top: -10px; font-size: 13px; }

.lg-rem.lg-ghost { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--gold); }

/* ---------- phones: hold to switch project (genie list) ---------- */
.hp { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.hp-sheet { position: fixed; pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 24px 48px -20px rgba(0,0,0,.45); padding: 6px 0; will-change: clip-path, transform; }
.hp-h { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 8px 16px 6px; }
.hp-i { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 48px; justify-content: center; padding: 8px 16px 8px 18px; border: 0; background: none; color: inherit; font: 500 16px/1.25 var(--font); text-align: left; position: relative; }
.hp-i small { font-size: 12.5px; font-weight: 400; color: var(--mute); }
.hp-i.cur::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--gold); }
.hp-i.hi { background: var(--ink); color: var(--on-ink); }
.hp-i.hi small { color: var(--on-ink); opacity: .75; }
@media (pointer: coarse) { .views button, .pj-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }

/* gallery: sort, pin, arrange */
.gal-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.gal-sort select { width: auto; min-width: 150px; }
.gal-pin { position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: var(--gold); z-index: 1; pointer-events: none; }
.gal-i.pinned .gal-by { left: 11px; }
.gal-acts .gal-pinb[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.gal-acts .gal-grip { cursor: grab; touch-action: none; }
.gal-i.moving { opacity: .55; outline: 2px dashed var(--gold); outline-offset: -2px; }
.gal-i.moving .gal-acts { opacity: 1; }
@media (pointer: coarse) { .gal-acts { opacity: 1; } }
.gal-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.gal-tools > input[type=search] { flex: 1 1 220px; }
.gal-tools .gal-tags { flex: 1 0 100%; }
label.gal-sort { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 0; order: 2; }

/* a date or time taken from what was typed in "What" slides in with a gold underline */
.field input.took { animation: tookIn .7s cubic-bezier(.2,.8,.2,1); }
@keyframes tookIn { 0% { opacity: .15; transform: translateY(10px); box-shadow: inset 0 -2px 0 var(--gold); } 55% { opacity: 1; transform: none; box-shadow: inset 0 -2px 0 var(--gold); } 100% { box-shadow: inset 0 -2px 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .field input.took { animation: none; } }

/* gallery: masonry, each photo at its own shape, order kept left to right (row spans set by galMasonry in app.js) */
.gal-lay { display: inline-flex; border: 1.5px solid var(--line); }
.gal-lay button { width: 34px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--mute); cursor: pointer; }
.gal-lay button + button { border-left: 1px solid var(--line); }
.gal-lay button[aria-pressed="true"] { color: var(--ink); background: var(--wash); }
.gal-lay button:hover { color: var(--ink); }
.gal.masonry { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 4px; row-gap: 0; column-gap: 8px; align-items: start; }
.gal.masonry > * { margin-bottom: 8px; }
.gal.masonry .gal-i { aspect-ratio: auto; min-height: 60px; }
.gal.masonry .gal-open { height: auto; }
.gal.masonry .gal-open img { height: auto; object-fit: initial; }
/* the saved size gives each tile its shape before the picture loads (no jumping while scrolling) */
.gal.masonry .gal-i.has-ar { aspect-ratio: var(--ar); min-height: 0; }
.gal.masonry .gal-i.has-ar .gal-open, .gal.masonry .gal-i.has-ar .gal-open img { height: 100%; object-fit: cover; }
.gal.masonry .gal-m { margin: 6px 0 0; }
/* all-day reminders over several days */
.g-days { position: absolute; top: 5px; height: 8px; background: color-mix(in srgb, var(--gold) 38%, transparent); border-left: 2px solid var(--gold); z-index: 4; cursor: pointer; }
.g-days:hover { background: color-mix(in srgb, var(--gold) 55%, transparent); }
.allday { display: grid; gap: 10px; }
.allday .check { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.allday .check input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.allday-f[hidden] { display: none; }

/* suggestions under Project, Category and Group (comboFor in app.js): in the form's flow, never over the next field */
.pc-list { display: grid; margin-top: -6px; border: 1.5px solid var(--ink); background: var(--paper); max-height: 260px; overflow-y: auto; overscroll-behavior: contain; animation: pcIn .18s ease-out; }
.pc-list[hidden] { display: none; }
.pc-list button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 400 15px var(--font); text-align: left; cursor: pointer; }
.pc-list button:last-of-type { border-bottom: 0; }
.pc-list button small { font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.pc-list button:hover, .pc-list button.on { background: var(--wash); }
.pc-list button[aria-selected="true"] span { font-weight: 600; }
.pc-new { margin: 0; padding: 9px 12px; font-size: 12.5px; color: var(--gold-text); border-top: 1px solid var(--line); }
@keyframes pcIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pc-list { animation: none; } }

/* ---------- Links as a list, like a shared drive: type icon, full name, where it lives, who added it ---------- */
.lv-tog { margin-left: auto; display: inline-flex; border: 1px solid var(--line); align-self: center; }
.lv-tog button { background: none; border: 0; padding: 3px 7px; color: var(--mute); display: grid; place-items: center; }
.lv-tog button:hover { color: var(--ink); }
.lv-tog button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.pj-add select { flex: .5; font-size: 14px; min-width: 0; }
/* Links: adding is a box with a + (put something in), finding sits in the header beside List/Cards (it works on the list) */
.lnk-addbox { align-items: center; gap: 12px; padding: 8px 10px 8px 8px; background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.lnk-addbox input, .lnk-addbox select { background: transparent; }
.lnk-plus { flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: var(--gold); color: var(--on-gold); }
.lnk-find { margin-left: auto; align-self: center; display: inline-flex; flex-direction: row; flex-wrap: nowrap; margin-top: 0; letter-spacing: 0; text-transform: none; align-items: center; gap: 6px; padding: 0 10px; height: 30px; border: 1px solid var(--line); border-radius: 999px; color: var(--mute); font-size: 13.5px; font-weight: 400; width: min(240px, 40vw); }
.lnk-find:focus-within { border-color: var(--ink); color: var(--ink); }
.lnk-find svg { flex: none; width: 16px; height: 16px; }
.lnk-find input { flex: 1 1 0; width: auto; min-width: 0; border: 0; padding: 0; background: none; font-size: 13.5px; height: 28px; line-height: 28px; outline: none; -webkit-appearance: none; appearance: none; }
.lnk-find input::-webkit-search-decoration { -webkit-appearance: none; }
.lnk-find + .lv-tog { margin-left: 0; }
.ft { color: var(--ft-c, var(--mute)); background: color-mix(in srgb, var(--ft-c, var(--mute)) 11%, var(--paper)); border-color: transparent; }
.ft-green { --ft-c: var(--ft-green); } .ft-blue { --ft-c: var(--ft-blue); } .ft-amber { --ft-c: var(--ft-amber); }
.ft-red { --ft-c: var(--ft-red); } .ft-violet { --ft-c: var(--ft-violet); } .ft-mute { --ft-c: var(--mute); } .ft-ink { --ft-c: var(--ink-2); }
.card-icon.ft:hover { border-color: var(--ft-c); }
.lrows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.card.lrow { flex-direction: row; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); padding: 8px 6px 8px 2px; overflow: visible; }
.card.lrow:hover, .card.lrow:focus-within { background: var(--wash); }
.card.lrow.pinned { box-shadow: none; }
.card.lrow.moving { border: 1.5px solid var(--gold); background: var(--paper); }
.card.lrow .card-grip { width: 16px; margin-right: -6px; opacity: 0; transition: opacity .15s; }
.card.lrow:hover .card-grip, .card.lrow .card-grip:focus-visible { opacity: 1; }
.lr-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; padding: 0; font-size: 18px; line-height: 1; }
button.lr-ic { cursor: pointer; }
.lr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--ink); }
.lr-title { font-weight: 500; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.lr-main:hover .lr-title { text-decoration: underline; text-underline-offset: 3px; }
.lr-sub { font-size: 12px; color: var(--mute); line-height: 1.45; overflow-wrap: anywhere; }
.lr-sub em { display: block; font-style: normal; color: var(--ink-2); }
.lr-pin { display: inline-block; width: 8px; height: 8px; background: var(--gold); margin-right: 7px; vertical-align: 1px; }
.card-acts.lr-acts { flex-wrap: nowrap; margin-left: 0; align-items: center; }
.lr-acts .ic { display: grid; place-items: center; padding: 4px 6px; }
.card.lrow.editing { flex-direction: column; align-items: stretch; padding: 10px; }
.lsec-h { font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; margin: 18px 0 6px; }
.lsec:first-child .lsec-h { margin-top: 6px; }
.lsec-h small { color: var(--mute); font-weight: 400; }
.lsec-h .link { margin-left: auto; font-size: 12.5px; font-weight: 400; }
.lsec-h .inline-edit { font-size: 13px; padding: 3px 6px; max-width: 260px; }
.lsec-none { color: var(--mute); font-weight: 500; }
.lsec .cards { margin-bottom: 4px; }
.lr-recent { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 6px 8px; align-items: start; margin: 0 0 12px; font-size: 12px; color: var(--mute); }
.lr-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; border: 1px solid var(--line); padding: 3px 9px 3px 3px; text-decoration: none; color: var(--ink); font-size: 12.5px; }
.lr-chip:hover { border-color: var(--ink); }
.lr-chip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-chip i { width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; flex: none; font-size: 13px; }
.lr-recent > span { padding-top: 6px; }
.lr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lr-recent + .lr-recent { margin-top: -6px; }
.lr-chip small { flex: none; color: var(--mute); font-size: 11.5px; }
@media (max-width: 760px) {
  .lr-recent { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lr-recent > span { padding-top: 0; }
  .lr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .lr-chips::-webkit-scrollbar { display: none; }
  .lr-chip { flex: none; max-width: 70vw; }
}
.lr-more { display: none !important; }
@media (hover: none) {
  .card.lrow .card-grip { opacity: 1; }
  .card.lrow .lr-acts > [data-la="pin"], .card.lrow .lr-acts > [data-la="edit"], .card.lrow .lr-acts > [data-la="del"] { display: none; }
  /* a phone: Move waits behind ⋯ too (a held row still drags), so the title keeps the row's width */
  @media (max-width: 760px) { .card.lrow:not(.acts-open) .lr-acts > [data-la="move"] { display: none; } }
  .lr-more { display: grid !important; }
  .card.lrow.acts-open { flex-wrap: wrap; }
  .card.lrow.acts-open .lr-acts { flex-basis: 100%; justify-content: flex-end; }
  .card.lrow.acts-open .lr-acts > [data-la] { display: inline-block; }
}
#pj-detail.ro .lr-more { display: none !important; }

/* ---------- task board (Kanban): columns are statuses; limits warn, rules explain, age shows what is stuck ---------- */
.pjd-tasks h2 .link { margin-left: 0; }
.kb-facts { font-size: 12.5px; color: var(--mute); margin: -2px 0 10px; }
.kb-facts .link { font-size: 12.5px; }
.kb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kb-col { background: var(--wash); border: 1px solid var(--line); padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, box-shadow .15s; }
.kb-col.drop { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.kb-col.over { border-color: var(--red); }
.kb-head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.kb-head b { font-weight: 600; }
.kb-n { margin-left: auto; font-size: 12px; color: var(--mute); }
.kb-n.over { color: var(--on-red); background: var(--red); padding: 0 6px; font-weight: 600; }
.kb-rule { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.4; border-left: 2px solid var(--line); padding-left: 7px; }
.kb-warn { margin: 0; font-size: 12px; color: var(--red); line-height: 1.4; }
.kb-cards { display: flex; flex-direction: column; gap: 6px; }
.kb-card { position: relative; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: stretch; transition: border-color .15s; }
.kb-card:hover, .kb-card:focus-within { border-color: var(--ink); }
.kb-card.stale { box-shadow: inset 3px 0 0 var(--gold); }
.kb-card.moving { opacity: .35; }
.kb-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); border-color: var(--gold); opacity: .96; }
.kb-grip { flex: none; width: 18px; border: 0; background: none; color: var(--mute); cursor: grab; touch-action: none; display: grid; place-items: center; padding: 0; opacity: .5; }
.kb-card:hover .kb-grip, .kb-grip:focus-visible { opacity: 1; }
.kb-main { flex: 1; min-width: 0; background: none; border: 0; text-align: left; padding: 8px 10px 8px 4px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.kb.ro .kb-main { padding-left: 10px; }
.kb-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.kb-main:hover .kb-title { text-decoration: underline; text-underline-offset: 3px; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11.5px; color: var(--mute); }
.kb-meta .late { color: var(--red); }
.kb-who { color: var(--ink-2); }
.kb-card.stale .kb-age { color: var(--gold-text); font-weight: 500; }
.kb-track { height: 4px; display: block; }
.kb-empty, .kb-older { margin: 0; font-size: 12px; color: var(--mute); }
.kb-col.done .kb-title { color: var(--ink-2); }
.bd-lede { font-size: 13.5px; color: var(--ink-2); margin: 0 0 10px; }
.bd-row { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 10px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.bd-row legend { float: left; font-weight: 600; font-size: 14px; padding: 0; }
.bd-row label { display: grid; gap: 2px; font-size: 12px; color: var(--mute); }
.bd-row .bd-rule { grid-column: 1 / -1; }
.bd-row input { font-size: 14px; width: 100%; min-width: 0; }
@media (max-width: 900px) {
  .kb { grid-template-columns: repeat(4, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .kb-col { scroll-snap-align: start; }
  .kb-grip { width: 30px; opacity: 1; }
}

/* ---------- improvements (Kaizen, PDCA) ---------- */
.kz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.kz-col { display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--line); padding-top: 8px; }
.kz-col:nth-child(1) { border-top-color: var(--ft-blue); } .kz-col:nth-child(2) { border-top-color: var(--ft-amber); }
.kz-col:nth-child(3) { border-top-color: var(--ft-violet); } .kz-col:nth-child(4) { border-top-color: var(--ft-green); }
.kz-h { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.kz-h small { color: var(--mute); margin-left: auto; }
.kz-card { text-align: left; background: var(--paper); border: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.kz-card:hover { border-color: var(--ink); }
.kz-card.due { box-shadow: inset 3px 0 0 var(--gold); }
.kz-t { font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.kz-m { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11.5px; color: var(--mute); }
.kz-m .late { color: var(--gold-text); font-weight: 500; }
.kz-done { margin-top: 12px; font-size: 13px; }
.kz-done summary { cursor: pointer; color: var(--ink-2); }
.kz-list { display: flex; flex-direction: column; margin-top: 6px; }
.kz-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 12px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 8px 0; color: var(--ink); }
.kz-row b { font-size: 12px; font-weight: 600; color: var(--ft-green); }
.kz-row.dropped b { color: var(--mute); }
.kz-row em { grid-column: 2; font-style: normal; font-size: 12.5px; color: var(--mute); }
.kz-row:hover span { text-decoration: underline; text-underline-offset: 3px; }
.kz-steps { list-style: none; display: flex; gap: 4px; margin: -6px 0 0; padding: 0; font-size: 12px; }
.kz-steps li { flex: 1; text-align: center; padding: 4px 2px; border-bottom: 3px solid var(--line); color: var(--mute); }
.kz-steps li.past { border-bottom-color: var(--faint); color: var(--ink-2); }
.kz-steps li.on { border-bottom-color: var(--gold); color: var(--ink); font-weight: 600; }
.kz-stage-note { margin: -6px 0 0; font-size: 13px; color: var(--ink-2); background: var(--wash); padding: 8px 10px; }
.kz-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.kz-modal textarea { resize: vertical; }
@media (max-width: 900px) { .kz { grid-template-columns: repeat(4, 78%); overflow-x: auto; scroll-snap-type: x mandatory; } .kz-col { scroll-snap-align: start; } }
.kz-two label > input:not([type=checkbox]):not([type=radio]) { width: 100%; box-sizing: border-box; } /* a number field kept its own small width when the two stacked on a phone */
@media (max-width: 560px) { .kz-two { grid-template-columns: 1fr; } .kz-row { grid-template-columns: 1fr; } .kz-row em { grid-column: 1; } }

/* ---------- petty cash for an activity ---------- */
.cs-fund { border: 1.5px solid var(--line); padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.cs-fund.closed { background: var(--wash); }
.cs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cs-toggle { background: none; border: 0; padding: 0; display: inline-flex; align-items: baseline; gap: 8px; font-size: 16px; color: var(--ink); text-align: left; }
.cs-toggle::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(-45deg); transition: transform .2s; align-self: center; }
.cs-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.cs-tag { font-size: 11.5px; font-weight: 500; color: var(--mute); border: 1px solid var(--line); padding: 0 6px; }
.cs-holder { font-size: 12.5px; color: var(--mute); }
.cs-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 16px; }
.cs-figs div { display: flex; flex-direction: column; }
.cs-figs span { font-size: 12px; color: var(--mute); }
.cs-figs b { font-size: 18px; font-weight: 600; }
.cs-figs small { font-size: 11.5px; color: var(--mute); }
.cs-figs .neg b, .cs-figs .neg small { color: var(--red); }
.cs-warn { margin: 0; font-size: 12.5px; color: var(--red); }
.cs-scroll { overflow-x: auto; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--mute); border-bottom: 1.5px solid var(--ink); padding: 4px 8px 4px 0; white-space: nowrap; }
.cs-table td { border-bottom: 1px solid var(--line); padding: 7px 8px 7px 0; vertical-align: top; }
.cs-table .cs-in, .cs-table .cs-out, .cs-table .cs-bal, .cs-table th:nth-child(3), .cs-table th:nth-child(4), .cs-table th:nth-child(5) { text-align: right; white-space: nowrap; }
.cs-table .cs-d { white-space: nowrap; color: var(--ink-2); }
/* an entry's code, TC-0142: a press copies it with a link (migration *_cash_codes.sql) */
.cs-code { display: inline-block; margin: 0 6px 0 0; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--mute); font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.cs-code:hover, .cs-code:focus-visible { color: var(--ink); border-color: var(--ink); }
.cs-table .cs-d .cs-code { display: block; width: max-content; margin: 3px 0 0; }
.sh-side > .cs-code { margin-bottom: 6px; }
.cs-w b { font-weight: 500; display: block; }
.cs-w small { display: block; font-size: 11.5px; color: var(--mute); }
.cs-in { color: var(--ft-green); }
.cs-bal { font-weight: 500; }
tr.planned td { color: var(--mute); }
tr.planned .cs-in { color: var(--mute); font-style: italic; }
tr.over .cs-out { color: var(--red); font-weight: 600; }
.cs-x { white-space: nowrap; text-align: right; }
.cs-x .link { font-size: 12px; margin-left: 8px; }
.cs-rc { border: 1px solid var(--line); padding: 0; width: 32px; height: 32px; background: var(--wash); vertical-align: middle; }
.cs-rc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cs-acts .spacer { flex: 1; }
.cs-acts .link { font-size: 13px; }
.cs-file img { max-width: 120px; max-height: 90px; object-fit: cover; margin-top: 6px; border: 1px solid var(--line); }
.cs-st { border: 0 !important; padding: 0 !important; }

/* ---------- project page tabs: one part at a time, tools only where a project needs them ---------- */
.pjt-bar { position: relative; display: flex; align-items: flex-end; gap: 8px; margin: 24px 0 4px; border-bottom: 1.5px solid var(--ink); }
.pj-detail.shared .pjt-bar { border-bottom-color: var(--gold); }
.pjt { display: flex; gap: 2px; overflow: hidden; flex: 1; min-width: 0; }
.pjt button.over { display: none; }
/* More: the tabs that do not fit, Audit trail and Archive, and Tools for this project (app.js fitPjTabs) */
.pjt-more { flex: none; align-self: stretch; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px; padding: 8px 10px 7px; font-size: 14.5px; color: var(--mute); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; position: relative; }
.pjt-more:hover, .pjt-more[aria-expanded="true"] { color: var(--ink); }
.pjt-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.pjt-more svg { transition: transform .15s; }
.pjt-more.news::after { content: ''; position: absolute; top: 7px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.pjt-mmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 31; min-width: 220px; max-width: calc(100vw - 32px); background: var(--paper); border: 1.5px solid var(--ink); padding: 6px; display: grid; gap: 2px; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .4); }
.pjt-mmenu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.pjt-mmenu button span { flex: 1; }
.pjt-mmenu button:hover, .pjt-mmenu button:focus-visible { background: var(--wash); outline: none; }
.pjt-mmenu button.cur { font-weight: 600; }
.pjt-mmenu button.tools { color: var(--mute); }
.pjt-mmenu button.tools:hover { color: var(--ink); }
.pjt-mmenu small { font-size: 11.5px; color: var(--mute); background: var(--wash); border: 1px solid var(--line); padding: 0 6px; line-height: 17px; }
.pjt-mmenu small.hot { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 700; border-radius: 10px; }
.pjt-mmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.pjt::-webkit-scrollbar { display: none; }
.pjt button { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px; padding: 8px 12px 7px; font-size: 14.5px; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .15s, border-color .15s; }
.pjt button:hover { color: var(--ink); }
.pjt button.corner { margin-left: auto; }
.pjt button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.pj-detail.shared .pjt button[aria-selected="true"] { border-bottom-color: var(--gold); }
.pjt button small { font-size: 11.5px; font-weight: 500; color: var(--mute); background: var(--wash); border: 1px solid var(--line); padding: 0 6px; line-height: 17px; }
.pjt-new { font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--gold); color: var(--on-gold); min-width: 19px; height: 19px; padding: 0 6px; line-height: 19px; border-radius: 10px; text-align: center; box-sizing: border-box; }
/* unread chat (3 Oct 2026): the tab stands out, and the count follows you to the project list and the header */
.pjt button.has-new { color: var(--ink); font-weight: 600; }
.pjt button.has-new .pjt-new { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); }
.pj-chat, .nav-new { font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--gold); color: var(--on-gold); min-width: 17px; height: 17px; padding: 0 5px; line-height: 17px; border-radius: 9px; text-align: center; box-sizing: border-box; display: inline-block; }
.pj-chat { margin-left: 7px; vertical-align: 1px; }
.views button { position: relative; }
.nav-new { position: absolute; top: -3px; right: -9px; }
.qa-vis { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; border: 1px solid var(--line); background: none; color: var(--ink-2); padding: 0 8px; height: 22px; cursor: pointer; }
.qa-vis svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qa-vis.on { border-color: var(--ink); color: var(--ink); }
.qa-vis:hover, .qa-vis:focus-visible { border-color: var(--ink); color: var(--ink); }
.pjt-add { flex: none; background: none; border: 1px dashed var(--faint); color: var(--mute); display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; margin-bottom: 6px; font-size: 13px; }
.pjt-add:hover, .pjt-add[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); border-style: solid; }
.pjt-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(340px, calc(100vw - 32px)); background: var(--paper); border: 1.5px solid var(--ink); padding: 12px; display: grid; gap: 8px; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .4); }
.pjt-menu p { margin: 0; font-size: 12.5px; color: var(--mute); }
.pjt-tool { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); cursor: pointer; }
.pjt-tool:hover { border-color: var(--ink); }
.pjt-tool input { width: auto; margin: 3px 0 0; flex: none; }
.pjt-tool span { display: flex; flex-direction: column; gap: 2px; }
.pjt-tool b { font-size: 14px; font-weight: 600; }
.pjt-tool small { font-size: 12.5px; color: var(--mute); line-height: 1.4; }
.pjt-panel > .pjd-stats:first-child, .pjt-panel > .pj-start + .pjd-stats { margin-top: 18px; }
.pjt-panel > .pjd-sec:first-child, .pjt-panel > .pjd-boards:first-child > .pjd-sec, .pjt-panel > .pj-gal:first-child { margin-top: 18px; }
.pjt-panel .pjd-sec + .pjd-sec { margin-top: 36px; }
.pj-start { margin-top: 18px; padding: 16px 18px; background: var(--wash); border: 1px solid var(--line); }
.pj-start h2 { font-size: 16px; margin: 0 0 4px; }
.pj-start p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }
.pj-start-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 16px; }
.ov-tile { text-align: left; background: var(--paper); border: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.ov-tile:hover { border-color: var(--ink); }
.ov-tile span { font-size: 11.5px; color: var(--mute); }
.ov-tile b { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.ov-tile em { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.ov-tile em.neg { color: var(--red); }
.pt-meta.late { color: var(--red); }
.pjd-team .pjd-people { margin-top: 4px; }
@media (max-width: 700px) {
  .pjt-bar { margin-top: 16px; }
  .pjt button, .pjt-more { padding: 8px 10px 7px; font-size: 14px; }
  .pjt-mmenu button { padding: 12px 12px; font-size: 15px; }
  .pjt-add span { display: none; }
  .pjt-add { padding: 5px 7px; }
}
.pjt.more-r { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
.pjt.more-l { -webkit-mask-image: linear-gradient(to left, #000 80%, transparent); mask-image: linear-gradient(to left, #000 80%, transparent); }
.pjt.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); }
/* the Ledger's parts on a phone (app.js edgeFade): a short fade, so the chosen dark tab is not washed out */
.ledger-tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.ledger-tabs.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.ledger-tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ---------- Calendar (month) mode of the Gantt page ---------- */
.cal-nav { display: inline-flex; align-items: center; gap: 4px; }
.cal-nav b { min-width: 150px; text-align: center; font-size: 15px; font-weight: 600; }
.cal-nav .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal { --cal-dn: 28px; --cal-lane: 22px; }
.cal-grid { border-top: 1.5px solid var(--ink); }
.cal-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd span { font-size: 12px; color: var(--mute); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cal-wd span.wk { color: var(--dim); }
.cal-week { position: relative; height: calc(var(--cal-dn) + var(--lanes) * var(--cal-lane) + 8px); border-bottom: 1px solid var(--line); }
.cal-days { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day { position: relative; border-right: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.cal-day:last-child { border-right: 0; }
.cal-day.wk { background: var(--wkend); }
.cal-day.other .cal-dn { color: var(--dim); }
.cal-day:hover { background: var(--wash); }
.cal-day.sel { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal-day.drop { background: var(--wash); box-shadow: inset 0 0 0 2px var(--gold); }
.cal-dn { position: absolute; left: 4px; top: 3px; min-width: 24px; height: 22px; padding: 0 5px; border: 0; background: none; font-size: 13px; color: var(--ink-2); display: grid; place-items: center; }
.cal-day.today .cal-dn { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.cal-has { display: none; }
.cal-add { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border: 0; background: none; color: var(--mute); display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { color: var(--ink); background: var(--paper); }
.cal-lanes { position: absolute; left: 0; right: 0; top: var(--cal-dn); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: var(--cal-lane); pointer-events: none; padding: 0 1px; }
.cal-it, .cal-more { pointer-events: auto; margin: 1px 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 18px; text-align: left; border: 0; padding: 0 6px; color: var(--ink); background: none; }
.cal-it.bar { background: var(--wash); border-left: 3px solid var(--bar); }
.cal-it.k-task.st-active { background: color-mix(in srgb, var(--bar) 14%, var(--paper)); }
.cal-it.k-task.st-done { border-left-color: var(--done); color: var(--mute); text-decoration: line-through; text-decoration-color: var(--faint); }
.cal-it.k-task.st-blocked { border-left-color: var(--red); background: var(--blocked-bg); }
.cal-it.k-reminder.allday, .cal-it.k-reminder.bar { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--paper)); }
.cal-it.k-event.bar { border-left-color: var(--ft-blue); background: color-mix(in srgb, var(--ft-blue) 12%, var(--paper)); }
.cal-it.dot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 5px; vertical-align: 0; }
.cal-it.dot.k-event::before { background: var(--ft-blue); }
.cal-it.ghost { opacity: .6; }
.cal-it.cl { border-left-width: 0; margin-left: 0; }
.cal-it.cr { margin-right: 0; }
.cal-it:hover, .cal-it:focus-visible { outline: 1.5px solid var(--ink); outline-offset: -1px; }
.cal-it[data-cdrag] { cursor: grab; touch-action: none; }
.cal-it.moving { position: relative; z-index: 5; cursor: grabbing; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4); background: var(--paper); }
.cal-more { color: var(--mute); font-weight: 500; }
.cal-more:hover { color: var(--ink); text-decoration: underline; }
.ahead-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.ahead-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.ahead-chip b { font-weight: 500; }
.ahead-chip i { font-style: normal; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--wash); font-size: 12px; text-align: center; }
.ahead-chip:hover, .ahead-chip:focus-visible { border-color: var(--ink); }
.ahead-day { scroll-margin-top: 90px; }
.ahead-day.lit h3 b { box-shadow: inset 0 -0.5em 0 color-mix(in srgb, var(--gold) 35%, transparent); }
.ahead-day h3 { flex-wrap: wrap; }
.ahead-day h3 b, .ahead-day h3 .link { white-space: nowrap; }
@media (hover: none) { .ahead-chip { min-height: 42px; padding: 8px 16px; font-size: 15px; } }
.ahead { margin-top: 26px; width: 100%; max-width: 560px; }
.ahead-h { border-bottom: 1.5px solid var(--ink); }
.ahead-fold { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 0 0 6px; font: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); cursor: pointer; text-align: left; }
.ahead-fold span { flex: 1; }
.ahead-fold svg { transition: rotate .2s; }
.ahead.folded .ahead-fold svg { rotate: -90deg; }
.ahead-day h3 { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 2px; font-size: 16px; }
.ahead-day h3 small { font-size: 12px; font-weight: 500; color: var(--mute); }
.ahead-day h3 .spacer { flex: 1; }
.ahead-day h3 .link { font-size: 13px; font-weight: 400; }
.ahead.folded .ahead-day h3 { margin-top: 10px; }
.ahead .pt-row { width: 100%; cursor: pointer; font: inherit; color: inherit; }
.ahead .p-meta { margin: 6px 0 0; }
.ahead-more { display: inline-block; margin-top: 8px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ahead-fold svg { transition: none; } }
.cal-agenda { margin-top: 22px; }
.cal-agenda h2 { font-size: 17px; display: flex; align-items: baseline; gap: 14px; border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; margin: 0 0 6px; }
.cal-agenda h2 .spacer { flex: 1; }
.cal-agenda h2 .link { font-size: 13px; font-weight: 400; }
.cal-row { grid-template-columns: minmax(0, 1fr) auto; }
.cal-sw { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--bar); vertical-align: 0; }
.cal-row.k-reminder .cal-sw { background: var(--gold); border-radius: 50%; }
.cal-row.k-reminder.allday .cal-sw { border-radius: 0; }
.cal-row.k-event .cal-sw { background: var(--ft-blue); border-radius: 50%; }
.cal-row.st-blocked .cal-sw { background: var(--red); }
.cal-row.st-done .cal-sw { background: var(--done); }
@media (max-width: 700px) {
  .cal { --cal-dn: 26px; --cal-lane: 7px; }
  .cal-nav b { min-width: 0; font-size: 14px; }
  .cal-nav .btn { padding: 6px 10px; }
  .cal-wd span { padding: 6px 2px; text-align: center; }
  .cal-dn { left: 50%; transform: translateX(-50%); }
  .cal-add { display: none; }
  .cal-it, .cal-more { font-size: 0; line-height: 0; padding: 0; margin: 1px 2px; height: 5px; pointer-events: none; }
  .cal-it.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); justify-self: center; }
  .cal-it.dot.k-event { background: var(--ft-blue); }
  .cal-it.dot::before { display: none; }
  .cal-it.bar { border-left: 0; background: var(--bar); }
  .cal-it.k-reminder.allday { background: var(--gold); }
  .cal-it.k-event.bar { background: var(--ft-blue); }
  .cal-it.k-task.st-blocked { background: var(--red); }
  .cal-it.k-task.st-done { background: var(--done); }
  .cal-more { height: 6px; }
  .cal-more::after { content: ''; display: block; width: 4px; height: 4px; margin: 1px auto; background: var(--mute); border-radius: 50%; }
  .cal-agenda h2 { flex-wrap: wrap; }
}

/* ---------- petty cash on the Ledger page ---------- */
.cash-pane { margin-top: 18px; }
.cash-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 24px; border-top: 1.5px solid var(--ink); padding: 12px 0; margin-bottom: 10px; }
.cash-sum div { display: flex; flex-direction: column; }
.cash-sum span { font-size: 12px; color: var(--mute); }
.cash-sum b { font-size: 22px; font-weight: 600; }
.cash-sum small { font-size: 12px; color: var(--mute); }
.cash-f { margin: 4px 0 16px; }
.cash-f button { display: inline-flex; gap: 6px; align-items: baseline; }
.cash-f .ls-n { font-size: 11.5px; color: inherit; opacity: .7; }
.cash-empty { border: 1px dashed var(--faint); padding: 22px; max-width: 640px; }
.cash-empty h2 { font-size: 18px; margin: 0 0 6px; }
.cash-empty p { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.cs-where { flex-basis: 100%; font-size: 12px; color: var(--mute); }
.cs-fund.team { border-left: 4px solid var(--gold); }
.cs-invite { display: flex; gap: 8px; align-items: flex-end; background: var(--wash); padding: 10px; }
.cs-invite label { flex: 1; }
/* who is in the fund's team, and who was invited and has not answered yet */
.cs-people { border: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 6px; }
.cs-people .pp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.cs-people .pp-h + .p-meta { margin: 0; }
.cs-people .pp-list { max-height: 190px; }
.cs-people .pp-list.wait li i { background: var(--wash); color: var(--ink); border: 1px dashed var(--line); }
.cs-roles { display: grid; gap: 6px; }
.cs-also { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--wash); font-size: 13.5px; }
.rp-body { font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; min-height: 180px; }
.rp-acts { flex-wrap: wrap; row-gap: 8px; }
.cs-also b { font-size: 14px; } .cs-also p { margin: 0; color: var(--mute); overflow-wrap: anywhere; }
.cs-rolepick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; border: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.cs-rolepick:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.cs-rolepick input { margin-top: 3px; }
.cs-rolepick b { display: block; font-size: 14px; }
.cs-rolepick span { color: var(--mute); } .cs-rolepick span b { color: var(--ink); }
.cs-rc span { font-size: 10px; font-weight: 600; color: var(--ink-2); }
.rep-custom { flex-direction: column; align-items: stretch; }
.rep-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rep-mode { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); margin: 0; }
.rep-mode input { width: auto !important; margin: 0; }
.rep-next { display: block; font-size: 12.5px; color: var(--mute); margin: -4px 0 6px; }

/* ---------- announcement PDFs: the card and the flip book (public/flip.js) ---------- */
.ann-attach { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ann-docname { font-size: 13px; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-docname small { color: var(--mute); }
.ann-book { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid var(--line); background: var(--wash); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ann-book:hover:not(:disabled) { border-color: var(--ink); }
.ann-book:disabled { cursor: default; opacity: .7; }
.ann-cover { flex: none; width: 64px; height: 64px; background: var(--paper) center / contain no-repeat; border: 1px solid var(--line); position: relative; }
.ann-cover:not(.on)::after { content: 'PDF'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ft-red); }
.ann-book-t { display: grid; min-width: 0; } .ann-book-t b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-book-t small { font-size: 12.5px; color: var(--mute); }

/* the flip book lives in flip.css (loaded right after this file) */

/* site icons on plain web links (favicon / linkGlyph in app.js) */
img.fav { display: block; width: 20px; height: 20px; object-fit: contain; border-radius: 3px; }
.lr-chip img.fav, .card-icon img.fav { width: 16px; height: 16px; }
.lr-chip i img.fav { width: 14px; height: 14px; }
/* a claim opened from Claude's link: the receipt picker is where to look */
label.pulse { outline: 2px solid var(--gold); outline-offset: 4px; animation: rcPulse 1.2s ease-in-out 3; }
@keyframes rcPulse { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { label.pulse { animation: none; } }
/* receipts on a claim: one wide drop area (click to choose, drop, or paste), several files at once */
.rc-drop { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 4px 0 8px; padding: 14px 16px; border: 1.5px dashed var(--line); background: var(--wash); color: var(--mute); cursor: pointer; font-size: 13px; line-height: 1.4; transition: border-color .15s, background-color .15s; }
.rc-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rc-drop svg { flex: none; color: var(--ink); }
.rc-drop-t { flex: 1; min-width: 0; }
.rc-drop-t b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.rc-drop-n { flex: none; font-variant-numeric: tabular-nums; }
.rc-drop:hover, .rc-drop:focus-within { border-color: var(--ink); }
.rc-drop:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.rc-drop.over { border-color: var(--gold); border-style: solid; background: color-mix(in srgb, var(--gold) 12%, var(--paper)); }
.rc-drop.full { opacity: .6; }
/* amounts typed as 150rb, 1,5jt, 2.5m...: the amount in words under the field (rpHint in app.js) */
.rp-hint { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
input.rp-bad { border-bottom-color: var(--red) !important; }
input.rp-bad + .rp-hint { color: var(--red); }
/* the account number under a transfer note (reminder pop and panel): one tap copies the digits */
.acct-copy { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.acct-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acct-copy small { color: var(--mute); font-weight: 500; }
.acct-row { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 0 8px; }
.acct-copy span { overflow-wrap: anywhere; }

/* ---- Links tab, compact (30 Sep 2026): one line per title, actions float over the row on hover, sections fold ---- */
.card.lrow { padding: 5px 6px 5px 2px; position: relative; }
.lr-ic { width: 30px; height: 30px; }
.lr-title, .lr-sub, .lr-sub em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.lr-sub em { display: inline; margin-left: 6px; }
.lr-sub em::before { content: '· '; color: var(--mute); }
@media (hover: hover) {
  .card.lrow .lr-acts { position: absolute; right: 0; top: 0; bottom: 0; padding: 0 4px 0 28px; background: linear-gradient(to right, transparent, var(--wash) 24px); }
  .card.lrow:not(:hover):not(:focus-within) .lr-acts { pointer-events: none; }
  .lsec-h .link { opacity: 0; transition: opacity .15s; }
  .lsec:hover .lsec-h .link, .lsec-h .link:focus-visible { opacity: 1; }
}
.lsec-h { margin: 14px 0 4px; align-items: center; }
.lsec-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; background: none; border: 0; padding: 2px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lsec-t:hover span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
.lsec-chev { flex: none; width: 7px; height: 7px; border-right: 1.6px solid var(--mute); border-bottom: 1.6px solid var(--mute); transform: translateY(-2px) rotate(45deg); transition: transform .18s var(--ease); }
.lsec.folded .lsec-chev { transform: translateY(0) rotate(-45deg); }
.lsec-peek { min-width: 0; flex: 1; font-weight: 400; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsec.folded > .lrows, .lsec.folded > .cards { display: none; }
.lsec.folded .lsec-h { margin-bottom: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
/* moving links (2 Oct 2026): the whole row drags, sections are targets, the page scrolls near its edges */
.card.lrow[data-lid], .card.crow { cursor: default; }
.card.lrow .lr-main { -webkit-touch-callout: none; -webkit-user-drag: none; }
html.ck-dragging, html.ck-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
html.ck-dragging .card.lrow:hover { background: transparent; }
html.ck-dragging .lr-acts, html.ck-dragging .lsec-h .link { visibility: hidden; }
.card.lifted { opacity: .35; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 6px 12px 6px 8px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .55); font-size: 13.5px; font-weight: 500; will-change: transform; }
.drag-ghost > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drag-ghost .lr-ic, .drag-ghost .card-icon { width: 22px; height: 22px; flex: none; border: 0; background: none; padding: 0; display: grid; place-items: center; }
.drop-line { position: fixed; z-index: 94; pointer-events: none; background: var(--gold); border-radius: 2px; }
.drag-on .lsec.drop:not(.lsec-new) { outline: 1.5px solid var(--gold); outline-offset: 5px; }
.drag-on .lsec.drop > .lsec-h { background: var(--wash); }
.lsec-new { display: none; margin-top: 14px; border: 1.5px dashed var(--line); padding: 12px 14px; color: var(--mute); font-size: 13px; }
.drag-on .lsec-new, .lsec-new.asking { display: block; }
.lsec-top { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 10px 0 -6px; }
.so-modal { width: min(440px, calc(100vw - 24px)); }
.so-lede { margin: 0 0 10px; font-size: 13px; color: var(--mute); }
.so-list { list-style: none; margin: 0 0 14px; padding: 0; max-height: min(60vh, 520px); overflow-y: auto; border: 1px solid var(--line); touch-action: pan-y; }
.so-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 2px 6px 2px 4px; border-bottom: 1px solid var(--line); background: var(--paper); cursor: grab; user-select: none; -webkit-user-select: none; }
.so-row:last-child { border-bottom: 0; }
.so-row.moving { background: var(--wash); box-shadow: inset 3px 0 0 var(--gold); cursor: grabbing; }
.so-grip { flex: none; display: grid; place-items: center; width: 28px; height: 34px; color: var(--mute); touch-action: none; }
.so-n { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-row small { flex: none; font-size: 12px; color: var(--mute); min-width: 18px; text-align: right; }
.so-row .ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--ink-2); cursor: pointer; padding: 0; }
.so-row .ic:hover, .so-row .ic:focus-visible { border-color: var(--ink); color: var(--ink); }
.so-row .ic:disabled { opacity: .25; cursor: default; border-color: transparent; }
@media (pointer: coarse) { .so-row { min-height: 46px; } .so-row .ic { width: 38px; height: 38px; } }
.lsec-top .inline-edit { font-size: 14px; width: min(320px, 100%); }
.lsec-add { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); background: none; border: 1px dashed var(--line); padding: 5px 11px; cursor: pointer; }
.lsec-add:hover, .lsec-add:focus-visible { border-color: var(--ink); border-style: solid; color: var(--ink); }
.lsec-empty { margin: 0; padding: 10px 12px; font-size: 13px; color: var(--mute); border: 1px dashed var(--line); }
.lsec.drop .lsec-empty { border-color: var(--gold); background: var(--wash); color: var(--ink); }
.lsec.folded .lsec-empty { display: none; }
.lsec-new.drop { border-color: var(--gold); border-style: solid; color: var(--ink); background: var(--wash); }
.lsec-new .inline-edit { font-size: 14px; width: min(320px, 100%); }
.sec-pop { width: 248px; }
.sec-pop-h { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.sec-pop-l { display: grid; grid-auto-rows: max-content; max-height: 240px; overflow: auto; } /* rows keep their height: a grid with a max-height squeezed rows that clip their words (owner, 27 Oct 2026) */
.sec-pop-l button { font: inherit; font-size: 14px; text-align: left; background: none; border: 0; color: var(--ink); padding: 7px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-pop-l button:hover, .sec-pop-l button:focus-visible { background: var(--wash); }
.sec-pop-l button[aria-pressed="true"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
/* ---- Clipboard: a tidy list like the links ---- */
.clip-add { align-items: stretch; }
.clip-add textarea { min-height: 40px; max-height: 40vh; resize: vertical; transition: min-height .15s; }
.clip-add textarea:focus, .clip-add textarea:not(:placeholder-shown) { min-height: 84px; }
.clip-btns { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; }
.crows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.card.crow { flex-direction: row; align-items: flex-start; gap: 8px; border: 0; border-bottom: 1px solid var(--line); padding: 8px 6px 8px 2px; overflow: visible; position: relative; }
.card.crow:hover, .card.crow:focus-within { background: var(--wash); border-color: var(--line); }
.card.crow.pinned { box-shadow: inset 3px 0 0 var(--gold); padding-left: 9px; }
.card.crow.moving { border: 1.5px solid var(--gold); background: var(--paper); }
.card.crow .card-grip { width: 16px; margin-right: -6px; margin-top: 2px; opacity: 0; transition: opacity .15s; }
.card.crow:hover .card-grip, .card.crow .card-grip:focus-visible { opacity: 1; }
.crow-ic .card-icon { width: 26px; height: 26px; font-size: 15px; }
.crow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crow .clip-body { width: 100%; }
.crow .clip-text { -webkit-line-clamp: 3; font-size: 13.5px; }
.crow-sub { font-size: 11.5px; color: var(--mute); }
.clip-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; cursor: text; }
.crow-acts button { white-space: nowrap; }
.crow-main.named .clip-text { color: var(--ink-2); -webkit-line-clamp: 2; }
.card-acts.crow-acts { flex-wrap: nowrap; margin-left: 0; align-items: center; }
.crow-acts .ic { display: grid; place-items: center; padding: 4px 6px; }
@media (hover: hover) {
  .card.crow .crow-acts { position: absolute; right: 0; bottom: 3px; padding: 0 4px 0 24px; background: linear-gradient(to right, transparent, var(--wash) 20px); }
  .card.crow:not(:hover):not(:focus-within) .crow-acts { pointer-events: none; }
}
@media (hover: none) {
  .card.crow .card-grip { opacity: 1; }
  .card.crow .crow-acts > [data-ca="pin"], .card.crow .crow-acts > [data-ca="edit"], .card.crow .crow-acts > [data-ca="del"], .card.crow .crow-acts > [data-ic] { display: none; }
  .card.crow.acts-open { flex-wrap: wrap; }
  .card.crow.acts-open .crow-acts { flex-basis: 100%; justify-content: flex-end; }
  .card.crow.acts-open .crow-acts > * { display: inline-block; }
}
.card.crow.did-copy::after { top: 6px; }
#pj-detail.ro .clip-add { display: none; }

/* a link just saved (gold) or already there (ink) lights up for a moment; the note under the add box says it is already here */
@keyframes lnkFlash { 0%, 35% { background: color-mix(in srgb, var(--gold) 26%, transparent); } 100% { background: transparent; } }
@keyframes lnkDup { 0%, 35% { background: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: inset 3px 0 0 var(--ink); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
.card.lrow.flash, .card.lnk.flash { animation: lnkFlash 2.4s var(--ease) both; }
.card.lrow.flash-dup, .card.lnk.flash-dup { animation: lnkDup 2.4s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .card.lrow.flash, .card.lnk.flash, .card.lrow.flash-dup, .card.lnk.flash-dup { animation: none; outline: 2px solid var(--gold); outline-offset: -2px; } }
.lnk-dup { margin: -4px 0 12px; font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.lnk-dup::before { content: ''; width: 8px; height: 8px; background: var(--gold); flex: none; align-self: center; }
.lnk-dup .link { font-size: 13px; font-weight: 500; }
.lnk-dup span { color: var(--mute); font-size: 12px; }

/* ---------- first login: the wizard (#wl) and the getting-started list (.ckl) ---------- */
dialog.wl { width: min(620px, calc(100vw - 24px)); }
.wl-card { display: grid; gap: 16px; padding: 22px 26px 20px; }
.wl-head { display: flex; align-items: center; justify-content: space-between; }
.wl-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wl-dots li { width: 26px; height: 4px; background: var(--line); transition: background .3s, width .3s; }
.wl-dots li.done { background: var(--ink); }
.wl-dots li.now { background: var(--gold); width: 44px; }
.wl-later { font-size: 13px; color: var(--mute); }
.wl-body { display: grid; gap: 12px; min-height: 250px; align-content: start; }
.wl-body h2 { margin: 0; font-size: clamp(22px, 3vw, 28px); line-height: 1.15; letter-spacing: -.015em; }
.wl-k { margin: 0; font-size: 12.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.wl-sub { margin: 0; color: var(--ink-2, var(--ink)); }
.wl-in { font-size: 18px; padding: 12px 0; border: 0; border-bottom: 1.5px solid var(--ink); background: none; color: var(--ink); width: 100%; }
.wl-in:focus { outline: none; border-bottom-color: var(--gold); }
.wl-pv { min-height: 30px; }
.wl-pv.saved .qa-k { color: var(--gold-text, var(--ink)); }
.wl-ex { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--mute); }
.wl-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.wl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wl-fine { margin: 0; font-size: 12.5px; color: var(--mute); }
.wl-phone { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 22px; align-items: start; }
.wl-qr { min-height: 120px; }
.wl-qr .dl { gap: 8px; }
.wl-qr .dl-steps, .wl-qr .dl-fine { font-size: 12.5px; }
.wl-how { display: grid; gap: 10px; font-size: 14px; }
.wl-how p { margin: 0; }
.wl-done { font-weight: 600; padding: 30px 0; }
.wl-f { display: grid; gap: 4px; font-size: 13px; color: var(--mute); }
.wl-f input { font-size: 16px; }
.wl-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-keys li { display: grid; grid-template-columns: 52px 1fr 18px; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.wl-keys kbd { justify-self: start; min-width: 38px; height: 34px; display: inline-grid; place-items: center; padding: 0 8px; border: 1.5px solid var(--ink); border-bottom-width: 3px; font: 600 16px var(--mono, ui-monospace, monospace); }
.wl-keys .wl-n { justify-self: start; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 14px; }
.wl-keys li.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.wl-keys li.on kbd { animation: wlPress .35s ease; }
.wl-keys li.on i::after { content: ''; display: block; width: 6px; height: 11px; margin-left: 5px; border: solid var(--gold); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes wlPress { 40% { transform: translateY(2px); border-bottom-width: 1.5px; } }
.wl-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.wl-foot .spacer { flex: 1; }

.ckl { position: fixed; left: 20px; bottom: 20px; z-index: 40; width: 290px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .45); animation: cklIn .3s cubic-bezier(.2, .9, .3, 1); }
@keyframes cklIn { from { opacity: 0; transform: translateY(10px); } }
.ckl-head { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; padding: 11px 14px 10px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); }
.ckl-t { font-weight: 600; font-size: 14px; }
.ckl-n { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
/* the arrow says the list folds: down while open (press to minimise), up while folded */
.ckl-chev { width: 8px; height: 8px; margin: 0 2px 3px 4px; border: solid var(--ink); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); transition: transform .2s; }
.ckl:not(.open) .ckl-chev { transform: rotate(-135deg); margin-bottom: -3px; }
.ckl-head:hover { background: var(--wash); }
.ckl:not(.open) { width: auto; min-width: 0; } /* minimised: a small tab, not a 290px bar */
.ckl:not(.open) .ckl-head { padding: 8px 12px 7px; }
.ckl:not(.open) .ckl-t { font-size: 13px; }
.ckl-bar { grid-column: 1 / -1; height: 3px; background: var(--line); }
.ckl-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--gold); transition: width .5s ease; }
.ckl-list { list-style: none; margin: 0; padding: 2px 0 6px; border-top: 1px solid var(--line); }
.ckl-list button { width: 100%; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; background: none; border: 0; text-align: left; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.ckl-list button:hover:not(:disabled) { background: var(--wash); }
.ckl-list button:disabled { cursor: default; color: var(--mute); }
.ckl-list i { width: 16px; height: 16px; border: 1.5px solid var(--faint); border-radius: 50%; position: relative; }
.ckl-list li.ok i { border-color: var(--gold); background: var(--gold); }
.ckl-list li.ok i::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--on-gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ckl-list li.ok span { text-decoration: line-through; text-decoration-color: var(--faint); }
.ckl-list b { color: var(--mute); font-weight: 400; }
@media (max-width: 980px) { .wl-phone { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ckl, .wl-keys li.on kbd { animation: none; } }
/* the invite offer after a new project (inviteToProject) */
.ivp-lead { margin: 0 0 14px; font-size: 14px; color: var(--mute); line-height: 1.5; }
.ivp-facts { list-style: none; margin: 4px 0 14px; padding: 10px 12px; background: var(--wash); border-left: 3px solid var(--gold); font-size: 13px; line-height: 1.5; }
.ivp-facts li + li { margin-top: 4px; }
.ivp-off { font-size: 12.5px; }
/* who made a team item: a small person mark on the timeline row and a line in the panel (makerOf / makerLine) */
.tl-done { margin-left: .45em; font-size: .72em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); vertical-align: .15em; white-space: nowrap; } /* a reminder finished today stays on the Timeline */
.rm-more { display: block; margin-top: 10px; padding: 8px 0; font-size: 14px; }
.tl-by { display: inline-flex; align-items: center; gap: .3em; margin-left: .45em; font-size: .72em; font-weight: 500; color: var(--mute); vertical-align: .15em; white-space: nowrap; }
.tl-by i { display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 .2em; border: 1.5px solid var(--gold); color: var(--ink); font-style: normal; font-size: .82em; font-weight: 600; letter-spacing: .02em; }
.p-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; font-size: 13px; color: var(--mute); }
.p-by.mine { margin-top: 2px; }
/* dropping links onto the Links tab (dropLinks): the board glows, the section under the pointer is marked, then a review */
.pjd-links { position: relative; }
.pjd-links.lnk-over { outline: 2px dashed var(--gold); outline-offset: 6px; }
.pjd-links.lnk-over::after { content: attr(data-drop); position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 6px 14px; background: var(--ink); color: var(--on-ink); font-size: 13px; pointer-events: none; z-index: 3; }
.lsec.drop-here { background: var(--wash); box-shadow: inset 3px 0 0 var(--gold); }
.lnd-k { margin: 2px 0 8px; font-size: 13px; color: var(--mute); }
.lnd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.lnd-chip { border: 1px solid var(--line); background: none; color: var(--ink); padding: 5px 11px; border-radius: 999px; font-size: 13px; cursor: pointer; }
.lnd-chip:hover { border-color: var(--ink); }
.lnd-chip.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.lnd-new { display: inline-flex; gap: 6px; align-items: flex-end; }
.lnd-new input { width: 150px; font-size: 13px; }
.lnd-rows { list-style: none; margin: 0 0 12px; padding: 0; max-height: 46vh; overflow: auto; border-top: 1px solid var(--line); }
.lnd-row { display: grid; grid-template-columns: auto auto 1fr minmax(110px, 30%); gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.lnd-row:not(:has(input[type=checkbox])) { grid-template-columns: auto 1fr; }
.lnd-row .ft { display: grid; place-items: center; width: 28px; height: 28px; }
.lnd-main { display: grid; min-width: 0; }
.lnd-main input { font-size: 14px; }
.lnd-main small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.lnd-row select { font-size: 13px; min-width: 0; }
.lnd-row.dup { opacity: .6; }
@media (max-width: 560px) { .lnd-row { grid-template-columns: auto auto 1fr; } .lnd-row select { grid-column: 3; } }
/* audit trail on a wide screen: one line per change in four columns (time, item, who, what changed), bursts merged */
.au-list { container-type: inline-size; }
.au-time small { display: block; font-size: 11px; color: var(--mute); }
@container (min-width: 720px) {
  .au-row { display: grid; grid-template-columns: 52px minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.7fr); gap: 4px 16px; align-items: baseline; padding: 6px 0; }
  .au-main { display: contents; }
  .au-head { grid-column: 2; }
  .au-who { grid-column: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .au-ch { grid-column: 4; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .au-ch li { overflow-wrap: anywhere; }
  .au-day { margin-top: 14px; }
}
/* new since your last visit (markFresh): gold dot = someone else added it, gold ring = someone else changed it */
.fresh { position: relative; }
.fresh::after { content: ''; position: absolute; top: 50%; left: -11px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; pointer-events: none; }
.fresh-new::after { background: var(--gold); box-shadow: 0 0 0 3px var(--paper); }
.fresh-changed::after { border: 1.5px solid var(--gold); background: var(--paper); }
.fresh-new { background: var(--wash); }
.kb-card.fresh::after, [data-ph].fresh::after { left: auto; right: 8px; top: 8px; margin: 0; z-index: 2; }
.pjt-fresh { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--gold); vertical-align: .35em; }
.pj-freshdot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--gold); vertical-align: .15em; }
.pj-fresh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 8px 12px; background: var(--wash); border-left: 3px solid var(--gold); font-size: 13px; color: var(--ink); }
.pj-fresh > i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.pj-fresh span { flex: 1 1 240px; }
/* who is online in a team project (teamPresence): a dot on the person's initials, filled = online, ring = away */
.chip[data-uid] i { position: relative; }
.chip[data-pres="online"] i::after, .chip[data-pres="away"] i::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--paper); }
.chip[data-pres="online"] i::after { background: var(--ft-green); }
.chip[data-pres="away"] i::after { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ft-amber); }
.pjd-people[data-online]:not([data-online=""])::after { content: attr(data-online); align-self: center; margin-left: 4px; font-size: 12.5px; color: var(--mute); }
/* who wrote a task update (team projects) */
.u-by { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; color: var(--ink); font-weight: 500; }
.u-by i { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 2px; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 9.5px; font-weight: 600; }
.u-by.me i { background: var(--gold); color: var(--on-gold); }
/* the tour (startTour): the page dims around one part, a card says what it is and which keys move around */
.tour { position: fixed; inset: 0; z-index: 95; pointer-events: none; } /* hands on: the app under it stays usable, only the card takes presses */
.tour-card { pointer-events: auto; }
.tour.lite .tour-spot { box-shadow: none; } /* a board being drawn on stays bright: only the gold ring shows where to look */
.tour-spot { position: fixed; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38); outline: 2px solid var(--gold); outline-offset: 2px; transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.tour-card { position: fixed; padding: 16px 18px 14px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-top: 4px solid var(--gold); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1); outline: none; }
.tour-card h3 { margin: 2px 0 6px; font-size: 18px; letter-spacing: -.01em; }
.tour-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.tour-card .tour-n { margin: 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tour-keys { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; }
.tour-keys span { display: inline-flex; gap: 4px; }
.tour-keys kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border: 1.5px solid var(--ink); border-bottom-width: 3px; background: var(--paper); color: var(--ink); font: 600 13px var(--font, system-ui); }
.tour-try { padding: 7px 10px; background: var(--wash); border-left: 3px solid var(--gold); font-size: 13.5px; }
.tour-try.ok { border-left-color: var(--ft-green); }
.tour-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* a long label on the last step (Remove what I made here) wraps instead of pushing Done out of the card */
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }
.pj-fresh-go { font: inherit; font-weight: 600; }
.fresh.blink { animation: freshBlink .62s ease-in-out 4; }
@keyframes freshBlink { 50% { background: color-mix(in srgb, var(--gold) 28%, var(--paper)); box-shadow: inset 3px 0 0 var(--gold); } }
@media (prefers-reduced-motion: reduce) { .fresh.blink { animation: none; outline: 2px solid var(--gold); } }
/* one-time tips (hint): a small card next to the thing it is about */
.hint-tip { position: fixed; z-index: 70; padding: 12px 14px 10px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-left: 4px solid var(--gold); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .5); animation: hintIn .25s ease-out; }
@keyframes hintIn { from { opacity: 0; transform: translateY(-4px); } }
.hint-tip b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.hint-tip p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.hint-acts { display: flex; align-items: center; gap: 8px; }
.hint-acts .link { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .hint-tip { animation: none; } }

/* ---------- petty cash: months, review, questions (2 Oct 2026) ---------- */
.cs-table tr[data-ce] { cursor: pointer; }
.cs-table tr[data-ce]:hover td, .cs-table tr[data-ce]:focus-visible td { background: var(--wash); }
.cs-table tr[data-ce]:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cs-bal.neg { color: var(--red); }
.cs-mks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cs-mk { display: inline-flex; align-items: center; font-size: 11px; line-height: 1.5; padding: 0 6px; border: 1px solid var(--line); color: var(--ink-2); background: var(--paper); white-space: nowrap; }
.cs-mk.ok { color: var(--ft-green); border-color: currentColor; padding: 1px 3px; }
.cs-mk.k-ask, .cs-mk.k-rc, .cs-mk.k-dup, .cs-mk.k-ref, .cs-mk.k-ext { color: var(--red); border-color: currentColor; }
.cs-mk.k-edit, .cs-mk.k-late, .cs-mk.k-big, .cs-mk.k-lim, .cs-mk.k-got, .cs-mk.k-cat, .cs-mk.k-lump { color: var(--ft-amber); border-color: currentColor; }
.cs-mk.k-ans { color: var(--ft-blue); border-color: currentColor; }
/* new since your last look (petty cash): the bubble on the card and the tab, and the rows it counts */
.cs-mk.k-new { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 700; }
.cs-table tr.cs-fresh > td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.cs-table th:first-child, .cs-table td:first-child { padding-left: 10px; } /* room for the new-entry bar: it sat on the date's first digit */
.cs-new { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px 0 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; align-self: center; }
.cs-new i, .lt-new { font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--gold); color: var(--on-gold); min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; border-radius: 9px; text-align: center; box-sizing: border-box; display: inline-block; }
.lt-new { margin-left: 6px; vertical-align: 1px; }
.cs-new:hover span, .cs-new:focus-visible span { text-decoration: underline; }
.cs-note { margin: 0; padding: 8px 10px; background: var(--wash); border-left: 3px solid var(--line); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cs-note.ask { border-left-color: var(--gold); }
.cs-note.warn { border-left-color: var(--red); }
/* the amount of each receipt on an expense: lines that are added up into the Amount */
.cs-parts { display: grid; gap: 6px; padding: 10px 12px; background: var(--wash); border-left: 3px solid var(--gold); }
.cs-parts > b { font-size: 13.5px; }
.cs-partl { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; counter-reset: cspart; }
.cs-partl li { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 26px; gap: 8px; align-items: start; counter-increment: cspart; }
.cs-partl li::before { content: counter(cspart) '.'; padding-top: 8px; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.cs-parta { display: grid; min-width: 0; } .cs-parta .rp-hint { margin-top: 2px; }
.cs-partx { width: 26px; height: 26px; margin-top: 4px; padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; }
.cs-partx:hover, .cs-partx:focus-visible { border-color: var(--ink); }
.cs-partf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cs-partsum { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cs-partnote { display: grid; gap: 3px; } .cs-partnote .warn { color: var(--ink); font-weight: 600; }
.cs-partoff { justify-self: start; font-size: 12.5px; }
.cs-partask { margin: -4px 0 0; font-size: 13px; } .cs-partask .link { text-align: left; }
.cs-partask.on { padding: 8px 10px; background: var(--wash); border-left: 3px solid var(--gold); }
.cs-parts.ro .cs-partl li { grid-template-columns: 22px auto minmax(0, 1fr); } .cs-parts.ro small { color: var(--mute); }
input.cs-total { background: var(--wash); font-weight: 600; cursor: default; }
#claim-parts .cs-partl li { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 26px; } /* a claim's lines: amount, which one (no photo picker, no category) */
#claim-partask { margin: -2px 0 2px; }
.p-parts { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 560px) { .cs-partl li { grid-template-columns: 18px minmax(0, 1.1fr) minmax(0, 1fr) 26px; gap: 6px; } }
/* side by side: the receipt in view beside the amounts read from it (owner, 10 Oct 2026) */
.cs-modal.cs-sbs { width: min(1080px, calc(100vw - 32px)); }
.cs-split.on { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cs-split.on > .cs-main { min-width: 0; display: grid; gap: 12px; }
.cs-view { display: grid; gap: 8px; position: sticky; top: 0; z-index: 2; background: var(--paper); padding-bottom: 6px; }
.cs-vhead { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cs-vhead b { font-size: 13.5px; }
.cs-vhead .icon-btn { width: 30px; height: 30px; font-size: 20px; line-height: 1; }
.cs-vmin { font-size: 12.5px; margin-left: 6px; }
.cs-vpic { height: min(64vh, 600px); overflow: auto; display: grid; place-items: center; background: var(--wash); border: 1px solid var(--line); }
.cs-vpic img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.cs-vpic.zoom { place-items: start; }
.cs-vpic.zoom img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.cs-vpdf { display: grid; gap: 4px; place-items: center; width: 160px; height: 200px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.cs-vpdf b { font-size: 22px; } .cs-vpdf small { color: var(--mute); }
.cs-vwait { color: var(--mute); font-size: 13px; }
.cs-view.min .cs-vpic, .cs-view.min .cs-vthumbs { display: none; }
.cs-vthumbs { list-style: none; margin: 0; padding: 2px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.cs-vthumbs button { position: relative; width: 52px; height: 52px; padding: 0; border: 1.5px solid var(--line); background: var(--wash); color: var(--ink); cursor: pointer; display: grid; place-items: center; overflow: visible; font: inherit; font-size: 12px; }
.cs-vthumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-vthumbs button.on { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.cs-vthumbs button.none { border-style: dashed; }
.cs-vthumbs i { position: absolute; left: 2px; top: 2px; font-style: normal; font-size: 10.5px; padding: 0 3px; background: var(--paper); color: var(--ink); line-height: 1.4; }
.cs-vthumbs em { position: absolute; right: -6px; top: -6px; font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); }
.cs-vsay { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.cs-vsay span { color: var(--ink); }
.cs-partl.pk li { grid-template-columns: 22px minmax(0, 1fr) auto minmax(0, 1fr) 26px; }
.cs-ppick { font-size: 12.5px !important; padding: 7px 2px !important; max-width: 104px; }
.cs-partl li.on { background: color-mix(in srgb, var(--gold) 14%, transparent); outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: 2px; }
.cs-ppic { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; white-space: nowrap; align-self: center; }
.cs-ppic.none { color: var(--mute); cursor: default; border-style: dashed; }
.cs-parts.ro .cs-partl.pk li { grid-template-columns: 22px auto auto minmax(0, 1fr); align-items: center; }
.cs-first .cs-file { margin: 0; }
/* a line per receipt also takes its category (owner, 10 Oct 2026): amount, photo, category, which one, remove */
.cs-parts:not(.ro) .cs-partl li { grid-template-columns: 22px minmax(0, 1fr) minmax(0, .85fr) minmax(0, .85fr) 26px; }
.cs-parts:not(.ro) .cs-partl.pk li { grid-template-columns: 22px minmax(0, 1fr) auto minmax(0, .85fr) minmax(0, .85fr) 26px; }
.cs-partl li > input[data-part-c] { min-width: 0; }
/* narrow places (the right half beside the photo, a phone): amount, photo and remove on the first row, category and which one under them */
.cs-sbs .cs-parts:not(.ro) .cs-partl li { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 26px; }
.cs-sbs .cs-parts:not(.ro) .cs-partl li > .cs-parta { grid-column: 2; grid-row: 1; }
.cs-sbs .cs-parts:not(.ro) .cs-partl li > .cs-ppick { grid-column: 3; grid-row: 1; max-width: none; justify-self: start; }
.cs-sbs .cs-parts:not(.ro) .cs-partl li > input[data-part-c] { grid-column: 2; grid-row: 2; }
.cs-sbs .cs-parts:not(.ro) .cs-partl li > input[data-part-t] { grid-column: 3; grid-row: 2; }
.cs-sbs .cs-parts:not(.ro) .cs-partl li > :last-child { grid-column: 4; grid-row: 1; }
.cs-sbs .cs-parts:not(.ro) .cs-partl li { padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
@media (max-width: 760px) {
  .cs-split.on { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cs-vpic { height: 30vh; height: 30dvh; }
  /* the photo stays in sight while typing: a field the browser scrolls to lands under it, not behind it */
  .cs-modal.cs-sbs { scroll-padding-top: calc(30dvh + 110px); }
  .cs-modal.cs-sbs.cs-vmin-on { scroll-padding-top: 60px; }
  .cs-parts:not(.ro) .cs-partl li, .cs-parts:not(.ro) .cs-partl.pk li { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) 26px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
  .cs-parts:not(.ro) .cs-partl li > .cs-parta { grid-column: 2; grid-row: 1; }
  .cs-parts:not(.ro) .cs-partl li > .cs-ppick { grid-column: 3; grid-row: 1; max-width: none; justify-self: start; }
  .cs-parts:not(.ro) .cs-partl li > input[data-part-c] { grid-column: 2; grid-row: 2; }
  .cs-parts:not(.ro) .cs-partl li > input[data-part-t] { grid-column: 3; grid-row: 2; }
  .cs-parts:not(.ro) .cs-partl li > :last-child { grid-column: 4; grid-row: 1; }
  .cs-parts:not(.ro) .cs-partl:not(.pk) li > input[data-part-c] { grid-column: 3; grid-row: 1; }
  .cs-parts:not(.ro) .cs-partl:not(.pk) li > input[data-part-t] { grid-column: 2 / 4; grid-row: 2; }
}

.cs-note small { color: var(--mute); font-size: 12px; }
.cs-note .btn { margin-left: auto; }
.cs-n { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; font-size: 11px; line-height: 18px; text-align: center; background: var(--ink); color: var(--on-ink); }
.cs-tag.lock { color: var(--ink-2); }
.cs-month { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
.cs-month b { min-width: 9em; text-align: center; font-weight: 600; }
.cs-month .icon-btn { width: 30px; height: 30px; }
.cs-month .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-month .icon-btn:disabled { opacity: .3; }
.cs-month .link { font-size: 12.5px; }
.cs-mfacts { flex-basis: 100%; font-size: 12.5px; color: var(--ink-2); }
.cs-mfacts b { font-weight: 600; color: var(--ink); }
.cs-cats { margin-bottom: 8px; font-size: 13px; }
.cs-cats summary { cursor: pointer; color: var(--ink-2); }
.cs-cats summary span { margin-left: 10px; color: var(--mute); font-size: 12px; }
.cs-cats ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.cs-cats li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(40px, 1fr) auto; gap: 2px 10px; align-items: center; }
.cs-cats li small { grid-column: 1 / -1; font-size: 11.5px; color: var(--mute); margin-top: -3px; }
.cs-cats li[data-cc] { cursor: pointer; padding: 3px 6px; margin: 0 -6px; }
.cs-cats li[data-cc]:hover, .cs-cats li[data-cc]:focus-visible { background: var(--wash); outline: 0; }
.cs-cats li[data-cc]:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* a category by month (cs-pivot): rows are its labels or items, columns its months, each cell rupiah and (entries) */
.modal.cs-pivot { width: min(1080px, calc(100vw - 32px)); }
.cs-pivot form { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); min-height: 0; }
.pv-sub { margin: -8px 0 0; color: var(--ink-2); font-size: 13.5px; }
.pv-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.pv-scroll { flex: 1 1 auto; min-height: 120px; overflow: auto; border: 1px solid var(--line); }
.pv-table { border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 100%; }
.pv-table th, .pv-table td { padding: 0; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: right; background: var(--paper); }
.pv-table thead th { position: sticky; top: 0; z-index: 2; padding: 7px 10px; font-weight: 500; color: var(--mute); border-bottom: 1.5px solid var(--ink); }
.pv-table .pv-n { position: sticky; left: 0; z-index: 1; text-align: left; padding: 6px 10px; font-weight: 400; max-width: 200px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); }
.pv-table thead .pv-n { z-index: 3; }
.pv-table thead .pv-n small { margin-left: 6px; color: var(--mute); }
.pv-table .pv-n { width: 200px; min-width: 200px; }
.pv-table .pv-t { position: sticky; left: 200px; z-index: 1; border-right: 1.5px solid var(--ink); font-weight: 600; }
.pv-table thead .pv-t, .pv-table tfoot .pv-t { z-index: 3; }
.pv-table td button { display: block; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; padding: 6px 10px; text-align: right; cursor: pointer; }
.pv-table td button:hover, .pv-table td button:focus-visible { background: var(--wash); outline: 0; }
.pv-table td small { margin-left: 5px; color: var(--mute); font-weight: 400; font-size: 11.5px; }
.pv-table .pv-0 { padding: 6px 10px; color: var(--mute); opacity: .55; }
.pv-table tfoot th, .pv-table tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1.5px solid var(--ink); border-bottom: 0; font-weight: 600; }
.pv-table tfoot .pv-n { z-index: 3; font-weight: 600; }
.pv-more { margin: 0; font-size: 13px; }
.pv-table .pv-on { background: var(--wash); box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink); }
.pv-table thead th.pv-on { color: var(--ink); font-weight: 600; }
.pv-table .pv-p { display: block; padding: 6px 10px; cursor: help; }
.pv-table .pv-u { padding: 6px 10px; color: var(--ink-2); font-weight: 400; }
.pv-table thead .pv-u small { display: block; font-size: 11px; color: var(--mute); }
.pv-table .pv-u em { margin-left: 8px; font-style: normal; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 99px; }
.pv-table .pv-up { background: var(--note-pink); color: var(--ink); }
.pv-table .pv-new { background: var(--note-blue); color: var(--ink); }
.pv-table.one { min-width: 0; }
.pv-bar .seg + .seg { margin-left: 4px; }
.pv-foot { display: flex; gap: 10px; align-items: center; }
.modal.cs-days { width: min(980px, calc(100vw - 32px)); }
.cd-two { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; align-content: start; }
.cd-two.one { grid-template-columns: minmax(0, 1fr); }
.cd-col h3 { position: sticky; top: 0; z-index: 1; background: var(--paper); margin: 0; padding: 6px 0 8px; font-size: 15px; border-bottom: 1.5px solid var(--ink); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; justify-content: space-between; }
.cd-col h3 span { font-weight: 500; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cd-col ol { list-style: none; margin: 0; padding: 0; }
.cd-col li button { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: 13.5px; padding: 8px 4px; text-align: left; cursor: pointer; align-items: baseline; }
.cd-col li button:hover, .cd-col li button:focus-visible { background: var(--wash); outline: 0; }
.cd-d { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cd-col .p-meta { padding: 10px 4px; }
@media (max-width: 760px) {
  .cd-two { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cd-w { white-space: normal; }
  .cs-days .pv-foot { flex-wrap: wrap; }
}
.cc-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-bar { height: 8px; background: var(--wash); }
.cc-bar i { display: block; height: 100%; background: var(--bar); }
.cs-fields { border: 0 !important; padding: 0 !important; margin: 0; display: flex !important; flex-direction: column; gap: 16px !important; min-width: 0; }
.cs-fields:disabled input, .cs-fields:disabled select { color: var(--ink); opacity: 1; background: var(--wash); }
.cs-tick { display: flex !important; flex-direction: row !important; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.cs-tick input { width: auto; flex: none; margin: 3px 0 0; }
.cs-ext { display: grid; gap: 10px; padding: 10px; background: var(--wash); border-left: 3px solid var(--gold); }
.cs-ext[hidden] { display: none; }
.cs-adv { font-size: 13.5px; }
.cs-adv summary { cursor: pointer; color: var(--ink-2); }
.cs-adv[open] summary { margin-bottom: 12px; }
.cs-adv > label { display: flex; flex-direction: column; margin-bottom: 12px; }
.cs-hist { margin: 0; font-size: 12px; color: var(--mute); }
.cs-histbox { font-size: 12.5px; max-height: 180px; overflow: auto; border: 1px solid var(--line); padding: 8px 10px; }
.cs-histbox ul, .cs-gone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs-histbox span, .cs-gone li span { color: var(--mute); }
.cs-q { border-top: 1.5px solid var(--ink); padding-top: 12px; display: grid; gap: 8px; }
.cs-q h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cs-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.cs-qlist li { font-size: 13px; padding-left: 10px; border-left: 3px solid var(--gold); }
.cs-qlist li.cq-answer { border-left-color: var(--ft-blue); }
.cs-qlist li.cq-nudge { border-left-color: var(--ft-amber); }
.cs-qlist li .cq-to { font-style: normal; font-size: 12px; color: var(--mute); margin-left: 4px; }
.cs-qlist li.p-meta { border-left: 0; padding-left: 0; }
.cs-qlist li span { margin-left: 8px; font-size: 11.5px; color: var(--mute); }
.cs-qlist li p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* read marks under a comment, and the final "resolved" line */
.cq-ck { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 2px 4px; border: 0; background: none; color: var(--mute); cursor: pointer; font: inherit; font-size: 11.5px; }
.cq-ck svg { width: 17px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cq-ck.wait svg { width: 14px; }
.cq-ck.all { color: var(--ink); }
.cq-ck i { font-style: normal; }
.cq-ck:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cs-qlist li .cq-who { display: grid; gap: 2px; margin: 2px 0 0; font-size: 12px; color: var(--mute); }
.cs-qlist li .cq-who[hidden] { display: none; }
.cs-qlist li .cq-who span { margin-left: 0; font-size: 12px; }
.cs-qlist li .cq-who b { color: var(--ink); margin-right: 4px; }
.cs-qlist li.cq-done { border-left-color: var(--ft-green); color: var(--mute); }
.cs-qlist li.cq-done svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; fill: none; stroke: var(--ft-green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-qlist li.cq-done b { color: var(--ink); }
.cs-qadd { display: grid; gap: 8px; }
.cs-qadd textarea { width: 100%; resize: vertical; }
.cs-qbtn { display: flex; flex-wrap: wrap; gap: 8px; }
.modal.cs-review { width: min(860px, calc(100vw - 32px)); }
.cs-review textarea { width: 100%; font: inherit; font-size: 13px; }
.rv-figs { border-top: 1.5px solid var(--ink); padding-top: 10px; }
.rv-seg { flex-wrap: wrap; justify-self: start; align-self: flex-start; width: fit-content; max-width: 100%; }
.rv-seg button { display: inline-flex; gap: 6px; align-items: center; }
.rv-scroll { max-height: min(46vh, 460px); overflow: auto; border-bottom: 1px solid var(--line); }
.rv-table thead th { position: sticky; top: 0; background: var(--paper); z-index: 1; }
.rv-table input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.rv-t { width: 28px; color: var(--ft-green); }
.rv-h td { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); background: var(--wash); padding: 4px 8px; }
.rv-table tr.done td { color: var(--mute); }
.rv-open { text-align: left; font-weight: 500; }
.cs-gone { font-size: 13px; }
.cs-gone summary { cursor: pointer; color: var(--ink-2); margin-bottom: 6px; }
#print-root { display: none; }
@media print {
  html.printing body > *:not(#print-root) { display: none !important; }
  html.printing, html.printing body { background: #fff !important; color: #000 !important; height: auto !important; overflow: visible !important; }
  html.printing #print-root { display: block; font: 11pt/1.4 system-ui, sans-serif; color: #000; }
  #print-root h1 { font-size: 16pt; margin: 0 0 4pt; }
  #print-root h2 { font-size: 12pt; margin: 14pt 0 4pt; break-after: avoid; }
  #print-root table { border-collapse: collapse; width: 100%; margin: 8pt 0; }
  #print-root .pr-figs { width: auto; min-width: 50%; }
  #print-root td, #print-root th { border-bottom: .5pt solid #999; padding: 3pt 6pt 3pt 0; text-align: left; vertical-align: top; font-size: 9.5pt; }
  #print-root .pr-figs td:last-child, #print-root .pr-figs th:last-child, #print-root .pr-rows td:nth-child(n+5):nth-child(-n+7), #print-root .pr-rows th:nth-child(n+5):nth-child(-n+7) { text-align: right; white-space: nowrap; }
  #print-root small { font-size: 8pt; color: #444; }
  #print-root thead { display: table-header-group; }
  #print-root tr { break-inside: avoid; }
  #print-root .pr-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8pt; }
  #print-root figure { margin: 0; break-inside: avoid; }
  #print-root figure img { width: 100%; max-height: 220pt; object-fit: contain; border: .5pt solid #999; }
  #print-root figcaption { font-size: 8pt; }
}
.rv-table th:nth-child(3) { text-align: left; }
.rv-table th:nth-child(5), .rv-table td:nth-child(5) { text-align: right; }
.cs-qlist li b { display: inline-block; }
.cs-qlist li b::first-letter { text-transform: uppercase; }
.cs-rcview { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.cs-rcview small { color: var(--mute); }
.cs-rcview .cs-rc { width: 56px; height: 56px; }
/* the reminder form's time rail: what else is on that day (a hollow bar and its name), to find a free slot */
.picker-rail .br-row.busy .br-bar { background: transparent; box-shadow: inset 0 0 0 3px var(--ink); }
.picker-rail .br-row.busy.sel .br-bar::after { background: var(--bar); }
.picker-rail .br-row.busy .br-c1 { color: var(--ink-2); }
.pk-ev { margin-left: 8px; font-weight: 500; color: var(--ink); }
.picker-col:has(.pk-clash, .zn-here) .br-row.aft .br-c1 { max-width: 78px; } /* the line under the chosen time: the big clock's extra small print sits there */
.pk-clash { color: var(--red) !important; max-width: 128px; overflow-wrap: anywhere; }
/* several receipts on a petty cash entry */
.cs-rc { position: relative; }
.cs-rc.many i { position: absolute; right: -6px; top: -6px; min-width: 16px; padding: 0 3px; font-style: normal; font-size: 10px; line-height: 16px; text-align: center; background: var(--ink); color: var(--on-ink); }
.cs-rcs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cs-rcs li { position: relative; }
.cs-rcs .cs-rc { width: 56px; height: 56px; }
.cs-rcx { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1; cursor: pointer; }
.cs-file > label { display: flex; flex-direction: column; }
.cs-pastebtn { justify-self: start; align-self: flex-start; margin: 8px 0 2px; }
.cs-fl { display: block; font-size: 13px; color: var(--mute); }
.cs-rcbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-rcbtns .cs-pastebtn { margin: 8px 0 2px; display: inline-flex; flex-direction: row; align-items: center; position: relative; }
.cs-rcbtns .cs-cam { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cs-hidefile { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; overflow: hidden; pointer-events: none; }
.cs-rcbtns label:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.imp-table td:nth-child(3) select { width: auto; font-size: 12.5px; padding: 2px 4px; }
.imp-prog { font-weight: 500; color: var(--ink); }
.cs-modal.drop { outline: 3px dashed var(--gold); outline-offset: -6px; }
.cs-rc.new { display: inline-block; border-style: dashed; }
.cs-rc.new img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-drophint { display: block; margin-top: 4px; }
/* labels inside a category, the fund's label list, the import's category names */
.cc-labels { grid-column: 1 / -1; list-style: none; margin: 2px 0 4px 12px; padding: 0 0 0 10px; border-left: 2px solid var(--line); display: grid; gap: 2px; }
.cs-cats .cc-labels li { display: grid; grid-template-columns: minmax(80px, 180px) auto 1fr; gap: 10px; font-size: 12.5px; }
.cs-cats .cc-labels li b { font-weight: 500; }
.cs-cats .cc-labels li small { grid-column: auto; margin: 0; }
.cs-adv textarea, .cs-modal textarea[name=labels] { width: 100%; font: inherit; font-size: 13px; }
.cs-labelhint { display: block; margin-top: 4px; }
.imp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.imp-sheets { border: 1px solid var(--line); padding: 8px 12px 6px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 2px 18px; }
.imp-sheets legend { font-size: 13px; color: var(--mute); padding: 0 4px; }
.imp-cats .hint { grid-column: 1 / -1; margin: 0; }
.imp-cats label { display: flex; flex-direction: column; font-size: 11.5px; color: var(--mute); }
.imp-cats input { font-size: 13.5px; padding: 4px 0; }

/* the project dialog: who is in the team picked under "Who works on it" */
.proj-people { margin: -4px 0 6px; border: 1px solid var(--line); padding: 10px 12px; }
.proj-people .pp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; margin-bottom: 6px; }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 232px; overflow: auto; }
.pp-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; }
.pp-list li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 10.5px; font-weight: 600; }
.pp-list .pp-n { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-list .pp-n small { color: var(--mute); font-size: 12.5px; }
.pp-list .pp-e { display: block; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.pp-list .pp-r { font-size: 12.5px; color: var(--mute); text-align: right; }
.pp-list li.off { opacity: .6; }
.pp-lead { font: inherit; font-size: 12px; padding: 3px 9px; border: 1px solid var(--line); background: transparent; color: var(--mute); cursor: pointer; border-radius: 2px; }
.pp-lead:hover, .pp-lead:focus-visible { border-color: var(--ink); color: var(--ink); }
.pp-lead[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
@media (max-width: 560px) { .pp-list li { grid-template-columns: 30px minmax(0, 1fr); } .pp-list .pp-r { grid-column: 2; text-align: left; } }

/* Gantt and calendar: dates move only after Unlock */
.g-lockb { display: inline-flex; align-items: center; gap: 6px; }
.g-lockb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.g-lockb .shk { transition: transform .18s ease; transform-origin: 16px 11px; }
.g-lockb.open { border-color: var(--gold); color: var(--ink); }
.g-lockb.open .shk { transform: translateY(-2px) rotate(28deg); }
.g-lockb.nudge { animation: g-nudge .36s ease; }
@keyframes g-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
.g-locked .g-bar, .g-locked .cal-it[data-cdrag] { cursor: pointer; }
.g-locked .g-bar .h { display: none; }
@media (prefers-reduced-motion: reduce) { .g-lockb.nudge { animation: none; } .g-lockb .shk { transition: none; } }

/* A fund as a sheet (cs-sheet): the whole ledger on one screen, a line per entry, the header pinned, the row's receipts beside it */
.cs-sheetbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.cs-sheet { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: hidden; }
.cs-sheet[open] { display: flex; flex-direction: column; }
.cs-sheet::backdrop { background: var(--paper); }
.sh-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom: 1.5px solid var(--ink); }
.sh-name { display: flex; flex-direction: column; min-width: 0; margin-right: 6px; }
.sh-name b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.sh-bal { font-size: 12px; color: var(--mute); }
.sh-q { flex: 1 1 220px; min-width: 140px; max-width: 380px; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 0; }
.sh-q:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.sh-top select { font: inherit; font-size: 13px; max-width: 190px; }
.sh-only { flex: 0 1 auto; max-width: 100%; overflow-x: auto; }
.sh-only button { white-space: nowrap; flex: none; }
.sh-only button { font-size: 12.5px; }
.sh-only .ls-n { margin-left: 6px; }
.sh-only .sh-pick { max-width: 220px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); }
.sh-x { margin-left: auto; }
.sh-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.sh-grid { overflow: auto; min-height: 0; outline: none; overscroll-behavior: contain; }
.sh-grid table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.sh-grid th { position: sticky; top: 0; z-index: 2; background: var(--paper); text-align: left; font-weight: 500; font-size: 11.5px; color: var(--mute); border-bottom: 1.5px solid var(--ink); padding: 6px 8px; white-space: nowrap; }
.sh-grid th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.sh-grid th button:hover, .sh-grid th button.on { color: var(--ink); }
.sh-grid th button.on i::after { content: "\2191"; font-style: normal; }
.sh-grid th button.on.desc i::after { content: "\2193"; }
.sh-grid th button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sh-grid td { height: 28px; padding: 0 8px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.sh-grid th.sh-c, .sh-grid td.sh-c { width: 34px; padding: 0 0 0 10px; }
.sh-grid th:nth-child(2) { width: 78px; } .sh-grid th:nth-child(3) { width: 28%; } .sh-grid th:nth-child(4) { width: 18%; } .sh-grid th:nth-child(5) { width: 15%; }
.sh-grid th:nth-child(6), .sh-grid th:nth-child(7) { width: 92px; } .sh-grid th:nth-child(8) { width: 104px; } .sh-grid th.sh-rc, .sh-grid td.sh-rc { width: 34px; text-align: center; padding: 0 4px; }
.sh-grid th:nth-child(10) { width: 16%; }
.sh-grid .sh-r { text-align: right; }
.sh-grid th.sh-r button { flex-direction: row-reverse; }
.sh-d, .sh-k, .sh-n { color: var(--ink-2); }
.sh-w { font-weight: 500; }
.sh-i { color: var(--ft-green); }
.sh-b { font-weight: 500; } .sh-b.neg { color: var(--red); }
.sh-rc { color: var(--mute); } .sh-rc.none { color: var(--red); font-weight: 600; }
.sh-f .cs-mk { margin-right: 4px; font-size: 10.5px; }
.sh-grid tr[data-sh] { cursor: default; }
.sh-grid tr[data-sh]:hover td { background: var(--wash); }
.sh-grid tr.sel td { background: color-mix(in srgb, var(--gold) 16%, var(--paper)); }
.sh-grid tr.at td { background: color-mix(in srgb, var(--gold) 26%, var(--paper)); }
.sh-grid tr.at td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.sh-grid tr.planned td { color: var(--mute); font-style: italic; }
.sh-grid tr.sh-m td { height: 26px; background: var(--wash); font-size: 11.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); position: sticky; top: 29px; z-index: 1; }
.sh-grid tr.sh-m b { margin-right: 10px; color: var(--ink); }
.sh-ck { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid var(--line); vertical-align: middle; }
.sh-ck.can { cursor: pointer; border-color: var(--ink-2); }
.sh-ck.on { border-color: var(--ft-green); color: var(--ft-green); }
.sh-ck svg { width: 12px; height: 12px; }
.sh-none { padding: 24px 16px; }
.sh-side { border-left: 1px solid var(--line); overflow: auto; padding: 16px; min-height: 0; background: var(--paper); }
.sh-side h3 { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.sh-amt { font-size: 20px; font-weight: 600; margin: 2px 0 10px; font-variant-numeric: tabular-nums; } .sh-amt.in { color: var(--ft-green); }
.sh-side dl { display: grid; gap: 4px; font-size: 12.5px; margin: 0 0 10px; }
.sh-side dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.sh-side dt { color: var(--mute); } .sh-side dd { margin: 0; overflow-wrap: anywhere; }
.sh-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.sh-btns kbd { font: inherit; font-size: 10.5px; opacity: .7; margin-left: 4px; border: 1px solid currentColor; padding: 0 4px; }
.sh-pics { display: grid; gap: 10px; }
.sh-pic { all: unset; cursor: zoom-in; display: block; border: 1px solid var(--line); background: var(--wash); min-height: 80px; }
.sh-pic img { display: block; width: 100%; height: auto; }
.sh-pic span { display: block; padding: 28px 12px; text-align: center; font-size: 12px; color: var(--mute); }
.sh-pic:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sh-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 7px 16px calc(7px + env(safe-area-inset-bottom, 0px)); border-top: 1.5px solid var(--ink); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sh-sum { font-weight: 600; color: var(--ink); }
.sh-keys { color: var(--mute); font-size: 11.5px; }
.cs-sheet #toasts { z-index: 5; }
@media (max-width: 980px) {
  .sh-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 38%); }
  .sh-side { border-left: 0; border-top: 1px solid var(--line); }
  .sh-grid table { min-width: 860px; }
  .sh-keys { display: none; }
  .sh-name b { max-width: 60vw; }
  .sh-top { position: relative; padding-right: 16px; }
  .sh-x { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 12px; }
  .sh-q { flex-basis: 100%; max-width: none; }
  .sh-top select { flex: 1 1 40%; max-width: none; }
}

/* pay: the salary's history on the card and in the raise dialog */
.pay-adj { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 13.5px; color: var(--mute); }
.pay-hist { list-style: none; margin: 0 0 4px; padding: 0; border-top: 1px solid var(--line); }
.pay-hist li { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.4fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pay-hist li small { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-hist li b { font-variant-numeric: tabular-nums; }

/* the hands-on tour: Chichi asks, the person does it, the tick turns green */
.tour-who { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tour-who .tour-n { flex: none; }
.tour-bar { flex: 1; height: 3px; background: var(--line); }
.tour-bar i { display: block; height: 100%; background: var(--gold); transition: width .4s; }
.tour-ask { display: grid; gap: 4px; padding: 9px 11px; margin: 0 0 12px; background: var(--wash); border-left: 3px solid var(--gold); font-size: 14px; }
.tour-ask b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tour-ask .tour-do { font-weight: 600; color: var(--ink); }
.tour-ask .tour-keys { margin: 4px 0 0; }
.tour-ask.ok { border-left-color: var(--ft-green); }
.tour-ask.ok b { color: var(--ft-green); }
.tour-ask.ok .tour-keys { display: none; }
@media (prefers-reduced-motion: no-preference) { .tour-ask:not(.ok) { animation: tourAsk 1.8s ease-in-out infinite; } .tour-ask.ok { animation: tourOk .35s ease-out; } }
@keyframes tourAsk { 50% { border-left-color: var(--ink); } }
@keyframes tourOk { from { transform: scale(.97); } to { transform: none; } }
.tour-acts .link { font-size: 13px; color: var(--mute); background: none; border: 0; padding: 4px 6px; text-decoration: underline; cursor: pointer; }

/* Chichi, the helper (public/chichi.js): a small panel that answers from the guide */
.chi-face { flex: none; image-rendering: pixelated; }
.chi-face .d-k, .chi-face .d-e { fill: var(--duck-ink); } .chi-face .d-y { fill: var(--duck); } .chi-face .d-o { fill: var(--duck-bill); }
.chi-face .d-w { fill: color-mix(in srgb, var(--duck-bill) 38%, var(--duck)); } .chi-face .d-p { fill: var(--duck-hi); }
.chi-face .d-r { fill: color-mix(in srgb, var(--ft-red) 45%, var(--duck)); } .chi-face .d-h { fill: var(--ft-red); } .chi-face .d-b { fill: var(--ft-blue); }
/* the blink: chichi.js puts .blink on her faces for a moment every 4.6 s (a CSS animation on every eye pixel restyled them on every frame, 9 Oct 2026) */
.chi-face.blink .d-e, .chi-face.blink .d-p { fill: var(--duck); }
.chichi { border: 1.5px solid var(--ink); border-top: 4px solid var(--gold); padding: 0; margin: auto 20px 20px auto; width: min(420px, calc(100vw - 24px)); height: min(620px, calc(100vh - 40px)); max-height: none; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55); overflow: hidden; }
.chichi[open] { display: flex; flex-direction: column; }
.chichi::backdrop { background: rgba(0, 0, 0, .18); }
.chi-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1.5px solid var(--line); }
.chi-head > div { flex: 1; min-width: 0; display: grid; }
.chi-head b { font-size: 16px; }
.chi-head small { font-size: 12px; color: var(--mute); }
.chi-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.chi-m { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.chi-m.me { justify-content: flex-end; }
.chi-b { min-width: 0; padding: 9px 12px; font-size: 14px; line-height: 1.5; background: var(--wash); border: 1px solid var(--line); overflow-wrap: anywhere; }
.chi-m.me .chi-b { background: var(--ink); color: var(--on-ink); border-color: var(--ink); max-width: 85%; }
.chi-b p { margin: 0 0 8px; } .chi-b p:last-child { margin-bottom: 0; }
.chi-ans { margin: 0 0 8px; user-select: text; -webkit-user-select: text; }
.chi-ans kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1.5px solid var(--ink); border-bottom-width: 2.5px; font: 600 12px var(--font, system-ui); text-align: center; background: var(--paper); }
.chi-ans code { font-size: 13px; background: var(--paper); padding: 0 4px; border: 1px solid var(--line); }
.chi-b a { color: var(--ink); }
.chi-src, .chi-also, .chi-note { font-size: 12px; color: var(--mute); }
.chi-more { font: inherit; font-weight: 600; padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; cursor: pointer; }
.chi-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 12.5px; }
.chi-do:empty { display: none; }
.chi-fb { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--mute); }
.chi-yes, .chi-no { font: inherit; padding: 2px 4px; border: 0; background: none; color: var(--mute); cursor: pointer; }
.chi-no { text-decoration: underline; } .chi-yes:hover, .chi-no:hover, .chi-yes:focus-visible, .chi-no:focus-visible { color: var(--ink); }
.chi-full { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.chi-news { margin: 0 0 8px; padding-left: 18px; } .chi-news li { margin: 2px 0; }
/* steps, one at a time */
.chi-steps { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 6px; }
.chi-steps li { padding-left: 2px; } .chi-steps li::marker { font-weight: 700; }
.chi-steps li.on { font-weight: 600; } .chi-steps li.seen { color: var(--mute); }
.chi-stepbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; font-size: 12.5px; }
.chi-count { margin-left: auto; color: var(--mute); }
.chi-pts { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; }
@media (prefers-reduced-motion: no-preference) { .chi-steps li.on { animation: chiStep .28s ease-out; } }
@keyframes chiStep { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* her moods (moving pixel pictures) and the typing demo */
.chi-stk { margin: 0 0 6px; line-height: 0; }
.chi-face .s-red { fill: var(--ft-red); } .chi-face .s-blue { fill: var(--ft-blue); } .chi-face .s-green { fill: var(--ft-green); } .chi-face .s-ink { fill: var(--ink); }
.chi-face .stk-blush { opacity: .55; }
.chi-face.stk .d-e, .chi-face.stk .d-p { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .chi-face.stk .stk-duck { animation: stkHop 1.1s steps(1) infinite; }
  .chi-face.stk.m-think .stk-duck, .chi-face.stk.m-sleepy .stk-duck { animation: none; }
  .stk-wave { animation: stkAlt .5s steps(1) infinite; } .stk-wave.b { animation-delay: .25s; }
  .stk-rise { animation: stkRise 1.6s steps(4) infinite; } .stk-rise.b { animation-delay: .8s; }
  .stk-blink { animation: stkAlt 1s steps(1) infinite; }
  .stk-fall { animation: stkFall 1.2s steps(6) infinite; }
}
@keyframes stkHop { 0%, 50% { transform: translateY(0); } 25% { transform: translateY(-2px); } }
@keyframes stkAlt { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes stkRise { from { transform: translateY(2px); opacity: 1; } to { transform: translateY(-2px); opacity: 0; } }
@keyframes stkFall { from { transform: translateY(-1px); opacity: 1; } to { transform: translateY(13px); opacity: .2; } }
.chi-demo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 8px; margin: 0 0 8px; padding: 8px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; }
.chi-demo-k { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border: 1.5px solid var(--ink); border-bottom-width: 2.5px; font-weight: 600; font-size: 12px; }
.chi-demo-line { overflow: hidden; white-space: nowrap; border-bottom: 1.5px solid var(--ink); padding: 2px 0; }
.chi-demo-line i { display: inline-block; font-style: normal; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; }
.chi-demo-chip { grid-column: 2; justify-self: start; padding: 2px 8px; background: var(--ink); color: var(--on-ink); font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .chi-demo-k { animation: demoKey 5s steps(1) infinite; }
  .chi-demo-line i { animation: demoType 5s steps(26) infinite; border-right: 1.5px solid var(--ink); }
  .chi-demo-chip { animation: demoChip 5s steps(1) infinite; }
}
@keyframes demoKey { 0%, 6% { transform: translateY(2px); border-bottom-width: 1.5px; } 7%, 100% { transform: none; } }
@keyframes demoType { 0%, 10% { max-width: 0; } 55%, 100% { max-width: 100%; } }
@keyframes demoChip { 0%, 58% { opacity: 0; } 60%, 100% { opacity: 1; } }
.chi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Chichi's friends come over to dance: the standby companions in a small box inside her panel */
.chi-stage { position: relative; left: auto; right: auto; bottom: auto; height: 104px; margin: 6px 0 2px; overflow: hidden; border-bottom: 1px solid var(--line); pointer-events: none; }
.chi-stage.still { height: auto; border: 0; }
/* the person joins in: a tap makes a dancer jump, a stroke is a pat (a swipe up or down still scrolls the chat) */
.chi-stage.play { pointer-events: auto; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.chi-stage-say { margin: 2px 0 4px; font-size: 12px; color: var(--mute); }
.chi-mem { margin: 4px 0 8px; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.chi-chip { font: inherit; font-size: 12.5px; text-align: left; padding: 5px 9px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.chi-chip:hover { background: var(--ink); color: var(--on-ink); }
.chi-form { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1.5px solid var(--line); }
.chi-in { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 10px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); }
.chi-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.chi-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
@media (prefers-reduced-motion: no-preference) { .chi-dots i { animation: chiDot 1s infinite; } .chi-dots i:nth-child(2) { animation-delay: .15s; } .chi-dots i:nth-child(3) { animation-delay: .3s; } }
@keyframes chiDot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (max-width: 760px) { .chichi { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; border-width: 0; border-top-width: 4px; } }

/* touch screens wider than a phone (iPad, Android tablets, an open Fold): there is no hover, so what a mouse finds by resting on a row must be there already */
@media (hover: none) {
  .pj-pin { opacity: .45; }
  .pj-item.pinned .pj-pin { opacity: 1; }
  .cal-add { opacity: .5; width: 30px; height: 30px; }
  .g-bar.milestone .h.r::after { opacity: 1; transform: none; }
}
/* between a phone and a laptop (iPad upright, an open Fold, 8 to 11 inch Android tablets: 761 to 820 px): the project list keeps its own
   narrow column. Stacked above the project, as it was, the project itself started a whole screen further down. */
@media (min-width: 761px) and (max-width: 820px) {
  .pj { grid-template-columns: 224px minmax(0, 1fr); }
  .pj-list { border-right: 1px solid var(--line); border-bottom: 0; }
  .pj-detail { padding: 8px 18px 60px; }
  /* the list in a narrow column: the long progress bars become a short mark, so names get the width */
  .pj-row { grid-template-columns: 26px minmax(0, 1fr); padding: 9px 36px 9px 0; }
  .pj-bar, .pj-row:hover .pj-bar { width: 10px; }
  .pj-row.sel .pj-bar { width: 16px; }
  .pj-cat, .pj-found { margin-left: 26px; padding-right: 8px; }
  button.pj-cat { width: calc(100% - 26px); }
  .pj-addp { margin-left: 26px; }
  .pj-tools { margin-left: 26px; padding-right: 12px; }
  .pj-name { overflow-wrap: anywhere; }
}
/* petty cash filter: the chosen one read grey on black and sat at the top of its box */
.cash-f button { align-items: center; }
.cash-f button[aria-pressed="true"] .ls-name { color: inherit; }
/* icon picker: packs (Work, Bills, Money...), a suggestion read from the snippet's words */
.ic-pop { width: 312px; }
.ic-packs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: -2px -2px 0; }
.ic-packs::-webkit-scrollbar { display: none; }
.ic-packs button { flex: none; padding: 6px 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--mute); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ic-packs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.ic-sug { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px dashed var(--gold); background: none; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.ic-sug span { font-size: 18px; line-height: 1; }
.ic-sug:hover, .ic-sug:focus-visible { background: var(--wash); }
.ic-grid button { min-height: 32px; }
/* a snippet that is a web address: it reads as a link, a press opens it */
.clip-body.is-url .clip-text { color: var(--ft-blue); text-decoration: underline; text-underline-offset: 2px; }
.clip-body.is-url .clip-text::after { content: ' \2197'; text-decoration: none; display: inline-block; color: var(--mute); }
.ic-pop > * { min-width: 0; } .ic-pop { grid-template-columns: minmax(0, 1fr); }
.tour-ask .tour-lost { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--mute); }

/* under the Chat tab: the way to the chat's own page (web/chat/), which a computer can install as an app */
.chat-applink { margin: -2px 0 8px; font-size: 13px; color: var(--mute); text-align: right; }
.chat-applink a { display: inline-flex; align-items: center; gap: 5px; vertical-align: bottom; }
.chat-applink a { color: var(--ink); text-underline-offset: 3px; }
@media (hover: none) { .chat-applink span { display: none; } }

/* reminder form: earlier times of this reminder, each a press away (owner, 4 Oct 2026) */
.r-was { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 12.5px; color: var(--mute); }
.was-chip { font: inherit; font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.was-chip:hover, .was-chip:focus-visible { border-color: var(--ink); }
@media (hover: none) { .was-chip { padding: 8px 12px; font-size: 13.5px; } }
/* a date in the title that passed lately was read as next year: said under Date, one press for this year (13 Oct 2026) */
.r-year .yr-chip { border-color: var(--gold); }
.r-year .yr-chip.on { border-color: var(--line); }
/* the tour's card on a phone: smaller type and less padding, so more of the page it talks about stays in view */
@media (max-width: 760px) { .tour-card { padding: 12px 14px 10px; } .tour-card h3 { font-size: 16.5px; margin-bottom: 4px; } .tour-card p { font-size: 13.5px; line-height: 1.45; margin-bottom: 8px; } .tour-ask { padding: 7px 10px; margin-bottom: 9px; } }

/* the tab of the page you are on was pressed: it is asking the server again */
body.tab-fresh .views button[aria-current="page"] { animation: tabFresh .7s ease-in-out infinite; }
@keyframes tabFresh { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { body.tab-fresh .views button[aria-current="page"] { animation: none; opacity: .6; } }

/* ---------- One scrollbar (owner, 5 Oct 2026: "multiple scrollbar on the window, as it is hard to navigate") ----------
   A page that scrolls AND holds a box that scrolls by itself makes the wheel stop in the wrong place. On a computer:
   - Chat tab of a project: the window does not scroll. The chat ends at the window's edge (app.js fitChat) and only its messages
     scroll; the project list beside it scrolls by itself, like the list of chikutik Chat.
   - Gantt: the chart takes the room between the page head and the legend and scrolls inside it; the window stays still.
   - Member plans on a project page: the list is as long as it is (a rule meant for the Edit project dialog had boxed it at 232 px). */
@media (min-width: 761px) {
  body.chat-on #view-projects { padding-bottom: 0; min-height: 0; }
  body.chat-on .pj { min-height: 0; align-items: start; }
  body.chat-on .pj-list { position: sticky; top: 110px; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 16px; }
  body.chat-on .pj-detail { padding-bottom: 12px; }
  /* a class, not :has(): with :has() here every small change anywhere (a table cell, a toast) restyled all 3,500 elements of the page */
  #view-gantt.g-chart:not([hidden]) { display: flex; flex-direction: column; height: 100vh; min-height: 0; padding-bottom: 14px; }
  #view-gantt.g-chart:not([hidden]) > * { flex: none; }
  #view-gantt.g-chart:not([hidden]) > #gantt { flex: 0 1 auto; min-height: 220px; max-height: none; }
}
.pjd-plans .pp-list { max-height: none; overflow: visible; }

/* a photo from my phone (app.js snapFromPhone / snapSend) */
.snap-modal { width: min(380px, calc(100vw - 28px)); text-align: center; padding: 22px 22px 16px; box-sizing: border-box; }
.snap-modal .row-actions { margin-top: 4px; }
@media (max-width: 760px) { .snap-modal.phone { padding: 28px 18px 18px; } .snap-modal.phone .snap-state { min-height: 3em; } }
.snap-modal h2 { margin: 0 0 10px; font-size: 18px; }
.snap-qr { width: min(220px, 62vw); aspect-ratio: 1; margin: 4px auto 10px; border-radius: 10px; overflow: hidden; background: var(--qr-paper); }
.snap-qr svg { width: 100%; height: 100%; display: block; }
.snap-qr.old { opacity: .25; }
.snap-qr-bg { fill: var(--qr-paper); }
.snap-qr-fg { fill: var(--qr-ink); }
.snap-say { margin: 0 0 8px; color: var(--mute); font-size: 14px; line-height: 1.45; }
.snap-state { margin: 0 0 12px; min-height: 1.4em; font-weight: 600; }
.snap-modal.phone .snap-pick { display: flex; justify-content: center; align-items: center; min-height: 52px; margin: 0 0 10px; font-size: 16px; cursor: pointer; }
.snap-modal.busy .snap-pick { opacity: .5; pointer-events: none; }
.rc-phone { margin: 6px 0 0; width: auto; justify-self: start; align-self: flex-start; }

/* move a reminder in one press (laterDialog) */
.lt-modal { width: min(440px, calc(100vw - 24px)); }
.lt-what { margin: 0 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.lt-i { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lt-i b { font-weight: 500; }
.lt-i span { color: var(--mute); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lt-i:hover, .lt-i:focus-visible { background: var(--wash); outline: none; box-shadow: inset 3px 0 0 var(--ink); padding-left: 10px; }
.lt-own { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 14px; }
.lt-own label { display: grid; gap: 4px; font-size: 12px; color: var(--mute); min-width: 0; }
.lt-own input { width: 100%; min-width: 0; }
@media (max-width: 420px) { .lt-own { grid-template-columns: 1fr 1fr; } .lt-own .btn { grid-column: 1 / -1; } }
.qa-year { height: auto; min-height: 22px; white-space: normal; text-align: left; padding: 2px 8px; border-color: var(--gold); line-height: 1.35; }
.au-row.run .au-title { font-weight: 600; }
.au-row.auto { opacity: .75; }
.au-runb { font-size: 12.5px; white-space: nowrap; }

/* the project list: the bar is a mark, the names get the room (owner's walk, 6 Oct 2026: half of the 300 px column was the bar,
   names had 109 px and wrapped to three lines, 11 projects needed 1,117 px) */
.pj-allbtn { display: none; }
.hp-q { display: block; width: calc(100% - 32px); margin: 4px 16px 6px; font: 400 16px var(--font); padding: 8px 0; border: 0; border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink); }
.hp-q:focus { outline: none; border-bottom-color: var(--ink); }
.hp-i[hidden] { display: none; }
@media (min-width: 821px) {
  .pj-cat { margin-left: 72px; }
  button.pj-cat { width: calc(100% - 72px); }
  .pj-row { grid-template-columns: 72px 1fr; }
  .pj-bar { width: calc(14px + var(--p) * .42px); }
  .pj-row:hover .pj-bar { width: calc(20px + var(--p) * .42px); }
  .pj-row.sel .pj-bar { width: 62px; }
  .pj-addp, .pj-found { margin-left: 72px; }
}
/* the list stays in sight on every tab, not only Chat: halfway down a long Gallery or Links tab it used to be gone */
@media (min-width: 761px) {
  .pj { align-items: start; }
  .pj-list { border-right: 0; }
  /* only while the whole list fits the window (app.js `pjStick`): a list taller than that would need a scroller of its own, and
     two scrollers on one page is what the owner asked to be rid of on 5 Oct ("One scrollbar") */
  .pj-list.stick { position: sticky; top: 110px; }
  .pj-detail { border-left: 1px solid var(--line); min-height: calc(100vh - 170px); }
}

/* ---------- petty cash card: one row of buttons above the entries, the rest in two menus (7 Oct 2026) ---------- */
.cs-body { display: flex; flex-direction: column; gap: 10px; }
.cs-body[hidden] { display: none; }
.cs-acts { padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-acts .btn.primary .cs-n { background: var(--on-ink); color: var(--ink); }
.cs-menu { position: relative; }
.cs-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cs-menu > summary::-webkit-details-marker { display: none; }
.cs-menu > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.cs-acts .cs-menu[open] > summary.btn, .cs-acts .cs-menu[open] > summary.btn:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cs-menu[open] > summary svg { transform: rotate(180deg); }
.cs-pop { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 250px; max-width: min(320px, calc(100vw - 32px)); background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: 4px 0; display: flex; flex-direction: column; }
.cs-menu[data-csm="add"] .cs-pop { left: 0; right: auto; }
.cs-mi { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 9px 14px; background: none; border: 0; text-align: left; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.cs-mi b { font-weight: 500; }
.cs-mi small { font-size: 11.5px; color: var(--mute); }
.cs-mi:hover, .cs-mi:focus-visible { background: var(--wash); outline: none; }
.cs-mi.danger { border-top: 1px solid var(--line); margin-top: 4px; }
.cs-mi.danger b { color: var(--red); }
.cs-folded { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--mute); }
.cs-earlier td { padding: 6px 0; font-size: 12.5px; color: var(--mute); }
.cs-earlier td span { margin-left: 10px; }
.cs-start { margin: 0; font-size: 13px; color: var(--ink-2); }
.imp-tpl { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--line); background: var(--wash); font-size: 12.5px; color: var(--ink-2); }
.imp-tpl .btn { flex: none; text-decoration: none; }
@media (min-width: 761px) {
  /* the row stays in reach while a long month scrolls under it */
  .cs-fund .cs-acts { position: sticky; top: var(--cs-top, 64px); z-index: 5; background: var(--paper); }
  .cs-fund.closed .cs-acts { background: var(--wash); }
}
@media (max-width: 760px) {
  .cs-acts .spacer { display: none; }
  .cs-acts > .btn.primary { flex: 1 1 100%; height: 44px; }
  .cs-pop, .cs-menu[data-csm="add"] .cs-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: none; z-index: 60; }
  .cs-mi { padding: 12px 14px; font-size: 15px; }
  .cs-fund .cs-table tr.cs-earlier { display: block; }
  .imp-tpl { flex-direction: column; align-items: flex-start; }
}
/* invite a friend: a message to copy or open in WhatsApp */
.tf-say { font: inherit; font-size: 14.5px; line-height: 1.5; resize: vertical; min-height: 120px; width: 100%; }
.tf-bonus { margin: 10px 0 0; padding: 10px 12px; background: var(--wash); border-left: 3px solid var(--gold); font-size: 13.5px; line-height: 1.45; }
.tf-bonus span { display: block; margin-top: 4px; color: var(--mute); }
.tf-acts { flex-wrap: wrap; row-gap: 8px; }
.tf-acts a.btn { text-decoration: none; }
@media (max-width: 560px) { .tf-acts .spacer { display: none; } .tf-acts .btn { flex: 1 1 auto; } .tf-acts .btn.primary { flex-basis: 100%; order: -1; } }

/* A reviewer's first day (7 Oct 2026): one guide on the fund's card, three numbered lines in the review, and the tick inside the entry. */
/* deleted entries, told and noted (31 Oct 2026, migration *_cash_removals.sql) */
.cs-gonebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 10px 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--ft-amber); background: var(--wash); font-size: 14px; }
.cs-gonebar p { margin: 0; display: grid; gap: 2px; min-width: 0; }
.cs-gonebar small { color: var(--mute); }
.rv-gone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.rv-gone p { margin: 0; } .rv-gone span { color: var(--mute); }
.cs-gonelist { display: grid; gap: 12px; }
.cg-wait { margin: 0; font-weight: 600; color: var(--ft-amber); }
.cg-row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); min-width: 0; }
.cg-row.wait { border-left: 3px solid var(--ft-amber); }
.cg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cg-head b { min-width: 0; overflow-wrap: anywhere; }
.cg-amt { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cg-meta, .cg-by { margin: 0; font-size: 13px; color: var(--mute); }
.cg-by { color: var(--ink-2); }
.cg-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cg-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.cg-tag.warn { border-color: var(--ft-amber); color: var(--ft-amber); }
.cg-tag.ok { border-color: var(--ft-green); color: var(--ft-green); }
.cg-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cg-notes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; overflow-wrap: anywhere; }
.cg-notes li small { color: var(--mute); }
.cg-notes li.mark svg { width: 14px; height: 14px; color: var(--ft-green); align-self: center; }
.cg-say { display: grid; gap: 6px; }
.cg-say textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.cg-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cs-revguide { display: grid; gap: 8px; margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--ft-green); background: var(--wash); font-size: 14px; }
.cs-revguide b { font-size: 15px; }
.cs-revguide ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink); }
.cs-revguide > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rv-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--mute); }
.rv-how span { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: var(--wash); border: 1px solid var(--line); }
.rv-how b { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font-size: 12px; }
.cs-revtick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 0; padding: 10px 12px; background: var(--wash); border-left: 3px solid var(--gold); font-size: 13.5px; color: var(--mute); }
.cs-revtick .btn { display: inline-flex; align-items: center; gap: 6px; }
.cs-revtick svg { width: 16px; height: 16px; flex: none; }
.cs-revtick.done { border-left-color: var(--ft-green); color: var(--ink); }
.cs-revtick.done svg { color: var(--ft-green); }
@media (max-width: 620px) { .rv-how { grid-template-columns: 1fr; gap: 4px; } .rv-how span { padding: 6px 8px; } }

/* Chichi hides behind the end of the logo, badly (7 Oct 2026; owner: "peeking from side logo"): she stands BEHIND the wordmark's last letter
   (the brand is painted above her), most of her sticking out. Hover, focus and `.up` bring her out whole. */
.brand { position: relative; z-index: 1; }
.chi-peek { flex: none; position: relative; z-index: 0; align-self: center; width: 24px; height: 24px; margin: 0 0 0 -29px; padding: 0; border: 0; background: none; cursor: pointer; } /* -(the row's gap + the brand's margin + 1): her box starts at the last letter's edge */
.chi-peek[hidden] { display: none; }
.chi-peek-in { display: block; width: 24px; height: 24px; transform: translateX(-9px); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.chi-peek:hover .chi-peek-in, .chi-peek:focus-visible .chi-peek-in, .chi-peek.up .chi-peek-in { transform: translateX(2px); }
.chi-peek:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chi-peek svg { display: block; }
@media (prefers-reduced-motion: reduce) { .chi-peek-in { transition: none; } }
@media (max-width: 1299px) { .chi-peek { margin-left: -21px; } } /* the row's gap is 6 px up to there */
/* how she hides (app.js `peekMood`): over = behind the top of the last letters, deep = only a sliver out, out = stepped out whole */
.chi-peek[data-hide="over"] .chi-peek-in { transform: translate(-15px, -10px); }
.chi-peek[data-hide="deep"] .chi-peek-in { transform: translateX(-16px); }
.chi-peek[data-hide="out"] .chi-peek-in { transform: translateX(2px); animation: chiHop 2.4s steps(1) infinite; }
.chi-peek:hover .chi-peek-in, .chi-peek:focus-visible .chi-peek-in, .chi-peek.up .chi-peek-in { transform: translateX(2px); animation: none; }
@keyframes chiHop { 0%, 86% { translate: 0 0; } 90% { translate: 0 -3px; } 94% { translate: 0 0; } 97% { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { .chi-peek[data-hide="out"] .chi-peek-in { animation: none; } }
/* up to 959 px the logo is its mark alone, and phones have no logo in the header: she hides behind a post of her own, far too thin for her */
@media (max-width: 959px) {
  .chi-peek { width: 26px; margin: 0 6px 0 2px; overflow: hidden; border-left: 4px solid var(--ink); box-sizing: content-box; }
  .chi-peek-in { transform: translateX(-10px); }
  .chi-peek[data-hide="over"] .chi-peek-in { transform: translate(-8px, 5px); } /* no letters to stand behind: she ducks low behind her post */
  .chi-peek[data-hide="deep"] .chi-peek-in { transform: translateX(-17px); }
  .chi-peek[data-hide="out"] .chi-peek-in, .chi-peek:hover .chi-peek-in, .chi-peek:focus-visible .chi-peek-in, .chi-peek.up .chi-peek-in { transform: translateX(1px); }
}
.chi-m.bot .chi-b { max-width: 92%; }

/* From your team (owner, 8 Oct 2026): what teammates added or changed, a card that comes up now and then (app.js teamNewsShow) */
.tn-card { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 372px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-top: 4px solid var(--gold); box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .55);
  transform-origin: 100% 100%; animation: tnIn .46s cubic-bezier(.2, 1.25, .35, 1); }
.tn-card.out { animation: tnOut .26s ease-in forwards; }
@keyframes tnIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes tnOut { to { opacity: 0; transform: translateY(12px) scale(.97); } }
body:has(.tn-card) .toasts { bottom: calc(var(--tn-h, 260px) + 38px); }
/* the work question's card (workAsk): the team card's frame, chips that scroll when a phone is short */
.wk-card .tn-head { padding-bottom: 8px; }
.wk-cbody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 16px 4px; }
.wk-card .tn-foot { margin-top: 10px; flex-wrap: wrap; }
.wl-work { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.tn-head { display: flex; align-items: center; gap: 12px; padding: 14px 6px 10px 16px; }
.tn-faces { display: inline-flex; flex: none; }
.tn-face { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px/1 inherit; font-style: normal; letter-spacing: .02em;
  border: 2px solid var(--paper); margin-left: -9px; background: var(--ink); color: var(--on-ink); }
.tn-face:first-child { margin-left: 0; }
.tn-face.t1 { background: var(--gold); color: var(--on-gold); }
.tn-face.t2 { background: var(--note-blue); color: var(--ink); }
.tn-face.t3 { background: var(--note-green); color: var(--ink); }
.tn-face.more { background: var(--wash); color: var(--ink); }
.tn-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tn-ttl b { font-size: 15.5px; }
.tn-ttl small { font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.tn-head .t-x { align-self: flex-start; width: 30px; height: 30px; margin-top: -6px; border: 0; background: none; color: var(--mute); display: grid; place-items: center; padding: 0; cursor: pointer; }
.tn-head .t-x:hover, .tn-head .t-x:focus-visible { color: var(--ink); background: var(--wash); }
.tn-head .t-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tn-list { list-style: none; margin: 0; padding: 0 16px; overflow: auto; overscroll-behavior: contain; }
.tn-p { padding: 10px 0 12px; border-top: 1px solid var(--line); animation: tnRow .4s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
@keyframes tnRow { from { opacity: 0; transform: translateX(10px); } }
.tn-pn { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tn-pn b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tn-pn small { flex: 1 0 auto; max-width: 62%; text-align: right; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
.tn-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tn-chip { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .15s, transform .15s; }
.tn-chip:hover, .tn-chip:focus-visible { background: var(--wash); transform: translateY(-1px); }
.tn-b { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; align-items: center; width: 100%; margin-top: 8px; padding: 7px 10px; text-align: left;
  font: inherit; color: var(--ink); background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--gold); cursor: pointer; }
.tn-b.changed { border-left-style: dotted; }
.tn-b:hover, .tn-b:focus-visible { border-color: var(--ink); border-left-color: var(--gold); }
.tn-b svg { grid-row: span 2; }
.tn-b span { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-b small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-more { margin-top: 6px; font-size: 12.5px; }
.tn-rest { margin: 6px 16px 0; align-self: flex-start; font-size: 12.5px; }
.tn-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .tn-card, .tn-card.out, .tn-p { animation: none; } }

/* chikutik Chat in the header (owner, 8 Oct 2026): only for someone in a team; the number = unread in rooms + private messages */
#btn-chat { position: relative; text-decoration: none; }
#btn-chat .nav-new { top: 1px; right: -2px; }

/* Chichi takes bug reports (owner, 8 Oct 2026; chichi.js bugForm) */
.chi-bugbtn { flex: none; font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; cursor: pointer; }
.chi-bugbtn:hover, .chi-bugbtn:focus-visible { border-color: var(--ink); }
.chi-bug { display: grid; gap: 8px; }
.chi-bug p { margin: 0; }
.chi-bugt { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); resize: vertical; min-height: 84px; }
.chi-bugpics { display: flex; flex-wrap: wrap; gap: 8px; }
.chi-bugpics:empty { display: none; }
.chi-bugpic { position: relative; width: 76px; height: 76px; border: 1px solid var(--line); background: var(--wash); }
.chi-bugpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chi-bugpic button { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.chi-bugadd { display: flex; flex-wrap: wrap; gap: 8px; }
.chi-bugadd label { cursor: pointer; }
.chi-bugmsg { font-size: 12.5px; color: var(--red, var(--ink)); }
.chichi.chi-away, .chichi.chi-away::backdrop { opacity: 0 !important; transition: none !important; }
@media (max-width: 760px) { .chi-bugbtn { padding: 5px 8px; font-size: 12px; } .chi-bugt { font-size: 16px; } }

/* a holder about to log the box's spending as a claim (9 Oct 2026), and moving claims into the petty cash */
.claim-cash { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--wash); font-size: 13px; color: var(--ink); }
.claim-cash[hidden] { display: none; }
.claim-cash span { flex: 1 1 220px; }
.tc-list { margin: 10px 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 46vh; overflow: auto; }
.tc-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tc-list li b { font-weight: 500; overflow-wrap: anywhere; }
.tc-list li span:first-child, .tc-list li span:last-of-type { color: var(--mute); white-space: nowrap; }
.tc-list li small { grid-column: 2 / -1; color: var(--red-text, var(--mute)); }
.tc-list li.off { opacity: .55; }

/* Check one by one (owner, 10 Oct 2026): the receipt large on the left, what the entry says on the right */
.cs-modal.cs-step { width: min(1120px, calc(100vw - 32px)); }
.rv-stepbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.rv-stepbar small { color: var(--mute); font-size: 12.5px; }
.st-pos { margin-top: 0; }
.st-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.st-view .cs-vpic { height: min(66vh, 640px); }
.st-nopic { height: min(40vh, 320px); display: grid; place-content: center; gap: 4px; text-align: center; border: 1.5px dashed var(--line); background: var(--wash); }
.st-nopic small { color: var(--mute); }
.st-facts { display: grid; gap: 10px; min-width: 0; }
.st-date { margin: 0; color: var(--mute); font-size: 13px; }
.st-title { margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.st-amt { margin: 0; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-amt.in { color: var(--ft-green); }
.st-parts li { grid-template-columns: auto auto minmax(0, 1fr) !important; align-items: center; padding: 2px 4px; }
.st-parts li::before { display: none; }
.st-parts small { color: var(--mute); }
.st-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13.5px; }
.st-dl dt { color: var(--mute); } .st-dl dd { margin: 0; overflow-wrap: anywhere; }
.st-flags { margin: 0; } .st-clean { margin: 0; color: var(--mute); font-size: 13px; }
.st-ask { display: grid; gap: 6px; } .st-ask textarea { width: 100%; font: inherit; }
.st-q { margin: 0; font-size: 13px; }
.st-acts { flex-wrap: wrap; position: sticky; bottom: 0; background: var(--paper); padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-view .cs-vpic { height: 38vh; height: 38dvh; }
  .st-view .cs-view { border-bottom: 1px solid var(--line); box-shadow: 0 6px 8px -6px rgba(0, 0, 0, .18); }
  .st-nopic { height: auto; padding: 18px 12px; }
  .st-acts .btn { flex: 1 1 auto; }
  .st-acts .spacer { display: none; }
}
@media (max-width: 760px) { /* one month: two short number columns, so the item's name may wrap instead of being cut */
  .pv-table.one .pv-n { width: auto; min-width: 0; max-width: none; white-space: normal; }
  .pv-table.one .pv-t { position: static; }
}
/* petty cash, 10 Oct 2026: add up the photos, category chips, same as last time */
.cs-tallyon { font-size: 12.5px; }
.cs-tally { display: grid; gap: 6px; padding: 8px 10px; background: var(--wash); border-left: 3px solid var(--gold); }
.cs-tally label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.cs-tally input { font-size: 16px; font-variant-numeric: tabular-nums; }
.cs-tallysay { display: grid; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cs-tallysay small { color: var(--mute); }
.cs-tallysay b.ok::before { content: "✓ "; }
.cs-tallysay b.warn { color: var(--red); }
.cs-tallyacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cs-ocrsay { display: grid; gap: 2px; padding: 6px 8px; background: var(--paper); border-radius: 6px; }
.cs-ocrbtn[disabled] { opacity: 1; cursor: progress; }
.st-talon { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.st-talon small { color: var(--mute); font-size: 12.5px; }
.cs-catchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.cs-cchip { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.cs-cchip:hover, .cs-cchip:focus-visible { border-color: var(--ink); }
.cs-cchip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cs-cchip.sug { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
.cs-again { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 10px; background: var(--wash); }
.cs-again small { color: var(--mute); font-size: 12.5px; }

/* the month's every-day reminders, once, above the grid (renderCal dailyBar); their cells show only where each stands next */
.cal-daily { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 6px 0 8px; border-bottom: 1px dashed var(--line); margin-bottom: 4px; font-size: 12.5px; }
.cal-daily .cal-dl { color: var(--mute); font-size: 12px; margin-right: 4px; }
.cal-daily .cal-dli { margin: 0; max-width: 260px; }
.cal-daily .cal-dli small { color: var(--mute); font-size: 11px; }
.cal-daily .cal-dlt { margin-left: auto; font-size: 12px; }
/* the Gantt's undated tasks wait in one folded row */
.g-row.g-undated .g-label .link.gl-title { font-weight: 600; text-align: left; }
.g-row.g-undated:not(.project) .g-track { background: repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--line) 50%, transparent) 22px 23px); opacity: .5; }
/* the narrow calendar draws its items as thin marks without words; the every-day line keeps its words and stays pressable */
@media (max-width: 760px) {
  .cal-daily .cal-it.cal-dli { font-size: 12px; line-height: 18px; height: auto; padding: 0 6px; margin: 0; pointer-events: auto; width: auto; border-radius: 0; background: none; justify-self: auto; }
  .cal-daily .cal-it.cal-dli::before { display: inline-block; }
  .cal-daily { padding-left: 2px; padding-right: 2px; }
}

/* What changed in Links: a drawer from the right (a dialog, so Esc and Back close it) */
.ln-newsb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-left: auto; margin-right: 8px; }
.ln-newsb svg { flex: none; }
.ln-newsn { font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--on-gold); display: inline-flex; align-items: center; justify-content: center; }
dialog.ln-news { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(640px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; padding: 0; border: 0; border-left: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; box-shadow: -18px 0 40px -24px rgba(0, 0, 0, .35); }
dialog.ln-news:not([open]) { display: none; }
dialog.ln-news[open] { animation: lnIn .32s var(--ease); }
@keyframes lnIn { from { transform: translateX(40px); opacity: 0; } }
dialog.ln-news::backdrop { background: color-mix(in srgb, var(--paper) 40%, transparent); }
.ln-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 10px; }
.ln-head > div { flex: 1; min-width: 0; }
.ln-head h2 { font-size: 20px; margin: 0; }
.ln-head p { margin: 2px 0 0; color: var(--mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 24px 12px; border-bottom: 1.5px solid var(--ink); }
.ln-sp { flex: 1; }
.ln-chip { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.ln-chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ln-whosel { font: inherit; font-size: 12.5px; max-width: 160px; }
.ln-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 0 24px; }
.ln-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.ln-table thead th { position: sticky; top: 0; background: var(--paper); text-align: left; font-weight: 500; font-size: 11.5px; color: var(--mute); padding: 10px 8px 6px; border-bottom: 1px solid var(--line); z-index: 1; }
.ln-table thead th:nth-child(1) { width: auto; } .ln-table thead th:nth-child(2) { width: 130px; } .ln-table thead th:nth-child(3) { width: 56px; } .ln-table thead th:nth-child(4) { width: 92px; }
.ln-day th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 14px 8px 4px; border-bottom: 1px solid var(--line); }
.ln-row { cursor: pointer; }
.ln-row td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow: hidden; }
.ln-row:hover td, .ln-row:focus-visible td { background: var(--wash); }
.ln-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ln-wi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ln-wi > span { display: flex; flex-direction: column; min-width: 0; }
.ln-what b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-what small { color: var(--mute); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-who { white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.ln-ini { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 9.5px; font-style: normal; font-weight: 600; margin-right: 6px; vertical-align: middle; }
.ln-when { color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-how { white-space: nowrap; }
.ln-tag { font-size: 11px; padding: 2px 7px; border: 1px solid var(--line); color: var(--ink-2); }
.ln-tag.new { border-color: color-mix(in srgb, var(--ft-green) 60%, var(--line)); color: var(--ft-green); }
.ln-tag.changed { border-color: color-mix(in srgb, var(--ft-amber) 60%, var(--line)); color: var(--ft-amber); }
.ln-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-left: 6px; vertical-align: middle; }
.ln-row.unseen .ln-what b { font-weight: 600; }
.ln-empty { color: var(--mute); padding: 28px 0; }
.ln-foot { margin: 0; padding: 10px 24px 16px; border-top: 1px solid var(--line); color: var(--mute); font-size: 12px; }
.ln-meta { display: none !important; }
@media (max-width: 480px) { /* a narrow phone: one column, who, time and Added / Changed on a line under the name */
  .ln-table thead, .ln-who, .ln-when, .ln-how { display: none; }
  .ln-table, .ln-table tbody, .ln-row, .ln-row td.ln-what { display: block; width: 100%; }
  .ln-day { display: block; } .ln-day th { display: block; }
  .ln-meta { display: block !important; margin-top: 2px; color: var(--ink-2) !important; }
  .ln-meta .ln-tag { display: inline-block; line-height: 1.3; }
}
.card.crow.flash { animation: lnkFlash 2.4s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { dialog.ln-news[open] { animation: none; } .card.crow.flash { animation: none; outline: 2px solid var(--gold); outline-offset: -2px; } }
@media (max-width: 760px) {
  .ln-newsb span { display: none; }
  dialog.ln-news { width: 100vw; border-left: 0; }
  .ln-head { padding: calc(14px + env(safe-area-inset-top)) 16px 8px; }
  .ln-filters { padding: 4px 16px 10px; }
  .ln-scroll { padding: 0 8px 0 16px; }
  .ln-table thead th:nth-child(2) { width: 84px; } .ln-table thead th:nth-child(3) { width: 48px; } .ln-table thead th:nth-child(4) { width: 70px; }
  .ln-tag { font-size: 10px; padding: 1px 4px; }
  .ln-who .ln-ini { display: none; }
  .ln-foot { padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* A public link for an announcement's PDF (openDocShare in app.js): the link, its end date, and who read it */
.ds-modal { width: min(620px, calc(100vw - 32px)); }
.ds-modal .ds-url { font-size: 14px; }
.ds-modal .ds-acts { flex-wrap: wrap; gap: 8px; }
.ds-modal .ds-made { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds-modal .ds-made select { font-size: 13px; padding: 2px 26px 2px 8px; width: auto; }
.ds-stats { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.ds-stats h3 { font-size: 15px; } .ds-stats h4 { font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 6px 0 0; }
.ds-sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ds-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-days .chip { padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12.5px; } /* the period picked reads as picked (the PDF link's and a board link's numbers) */
.ds-days .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ds-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ds-kpi div { background: var(--wash); padding: 10px 12px; display: grid; }
.ds-kpi b { font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-kpi span { font-size: 12.5px; color: var(--mute); }
.ds-bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding-top: 4px; border-bottom: 1px solid var(--line); }
.ds-bars.thin { gap: 1px; } .ds-bars.hrs { height: 56px; }
.ds-bars i { flex: 1 1 0; min-width: 2px; height: max(var(--h), 2px); background: var(--gold); border-radius: 2px 2px 0 0; }
.ds-bars i.nil { background: var(--line); }
.ds-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mute); margin-top: -4px; }
.ds-card { display: flex; gap: 14px; align-items: center; margin: 4px 0 12px; }
.ds-cardimg { flex: 0 0 240px; aspect-ratio: 1200 / 630; display: grid; place-items: center; background: var(--wash); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ds-cardimg img { width: 100%; height: 100%; display: block; }
.ds-cardimg .hint { margin: 0; padding: 8px; text-align: center; font-size: 12px; }
.ds-card figcaption { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.ds-card figcaption .hint { margin: 0; }
@media (max-width: 520px) { .ds-card { flex-direction: column; align-items: stretch; } .ds-cardimg { flex-basis: auto; } }
.ds-ver { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: var(--wash); padding: 10px 12px; }
.ds-ver .hint { flex: 1 1 260px; margin: 0; }

/* Pick several tasks and reminders (13 Oct 2026): one list with ticks, the bar at its foot changes them together */
body:not(.on-timeline) .tl-pick { display: none; }
.modal.pm-modal { width: min(660px, calc(100vw - 24px)); }
.pm-modal form.pm-form { max-height: calc(100dvh - 48px); gap: 12px; padding-bottom: 0; }
.pm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pm-top .seg button { height: 32px; padding: 0 12px; }
.pm-proj { flex: 1 1 180px; min-width: 0; max-width: 280px; }
.pm-list { flex: 1 1 auto; min-height: 120px; overflow: auto; margin: 0 -28px; padding: 0 28px; border-top: 1px solid var(--line); overscroll-behavior: contain; }
.pm-g { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; padding: 12px 0 6px; background: var(--paper); border-bottom: 1.5px solid var(--ink); font-size: 13px; }
.pm-g b { font-weight: 600; }
.pm-g small { color: var(--mute); font-variant-numeric: tabular-nums; }
.pm-g .link { margin-left: auto; font-size: 13px; }
.pm-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; flex-direction: row; font-size: 14px; }
.pm-row input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.pm-row:hover { background: var(--wash); }
.pm-row.on { background: var(--wash); box-shadow: inset 3px 0 0 var(--ink); }
.pm-k { width: 9px; height: 9px; border: 1.5px solid var(--ink); }
.pm-k.rem { border-radius: 50%; }
.pm-k.task { border-radius: 2px; }
.pm-t { min-width: 0; overflow-wrap: anywhere; }
.pm-theirs { color: var(--mute); font-size: 12px; }
.pm-w { color: var(--mute); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.pm-row.late .pm-w { color: var(--red); }
.pm-empty { padding: 24px 0; }
.pm-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 -28px; padding: 12px 28px 16px; background: var(--ink); color: var(--on-ink); }
.pm-n { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pm-n.mute { font-weight: 400; opacity: .75; }
.pm-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pm-bar .btn { color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 40%, transparent); background: none; }
.pm-bar .btn.primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.pm-bar .btn small { margin-left: 6px; opacity: .7; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pm-bar .link { color: var(--on-ink); }
.pm-opts { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pm-l { font-size: 12.5px; opacity: .75; }
.pm-l:not(:first-child) { margin-left: 6px; }
.pm-own { display: inline-flex; gap: 6px; align-items: center; }
.pm-own input, .pm-opts select { font: inherit; font-size: 13px; padding: 4px 6px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.pm-hint { flex: 1 1 100%; margin: 0; font-size: 12.5px; opacity: .8; }
.pm-back { font-size: 13px; }
.dec-pick { font-size: 13px; margin-left: auto; margin-right: 10px; }

/* the review: read every photo here to find one transfer reference on two entries (13 Oct 2026) */
.rv-scan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13px; }
.rv-scan small { color: var(--mute); }
.rv-scan.said { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-left: 3px solid var(--ft-green); background: var(--wash); }
.rv-scan.said.warn { border-left-color: var(--red); }

/* standby's insight line, and the screensaver: standby by itself after a while alone (13 Oct 2026) */
.sb-ins { display: flex; align-items: center; gap: 12px; margin-top: clamp(10px, 2.6vh, 26px); max-width: 34em; min-height: 3.2em; text-align: left; color: var(--mute); font-size: clamp(13px, 1.25vw, 17px); }
.sb-ins:empty { display: none; }
.sb-ins .chi-face { flex: none; }
.sb-ins span { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: .72em; font-weight: 600; color: var(--gold-text); }
.sb-ins p { margin: 2px 0 0; color: var(--ink-2, var(--ink)); line-height: 1.4; }
.standby.saver { cursor: none; }
.standby.saver .sb-set, .standby.saver .sb-hint, .standby.saver .sb-x { display: none; }
.standby.saver .sb-in { animation: saverDim 2s ease 600s forwards; }
@keyframes saverDim { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .standby.saver .sb-in { animation: none; opacity: .6; } }

/* the public link's numbers on an announcement card (paintAnnStats in app.js) */
.ann-acts { flex-wrap: wrap; align-items: center; }
.ann-statw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; margin-right: auto; }
.ann-stat { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.ann-stat:hover, .ann-stat:focus-visible { border-color: var(--ink); color: var(--ink); }
.ann-stat > span, .ann-stat .as-n { display: inline-flex; align-items: center; gap: 4px; }
.ann-stat b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ann-stat em { font-style: normal; color: var(--red); }
.ann-stat .as-go { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.ann-stat.has .as-go::before { content: ''; width: 1px; height: 12px; background: var(--line); margin-right: 6px; }
@media (max-width: 560px) { .ann-stat .as-go { font-size: 0; text-decoration: none; } .ann-stat .as-go::after { content: '›'; font-size: 18px; line-height: 1; color: var(--ink-2); } .ann-stat.has .as-go::before { display: none; } }

/* a short window (a laptop with the browser's bars, a phone on its side): smaller companions lower down, and the insight and other zones step aside */
@media (max-height: 720px) and (min-width: 521px) { .standby { --sb-pets: 142px; } .sb-pets { bottom: calc(34px + env(safe-area-inset-bottom)); height: 108px; } }
@media (max-height: 560px) { .standby { --sb-pets: 96px; } .sb-pets { bottom: calc(6px + env(safe-area-inset-bottom)); height: 90px; } .sb-hint { display: none; } }
@media (max-height: 460px) { .sb-ins, .sb-zones { display: none; } .sb-bar { margin: 8px 0 4px; } }

/* Share beside the public link's numbers on an announcement card */
.ann-go { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--on-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ann-go[hidden] { display: none; }
.ann-go:hover, .ann-go:focus-visible { background: var(--paper); color: var(--ink); }
.as-pop .as-url { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-pop .sec-pop-l a { font: inherit; font-size: 14px; color: var(--ink); padding: 7px 8px; text-decoration: none; }
.as-pop .sec-pop-l a:hover, .as-pop .sec-pop-l a:focus-visible { background: var(--wash); }
.as-pop .as-wait { font-size: 12px; line-height: 1.4; }

/* Petty cash: a month against another (15 Oct 2026) */
.cs-cmp { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--mute); flex-direction: row; }
.cs-cmp select { font-size: 12.5px; padding: 3px 26px 3px 8px; }
.cs-cats.cmp .cc-bar { height: 11px; display: flex; flex-direction: column; gap: 2px; background: none; }
.cs-cats.cmp .cc-bar i { height: 6px; background: var(--bar); }
.cs-cats.cmp .cc-bar i.was { height: 3px; background: var(--mute); opacity: .6; }
.cs-cats li.gone .cc-n, .cs-cats li.gone > b { color: var(--mute); }
.cc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--mute); }
.cc-key i { display: inline-block; width: 16px; height: 6px; background: var(--bar); }
.cc-key i.was { height: 3px; background: var(--mute); opacity: .6; margin-left: 8px; }
.cc-key .link { margin-left: auto; font-size: 12px; }
.cc-key .link + .link { margin-left: 14px; } /* both links together at the right, not one floating in the middle */
.cc-d { color: var(--ink-2); }
@media (max-width: 760px) { .cs-cmp { margin-left: 0; width: 100%; } .cs-cmp select { flex: 1; } }
@media (max-width: 760px) { .cs-cats .cc-labels li { grid-template-columns: minmax(0, 1fr) auto; } .cs-cats .cc-labels li small { grid-column: 1 / -1; margin-top: -2px; } }

/* Categories month by month, as a chart (openCatChart in app.js, 15 Oct 2026). Drawn in HTML so the words keep their size on a phone. The card's month is
   --bar, the month it is compared with --mute, other months --dim; series colours come from the --ft-* tokens (every theme). */
.cc-key .cc-chart { margin-left: auto; }
.cs-chart .ch-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; gap: 22px; padding-right: 2px; }
.ch-form { position: relative; }
.ch-sec h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.ch-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 4px; }
.ch-h h3 { margin: 0; }
.ch-sec > .p-meta { margin: 0 0 10px; }
.ch-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }
.ch-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--bar); }
.ch-key i.was { background: var(--mute); margin-left: 8px; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); }
.ch-legend span { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; }
.ch-legend i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.ch-plot { position: relative; height: 220px; margin-left: 46px; border-bottom: 1px solid var(--faint); }
.ch-grid { position: absolute; inset: 0; pointer-events: none; }
.ch-gl { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.ch-gl em { position: absolute; right: calc(100% + 6px); top: -8px; font-style: normal; font-size: 11px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ch-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 2px; }
.ch-col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; cursor: default; outline: 0; }
.ch-col::before { content: ''; position: absolute; inset: 0 1px; border-radius: 4px 4px 0 0; }
.ch-col:hover::before, .ch-col.tipped::before, .ch-col:focus-visible::before { background: var(--wash); }
.ch-col:focus-visible::before { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ch-stk { position: relative; width: min(70%, 44px); display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.ch-stk i { display: block; min-height: 1px; }
.ch-col.on .ch-stk, .ch-col.was .ch-stk { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--bar); }
.ch-col.was .ch-stk { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--mute); }
.ch-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 2px; margin: 5px 0 0 46px; font-size: 11px; color: var(--mute); text-align: center; white-space: nowrap; }
.ch-x span { overflow: hidden; text-overflow: clip; }
.ch-x .on { color: var(--ink); font-weight: 600; }
.ch-x .was { color: var(--ink-2); font-weight: 500; }
.ch-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.ch-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 8px; min-width: 0; }
.ch-ch { display: flex; align-items: baseline; gap: 8px; }
.ch-name { min-width: 0; flex: 1; text-align: left; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-ch b { font-variant-numeric: tabular-nums; font-size: 13px; }
.ch-d, .ch-peak { margin: 2px 0 0; font-size: 11.5px; color: var(--mute); }
.ch-mini { height: 54px; margin-top: 8px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 2px; align-items: end; border-bottom: 1px solid var(--faint); }
.ch-b { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ch-b i { display: block; width: min(80%, 22px); background: var(--dim); border-radius: 3px 3px 0 0; }
.ch-b.on i { background: var(--bar); }
.ch-b.was i { background: var(--mute); }
.ch-b.tipped { background: var(--wash); }
.ch-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 280px; padding: 7px 10px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.14); font-size: 12px; line-height: 1.45; display: grid; }
.ch-tip[hidden] { display: none; }
.ch-tip b { font-weight: 600; }
.ch-tip span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .ch-plot { height: 180px; margin-left: 38px; }
  .ch-x { margin-left: 38px; font-size: 10px; }
  .ch-gl em { font-size: 10px; }
}
/* two months side by side, per category */
.ch-two { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ch-ab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--mute); }
.ch-ab select { min-width: 0; max-width: 180px; font-size: 13px; }
.ch-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 10px 0 2px; }
.ch-big { font-size: 26px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ch-chg { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ch-say { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ch-dv i.up, .ch-id.up::after { background: var(--ft-amber); }
.ch-dv i.dn, .ch-id.dn::after { background: var(--ft-blue); }
.ch-drs, .ch-it { list-style: none; margin: 0; padding: 0; }
.ch-drs > li { border-top: 1px solid var(--line); }
.ch-dr summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(70px, 1fr) minmax(96px, auto); align-items: center; gap: 10px; padding: 9px 2px; cursor: pointer; list-style: none; }
.ch-dr summary::-webkit-details-marker, .ch-rest summary::-webkit-details-marker, .ch-cp summary::-webkit-details-marker { display: none; }
.ch-dr summary:hover, .ch-dr[open] summary { background: var(--wash); }
.ch-dr summary:focus-visible, .ch-rest summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ch-dn { min-width: 0; font-weight: 500; }
.ch-dn > span { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ch-dv { position: relative; height: 12px; }
.ch-dv::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px solid var(--faint); }
.ch-dv i { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 2px; }
.ch-dv i.up { left: 50%; }
.ch-dv i.dn { right: 50%; }
.ch-dt { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ch-tag { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 0 5px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); vertical-align: 1px; }
.ch-dd { padding: 4px 2px 12px; display: grid; gap: 6px; }
.ch-pr { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; }
.ch-pr > span { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pr i { display: block; height: 10px; }
.ch-pr b { display: block; height: 100%; border-radius: 3px; min-width: 1px; background: var(--bar); }
.ch-pr.was b { background: var(--mute); }
.ch-pr em { font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
.ch-why { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ch-why b { color: var(--ink); font-weight: 600; }
.ch-it li button { display: flex; align-items: baseline; gap: 10px; width: 100%; border: 0; border-bottom: 1px dashed var(--line); background: transparent; color: inherit; font: inherit; font-size: 12.5px; padding: 6px 4px; text-align: left; cursor: pointer; border-radius: 4px; }
.ch-it li:last-child button { border-bottom: 0; }
.ch-it li button:hover, .ch-it li button:focus-visible { background: var(--wash); outline: 0; }
.ch-it li button:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.ch-it .ch-in { flex: 1; }
.ch-go { color: var(--ink-2); font-size: 15px; line-height: 1; }
.ch-tag.q-open { color: var(--ink); background: var(--note-yellow); border-color: transparent; }
.ch-tag.q-answered { color: var(--ink); background: var(--note-green); border-color: transparent; }
@media (hover: none) { .ch-it .ch-in { white-space: normal; } }
.ch-in { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ch-id { position: relative; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.ch-id::after { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; }
.ch-dgo { margin: 2px 0 0; font-size: 12.5px; }
.ch-rest { border-top: 1px solid var(--line); }
.ch-rest > summary { padding: 9px 2px 2px; font-size: 12.5px; color: var(--mute); cursor: pointer; list-style: none; }
.ch-rest[open] > summary { padding-bottom: 6px; }
.ch-cp { position: relative; }
.ch-cp > summary { list-style: none; }
.ch-cp > div { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 6; min-width: 240px; display: grid; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.ch-cp > div button { text-align: left; padding: 9px 10px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; border-radius: 6px; cursor: pointer; }
.ch-cp > div button:hover, .ch-cp > div button:focus-visible { background: var(--wash); }
.ch-sec .ch-h .ch-key { margin-left: auto; }
@media (max-width: 760px) {
  .ch-two { padding: 10px; }
  .ch-ab select { flex: 1 1 120px; max-width: none; }
  .ch-big { font-size: 23px; }
  .ch-dr summary { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .ch-dv { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .ch-sec .ch-h .ch-key { margin-left: 0; }
}
/* ---- The review beside its receipt (16 Oct 2026): the current row's photo stands on the right, cut around the number that matches;
   each amount carries what its photo says. Wide windows with a mouse only; a phone keeps the list and Check one by one. */
.ocr-crop { position: relative; display: inline-block; overflow: hidden; flex: none; background: var(--paper); border: 1px solid var(--line); vertical-align: middle; }
.ocr-crop img { position: absolute; max-width: none; max-height: none; display: block; }
.ocr-crop.none { width: 60px; height: 20px; border-style: dashed; }
.rv-ocr { display: block; margin-top: 3px; }
.rv-om { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rv-om svg { width: 13px; height: 13px; }
.rv-om.ok { color: var(--ft-green); }
.rv-om.ok .ocr-crop { border-color: var(--ft-green); }
.rv-om.off { color: var(--red); }
.rv-om.off .ocr-crop { border-color: var(--red); }
.rv-om.blank, .rv-om.wait { color: var(--mute); font-weight: 400; }
.rv-om .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rv-table tr[data-rv] { cursor: default; }
@media (pointer: fine) {
  .rv-table tr.cur td { background: var(--wash); }
  .rv-table tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
}
.rv-read { min-height: 0; }
.rv-read[hidden] { display: none; }
.rv-rbar { flex: none; width: 90px; height: 6px; background: var(--wash); border: 1px solid var(--line); overflow: hidden; }
.rv-rbar i { display: block; height: 100%; background: var(--ink); transition: width .3s; }
.rv-side { display: none; }
.rv-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; color: var(--mute); }
.rv-keys kbd { margin: 0 3px 0 0; opacity: 1; border-color: var(--line); background: var(--wash); color: var(--ink); }
.rv-keys span { white-space: nowrap; }
.st-keys { margin-top: 8px; }
.rv-spot { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; margin: 0; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rv-spot span { display: grid; gap: 1px; min-width: 0; }
.rv-spot small { color: var(--mute); font-size: 11.5px; }
.rv-spot b { font-size: 15px; font-variant-numeric: tabular-nums; }
.rv-spot.ok { border-color: var(--ft-green); }
.rv-spot.off { border-color: var(--red); }
.rv-verd { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--mute); }
.rv-verd svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.rv-verd.ok { color: var(--ink); } .rv-verd.ok svg { color: var(--ft-green); }
.rv-verd.off { color: var(--ink); font-weight: 600; }
.st-spot { display: grid; gap: 6px; margin: 6px 0 4px; }
.st-spot .rv-spot { width: auto; justify-self: start; padding: 4px; }
.rv-hl { position: absolute; border: 2.5px solid var(--gold); border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 2px var(--paper); }
.rv-hl.ok { border-color: var(--ft-green); }
.rv-hl.off { border-color: var(--red); }
@media (min-width: 1100px) and (pointer: fine) {
  .modal.cs-review { width: min(1360px, calc(100vw - 32px)); }
  .rv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 40%); gap: 16px; align-items: start; }
  .rv-pair .rv-scroll { max-height: min(70vh, 720px); }
  .rv-side { display: grid; gap: 10px; align-content: start; max-height: min(70vh, 720px); overflow: auto; padding: 2px 4px 2px 0; }
  .rv-sh { display: grid; gap: 1px; }
  .rv-sh span, .rv-sh small { color: var(--mute); font-size: 12.5px; }
  .rv-sh b { font-size: 16px; }
  .rv-samt { display: flex; align-items: baseline; gap: 8px; margin: 0; }
  .rv-samt small { color: var(--mute); font-size: 12.5px; }
  .rv-samt b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .rv-says { display: grid; gap: 6px; }
  .rv-ph { height: min(40vh, 420px); overflow: auto; display: grid; place-items: center; background: var(--wash); border: 1px solid var(--line); }
  .rv-phw { position: relative; display: inline-block; }
  .rv-ph img { display: block; max-width: 100%; max-height: calc(min(40vh, 420px) - 2px); object-fit: contain; cursor: zoom-in; }
  .rv-ph.zoom { place-items: start; }
  .rv-ph.zoom .rv-phw { width: 220%; }
  .rv-ph.zoom img { width: 100%; max-width: none; max-height: none; cursor: zoom-out; }
  .rv-pdf { width: 100%; height: 140px; }
  .rv-snote { margin: 0; font-size: 13px; color: var(--mute); }
  .rv-side .cs-mks { margin: 0; }
  .rv-side .st-nopic { height: 160px; }
  .rv-sacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .rv-sacts .btn { display: inline-flex; align-items: center; gap: 6px; }
  .rv-sacts .btn svg { width: 15px; height: 15px; }
  .rv-sacts kbd { margin-left: 4px; }
  .rv-sacts .cs-revtick { margin: 0; flex: 1 1 100%; }
}
@media (hover: none), (pointer: coarse) { .rv-keys { display: none; } }

/* a grid that scrolls inside a max-height keeps each row at its full height (owner, 27 Oct 2026: the Move to list squeezed its rows and cut the words in half) */
.pf-list, .pc-list, .cs-qlist, .pp-list, .tc-list, .rv-side { grid-auto-rows: max-content; }
/* moving a section from its heading (owner, 27 Oct 2026: "sections rearrange also needed.. think ease of use"): dots to drag, arrows
   for one place; while dragging every section shows only its heading so the whole order fits on the screen */
.lsec-mv { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.lsec-mv button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; background: none; color: var(--mute); cursor: pointer; }
.lsec-mv button:hover, .lsec-mv button:focus-visible { border-color: var(--ink); color: var(--ink); }
.lsec-mv button:disabled { opacity: .25; cursor: default; border-color: transparent; }
.lsec-mv .lsec-grip { cursor: grab; touch-action: none; }
@media (hover: hover) {
  .lsec-mv { opacity: 0; transition: opacity .15s; }
  .lsec:hover .lsec-mv, .lsec-mv:focus-within, .lsec-h:focus-within .lsec-mv { opacity: 1; }
}
@media (hover: none) { .lsec-mv button { width: 36px; height: 36px; } }
.lsec-sorting .lsec > .lrows, .lsec-sorting .lsec > .cards, .lsec-sorting .lsec-new, .lsec-sorting .lsec-empty { display: none !important; }
.lsec-sorting .lsec .lsec-h { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lsec-sorting .lsec-peek { display: none; }
.lsec.moving > .lsec-h { background: var(--wash); outline: 1.5px solid var(--ink); outline-offset: 2px; }
.lsec.moving .lsec-mv { opacity: 1; }
.lsec.drop-b > .lsec-h { box-shadow: 0 -3px 0 var(--gold); }
.lsec.drop-a > .lsec-h { box-shadow: 0 3px 0 var(--gold); }