/* 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 {
  --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 */
  --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; }
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; }
.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); }
.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; }
.tl-heading h1.smaller { -webkit-line-clamp: 4; line-clamp: 4; }

.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-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; }
.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); }
.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); }
.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); }
.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); }

/* ---------- 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); }

/* ---------- 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-add { margin-top: 6px; }

/* ---------- 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; overscroll-behavior: contain; scrollbar-width: thin; } }
.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-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; }
.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; 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; align-items: center; gap: 10px; }
.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-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-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; }
.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-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 .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; } }

/* 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: center; outline: none; overflow: hidden; }
.standby[hidden] { display: none; }
.standby.idle { cursor: none; }
.sb-in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 24px 150px; max-width: min(1100px, 100vw); transition: translate 4s cubic-bezier(.4,0,.2,1); }
.sb-date { font-size: clamp(15px, 1.6vw, 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; }
.sb-hm { font-size: clamp(88px, 21vw, 340px); font-variant-numeric: tabular-nums; }
.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(22px, 4.2vw, 64px); }
.sb-s { color: var(--gold-text); font-weight: 500; letter-spacing: 0; line-height: 1; vertical-align: 0; }
.sb-zone { font-size: .42em; font-weight: 600; letter-spacing: .12em; color: var(--mute); }
.sb-bar { width: min(560px, 62vw); height: 4px; background: var(--line); margin: clamp(18px, 3vh, 34px) 0 clamp(14px, 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(14px, 1.5vw, 22px); color: var(--mute); white-space: pre; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.sb-line { font-size: clamp(16px, 1.9vw, 28px); margin-top: clamp(16px, 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: 12px; font-size: clamp(14px, 1.5vw, 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-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-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-in { padding-bottom: 120px; } .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; }
.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) { .sb-pets { bottom: calc(70px + env(safe-area-inset-bottom)); } .sb-hint { padding: 0 18px; font-size: 12px; } }
.pet-heart, .pet-purr, .pet-treat, .pet-bubble, .pet-pop, .pet-laser { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.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) { .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: flex; flex-wrap: wrap; gap: 6px; align-items: center; 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-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; }
  .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; } }
@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); }
.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-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.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: 11px; font-weight: 600; background: var(--gold); color: var(--on-gold); padding: 0 6px; line-height: 17px; }
.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 { padding: 8px 10px 7px; font-size: 14px; }
  .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); }

/* ---------- 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; }
.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; }
.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); }

.ck-flip { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--wash); color: var(--ink); overflow: hidden; }
.ck-flip[open] { display: flex; flex-direction: column; }
.ck-flip::backdrop { background: var(--wash); }
.fl-top { display: flex; align-items: center; gap: 14px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: var(--paper); border-bottom: 1px solid var(--line); }
.fl-name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-n { font-size: 13px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-stage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.fl-msg { color: var(--mute); font-size: 14px; text-align: center; padding: 0 24px; max-width: 34em; }
.fl-book { position: relative; display: flex; perspective: calc(var(--pw) * 5); }
.fl-book.spread { width: calc(var(--pw) * 2); height: var(--ph); }
.fl-book.single { width: var(--pw); height: var(--ph); perspective: calc(var(--ph) * 4); perspective-origin: 50% 0; }
.fl-page { position: relative; width: var(--pw); height: var(--ph); flex: none; background: var(--paper); box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .45); overflow: hidden; }
.fl-page canvas { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.fl-page.ready canvas { opacity: 1; }
.fl-page.instant canvas { transition: none; }
.fl-page small { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--mute); }
.fl-page.blank { background: transparent; box-shadow: none; }
.fl-page.left::after, .fl-page.right::after { content: ''; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; }
.fl-page.left::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .14), transparent); }
.fl-page.right::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .12), transparent); }
.fl-leaf { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.35, .1, .2, 1); z-index: 3; }
.fl-leaf .face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fl-leaf .backface { transform: rotateY(180deg); }
.fl-leaf.fwd { left: var(--pw); transform-origin: left center; }
.fl-leaf.fwd.go { transform: rotateY(-180deg); }
.fl-leaf.back { left: 0; transform-origin: right center; }
.fl-leaf.back.go { transform: rotateY(180deg); }
/* a pad on phones: the page flips up over its top edge */
.fl-leaf.pad { left: 0; transform-origin: 50% 0; transition-duration: .6s; }
.fl-leaf.pad.fwd.go { transform: rotateX(-180deg); }
.fl-leaf.pad.back { transform: rotateX(-180deg); }
.fl-leaf.pad.back.go { transform: rotateX(0deg); }
.fl-leaf .pad-back { transform: rotateX(180deg); background: linear-gradient(to bottom, var(--wash), var(--paper)); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .35); }
.fl-foot { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); }
.fl-foot button { height: 36px; padding: 0 14px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.fl-foot button:disabled { opacity: .35; cursor: default; }
.fl-range { width: min(360px, 40vw); accent-color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .fl-leaf { transition: none; } }

.fl-tools { display: flex; align-items: center; gap: 4px; }
.fl-ib { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; background: none; color: var(--ink); cursor: pointer; padding: 0; text-decoration: none; }
.fl-ib:hover:not(:disabled) { border-color: var(--line); background: var(--wash); }
.fl-ib:disabled { opacity: .35; cursor: default; }
.fl-ib.on { color: var(--gold-text); }
.fl-ib[data-fl=mark].on svg { fill: currentColor; }
.fl-ib[hidden] { display: none; }
.fl-x { border: 1.5px solid var(--ink); margin-left: 4px; }
.fl-zoom { display: inline-flex; align-items: center; border: 1px solid var(--line); margin: 0 4px; }
.fl-zoom .fl-ib { width: 32px; height: 32px; }
.fl-zv { min-width: 52px; height: 32px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.fl-stage.zoomed { display: block; overflow: auto; touch-action: pan-x pan-y; cursor: grab; }
.fl-stage.zoomed .fl-book { margin: 16px auto; }
.fl-stage[hidden], .fl-foot[hidden] { display: none; }
/* search bar under the tools, marks on the page, and the "only these pages" note */
.fl-find { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.fl-find[hidden] { display: none; }
.fl-fi { display: grid; color: var(--mute); }
.fl-q { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; border-radius: 0; }
.fl-q:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.fl-fc { flex: none; font-size: 13px; color: var(--mute); white-space: nowrap; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
.fl-hl { position: absolute; background: var(--gold); opacity: .3; pointer-events: none; border-radius: 2px; }
.fl-hl.cur { opacity: .45; outline: 2.5px solid var(--gold); outline-offset: 1px; }
/* highlighter and capture in the PDF book (flip.js setMode) */
.fl-modebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.fl-modebar > span:first-child { flex: 1 1 260px; }
.fl-hcs { display: inline-flex; gap: 6px; }
.fl-hc { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.fl-hc[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.fl-done { border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.c-yellow { background: var(--note-yellow); } .c-green { background: var(--note-green); } .c-blue { background: var(--note-blue); } .c-pink { background: var(--note-pink); }
.fl-mk, .fl-pv.hl i { position: absolute; mix-blend-mode: multiply; opacity: 1; border-radius: 2px; pointer-events: none; }
.fl-pv.hl i { background: inherit; }
.fl-pv { position: absolute; pointer-events: none; }
.fl-pv.hl { background: none !important; }
.fl-pv.hl.c-yellow i { background: var(--note-yellow); } .fl-pv.hl.c-green i { background: var(--note-green); } .fl-pv.hl.c-blue i { background: var(--note-blue); } .fl-pv.hl.c-pink i { background: var(--note-pink); }
.fl-pv.snap { border: 2px dashed var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.fl-stage.mode-hl .fl-page:not(.blank), .fl-stage.mode-snap .fl-page:not(.blank) { cursor: crosshair; touch-action: none; }
.fl-stage.mode-hl .fl-mk { pointer-events: auto; cursor: pointer; }
.fl-menu { position: fixed; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .45); }
.fl-menu > button { border: 0; background: none; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.fl-menu > button:hover { background: var(--wash); }
.fl-stage.fl-flash .fl-book { animation: fl-flash .35s ease-out; }
@keyframes fl-flash { 0% { filter: brightness(1.35); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .fl-stage.fl-flash .fl-book { animation: none; } }
.fl-copyhl { margin-left: auto; }
.fl-tile.found .fl-thumb { outline: 2px solid var(--gold); outline-offset: -2px; }
.fl-only { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; display: flex; gap: 12px; align-items: center; padding: 6px 14px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; white-space: nowrap; box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .4); }
.fl-only[hidden] { display: none; }
.fl-stage.zoomed .fl-only { position: sticky; top: 8px; left: auto; transform: none; width: max-content; margin: 8px auto 0; }
/* arrows on the page edges for mouse and trackpad (phones swipe and tap instead) */
.fl-side { display: none; position: absolute; top: 50%; z-index: 5; width: 48px; height: 72px; margin-top: -8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; place-items: center; padding: 0; opacity: .82; transition: opacity .15s, background .15s; }
.fl-side svg { width: 26px; height: 26px; }
.fl-side.prev { left: 14px; } .fl-side.next { right: 14px; }
.fl-side:hover, .fl-side:focus-visible { opacity: 1; background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.fl-side:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .fl-side { display: grid; } }
@media (max-width: 560px) { .fl-find { padding: 6px 8px 6px 12px; gap: 2px; } .fl-fi { display: none; } .fl-fc { font-size: 12px; max-width: 34vw; margin: 0 4px; } .fl-find .fl-ib { width: 34px; } }
.fl-stage[hidden] ~ .fl-side { display: none; }
.fl-stage:focus { outline: none; }
.fl-book { transform-origin: center; }
.fl-page.marked::before { content: ''; position: absolute; top: 0; right: 18px; width: 14px; height: 24px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); z-index: 2; }
.fl-resume { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: var(--paper); border: 1.5px solid var(--ink); font-size: 13px; white-space: nowrap; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .4); z-index: 5; }
.fl-resume[hidden] { display: none; }
.fl-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 24px; }
.fl-grid[hidden] { display: none; }
.fl-gh { display: flex; gap: 6px; margin-bottom: 14px; }
.fl-gh button { font: inherit; font-size: 13px; padding: 5px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); border-radius: 999px; cursor: pointer; }
.fl-gh button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.fl-gh button:disabled { opacity: .45; cursor: default; }
.fl-gh small { opacity: .7; margin-left: 4px; }
.fl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.fl-tile { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: center; font: inherit; }
.fl-thumb { display: block; aspect-ratio: var(--ar); background: var(--paper) center / contain no-repeat; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .45); outline: 1px solid var(--line); }
.fl-tile:hover .fl-thumb { outline-color: var(--ink); }
.fl-tile.cur .fl-thumb { outline: 2.5px solid var(--gold); }
.fl-tile small { font-size: 12px; color: var(--mute); }
.fl-tile.marked::after { content: ''; position: absolute; top: 0; right: 10px; width: 12px; height: 20px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
@media (max-width: 560px) {
  .fl-top { flex-wrap: wrap; gap: 6px 10px; padding-left: 12px; padding-right: 12px; }
  .fl-name { flex-basis: 50%; }
  .fl-tools { width: 100%; justify-content: space-between; }
  .fl-range { display: none; }
  .fl-foot button { flex: 1; }
  .fl-tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* 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; }

/* ---- 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); }
/* ---- 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); }
.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 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: 1fr 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; }
.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-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; }
.tour-spot { position: fixed; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); 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; align-items: center; gap: 8px; }
@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; } }