/* Sorotin panel — design tokens and components (shadcn-like vocabulary, own world). */
/* Colours are written var(--dk-<name>, <light value>): the --dk-* values exist only while the
   dark theme is on (block "dark theme" below), so in light mode every token is the value here. */
:root {
  --bg: var(--dk-bg, #E8EAF6);
  --shell: var(--dk-shell, #F3F4FB);
  --surface: var(--dk-surface, #FFFFFF);
  --surface-2: var(--dk-surface-2, #F8F8FD);
  --surface-3: var(--dk-surface-3, #EEEFF8);
  --line: var(--dk-line, #E3E5F0);
  --line-2: var(--dk-line-2, #D3D6E6);
  --ink: var(--dk-ink, #1A1B2E);
  --ink-2: var(--dk-ink-2, #45485F);
  --muted: var(--dk-muted, #62657F);
  --primary: var(--dk-primary, #4D47F0);
  --primary-h: var(--dk-primary-h, #3F39DB);
  --primary-soft: var(--dk-primary-soft, #ECEBFE);
  --primary-ink: var(--dk-primary-ink, #3730C9);
  --accent: #D9257E;
  --accent-h: #C21C6E;
  --accent-soft: var(--dk-accent-soft, #FDE8F2);
  --ok: var(--dk-ok, #067647);
  --ok-soft: var(--dk-ok-soft, #E6F6EE);
  --warn: var(--dk-warn, #B54708);
  --danger: var(--dk-danger, #B42318);
  --danger-soft: var(--dk-danger-soft, #FEF3F2);
  --tech: var(--dk-tech, #3F39C9);
  --tech-soft: var(--dk-tech-soft, #ECEBFE);
  --auditor: var(--dk-auditor, #0D6B62);
  --auditor-soft: var(--dk-auditor-soft, #E0F4F1);
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow-sm: var(--dk-shadow-sm, 0 1px 2px rgba(26, 27, 46, .06));
  --shadow-md: var(--dk-shadow-md, 0 10px 24px -12px rgba(26, 27, 46, .18), 0 2px 6px rgba(26, 27, 46, .05));
  --shadow-lg: var(--dk-shadow-lg, 0 30px 70px -20px rgba(26, 27, 46, .32), 0 6px 18px rgba(26, 27, 46, .07));
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
  /* text and icons in a brand or status colour; fills keep --primary/--accent/--ok/--danger
     with white text on them, so in dark these two kinds part ways */
  --primary-text: var(--dk-primary-text, var(--primary));
  --primary-text-h: var(--dk-primary-text-h, var(--primary-h));
  --accent-text: var(--dk-accent-text, var(--accent));
  --accent-ink: var(--dk-accent-text, var(--accent-h));
  --ok-solid: var(--dk-ok-solid, var(--ok));
  --danger-solid: var(--dk-danger-solid, var(--danger));
  --on-ink: var(--dk-on-ink, #fff);
  /* status tints */
  --danger-tint: var(--dk-danger-tint, #FEE4E2);
  --warn-soft: var(--dk-warn-soft, #FFF6E5);
  --warn-ink: var(--dk-warn-ink, #93370D);
  --orange-soft: var(--dk-warn-soft, #FFF1E0);
  --amber-soft: var(--dk-amber-soft, #FEF0C7);
  --sun-soft: var(--dk-amber-soft, #FFF4D6);
  --info-soft: var(--dk-info-soft, #F1F0FE);
  --info-ink: var(--dk-info-ink, #3D3591);
  --picked: var(--dk-picked, #F7F7FF);
  /* quiet greys: separators, empty-state glyphs, hover borders */
  --dim: var(--dk-dim, #A6A9C2);
  --dim-2: var(--dk-dim, #A4A7BE);
  --glyph: var(--dk-glyph, #8C8FA9);
  --glyph-2: var(--dk-glyph, #9A9DB5);
  --line-3: var(--dk-line-3, #B9BCD1);
  --scrollbar: var(--dk-scrollbar, #C8CBDD);
  /* rings, shadows, scrims, tints */
  --ring: var(--dk-ring, rgba(77, 71, 240, .16));
  --primary-rgb: var(--dk-primary-rgb, 77, 71, 240);
  --sh: var(--dk-sh, 26, 27, 46);
  --scrim: var(--dk-scrim, rgba(26, 27, 46, .2));
  --scrim-strong: var(--dk-scrim-strong, rgba(26, 27, 46, .32));
  --weekend-tint: var(--dk-weekend-tint, rgba(77, 71, 240, .045));
  --weekend-tint-2: var(--dk-weekend-tint, rgba(77, 71, 240, .05));
  --code-bg: var(--dk-code-bg, #16172A);
  /* file badges (panel.js KIND) */
  --kind-pdf: var(--dk-danger, #E5484D);
  --kind-doc: var(--dk-blue, #2B6CEF);
  --kind-sheet: var(--dk-ok, #1F9D55);
  --kind-text: var(--dk-muted, #6B6E88);
  /* select chevrons (stroke = --ink-2) */
  --chev: var(--dk-chev, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2345485F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"));
  --chev-sm: var(--dk-chev-sm, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2345485F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"));
}

/* ------------------------------------------------------------ dark theme */
/* On when the OS asks for dark (theme "system": no data-theme) or when the account menu
   pins it (data-theme="dark" on <html>, set by panel.js; "light" pins light). Both switch
   the same flag: --dark is empty when on and unset when off, so each --dk-* below is its
   dark value or invalid, and an invalid --dk-* makes var(--dk-x, light) use the light value.
   Deep ink-indigo night, not black; elevation = lighter surface. --accent/--accent-h stay. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dark: ; color-scheme: dark; } }
:root[data-theme="dark"] { --dark: ; color-scheme: dark; }
:root {
  --dk-bg: var(--dark) #0F1020;
  --dk-shell: var(--dark) #14152A;
  --dk-surface: var(--dark) #1A1B2E;
  --dk-surface-2: var(--dark) #202238;
  --dk-surface-3: var(--dark) #2A2C45;
  --dk-line: var(--dark) #2E3050;
  --dk-line-2: var(--dark) #3A3D60;
  --dk-line-3: var(--dark) #4A4E75;
  --dk-ink: var(--dark) #ECEDF7;
  --dk-ink-2: var(--dark) #C5C7DD;
  --dk-muted: var(--dark) #9A9DB8;
  --dk-primary: var(--dark) #5B55F6;
  --dk-primary-h: var(--dark) #4A44E4;
  --dk-primary-soft: var(--dark) #2A2860;
  --dk-primary-ink: var(--dark) #B7B4FF;
  --dk-primary-text: var(--dark) #A5A1FF;
  --dk-primary-text-h: var(--dark) #C4C1FF;
  --dk-primary-line: var(--dark) #45418F;
  --dk-primary-rgb: var(--dark) 124, 118, 255;
  --dk-ring: var(--dark) rgba(124, 118, 255, .3);
  --dk-picked: var(--dark) #22224A;
  --dk-accent-soft: var(--dark) #3A1A2E;
  --dk-accent-text: var(--dark) #FF94C8;
  --dk-ok: var(--dark) #5BD69B;
  --dk-ok-soft: var(--dark) #12322A;
  --dk-ok-soft-h: var(--dark) #18402F;
  --dk-ok-solid: var(--dark) #0E8050;
  --dk-warn: var(--dark) #F5A04D;
  --dk-warn-soft: var(--dark) #33250F;
  --dk-warn-ink: var(--dark) #FBC27A;
  --dk-amber-soft: var(--dark) #3A2C0C;
  --dk-amber-line: var(--dark) #5C4415;
  --dk-danger: var(--dark) #FF8A80;
  --dk-danger-soft: var(--dark) #3B1C20;
  --dk-danger-tint: var(--dark) #4A1F22;
  --dk-danger-solid: var(--dark) #D03A2E;
  --dk-overdue-line: var(--dark) #7A3530;
  --dk-blue: var(--dark) #86B7FF;
  --dk-blue-soft: var(--dark) #172A49;
  --dk-cat-bug: var(--dark) #FF9472;
  --dk-cat-bug-soft: var(--dark) #3A1F19;
  --dk-tag-fe: var(--dark) #6CB9F2;
  --dk-tag-be: var(--dark) #B49CFF;
  --dk-tag-design: var(--dark) #F07CC0;
  --dk-tag-devops: var(--dark) #4FD1C5;
  --dk-tech: var(--dark) #B7B4FF;
  --dk-tech-soft: var(--dark) #2A2860;
  --dk-auditor: var(--dark) #6FD6C6;
  --dk-auditor-soft: var(--dark) #11332F;
  --dk-info-soft: var(--dark) #24234D;
  --dk-info-ink: var(--dark) #CBC8FF;
  --dk-on-ink: var(--dark) #14152A;
  --dk-toast-link: var(--dark) #4A44E4;
  --dk-dim: var(--dark) #565980;
  --dk-glyph: var(--dark) #74779A;
  --dk-dash: var(--dark) #44476B;
  --dk-placeholder: var(--dark) #6E7193;
  --dk-selection: var(--dark) #3B3890;
  --dk-scrollbar: var(--dark) #44476B;
  --dk-mark: var(--dark) #6A5414;
  --dk-who: var(--dark) #5A5D80;
  --dk-seg-on: var(--dark) #3A3D60;
  --dk-sh: var(--dark) 0, 0, 0;
  --dk-shadow-sm: var(--dark) 0 1px 2px rgba(0, 0, 0, .3);
  --dk-shadow-md: var(--dark) 0 10px 24px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  --dk-shadow-lg: var(--dark) 0 30px 70px -20px rgba(0, 0, 0, .65), 0 6px 18px rgba(0, 0, 0, .3);
  --dk-scrim: var(--dark) rgba(5, 6, 14, .6);
  --dk-scrim-strong: var(--dark) rgba(5, 6, 14, .66);
  --dk-weekend-tint: var(--dark) rgba(150, 145, 255, .05);
  --dk-we-day: var(--dark) #1E1F34;
  --dk-board: var(--dark) #15162A;
  --dk-board-line: var(--dark) #202238;
  --dk-col: var(--dark) #111224;
  --dk-col-line: var(--dark) #23253D;
  --dk-glass: var(--dark) rgba(26, 27, 46, .92);
  --dk-bg-fade: var(--dark) rgba(15, 16, 32, 0);
  --dk-veil: var(--dark) rgba(255, 255, 255, .04);
  --dk-shimmer: var(--dark) #34365A;
  --dk-internal-bg: var(--dark) #211C18;
  --dk-drop-veil: var(--dark) rgba(42, 40, 96, .94);
  --dk-code-bg: var(--dark) #0B0C18;
  /* light "paper" under content made for a light page: Mermaid diagrams, logos, doc images */
  --dk-paper: var(--dark) #EEEFF7;
  --dk-chev: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23C5C7DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --dk-chev-sm: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23C5C7DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --dk-drop-ic: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23B7B4FF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on, "cv11" on;
}
::selection { background: var(--dk-selection, #DCDAFE); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.mono { font-family: var(--mono); font-feature-settings: normal; }
.num { font-variant-numeric: tabular-nums; }
.i { flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scroll { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 600; font-size: 14px;
  white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px -10px rgba(var(--sh), .35); }
.btn-primary:hover:not(:disabled) { background: var(--primary-h); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px rgba(var(--sh), .35); }
.btn-accent:hover:not(:disabled) { background: var(--accent-h); }
.btn-outline { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.btn-outline:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.btn-sm { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 10px; color: var(--ink-2); display: inline-grid; place-items: center; }
.btn-icon:hover { background: var(--surface-3); color: var(--ink); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
.spin.dark { border-color: var(--primary-soft); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- inputs */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field small { color: var(--muted); font-size: 12px; }
.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.input::placeholder, .textarea::placeholder { color: var(--dk-placeholder, #8A8DA6); }
.select { appearance: none; padding-right: 34px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 10px center; }
.check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.check:hover { background: var(--surface-2); }
.check input { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; }
.switch { appearance: none; width: 34px; height: 20px; border-radius: 10px; background: var(--line-2); position: relative; cursor: pointer; transition: background .15s; margin: 0; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(14px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.seg { display: inline-grid; grid-auto-flow: column; background: var(--surface-3); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { height: 32px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--dk-seg-on, var(--surface)); color: var(--ink); box-shadow: var(--shadow-sm); }
.err { color: var(--danger); background: var(--danger-soft); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.hint { color: var(--info-ink); background: var(--info-soft); border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.5; }

/* -------------------------------------------------------------- chips */
.avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.avatar.sm { width: 22px; height: 22px; font-size: 9.5px; }
.avatar.lg { width: 36px; height: 36px; font-size: 13px; }
.stack { display: flex; }
.stack .avatar { box-shadow: 0 0 0 2px var(--shell); margin-left: -8px; }
.stack .avatar:first-child { margin-left: 0; }
.avatar.av-more { background: var(--dk-line-2, #C9CCDD); color: var(--ink); }
.team { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.team.tech { background: var(--tech-soft); color: var(--tech); }
.team.auditor { background: var(--auditor-soft); color: var(--auditor); }
.team.admin { background: var(--orange-soft); color: var(--warn-ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.code { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); font: 500 12px/1 var(--mono); }
.cat { --c: var(--dk-cat-bug, #C4320A); --cs: var(--dk-cat-bug-soft, #FEEFE9); display: inline-flex; align-items: center; gap: 5px; color: var(--c); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cat-bug { --c: var(--dk-cat-bug, #C4320A); --cs: var(--dk-cat-bug-soft, #FEEFE9); }
.cat-feedback { --c: var(--dk-warn, #B54708); --cs: var(--dk-warn-soft, #FEF3E2); }
.cat-question { --c: var(--dk-blue, #175CD3); --cs: var(--dk-blue-soft, #EAF2FF); }
.cat-idea { --c: var(--dk-ok, #067647); --cs: var(--dk-ok-soft, #E6F6EE); }
.cat.filled { height: 24px; padding: 0 9px; border-radius: 7px; background: var(--cs); }
.live { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 3px rgba(18, 183, 106, .2); }
.live.off i { background: #F79009; box-shadow: 0 0 0 3px rgba(247, 144, 9, .2); }

/* --------------------------------------------------------------- login */
.login-page { min-height: 100%; display: grid; place-items: center; padding: 32px 16px; }
.login-card { width: min(440px, 100%); background: var(--surface); border-radius: var(--r-xl); padding: 34px 32px 28px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 18px; }
.login-card h1 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.login-card p { margin: 0; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.brand-mark .logo-mark { display: block; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(var(--sh), .45); }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.brand-sub { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); letter-spacing: .01em; margin-top: 4px; font-weight: 600; text-wrap: balance; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; transition: background .15s; }
.gbtn:hover:not(:disabled) { background: var(--surface-2); }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input { height: 52px; text-align: center; font-size: 22px; font-weight: 700; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); outline: none; min-width: 0; }
.otp input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.demo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.demo button { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--dk-line-2, #D9D6FB); font-size: 12.5px; font-weight: 600; }
.demo button:hover { border-color: var(--primary); }
.lang-switch { position: fixed; top: 16px; right: 16px; z-index: 40; }

/* -------------------------------------------------------------- shell */
.app { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 18px; height: 100vh; padding: 16px; }
.side { background: var(--surface); border-radius: var(--r-xl); display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow-sm); }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 18px 14px 22px; }
.nav { display: flex; flex-direction: column; gap: 4px; padding: 6px 14px; }
.nav a { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-radius: 14px; color: var(--ink-2); font-weight: 550; font-size: 14.5px; transition: background .15s, color .15s; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--primary); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--sh), .4); }
.side-scroll { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--line); margin-top: 12px; padding: 16px 14px; display: flex; flex-direction: column; gap: 20px; }
.side-label { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 8px 8px; }
.plist a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px; border-radius: 10px; font-size: 13.5px; color: var(--ink-2); }
.plist a:hover { background: var(--surface-2); color: var(--ink); }
.plist a[aria-current="true"] { background: var(--surface-3); color: var(--ink); font-weight: 600; }
.plist .dot { width: 10px; height: 10px; border-radius: 4px; flex: none; }
.plist .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist .n { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.feed { display: flex; flex-direction: column; gap: 2px; }
.feed-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.feed-item:hover { background: var(--surface-2); }
.feed-item b { color: var(--ink); font-weight: 600; }
.feed-item time { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.me { margin: 10px 14px 14px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.me-row { display: flex; align-items: center; gap: 10px; padding: 12px; }
.me-row .who { flex: 1; min-width: 0; }
.me-row b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-actions { display: flex; border-top: 1px solid var(--line); }
.me-actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.me-actions button:hover { background: var(--surface-2); color: var(--ink); }
.me-actions button + button { border-left: 1px solid var(--line); }

.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.topbar { display: flex; align-items: center; gap: 12px; }
.search { flex: 1; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--muted); }
.search input { flex: 1; border: 0; outline: none; background: none; font-size: 14.5px; color: var(--ink); min-width: 0; }
.search:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.menu-btn { display: none; }

/* --------------------------------------------------------------- board */
.board-head { display: flex; flex-direction: column; gap: 14px; }
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumbs a, .crumbs span.cur { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 550; color: var(--ink-2); }
.crumbs .sep { color: var(--dim); }
.crumbs .spacer { flex: 1; }
.progress { display: flex; flex-direction: column; gap: 6px; width: 240px; }
.progress small { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bar { height: 14px; border-radius: 999px; background: var(--surface); padding: 3px; box-shadow: var(--shadow-sm); }
.bar i { display: block; height: 100%; border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, #E94C99 6px 12px); min-width: 8px; transition: width .4s cubic-bezier(.16, 1, .3, 1); }
.title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ptile { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; flex: none; background: var(--surface); box-shadow: var(--shadow-sm); }
.ptile span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.ptitle { min-width: 0; flex: 1; }
.ptitle h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.03em; font-weight: 700; }
.ptitle .sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 13.5px; flex-wrap: wrap; }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fchip:hover { border-color: var(--line-2); color: var(--ink); }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.fchip .cat { font-size: 0; gap: 0; }

.board { flex: 1; min-height: 0; display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 12px; align-items: flex-start; }
.col { flex: none; width: 318px; max-height: 100%; display: flex; flex-direction: column; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.col-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 10px 18px; }
.col-head h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.015em; cursor: text; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-head .count.bump { animation: bump .4s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.3); background: var(--accent-soft); color: var(--accent-text); } }
.col-head .count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 9px; background: var(--surface-3); font-size: 13px; font-weight: 650; color: var(--muted); }
.col-head .done-mark { color: var(--ok); }
.col-head .grow { flex: 1; }
.add-dash { width: 56px; height: 34px; border-radius: 10px; border: 1.5px dashed var(--dk-dash, #C3C6DA); color: var(--glyph); display: grid; place-items: center; transition: border-color .15s, color .15s, background .15s; }
.add-dash:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.col-name-input { height: 34px; font-size: 16px; font-weight: 650; border-radius: 10px; border: 1px solid var(--primary); background: var(--surface); padding: 0 10px; outline: none; box-shadow: 0 0 0 3px var(--ring); width: 100%; }
.col-body { flex: 1; min-height: 60px; overflow-y: auto; padding: 26px 12px 14px; display: flex; flex-direction: column; gap: 22px; }
.col-body.over { background: rgba(var(--primary-rgb), .05); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.drop-hint { border: 1.5px dashed var(--dk-dash, #C9CCDF); border-radius: 14px; padding: 18px; text-align: center; color: var(--muted); font-size: 12.5px; }
.placeholder { height: 84px; border-radius: 14px; border: 2px dashed var(--primary); background: rgba(var(--primary-rgb), .06); flex: none; animation: ph-in .22s var(--ease-out); }
@keyframes ph-in { from { opacity: 0; transform: scaleY(.6); } }

/* card with a notched category tab (the reference's signature silhouette) */
.card {
  --line-c: var(--line);
  --bw: 1px;
  position: relative; flex: none; margin-top: 12px;
  background: var(--surface); border: var(--bw) solid var(--line-c); border-radius: 0 16px 16px 16px;
  box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; width: 100%;
  transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card:active { transform: translateY(0) scale(.995); }
.card.is-new { animation: card-in .46s var(--ease-out) both; }
.card.is-new::before { content: ""; position: absolute; inset: calc(var(--bw) * -1); border-radius: 0 16px 16px 16px; box-shadow: 0 0 0 3px rgba(217, 37, 126, .35); pointer-events: none; animation: ring-fade 1.6s ease-out .35s both; }
@keyframes card-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes ring-fade { from { opacity: 1; } to { opacity: 0; } }
.card.overdue { --line-c: var(--dk-overdue-line, #F4B4A7); }
.card.overdue[aria-selected="true"] { --line-c: var(--accent); }
.drag-ghost { position: fixed; top: -1000px; left: -1000px; transform: rotate(2.5deg); box-shadow: var(--shadow-lg); pointer-events: none; }
.card[aria-selected="true"] { --line-c: var(--accent); --bw: 2px; box-shadow: var(--shadow-md); }
.card.dragging { opacity: .35; transform: scale(.97); box-shadow: none; }
.card .tab {
  position: absolute; left: calc(var(--bw) * -1); bottom: 100%;
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 10px;
  background: var(--surface); border: var(--bw) solid var(--line-c); border-bottom: 0; border-radius: 12px 12px 0 0;
}
.card .tab::after {
  content: ""; position: absolute; left: 100%; bottom: 0; width: 12px; height: 12px;
  border-left: var(--bw) solid var(--line-c); border-bottom: var(--bw) solid var(--line-c);
  border-bottom-left-radius: 12px; box-shadow: 0 0 0 12px var(--surface); clip-path: inset(0);
}
.card .more { position: absolute; right: 8px; top: 8px; }
.card-in { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.card .num { font: 600 11.5px/1 var(--mono); color: var(--muted); }
.card h3 { margin: 0; font-size: 14.5px; line-height: 1.38; font-weight: 600; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.card .shot { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-3) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(var(--sh), .06); }
.card .shot.pending { display: grid; place-items: center; color: var(--glyph-2); }
.card .by { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.card .by .name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .by .date { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; }
.card-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.card-foot span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot .assignee { margin-left: auto; overflow: visible; }
.ghost { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--line-3); color: var(--glyph); display: grid; place-items: center; flex: none; }
.due { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.due-overdue { background: var(--danger-tint); color: var(--danger); }
.due-today, .due-soon { background: var(--amber-soft); color: var(--warn-ink); }
.due-done { background: var(--ok-soft); color: var(--ok); }
.left-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; font-size: 13px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.left-pill.lv-ok { background: var(--ok-soft); color: var(--ok); }
.left-pill.lv-warn { background: var(--amber-soft); color: var(--warn-ink); }
.left-pill.lv-urgent { background: var(--danger-tint); color: var(--danger); }
.left-pill.lv-late { background: var(--danger-solid); color: var(--on-ink); }
.fchip-over[aria-pressed="false"] { color: var(--danger); }
.over-link { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-weight: 600; font-size: 13.5px; }
.over-link:hover { text-decoration: underline; }

.composer-card { margin-top: 12px; background: var(--surface); border: 1px solid var(--primary); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.cat-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-pick button { height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cat-pick button[aria-pressed="true"] { border-color: var(--c); background: var(--cs); color: var(--c); }
.add-col { flex: none; width: 260px; height: 64px; border-radius: var(--r-lg); border: 1.5px dashed var(--dk-dash, #BFC3D9); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-weight: 600; }
.add-col:hover { border-color: var(--accent); color: var(--accent-text); background: var(--dk-veil, rgba(255,255,255,.5)); }
.add-col-form { flex: none; width: 300px; background: var(--surface); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-md); }
.empty-card { margin-top: 12px; border-radius: 16px; background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.empty-card b { color: var(--ink); font-size: 14.5px; }
.empty-card ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line); font: 600 11px/1 var(--mono); color: var(--ink-2); }

/* -------------------------------------------------------------- drawer */
.scrim { position: fixed; inset: 0; background: var(--scrim); animation: fade .18s ease-out; z-index: 40; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 16px; right: 16px; bottom: 16px; width: min(560px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 41; animation: slide .24s cubic-bezier(.16, 1, .3, 1); overflow: hidden; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.d-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px 22px; border-bottom: 1px solid var(--line); }
.d-head h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; flex: 1; min-width: 0; }
.d-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.d-body > * { flex-shrink: 0; }
.d-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
.c-text { margin: 0; font-size: 19px; line-height: 1.4; letter-spacing: -.015em; font-weight: 650; white-space: pre-wrap; word-break: break-word; }
.c-by { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.c-by b { color: var(--ink); }
.shotbox { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px rgba(var(--sh), .07); }
.shotbox img { display: block; width: 100%; height: auto; }
.shotbox .spot { position: absolute; border-radius: 7px; box-shadow: 0 0 0 9999px rgba(17, 16, 38, .5); outline: 3px solid var(--pc, var(--accent)); outline-offset: 1px; pointer-events: none; transition: opacity .2s; }
.shotbox.raw .spot { opacity: 0; }
.shotbox .seg { position: absolute; top: 10px; right: 10px; background: rgba(26, 27, 46, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.shotbox .seg button { color: rgba(255, 255, 255, .8); height: 28px; }
.shotbox .seg button[aria-pressed="true"] { background: #fff; color: #1A1B2E; }
.shotbox .pending { padding: 36px; text-align: center; color: var(--muted); font-size: 13px; }
.ctx { display: grid; grid-template-columns: 110px 1fr; gap: 9px 14px; margin: 0; font-size: 13px; }
.ctx dt { color: var(--muted); }
.ctx dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ctx a { color: var(--primary-text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button { height: 40px; padding: 0 12px; font-weight: 600; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--primary); }
.tabs .n { font-size: 11.5px; background: var(--surface-3); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.thread { display: flex; flex-direction: column; gap: 16px; }
.msg { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.msg .avatar { width: 32px; height: 32px; }
.msg .h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.msg .h b { color: var(--ink); font-size: 13.5px; }
.msg p { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.typing { display: flex; align-items: center; gap: 8px; padding: 10px 22px 0; font-size: 12.5px; color: var(--muted); animation: rise .22s var(--ease-out); }
.typing:empty { display: none; }
.typing .dots { display: inline-flex; gap: 3px; padding: 6px 8px; border-radius: 999px; background: var(--surface-3); }
.typing .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: tdot 1.1s infinite ease-in-out; }
.typing .dots i:nth-child(2) { animation-delay: .15s; } .typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }
.reply-box { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px 14px 22px; border-top: 1px solid var(--line); }
.reply-box textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.log li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.log li:last-child { border-bottom: 0; }
.log time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.prompt { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--code-bg); color: #E6E7F2; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; }
.muted { color: var(--muted); }

/* ----------------------------------------------------------- list page */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 30px; letter-spacing: -.03em; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--dk-surface-2, #FBFBFE); }
.cell-main { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.cell-main b { display: block; font-size: 14px; }
.cell-main small { color: var(--muted); font-size: 12.5px; }
.swatch { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.dom { display: flex; flex-wrap: wrap; gap: 6px; max-width: 280px; }
.mini-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.mini-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatches button { width: 32px; height: 32px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.swatches input[type="color"] { width: 40px; height: 32px; border: 1px solid var(--line-2); border-radius: 10px; padding: 2px; background: var(--surface); cursor: pointer; }
.snippet { position: relative; }
.snippet pre { margin: 0; padding: 14px 16px; padding-right: 92px; border-radius: 12px; background: var(--code-bg); color: #E6E7F2; font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-all; }
.snippet .btn { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.12); color: #fff; }
.snippet .btn:hover { background: rgba(255,255,255,.2); }
.checks { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.empty-state { padding: 48px 24px; text-align: center; color: var(--muted); }
.empty-state b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }

/* --------------------------------------------------------------- toasts */
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 60; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(460px, calc(100vw - 24px)); padding: 11px 16px; border-radius: 14px; background: var(--ink); color: var(--on-ink); font-size: 13.5px; box-shadow: var(--shadow-lg); animation: rise .2s cubic-bezier(.16, 1, .3, 1); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

.skeleton { background: linear-gradient(90deg, var(--surface-3) 0%, var(--dk-shimmer, #F6F6FC) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .side { position: fixed; top: 12px; left: 12px; bottom: 12px; width: 280px; z-index: 50; box-shadow: var(--shadow-lg); transform: translateX(-120%); transition: transform .24s cubic-bezier(.16, 1, .3, 1); }
  .app.nav-open .side { transform: none; }
  .menu-btn { display: inline-grid; width: 54px; height: 54px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); place-items: center; }
  .progress { width: 180px; }
}
@media (max-width: 640px) {
  .ptitle h1, .page-head h1 { font-size: 23px; }
  .ptile { width: 52px; height: 52px; border-radius: 15px; }
  .crumbs .progress { display: none; }
  .col { width: 286px; }
  .drawer { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; }
  .search { height: 48px; }
  .menu-btn { width: 48px; height: 48px; }
  .live .txt { display: none; }
  .ctx { grid-template-columns: 1fr; gap: 2px; }
  .ctx dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------- planning (drawer) */
.plan { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.plan-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; }
.plan-l { font-size: 13px; color: var(--muted); }
.pick { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); cursor: pointer; transition: border-color .15s; }
.pick:hover { border-color: var(--line-3); }
.pick:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.pick select { appearance: none; border: 0; outline: none; background: transparent; flex: 1; font-weight: 600; font-size: 13.5px; cursor: pointer; padding-right: 18px; background-image: var(--chev-sm); background-repeat: no-repeat; background-position: right center; }
.dates { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.dt { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.dt input { height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); padding: 0 10px; font-size: 13.5px; color: var(--ink); outline: none; }
.dt input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.dates .arrow { color: var(--dim); height: 38px; display: grid; place-items: center; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.qchip { height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: background .15s, border-color .15s, transform .1s; }
.qchip:hover { border-color: var(--primary); color: var(--primary-ink); }
.qchip:active { transform: scale(.96); }
.qchip.ghosted { border-color: transparent; background: transparent; color: var(--muted); }
.plan-state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }

/* ------------------------------------------------------------- zoom */
.shotbox { cursor: zoom-in; }
.shotbox .zoom-hit { position: absolute; inset: 0; z-index: 1; cursor: zoom-in; }
.shotbox .seg { z-index: 2; }
.shotbox .zoom-tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(26, 27, 46, .6); color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s var(--ease-out); pointer-events: none; }
.shotbox:hover .zoom-tag { opacity: 1; transform: none; }
.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(14, 15, 24, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; animation: fade .2s ease-out; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; animation: zoom-in .32s var(--ease-out); }
.lightbox .shotbox.big { display: inline-block; cursor: default; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.lightbox .shotbox.big img { max-width: min(1400px, 94vw); max-height: calc(100vh - 140px); width: auto; height: auto; }
.lightbox figcaption { display: flex; align-items: center; gap: 12px; max-width: min(1000px, 94vw); color: #E6E7F2; font-size: 13.5px; cursor: default; }
.lightbox .lb-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox .lb-close { background: rgba(255, 255, 255, .12); color: #fff; }
.lightbox .lb-close:hover { background: rgba(255, 255, 255, .2); }
.lightbox.leaving { animation: fade-out .16s var(--ease-in) forwards; }
.lightbox.leaving figure { animation: zoom-out .16s var(--ease-in) forwards; }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } }
@keyframes zoom-out { to { opacity: 0; transform: scale(.96); } }
@keyframes fade-out { to { opacity: 0; } }

/* ------------------------------------------------------------- motion */
.drawer.leaving { animation: slide-out .17s var(--ease-in) forwards; }
.scrim.leaving { animation: fade-out .17s var(--ease-in) forwards; }
@keyframes slide-out { to { transform: translateX(28px); opacity: 0; } }
.toast.out { animation: sink .2s var(--ease-in) forwards; }
@keyframes sink { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.msg.is-new { animation: rise .36s var(--ease-out) both; }
.login-card { animation: rise .5s var(--ease-out) both; }
.otp.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45% { transform: translateX(-7px); } 60% { transform: translateX(7px); } }
.live i { position: relative; }
.live:not(.off) i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #12B76A; animation: ping 2.6s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.btn, .fchip, .add-dash, .btn-icon { transition: background .15s, border-color .15s, color .15s, transform .12s var(--ease-out), box-shadow .15s; }
.btn:active:not(:disabled), .fchip:active, .add-dash:active, .btn-icon:active { transform: scale(.96); }
.composer-card, .add-col-form, .empty-card { animation: rise .3s var(--ease-out) both; }
.feed-item { transition: background .15s; }

/* route changes: the main area cross-fades, the active nav pill glides */
.main { view-transition-name: main; }
.nav a[aria-current="page"] { view-transition-name: nav-active; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(main) { animation: vt-out .14s var(--ease-in) both; }
::view-transition-new(main) { animation: vt-in .3s var(--ease-out) both; }
::view-transition-group(nav-active) { animation-duration: .34s; animation-timing-function: var(--ease-out); }
@keyframes vt-out { to { opacity: 0; transform: translateY(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
  .plan-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ------------------------------------------------------------- resolve */
/* the check sits above the card's top edge; .col-body's top padding keeps it inside the scroll box */
.card-check { position: absolute; top: -32px; right: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--muted); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), background .15s, color .15s, border-color .15s; z-index: 2; }
.card:hover .card-check, .card:focus-within .card-check, .card-check:focus-visible { opacity: 1; transform: none; }
.card-check:hover { background: var(--ok-solid); border-color: var(--ok-solid); color: #fff; }
.card-check.on { opacity: 1; transform: none; background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.card-check.on:hover { background: var(--surface-3); color: var(--ink-2); }
.card.resolving { animation: resolve-out .26s var(--ease-in) forwards; pointer-events: none; }
@keyframes resolve-out { 30% { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(6, 118, 71, .35); } 100% { opacity: 0; transform: scale(.92) translateY(-6px); } }
.btn-resolve { background: var(--ok-soft); color: var(--ok); }
.btn-resolve:hover:not(:disabled) { background: var(--dk-ok-soft-h, #D1F0E0); }
.resolved-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; border-radius: 12px; border: 1.5px dashed var(--dk-dash, #C9CCDF); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.resolved-more:hover { color: var(--ok); border-color: var(--ok); }
.link-btn { color: var(--primary-text); font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.env-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--primary-soft); color: var(--primary-ink); font: 500 12px/1 var(--mono); }
.img-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.toast-act { color: var(--dk-toast-link, #B3AFFF); font-weight: 700; margin-left: 4px; }
.toast-act:hover { text-decoration: underline; }

/* filters get their own row so the project title keeps one line */
.title-row .tools { flex: 1 1 100%; }
.title-row .tools .btn-accent { margin-left: auto; }

/* report export (Tech Team): trigger + popover in the same shadcn look as .pop/.opt */
.exp-wrap { position: relative; display: inline-flex; flex: none; }
.title-row .tools .exp-wrap { margin-left: auto; }
.title-row .tools .exp-wrap + .btn-accent { margin-left: 0; }
.page-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pop.exp-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 304px; max-height: none; padding: 6px; transform-origin: top right; }
.exp-head { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.exp-head b { font-size: 14px; font-weight: 650; color: var(--ink); }
.exp-head small { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.exp-label { padding: 10px 10px 4px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.exp-pop .opt { white-space: normal; }
.exp-pop .opt:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.exp-pop .opt[aria-checked="true"] { background: var(--surface-2); }
.exp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.exp-txt b { font-size: 13.5px; font-weight: 600; }
.exp-txt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-badge, .exp-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; }
.exp-badge { font: 700 8.5px/1 var(--mono); letter-spacing: .02em; }
.exp-badge.pdf { background: var(--danger-tint); color: var(--danger); }
.exp-badge.doc { background: var(--dk-blue-soft, #D1E9FF); color: var(--dk-blue, #175CD3); }
.exp-ic { background: var(--surface-3); color: var(--ink-2); }
.exp-foot { padding: 10px 4px 4px; margin-top: 6px; border-top: 1px solid var(--line); }
.exp-foot .btn { width: 100%; }
.exp-btn .spin.dark { flex: none; }
@media (max-width: 760px) {
  .pop.exp-pop { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); width: auto; transform-origin: bottom center; }
  .title-row .tools .exp-wrap { margin-left: 0; }
  .page-acts { width: 100%; flex-wrap: nowrap; }
  .page-acts > * { flex: 1 1 0; }
  .page-acts .exp-wrap > .btn { width: 100%; }
}
.card-foot .avatar, .card-foot .ghost { display: grid; place-items: center; overflow: visible; }

/* ---------------------------------------------------- board container */
.board-shell { flex: 1; min-height: 0; display: flex; background: var(--dk-board, rgba(255, 255, 255, .72)); border: 1px solid var(--dk-board-line, #FFFFFF); border-radius: var(--r-xl); padding: 14px 10px 6px 14px; box-shadow: var(--shadow-sm); }
.board-shell .board { flex: 1; padding: 2px 4px 10px 2px; }
.col { background: var(--dk-col, #F2F3F9); border: 1px solid var(--dk-col-line, #E6E8F2); box-shadow: none; }
.col .card { box-shadow: 0 1px 2px rgba(var(--sh), .05); }
.add-col { background: transparent; }

/* ----------------------------------------------------------- dashboard */
.dash-skel { display: flex; flex-direction: column; gap: 16px; }
.dash-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 6px; flex: none; }
.stat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); border-radius: 0; }
.stat .si { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); flex: none; }
.stat.bad .si { background: var(--danger-tint); color: var(--danger); }
.stat.good .si { background: var(--ok-soft); color: var(--ok); }
.stat .sv { display: flex; flex-direction: column; min-width: 0; }
.stat b { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.stat.bad b { color: var(--danger); }
.stat small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 8px; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dbox { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px 16px 12px; animation: rise .4s var(--ease-out) both; }
.dash-col .dbox:nth-child(2) { animation-delay: .05s; }
.dash-col + .dash-col .dbox { animation-delay: .08s; }
.dbox header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dbox h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.dcount { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 650; display: inline-grid; place-items: center; }
.dempty { margin: 4px 0 6px; color: var(--muted); font-size: 13px; }
.drows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drow { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px; transition: background .15s; }
.drow:hover { background: var(--surface-2); }
.drows li + li .drow { border-top: 1px solid var(--line); border-radius: 0; }
.drows li + li .drow:hover { border-radius: 12px; border-top-color: transparent; }
.pdot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.drow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drow-main b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow-main small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.gitem { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.gitem:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gimg { aspect-ratio: 16 / 10; background: var(--surface-3) center / cover no-repeat; display: grid; place-items: center; color: var(--glyph-2); }
.gbody { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.gtext { font-size: 13px; line-height: 1.4; font-weight: 550; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gmeta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dprojects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dprojects a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; transition: background .15s; }
.dprojects a:hover { background: var(--surface-2); }
.dp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dp-main b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-main .mini-bar { margin-top: 0; }
.dp-stat { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; white-space: nowrap; }
.dp-stat small { color: var(--muted); }
.dp-stat small.bad { color: var(--danger); font-weight: 600; }
@media (max-width: 1280px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .dash-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } }

/* ---------------------------------------------- collapsible sidebar */
.app { transition: grid-template-columns .32s var(--ease-out); }
.side { overflow: hidden; }
.side-top { gap: 8px; }
.side-toggle { flex: none; }
.nav a, .plist a, .me-actions button { white-space: nowrap; }
.bottom-nav { display: none; }
/* expanded sidebar: helpers used only by the rail stay hidden */
.nav a .ic { display: contents; }
.plist .ptl, .plist .short, .me .mini-name { display: none; }

/* collapse/expand motion: the grid column animates; the sidebar content keeps its final
   width (clipped by .side) and cross-fades, so labels never re-wrap mid-animation */
@media (min-width: 1101px) {
  .side > .side-top, .side > .nav, .side > .side-scroll { width: 268px; flex-shrink: 0; }
  .side > .side-scroll { flex-shrink: 1; }
  .side > .me { width: 240px; }
  .side-mini .side > .side-top, .side-mini .side > .nav, .side-mini .side > .side-scroll { width: 92px; }
  .side-mini .side > .me { width: 76px; }
  .side > * { transition: opacity .22s var(--ease-out) .12s; }
  .side-swap .side > * { opacity: 0; transition: opacity .09s linear; }
}

/* collapsed sidebar = navigation rail: icon pill + small label, like a native rail */
@media (min-width: 1101px) {
  .app.side-mini { grid-template-columns: 92px minmax(0, 1fr); }
  .side-mini .side-top { flex-direction: column; padding: 18px 0 6px; gap: 10px; }
  .side-mini .brand > span:last-child, .side-mini .side-label, .side-mini .side-feed,
  .side-mini .plist .dot, .side-mini .plist .name, .side-mini .plist .n, .side-mini .me-row .who { display: none; }
  .side-mini .side-toggle { width: 40px; height: 32px; border-radius: 10px; }
  .side-mini .nav { padding: 4px 6px; gap: 6px; }
  /* rail items: the whole item (icon + label) is one pill, for hover and for the active page */
  .side-mini .nav a { flex-direction: column; justify-content: center; gap: 3px; width: 76px; height: auto; margin: 0 auto; padding: 8px 2px 7px; border-radius: 16px; background: none; box-shadow: none; color: var(--muted); transition: background .2s var(--ease-out), color .2s, box-shadow .2s; }
  .side-mini .nav a .ic { display: grid; place-items: center; width: 28px; height: 24px; }
  .side-mini .nav a .lbl { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
  .side-mini .nav a:hover { background: var(--surface-3); color: var(--ink); }
  .side-mini .nav a[aria-current="page"] { background: var(--primary); color: #fff; box-shadow: 0 8px 18px -10px rgba(var(--sh), .55); }
  .side-mini .nav a[aria-current="page"] .lbl { color: #fff; }
  .side-mini .side-scroll { margin-top: 8px; padding: 12px 6px; gap: 8px; }
  .side-mini .plist { display: flex; flex-direction: column; gap: 4px; }
  .side-mini .plist a { flex-direction: column; justify-content: center; gap: 4px; height: auto; padding: 6px 2px; border-radius: 12px; }
  .side-mini .plist a:hover, .side-mini .plist a[aria-current="true"] { background: var(--surface-2); }
  .side-mini .plist .ptl { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
  .side-mini .plist a[aria-current="true"] .ptl { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
  .side-mini .plist .ptl i { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
  .side-mini .plist .short { display: block; max-width: 76px; font-size: 11px; font-weight: 600; color: var(--ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-mini .me { margin: 8px 8px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding-top: 10px; }
  .side-mini .me-row { flex-direction: column; justify-content: center; gap: 4px; padding: 0 0 6px; }
  .side-mini .me-row .avatar { width: 38px; height: 38px; font-size: 13.5px; box-shadow: 0 0 0 3px var(--primary-soft); }
  .side-mini .me .mini-name { display: block; max-width: 76px; font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-mini .me-actions { flex-direction: column; gap: 2px; border-top: 0; }
  .side-mini .me-actions button { flex-direction: column; gap: 3px; height: auto; padding: 6px 0; border-radius: 12px; font-size: 10.5px; letter-spacing: .02em; text-transform: none; }
  .side-mini .me-actions button + button { border-left: 0; }
  .side-mini .me-actions button .lbl { display: block; }
  .side-mini .me-actions button:hover { background: var(--surface-2); }
  .side-mini .me-actions button:last-child:hover { color: var(--danger); }
}
@media (max-width: 1100px) { .side-toggle { display: none; } }

/* touch screens: actions that appear on hover stay visible */
@media (hover: none) {
  .card-check { opacity: 1; transform: none; }
  .card:hover { transform: none; }
  .shotbox .zoom-tag { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- phones */
@media (max-width: 760px) {
  .app { padding: 10px 10px calc(86px + env(safe-area-inset-bottom)); height: 100dvh; }
  .menu-btn { display: none; }
  .bottom-nav { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 44; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 6px; background: var(--dk-glass, rgba(255, 255, 255, .94)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 22px; box-shadow: var(--shadow-lg); }
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; border-radius: 16px; font-size: 11px; font-weight: 600; color: var(--muted); transition: background .2s var(--ease-out), color .2s; }
  .bottom-nav a[aria-current="page"] { background: var(--primary); color: #fff; }
  .bottom-nav a:active, .bottom-nav button:active { transform: scale(.95); }
  .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .topbar { gap: 8px; }
  .search { height: 46px; padding: 0 14px; }
  .topbar .btn-outline { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
  .topbar .btn-outline .txt, .live .txt { display: none; }
  .live { width: 46px; height: 46px; justify-content: center; padding: 0; }
  .main { gap: 12px; }
  .page-head h1, .ptitle h1 { font-size: 24px; }
  .page-head p { font-size: 13px; }
  /* board */
  .crumbs, .ptile { display: none; }
  .ptitle .sub { font-size: 12.5px; }
  .title-row .tools { flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px; padding: 2px 10px 4px; scrollbar-width: none; }
  .title-row .tools::-webkit-scrollbar { display: none; }
  .fchip, .title-row .tools .btn-accent { flex: none; }
  .board-shell { padding: 10px 0 4px 10px; border-radius: 22px; }
  .board { gap: 12px; scroll-snap-type: x mandatory; scroll-padding-left: 10px; }
  .col { width: min(84vw, 340px); scroll-snap-align: start; }
  .col-body { padding: 26px 10px 12px; }
  .add-col, .add-col-form { width: min(84vw, 300px); scroll-snap-align: start; }
  /* dashboard */
  .stat { padding: 12px; gap: 10px; }
  .stat .si { width: 34px; height: 34px; }
  .stat b { font-size: 22px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .drow { padding: 9px 4px; }
  /* drawer as a full sheet */
  .drawer { animation: sheet-up .32s var(--ease-out); }
  @keyframes sheet-up { from { transform: translateY(32px); opacity: 0; } }
  .d-head { flex-wrap: wrap; row-gap: 8px; padding: 14px 14px 12px 16px; }
  .d-head #move-col { flex: 1 1 auto; }
  .d-body { padding: 16px; }
  .reply-box { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)) 16px; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  /* tables become stacked cards */
  .panel table, .panel tbody, .panel tr, .panel td { display: block; width: 100%; }
  .panel thead { display: none; }
  .panel tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .panel tr:last-child { border-bottom: 0; }
  .panel td { border: 0; padding: 6px 0; }
  .panel td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .panel tbody tr:hover td { background: none; }
  .cell-main { min-width: 0; }
  .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .page-head .btn-accent { width: 100%; }
  /* login */
  .login-card { padding: 26px 20px 22px; border-radius: 24px; }
}
@media (max-width: 760px) {
  .title-row .ptitle { flex: 1 1 100%; }
  .stat small { white-space: normal; line-height: 1.3; }
}
@media (max-width: 760px) {
  .scrim[data-act="drawer-close"] { z-index: 46; }
  .drawer { z-index: 47; }
}

/* ------------------------------------------------------------- forms */
.check input.switch { width: 34px; height: 20px; accent-color: initial; }
.dh-title { flex: 1; min-width: 0; }
.dh-title h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
.dh-title p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.form-drawer .d-head { align-items: flex-start; }
.form-drawer .d-body { gap: 22px; }
.mp { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(0deg, var(--surface-2), var(--surface-2)); border: 1px solid var(--line); }
.mp .avatar { width: 48px; height: 48px; font-size: 17px; box-shadow: 0 0 0 4px var(--surface); transition: background .2s; }
.mp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-who b { font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-email { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fgrid { display: grid; gap: 14px; }
.input-ic { position: relative; display: block; }
.input-ic .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--glyph); pointer-events: none; transition: color .15s; }
.input-ic .input { padding-left: 40px; height: 44px; }
.input-ic:focus-within .i { color: var(--primary-text); }
.input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.fset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fset legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; width: 100%; }
.pick-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.fhint { color: var(--muted); font-size: 12.5px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 14px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface); text-align: left; transition: border-color .18s, background .18s, box-shadow .18s, transform .12s var(--ease-out); }
.choice:hover { border-color: var(--line-3); }
.choice:active { transform: scale(.98); }
.choice .ch-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--tech-soft); color: var(--tech); margin-bottom: 6px; }
.choice.aud .ch-ic { background: var(--auditor-soft); color: var(--auditor); }
.choice b { font-size: 14px; }
.choice small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.choice .tick, .pick-card .tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .22s var(--ease-spring); }
.choice[aria-checked="true"] { border-color: var(--primary); background: var(--picked); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1); }
.choice[aria-checked="true"] .tick { opacity: 1; transform: none; }
.toggle-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.toggle-row:hover { border-color: var(--line-2); }
.toggle-row:has(.switch:checked) { border-color: rgba(var(--primary-rgb), .45); background: var(--picked); }
.tr-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--orange-soft); color: var(--warn-ink); flex: none; }
.tr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-text b { font-size: 14px; }
.tr-text small { font-size: 12.5px; color: var(--muted); }
.toggle-row .switch { width: 40px; height: 24px; border-radius: 12px; }
.toggle-row .switch::after { width: 20px; height: 20px; }
.toggle-row .switch:checked::after { transform: translateX(16px); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pick-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 38px 12px 12px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; transition: border-color .18s, background .18s; }
.pick-card:hover { border-color: var(--line-3); }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.pick-card:has(input:checked) { border-color: var(--primary); background: var(--picked); }
.pick-card:has(input:checked) .tick { opacity: 1; transform: none; }
.pick-card .tick { top: 50%; margin-top: -10px; }
.pc-sw { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.pc-text { min-width: 0; display: flex; flex-direction: column; }
.pc-text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--info-soft); color: var(--info-ink); font-size: 13px; line-height: 1.5; }
.note .i { margin-top: 1px; }
@media (max-width: 520px) { .choice-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- phone "More" sheet */
.sheet { display: none; }
@media (max-width: 760px) {
  .sheet-scrim { z-index: 48; }
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 49; display: flex; flex-direction: column; gap: 6px; max-height: 84dvh; overflow: auto; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px -20px rgba(var(--sh), .35); animation: sheet-in .34s var(--ease-out); scrollbar-width: none; }
  .sheet.leaving { animation: sheet-out .2s var(--ease-in) forwards; }
  .sheet-scrim.leaving { animation: fade-out .2s var(--ease-in) forwards; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  @keyframes sheet-out { to { transform: translateY(100%); } }
  .sheet .grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 2px 0 8px; flex: none; }
  .sheet-me { display: flex; align-items: center; gap: 12px; padding: 4px 2px 10px; }
  .sheet-me b { font-size: 16px; }
  .sheet-badges { display: flex; gap: 4px; margin-top: 4px; }
  .sheet-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .sheet-acts > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 72px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; }
  .sheet-acts > *:active { transform: scale(.97); }
  .sheet-acts b { font-size: 11px; color: var(--primary-ink); }
  .sheet-acts [aria-pressed="false"] b { color: var(--muted); }
  .sheet-acts .danger { color: var(--danger); }
  .sheet .side-label { padding: 10px 6px 6px; }
  .sheet .plist a { height: 46px; font-size: 14.5px; }
  .sheet .feed-item { padding: 9px 6px; font-size: 13px; }
  .bottom-nav button[aria-expanded="true"] { background: var(--surface-3); color: var(--ink); }
}

/* ------------------------------------------------------ sticky search */
.main { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.topbar { position: sticky; top: 0; z-index: 30; flex: none; padding-bottom: 6px; margin-bottom: -6px; background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 78%, var(--dk-bg-fade, rgba(232, 234, 246, 0)) 100%); }
.topbar .search, .topbar .live, .topbar .btn-outline { transition: box-shadow .25s var(--ease-out); }
.topbar.lifted .search, .topbar.lifted .live, .topbar.lifted .btn-outline { box-shadow: var(--shadow-md); }

@media (min-width: 1101px) { .side-mini .brand-mark { width: 44px; height: 44px; } .side-mini .brand-mark .logo-mark { width: 44px; height: 44px; } }

/* ------------------------------------------------------- global search */
.search-wrap { position: relative; flex: 1; display: flex; min-width: 0; }
.search-wrap .search { flex: 1; }
.search .kbd { flex: none; height: 24px; padding: 0 8px; background: var(--surface-2); color: var(--muted); }
.search:focus-within .kbd { opacity: 0; }
.search-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 35; max-height: min(480px, 70vh); overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop-in .18s var(--ease-out); transform-origin: top center; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.sp-group { padding: 10px 12px 4px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.sp-item:hover { background: var(--surface-2); }
.sp-item[aria-selected="true"] { background: var(--primary-soft); }
.sp-num { flex: none; min-width: 34px; font: 600 12.5px var(--mono); color: var(--muted); }
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-main b, .sp-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-main b { font-weight: 600; font-size: 13.5px; }
.sp-main small { font-size: 12px; color: var(--muted); }
.sp-main em { font-style: normal; color: var(--ink-2); }
.sp-item mark { background: var(--dk-mark, #FFE68C); color: inherit; border-radius: 3px; padding: 0 1px; }
.sp-proj::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: 1px; }
.sp-tile { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.sp-done { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ok); }
.sp-empty { display: grid; place-items: center; padding: 22px 12px; font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 760px) { .search .kbd { display: none; } }

/* ------------------------------- select & date picker (shadcn-style) */
.sel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 550; box-shadow: 0 1px 2px rgba(var(--sh), .05); transition: background .15s, border-color .15s, box-shadow .15s; }
.sel:hover { background: var(--surface-2); }
.sel:focus-visible, .sel[aria-expanded="true"] { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.sel .sel-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel .sel-val.muted, .ro-val .muted { color: var(--muted); font-weight: 500; }
.sel-chev { margin-left: auto; display: grid; color: var(--muted); transition: transform .2s var(--ease-out); }
.sel[aria-expanded="true"] .sel-chev { transform: rotate(180deg); }
.sel.date { color: var(--ink); }
.sel.date > svg { color: var(--muted); flex: none; }
.sel.date .sel-chev { display: none; }
.plan .sel { min-width: 240px; }
.plan .dates .sel { min-width: 150px; }
.d-head .sel { height: 36px; max-width: 200px; }
.pop { position: fixed; z-index: 80; max-height: 320px; overflow: auto; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); animation: pop-in .16s var(--ease-out); }
.opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); text-align: left; white-space: nowrap; }
.opt:hover, .opt[data-hl] { background: var(--surface-2); }
.opt[aria-selected="true"] { font-weight: 600; }
.opt .tick { margin-left: auto; width: 16px; display: grid; color: var(--primary-text); padding-left: 8px; box-sizing: content-box; }
.opt .team { font-size: 10.5px; }
.opt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.opt-dot.done { background: var(--ok); }
.cal { width: 296px; padding: 10px; max-height: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; }
.cal-head b { font-size: 14px; font-weight: 650; text-transform: capitalize; }
.cal-head .btn-icon { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.cal-wd { padding: 4px 0 6px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.day { height: 36px; border-radius: 8px; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; transition: background .12s; }
.day:hover:not(:disabled) { background: var(--surface-2); }
.day.out { color: var(--muted); opacity: .55; }
.day.range { background: var(--primary-soft); border-radius: 0; }
.day.today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-2); }
.day.on { background: var(--primary); color: #fff; border-radius: 8px; box-shadow: 0 6px 14px -8px rgba(var(--primary-rgb), .8); }
.day.focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.day:disabled { opacity: .3; cursor: not-allowed; }
.cal-note { display: flex; gap: 6px; align-items: flex-start; margin: 8px 2px 0; font-size: 12px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.cal-note .i { flex: none; margin-top: 1px; }
.cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dt { gap: 5px; }

/* ------------------------------------------- read-only (Auditor Team) */
.status-chip, .ro-val { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.status-chip { height: 36px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-weight: 550; }
.status-chip > svg { color: var(--muted); }
.ro-val > svg { color: var(--muted); }
.ro-note { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ro-note svg { flex: none; margin-top: 2px; }
.ro-badge { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------------ evidence */
.lnk { color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.lnk:hover { color: var(--primary-text-h); }
.drop { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--surface-2); color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.drop:hover, .drop:focus-within, .drawer.file-over .drop { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.drop b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.drop u { color: var(--primary-text); text-underline-offset: 3px; }
.drop small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.drawer.file-over { box-shadow: var(--shadow-lg), inset 0 0 0 3px var(--primary); }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.att-grid.sm { grid-template-columns: repeat(auto-fill, 88px); gap: 8px; }
.att-list { display: flex; flex-direction: column; gap: 8px; }
.att-grid + .att-list { margin-top: 10px; }
.att { position: relative; min-width: 0; }
.att-img .att-hit { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--surface-3); cursor: zoom-in; box-shadow: inset 0 0 0 1px var(--line); }
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease-out); }
.att-img:hover img { transform: scale(1.05); }
.att-file .att-hit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; text-align: left; transition: background .15s, border-color .15s; }
.att-file .att-hit:hover { background: var(--surface-2); border-color: var(--line-2); }
.att-file.sm .att-hit { padding: 7px 10px; gap: 10px; max-width: 360px; }
.att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-meta b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-meta small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-go { flex: none; display: grid; color: var(--muted); }
.fbadge { flex: none; display: grid; place-items: center; width: 36px; height: 42px; border-radius: 8px 12px 8px 8px; background: color-mix(in srgb, var(--fc) 13%, transparent); color: var(--fc); font: 700 9.5px/1 var(--font); letter-spacing: .04em; }
.att-file.sm .fbadge { width: 30px; height: 34px; }
.att-del { position: absolute; top: 6px; right: 6px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 21, 33, .72); color: #fff; opacity: 0; transition: opacity .15s; }
.att-file .att-del { top: 50%; right: 42px; transform: translateY(-50%); background: var(--surface-3); color: var(--ink-2); }
.att:hover .att-del, .att-del:focus-visible { opacity: 1; }
@media (hover: none) { .att-del { opacity: 1; } }
.msg-files { margin-top: 8px; }
.reply-box { flex-direction: column; align-items: stretch; gap: 8px; }
.rf-row { display: flex; align-items: flex-end; gap: 10px; }
.rf-row textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; }
.rf-clip { flex: none; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; color: var(--muted); }
.rf-clip:hover, .rf-clip:focus-within { color: var(--primary-text); background: var(--primary-soft); }
.rf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 280px; height: 42px; padding: 4px 4px 4px 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); overflow: hidden; animation: rise .2s var(--ease-out); }
.rf-chip img { flex: none; width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
.rf-chip .fbadge { width: 28px; height: 32px; font-size: 8.5px; }
.rf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-chip i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--primary); transition: width .2s; }
.rf-chip.err { border-color: rgba(229, 72, 77, .45); background: var(--danger-soft); color: var(--danger); }
.rf-x { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); }
.rf-x:hover { background: var(--surface-3); color: var(--ink); }
.d-body > .rf-chips { margin-top: -4px; }

/* file viewer: images zoom; PDF, text, Word, Excel/CSV and Markdown render inside; legacy .doc/.xls download */
.viewer { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(14, 15, 24, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .2s ease-out; }
.viewer.leaving { animation: vw-out .17s ease-in forwards; }
@keyframes vw-out { to { opacity: 0; } }
.vw-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #E6E7F2; }
.vw-bar b { min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-size { flex: none; font-size: 12.5px; color: #9A9CB5; }
.vw-bar .btn-icon { color: #E6E7F2; }
.vw-bar .btn-icon:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.vw-bar .btn-outline { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.vw-bar .btn-outline:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.vw-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 16px 16px; }
.vw-body iframe { width: min(1100px, 100%); height: 100%; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); animation: zoom-in .3s var(--ease-out); }
.viewer.is-img .vw-body { cursor: zoom-out; }
.vw-body img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); animation: zoom-in .3s var(--ease-out); }
.vw-msg { display: grid; justify-items: center; gap: 14px; max-width: 380px; padding: 24px; text-align: center; color: #C9CAD9; font-size: 13.5px; line-height: 1.5; animation: fade .2s ease-out; }
.vw-msg .btn-outline { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.vw-msg .btn-outline:hover { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 640px) { .vw-bar .txt { display: none; } .plan .sel, .plan .dates .sel { min-width: 0; } }
.sp-empty .spin { border-color: var(--line-2); border-top-color: var(--primary); }

/* ------------------------------------------------------------ settings (admins) */
.st-grid { display: grid; gap: 16px; max-width: 980px; }
.st-pagehead { max-width: 980px; }
.st-sec { display: block; }
.st-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
.st-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary-ink); }
.st-title { flex: 1; min-width: 0; }
.st-title h2 { margin: 0; font-size: 16.5px; letter-spacing: -.012em; }
.st-title p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.st-state { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.st-state.on { background: var(--ok-soft); color: var(--ok); }
.st-state.on i { background: #12B76A; }
.st-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; padding: 18px 20px 20px; align-items: start; }
.st-body .wide { grid-column: 1 / -1; }
.st-label { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.st-env { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 600; }
.st-msg:empty { display: none; }
.st-msg .fhint { display: block; line-height: 1.45; }
.st-err, .st-warn { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--danger); }
.st-err .i, .st-warn .i { margin-top: 2px; }
.st-warn { color: var(--warn); margin-top: 4px; }
.st-sec .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.st-sec .input.mono { font-size: 13px; }
.st-seg { justify-self: start; align-self: flex-start; }
.st-seg button:disabled { opacity: .7; }
.secret-box { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 5px 4px 12px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--surface-2); color: var(--muted); }
.secret-box > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.secret-box > .mono { letter-spacing: .06em; }
.secret-box.gone { border-color: rgba(180, 35, 24, .35); background: var(--danger-soft); color: var(--danger); }
.secret-box.gone > span { color: var(--danger); font-size: 13px; }
.secret-edit { display: flex; gap: 6px; align-items: center; }
.secret-edit .input { flex: 1; min-width: 0; }
.st-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.st-foot > :first-child { margin-right: auto; min-width: 0; }
.st-dirty { font-size: 12.5px; color: var(--muted); }
.st-res { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.st-res .i { margin-top: 2px; }
.st-res.ok { color: var(--ok); }
.st-res.bad { color: var(--danger); }
.st-sys { margin: 0; padding: 4px 20px 6px; }
.st-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.st-row:last-child { border-bottom: 0; }
.st-row dt { color: var(--muted); font-weight: 600; font-size: 13px; }
.st-row dd { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.st-line { display: flex; align-items: center; gap: 8px; }
.st-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.st-dot.on { background: #12B76A; box-shadow: 0 0 0 3px var(--ok-soft); }
.st-dot.warn { background: #F79009; box-shadow: 0 0 0 3px var(--amber-soft); }
.st-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.st-src { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.st-src b { font-size: 12px; color: var(--ink-2); margin-right: 2px; }
.st-src code, .st-row code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); font-size: 12px; }
.st-sys-note { margin: 0 20px 18px; }
@media (max-width: 760px) {
  .st-head { padding: 16px 16px 14px; flex-wrap: wrap; }
  .st-head .st-title { flex: 1 1 calc(100% - 54px); }
  .st-head .st-state { margin-left: 54px; }
  .st-body { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .st-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .st-foot > :first-child { flex: 1 1 100%; }
  .st-foot .btn { flex: 1 1 auto; }
  .st-sys { padding: 4px 16px 6px; }
  .st-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .st-sys-note { margin: 0 16px 16px; }
}
/* phone "More" sheet: actions share the row equally (admins get Settings as a fourth) */
@media (max-width: 760px) { .sheet-acts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* ------------------------------------------- production access code dialog */
.scrim[data-act="ac-close"] { z-index: 51; }
.dialog { position: fixed; left: 50%; top: 50%; z-index: 52; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); transform: translate(-50%, -50%); animation: dlg-in .24s var(--ease-out); overflow: hidden; }
@keyframes dlg-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }
.dlg-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px 4px 22px; }
.dlg-head h2 { margin: 2px 0 4px; font-size: 18px; letter-spacing: -.015em; }
.dlg-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.dlg-head .dh-title { flex: 1; min-width: 0; }
.dlg-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.dlg-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.dlg-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
.dlg-foot .grow { flex: 1; }
.danger-text { color: var(--danger); }
.danger-text:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
.note.warn { background: var(--warn-soft); color: var(--warn-ink); }
.ac-code { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 16px; background: var(--code-bg); color: #fff; }
.ac-code .mono { flex: 1; min-width: 0; font-size: 19px; font-weight: 600; letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }
.ac-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.ac-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ac-state .pill { letter-spacing: .04em; }
.ac-state small { flex-basis: 100%; }
.ac-none { margin: 0; }
.ac-how { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-2); }
.ac-cmd { display: block; padding: 10px 12px; border-radius: 10px; background: var(--surface-3); color: var(--ink); font-size: 12.5px; overflow-wrap: anywhere; }
.ac-how small code { font-size: 12px; }
.pill-hidden { background: var(--warn-soft); color: var(--warn-ink); }
.pill-hidden .i { flex: none; }
@media (max-width: 520px) {
  .dialog { top: auto; bottom: 0; left: 0; width: 100%; max-height: 90dvh; border-radius: 26px 26px 0 0; transform: none; animation: sheet-up .3s var(--ease-out); padding-bottom: env(safe-area-inset-bottom); }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  .ac-code { flex-direction: column; align-items: stretch; }
  .dlg-foot { flex-wrap: wrap; }
}

/* re-renders keep overlays still: only newly shown ones play their entrance animation */
.settled, .lightbox.settled figure, .viewer.settled .vw-body > * { animation: none !important; }
.ac-dot { display: inline-block; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }

/* ------------------------------------------------------------ notifications */
.notif-wrap { position: relative; flex: none; }
.bell { position: relative; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm); transition: box-shadow .25s var(--ease-out), color .15s; }
.bell:hover { color: var(--ink); }
.topbar.lifted .bell { box-shadow: var(--shadow-md); }
.bell[aria-expanded="true"] { color: var(--primary-ink); box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow-sm); }
.bell-n { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.notif-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 36; width: min(392px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop-in .18s var(--ease-out); transform-origin: top right; overflow: hidden; }
.np-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; }
.np-head b { font-size: 14.5px; }
.np-list { list-style: none; margin: 0; padding: 2px 6px 8px; max-height: min(460px, 64vh); overflow: auto; }
.np-item { position: relative; width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 26px 10px 10px; border-radius: 12px; text-align: left; color: var(--ink-2); }
.np-item:hover { background: var(--surface-2); }
.np-item.unread { background: var(--dk-picked, #F5F4FF); }
.np-item.unread:hover { background: var(--dk-primary-soft, #EEEDFE); }
.np-item .avatar { width: 28px; height: 28px; font-size: 11px; }
.np-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.np-line { font-size: 13px; color: var(--ink-2); }
.np-line b { color: var(--ink); }
.np-card { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-card i { display: inline-block; width: 7px; height: 7px; border-radius: 3px; margin-right: 6px; vertical-align: 1px; }
.np-ex { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-text time { font-size: 11.5px; color: var(--muted); }
.np-dot { position: absolute; top: 15px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.np-empty { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 6px 16px 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.np-empty .i { flex: none; margin-top: 1px; }

/* ------------------------------------------------------------- board extras */
.people-filter { align-items: center; }
.people-filter .pf { border-radius: 50%; margin-left: -8px; transition: transform .15s var(--ease-out); }
.people-filter .pf:first-child { margin-left: 0; }
.people-filter .pf .avatar { margin-left: 0; }
.people-filter .pf:hover { transform: translateY(-2px); z-index: 1; }
.people-filter .pf.on { z-index: 2; }
.people-filter .pf.on .avatar { box-shadow: 0 0 0 2px var(--shell), 0 0 0 4px var(--primary); }
.fchip-person .avatar { width: 20px; height: 20px; font-size: 9px; }
.timer-chip { display: inline-flex; align-items: center; gap: 5px; }
.timer-chip.on { color: var(--accent-text); font-weight: 600; }
.tdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tpulse 1.6s var(--ease-out) infinite; }
@keyframes tpulse { 0% { box-shadow: 0 0 0 0 rgba(217, 37, 126, .45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(217, 37, 126, 0); } }

/* -------------------------------------------------------------- card drawer */
.arch-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.note.arch-note { align-items: center; background: var(--surface-3); color: var(--ink-2); }
.note.arch-note span { flex: 1; }
.timer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timer-val { font-family: var(--mono); font-size: 15px; font-weight: 600; min-width: 56px; color: var(--ink); }
.timer-row.on .timer-val { color: var(--accent-text); }
.timer-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.timer-by .avatar { width: 20px; height: 20px; font-size: 9px; }
.timer-note { font-size: 12px; color: var(--muted); }
.tabs .tab-internal[aria-selected="true"] { color: var(--warn-ink); border-color: var(--dk-warn, #DC6803); }
.note.internal-note { background: var(--warn-soft); color: var(--warn-ink); margin: 0; }
.msg .msg-main { min-width: 0; }
.msg .h .edited { font-size: 12px; color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; border-radius: 4px; }
.msg .h .edited:hover { color: var(--primary-ink); }
.msg-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .15s; }
.msg:hover .msg-acts, .msg:focus-within .msg-acts, .msg.deleted .msg-acts { opacity: 1; }
@media (hover: none) { .msg-acts { opacity: 1; } }
.btn-icon.sm { width: 28px; height: 28px; border-radius: 8px; }
.btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); }
.msg.deleted .deleted-note { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--muted); }
.msg.deleted .deleted-body { margin: 6px 0 0; padding: 6px 10px; border-left: 2px dashed var(--line-2); color: var(--muted); font-size: 13px; }
.edit-box { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.edit-box textarea { min-height: 72px; resize: vertical; }
.edit-acts { display: flex; justify-content: flex-end; gap: 6px; }
.btn-internal { background: #B54708; color: #fff; }
.btn-internal:hover:not(:disabled) { background: #93370D; }
.reply-box.internal { background: var(--dk-internal-bg, #FFFBF2); }
.dialog.hist { width: min(560px, calc(100vw - 32px)); }
.versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.versions li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.versions li.cur { border-color: var(--dk-primary-line, #C9C6FB); background: var(--dk-picked, #F7F6FF); }
.versions .vh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.versions .vh time { color: var(--muted); font-size: 12px; }
.versions p { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 14px; }

/* ---------------------------------------------------------------- archive */
.arch-section { margin-top: 26px; }
.arch-section h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; letter-spacing: -.01em; }
.arch-section h2 .n { font-size: 11.5px; background: var(--surface-3); border-radius: 6px; padding: 1px 7px; color: var(--muted); }
.arch-section > p { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.arch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.arch-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.al-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.al-main small { color: var(--muted); font-size: 12px; }
.al-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-size: 13.5px; }
.al-title:hover { color: var(--primary-ink); }
.swatch.sm { width: 18px; height: 18px; border-radius: 6px; }
.login-legal { margin: 2px 0 0 !important; font-size: 12px; line-height: 1.6; color: var(--muted); text-align: center; }
.login-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.login-legal a:hover { color: var(--primary-ink); }
@media (max-width: 640px) {
  .arch-list li { flex-wrap: wrap; }
  .notif-pop { position: fixed; top: 64px; right: 16px; left: 16px; width: auto; }
}
/* five tabs on a card: keep each on one line; the row scrolls sideways when narrow */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; white-space: nowrap; }
.ic-title { display: flex; align-items: center; gap: 8px; }
/* The page area is a fixed-height flex column that scrolls: its blocks keep their natural
   height. Without this, a long table (.panel has overflow: hidden) shrank to the screen
   height and cut off its rows, which the wheel could not reach (Projects, Team). Only the
   board shell fills the rest and scrolls inside its columns. */
.main > :not(.board-shell) { flex-shrink: 0; }

/* ------------------------------------------------------------- account menu */
.me-wrap { position: relative; flex: none; }
.me-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .25s var(--ease-out); }
.me-btn .avatar { width: 32px; height: 32px; font-size: 12px; }
.me-btn:hover, .me-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow-sm); }
.topbar.lifted .me-btn { box-shadow: var(--shadow-md); }
.me-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 36; width: min(300px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop-in .18s var(--ease-out); transform-origin: top right; overflow: hidden; }
.mp-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
.mp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-text b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-text small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-badges { display: flex; gap: 4px; margin-top: 4px; }
.mp-items { display: flex; flex-direction: column; padding: 6px; }
.mp-items > * { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-align: left; }
.mp-items > *:hover { background: var(--surface-2); color: var(--ink); }
.mp-items > * span:first-of-type { flex: 1; }
.mp-val { flex: none !important; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); background: var(--surface-3); border-radius: 6px; padding: 2px 7px; }
.mp-val.on { color: var(--primary-ink); background: var(--primary-soft); }
.mp-items .danger { color: var(--danger); }
.mp-items .danger:hover { background: var(--danger-soft); color: var(--danger); }
/* theme: System / Light / Dark as a compact segmented control in its own row */
.mp-items > .mp-theme { cursor: default; }
.mp-items > .mp-theme:hover { background: none; color: var(--ink-2); }
.mp-theme .seg { flex: none; padding: 2px; gap: 2px; border-radius: 10px; }
.mp-theme .seg button { height: 28px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; }
@media (max-width: 640px) { .me-pop { position: fixed; top: 64px; right: 16px; left: auto; } }
/* swipe down to close (phones): the grab areas never start a page scroll */
@media (max-width: 760px) {
  .sheet { overscroll-behavior: contain; }
  .sheet .grab, .sheet-me { touch-action: none; }
  .drawer .d-head { position: relative; touch-action: none; padding-top: 20px; }
  .drawer .d-head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line-2); }
}

/* the bell on a card: highlighted while its replies reach you */
.btn-icon.watch[aria-pressed="true"] { color: var(--primary-text); }

/* presence: a green dot on the avatar of someone who has Sorotin open right now */
.avatar { position: relative; }
.avatar .pres { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 2px var(--surface); }
.avatar.sm .pres { width: 7px; height: 7px; right: -2px; bottom: -2px; }
.avatar.lg .pres { width: 11px; height: 11px; }

/* tags: the kind of work a card needs (FE, BE, Mobile, Design) */
.wtags { display: flex; flex-wrap: wrap; gap: 6px; }
.wtag { --c: var(--dk-primary-text, #4D47F0); display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--c); background: color-mix(in srgb, var(--c) 11%, var(--surface)); }
.wtag.t-fe { --c: var(--dk-tag-fe, #0B6FB8); }
.wtag.t-be { --c: var(--dk-tag-be, #6938EF); }
.wtag.t-mobile { --c: var(--dk-ok, #067647); }
.wtag.t-design { --c: var(--dk-tag-design, #C11574); }
.wtag.t-devops { --c: var(--dk-tag-devops, #0A7272); }
.tag-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.wtag.pick { height: 30px; padding: 0 11px; border: 1px dashed color-mix(in srgb, var(--c) 45%, var(--surface)); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.wtag.pick:hover { color: var(--c); border-color: var(--c); }
.wtag.pick.on { border-style: solid; border-color: transparent; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
.tagf-wrap { position: relative; display: inline-flex; }
.pop.tagf-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 210px; padding: 6px; }
.tagf-pop .opt .num { margin-left: auto; font-size: 12px; }
.tagf-pop .opt .tick { margin-left: 0; }
.tagf-pop .opt-clear { justify-content: center; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--ink-2); font-size: 12.5px; }

/* column delete (admins): only on hover or keyboard focus, so the column name keeps its room */
.col-head .col-del { display: none; color: var(--muted); }
.col-head:hover .col-del, .col-head:focus-within .col-del { display: grid; }
.col-head .col-del:hover { color: var(--danger); background: var(--danger-soft); }
@media (hover: none) { .col-head .col-del { display: grid; } }

/* card detail header: room for the status name next to the bell (it no longer shrinks) */
.d-head { gap: 8px; }
.d-head .sel { flex: none; max-width: 170px; }
.d-head .btn-icon { width: 32px; height: 32px; }

/* Settings → summary emails: send times as removable chips plus an "add" time field */
.dig-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dig-chip { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: 13.5px; font-weight: 700; }
.dig-chip:not(:has(button)) { padding-right: 12px; }
.dig-chip button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--primary-ink); }
.dig-chip button:hover { background: rgba(var(--primary-rgb), .14); }
.dig-add { display: inline-flex; align-items: center; gap: 6px; }
.dig-add .input { width: 116px; height: 34px; padding: 0 10px; }
.dig-add .btn { height: 34px; }

/* Drawer motion: it slides in from the right edge and back out of it (the exit runs on a
   copy, see ghostOut in panel.js); the backdrop fades with it. */
.scrim { animation: fade .3s ease-out; }
.drawer { animation: drawer-in .42s cubic-bezier(.05, .7, .1, 1); will-change: transform; }
@keyframes drawer-in { from { transform: translateX(calc(100% + 32px)); } }
.drawer.leaving { animation: drawer-out .26s cubic-bezier(.3, 0, .8, .15) forwards; pointer-events: none; }
.scrim.leaving { animation: fade-out .26s ease forwards; pointer-events: none; }
@keyframes drawer-out { to { transform: translateX(calc(100% + 32px)); } }
.out-ghost { pointer-events: none; }
@media (max-width: 760px) {
  .drawer { animation: sheet-up .34s cubic-bezier(.16, 1, .3, 1); }
  .drawer.leaving { animation: sheet-down .26s cubic-bezier(.4, 0, .2, 1) forwards; }
  @keyframes sheet-down { to { transform: translateY(56px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .drawer.leaving, .scrim.leaving { animation: none; }
}

/* Projects / Team lists: search, filter and order next to the page's main button */
.list-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; }
.lt-search { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.lt-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.lt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); }
.lt-sel { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.lt-sel:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.lt-sel select { appearance: none; border: 0; outline: 0; background: none; font: inherit; color: var(--ink); padding-right: 2px; cursor: pointer; }
.lt-sel .i:last-child { color: var(--muted); pointer-events: none; }
.lt-count { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.lt-hint { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 12.5px; color: var(--muted); }
.lt-more td, .lt-none td { text-align: center; padding: 18px; color: var(--muted); font-size: 13px; }
.lt-more td .spin { vertical-align: -3px; margin-right: 8px; }
.lt-none-in { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.row-grip { display: grid; place-items: center; width: 18px; color: var(--muted); cursor: grab; flex: none; }
.can-order tr[data-prow]:hover .row-grip { color: var(--ink-2); }
tr.row-dragging { opacity: .45; }
tr.drop-before td { box-shadow: inset 0 3px 0 var(--primary); }
tr.drop-after td { box-shadow: inset 0 -3px 0 var(--primary); }
.row-move { display: none; gap: 2px; }
@media (hover: none) { .row-move { display: inline-flex; } .row-grip { display: none; } }
@media (max-width: 760px) { .lt-search { flex: 1 1 100%; max-width: none; } .lt-sel { flex: 1 1 0; } .lt-sel select { flex: 1; min-width: 0; } .lt-count { margin-left: 0; width: 100%; } }

/* Board filters: leaving cards fade and shrink, returning ones rise in (refilter in panel.js) */
.card.filter-out { animation: card-filter-out .17s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes card-filter-out { to { opacity: 0; transform: scale(.94); } }
.card.filter-in { animation: card-filter-in .3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes card-filter-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .card.filter-out, .card.filter-in { animation: none; } }

/* The page scrolls in .main; it now reaches the window's top, right and bottom edges so its
   scrollbar sits at the far right like any page. The gaps live inside it instead. */
.app { --pad: 16px; --pad-b: var(--pad); padding: 0 0 0 var(--pad); }
.side { margin: var(--pad) 0; }
.main { padding: var(--pad) var(--pad) var(--pad-b) 0; }
/* sticky boxes stick at the scroller's padding edge: pull it up so the bar covers that band */
.topbar { top: calc(-1 * var(--pad)); padding-top: var(--pad); margin-top: calc(-1 * var(--pad)); }
@media (max-width: 1100px) {
  .app { --pad: 12px; padding: 0; }
  .side { margin: 0; }
  .main { padding-left: var(--pad); }
}
@media (max-width: 760px) {
  .app { --pad: 10px; --pad-b: calc(86px + env(safe-area-inset-bottom)); padding: 0; }
}

/* editing a card's text in the drawer (author in the Backlog, admins) */
.card-edit { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 6px; }
.card-edit .textarea { width: 100%; min-height: 96px; resize: vertical; font-size: 15px; }
.card-edit-acts { display: flex; justify-content: flex-end; gap: 8px; }

/* Sorotin's own dialogs (ask in panel.js) instead of the browser's confirm/prompt */
.ask-wrap { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.ask-scrim { position: absolute; inset: 0; background: var(--scrim-strong); animation: fade .2s ease-out; }
.ask { position: relative; width: min(440px, 100%); background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; animation: ask-in .26s cubic-bezier(.16, 1, .3, 1); }
@keyframes ask-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.ask-top { display: flex; gap: 14px; align-items: flex-start; }
.ask-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.ask-ic.danger { background: var(--danger-soft); color: var(--danger); }
.ask h2 { margin: 2px 0 0; font-size: 16.5px; line-height: 1.4; letter-spacing: -.01em; }
.ask p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.ask .textarea { width: 100%; resize: vertical; min-height: 84px; }
.ask-err { color: var(--danger); font-size: 12.5px; margin-top: -8px; }
.ask-acts { display: flex; justify-content: flex-end; gap: 8px; }
.btn-danger { background: var(--danger-solid); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #9A1C13; }
.ask-wrap.leaving .ask { animation: ask-out .17s cubic-bezier(.4, 0, 1, 1) forwards; }
.ask-wrap.leaving .ask-scrim { animation: fade-out .17s ease forwards; }
@keyframes ask-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ask, .ask-scrim, .ask-wrap.leaving .ask, .ask-wrap.leaving .ask-scrim { animation: none; } }

/* Blocker: the column's mark, the reason on the card and in its detail */
.blocker-mark { display: inline-grid; place-items: center; color: var(--danger); }
.blocked-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 7px 9px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.blocked-note .i { flex: none; margin-top: 1px; }
.blocked-note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blocked-banner { background: var(--danger-soft); color: var(--danger); align-items: flex-start; }
.blocked-banner > span { display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.blocked-banner .bb-reason { font-size: 14px; font-weight: 600; line-height: 1.45; }
.blocked-banner b { color: var(--danger); }
.blocked-banner small { color: var(--muted); font-size: 12px; }

/* empty tabs in the card drawer (discussion, internal, evidence): centred and readable */
.tab-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; padding: 28px 16px; text-align: center; }
.tab-empty .te-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); margin-bottom: 6px; }
.tab-empty b { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.tab-empty span:not(.te-ic) { max-width: 320px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* dragging files over a card: a clear target that says where they will go (like the widget) */
.drawer.file-over::after {
  content: attr(data-drop); position: absolute; inset: 10px; z-index: 6; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 72px 24px 0; text-align: center;
  border: 2px dashed var(--primary); border-radius: 22px; background-color: var(--dk-drop-veil, rgba(236, 235, 254, .94));
  background-image: var(--dk-drop-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%234D47F0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"));
  background-repeat: no-repeat; background-position: center calc(50% - 22px); background-size: 40px;
  color: var(--primary-ink); font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  animation: fade .15s ease-out;
}

/* the card drawer is a little wider so every tab (Discussion … Fix prompt) fits on one row */
.drawer { width: min(640px, calc(100vw - 32px)); }
.plan-row .release { margin-left: 10px; }

/* project logos (optional): the image fills the tile; without one the coloured pin stays */
.has-logo { background: var(--dk-paper, var(--surface)) !important; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); padding: 0 !important; }
.plogo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ptl.has-logo { position: relative; overflow: visible; }
.ptl.has-logo .plogo { border-radius: inherit; }
.logo-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logo-acts label.btn { cursor: pointer; }
.logo-acts .is-busy { opacity: .7; pointer-events: none; }

/* ------------------------------------------------------------ timeline */
.tl-tools { gap: 8px; }
.tl-seg button { height: 32px; }
.tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.tl-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tl-leg i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex: none; }
.tl-leg.blk i { background: repeating-linear-gradient(135deg, #D92D20 0 3px, #A1170D 3px 6px); }
.tl-leg.late i { background: var(--surface); box-shadow: inset 0 0 0 2px #D92D20; }
.tl-wrap { padding: 0; overflow: hidden; margin-bottom: 14px; }
.tl { --left: 300px; --rowh: 38px; position: relative; overflow: auto; max-height: calc(100dvh - 250px); min-height: 220px; overscroll-behavior: contain; }
.tl-head, .tl-row { display: flex; width: max-content; min-width: 100%; }
.tl-head { position: sticky; top: 0; z-index: 4; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.tl-corner { position: sticky; left: 0; z-index: 5; width: var(--left); flex: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3px; padding: 0 14px 7px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.tl-scale { flex: none; position: relative; font-size: 11.5px; color: var(--muted); }
.tl-scale-top, .tl-scale-units { display: flex; }
.tl-scale span { flex: none; overflow: hidden; white-space: nowrap; box-shadow: inset 1px 0 0 var(--line); }
.tl-scale-top span { padding: 8px 8px 3px; font-weight: 700; color: var(--ink); font-size: 12.5px; text-transform: capitalize; }
.tl-scale-units span { padding: 3px 0 7px; text-align: center; font-variant-numeric: tabular-nums; }
.tl-scale-units span.we { color: var(--line-2); }
.tl-scale::after { content: ""; position: absolute; top: 4px; bottom: 0; left: var(--today); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--accent); }
.tl-row { min-height: var(--rowh); }
.tl-label { position: sticky; left: 0; z-index: 2; width: var(--left); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; background: var(--surface); box-shadow: 1px 0 0 var(--line), inset 0 -1px 0 var(--surface-3); min-width: 0; }
.tl-group .tl-label { background: var(--surface-2); font-size: 13.5px; }
.tl-group .tl-label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.tl-group .tl-lane { background-color: var(--surface-2); }
.tl-group .swatch { overflow: hidden; }
.tl-card { text-align: left; font: inherit; font-size: 13px; color: var(--ink-2); padding-left: 44px; cursor: pointer; }
.tl-card:hover .tl-txt, .tl-card:focus-visible .tl-txt { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.tl-card:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tl-num { color: var(--muted); font-size: 12px; flex: none; }
.tl-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-card .avatar { flex: none; }
.tl-lane { position: relative; flex: none; box-shadow: inset 0 -1px 0 var(--surface-3);
  background-image: repeating-linear-gradient(to right, transparent 0 calc(var(--unit) - 1px), var(--line) calc(var(--unit) - 1px) var(--unit));
  background-position: calc(-1 * var(--off)) 0; }
.tl-z-day .tl-lane { background-image: repeating-linear-gradient(to right, transparent 0 calc(var(--unit) - 1px), var(--line-2) calc(var(--unit) - 1px) var(--unit)),
  repeating-linear-gradient(to right, transparent 0 calc(5 * var(--px)), var(--weekend-tint) calc(5 * var(--px)) calc(7 * var(--px))),
  repeating-linear-gradient(to right, transparent 0 calc(var(--px) - 1px), var(--surface-3) calc(var(--px) - 1px) var(--px)); }
.tl-lane::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--today); width: 2px; margin-left: -1px; background: var(--accent); opacity: .55; pointer-events: none; z-index: 1; }
.tl-bar { position: absolute; top: 7px; height: calc(var(--rowh) - 14px); z-index: 1; display: flex; align-items: center; border-radius: 7px; background: var(--c); color: var(--fg, #fff); font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(var(--sh), .18); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; transition: box-shadow .15s, filter .15s; }
.tl-bar > span { display: block; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 1; pointer-events: none; }
.tl-bar > span .i { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.tl-bar:hover { filter: brightness(1.06); box-shadow: 0 4px 12px -4px rgba(var(--sh), .35); }
.tl-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-bar.movable { cursor: grab; touch-action: none; }
.tl-bar.dragging { cursor: grabbing; z-index: 3; box-shadow: 0 10px 24px -8px rgba(var(--sh), .45); filter: brightness(1.04); transition: none; }
.tl-bar.done { background: #98A2B3; opacity: .8; }
.tl-bar.blk { background: repeating-linear-gradient(135deg, #D92D20 0 7px, #B42318 7px 14px); }
.tl-bar.late { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #D92D20; }
.tl-h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; }
.tl-h.l { left: -2px; } .tl-h.r { right: -2px; }
.tl-h::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .75); opacity: 0; transition: opacity .15s; }
.tl-bar.movable:hover .tl-h::after { opacity: 1; }
.tl-unsched-old { display: none; }
.tl-unsched summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.tl-unsched summary::-webkit-details-marker { display: none; }
.tl-unsched summary small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.tl-unsched[open] summary { box-shadow: inset 0 -1px 0 var(--line); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; max-height: 260px; overflow: auto; }
.tl-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 320px; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--ink-2); }
.tl-chip:hover { background: var(--primary-soft); color: var(--primary-ink); }
.tl-chip .num { color: var(--muted); }
@media (max-width: 760px) {
  .tl { --left: 150px; --rowh: 36px; max-height: calc(100dvh - 300px); }
  .tl-card { padding-left: 14px; }
  .tl-card .avatar { display: none; }
  .tl-legend { margin-left: 0; width: 100%; }
  .tl-tools .tl-seg { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .tl-bar { transition: none; } }
div.st-move { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.st-line.st-move { margin-top: 8px; color: var(--ink-2); }

/* timeline page: compact head, the grid fills the screen (one scroll area) */
.tl-top { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.tl-top h1 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.tl-top p { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-top .btn.on { background: var(--primary-soft); color: var(--primary-ink); }
.list-tools.tl-tools { margin: 0; }
.tl-layout button span { white-space: nowrap; }
.main > .tl-shell { flex: 1 1 0; min-height: 320px; display: flex; flex-direction: column; }
.tl-shell .tl-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.tl-shell .tl { flex: 1; min-height: 0; max-height: none; }
.tl-unsched { padding: 0; }
.tl-unsched header { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; box-shadow: inset 0 -1px 0 var(--line); }
.tl-unsched header b { font-size: 13.5px; }
.tl-unsched header small { flex: 1; color: var(--muted); font-size: 12.5px; }
.tl-unsched .tl-chips { max-height: 132px; padding: 12px 16px 14px; }
.tl-nav { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.tl-nav b { min-width: 132px; text-align: center; font-size: 13.5px; text-transform: capitalize; }
.tl-nav .btn-icon { width: 32px; height: 32px; }
/* project rows fold away; the project's row keeps one bar for its whole span */
.tl-fold { width: 24px; height: 24px; margin-left: -6px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); flex: none; }
.tl-fold:hover { background: var(--surface-3); color: var(--ink); }
.tl-fold .i { transition: transform .2s var(--ease-out); }
.tl-group.folded .tl-fold .i { transform: rotate(-90deg); }
.tl-pname { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.tl-pname:hover, .tl-pname:focus-visible { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.tl-sum { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 999px; background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); z-index: 1; padding: 0; overflow: visible; }
.tl-group.folded .tl-sum { height: 22px; margin-top: -11px; border-radius: 7px; background: color-mix(in srgb, var(--c) 22%, var(--surface)); display: flex; align-items: center; }
.tl-sum span { padding: 0 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-sum b { color: var(--danger); }
.tl-foldall { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; margin-left: -4px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--primary-ink); }
.tl-foldall:hover { background: var(--primary-soft); }

/* calendar layout: month grid */
.tlm { padding: 0; overflow: hidden; }
.tlm-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); box-shadow: inset 0 -1px 0 var(--line); }
.tlm-head span { padding: 10px 10px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tlm-head span.we { color: var(--glyph-2); }
.tlm-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: max(112px, calc(40px + var(--lanes) * 24px + 22px)); }
.tlm-week + .tlm-week { box-shadow: inset 0 1px 0 var(--line); }
.tlm-day { position: relative; min-width: 0; padding: 6px; box-shadow: inset -1px 0 0 var(--surface-3); transition: background .15s; }
.tlm-day:last-child { box-shadow: none; }
.tlm-day.we { background: var(--dk-we-day, #FAFAFE); }
.tlm-day.out { background: var(--surface-2); }
.tlm-day.out .tlm-dn { color: var(--dim-2); }
.tlm-day.is-sel { background: var(--primary-soft); }
.tlm-day.is-drop { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.tlm-dn { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tlm-dn:hover { background: var(--surface-3); }
.tlm-day.today .tlm-dn { background: var(--primary); color: #fff; }
.tlm-more { position: absolute; left: 6px; bottom: 5px; padding: 1px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--primary-ink); }
.tlm-more:hover { background: var(--primary-soft); }
.tlm-dots { display: none; }
.tlm-bar { position: absolute; z-index: 1; top: calc(38px + var(--lane) * 24px); left: calc(var(--col) * 100% / 7 + 4px); width: calc(var(--span) * 100% / 7 - 8px); height: 20px; display: flex; align-items: center; border-radius: 6px; background: var(--c); color: var(--fg, #fff); font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 2px rgba(var(--sh), .16); cursor: pointer; user-select: none; -webkit-user-select: none; transition: box-shadow .15s, filter .15s, opacity .15s; }
.tlm-bar > span { display: block; padding: 0 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; pointer-events: none; }
.tlm-bar > span .i { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.tlm-bar.cl { left: calc(var(--col) * 100% / 7); width: calc(var(--span) * 100% / 7 - 4px); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tlm-bar.cr { width: calc(var(--span) * 100% / 7 - 4px); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tlm-bar.cl.cr { width: calc(var(--span) * 100% / 7); }
.tlm-bar:hover { filter: brightness(1.06); box-shadow: 0 4px 12px -4px rgba(var(--sh), .35); }
.tlm-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tlm-bar.movable { cursor: grab; touch-action: none; }
.tlm-bar.dragging { opacity: .45; }
.tlm.dragging .tlm-bar { pointer-events: none; }
.tlm.dragging { cursor: grabbing; }
.tl-bar.done, .tlm-bar.done { background: #98A2B3; opacity: .8; }
.tl-bar.blk, .tlm-bar.blk { background: repeating-linear-gradient(135deg, #D92D20 0 7px, #B42318 7px 14px); }
.tl-bar.late, .tlm-bar.late { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #D92D20; }
.tlm-list { margin-top: 14px; padding: 0; }
.tlm-list header { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 18px; box-shadow: inset 0 -1px 0 var(--line); }
.tlm-list header b { flex: 1; font-size: 14.5px; text-transform: capitalize; }
.tlm-none { margin: 0; padding: 18px; color: var(--muted); font-size: 13.5px; }
.tlm-rows { display: flex; flex-direction: column; padding: 6px; }
.tlm-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 12px; text-align: left; font-size: 13.5px; color: var(--ink); }
.tlm-row:hover { background: var(--surface-2); }
.tlm-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.tlm-sw.blk { background: #D92D20; }
.tlm-sw.done { background: #98A2B3; }
.tlm-meta { flex: none; max-width: 45%; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .tlm-head span { padding: 8px 0; text-align: center; font-size: 10.5px; }
  .tlm-week { min-height: 64px; }
  .tlm-day { padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .tlm-bar, .tlm-more { display: none; }
  .tlm-dots { display: flex; gap: 3px; }
  .tlm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
  .tlm-meta { display: none; }
}

/* year at a glance */
.tly { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.tly-m { padding: 14px 14px 12px; }
.tly-m header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tly-name { font-size: 14.5px; font-weight: 700; color: var(--ink); text-transform: capitalize; padding: 2px 6px; margin-left: -6px; border-radius: 7px; }
.tly-name:hover { background: var(--surface-3); }
.tly-m.now { box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--primary-soft); }
.tly-m.now .tly-name { color: var(--primary-ink); }
.tly-cnt { font-size: 11.5px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.tly-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.tly-w { padding-bottom: 4px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.tly-w.we { color: var(--dim-2); }
.tly-d { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tly-d.we { color: var(--glyph); }
.tly-d:hover { box-shadow: inset 0 0 0 1.5px var(--primary); }
.tly-d.lv1 { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.tly-d.lv2 { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); color: var(--ink); }
.tly-d.lv3 { background: color-mix(in srgb, var(--primary) 36%, var(--surface)); color: var(--primary-ink); font-weight: 700; }
.tly-d.today { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.tly-dots { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; }
.tly-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--surface); }
.tly-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 2px 4px; font-size: 12.5px; color: var(--ink-2); }
.tly-scale { display: inline-flex; gap: 3px; }
.tly-scale i { width: 14px; height: 14px; border-radius: 4px; }
.tly-scale .lv1 { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.tly-scale .lv2 { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.tly-scale .lv3 { background: color-mix(in srgb, var(--primary) 36%, var(--surface)); }
.tly-sep { width: 1px; height: 14px; background: var(--line-2); margin: 0 6px; }
.tly-dotkey { display: inline-flex; align-items: center; gap: 6px; }
.tly-dotkey i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) {
  .tly { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tly-m { padding: 10px 8px 8px; }
  .tly-d { font-size: 10.5px; border-radius: 6px; }
  .tl-top p { display: none; }
  .tl-layout button span { display: none; }
}

/* board toolbar: one Filter menu, active filters as chips, tools as icons on the right */
.title-row .tools { min-width: 0; }
.filt-wrap { position: relative; display: inline-flex; flex: none; }
.filt-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.fchip[aria-pressed="true"] .filt-n { background: var(--on-ink); color: var(--ink); }
.pop.filt-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 320px; max-height: min(480px, calc(100dvh - 160px)); padding: 6px; }
.fp-sec { padding: 8px 8px 10px; }
.fp-sec + .fp-sec { border-top: 1px solid var(--line); }
.fp-h { margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.fp-pill:hover { background: var(--surface-3); }
.fp-pill[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-ink); box-shadow: inset 0 0 0 1.5px var(--primary); }
.fp-pill .num { font-size: 11.5px; }
.fp-rows { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; }
.fp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 8px; border-radius: 9px; font-size: 13.5px; color: var(--ink); text-align: left; }
.fp-row:hover { background: var(--surface-2); }
.fp-row > span:first-of-type { flex: 1; }
.fp-row .num { font-size: 12px; }
.fp-sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--line-2); flex: none; transition: background .18s; }
.fp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(var(--sh), .25); transition: transform .2s var(--ease-out); }
.fp-row[aria-checked="true"] .fp-sw { background: var(--primary); }
.fp-row[aria-checked="true"] .fp-sw::after { transform: translateX(12px); }
.fp-foot { display: flex; justify-content: flex-end; padding: 6px 4px 2px; border-top: 1px solid var(--line); }
.fchip-on { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); flex: none; }
.fchip-on .i:last-child { opacity: .7; }
.fchip-on:hover .i:last-child { opacity: 1; }
.tools-end { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tool-btn { position: relative; width: 36px; height: 36px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); }
.tool-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.tools-end .exp-wrap { margin-left: 0; }
.tools-end .exp-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 11px; }
.tools-end .exp-btn .txt { display: none; }
.add-col-btn { height: 36px; border-radius: 11px; }
/* breadcrumb: switch to another project */
.crumb-wrap { position: relative; display: inline-flex; }
.crumbs .crumb-pick { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); }
.crumbs .crumb-pick:hover, .crumbs .crumb-pick[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--line-2); }
.crumb-pick .i { color: var(--muted); transition: transform .2s var(--ease-out); }
.crumb-pick[aria-expanded="true"] .i { transform: rotate(180deg); }
.pop.crumb-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; width: 300px; max-height: none; overflow: visible; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.crumb-q { height: 36px; font-size: 13px; }
.crumb-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.crumb-opt { text-decoration: none; }
.crumb-opt .swatch.sm { width: 22px; height: 22px; border-radius: 7px; overflow: hidden; }
.crumb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumb-none { margin: 0; padding: 10px; font-size: 13px; color: var(--muted); }
/* project list: the name opens the board */
.pl-name { display: block; font-weight: 700; color: var(--ink); text-decoration: none; }
.pl-name:hover, .pl-name:focus-visible { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .title-row .tools { overflow-x: auto; }
  .add-col-btn { padding: 0 10px; }
  .pop.filt-pop { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); width: auto; }
}

/* timeline content comes in once loaded and when switching between calendar, timeline and year */
.tl-shell, .tlm, .tly { animation: rise .34s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .tl-shell, .tlm, .tly { animation: none; } }

/* the card's content fades in once it has arrived (after the drawer slid in) */
.drawer.ready > * { animation: fade .18s ease-out both; }
@media (prefers-reduced-motion: reduce) { .drawer.ready > * { animation: none; } }

/* Sorotin's own dropdown (replaces native selects in list and timeline tools) */
.dd-wrap { position: relative; display: inline-flex; min-width: 0; }
.dd-btn { cursor: pointer; font: inherit; text-align: left; }
.dd-btn:hover { background: var(--surface-2); }
.dd-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.dd-btn .dd-val { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.dd-btn .i:last-child { transition: transform .2s var(--ease-out); }
.dd-btn[aria-expanded="true"] .i:last-child { transform: rotate(180deg); }
.pop.dd-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px)); max-height: none; overflow: visible; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.dd-q { height: 36px; font-size: 13px; }
.dd-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.dd-opt .swatch.sm { width: 20px; height: 20px; border-radius: 6px; overflow: hidden; flex: none; }
.dd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-opt:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--primary); }
@media (max-width: 760px) {
  .list-tools .dd-wrap { flex: 1 1 0; }
  .list-tools .dd-btn { width: 100%; }
  .dd-btn .dd-val { flex: 1; max-width: none; }
}

/* calendar fills the screen: weeks share the height, the selected day's cards on the side */
.main > .tlm-shell { flex: 1 1 0; min-height: 420px; display: flex; gap: 14px; }
.tlm-shell > .tlm { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }
.tlm-shell .tlm-head { flex: none; position: sticky; top: 0; z-index: 3; background: var(--surface); }
.tlm-shell .tlm-week { flex: 1 1 0; min-height: calc(38px + var(--lanes) * 21px + 6px); }
.tlm-shell .tlm-bar { top: calc(36px + var(--lane) * 21px); height: 18px; }
.tlm-shell .tlm-more { left: auto; right: 6px; top: 9px; bottom: auto; }
.tlm-shell > .tlm-list { width: 340px; flex: none; margin-top: 0; display: flex; flex-direction: column; min-height: 0; }
.tlm-shell > .tlm-list .tlm-rows { flex: 1; min-height: 0; overflow: auto; }
.tlm-shell > .tlm-list .tlm-row { flex-wrap: wrap; row-gap: 2px; }
.tlm-shell > .tlm-list .tlm-meta { order: 5; width: 100%; max-width: none; padding-left: 20px; }
@media (max-width: 1100px) {
  .main > .tlm-shell { flex: none; flex-direction: column; min-height: 0; }
  .tlm-shell > .tlm { overflow: hidden; }
  .tlm-shell .tlm-week { flex: none; min-height: max(96px, calc(38px + var(--lanes) * 21px + 6px)); }
  .tlm-shell > .tlm-list { width: auto; }
}
@media (max-width: 640px) {
  .tlm-shell .tlm-week { min-height: 64px; }
}
.dd-ico { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--ink-2); }
/* weekends are not working days: shaded in the week and month timeline too */
.tl-z-week .tl-lane, .tl-z-month .tl-lane { background-image: repeating-linear-gradient(to right, transparent 0 calc(var(--unit) - 1px), var(--line) calc(var(--unit) - 1px) var(--unit)),
  repeating-linear-gradient(to right, transparent 0 calc(5 * var(--px)), var(--weekend-tint-2) calc(5 * var(--px)) calc(7 * var(--px))); }
.tlm-day.we { background: var(--dk-we-day, #F7F7FC); }

/* work estimate (hours in, working months/days/hours out) */
.est-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 7px; background: var(--surface-3); color: var(--ink-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.est-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.est-in { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.est-in .input { width: 96px; height: 38px; font-variant-numeric: tabular-nums; }
.est-val { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.est-warn { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--warn); }
.est-warn .i { margin-top: 2px; flex: none; }
/* pauses in a card's schedule */
.pz-plan { align-items: flex-start; }
.pz { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pz-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pz-item > .i { margin-top: 2px; color: var(--warn); flex: none; }
.pz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pz-main b { font-weight: 700; color: var(--ink); }
.pz-main span { color: var(--ink-2); overflow-wrap: anywhere; }
.pz-main small { color: var(--muted); font-size: 12px; }
.pz-add { align-self: flex-start; }
.pz-none { font-size: 12.5px; }
.pz-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.pz-form .dates .sel { min-width: 140px; }
.pz-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.pz-acts { display: flex; justify-content: flex-end; gap: 8px; }
/* a paused stretch inside a bar on the timeline or calendar: a hatched gap */
.tl-pz { position: absolute; top: -1px; bottom: -1px; z-index: 1; pointer-events: auto; border-radius: 3px;
  background: repeating-linear-gradient(135deg, var(--surface) 0 3px, color-mix(in srgb, var(--surface) 55%, transparent) 3px 6px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.tl-bar > span, .tlm-bar > span { position: relative; z-index: 2; }

/* timeline: right-click menu and quick add */
.pop.ctx-menu { position: fixed; z-index: 85; min-width: 230px; padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.ctx-menu .opt { font-size: 13.5px; }
.ctx-menu .opt:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--primary); }
.pop.tl-add { position: fixed; z-index: 85; width: 340px; max-width: calc(100vw - 16px); max-height: none; overflow: visible; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tl-add-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-add-head b { font-size: 14.5px; }
.tl-add-head span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--primary-ink); background: var(--primary-soft); padding: 3px 8px; border-radius: 999px; }
.tl-add-proj { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tl-add textarea { resize: vertical; min-height: 76px; font: inherit; font-size: 13.5px; }
.tl-add .dd-wrap, .tl-add .dd-btn { width: 100%; }
.tl-add .dd-btn .dd-val { flex: 1; max-width: none; }
.exp-badge.xls { background: var(--dk-ok-soft, #DCFAE6); color: var(--ok); }
/* "Not scheduled": the panel unfolds, its cards follow one after another; it folds away on close */
.tl-unsched { animation: unsched-in .34s var(--ease-out) both; transform-origin: top center; }
@keyframes unsched-in { from { opacity: 0; transform: translateY(-10px) scaleY(.96); } }
.tl-unsched.leaving { animation: unsched-out .2s var(--ease-in) forwards; pointer-events: none; }
@keyframes unsched-out { to { opacity: 0; transform: translateY(-8px) scaleY(.97); } }
.tl-unsched .tl-chip { animation: rise .32s var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 16ms); }
@media (prefers-reduced-motion: reduce) { .tl-unsched, .tl-unsched.leaving, .tl-unsched .tl-chip { animation: none; } }
/* dragging a card: its slot is a see-through copy of it that travels to where it will land */
.placeholder { height: auto; border: 0; background: none; border-radius: 14px; outline: 2px dashed color-mix(in srgb, var(--primary) 65%, transparent); outline-offset: 3px; }
.placeholder > .ph-card { opacity: .45; pointer-events: none; box-shadow: none; filter: saturate(.8); transition: none; }
.card.dragging { display: none; }

/* ------------------------------------------------------------ project docs */
.docs-head { display: flex; flex-direction: column; gap: 10px; }
.docs-head .crumbs a { text-decoration: none; }
.doc-up { cursor: pointer; }
.main > .docs-shell { flex: 1 1 0; min-height: 420px; }
.docs-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.docs-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px; max-height: calc(100dvh - 220px); overflow: auto; }
.docs-link { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink-2); }
.docs-link:hover { background: var(--surface-2); }
.docs-link.on { background: var(--primary-soft); color: var(--primary-ink); }
.docs-link .dl-t { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.docs-link small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.doc-page { padding: 22px 28px 28px; min-width: 0; }
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.doc-head h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.doc-head small { color: var(--muted); font-size: 12.5px; }
.docs-empty { min-height: 260px; }
/* Markdown */
.doc-md { font-size: 15px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.doc-md > :first-child { margin-top: 0; }
.doc-md h1, .doc-md h2, .doc-md h3, .doc-md h4 { line-height: 1.25; letter-spacing: -.015em; margin: 1.6em 0 .55em; }
.doc-md h1 { font-size: 24px; } .doc-md h2 { font-size: 20px; } .doc-md h3 { font-size: 17px; } .doc-md h4 { font-size: 15px; }
.doc-md p, .doc-md ul, .doc-md ol, .doc-md blockquote, .doc-md pre, .doc-md table { margin: 0 0 1em; }
.doc-md ul, .doc-md ol { padding-left: 1.4em; }
.doc-md li { margin: .25em 0; }
.doc-md a { color: var(--primary-ink); text-underline-offset: 2px; }
.doc-md code { font-family: var(--mono); font-size: .88em; padding: .12em .38em; border-radius: 6px; background: var(--surface-3); }
.doc-md pre { padding: 14px 16px; border-radius: 12px; background: var(--code-bg); color: #E9EAF6; overflow: auto; font-size: 13px; line-height: 1.55; }
.doc-md pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.doc-md blockquote { padding: 2px 0 2px 14px; border-left: 2px solid var(--line-2); color: var(--ink-2); }
.doc-md hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.doc-md table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.doc-md th, .doc-md td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-md th { background: var(--surface-2); font-weight: 700; }
.doc-md .img { color: var(--muted); }
.doc-plain { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; }
/* images with captions */
.doc-img { display: flex; flex-direction: column; gap: 6px; margin: 1em 0; max-width: 100%; }
.doc-img.missing { flex-direction: row; align-items: center; color: var(--muted); font-size: 13px; }
.doc-img-btn { display: block; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; box-shadow: 0 0 0 1px var(--line); background: var(--dk-paper, var(--surface-2)); max-width: 100%; }
.doc-img-btn img { display: block; max-width: 100%; max-height: 520px; object-fit: contain; }
.doc-cap { font-size: 13px; color: var(--muted); }
.doc-gallery { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.doc-gallery h3, .de-images h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.de-images h3 small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.doc-grid figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-grid img { width: 100%; height: 150px; object-fit: cover; }
.doc-grid figcaption { font-size: 13px; color: var(--ink-2); }
/* Mermaid */
.mmd { margin: 1em 0; padding: 16px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; text-align: center; }
.mmd svg { max-width: 100%; height: auto; }
/* Mermaid draws a light diagram (dark text, light fills): in dark it keeps a light card */
.mmd:has(> svg) { background: var(--dk-paper, var(--surface-2)); }
.mmd.pending { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 90px; color: var(--muted); font-size: 13px; }
.mmd.mmd-err { text-align: left; background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--dk-amber-line, #FEDF89); display: flex; flex-direction: column; gap: 6px; }
.mmd.mmd-err b { display: inline-flex; align-items: center; gap: 6px; }
.mmd.mmd-err pre { margin: 4px 0 0; background: rgba(0, 0, 0, .04); color: var(--ink-2); }
/* editor */
.doc-edit { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.de-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.de-title { flex: 1 1 280px; height: 44px; font-size: 17px; font-weight: 600; }
.de-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.de-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-height: 420px; }
.de-body { min-height: 420px; height: calc(100dvh - 380px); resize: vertical; font-size: 13.5px; line-height: 1.6; }
.de-preview { min-height: 420px; height: calc(100dvh - 380px); overflow: auto; padding: 14px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.de-img-list { display: flex; flex-direction: column; gap: 8px; }
.de-img { display: flex; align-items: center; gap: 10px; }
.de-img img { width: 72px; height: 52px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); flex: none; }
.de-img .input { flex: 1; min-width: 0; height: 38px; }
.de-upl { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.de-foot { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.de-foot .grow { flex: 1; }
@media (max-width: 900px) {
  .docs-shell { grid-template-columns: 1fr; }
  .docs-nav { position: static; max-height: none; flex-direction: row; overflow-x: auto; }
  .docs-link { flex: none; max-width: 220px; }
  .doc-page { padding: 18px; }
  .de-split { grid-template-columns: 1fr; }
  .de-body, .de-preview { height: 46dvh; min-height: 260px; }
}

/* weekends: a pale stretch in a bar (not counted) unless confirmed as worked */
.tl-off { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: auto; background: color-mix(in srgb, var(--surface) 62%, transparent); }
.wk { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wk-days { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-day { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-transform: capitalize; }
.wk-day:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.wk-day.on { color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 50%, transparent); }
.wk small { font-size: 12px; }
.tl-add-wk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.tl-add-wk input { width: 16px; height: 16px; accent-color: var(--primary); }
.tl-add-note { font-size: 12px; margin-top: -4px; }
/* a card just added from the right-click menu: brief highlight so it is easy to find */
.tl-bar.flash, .tlm-bar.flash { animation: tl-flash 1.6s var(--ease-out) 2; }
.tl-row.flash .tl-label { animation: tl-row-flash 1.6s var(--ease-out) 2; }
@keyframes tl-flash { 0%, 100% { box-shadow: 0 1px 2px rgba(var(--sh), .18); } 30% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--accent); } }
@keyframes tl-row-flash { 30% { background: var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .tl-bar.flash, .tlm-bar.flash, .tl-row.flash .tl-label { animation: none; } }
/* the cards' offsetParent while dragging (slot hit-testing uses offsetTop) */
.col-body { position: relative; }
.est-tag { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); background: var(--surface-3); padding: 2px 7px; border-radius: 999px; }
.est-note { font-size: 12.5px; line-height: 1.45; }
.est-row .link-btn { font-size: 12.5px; }
.tl-add-wkd { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn-ink); }
.tl-add-wkd b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tl-add-wkd small { font-size: 12.5px; color: var(--ink-2); }
.tl-add-wkd .fp-pill { background: var(--surface); }
/* bar text stays readable where it crosses a pale weekend or a hatched pause */
.tl-bar > span, .tlm-bar > span { text-shadow: 0 0 2px var(--c), 0 0 4px var(--c), 0 0 1px var(--c); }
.tl-bar.done > span, .tlm-bar.done > span { text-shadow: 0 0 2px #98A2B3, 0 0 4px #98A2B3; }
.tl-bar.blk > span, .tlm-bar.blk > span { text-shadow: 0 0 2px #B42318, 0 0 4px #B42318; }

/* day-off greeting (weekend / holiday) */
.dayoff { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--primary-soft) 0%, var(--surface) 55%, var(--accent-soft) 100%); box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent); }
.dayoff .do-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--sun-soft); color: var(--dk-warn-ink, #B25E09); }
.dayoff.hol .do-ic { background: var(--accent-soft); color: var(--accent-ink); }
.dayoff .do-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dayoff .do-txt b { font-size: 15px; letter-spacing: -.01em; }
.dayoff .do-txt span { color: var(--ink-2); font-size: 13px; }
.dayoff .do-x { flex: none; color: var(--muted); }
.dayoff.enter { animation: do-in .5s var(--ease-out) both; }
.dayoff.enter .do-ic svg { animation: do-sun 1.2s var(--ease-out) .1s both; }
.dayoff.leaving { animation: do-out .2s var(--ease-in) both; }
@keyframes do-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes do-sun { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }
@keyframes do-out { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .dayoff.enter, .dayoff.enter .do-ic svg, .dayoff.leaving { animation: none; } }
@media (max-width: 560px) { .dayoff { align-items: flex-start; } .dayoff .do-ic { width: 34px; height: 34px; border-radius: 11px; } }

/* A list's tools row (search, filter, order, the page's buttons) sticks under the top bar
   while the list scrolls, and lifts like the top bar once it does. */
.list-tools.lt-sticky { position: sticky; top: calc(var(--tb-h, 70px) - var(--pad) - 6px); z-index: 20; margin: -10px 0 -8px; padding: 6px 0 8px; isolation: isolate; }
/* once stuck: frosted glass that fades out downwards, so rows slide under it softly
   instead of meeting a hard edge; it reaches up under the top bar's own fade */
.list-tools.lt-sticky::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: -22px; bottom: -18px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 62%, color-mix(in srgb, var(--bg) 0%, transparent) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
  opacity: 0; transition: opacity .2s; pointer-events: none; }
.list-tools.lt-sticky.stuck::before { opacity: 1; }
.lt-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.lt-acts .btn { height: 40px; }
.lt-sticky.stuck .lt-search, .lt-sticky.stuck .lt-sel, .lt-sticky.stuck .lt-acts .btn-outline { box-shadow: var(--shadow-md); }
@media (max-width: 760px) {
  .lt-acts { margin-left: 0; }
  .lt-acts .btn .txt { display: none; }
  .lt-acts .btn { width: 40px; padding: 0; justify-content: center; }
}

/* compact page heads: the title, its line and the tools row sit close together */
.page-head p { margin-top: 4px; }
.board-head { gap: 10px; }
.tl-top .tl-legend { margin-left: 0; flex: 0 1 auto; }

/* ---------------------------------------------------------------- holidays */
.tl-scale-units span.hol { color: var(--accent-text); font-weight: 700; }
.tlm-day.hol { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.tlm-day.hol.hol-work { background: var(--surface); }
.tlm-hol { display: block; margin: 0 0 2px 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 600; color: var(--accent-ink); }
.tlm-day.hol-work .tlm-hol { color: var(--muted); font-weight: 500; }
.tly-d.hol { color: var(--accent-ink); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.tl-off.hol { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 70%, transparent) 0 100%); }
.wk-day.hol:not(.on) { color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.hol-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hol-bar-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.hol-list, .hol-imp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hol-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--surface-3); }
.hol-row:first-child { border-top: 0; }
.hol-date { display: flex; flex-direction: column; line-height: 1.2; }
.hol-date b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.hol-date small { color: var(--muted); font-size: 11.5px; text-transform: capitalize; }
.hol-name { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.hol-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hol-row:not(.off) .hol-t { color: var(--ink-2); font-weight: 500; }
.hol-kind { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.hol-kind.k-national { background: var(--accent-soft); color: var(--accent-ink); }
.hol-kind.k-collective { background: var(--primary-soft); color: var(--primary-ink); }
.hol-kind.k-company { background: var(--surface-3); color: var(--ink-2); }
.hol-est { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--sun-soft); color: var(--dk-warn-ink, #8A4B06); }
.hol-seg button { height: 28px; padding: 0 10px; font-size: 12.5px; }
.hol-row .btn-icon { width: 32px; height: 32px; color: var(--muted); }
.hol-row .hol-del:hover { color: var(--danger); background: var(--danger-soft); }
.hol-empty { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.hol-form, .hol-imp { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.hol-form-g { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px auto; gap: 12px; align-items: end; }
.hol-err { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--danger); font-size: 13px; }
.hol-acts { display: flex; justify-content: flex-end; gap: 8px; }
.hol-imp > header { display: flex; flex-direction: column; gap: 2px; }
.hol-imp > header small { color: var(--muted); font-size: 12.5px; }
.hol-imp > header a { display: inline-flex; align-items: center; gap: 3px; color: var(--primary-ink); }
.hol-imp-list { max-height: 360px; overflow: auto; background: var(--surface); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
.hol-imp-row { display: grid; grid-template-columns: 20px 64px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--surface-3); cursor: pointer; }
.hol-imp-list li:first-child .hol-imp-row { border-top: 0; }
.hol-imp-row.has { opacity: .55; cursor: default; }
.hol-imp-row input { width: 16px; height: 16px; accent-color: var(--primary); }
@media (max-width: 760px) {
  .hol-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .hol-row .hol-seg { grid-column: 2 / -1; justify-self: start; }
  .hol-form-g { grid-template-columns: 1fr; }
}
.tl { --hol-col: color-mix(in srgb, var(--accent) 7%, transparent); }
.tl-lane::before { content: ""; position: absolute; inset: 0; background: var(--holbg, none); pointer-events: none; }
/* who works on what: initials on each bar, the whole team on a project's row */
.tl-who { flex: none; position: relative; z-index: 2; display: inline-grid; font-style: normal; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%;
  background: var(--pc, var(--dk-who, var(--muted))); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 1.5px var(--surface); pointer-events: auto; }
.tl-bar .tl-who + span { padding-left: 5px; }
.tl-bar .tl-who.out { position: absolute; left: calc(100% + 5px); top: 50%; margin: -9px 0 0; }
.tl-team { flex: none; display: inline-flex; align-items: center; }
.tl-sum .tl-team { padding: 0; overflow: visible; }
.tl-team .tl-who { margin-left: -5px; }
.tl-team .tl-who:first-child { margin-left: 0; }
.tl-who.more { background: var(--surface-3); color: var(--ink-2); font-size: 8px; }
.tl-label .tl-team { margin-left: auto; }
.tl-label .tl-team + .num { margin-left: 6px; }
.tl-group.folded .tl-sum .tl-team { margin-left: 4px; }
.tl-group.folded .tl-sum .tl-team + span { padding-left: 6px; }
/* the folded summary's text and team stay in view while the bar runs off the left edge */
.tl-sum .tl-sum-in { position: sticky; left: calc(var(--left) + 6px); display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding: 0; overflow: visible; }
/* coordinator: an Auditor Team member who helps plan */
.team.coord { background: var(--accent-soft); color: var(--accent-ink); }
/* card foot: nothing is cut short; what does not fit moves to a second line */
.card-foot { flex-wrap: nowrap; gap: 10px; }
.cf-meta { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cf-meta > span { flex: none; }
.card-foot .assignee { flex: none; }
/* board head, compact: the project's tile, title and tools share one row on wide screens */
@media (min-width: 1101px) {
  .title-row { gap: 12px; flex-wrap: nowrap; }
  .title-row .ptile { width: 46px; height: 46px; border-radius: 14px; }
  .title-row .ptile > span { width: 30px; height: 30px; border-radius: 9px; }
  .title-row .ptile svg { width: 18px; height: 18px; }
  .title-row .ptitle { flex: 0 1 auto; }
  .title-row .ptitle h1 { font-size: 23px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .title-row .ptitle .sub { margin-top: 2px; font-size: 12.5px; flex-wrap: nowrap; white-space: nowrap; }
  .title-row .tools { flex: 1 1 auto; min-width: 0; margin-left: 8px; }
}
/* a holiday the team still works (cuti bersama set to Still working): a quiet dotted mark */
.tl-scale-units span.hol.hol-work { color: inherit; font-weight: 500; text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }
/* timeline rows: the card's tags after its title */
.tl-tags { flex: none; display: inline-flex; gap: 3px; }
.tl-tags .wtag { height: 18px; padding: 0 5px; font-size: 10px; }
/* export: picking projects */
.exp-pick { padding: 4px 4px 0; }
.exp-pick-q { height: 34px; margin-bottom: 4px; font-size: 13px; }
.exp-pick-list { max-height: min(220px, 26vh); overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.exp-pick-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 9px; text-align: left; font-size: 13px; color: var(--ink); }
.exp-pick-row:hover { background: var(--surface-2); }
.exp-pick-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.exp-box { flex: none; width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); color: #fff; }
.exp-pick-row[aria-checked="true"] .exp-box { background: var(--primary); box-shadow: none; }
.exp-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the drag preview never replays an entrance: re-inserting it on every move restarted the
   fade-and-grow, so it flickered; it slides with the cards instead (slideCards) */
.placeholder { animation: none; }
/* project form: the ticket code with a live preview of the first key */
.tk-field { display: flex; align-items: center; gap: 10px; }
.tk-field .input { width: 140px; letter-spacing: .04em; }
.tk-preview { padding: 4px 9px; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
/* ticket keys stay on one line wherever they show */
.d-head .code, .lb-text + .code, figcaption .code, .sp-num, .np-card .num, .al-title .num { white-space: nowrap; flex: none; }
/* page changes: the content fades and rises in on its own (renders mid-way keep the same
   animation through a negative delay); the browser's view transition only moves the nav pill */
.main { view-transition-name: none; }
.main.page-in > :not(.topbar) { animation: page-in .28s var(--ease-out) both; animation-delay: var(--page-delay, 0ms); }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .main.page-in > :not(.topbar) { animation: none; } }
/* ticket key badge (drawer head): the code soft, the number bold, one line, click to copy */
.tkey { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--surface-3);
  font: 600 12px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; color: var(--ink); transition: background .15s, box-shadow .15s; }
.tkey .tk-code { color: var(--primary-text, var(--primary-ink)); }
.tkey .tk-dash { color: var(--muted); margin: 0 1px; }
.tkey .tk-no { font-weight: 700; }
.tkey:hover { background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
/* project form: a member with "all projects" stays checked */
.pick-card.is-locked { opacity: .75; cursor: default; }

/* phones, second pass: nothing covered, cut off or pushed aside */
@media (max-width: 640px) {
  /* the language switch sits above the sign-in card, never under it */
  .login-page { place-items: start center; padding-top: 76px; }
  /* the card opens as a full sheet (the wide-screen width rule above would leave a strip) */
  .drawer { width: 100vw; }
}
@media (max-width: 760px) {
  /* top bar: same-size round buttons; the live dot shows only while reconnecting */
  .topbar .bell { width: 46px; height: 46px; flex: none; }
  .topbar .live { display: none; }
  .topbar .live.off { display: inline-flex; flex: none; }
  .topbar .me-wrap { flex: none; }
  /* board tools fit one row: Add column as an icon */
  .add-col-btn { width: 36px; padding: 0; justify-content: center; flex: none; }
  .add-col-btn .txt { display: none; }
  /* dashboard: the date chip goes under the card's text instead of squeezing it */
  .drow { flex-wrap: wrap; row-gap: 6px; }
  .drow-main { flex: 1 1 calc(100% - 60px); }
  .drow .due { order: 3; margin-left: 19px; }
  .gallery { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* timeline tools: view and zoom on one row, project, colour and today on the next */
  .tl-tools { flex-wrap: wrap; }
  .tl-tools > .seg { flex: none; }
  .tl-tools > .seg:not(.tl-layout) { flex: 1 1 auto; }
  .tl-tools > .dd-wrap { flex: 1 1 130px; min-width: 0; }
  .tl-today { width: 36px; padding: 0; justify-content: center; flex: none; }
  .tl-today .txt { display: none; }
  .tl { --left: 118px; }
  .tl-card .tl-tags { display: none; }
  /* lists that become cards: label and value on one line */
  .panel td[data-label]:not(:first-child) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 5px 0; }
  .panel td[data-label]:not(:first-child)::before { margin: 0; }
  .panel td[data-label]:not(:first-child) > * { min-width: 0; }
  /* filter and sort share a row; the count and the add/export buttons the next one */
  .list-tools:not(.tl-tools) .dd-wrap { flex: 1 1 40%; }
  .lt-count { width: auto; flex: 1 1 auto; }
  .lt-acts { margin-left: auto; }
}

/* Team: a member's state; for admins when and where they were last active, opening their sessions */
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.m-state { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s; }
.m-state:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.m-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; opacity: .6; }
.m-state.now i { background: #12B76A; opacity: 1; box-shadow: 0 0 0 3px rgba(18, 183, 106, .2); }
.m-state .i { color: var(--muted); }
/* sessions dialog */
.sess-dlg { width: min(560px, calc(100vw - 32px)); }
.sess-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sess-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sess-list li + li { border-top: 1px solid var(--line); }
.sess-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.sess-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sess-main b { font-size: 14px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-where { display: flex; flex-wrap: wrap; gap: 6px; }
.sess-where .pill { height: 22px; padding: 0 8px; font-size: 11.5px; gap: 4px; }
.sess-where .pill-w { background: var(--accent-soft); color: var(--accent-ink); }
.sess-main small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.sess-main small .mono { font-size: 11.5px; }
.sess-now { color: var(--ok); font-weight: 600; }
.sess-none { margin: 0; }
.sess-list .btn { flex: none; }
@media (max-width: 520px) {
  .sess-list li { flex-wrap: wrap; }
  .sess-list .btn { margin-left: 48px; }
}
/* wide dialogs become full-width sheets on phones too */
@media (max-width: 520px) { .dialog.hist, .dialog.sess-dlg { width: 100%; } }
/* timeline-only auditors: no search in the top bar; their badge; the access level choice */
.topbar > .grow { flex: 1; }
.team.tl-only { background: var(--info-soft); color: var(--info-ink); }
.lvl-grid { grid-template-columns: 1fr; }
/* the sidebar's brand shrinks (the tagline wraps) so the collapse button keeps its place */
.side-top .brand { flex: 1 1 auto; min-width: 0; }
.side-top .brand > span:last-child { min-width: 0; }