/*
 * ProjectOffice stylesheet — the only CSS in the app (no build step, no framework).
 * Tailwind-inspired look written as plain CSS. Colours, radii and shadows are
 * custom properties on :root, so dark mode only has to redefine tokens.
 * Some components read a per-element custom property set inline in Blade:
 * --repo (workspace colour), --accent (card/module colour), --bar and --plan
 * (roadmap plan colour), --label / --timeline (Gantt widths).
 *
 * Contents (in file order)
 *   1.  Design tokens (light theme)
 *   2.  Dark mode
 *   3.  Base elements and icons
 *   4.  Shell: sidebar column + top sub-menu (grouped tab drop-downs, mobile drawer)
 *   5.  Cards / sections, filter toolbar and search bar
 *   6.  Tables, rich (Markdown) text, row icon actions
 *   7.  Dashboard (stats, lists, posts, meters)
 *   8.  Status lights, badges
 *   9.  Forms
 *   10. Buttons
 *   11. Alerts, secrets, letter filter, pagination
 *   12. Detail lists, threaded replies, simple Gantt table, auth pages
 *   13. Utilities, responsive tweaks and print
 *   14. Form helpers (app.js: combo, chips, Markdown editor)
 *   15. Workspace chooser
 *   16. Card grids: item-card, kv, mini-stats, avatars, Cards | Table switch
 *   17. Logs (system / service / notification log filters)
 *   18. Gantt timeline (roadmap)
 *   19. Select boxes (custom chevron)
 *   20. Knowledge base
 *   21. Later additions and overrides: search operators, card descriptions,
 *       fixed card headers, card-go button, home dashboard columns,
 *       roadmap filter and grid, .sr-only, epics
 *   22. Client projects (list, board, timeline, calendar, workload)
 *   23. Holidays (amber tints, Administration › Holidays) and the story form's order
 *   24. Attached files (partials/files), Documents trees and search, field tips (.tip), Our story page
 *
 * Rules are appended per feature, so a few later sections deliberately
 * override earlier ones (noted where it happens). Keep the order.
 */

/* ================= 1. Design tokens (light theme) ================= */
:root {
  /* Card padding (user, 2026-10-02): the inside spacing of every pane and card — sides, and the
     space under the last thing in it, whatever that is (see "Card bottoms" below). */
  --card-pad: 1.1rem;
  /* Card headers (user, 2026-10-02): one look for every pane and card — the same padding, title
     and subtitle (panes, item cards, workspace cards, help sections, tiles). */
  --card-title-size: 1.05rem; --card-title-weight: 650; --card-sub-size: .8rem;
  /* Tailwind-like palette */
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-900: #111827;

  /* Page background a step darker than white cards, so panes stand out; borders and
     secondary text darkened for contrast (muted text meets WCAG AA on white and on --bg). */
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --border: #dde2e8;
  --line: #e9edf1;
  --text: #111827;
  --text-2: #344054;
  --muted: #5d6878;

  --side: #111827;
  --side-2: #1f2937;
  --side-ink: #d1d5db;   /* menu text: gray-300 for readable contrast on the dark sidebar */
  --side-ink-strong: #ffffff;
  --side-active: #4f46e5;

  --group: var(--gray-50);

  --brand: #4f46e5;          /* indigo-600 */
  --brand-hover: #4338ca;    /* indigo-700 */
  --brand-ink: #ffffff;
  --brand-soft: #eef2ff;     /* indigo-50 */
  --brand-ring: rgba(79, 70, 229, .25);
  --brand-solid: var(--brand);       /* filled buttons; dark mode uses a deeper shade so white text reads */
  --brand-solid-hover: var(--brand-hover);
  --accent: #f97316;         /* orange-500 */
  --heading: #0f172a;

  --ok: #15803d;   --ok-soft: #f0fdf4;   --ok-ring: rgba(22, 163, 74, .2);
  --warn: #a16207; --warn-soft: #fefce8; --warn-ring: rgba(202, 138, 4, .25);
  --danger: #b91c1c; --danger-soft: #fef2f2; --danger-ring: rgba(220, 38, 38, .2);
  --amber: #f59e0b;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .05);
  --bar-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 14px -8px rgba(16, 24, 40, .18); /* top bar over the workspace */
  --sidebar-w: 248px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* ================= 2. Dark mode ================= */
/* The same dark token set appears twice: once for the OS preference (unless the
   user forced light via <html data-theme="light">) and once for an explicit
   data-theme="dark" set by the theme toggle in app.js. Keep the two in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Neutral greys after macOS dark mode: window #1e1e1e, content a step lighter,
       hairline separators, ~85% / 55% white text, Apple's dark system colours. */
    --bg: #1e1e1e; --surface: #282828; --surface-2: #303030; --border: #3f3f3f; --line: #353535;
    --text: #e8e8e8; --text-2: #c4c4c4; --muted: #9b9b9b;
    --side: #252525; --side-2: #333333; --side-ink: #d0d0d0; --group: #2e2e2e;
    --gray-50: #2a2a2a; --gray-100: #353535; --gray-200: #404040; --gray-300: #4d4d4d;
    --gray-400: #8a8a8a; --gray-500: #a1a1a1; --gray-600: #c4c4c4; --gray-700: #dcdcdc; --gray-900: #f2f2f2;
    --brand: #8e8cf5; --brand-hover: #aeacff; --brand-ink: #ffffff; --side-active: #5e5ce6; --brand-solid: #5e5ce6; --brand-solid-hover: #6e6cf0; --brand-soft: rgba(142, 140, 245, .16); --brand-ring: rgba(142, 140, 245, .4);
    --heading: #f2f2f2;
    --ok: #30d158; --ok-soft: rgba(48, 209, 88, .14); --ok-ring: rgba(48, 209, 88, .35);
    --warn: #ffd60a; --warn-soft: rgba(255, 214, 10, .12); --warn-ring: rgba(255, 214, 10, .32);
    --danger: #ff6961; --danger-soft: rgba(255, 69, 58, .15); --danger-ring: rgba(255, 69, 58, .38);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .03);
    --bar-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 8px 18px -8px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  /* Neutral greys after macOS dark mode: window #1e1e1e, content a step lighter,
     hairline separators, ~85% / 55% white text, Apple's dark system colours. */
  --bg: #1e1e1e; --surface: #282828; --surface-2: #303030; --border: #3f3f3f; --line: #353535;
  --text: #e8e8e8; --text-2: #c4c4c4; --muted: #9b9b9b;
  --side: #252525; --side-2: #333333; --side-ink: #d0d0d0; --group: #2e2e2e;
  --gray-50: #2a2a2a; --gray-100: #353535; --gray-200: #404040; --gray-300: #4d4d4d;
  --gray-400: #8a8a8a; --gray-500: #a1a1a1; --gray-600: #c4c4c4; --gray-700: #dcdcdc; --gray-900: #f2f2f2;
  --brand: #8e8cf5; --brand-hover: #aeacff; --brand-ink: #ffffff; --side-active: #5e5ce6; --brand-solid: #5e5ce6; --brand-solid-hover: #6e6cf0; --brand-soft: rgba(142, 140, 245, .16); --brand-ring: rgba(142, 140, 245, .4);
  --heading: #f2f2f2;
  --ok: #30d158; --ok-soft: rgba(48, 209, 88, .14); --ok-ring: rgba(48, 209, 88, .35);
  --warn: #ffd60a; --warn-soft: rgba(255, 214, 10, .12); --warn-ring: rgba(255, 214, 10, .32);
  --danger: #ff6961; --danger-soft: rgba(255, 69, 58, .15); --danger-ring: rgba(255, 69, 58, .38);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .03);
  --bar-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 8px 18px -8px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ================= 3. Base elements and icons ================= */
* { box-sizing: border-box; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; } /* 15px base: easier reading; everything sizes in rem/em */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; min-height: 100vh; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5rem; color: var(--heading); }
h1 { font-size: 1.4rem; font-weight: 700; } h2 { font-size: 1.05rem; font-weight: 600; } h3 { font-size: .95rem; font-weight: 600; }
p { margin: 0 0 .6rem; }
small, .muted { color: var(--muted); }
code { background: var(--surface-2); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: .75rem 0; }
/* Inline SVG icons (<x-icon>): stroke-based, sized to the text. */
.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; }

/* ================= 4. Shell: sidebar column + top sub-menu ================= */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .25s ease; }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--side); color: var(--side-ink); padding: 1rem .75rem;
  border-right: 1px solid rgba(255,255,255,.06);
}
.wordmark { display: inline-flex; align-items: baseline; gap: .45rem; color: #fff; font-size: 2rem; font-weight: 600; letter-spacing: .01em; line-height: 1; padding: 0 .4rem; }
/* The cubes are sized in em (user, 2026-10-04): together exactly as tall as the "k" of enkorus (its ascender is
   0.705 em in the app's font), standing on the text's baseline so their tops line up with the top of the k. */ /* the four squares, then the name upright (user, 2026-10-03) */
.wordmark:hover { color: #fff; text-decoration: none; } /* no hover change on the name — only the squares spin (below) */
.logo { display: grid; grid-template-columns: repeat(2, .3175em); gap: .07em; flex: none; position: relative; top: -.3875em; } /* a grid lines up on its first row: lift it one row (cube + gap) so its bottom sits on the baseline */
.logo i { width: .3175em; height: .3175em; border-radius: .07em; display: block; }
.logo i:nth-child(1) { background: #8b74ff; } .logo i:nth-child(2) { background: #f08a24; }
.logo i:nth-child(3) { background: #2f80ed; } .logo i:nth-child(4) { background: #d23f7a; }
/* Hovering the logo spins the squares about two rounds, slowing to a gentle stop — the logo's
   only hover effect (user, 2026-10-03); none with reduced motion. */
.wordmark:hover .logo { animation: logo-spin 2.8s cubic-bezier(.17, .67, .2, 1) both; }
@keyframes logo-spin { from { transform: rotate(0); } to { transform: rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .wordmark:hover .logo { animation: none; } }

.repo-switch {
  display: block; margin: .6rem 0 .35rem; padding: .5rem .65rem; border-radius: 9px;
  background: var(--side-2); color: var(--side-ink-strong); line-height: 1.25;
}
.repo-switch:hover { text-decoration: none; outline: 1px solid rgba(255,255,255,.15); }
.repo-switch small { display: block; color: var(--side-ink); font-size: .78rem; }
.repo-switch .name { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }

.side-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; padding: .6rem .55rem .2rem; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a, .side-nav button {
  display: flex; align-items: center; gap: .65rem; padding: .34rem .6rem; border-radius: 8px; line-height: 1.35;
  color: var(--side-ink); font: inherit; background: none; border: 0; cursor: pointer; text-align: left; width: 100%;
}
/* Compact menu (user, 2026-10-04): ~30px rows so your card and its icons stay in view on a 14" laptop;
   shorter windows tighten a little more. */
@media (max-height: 800px) {
  .side-nav a, .side-nav button { padding-top: .22rem; padding-bottom: .22rem; }
  .sidebar { padding-top: .75rem; }
  .wordmark { font-size: 1.75rem; }
  .repo-switch { margin: .45rem 0 .3rem; padding: .4rem .6rem; }
  .side-label { padding-top: .4rem; }
  .side-divider { margin: .3rem .35rem; }
}
.side-nav a:hover, .side-nav button:hover { background: var(--side-2); color: var(--side-ink-strong); text-decoration: none; }
.side-nav a.active { background: var(--side-active); color: #fff; font-weight: 600; }
.side-nav a .count { margin-left: auto; min-width: 1.4rem; text-align: center; font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; background: var(--accent); color: #fff; }
.sidebar .spacer { flex: 1; }
.repo-code { display: none; }
.nav-collapse {
  position: fixed; bottom: 33px; left: calc(var(--sidebar-w) - 13px); z-index: 60; /* on the edge, level with your avatar on the card at the bottom: app.js (alignCollapse) sets its top; bottom is the fallback */
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
}
/* Smooth collapse: the column width slides (.app), the button rides along, and the menu
   names fade and fold to nothing rather than vanishing. */
.side-nav .label { white-space: nowrap; overflow: hidden; max-width: 14rem; transition: opacity .2s ease, max-width .25s ease; }
.side-nav a, .side-nav button { transition: background-color .15s, color .15s, gap .25s ease, padding .25s ease; }
.nav-collapse { transition: left .25s ease, background-color .15s, color .15s; }
@media (prefers-reduced-motion: reduce) { .app, .nav-collapse, .side-nav .label, .side-nav a { transition: none; } }
.nav-collapse:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.nav-collapse .icon { width: 14px; height: 14px; }
.nav-arrow { display: inline-grid; } /* ‹ while expanded, › once collapsed */
.nav-arrow.is-right, html[data-nav="collapsed"] .nav-arrow.is-left { display: none; }
html[data-nav="collapsed"] .nav-arrow.is-right { display: inline-grid; }

/* Collapsed sidebar (wide screens only; html[data-nav=collapsed], toggled by the
   Collapse menu button): icons only, names as tooltips, counts as a badge on the icon. */
@media (min-width: 901px) {
  html[data-nav="collapsed"] { --sidebar-w: 68px; }
  html[data-nav="collapsed"] .sidebar { padding: 1rem .6rem; align-items: stretch; overflow-x: hidden; }
  html[data-nav="collapsed"] .wm-text,
  html[data-nav="collapsed"] .repo-switch small,
  html[data-nav="collapsed"] .repo-switch .name,
  html[data-nav="collapsed"] .side-label,
  html[data-nav="collapsed"] .side-user .who > span:last-child { display: none; }
  html[data-nav="collapsed"] .wordmark { justify-content: center; padding: 0; }
  html[data-nav="collapsed"] .repo-switch { padding: .5rem 0; text-align: center; }
  html[data-nav="collapsed"] .repo-code { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
  html[data-nav="collapsed"] .side-nav .label { opacity: 0; max-width: 0; }
  html[data-nav="collapsed"] .side-nav a, html[data-nav="collapsed"] .side-nav button { position: relative; justify-content: center; gap: 0; padding: .45rem 0; }
  html[data-nav="collapsed"] .side-nav a + a { margin-top: 0; }
  html[data-nav="collapsed"] nav[aria-label="Administration"] { border-top: 1px solid rgba(255,255,255,.08); margin-top: .5rem; padding-top: .5rem; }
  html[data-nav="collapsed"] .side-nav a .count { position: absolute; top: 1px; right: 3px; min-width: 1.05rem; padding: 0 .25rem; font-size: .62rem; line-height: 1.05rem; }
  html[data-nav="collapsed"] .side-user .who { justify-content: center; padding: 0 0 .5rem; }
  html[data-nav="collapsed"] .side-tools { flex-direction: column; align-items: center; padding: 0; }
  html[data-nav="collapsed"] .nav-collapse { bottom: 25px; } /* fallback only: app.js (alignCollapse) sets its top level with the avatar */
}
@media (max-width: 900px) { .nav-collapse { display: none; } }

.side-divider { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: .6rem .35rem; } /* between the menus (main, Administration) and the knowledge base */
.side-user { border-top: 1px solid rgba(255,255,255,.08); padding-top: .6rem; margin-top: .35rem; }
/* Your card stays pinned to the bottom of the sidebar (user, 2026-10-04): when the menu is taller than the
   window, the menu scrolls under it, so your avatar and icons are always in view. */
.side-user { position: sticky; bottom: -1rem; z-index: 1; margin-bottom: -1rem; padding-bottom: 1rem; background: var(--side); }
.side-user .who { display: flex; gap: .6rem; align-items: center; padding: 0 .35rem .5rem; }
.side-user .who-text { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.side-user .who strong { display: block; max-width: 100%; color: var(--side-ink-strong); font-size: .88rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The role as a small tag on its own line, never wrapping (user, 2026-10-03). */
.side-user .who-role { max-width: 100%; color: var(--side-ink); font-size: .75rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* plain text, no pill (user, 2026-10-04) */
.side-user .who-project { max-width: 100%; color: var(--side-ink); font-size: .75rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The line of small icons under your name: profile, password, theme. */
.side-tools { display: flex; gap: .25rem; padding: 0 .35rem .25rem calc(.35rem + 32px + .6rem - 7px); } /* under the name (avatar + gap; less the icon's own padding) */
.side-tools a, .side-tools button { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--side-ink); cursor: pointer; }
.side-tools a:hover, .side-tools button:hover, .side-tools a[aria-current] { background: rgba(255,255,255,.08); color: var(--side-ink-strong); text-decoration: none; }
.side-tools .icon { width: 16px; height: 16px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--side-active); color: #fff; font-weight: 700; font-size: .85rem; flex: none; }

.content { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: nowrap;
  padding: 0 1.25rem; min-height: 54px;
  /* Slightly translucent, blurred bar so content scrolling under it stays legible. */
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border); box-shadow: var(--bar-shadow);
}
.topbar h1 { font-size: 1.05rem; margin: 0; white-space: nowrap; flex: none; }
.topbar .menu-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: .5rem; margin-left: -.5rem; }
/* Tabs shrink and scroll sideways (swipe on touch) instead of wrapping the bar;
   the edge fade hints that more tabs are off-screen. */
.subnav {
  display: flex; align-self: stretch; gap: .1rem; min-width: 0; flex: 0 1 auto;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: flex; align-items: center; padding: 0 .75rem; min-height: 44px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.subnav a:last-child { margin-right: 24px; } /* room under the fade */
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav a.active { color: var(--brand); border-bottom-color: var(--brand); }
/* Grouped tabs (Administration, user 2026-10-03): one drop-down per group; the group you are in is underlined
   and names the page you are on. Not inside .subnav, whose sideways scrolling would clip the menus. */
.subnav-groups { display: flex; align-self: stretch; gap: .1rem; min-width: 0; }
.subnav-group { position: relative; display: flex; }
.subnav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .3rem; padding: 0 .75rem; min-height: 44px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.subnav-group > summary::-webkit-details-marker { display: none; }
.subnav-group > summary:hover { color: var(--text); }
.subnav-group.active > summary { color: var(--brand); border-bottom-color: var(--brand); }
.subnav-group .sg-current { font-weight: 600; }
.subnav-group > summary .icon { width: 14px; height: 14px; }
.subnav-group[open] > summary .icon { transform: rotate(180deg); }
.subnav-group .menu { position: absolute; left: 0; top: 100%; min-width: 220px; padding: .35rem; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.subnav-group .menu a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .75rem; min-height: 40px; border-radius: 7px; color: var(--text); font-weight: 500; white-space: nowrap; }
.subnav-group .menu a:hover { background: var(--surface-2); text-decoration: none; }
.subnav-group .menu a.active { color: var(--brand); font-weight: 600; }
.subnav-group .menu .icon { width: 16px; height: 16px; }
/* Phones: the tabs as one drop-down (shown under 600px only, see below). */
.subnav-menu { display: none; position: relative; }
.subnav-menu .menu-heading { display: block; padding: .6rem .75rem .2rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.subnav-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; font-weight: 600; color: var(--brand); }
.subnav-menu > summary::-webkit-details-marker { display: none; }
.subnav-menu > summary .icon { width: 16px; height: 16px; color: var(--muted); }
.subnav-menu[open] > summary .icon { transform: rotate(180deg); }
.subnav-menu .menu { position: absolute; left: .5rem; right: .5rem; top: 100%; padding: .35rem; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.subnav-menu .menu a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; min-height: 44px; border-radius: 7px; color: var(--text); font-weight: 500; }
.subnav-menu .menu a:hover { background: var(--surface-2); text-decoration: none; }
.subnav-menu .menu a.active { color: var(--brand); font-weight: 600; }
.subnav-menu .menu .icon { width: 16px; height: 16px; }
.topbar .spacer { flex: 1 0 0; }
.topbar .actions { display: flex; gap: .4rem; flex: none; padding: .45rem 0; }
/* Compact "Add" drop-down that replaces the action buttons on narrower screens. */
.actions-menu { display: none; position: relative; flex: none; }
.actions-menu > summary { list-style: none; cursor: pointer; }
.actions-menu > summary::-webkit-details-marker { display: none; }
.actions-menu[open] > summary .icon:last-child { transform: rotate(180deg); }
.actions-menu .menu { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 220px; padding: .35rem; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.actions-menu .menu a { display: flex; align-items: center; gap: .55rem; padding: .65rem .75rem; min-height: 44px; border-radius: 7px; color: var(--text); font-weight: 500; white-space: nowrap; }
.actions-menu .menu a:hover { background: var(--surface-2); text-decoration: none; }
.topbar .date { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; color: var(--muted); font-size: .9em; white-space: nowrap; }
.topbar .date small { font-size: .78em; font-variant-numeric: tabular-nums; opacity: .85; }
/* Top-right tools (user, 2026-10-03/04): Messages is a quiet icon button — no colour of its own; only the
   unread count is coloured — then Help (labelled), the date and Log out (see .topbar-help / .topbar-logout). */
.topbar-icon { position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); border: 1px solid var(--border); background: var(--surface); }
.topbar-icon:hover, .topbar-icon[aria-current] { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-soft); text-decoration: none; }
/* Help, labelled, and Log out at the far right (user, 2026-10-03). */
.topbar-help, .topbar-logout { flex: none; }
.topbar-logout { margin: 0; }
.topbar-icon .count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }

.po-main { flex: 1; padding: 1rem 1.25rem 2rem; }
.po-footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 1.25rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .85em; }
.po-footer strong { color: var(--text); }
.po-version { order: 3; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 50; transform: translateX(-100%); transition: transform .2s ease; }
  /* The huge spread shadow doubles as a dimmed backdrop behind the open drawer. */
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .topbar .menu-toggle { display: inline-grid; }
}

/* Top bar on tablets and phones:
   - up to 1200px: hide the date; two or more actions fold into the Add menu;
   - up to 900px (portrait tablet / phone, sidebar is a drawer): the tabs move to
     a second full-width row so every tab stays reachable with a swipe;
   - up to 600px: the tabs become one drop-down and the Add menu just its +. Touch targets stay at least 44px. */
@media (max-width: 1200px) {
  .topbar .date { display: none; }
  .topbar .actions:has(+ .actions-menu) { display: none; }
  .actions-menu { display: block; }
}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 0 1rem; row-gap: 0; }
  .topbar .spacer { display: none; }
  .topbar h1 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar .actions, .actions-menu { padding: .5rem 0; }
  .topbar .btn-sm { min-height: 40px; }
  /* Messages, Help and the account menu keep their desktop size; space above and below sets the first row (about 56px) */
  .topbar-icon, .topbar-help, .topbar-logout { margin: .7rem 0; }
  .subnav, .subnav-groups { order: 10; flex: 1 0 100%; margin: 0 -1rem; padding: 0 1rem; border-top: 1px solid var(--border); }
}
/* Phones (user, 2026-10-03): the tabs become one drop-down under the title (nothing cut off), and
   the Add / Actions menu shows just its + so the first row fits without wrapping. */
@media (max-width: 600px) {
  .subnav, .subnav-groups { display: none; }
  .subnav-menu { display: block; order: 10; flex: 1 0 100%; margin: 0 -1rem; padding: 0 1rem; border-top: 1px solid var(--border); }
  .actions-menu .am-label, .actions-menu .am-chevron, .topbar .act-label { display: none; }
  .topbar .actions .btn, .topbar-help, .topbar-logout .btn { min-width: 40px; justify-content: center; padding-inline: .6rem; }
  .actions-menu > summary { min-width: 40px; justify-content: center; padding-inline: .6rem; }
  .topbar { column-gap: .5rem; }
}

/* ================= 5. Cards (x-section and dashboard panes) ================= */
.section, .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.25rem; overflow: hidden; }
/* Cards don't clip overflow (unlike .section) so dropdowns inside them, such as the people picker list, can extend past the edge. */
.card { padding: var(--card-pad); overflow: visible; }
.card.form > h2, .card > h2:first-child { margin: 0; font-size: var(--card-title-size); font-weight: var(--card-title-weight); } /* a plain card's own heading: the card title look */
.card.panel { padding: 0; overflow: hidden; }
/* A section holding a type-to-search picker (.combo, built by app.js) lets its suggestion
   list spill past the bottom edge instead of clipping it; its first and last parts keep
   the rounded corners that overflow: hidden would otherwise provide. */
.section:has(.combo) { overflow: visible; }
.section:has(.combo) > :first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.section:has(.combo) > :last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
details.card > summary { cursor: pointer; }
.section-title, .card-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; /* title block and buttons share one centre line */
  padding: var(--card-pad); border-bottom: 1px solid var(--border);
}
.section-title .title, .card-title { font-size: var(--card-title-size); font-weight: var(--card-title-weight); color: var(--heading); margin: 0; line-height: 1.4; }
.section-title .meta, .card-subtitle { display: block; font-size: var(--card-sub-size); color: var(--muted); font-weight: 400; margin-top: .1rem; }
/* The pane's buttons (user rule: they live in the header), and the page's back link above its title */
.section-heading { min-width: 0; }
.section-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.section-actions > form { display: inline-flex; margin: 0; }
.section-back { display: inline-flex; align-items: center; gap: .2rem; margin-bottom: .2rem; font-size: .78rem; font-weight: 500; color: var(--muted); }
.section-back .icon { width: 13px; height: 13px; }
.section-back:hover { color: var(--brand); text-decoration: none; }
/* A form opened from a header button (<x-reveal-form>): a tinted row under the header */
.reveal-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .8rem var(--card-pad); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.reveal-form[hidden] { display: none; }
.reveal-form > form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1; margin: 0; }
.reveal-form input[type=text], .reveal-form input:not([type]), .reveal-form select { flex: 1; min-width: 180px; width: auto; }
.reveal-form .error { flex-basis: 100%; margin: 0; }
.card-header a { font-size: .85rem; font-weight: 500; white-space: nowrap; }
.section-body, .card-body { background: var(--surface); }
.section-body.pad, .card-body.pad { padding: var(--card-pad); }
.section-footer { padding: .85rem var(--card-pad) var(--card-pad); color: var(--muted); font-size: .85em; border-top: 1px solid var(--border); background: var(--surface-2); text-align: right; }

/* Toolbar of filter pills above a list */
.po-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .9rem; }
.po-toolbar .label { color: var(--muted); font-size: .8rem; font-weight: 500; margin: 0 .15rem 0 .5rem; }
.po-toolbar .label:first-child { margin-left: 0; }
.po-toolbar .spacer, .po-search .spacer { flex: 1; }
.po-search {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  padding: .55rem .7rem; border-radius: var(--radius); margin-bottom: 1rem;
}
.po-search .label { color: var(--text-2); font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; }
.po-search select, .po-search input { width: auto; min-width: 180px; }
.po-search.right { justify-content: flex-end; }
.po-search input[type=search] { width: auto; flex: 1 1 16rem; min-width: 12rem; } /* the search box takes the free space; filters and Go stay on the same row */

/* ================= 6. Tables ================= */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93em; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .74rem; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; background: var(--surface-2); white-space: nowrap; border-bottom-color: var(--border); }
th a { color: inherit; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
tr.group td { background: var(--group); font-weight: 600; color: var(--text); font-size: .85rem; border-top: 1px solid var(--border); padding-top: .5rem; padding-bottom: .5rem; }
tr.group td:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--brand); margin-right: .5rem; vertical-align: 2px; }
tr.subgroup td { font-weight: 600; color: var(--brand); font-size: .85rem; padding-left: 1.4rem; }
tr.muted-row td { color: var(--muted); }
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline; }
.center { text-align: center; }
/* Permissions grid: columns grouped by area, a divider between groups, a key underneath. */
.perm-grid th, .perm-grid td { vertical-align: middle; }
.perm-grid th:not(:first-child) { white-space: normal; min-width: 6.5rem; }
.perm-grid input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; }
.perm-grid input[type=checkbox]:disabled { cursor: default; }
.perm-member { display: flex; align-items: center; gap: .6rem; }
.perm-member > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.perm-member small { font-size: .78rem; }
.perm-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem 1.5rem; }
.perm-key h3 { margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.perm-key dl { margin: 0; }
.perm-key dt { font-weight: 600; font-size: .9rem; }
.perm-key dd { margin: 0 0 .6rem; color: var(--text-2); font-size: .85rem; }
.perm-min { display: block; font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; } /* People page: an add-on's lowest role, a locked row's reason */
.people-form { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.people-form > .section { margin-bottom: 0; }
.people-form .perm-grid select { width: auto; min-width: 14rem; max-width: 100%; }
.people-form .perm-member strong { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Figures line up in tables, grids and number boxes (hours, points, costs). */
table, input[type=number] { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sn { width: 1%; text-align: right; color: var(--muted); white-space: nowrap; }
/* Rendered Markdown (App\Support\Markdown::render()) */
.rich { color: var(--text-2); }
.rich p:last-child { margin-bottom: 0; }
.rich table { width: auto; margin: .4rem 0; border: 1px solid var(--border); border-radius: 6px; }
.rich th, .rich td { border: 1px solid var(--line); padding: .3rem .55rem; text-transform: none; letter-spacing: 0; }
.rich ul, .rich ol { margin: .25rem 0 .5rem; padding-left: 1.3rem; }
.rich strong { color: var(--text); }

/* Icon actions in rows */
.acts { display: inline-flex; gap: .15rem; }
.acts a, .acts button {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm);
  color: var(--gray-400); background: none; border: 0; cursor: pointer; padding: 0;
}
/* Hover is flat everywhere: icon actions turn the brand colour on a soft tint,
   delete / danger actions turn red. No glows or lifts. */
.acts a:hover, .acts button:hover { background: var(--brand-soft); color: var(--brand); }
.acts .danger:hover { background: var(--danger-soft); color: var(--danger); }
.acts form { display: inline; margin: 0; }

/* ================= 7. Dashboard ================= */
.dash { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; } /* Project | My workbench + Risks | General */
.dash.no-project { grid-template-columns: minmax(0, 1fr) 300px; }
.dash-hero { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dash-hero h1 { margin: 0; }
.dash-hero p { margin: .2rem 0 0; color: var(--muted); }
.hero-greeting { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .1rem; }
.dash-hero .hero-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; } /* right of the greeting; below it on a phone */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stats.stats-mine { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Home › My workbench: 2 × 2, always */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--card-pad); }
.stat .label { font-size: .8rem; color: var(--text-2); font-weight: 600; }
.stat .value { font-size: 1.6rem; font-weight: 700; color: var(--heading); line-height: 1.2; margin-top: .2rem; }
.stat .value.is-danger { color: var(--danger); }
.stat a { color: inherit; } .stat a:hover { color: var(--brand); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem var(--card-pad); border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .primary { font-weight: 600; color: var(--text); font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* same size in every pane; long titles (e.g. a risk's description) stop at two lines */
.list .secondary { font-size: .82rem; color: var(--muted); }
.list .icon-box { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); flex: none; }
.list .icon-box.danger { background: var(--danger-soft); color: var(--danger); }
.list .icon-box.warn { background: var(--warn-soft); color: var(--warn); }
.list .trail { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; white-space: nowrap; }
.post + .post { border-top: 1px solid var(--line); }
.post { padding: 1rem var(--card-pad); }
.post h3 { margin: 0 0 .15rem; font-size: .95rem; }
.post .rich { font-size: .9rem; }
.post .when { font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
.meter-row { padding: .7rem var(--card-pad); border-bottom: 1px solid var(--line); }
.meter-row:last-child { border-bottom: 0; }
.meter-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--gray-100); margin-top: .4rem; }
.meter-bar span { display: block; height: 100%; }
.meter-legend { display: flex; gap: .75rem; font-size: .75rem; color: var(--muted); margin-top: .35rem; }
.meter-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .25rem; }
@media (max-width: 1350px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash > aside { grid-column: 1 / -1; } } /* General goes under the two */
@media (max-width: 1100px) { .dash, .dash.no-project { grid-template-columns: minmax(0, 1fr); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= 8. Status lights, badges ================= */
/* RAG status light */
.light { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); vertical-align: -1px; }
.light.red { background: #ef4444; } .light.amber { background: var(--amber); } .light.green { background: #22c55e; }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 500; background: var(--gray-100); color: var(--gray-600); box-shadow: inset 0 0 0 1px rgba(107,114,128,.15); white-space: nowrap; line-height: 1.4; }
.badge-note { margin-left: .3rem; font-size: .66rem; font-weight: 500; opacity: .7; } /* e.g. "from its feature" after a story's use case */
.badge-closed { background: var(--gray-200); color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.badge-flag { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-ring); }
.badge-flag .icon { width: 12px; height: 12px; }
/* Link to a user story's requirement document: same size as the ID tag (.ref), green so it reads differently; the name is in the tooltip. */
.doc-pill { display: inline-flex; align-items: center; gap: .2rem; margin-left: .3rem; padding: .05rem .4rem; border: 1px solid var(--ok-ring); border-radius: 6px; font: 600 .72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; vertical-align: middle; color: var(--ok); background: var(--ok-soft); text-decoration: none; white-space: nowrap; }
.doc-pill .icon { width: 11px; height: 11px; }
.doc-pill:hover { border-color: var(--ok); text-decoration: none; }
.badge-brand { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-ring); }
.badge-ok { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-ring); }
.badge-warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-ring); }
.badge-danger { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-ring); }
.sev-low { color: var(--ok); } .sev-medium { color: #d97706; } .sev-high, .sev-show-stopper { color: var(--danger); font-weight: 600; }
.check-done { color: var(--ok); } .check-open { color: var(--gray-400); }

/* ================= 9. Forms ================= */
.form { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: .9rem 1.25rem; align-items: start; }
.form-grid > label { padding-top: .55rem; margin: 0; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid > label { padding-top: 0; } }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-row.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* exactly three per row */
@media (max-width: 900px) { .form-row.form-row-3 { grid-template-columns: minmax(0, 1fr); } }
label { display: block; font-weight: 600; font-size: .875rem; color: var(--text-2); margin-bottom: .3rem; }
.hint { font-weight: 400; color: var(--muted); font-size: .8rem; margin-top: .3rem; }
/* Inputs draw their border with an inset box-shadow (not border) so the focus ring can thicken without shifting layout. */
input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=search], input[type=date], input[type=datetime-local], input[type=file], select, textarea {
  width: 100%; padding: .55rem .75rem; font: inherit; font-size: .9rem; color: var(--text);
  background: var(--surface); border: 0; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--gray-300), var(--shadow-sm);
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); }
input[type=color] { width: 48px; height: 36px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 16px; height: 16px; }
.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 500; margin: 0; }
.check input { margin-top: .15rem; flex: none; }
.check .hint { display: block; margin-top: 0; }
.radios { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding-top: .5rem; }
.radios label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; margin: 0; }
.checks { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-height: 18rem; overflow: auto; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.error { color: var(--danger); font-size: .82em; margin-top: .3rem; }
.form-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; }

/* ================= 10. Buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: var(--radius-sm); min-height: 38px;
  font: inherit; font-weight: 600; font-size: .875rem; line-height: 1.25; cursor: pointer; white-space: nowrap; text-decoration: none;
  border: 0; background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--gray-300), var(--shadow-sm);
}
.btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn.active { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-ring); }
.btn-primary { background: var(--brand-solid); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-solid-hover); color: var(--brand-ink); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-ring); }
.btn-sm { padding: .4rem .75rem; min-height: 32px; font-size: .8rem; border-radius: 7px; }
.btn-link { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; font-weight: 500; cursor: pointer; }
.btn-link:hover { color: var(--brand-hover); text-decoration: underline; }

/* ================= 11. Alerts, secrets, letter filter, pagination ================= */
.alert { padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; font-weight: 500; }
.alert-ok { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-ring); }
.alert-danger { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-ring); }
.alert-warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-ring); }
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert.has-close { position: relative; padding-right: 2.6rem; }
.alert-close { position: absolute; top: .55rem; right: .55rem; display: inline-flex; padding: .25rem; border: 0; border-radius: 6px; background: transparent; color: inherit; opacity: .7; cursor: pointer; }
.alert-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.alert-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
/* Notices (#flash) slide down from under the top bar and back up when closed (user, 2026-10-03:
   the one animation besides the sidebar and the quick-message panel). The top bar sits above
   them (z-index), so they appear to come out from beneath the sub-menu. */
#flash { position: relative; z-index: 1; }
#flash .alert { animation: flash-in .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes flash-in { from { transform: translateY(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
.alert.is-leaving { overflow: hidden; transform: translateY(-140%); opacity: 0; height: 0 !important; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
  transition: transform .3s ease-in, opacity .25s ease-in, height .25s ease .15s, margin .25s ease .15s, padding .25s ease .15s; }
@media (prefers-reduced-motion: reduce) { #flash .alert { animation: none; } }
/* One-time secrets (e.g. a temporary password in the flash message): monospace, selected whole on click. */
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; padding: .1rem .45rem; background: var(--surface); border-radius: 6px; user-select: all; }

/* A–Z letter filter */
.letters { display: flex; flex-wrap: wrap; gap: 3px; }
.letters a { min-width: 1.8rem; text-align: center; padding: .25rem .35rem; border-radius: 6px; font-size: .8rem; font-weight: 500; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--gray-300); }
.letters a:hover, .letters a.active { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-ring); text-decoration: none; }
.pagination { display: flex; gap: .4rem 1rem; justify-content: center; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.pagination .page-links { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.pagination .page-summary { background: none !important; box-shadow: none !important; padding: 0 !important; color: var(--muted); }
.pagination .gap { background: none !important; box-shadow: none !important; padding: .4rem .2rem !important; color: var(--muted); }
/* Log pages: pager on the left, rows-per-page on the right */
.log-pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin: .6rem 0; }
.log-pager .pagination { margin: 0; justify-content: flex-start; }
.page-size { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted); margin-left: auto; }
.page-size a { padding: .25rem .55rem; border-radius: var(--radius-sm); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--gray-300); }
.page-size a.active { background: var(--brand-solid); color: var(--brand-ink); box-shadow: none; }
.pagination a, .pagination span { padding: .4rem .8rem; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 500; background: var(--surface); box-shadow: inset 0 0 0 1px var(--gray-300); color: var(--text-2); }
.pagination .current { background: var(--brand-solid); color: var(--brand-ink); box-shadow: none; }
.pagination .disabled { color: var(--gray-400); }

/* ================= 12. Detail lists, threaded replies, simple Gantt table, auth pages ================= */
/* Detail lists (label / value) */
.details { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 0; }
.details > dt { font-size: .85rem; font-weight: 600; color: var(--text-2); background: var(--surface-2); padding: .65rem var(--card-pad); border-bottom: 1px solid var(--line); }
.details > dd { margin: 0; padding: .65rem var(--card-pad); border-bottom: 1px solid var(--line); }

/* Threaded replies */
.thread, .thread ul { list-style: none; margin: 0; padding: 0; }
.thread ul { margin-left: 1.5rem; border-left: 2px solid var(--line); padding-left: .9rem; }
.reply { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); margin: .6rem 0; background: var(--surface); box-shadow: var(--shadow-sm); }
.reply.newest { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.reply header { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .85rem; margin-bottom: .35rem; }
.reply header strong { color: var(--text); }

/* Older table-based Gantt; the roadmap timeline uses the .g-* rules in section 18. */
/* Gantt (roadmap / milestones) */


/* Auth pages */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, #312e81 65%, var(--side)) 0, var(--side) 48%); } /* a softer, smaller blue glow (user, 2026-10-04) */
.auth .box { width: 100%; max-width: 400px; background: var(--surface); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.3); overflow: hidden; }
.auth .box header { background: var(--side); padding: 1.25rem 1.5rem; }
.auth .box .body { padding: 1.75rem 1.5rem; }
.auth .btn-primary { width: 100%; }
/* Sign-in page with its introduction (auth/_intro, user 2026-10-03): the dark introduction on the
   left, the sign-in card on a light panel on the right; stacked on phones. */
.auth.has-intro { display: grid; place-items: center; padding: 2.5rem 1.5rem; } /* the dark background of .auth, full width */
/* Sign-in page (user, 2026-10-04): one centred column, 1040px wide — the introduction on the left, the card on the right. */
.auth-wrap { display: contents; }
.auth.has-intro .auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); width: 100%; max-width: 1040px; }
.auth-panel { display: grid; place-items: center; padding: 1.5rem; }
.auth.has-intro .auth-panel { padding: 0; }
.auth-intro { display: flex; flex-direction: column; gap: 1.6rem; color: #d1d5db; }
.auth-intro h1 { margin: .6rem 0 0; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.1; letter-spacing: -.01em; color: #fff; font-weight: 700; }
.auth-lead { margin: 1rem 0 0; max-width: 34rem; font-size: 1rem; line-height: 1.6; color: #b8bfcc; }
.auth-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 34rem; }
.auth-feats li { display: flex; gap: .8rem; align-items: flex-start; }
.auth-feats .icon { width: 20px; height: 20px; flex: none; margin-top: .1rem; color: #a99bff; }
.auth-feats li.is-secure .icon { color: #6ee7b7; }
.auth-feats strong { display: block; color: #fff; font-weight: 600; }
.auth-feats span { display: block; font-size: .875rem; line-height: 1.5; color: #9aa3b2; }
.auth-foot { margin: 0; font-size: .8rem; color: #7c8594; }
.auth-foot a { color: #b8bfcc; }
.auth .box .box-signin { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.box-signin h2 { margin: 0; font-size: 1.15rem; color: var(--heading); }
.box-signin span { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 500; color: var(--ok); }
.box-signin .icon { width: 14px; height: 14px; }
.auth-version { margin: .9rem 0 0; font-size: .75rem; color: #9aa3b2; text-align: center; } /* version (and installation) under the sign-in card */
@media (max-width: 900px) {
  /* Phones: the logo, headline and one paragraph first, then the sign-in card, all on the dark background. */
  .auth.has-intro { padding: 1.5rem 1.1rem 2rem; place-items: start center; }
  .auth.has-intro .auth-wrap { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .auth-feats, .auth-foot { display: none; }
  .auth-intro { gap: 1rem; }
  .auth-intro h1 { margin-top: 0; font-size: 1.75rem; }
  .auth-lead { margin-top: .5rem; font-size: .92rem; }
}

/* ================= 13. Utilities, responsive tweaks and print ================= */
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: .9rem; }
.story-main .section > .empty { padding: var(--card-pad) 1rem; } /* the story page's empty panes (test cases, defects, files) stay short */
/* HTMX adds .htmx-request to the element while its request is in flight. */
.htmx-request { opacity: .6; }
.doc-detail.htmx-request { opacity: 1; } /* the Library pane swaps without dimming (app.js [data-doc-split]) */
.grid { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; } /* same space below a row of cards as below a single card (.section) */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid > .section { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.mt { margin-top: 1.25rem; }

@media (max-width: 700px) { .details { grid-template-columns: 1fr; } }
/* Print: drop navigation and row actions, show content full-width. */
@media print {
  .sidebar, .topbar, .po-footer, .po-toolbar, .po-search, .acts, td.actions, .section-actions, .section-back, .reveal-form { display: none !important; }
  .app { display: block; }
}

/* ================= 14. Form helpers ================= */
/* Styles for the elements app.js builds: .combo (data-search), .chips (data-chips), .md (data-markdown). */
.combo { position: relative; }
/* Several-people picker (data-people): chips plus a type-to-add box, styled like an input */
.people { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.people:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.people input { flex: 1; min-width: 140px; border: 0; padding: .25rem; background: transparent; box-shadow: none; outline: none; }
.people .chip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .2rem .1rem .55rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .85rem; font-weight: 500; }
.people .chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; }
.combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: .25rem;
  list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.combo-list li { padding: .35rem .5rem; border-radius: 6px; cursor: pointer; }
.combo-list li:hover, .combo-list li.active { background: var(--brand-soft); color: var(--brand); }
.combo-list li.combo-new { font-weight: 600; } /* "Add …": a new entry typed in a creatable picker */
.chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.chip { font: inherit; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.md { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--surface); }
.md:focus-within { border-color: var(--brand); outline: 2px solid var(--brand-soft); }
.md textarea { border: 0; border-radius: 0; outline: none; }
.md-bar { display: flex; gap: .15rem; padding: .25rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.md-btn { font: inherit; font-size: .82rem; font-weight: 600; min-width: 28px; padding: .15rem .45rem; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.md-btn:hover { background: var(--surface); color: var(--brand); }
.md-preview { padding: .6rem .75rem; min-height: 7rem; }

/* ================= 15. Workspace chooser ================= */
.repo-card {
  display: flex; flex-direction: column; height: 350px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.repo-card:hover { box-shadow: 0 0 0 1px var(--brand-ring); } /* flat hover: a crisp outline, no lift or blur */
.repo-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.repo-card-top {
  display: flex; align-items: flex-start; gap: .85rem; padding: var(--card-pad);
  /* --repo is the workspace colour, set inline per card (its top edge). */
  border-top: 4px solid var(--repo);
}
.repo-badge {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px;
  background: var(--repo); color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--repo) 35%, transparent);
}
.repo-head { min-width: 0; flex: 1; }
.repo-head h2 { margin: 0; font-size: var(--card-title-size); font-weight: var(--card-title-weight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-head .repo-company { display: block; font-size: var(--card-sub-size); color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
.repo-head .repo-location { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; margin-top: .35rem; padding: .1rem .5rem .1rem .4rem; border-radius: 999px; font-size: .75rem; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-head .repo-location .icon { width: 12px; height: 12px; flex: none; }
.repo-flags { display: flex; flex-direction: column; gap: .25rem; align-items: flex-end; }
.repo-card-body { flex: 1; min-height: 0; padding: .9rem var(--card-pad) 0; border-top: 1px solid var(--line); }
.repo-notes {
  /* Multi-line ellipsis; -webkit-line-clamp only works with display:-webkit-box. */
  margin: 0; font-size: .9rem; color: var(--text-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.repo-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: .75rem var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.repo-stats div { padding: .5rem .6rem; text-align: center; background: var(--surface-2); }
.repo-stats div + div { border-left: 1px solid var(--line); }
.repo-stats dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.repo-stats dd { margin: .1rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--heading); }
.repo-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem var(--card-pad) var(--card-pad); border-top: 1px solid var(--border); background: var(--surface-2); }
.repo-admin { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-card-footer form { margin: 0; flex: none; }

/* ================= 16. Card grids (lists of things) ================= */
/* Every card list (and the workspace chooser's .repo-grid): 4 per row, then 3 below 1500px,
   2 below 1100px and 1 below 700px. */
.card-grid, .repo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.card-grid { margin-bottom: 1.5rem; }
@media (max-width: 1500px) { .card-grid, .repo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .card-grid, .repo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .card-grid, .repo-grid { grid-template-columns: minmax(0, 1fr); } } /* minmax: long card text never widens the page */
.grid-group { display: flex; align-items: center; gap: .6rem; margin: 1.25rem 0 .7rem; font-size: .95rem; font-weight: 600; color: var(--heading); }
.grid-group:first-child { margin-top: 0; }
.grid-group::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.grid-group .badge { font-weight: 500; }
.grid-group a { color: inherit; }
.grid-group a:hover { color: var(--brand); }

/* Generic list card. --accent (set inline, defaults to orange) colours the top edge and icon. */
.item-card {
  display: flex; flex-direction: column; min-height: 230px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  border-top: 3px solid var(--accent);
}
.item-card:hover { box-shadow: 0 0 0 1px var(--brand-ring); } /* flat hover: a crisp outline (keeps the coloured top edge), no lift or blur */
.item-card.is-muted, tr.is-muted { opacity: .7; } /* blocked users, as cards or rows */
.item-card.is-muted:hover { opacity: 1; }
/* Fixed-height header (title, subtitle, one row of badges) so descriptions and details line up across a row. */
.item-card-head { display: flex; align-items: flex-start; gap: .85rem; overflow: hidden; padding: var(--card-pad);
  height: calc(73px + 2 * var(--card-pad)); /* its content (title, subtitle, badges) is always 73px: the same space above and below, every card the same height */
}
.item-avatar, .item-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem;
}
.item-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.item-icon .icon { width: 19px; height: 19px; }
.item-titles { flex: 1; min-width: 0; }
.item-title { display: block; font-weight: var(--card-title-weight); font-size: var(--card-title-size); color: var(--heading); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one truncated line; full name in the tooltip */
a.item-title:hover { color: var(--brand); }
.item-subtitle { display: block; font-size: var(--card-sub-size); color: var(--muted); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-badges { display: flex; flex-wrap: nowrap; gap: .3rem; margin-top: .5rem; min-height: 1.6rem; overflow: hidden; } /* one row, always present: headers line up */
.item-card-body { flex: 1; padding: 0 var(--card-pad) var(--card-pad); font-size: .9rem; line-height: 1.6; color: var(--text-2); }
.item-card-body .clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 .9rem; }
.item-card-body .clamp-4 { -webkit-line-clamp: 4; min-height: calc(1.6em * 4); }
.item-card-body .clamp-2 { -webkit-line-clamp: 2; }
.item-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  padding: .85rem var(--card-pad) var(--card-pad); border-top: 1px solid var(--line); background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius); font-size: .82rem; color: var(--muted);
}
.item-card-foot .acts { margin-left: auto; }

/* key/value pairs inside a card */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.2rem; margin: .5rem 0 0; }
.kv.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Document page (documents/show): the new-version upload row and the description under the facts. */
.doc-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.doc-upload input[type=text] { flex: 1 1 16rem; min-width: 0; }
.doc-description { margin-top: 1rem; }
@media (max-width: 700px) { .kv.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kv dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
.kv dd { margin: .1rem 0 0; font-size: .9rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.kv .full { grid-column: 1 / -1; }
.kv dd.is-text { font-weight: 400; color: var(--text-2); white-space: normal; line-height: 1.5; } /* prose answers (e.g. mitigation), not short facts */
.sprint-facts { margin: 0 0 .9rem; }
.contact-list { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.contact-list li { display: flex; align-items: center; gap: .6rem; min-width: 0; color: var(--text); }
.contact-list li .icon { flex: none; width: 15px; height: 15px; color: var(--muted); }
.contact-list li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-list a { color: inherit; }
.contact-list a:hover { color: var(--brand); }

/* little stat strip */
.mini-stats { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .9rem; }
.mini-stats span { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .2rem .55rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.mini-stats strong { color: var(--heading); }

/* avatar stack */
.avatars { display: flex; align-items: center; }
.avatars span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .68rem; font-weight: 700; color: #fff; border: 2px solid var(--surface); margin-left: -6px; }
.avatars span:first-child { margin-left: 0; }
.avatars small { margin-left: .4rem; }

/* segmented Cards | Table switch */
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.seg a { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 7px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.list-head h2 { margin: 0; font-size: 1.05rem; }
.list-head .muted { font-size: .85rem; }

/* ================= 17. Logs ================= */
/* System log filter row */
.log-filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(140px, 1fr)) repeat(2, minmax(130px, 1fr)) auto; gap: .8rem; align-items: end; }
@media (max-width: 1200px) { .log-filters { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }

/* ================= 18. Gantt timeline (roadmap) ================= */
/* Rows nest roadmap > track > plan. The header and label column are sticky so
   they stay put while the timeline scrolls both ways. --label and --timeline (widths)
   are set inline by the view; bars are positioned with inline left/width. */
.gantt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.25rem; }
.gantt-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem var(--card-pad); border-bottom: 1px solid var(--border); }
.gantt-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.gantt-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.gantt-legend i { display: inline-block; }
.lg-bar { width: 22px; height: 10px; border-radius: 4px; background: var(--brand); opacity: .55; }
.lg-progress { width: 22px; height: 10px; border-radius: 4px; background: var(--brand); }
.lg-diamond { width: 9px; height: 9px; background: #f59e0b; transform: rotate(45deg); border: 2px solid var(--surface); box-shadow: 0 0 0 1px #d97706; }
.lg-today { width: 2px; height: 14px; background: var(--accent); }

.gantt-scroll { overflow: auto; max-height: calc(100vh - 230px); position: relative; }
.gantt-grid { position: relative; width: calc(var(--label) + var(--timeline)); min-width: 100%; }

.g-head { display: grid; grid-template-columns: var(--label) var(--timeline); position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--border); }
.g-corner { position: sticky; left: 0; z-index: 7; display: flex; align-items: flex-end; gap: .4rem; padding: .6rem 1rem; background: var(--surface); border-right: 1px solid var(--border); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.g-scale { position: relative; }
.g-years, .g-months { display: flex; }
.g-years div { padding: .35rem .6rem 0; font-size: .75rem; font-weight: 700; color: var(--heading); border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.g-months div { padding: .15rem .1rem .5rem; text-align: center; font-size: .75rem; font-weight: 500; color: var(--muted); border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.g-months div.is-now { color: var(--brand); font-weight: 700; }
.g-today-pill { position: absolute; bottom: -9px; transform: translateX(-50%); z-index: 2; padding: .05rem .45rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .02em; }

/* Month gridlines and alternate shading behind the rows; pointer-events off so bars stay clickable. */
.g-overlay { position: absolute; top: 0; bottom: 0; left: var(--label); width: var(--timeline); display: flex; pointer-events: none; z-index: 0; }
.g-overlay div { height: 100%; border-left: 1px solid var(--line); }
.g-overlay div.alt { background: color-mix(in srgb, var(--gray-100) 45%, transparent); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

.g-row { display: grid; grid-template-columns: var(--label) var(--timeline); position: relative; z-index: 1; }
/* Toggled by [data-gantt-toggle] in app.js to collapse a track. */
.g-row.is-hidden { display: none; }
.g-label {
  position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: .55rem; min-width: 0;
  padding: 0 1rem; background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--line);
  color: var(--text); text-align: left; font: inherit;
}
a.g-label:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.g-track { position: relative; border-bottom: 1px solid var(--line); }
.g-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* level 1: roadmap */
.g-roadmap .g-label { height: 40px; font-weight: 700; font-size: .9rem; color: var(--heading); background: var(--surface-2); }
.g-roadmap .g-label .icon { color: var(--brand); }
.g-roadmap .g-track { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.g-chevron { width: 14px; height: 14px; color: var(--muted); flex: none; }
/* A track's chevron (next to its name; user 2026-10-04) folds open its delivery row underneath: the sprints of
   its linked releases (in lanes when they overlap) and the milestones of its releases and its own (roadmap/_gantt). */
.g-toggle { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; flex: none; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.g-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.g-toggle[aria-expanded="false"] .g-chevron { transform: rotate(-90deg); }
.g-link { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 0 1 auto; align-self: stretch; color: inherit; } /* sized to its name, so the chevron follows it */
.g-link:hover { text-decoration: none; color: var(--brand); }
.g-delivery .g-label { height: auto; min-height: 40px; padding-left: 1rem; gap: .35rem; background: var(--surface-2); }
.g-delivery .g-label small { color: var(--muted); font-size: .75rem; }
.g-delivery .dl-sprint { z-index: 1; }
.g-dms { position: absolute; bottom: 5px; margin-left: -5px; z-index: 2; box-shadow: 0 0 0 2px var(--surface); }
.g-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.g-span { position: absolute; top: 15px; height: 6px; border-radius: 999px; opacity: .3; }
/* level 3: plan */
.g-plan .g-label { height: 48px; padding-left: 1rem; gap: .35rem; }
/* Track and delivery rows share these widths, so names line up; the grip sits tight against the chevron. */
.g-label .drag-grip { margin-right: -.2rem; }
.drag-grip-space { width: 18px; margin-right: -.2rem; flex: none; }
.g-status-space { width: 18px; flex: none; }
.g-link { gap: .35rem; }
.g-status { display: grid; place-items: center; width: 18px; flex: none; color: var(--gray-400); }
.g-status.closed { color: var(--ok); }
.g-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.g-text .g-name { font-size: .85rem; font-weight: 500; }
.g-text small { font-size: .72rem; color: var(--muted); }

/* --bar is the plan colour; the darker .g-progress fill shows percent complete. */
.g-bar {
  position: absolute; top: 11px; height: 26px; border-radius: 7px; overflow: hidden; display: flex; align-items: center;
  background: color-mix(in srgb, var(--bar) 55%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 75%, transparent), var(--shadow-sm);
  color: #fff; font-size: .76rem; font-weight: 600; text-decoration: none;
}
.g-bar:hover { box-shadow: inset 0 0 0 1px var(--bar); color: #fff; text-decoration: none; }
.g-progress { position: absolute; inset: 0 auto 0 0; background: var(--bar); }
.g-bar-text { position: relative; padding: 0 .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.g-bar.is-narrow .g-bar-text { display: none; }
.g-bar.is-closed { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--bar) 35%, var(--surface)) 0 6px, color-mix(in srgb, var(--bar) 25%, var(--surface)) 6px 12px); }
.g-bar.is-closed .g-progress { opacity: .45; }
.g-outside { position: absolute; top: 15px; font-size: .78rem; font-weight: 500; color: var(--text-2); white-space: nowrap; pointer-events: none; }
.g-milestone { position: absolute; top: 18px; width: 11px; height: 11px; margin-left: -6px; transform: rotate(45deg); background: #f59e0b; border: 2px solid var(--surface); box-shadow: 0 0 0 1px #d97706; z-index: 2; }
.g-milestone:hover { background: #d97706; }
.g-milestone-name { position: absolute; top: 16px; padding: 0 .3rem; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); font-size: .66rem; font-weight: 600; line-height: 16px; color: var(--text-2); white-space: nowrap; text-decoration: none; z-index: 2; }
.g-milestone-name:hover { color: var(--heading); text-decoration: none; }
.g-actions { position: absolute; top: 12px; display: none; gap: 2px; z-index: 2; }
.g-row:hover .g-actions { display: inline-flex; }
.g-actions form { display: flex; } /* no inline line box around the button, so the arrow sits dead centre */
.g-actions button { display: grid; place-items: center; padding: 0; width: 24px; height: 24px; border-radius: 6px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); cursor: pointer; }
.g-actions button:hover { color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
/* Start / end arrows: slimmer; inside the bar (is-inside) they sit on its colour as white chips,
   and the bar's name moves over to stay clear of them. */
.g-edge button { width: 20px; }
.g-actions button .icon { display: block; width: 14px; height: 14px; vertical-align: 0; }
.g-edge.is-inside { top: 14px; }
.g-edge.is-inside button { height: 20px; background: rgba(255, 255, 255, .88); box-shadow: none; color: #374151; }
.g-edge.is-inside button:hover { background: #fff; color: #4f46e5; }
.g-row:hover .g-bar.has-edges .g-bar-text { padding-left: 50px; padding-right: 50px; }
.g-row:hover .g-outside { visibility: hidden; } /* the end arrows take its place; the name is in the left column */

/* Keep the year label visible at the left edge while scrolling through a long year. */
.g-years div span { position: sticky; left: calc(var(--label) + .6rem); }
/* Phones (user, 2026-10-03): the name column isn't pinned — it would cover most of the screen —
   so the whole chart, names and all, slides left as one; the column is also narrower. */
@media (max-width: 700px) {
  .gantt-grid { --label: 210px !important; }
  .g-label, .g-corner { position: relative; left: auto; }
  .g-years div span { position: static; }
}

/* ================= 19. Select boxes: custom chevron with breathing room ================= */
/* Only single-line dropdowns: multi-selects and listboxes keep native styling. */
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.5rem; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem 1.1rem;
}
select:not([multiple]):not([size]):hover { box-shadow: inset 0 0 0 1px var(--gray-400); }
select:not([multiple]):not([size]):focus { box-shadow: inset 0 0 0 2px var(--brand); }
select:disabled { cursor: not-allowed; opacity: .7; }
/* compact selects inside cards and toolbars keep the same chevron spacing */
.item-card-foot select, .po-search select { padding-top: .4rem; padding-bottom: .4rem; }

/* ================= 20. Knowledge base ================= */
/* Help articles from resources/help/*.md: index (hero + sections) and article (nav | article | TOC). */
/* Negative margins cancel .po-main padding so the hero runs edge to edge. */
.kb-hero { text-align: center; padding: 2.5rem 1rem 2rem; margin: -1rem -1.25rem 1.5rem; background: linear-gradient(135deg, var(--brand-soft), transparent 70%); border-bottom: 1px solid var(--border); }
.kb-hero h1 { font-size: 1.9rem; margin-bottom: .35rem; }
.kb-hero p { color: var(--muted); font-size: 1rem; margin-bottom: 1.25rem; }
.kb-support { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; padding: .9rem var(--card-pad); color: var(--text-2); }
.kb-support > .icon { color: var(--brand); }
.kb-search { display: flex; align-items: center; gap: .5rem; max-width: 640px; margin: 0 auto; padding: .35rem .35rem .35rem .9rem; background: var(--surface); border-radius: 12px; box-shadow: 0 0 0 1px var(--border), 0 8px 24px rgba(16,24,40,.08); }
.kb-search .icon { color: var(--muted); }
/* !important beats the global input ring; the .kb-search wrapper draws the border instead. */
.kb-search input { box-shadow: none !important; padding: .6rem .3rem; font-size: 1rem; }
.kb-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.4rem; }
.kb-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--card-pad);
  display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; } /* header and article list share rows with the cards beside it, so every list starts at the same height */
.kb-section header { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: .75rem; align-self: start; }
.kb-section h2 { margin: 0; font-size: var(--card-title-size); font-weight: var(--card-title-weight); }
.kb-section header p { margin: .15rem 0 0; font-size: var(--card-sub-size); color: var(--muted); }
.kb-section ul { list-style: none; margin: 0; padding: 0; }
.kb-section li a { display: block; padding: .55rem .6rem; margin: 0 -.6rem; border-radius: 8px; color: var(--text); }
.kb-section li a:hover { background: var(--surface-2); text-decoration: none; }
.kb-section li strong { display: block; font-weight: 600; font-size: .92rem; color: var(--brand); }
.kb-section li span { display: block; font-size: .82rem; color: var(--muted); }

.kb-layout { display: grid; grid-template-columns: 230px minmax(0, 760px) 220px; gap: 2rem; align-items: start; justify-content: center; }
.kb-nav, .kb-toc { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; font-size: .87rem; }
.kb-nav a, .kb-toc a { display: block; padding: .3rem .6rem; border-radius: 7px; color: var(--text-2); }
.kb-nav a:hover, .kb-toc a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.kb-nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.kb-toc a.sub { padding-left: 1.3rem; font-size: .83rem; }
.kb-nav-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); margin: 1rem .6rem .3rem; }
.kb-nav-group:first-of-type { margin-top: 0; }
.kb-article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem 2.4rem; min-width: 0; }
.kb-crumbs { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }
.kb-article > h1 { font-size: 1.8rem; letter-spacing: -.01em; }
.kb-lead { font-size: 1.05rem; color: var(--text-2); margin-bottom: 1.25rem; }
.kb-body { font-size: .97rem; line-height: 1.75; color: var(--text-2); }
.kb-body h2 { font-size: 1.25rem; margin: 2.2rem 0 .75rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--heading); scroll-margin-top: 80px; }
.kb-body h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; color: var(--heading); scroll-margin-top: 80px; }
.kb-body h2 .anchor, .kb-body h3 .anchor { float: left; margin-left: -1.1rem; width: 1.1rem; color: var(--gray-300); opacity: 0; font-weight: 400; }
.kb-body h2:hover .anchor, .kb-body h3:hover .anchor { opacity: 1; }
.kb-body ul, .kb-body ol { padding-left: 1.4rem; }
.kb-body li { margin: .25rem 0; }
.kb-body strong { color: var(--text); }
.kb-body code { font-size: .85em; }
.kb-body table { width: 100%; margin: 1rem 0; border: 1px solid var(--border); border-radius: 8px; font-size: .9rem; }
.kb-body th { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--text); }
.kb-body blockquote { margin: 1.2rem 0; padding: .8rem 1rem; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--gray-300); color: var(--text-2); }
.kb-body blockquote p:last-child { margin-bottom: 0; }
.kb-body .callout-tip { background: var(--ok-soft); border-left-color: #22c55e; }
.kb-body .callout-note { background: var(--brand-soft); border-left-color: var(--brand); }
.kb-body .callout-important { background: var(--warn-soft); border-left-color: #f59e0b; }
.kb-body .callout-admins { background: var(--surface-2); border-left-color: var(--gray-500); }
.kb-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.kb-pager a { display: block; flex: 1; max-width: 48%; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
.kb-pager a:hover { border-color: var(--brand); text-decoration: none; }
.kb-pager small { display: block; color: var(--muted); }
.kb-updated { margin-top: 1rem; font-size: .8rem; color: var(--muted); }
@media (max-width: 1200px) { .kb-layout { grid-template-columns: 210px minmax(0, 1fr); } .kb-toc { display: none; } }
@media (max-width: 800px) { .kb-layout { grid-template-columns: 1fr; } .kb-nav { position: static; max-height: none; } .kb-article { padding: 1.25rem; } }

/* ================= 21. Later additions and overrides ================= */
/* Card bottoms (user, 2026-10-02; made the one standard 2026-10-04): the last thing in a pane or card
   sits as far from its bottom edge as the card's top and side padding (--card-pad), whatever it is — a
   list, a table, a post or padded text. Padded bodies use --card-pad on every side, and the last element
   inside (and the last one inside that, e.g. a paragraph in .rich or the last row of a <dl>) keeps no
   bottom margin of its own, so no pane adds its own bottom spacing. Footers (.section-footer,
   .item-card-foot) have their own band. */
.section-body.pad > :last-child, .card-body.pad > :last-child, .card:not(.panel) > :last-child,
.section-body.pad > :last-child > :last-child, .card-body.pad > :last-child > :last-child, .card:not(.panel) > :last-child > :last-child { margin-bottom: 0; }
/* …and the same at the top: the first element keeps no top margin, so top and bottom match. */
.section-body.pad > :first-child, .card-body.pad > :first-child, .card:not(.panel) > :first-child,
.section-body.pad > :first-child > :first-child, .card-body.pad > :first-child > :first-child, .card:not(.panel) > :first-child > :first-child { margin-top: 0; }
.section > .list:last-child > li:last-child,
.card > .list:last-child > li:last-child,
.section-body:last-child > .list:last-child > li:last-child,
.card-body:last-child > .list:last-child > li:last-child { padding-bottom: var(--card-pad); }
.section > .table-wrap:last-child table > :last-child > tr:last-child > td,
.card > .table-wrap:last-child table > :last-child > tr:last-child > td,
.section-body:last-child > .table-wrap:last-child table > :last-child > tr:last-child > td,
.card-body:last-child > .table-wrap:last-child table > :last-child > tr:last-child > td { padding-bottom: var(--card-pad); }
.post:last-child { padding-bottom: var(--card-pad); }
/* A story tree (features/_tree) as the last thing in a pane: the same space under its last row */
.section-body > [data-pick-list]:last-child > .pick-tree:last-child,
.section-body > .pick-tree:last-child { padding-bottom: var(--card-pad); }
/* The same for a table placed straight in a pane, the Coverage table (compact rows, inside a
   wrapper, with a hidden "no match" row last), list-style panes and the Gantt chart. */
.section-body:last-child > table:last-child > :last-child > tr:last-child > td { padding-bottom: var(--card-pad); }
/* Tables that run to a pane's edges: the first and last columns line up with the pane's padding.
   Kept low-priority (:where) so tables with their own indents (Coverage tree, Resources breakup) win. */
:where(.section, .card, .section-body:not(.pad), .section-body:not(.pad) > div) > :where(.table-wrap) > table :where(th, td):first-child,
:where(.section-body:not(.pad)) > table :where(th, td):first-child { padding-left: var(--card-pad); }
:where(.section, .card, .section-body:not(.pad), .section-body:not(.pad) > div) > :where(.table-wrap) > table :where(th, td):last-child,
:where(.section-body:not(.pad)) > table :where(th, td):last-child { padding-right: var(--card-pad); }
.section-body .table-wrap:has(> .cov-table):last-child { padding-bottom: calc(var(--card-pad) - .35rem); } /* its rows' own .35rem */
.section-body > .rm-list:last-child > li:last-child,
.ip-item:last-child { padding-bottom: var(--card-pad); }
.section-body > .crit-list:last-child { padding-bottom: calc(var(--card-pad) - .55rem); } /* its rows' own .55rem */
.gantt-card { padding-bottom: .4rem; } /* the last plan row's own spacing makes up the rest */

/* "is / is not" search operator paired with its criterion */
.op-pair { display: inline-flex; }
.op-pair select.op { min-width: 0; width: auto; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background-color: var(--surface-2); font-size: .8rem; padding-left: .55rem; }
.op-pair select:not(.op) { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; }

/* A card's description as its own panel, not just a line of text */
.item-desc {
  position: relative; margin: 0 0 1rem; padding: .7rem .9rem .75rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); border-radius: 10px;
}
.item-desc-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--accent) 75%, var(--text)); margin-bottom: .25rem; }
.item-desc p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.55em * 2); }


.po-search input[type=date] { width: auto; min-width: 0; }
.po-search input[name=attachment] { width: auto; min-width: 200px; }

/* The "open" arrow on cards: the one action in brand colour */

/* Solid "Open" button among the icon actions in a card footer */
.card-go, .acts .card-go { display: inline-grid; place-items: center; width: 32px; height: 30px; min-height: 30px; padding: 0; margin-left: .35rem; color: var(--brand-ink); background: var(--brand); border-radius: 8px; box-shadow: var(--shadow-sm); font-size: .8rem; }
.card-go:hover, .acts .card-go:hover { background: var(--brand-hover); color: var(--brand-ink); }
.card-go .icon, .acts .card-go .icon { width: 16px; height: 16px; }

button.card-go { border: 0; cursor: pointer; }

/* Home: Announcements beside My work (+ My tasks) in the main column */
/* Home zones: a small uppercase heading above each group of panes */
.dash-zone { margin-bottom: .5rem; }
.zone-title { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .7rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.zone-title span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .8rem; color: var(--muted); opacity: .8; }

/* Roadmap filter: checkbox chips that look like the toolbar buttons */
.rm-filter .rm-check { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: .85rem; font-weight: 500; cursor: pointer; }
.rm-filter .rm-check:hover { border-color: var(--brand); }
.rm-filter .rm-check.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.rm-filter .rm-check input { accent-color: var(--brand); margin: 0; }

/* Roadmap grid table */
.rm-table td { vertical-align: middle; }
.rm-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .5rem; vertical-align: -1px; }
.rm-count { font-weight: 500; color: var(--muted); font-size: .8rem; margin-left: .35rem; }
/* Inset shadow draws a coloured left stripe (--plan) without changing the cell width. */
.rm-plan { box-shadow: inset 4px 0 0 var(--plan); padding-left: 1.2rem; }
.rm-plan a { color: var(--text); font-weight: 600; }
.rm-plan a:hover { color: var(--brand); }
.rm-arrow { color: var(--muted); margin: 0 .3rem; }
.rm-pill { display: inline-block; min-width: 1.8rem; padding: .1rem .5rem; border-radius: 999px; background: var(--brand-soft, var(--surface-2)); color: var(--brand); font-weight: 600; text-align: center; font-size: .8rem; }
.rm-pill.zero { background: var(--surface-2); color: var(--muted); }
.rm-table tbody tr:not(.group):hover td { background: var(--surface-2); }
/* Visually hidden but still read by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Admin configuration: one card per settings section */
.settings-group { margin-bottom: 1.25rem; }
.settings-group > p.muted { margin: -.4rem 0 .4rem; font-size: .85rem; }

/* Statistics overview: tiles, status bar, closing figures and grouped quick reports */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .75rem; }
.stat-tile { display: flex; align-items: center; gap: .65rem; padding: var(--card-pad); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-tile .value { font-size: 1.45rem; font-weight: 700; color: var(--heading); line-height: 1.1; }
.stat-tile .label { font-size: .8rem; color: var(--text-2); font-weight: 600; }
.stat-note { margin: .5rem 0 1.25rem; font-size: .8rem; }
.status-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.status-bar span { display: block; height: 100%; }
.status-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: .8rem 0 1.1rem; font-size: .9rem; }
.status-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; }
.close-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.close-figures > div { display: flex; flex-direction: column; gap: .15rem; }
.close-figures .label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.close-figures .value { font-size: 1.2rem; font-weight: 700; color: var(--heading); }
.report-builder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; align-items: end; }
.report-run { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.report-run .check { margin: 0; }
.quick-reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem 1.5rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.quick-reports h3 { margin: 0 0 .55rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.report-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.report-chip { display: inline-flex; align-items: center; min-height: 34px; padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 500; }
.report-chip:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* Feature map (features/_map): tree on the left, details on the right.
   Stacks below 1000px (tablets), with the details under the tree. */
.fm { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); /* the tree gets the room; the detail panel stays readable */ gap: 1.25rem; align-items: start; }
/* Dashboard strip above the map: counts, then the backlog-state split as one stacked bar */
.fm-dash { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: .85rem var(--card-pad); margin-bottom: 1.25rem; }
.section .fm-dash { margin-bottom: 0; } /* inside its pane, the pane's own spacing applies */
.fm-dash-figures { display: flex; gap: .6rem; flex-wrap: wrap; }
.fm-dash-figures div { min-width: 110px; padding: .5rem .8rem; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; }
.fm-dash-figures strong { font-size: 1.3rem; color: var(--heading); line-height: 1.2; }
.fm-dash-figures span { font-size: .74rem; color: var(--muted); }
.fm-dash-states { flex: 1 1 260px; display: flex; flex-direction: column; gap: .5rem; }
.fm-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.fm-stack i.is-done { background: var(--ok); }
.fm-stack i.is-in_sprint { background: var(--warn); }
.fm-stack i.is-backlog { background: var(--border); }
.fm-stack i.is-closed { background: repeating-linear-gradient(45deg, var(--gray-300) 0 3px, transparent 3px 6px); }
.fm-tree { padding: var(--card-pad); }
.fm-tree > .fm-epic:last-of-type, .fm-tree > .fm-epic:last-of-type > .fm-add:last-child { margin-bottom: 0; }
.fm-tree > .fm-epic:last-of-type > .fm-add:last-child { padding-bottom: 0; } /* the hidden "no match" line comes after it, so :last-child can't reach it */
.fm-tools { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.fm-tools input { flex: 1 1 220px; }
.fm-tree details > summary { list-style: none; }
.fm-tree details > summary::-webkit-details-marker { display: none; }
.fm-row { display: flex; align-items: center; gap: .5rem; min-height: 38px; padding: .3rem .55rem; border-radius: 8px; cursor: pointer; }
.fm-row:hover { background: var(--surface-2); }
.fm-row.is-selected { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.fm-chev { flex: none; color: var(--muted); }
details:not([open]) > summary .fm-chev { transform: rotate(-90deg); }
.fm-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: .1rem; color: var(--text); }
/* The name shortens with … so the ID after it always stays in view. */
.fm-name .fm-label { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* long names wrap to a second line, then … */
.fm-name .ref { flex: none; margin-left: .35rem; }
.fm-name:hover { color: var(--brand); text-decoration: none; }
.fm-name .icon { color: var(--muted); }
.fm-meta { display: inline-flex; gap: .3rem; flex: none; }
.fm-progress { flex: none; width: 64px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.fm-progress.wide { width: 160px; }
.fm-progress i { display: block; height: 100%; background: var(--ok); }
.fm-count { flex: none; min-width: 2.6rem; text-align: right; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fm-epic { margin-bottom: .6rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fm-epic > summary { font-size: .95rem; border-radius: 0; background: var(--surface-2); min-height: 46px; }
.fm-epic > summary .fm-name strong { color: var(--heading); }
.fm-epic[open] > summary { border-bottom: 1px solid var(--line); }
/* Backlog levels (<x-level>): a tinted layers tile for epics, a plain folder tile for features and a
   document tile for user stories with a dot — green when done, grey otherwise. .is-sm sits inside text. */
.level { position: relative; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; vertical-align: middle;
  background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.level .icon { width: 14px; height: 14px; }
.level.is-epic { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.level.is-sm { width: 18px; height: 18px; border-radius: 5px; margin-right: .25rem; }
.level.is-sm .icon { width: 11px; height: 11px; }
.level-dot { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); box-shadow: 0 0 0 2px var(--surface); }
.level-dot.is-done { background: var(--ok); }
.level.is-sm .level-dot { width: 7px; height: 7px; right: -2px; bottom: -2px; }
.fm-feature { position: relative; margin: .2rem .4rem 0 1.55rem; } /* levels step in 24px, icon to icon */
.fm-feature > summary { font-weight: 600; font-size: .9rem; } /* type scale for the backlog levels: epic .95rem, feature .9rem, user story .875rem */
.fm-stories { list-style: none; margin: 0 0 .3rem 2.25rem; padding: 0 0 0 .85rem; border-left: 1px solid var(--border); }
.fm-leaf.is-closed .fm-label { color: var(--muted); text-decoration: line-through; }
.fm-flag { flex: none; display: inline-flex; color: var(--danger); }
.fm-flag .icon { width: 13px; height: 13px; }
.fm-leaf { cursor: default; }
.fm-tree [hidden] { display: none !important; } /* rows the filter hides (their display: flex would otherwise win) */
.fm-leaf .fm-name { font-size: .875rem; }
.fm-add { padding: .25rem .55rem; font-size: .8rem; opacity: .75; }
.fm-add:hover { opacity: 1; }
.fm-add-feature { margin: .1rem 0 .4rem 1.3rem; }
.fm-state { flex: none; display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.fm-state.is-done { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-ring); }
.fm-state.is-in_sprint { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-ring); }
.fm-state.is-backlog { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.fm-state.is-closed { background: var(--gray-200); color: var(--muted); text-decoration: line-through; } /* resolved without delivery */
.fm-detail { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; padding: var(--card-pad); }
.fm-read { font-size: .95rem; line-height: 1.6; }
.fm-context { padding: .6rem .8rem; margin-bottom: .5rem; border-radius: 8px; background: var(--surface-2); font-size: .9rem; }
.fm-context > .muted { display: block; font-size: .75rem; margin-bottom: .2rem; }
.fm-context p, .fm-context .rich > :last-child { margin-bottom: 0; }
.fm-howto { list-style: none; margin: 1.2rem auto 0; padding: 0; max-width: 420px; text-align: left; display: flex; flex-direction: column; gap: .6rem; font-size: .88rem; }
.fm-howto li { display: flex; align-items: center; gap: .6rem; }
.fm-detail h2 { margin: .1rem 0 .5rem; font-size: 1.1rem; }
.fm-detail h3 { margin: 1.3rem calc(-1 * var(--card-pad)) .7rem; padding: .9rem var(--card-pad) 0; border-top: 1px solid var(--line); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } /* each section under a divider */
.fm-detail h4.fm-sub { margin: .8rem 0 .2rem; font-size: .8rem; font-weight: 650; color: var(--heading); }
.fm-detail .fm-read p { margin-bottom: .55rem; }
.fm-none { color: var(--gray-400); }
.fm-crumbs { font-size: .8rem; color: var(--muted); }
.feature-head h1 { margin: .3rem 0 .6rem; font-size: 1.2rem; line-height: 1.3; }
.feature-head h1 .ref { vertical-align: 3px; margin-left: .2rem; }
.feature-head .kv { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.feature-flag { display: flex; align-items: center; gap: .4rem; margin: .2rem 0 0; color: var(--danger); font-size: .88rem; font-weight: 500; }
/* Story labels: small coloured chips (colour from the name) that link to the filtered map */
.label-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .5rem; }
.label-chip { display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.6;
  color: var(--label); background: color-mix(in srgb, var(--label) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--label) 35%, transparent); white-space: nowrap; }
a.label-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--label) 20%, var(--surface)); }
.ready-check { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 0; font-size: .84rem; color: var(--warn); }
.ready-check.is-met { color: var(--ok); }
.ready-check .icon { width: 15px; height: 15px; }
/* Definition of Ready gaps as a notification-style alert (stories/_readiness): icon, message, the gaps as chips */
.ready-alert { display: flex; align-items: flex-start; gap: .6rem; margin: .8rem 0 0; line-height: 1.55; }
.ready-alert > .icon { flex: none; width: 18px; height: 18px; margin-top: .1rem; }
.ready-gaps { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-left: .2rem; vertical-align: middle; }
.ready-gap { display: inline-block; padding: .05rem .55rem; border-radius: 999px; background: var(--surface); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-ring); font-size: .8rem; font-weight: 600; text-decoration: none; }
a.ready-gap:hover { background: var(--warn); color: #fff; }
/* Acceptance criteria checklist (stories.show, #criteria) */
.crit-list { list-style: none; margin: 0; padding: .3rem 0; }
.crit { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem var(--card-pad); border-bottom: 1px solid var(--line); }
.crit:last-child { border-bottom: 0; }
.crit form { display: flex; }
.crit-box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; padding: 0; border-radius: 6px; border: 1.5px solid var(--border); background: var(--surface); color: transparent; cursor: pointer; }
span.crit-box { cursor: default; }
button.crit-box:hover { border-color: var(--ok); color: var(--ok-ring); }
.crit.is-met .crit-box { background: var(--ok); border-color: var(--ok); color: #fff; }
.crit-box .icon { width: 14px; height: 14px; }
.crit-text { flex: 1; min-width: 0; color: var(--text); }
.crit.is-met .crit-text { color: var(--text-2); }
.crit-text small { display: block; font-size: .75rem; }
.crit-edit { margin-top: .2rem; font-size: .78rem; }
.crit-edit > summary { display: inline; cursor: pointer; color: var(--muted); list-style: none; }
.crit-edit > summary::-webkit-details-marker { display: none; }
.crit-edit > summary:hover { color: var(--brand); }
.crit-form { display: flex; gap: .4rem; align-items: center; margin-top: .35rem; }
.crit-form input[type=text] { flex: 1; }
/* Files on a user story */
.file-list { list-style: none; margin: 0; padding: .3rem 0; }
.file-list li { display: flex; align-items: center; gap: .55rem; padding: .5rem var(--card-pad); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.file-list li:last-child { border-bottom: 0; }
.file-list li > .icon { color: var(--muted); }
.file-list .muted { font-size: .78rem; }
.file-list .acts { margin-left: auto; }
/* The Attach form under a list (partials/files: features, epics, registers, entries). */
.file-attach { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .4rem 0 .2rem; }
.file-attach input[type=file] { width: auto; flex: 1 1 14rem; min-width: 0; }
/* Defects */
.defect-status.is-open { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-ring); }
.defect-status.is-in_progress { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-ring); }
.defect-status.is-fixed { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-ring); }
.defect-status.is-verified, .defect-status.is-closed { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-ring); }
.defect-status.is-rejected { color: var(--muted); text-decoration: line-through; }
/* Testing */
.test-state.is-passed { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-ring); }
.test-state.is-failed { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-ring); }
.test-state.is-blocked { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-ring); }
.test-state.is-in_test { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-ring); }
.test-stack i.is-passed { background: var(--ok); } .test-stack i.is-failed { background: var(--danger); } .test-stack i.is-blocked { background: var(--warn); }
.test-stack i.is-in_test { background: var(--brand); } .test-stack i.is-not_run { background: var(--border); }
.test-legend { justify-content: flex-start; margin-top: .5rem; }
.tester-pick select { width: 11rem; padding-top: .3rem; padding-bottom: .3rem; font-size: .8rem; }
.test-check.is-passed { border-left: 4px solid var(--ok); } .test-check.is-failed { border-left: 4px solid var(--danger); } .test-check.is-blocked { border-left: 4px solid var(--warn); }
.test-check-body { padding: 1rem var(--card-pad); }
.test-criterion { font-size: 1rem; color: var(--text); margin: 0 0 .6rem; }
.test-steps { margin: .3rem 0 .8rem; }
.test-result { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .4rem 0; font-size: .85rem; }
.test-note { margin: .2rem 0 .6rem; padding: .5rem .7rem; border-radius: 8px; background: var(--surface-2); font-size: .88rem; }
.test-record { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.test-record input[type=text] { flex: 1 1 280px; }
.test-record input[type=file] { flex: 0 1 220px; font-size: .8rem; }
.test-buttons { display: inline-flex; gap: .35rem; }
.test-pass { color: var(--ok); } .test-fail { color: var(--danger); }
.fm-badges { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem; }
.fm-bar { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }
.fm-facts { display: grid; grid-template-columns: 9.5rem 1fr; margin: .2rem 0 .6rem; font-size: .9rem; }
.fm-facts dt, .fm-facts dd { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.fm-facts dt { color: var(--muted); }
.fm-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.fm-facts dd > a { overflow-wrap: anywhere; }
.fm-facts dd { overflow-wrap: anywhere; }
.actor-chip { display: inline-flex; padding: .05rem .5rem; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; line-height: 1.6; background: var(--surface); }
.story-feature-name { margin: .1rem 0 .35rem; font-size: 1.1rem; }
/* Story page (redesigned 2026-10-04): the story and its feature in the centre, every attribute in a Details pane on the right that stays in view */
.story-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(270px, 1fr); gap: 1.25rem; align-items: start; } /* Details pane = a quarter */
.story-main { min-width: 0; }
.story-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(54px + 1rem); max-height: calc(100vh - 54px - 2rem); overflow-y: auto; border-radius: var(--radius, 12px); } /* below the sticky top bar; scrolls on its own when taller than the window */
@media (max-width: 1000px) { .story-layout { grid-template-columns: 1fr; } .story-aside { grid-column: auto; grid-row: auto; position: static; max-height: none; overflow: visible; order: 2; margin-top: 1.25rem; } }
/* The story itself: trail, a larger title, and its Definition set off as a statement */
.story-trail { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.story-trail a { color: inherit; }
.story-trail a:hover { color: var(--brand); }
.story-title { margin: .35rem 0 .55rem; font-size: 1.45rem; line-height: 1.3; }
/* Definition: a plain label, then "As a / I want / So that" as labelled lines (or readable text) */
.story-def { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.story-def-label { margin: 0 0 .55rem; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.story-parts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1rem; margin: 0; font-size: 1.02rem; line-height: 1.55; }
.story-parts dt { padding-top: .2rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.story-parts dd { margin: 0; }
.story-parts dd p { margin: 0; }
.story-def-text { max-width: 75ch; font-size: .98rem; line-height: 1.65; }
.story-parts + .story-def-text { margin-top: .8rem; }
.story-def-text > :last-child { margin-bottom: 0; }
/* "Part of feature": the context, quieter than the story */
.story-feature .section-body { background: var(--surface-2); }
.story-feature-files { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .85rem; }
.story-feature-files > .muted { margin-right: .2rem; }
/* Right pane: Story · Feature · Epic cards that fold, label and value side by side */
.story-aside { display: grid; gap: .9rem; }
.side-card { margin: 0; }
.side-card .card-subtitle { font-family: var(--mono, ui-monospace, monospace); font-size: .72rem; }
.side-card .side-facts { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .55rem .6rem; padding: var(--card-pad); } /* rows spaced by gap, so nothing trails below the last one */
.side-card .side-facts dt { padding-top: .1rem; text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; }
.side-card .side-facts dd { margin: 0; font-size: .86rem; }
.side-facts { margin: 0; }
.side-facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
.side-facts dd { margin: .2rem 0 .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 500; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.side-facts dd:last-child { margin-bottom: 0; }
.side-facts dd > .icon { width: 15px; height: 15px; color: var(--muted); }
.fm-list { list-style: none; margin: 0; padding: 0; }
.fm-list li { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.fm-list li > a { flex: 1; }
/* The detail panel's header row: the item's type and ID on the left, its buttons on the right */
.fm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--card-pad); padding: var(--card-pad); border-bottom: 1px solid var(--border); } /* a header track like every card's */
.fm-head .fm-crumbs { margin: 0; }
.fm-overview { text-align: center; padding: 1rem 0; }
.fm-overview .icon-box { margin: 0 auto .6rem; }
.fm-legend { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 1000px) {
  .fm { grid-template-columns: 1fr; }
  .fm-detail { position: static; }
  .fm-detail.has-item { order: -1; } /* a picked item's details come first on tablets */
}
@media (max-width: 600px) {
  .fm-progress { display: none; }
  .fm-meta { display: none; }
  .fm-feature { margin-left: 1rem; }
  .fm-stories { margin-left: 1.7rem; }
}

/* Features coverage table: clear three-level hierarchy.
   Epic = largest, on a tinted band; feature = medium, one step in with its folder icon;
   user story = body text, one more step in with its bookmark icon. */
.cov-table td { vertical-align: middle; padding-top: .35rem; padding-bottom: .35rem; } /* compact rows: user stories ~31px */
.cov-line { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
@media (max-width: 700px) { .cov-line .cov-title { flex: 1 1 10rem; min-width: 0; } } /* on phones a long name wraps beside its icons, not below them */
.cov-line .acts { margin-left: auto; margin-block: -.3rem; } /* the row buttons don't set the row's height */
.fold-toggle { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.fold-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.fold-toggle .icon { width: 14px; height: 14px; }
.fold-toggle[aria-expanded="false"] .icon { transform: rotate(-90deg); }
tr.is-folded { display: none; }
[data-fold-table] > .pick-search { border-bottom: 1px solid var(--line); }
.cov-epic td { background: var(--group); border-top: 1px solid var(--border); padding: .55rem var(--card-pad); }
.cov-epic .cov-title { font-size: .95rem; font-weight: 700; color: var(--heading); }
.cov-feature td { padding: .4rem var(--card-pad) .4rem calc(var(--card-pad) + 1.6rem); background: var(--surface); } /* levels step in 24px, icon to icon */
.cov-feature .cov-title { font-size: .9rem; font-weight: 600; color: var(--text); }
.cov-feature .icon { color: var(--muted); }
.cov-story td:first-child { padding-left: calc(var(--card-pad) + 5.2rem); } /* under the feature's icon, plus one step */
.cov-story td:first-child > a:not(.doc-pill) { font-size: .875rem; font-weight: 500; color: var(--text); }
.cov-story td:first-child > a:not(.doc-pill):hover { color: var(--brand); }
@media (max-width: 700px) { .cov-feature td { padding-left: 1.4rem; } .cov-story td:first-child { padding-left: 4.7rem; } }

/* Permanent IDs (x-ref): small monospace pill after the name; click copies it (unless is-static) */
.ref { flex: none; display: inline-flex; align-items: center; padding: .05rem .4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--muted); font: 600 .72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; cursor: copy; white-space: nowrap; }
.ref:hover { color: var(--brand); border-color: var(--brand-ring); }
.ref.is-copied { color: var(--ok); border-color: var(--ok-ring); }
.ref.is-copied::after { content: " ✓"; }
.ref.is-static { cursor: inherit; } /* inside a link or label: no copy, hover follows the parent */
.ref.is-static:hover { color: var(--muted); border-color: var(--border); }

/* Delivery (releases and sprints): progress bar, sprint state chips, release timeline */
.dl-progress { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--muted); margin: .4rem 0 .6rem; }
.dl-bar { flex: 1 1 auto; max-width: 220px; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.dl-bar i { display: block; height: 100%; background: var(--ok); }
td .dl-bar { display: inline-block; width: 70px; vertical-align: middle; } /* progress in a table cell (Sprints table) */
.dl-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.dl-chip { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); }
a.dl-chip:hover { text-decoration: none; border-color: var(--brand); }
.dl-chip.is-active { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-ring); }
.dl-chip.is-completed { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-ring); }
.dl-chip.is-cancelled { text-decoration: line-through; }
.select-sm { padding: .3rem 2.2rem .3rem .65rem; font-size: .8rem; width: auto; background-position: right .55rem center; }
.dl-timeline { padding: 1rem 1.2rem; overflow: hidden; }
.dl-months { position: relative; height: 1.6rem; margin-left: 220px; border-bottom: 1px solid var(--border); }
.dl-months span { position: absolute; top: 0; font-size: .72rem; color: var(--muted); padding-left: .3rem; border-left: 1px solid var(--line); height: 100%; }
.dl-today { position: absolute; top: 0; bottom: -9999px; border-left: 2px solid var(--danger); opacity: .5; pointer-events: none; }
.dl-row { display: flex; align-items: center; min-height: 46px; border-bottom: 1px solid var(--line); }
.dl-label { flex: none; width: 220px; padding-right: .8rem; display: flex; flex-direction: column; font-size: .88rem; }
.dl-label .muted { font-size: .75rem; }
.dl-track { position: relative; flex: 1; height: 30px; }
.dl-months, .dl-track { overflow: visible; }
.dl-sprint { position: absolute; top: 4px; height: 22px; padding: 0 .4rem; border-radius: 6px; font-size: .72rem; font-weight: 600; line-height: 22px; color: #fff; background: var(--gray-400, #9ca3af); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-sprint:hover { text-decoration: none; filter: brightness(1.08); color: #fff; }
.dl-sprint.is-active { background: var(--brand); }
.dl-sprint.is-completed { background: var(--ok); }
.dl-sprint.is-cancelled { background: var(--gray-300); color: var(--muted); }
.dl-diamond { position: absolute; top: 8px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: var(--danger); border-radius: 2px; }
.dl-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; font-size: .78rem; color: var(--muted); }
.dl-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.dl-legend .dl-sprint, .dl-legend .dl-diamond { position: static; display: inline-block; width: 18px; height: 10px; margin: 0; padding: 0; }
.dl-legend .dl-diamond { width: 9px; height: 9px; }
@media (max-width: 700px) { .dl-label { width: 120px; } .dl-months { margin-left: 120px; } }

/* Sprint board (sprints.show) */
.sb-facts { margin: .8rem 0 0; }
.sb-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
/* Sprint page: the Sprint pane with its Effort pane on the right (one column on narrow screens) */
.sprint-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; } /* the same gap as between panes */
.sprint-main, .sprint-side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.sprint-main > .section { margin-bottom: 0; }
.sprint-side > .section { margin-bottom: 0; }
/* Burndown (sprints/_burndown): inline SVG — ideal dashed, actual solid, weekends shaded, today marked */
.burndown { display: block; width: 100%; height: auto; }
.burndown .bd-axis { stroke: var(--border); stroke-width: 1; }
.burndown .bd-weekend { fill: var(--surface-2); }
.burndown .bd-holiday { fill: var(--warn-soft); }
.burndown .bd-ideal { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
.burndown .bd-actual { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.burndown .bd-dot { fill: var(--brand); }
.burndown .bd-today { stroke: var(--warn); stroke-width: 1.5; }
.burndown .bd-label { fill: var(--muted); font-size: 9px; }
.bd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-top: .4rem; font-size: .75rem; color: var(--muted); }
.bd-key { display: inline-block; width: 14px; height: 0; margin-right: -.45rem; border-top: 2px solid var(--brand); vertical-align: middle; }
.bd-key.is-ideal { border-top: 1.5px dashed var(--muted); }
.bd-key.is-today { width: 0; height: 10px; border-top: 0; border-left: 2px solid var(--warn); }
@media (max-width: 1100px) { .sprint-top { grid-template-columns: 1fr; } }
.sb-effort-list { margin: 0 0 .7rem; display: grid; gap: .45rem; }
.sb-effort-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .875rem; }
.sb-effort-list dt { color: var(--muted); }
.sb-effort-list dd { margin: 0; font-weight: 600; color: var(--heading); text-align: right; }
.sb-effort-list dd small { display: block; font-weight: 500; font-size: .75rem; color: var(--muted); }
.sb-effort-list .is-balance { padding-top: .45rem; border-top: 1px solid var(--border); }
.sb-effort-list .is-balance dd { font-size: 1.05rem; }
.sb-effort-list .is-over dd { color: var(--danger); }
.sb-effort-note { margin: .6rem 0 0; font-size: .78rem; }
.sb-figures > div { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.sb-figures strong { font-size: 1.35rem; line-height: 1.1; color: var(--heading); }
.sb-figures strong small { font-size: .8rem; font-weight: 500; color: var(--muted); }
.sb-figures span { font-size: .75rem; color: var(--muted); }
.sb-figures .dl-bar { display: block; flex: none; max-width: none; margin-top: .3rem; }
@media (max-width: 700px) { .sb-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-title { display: flex; align-items: center; gap: .7rem; }
.sb-title h1 { margin: 0; font-size: 1.2rem; }
.sb-goal { font-size: 1.02rem; margin: .5rem 0 .3rem; color: var(--heading); }
.sb-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; align-items: start; }
.sb-stories .sb-board { margin: 0; padding: var(--card-pad); align-items: stretch; } /* the board inside the User stories pane (Board | Scope): even padding, columns of one height */
.sb-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem; min-height: 160px; }
.sb-col h2 { display: flex; justify-content: space-between; align-items: baseline; margin: .1rem .2rem .7rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sb-col h2 span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sb-col.is-in_progress { border-top: 3px solid var(--brand); }
.sb-col.is-in_review { border-top: 3px solid var(--warn); }
.sb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .4rem; }
.sb-who { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--text-2); }
.sb-who .icon { width: 13px; height: 13px; color: var(--muted); }
.sb-who.is-met, .sb-who.is-met .icon { color: var(--ok); }
.sb-col.is-done { border-top: 3px solid var(--ok); }
.sb-col.is-todo { border-top: 3px solid var(--gray-300); }
.sb-col.is-doing { border-top: 3px solid var(--brand); }
.sb-col.is-waiting { border-top: 3px solid var(--warn); }
.sb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .65rem .75rem; margin-bottom: .55rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .25rem; }
.sb-card-top { display: flex; justify-content: space-between; align-items: center; }
.sb-points { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .75rem; font-weight: 700; }
.sb-name { font-weight: 600; color: var(--text); }
.sb-path { font-size: .75rem; color: var(--muted); }
.sb-moves { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .3rem; }
.sb-moves form { display: inline; }
.sb-empty { color: var(--muted); font-size: .85rem; text-align: center; padding: 1rem 0; margin: 0; }
/* Story trees (Backlog, sprint "Add from the backlog"…): target release › epic › feature › story
   (public/js/app.js, [data-pick-list]) */
.pick-search { display: flex; align-items: center; gap: .5rem; padding: .7rem var(--card-pad); border-bottom: 1px solid var(--line); color: var(--muted); }
.pick-search input { flex: 1; border: 0; box-shadow: none; padding: .3rem 0; background: transparent; }
.pick-search input:focus { outline: none; box-shadow: none; }
.pick-group > summary { display: flex; align-items: center; gap: .55rem; padding: .55rem var(--card-pad); cursor: pointer; list-style: none; border-bottom: 1px solid var(--line); }
.pick-group > summary::-webkit-details-marker { display: none; }
.pick-group > summary .muted { margin-left: auto; font-size: .78rem; white-space: nowrap; }
.pick-group.is-release > summary { background: var(--group); position: sticky; top: 0; z-index: 2; }
.pick-group.is-epic > summary { padding-left: 2.2rem; background: var(--surface); }
.pick-group.is-epic > summary:hover { background: var(--surface-2); }
.pick-group.is-top > summary { padding-left: var(--card-pad); } /* epic as the top level (no target release above it) */
.pick-group.is-top .pick-rows li { padding-left: 4.95rem; }
.pick-group.is-feature > summary { padding-left: 3.7rem; background: var(--surface); } /* one step in from its epic */
.pick-group.is-feature > summary:hover { background: var(--surface-2); }
.pick-group.is-top .pick-group.is-feature > summary { padding-left: 2.6rem; }
.pick-feature-name { font-size: .9rem; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-epic-name { font-size: .95rem; font-weight: 600; color: var(--heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-chev { flex: none; width: 14px; height: 14px; color: var(--muted); }
.pick-group:not([open]) > summary .pick-chev { transform: rotate(-90deg); }
.pick-rows { list-style: none; margin: 0; padding: 0; }
.pick-rows li { display: flex; align-items: center; gap: .7rem; padding: .45rem var(--card-pad) .45rem 6.05rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-rows li:hover { background: var(--surface-2); }
.pick-rows li.is-picked { background: var(--brand-soft); }
.pick-name { flex: 1; min-width: 0; font-size: .875rem; font-weight: 500; }
.pick-name .muted { font-size: .76rem; font-weight: 400; }
.pick-name .badge-flag { padding: .05rem .3rem; }
.pick-pts { flex: none; min-width: 3.5rem; text-align: right; font-size: .8rem; color: var(--text-2); }
.pick-who { flex: none; width: 9rem; font-size: .8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-name > a { color: var(--text); }
.pick-name > a:hover { color: var(--brand); }
.pick-tree .pick-none { padding: 1.5rem; }
.pick-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem var(--card-pad); border-top: 1px solid var(--border); background: var(--surface-2); font-size: .88rem; color: var(--text-2); }
.pick-foot .sev-high { font-weight: 600; }
.pick-foot.is-inline { position: static; padding: 0; border: 0; background: none; }
.pick-target { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 700px) { .pick-group.is-epic > summary { padding-left: 1.4rem; } .pick-group.is-feature > summary { padding-left: 2.4rem; } .pick-rows li { padding-left: 3.4rem; } }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (max-width: 1200px) { .sb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sb-board { grid-template-columns: 1fr; } }

/* Your profile */
.profile-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.profile-avatar { width: 56px; height: 56px; font-size: 1.4rem; flex: none; }
.profile-id { flex: 1 1 240px; min-width: 0; }
.profile-id h1 { margin: 0; font-size: 1.2rem; }
.profile-id p { margin: .15rem 0 0; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1.25rem; align-items: start; }
.profile-grid .card { margin-bottom: 0; }
.profile-note { margin: -.3rem 0 .4rem; font-size: .85rem; }

/* Roadmap: the actual window (from linked sprints and releases) as a thin solid
   bar under the plan's aspirational bar; red when it ends later than planned. */
.g-actual { position: absolute; top: 40px; height: 5px; border-radius: 3px; background: var(--bar); box-shadow: 0 0 0 1px var(--surface); }
.g-actual.is-late { background: var(--danger); }
.lg-actual { display: inline-block; width: 22px; height: 5px; border-radius: 3px; background: var(--brand); }

/* Workspace form (admin/workspaces/form): section index on the left, one card
   per section, a save bar that stays in view. Stacks on tablets. */
.rf-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.rf-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: .15rem; }
.rf-nav a { padding: .45rem .7rem; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: .9rem; }
.rf-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.rf-main { min-width: 0; max-width: 900px; }
.rf-card { padding: var(--card-pad); scroll-margin-top: 76px; }
.rf-sub { margin: 1rem 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rf-card > header { margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.rf-card > header:has(> .section-actions) { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } /* its buttons on the right */
.rf-card > header h2 { margin: 0; font-size: var(--card-title-size); font-weight: var(--card-title-weight); }
.rf-card > header p { margin: .15rem 0 0; color: var(--muted); font-size: var(--card-sub-size); }
.rf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.rf-grid > * { min-width: 0; }
.rf-full { grid-column: 1 / -1; }
.rf-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .6rem 1.25rem; }
.rf-checks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rf-card > .check, .rf-card > div > .check { margin-bottom: .8rem; }
/* Quick message: floating round button (bottom right) and its popup. */
.quick-message-btn {
  position: fixed; right: 1.5rem; bottom: 4.25rem; z-index: 40; /* above the footer's version and build */ display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow);
}
.quick-message-btn:hover { background: var(--brand-hover); }
.quick-message-btn .icon { width: 22px; height: 22px; }
.quick-message-btn .qm-close, .quick-message-btn.is-open .qm-open { display: none; }
.quick-message-btn.is-open .qm-close { display: grid; }
/* The panel: anchored above the button on the right, not modal, so the page stays usable.
   It slides in gently (the one place besides the sidebar that moves; off for reduced motion). */
.quick-message {
  position: fixed; inset: auto 1.5rem calc(4.25rem + 64px) auto; margin: 0; z-index: 45;
  width: min(420px, calc(100vw - 2rem)); max-height: calc(100vh - 4.25rem - 64px - 1.5rem); overflow: auto;
  padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
}
.quick-message[open] { animation: qm-in .2s ease-out; }
@keyframes qm-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .quick-message[open] { animation: none; } }
@media (max-width: 600px) { .quick-message { inset: auto .5rem calc(4.25rem + 64px) .5rem; width: auto; } }
.quick-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem .75rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.quick-head h2 { margin: 0; font-size: .95rem; flex: 1; }
.quick-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }
.quick-badge .icon { width: 15px; height: 15px; }
.quick-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.quick-x:hover { background: var(--surface-2); color: var(--text); }
#quick-message-body { padding: .9rem 1rem 1rem; }
.quick-form { display: flex; flex-direction: column; gap: .7rem; }
.quick-form textarea { min-height: 7rem; }
.quick-field label { display: block; font-weight: 600; font-size: .8rem; color: var(--text-2); margin-bottom: .25rem; }
.quick-field input[type=text], .quick-field textarea { width: 100%; }
.quick-full { margin-left: auto; font-size: .85rem; }
.quick-sent p { display: flex; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.quick-sent .icon { color: var(--ok); }
@media print { .quick-message-btn { display: none; } }
.rf-divider { border: 0; border-top: 1px solid var(--border); margin: 1.75rem 0 1.25rem; }
.rf-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.rf-danger > header h2 { color: var(--danger); }
.clear-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: .6rem 1.25rem; margin: 1rem 0; }
.clear-area { align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.clear-numbering { margin: 0 0 1rem; background: var(--surface-2); }
.clear-area input { margin-top: .2rem; }
.clear-area .muted { font-size: .85rem; }
.rf-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .5rem; padding: .8rem 1rem; margin: 0 0 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .rf-layout { grid-template-columns: 1fr; }
  .rf-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .rf-grid, .rf-checks.two { grid-template-columns: 1fr; }
}

/* Pick-or-type chips (roadmap plan form): existing values to click */
.pick-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.pick-chips:empty { display: none; }
.pick-chip { padding: .25rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
.pick-chip:hover { border-color: var(--brand); color: var(--brand); }
.pick-chip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; } /* matches the field's current value */
.backlog-filter { justify-content: flex-end; }

/* Sprint page: Resources summary table */
.alloc-table td { vertical-align: middle; }
.alloc-table tfoot td { border-top: 2px solid var(--border); background: var(--surface-2); }

/* Register grid view */
.reg-table td { vertical-align: top; }
.reg-desc { white-space: normal; }
.reg-desc .muted { font-size: .8rem; margin-top: .2rem; }
.reg-impact { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--impact); }
.reg-impact::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--impact); }

/* Register table: expandable tracking rows */
.reg-toggle { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; }
.reg-toggle:hover { border-color: var(--brand); color: var(--brand); }
.reg-toggle .icon { width: 14px; height: 14px; }
.reg-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.reg-track > td { background: var(--surface-2); border-top: 0; }
.reg-track-box { display: flex; flex-direction: column; gap: .35rem; padding: .2rem 0 .3rem; font-size: .88rem; }
.reg-update { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.reg-update .icon { color: var(--brand); }
.reg-update form { display: inline; }
.reg-track-add { display: flex; gap: .4rem; margin-top: .3rem; max-width: 640px; }

/* Register card: total impact value */
.reg-total { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: 0 0 .7rem; padding: .55rem .75rem; border-radius: 8px; background: var(--surface-2); }
.reg-total-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.reg-total strong { font-size: 1.15rem; color: var(--heading); }

/* Roadmap plan page (roadmap/show) */
.rm-hero { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: var(--card-pad) 1.25rem var(--card-pad) 1.5rem; margin-bottom: 1.25rem; border-left: 6px solid var(--plan, var(--brand)); }
.section .rm-hero { margin-bottom: 0; } /* inside its pane, the pane's own spacing applies */
.rm-hero h1 { margin: .15rem 0 .5rem; font-size: 1.2rem; }
.rm-crumb { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rm-badges { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rm-counts { display: flex; gap: .6rem; }
.rm-counts > div { min-width: 92px; padding: .55rem .8rem; border-radius: 10px; background: var(--surface-2); text-align: center; }
.rm-counts strong { display: block; font-size: 1.35rem; color: var(--heading); line-height: 1.2; }
.rm-counts strong small { font-size: .85rem; color: var(--muted); font-weight: 500; }
.rm-counts span { font-size: .75rem; color: var(--muted); }
.rm-dates { padding: 1rem var(--card-pad) var(--card-pad); }
.rm-date-row { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 1rem; margin-bottom: .7rem; }
.rm-date-label { font-weight: 600; }
.rm-date-label small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.rm-track { position: relative; height: 14px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.rm-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.rm-bar.is-target { background: repeating-linear-gradient(45deg, var(--plan, var(--brand)) 0 6px, color-mix(in srgb, var(--plan, var(--brand)) 70%, white) 6px 12px); opacity: .55; }
.rm-bar.is-actual { background: var(--brand); }
.rm-bar.is-late { background: var(--danger); }
.rm-none { position: absolute; inset: 0; display: flex; align-items: center; padding-left: .7rem; font-size: .78rem; color: var(--muted); }
.rm-scale { display: flex; justify-content: space-between; margin-left: calc(190px + 1rem); font-size: .75rem; color: var(--muted); }
.rm-list { list-style: none; margin: 0; padding: 0; }
.rm-list li { display: flex; align-items: center; gap: .6rem; padding: .6rem var(--card-pad); border-top: 1px solid var(--line); }
.rm-list li:first-child { border-top: 0; }
.rm-list li.empty { justify-content: center; color: var(--muted); padding: 1.2rem; }
.rm-list .grow { flex: 1; min-width: 0; }
.rm-list .primary { font-weight: 600; }
.rm-list .secondary { display: block; font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) {
  .rm-date-row { grid-template-columns: 1fr; gap: .35rem; }
  .rm-scale { margin-left: 0; }
}

/* Release page header (releases/show): title line, then the key facts side by side */
.rl-top { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; }
.rl-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rl-title h1 { margin: 0; font-size: 1.2rem; }
.rl-signals { display: inline-flex; align-items: center; gap: .4rem; }
.rl-signals small { color: var(--muted); font-size: .78rem; }
.rl-progress { min-width: 260px; }
.rl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1.25rem; margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.rl-facts dt { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rl-facts dd { margin: .15rem 0 0; font-weight: 500; min-width: 0; }
.rl-facts > div { min-width: 0; }
.rl-facts > .rl-fact-wide { grid-column: span 2; } /* roadmap links can be long (Roadmap › Track) */
@media (max-width: 700px) { .rl-facts > .rl-fact-wide { grid-column: auto; } }
.rl-notes { margin: .8rem 0 0; color: var(--muted); font-size: .9rem; }
.rl-sprints .rl-sprint-progress { flex: none; width: 240px; }
.rl-sprints li.is-muted .primary { color: var(--muted); }
@media (max-width: 720px) { .rl-sprints li { flex-wrap: wrap; } .rl-sprints .rl-sprint-progress { width: 100%; } }

/* Messaging centre (messages/*): mail-client layout — list left, reading pane right */
.mailbox { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1rem; align-items: start; }
.mailbox > .card { margin: 0; }
.mailbox-list { position: sticky; top: 1rem; max-height: calc(100vh - 9rem); display: flex; flex-direction: column; overflow: hidden; }
.mailbox-list-head { display: flex; justify-content: space-between; align-items: baseline; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.mailbox-pages { padding: .5rem 1rem; border-top: 1px solid var(--line); }
.mailbox-pane { min-height: calc(100vh - 9rem); display: flex; flex-direction: column; }
.mailbox-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--muted); padding: 3rem 1rem; }
.mailbox-empty .icon { width: 40px; height: 40px; opacity: .5; }
.msg-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.msg-list li { border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.msg-list li.empty { padding: 1.5rem 1rem; text-align: center; color: var(--muted); border-bottom: 0; }
.msg-list a { display: flex; align-items: flex-start; gap: .7rem; padding: .65rem .9rem; color: inherit; text-decoration: none; }
.msg-list li.msg-period { padding: .45rem .9rem .3rem; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); border-left: 0; } /* Today, Yesterday… */
.msg-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: .78rem; font-weight: 700; color: #fff; background: var(--av, var(--brand)); }
.msg-list a:hover { background: var(--surface-2); }
.msg-list li.is-selected { background: var(--brand-soft); border-left-color: var(--brand); }
.msg-list li.is-unread { border-left-color: var(--brand); }
.msg-main { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.msg-top { display: flex; justify-content: space-between; gap: .75rem; }
.msg-people { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* sender: small */
.msg-when { flex: none; font-size: .75rem; color: var(--muted); }
.msg-subject { display: flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 700; color: var(--heading); min-width: 0; } /* subject: bold */
.msg-subject > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-count { flex: none; font-size: .7rem; font-weight: 500; color: var(--muted); }
.msg-snippet { font-size: .8rem; line-height: 1.35; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* preview: two lines */
.msg-list .is-unread .msg-people { font-weight: 700; color: var(--heading); }
.msg-list .is-closed .msg-main { opacity: .7; }
.msg-list .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }
.msg-pane-head { padding: 1rem 1.2rem .8rem; border-bottom: 1px solid var(--line); }
.msg-pane-title { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.msg-pane-title h1 { flex: 1; margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.msg-back { display: none; }
.msg-who { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; margin: 0; font-size: .9rem; }
.msg-who dt { display: inline; font-size: .72rem; font-weight: 600; text-transform: uppercase; color: var(--muted); margin-right: .35rem; }
.msg-who dd { display: inline-flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; vertical-align: top; }
.msg-who > div { display: flex; align-items: baseline; }
.msg-person { display: inline-flex; flex-direction: column; line-height: 1.3; }
.msg-person small { font-size: .74rem; font-weight: 400; color: var(--muted); }
.msg-closed { margin: .4rem 0 0; font-size: .85rem; }
.msg-name { display: inline-flex; align-items: center; gap: .3rem; }
.msg-torn { display: inline-flex; color: var(--danger); } /* a recipient deleted it (sender's view) */
.msg-thread { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.2rem; background: var(--surface-2); }
/* One message, Outlook-style: a header (avatar, sender, To / Cc, date) that folds it open or closed. */
.msg { border-radius: 10px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); }
.msg.is-mine { border-left-color: var(--brand-ring); }
.msg.is-new { border-left-color: var(--brand); }
.msg-head { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.msg-head::-webkit-details-marker { display: none; }
.msg-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.msg-from { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.msg-from .muted { font-size: .78rem; }
.msg-to { font-size: .78rem; }
.msg-fold { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg[open] .msg-fold { display: none; }
.msg:not([open]) .msg-to { display: none; }
.msg-date { flex: none; font-size: .78rem; white-space: nowrap; }
.msg-body { padding: .2rem 1rem 1rem 3.9rem; }
@media (max-width: 700px) { .msg-body { padding-left: 1rem; } }
.msg-reply { padding: .9rem 1.2rem 1rem; border-top: 1px solid var(--line); }
.msg-reply label { font-weight: 600; display: block; margin-bottom: .4rem; }
.msg-reply .form-actions { margin-top: .6rem; }
@media (max-width: 900px) {
  .mailbox { grid-template-columns: 1fr; }
  .mailbox-list { position: static; max-height: none; }
  .mailbox.has-open .mailbox-list, .mailbox:not(.has-open) .mailbox-pane { display: none; }
  .mailbox-pane { min-height: 0; }
  .msg-back { display: inline-flex; }
}

/* Backlog import with field mapping (features/import-mapped, features/import-mapping): the file's
   columns on the left (which fields each fills), every backlog field on the right with its column */
.map-steps { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .9rem; }
.map-fields { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .7rem; font-size: .9rem; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.25rem; align-items: start; }
.map-layout > .section { margin-bottom: 0; }
.map-source-pane { position: sticky; top: calc(54px + 1rem); max-height: calc(100vh - 54px - 2rem); overflow-y: auto; }
@media (max-width: 1000px) { .map-layout { grid-template-columns: 1fr; } .map-source-pane { position: static; max-height: none; } }
.map-columns { list-style: none; margin: 0; padding: 0; }
.map-columns li { display: flex; flex-direction: column; gap: .3rem; padding: .7rem var(--card-pad); border-bottom: 1px solid var(--line); }
.map-columns li:last-child { border-bottom: 0; }
.map-columns li > strong { color: var(--heading); overflow-wrap: anywhere; }
.map-samples span { display: inline-block; max-width: 100%; margin: 0 .3rem .3rem 0; padding: .05rem .45rem; border-radius: 6px; background: var(--surface-2); font-size: .8rem; color: var(--text-2); overflow-wrap: anywhere; }
.map-fills { font-size: .8rem; color: var(--muted); }
.map-columns li.is-used .map-fills { color: var(--brand); font-weight: 600; }
.map-fields-list { padding: .3rem var(--card-pad) var(--card-pad); }
.map-group { margin: 1rem 0 .3rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.map-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem 1rem; align-items: center; padding: .55rem .6rem; border-radius: 8px; }
.map-field + .map-field { border-top: 1px solid var(--line); }
.map-field label { margin: 0; font-weight: 600; color: var(--heading); }
.map-field label .hint { display: block; margin: .1rem 0 0; font-weight: 400; }
.map-field select { width: 100%; }
.map-field.is-set select { border-color: var(--brand); }
.map-field.is-missing { background: var(--danger-soft); }
.map-field.is-missing select { border-color: var(--danger); }
@media (max-width: 700px) { .map-field { grid-template-columns: 1fr; } }
.map-foot { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; text-align: left; color: var(--text); }
.map-check { padding: .9rem var(--card-pad); margin-bottom: 1.25rem; border-left: 4px solid var(--warn); }
.map-check.is-clean { border-left-color: var(--ok); }
.map-check-figures { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.map-check-figures .muted { flex-basis: 100%; font-size: .8rem; }
.map-check-issues { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .875rem; }
.map-check-issues .error { margin: .1rem 0 0; }
.map-check-warning { color: var(--warn); font-size: .82rem; }
.map-check-ok { display: flex; align-items: center; gap: .35rem; margin: .6rem 0 0; color: var(--ok); font-size: .875rem; }
.map-check-more { margin: .5rem 0 0; font-size: .8rem; }

/* Grids: Coverage (features/_grid, one row per user story) and the Backlog (features/_backlog-grid, by feature) — sortable headings, printable */
/* Sortable grids (app.js [data-sortable]), everywhere alike: a faint ↕ on each sortable heading, ▲ / ▼ on the one in use */
table[data-sortable] th[data-sort] { cursor: pointer; user-select: none; white-space: normal; } /* a long heading wraps rather than running into the next */
table[data-sortable] th[data-sort]:hover { color: var(--brand); }
table[data-sortable] th[data-sort]::after { content: " ↕"; font-size: .75em; opacity: .4; }
table[data-sortable] th[aria-sort="ascending"]::after { content: " ▲"; font-size: .7em; opacity: 1; }
table[data-sortable] th[aria-sort="descending"]::after { content: " ▼"; font-size: .7em; opacity: 1; }
.story-grid td { vertical-align: top; }
/* Icon, ID pill and name on one line; a long name wraps under itself, not under the pill. */
.story-grid .grid-line { display: flex; align-items: flex-start; gap: .4rem; }
.story-grid .grid-line > .level { flex: none; }
.story-grid .grid-line > .ref { font-size: .66rem; padding: 0 .35rem; line-height: 1.5; margin-top: .1rem; min-width: calc(9ch + .7rem); justify-content: center; text-align: center; } /* one width (up to PSF-US999), so the names line up */
.story-grid .grid-line > .level { margin-top: .1rem; }
.story-grid .grid-name { flex: 1; min-width: 0; }
.story-grid .grid-epic { font-weight: 600; color: var(--heading); }
.story-grid .grid-feature { font-weight: 500; color: var(--heading); }
/* Coverage: fixed widths on the headings — Epic, then more room for the feature and the user story; long names wrap in their own column */
.story-grid:not(.backlog-grid) { table-layout: fixed; min-width: 900px; }
.story-grid:not(.backlog-grid) thead th:nth-child(1) { width: 18%; }
.story-grid:not(.backlog-grid) thead th:nth-child(2) { width: 25%; }
.story-grid:not(.backlog-grid) thead th:nth-child(3) { width: 25%; }
/* the same type scale as the trees: epic .95rem, feature .9rem, user story .875rem */
.story-grid .grid-epic .grid-name { font-size: .95rem; }
.story-grid .grid-feature .grid-name { font-size: .9rem; }
.story-grid tr:not(.grid-epic-row) td:not(.grid-epic):not(.grid-feature) .grid-name, .backlog-grid .grid-stories { font-size: .875rem; }
.backlog-grid tr.grid-epic-row .grid-name { font-size: .95rem; }
.story-grid td.is-repeat > * { visibility: hidden; }
.story-grid tr.group-start td { border-top: 2px solid var(--border); }
/* Backlog grid by feature: an epic's own row, then its features with their user stories listed */
.backlog-grid tr.grid-epic-row td { background: var(--group); border-top: 2px solid var(--border); font-weight: 600; color: var(--heading); }
.backlog-grid .grid-feature { padding-left: 2.6rem; } /* one step in from its epic */
.backlog-grid .grid-stories { overflow-wrap: anywhere; }
/* Fixed column widths (set on the headings): long names wrap in their own column instead of widening it. */
.backlog-grid { table-layout: fixed; min-width: 860px; }
.backlog-grid thead th:nth-child(1) { width: 36%; }
.backlog-grid thead th:nth-child(2) { width: 32%; }
.backlog-grid thead th:nth-child(3) { width: 11%; }
.backlog-grid thead th:nth-child(4) { width: 9%; }
.backlog-grid thead th:nth-child(5) { width: 7%; }
.backlog-grid thead th:nth-child(6) { width: 5%; }
.backlog-grid .grid-stories div + div { margin-top: .25rem; }
@media print {
  .pick-search, .pick-foot, .seg { display: none !important; }
  .story-grid th, .story-grid td { font-size: 9pt; padding: .25rem .4rem; }
  .story-grid a { color: inherit; text-decoration: none; }
  .section { box-shadow: none; border: 0; }
}

/* Sprint resource plan (sprints/resources): people × days, weekends greyed; totals on the right and below */
.res-wrap { margin: 0 calc(-1 * var(--card-pad)); } /* the grid runs to the card's edges; its first and last cells keep the side padding */
.res-grid { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.res-grid th, .res-grid td { padding: .3rem .35rem; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.res-grid th { font-size: .7rem; }
.res-grid .res-person, .res-grid tfoot td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 8.5rem; padding-left: var(--card-pad); }
.res-grid thead .res-person, .res-grid tfoot td:first-child { background: var(--surface-2); }
.res-grid .res-person strong { font-weight: 600; }
.res-grid .res-role input { width: 7rem; }
.res-grid .res-rate input { width: 4.2rem; text-align: right; }
.res-grid .res-day { text-align: center; min-width: 2.8rem; padding-left: .15rem; padding-right: .15rem; }
.res-grid th.res-day small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.res-grid .res-day input { width: 2.5rem; padding: .25rem .1rem; text-align: center; -moz-appearance: textfield; }
.res-grid .res-day input::-webkit-inner-spin-button, .res-grid .res-day input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.res-grid .is-weekend { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 4px, transparent 4px, transparent 8px); color: var(--muted); }
.res-grid .has-other input { box-shadow: inset 0 0 0 2px var(--warn-ring); background: var(--warn-soft); }
.res-grid .res-sum { min-width: 4rem; font-weight: 600; background: var(--surface-2); }
.res-grid tr > :last-child { padding-right: var(--card-pad); }
.res-grid tfoot td { font-weight: 600; background: var(--surface-2); }
.res-remove { margin-left: .3rem; padding: .1rem; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; vertical-align: middle; }
.res-remove:hover { color: var(--danger); background: var(--danger-soft); }
.res-remove .icon { width: 14px; height: 14px; }
.res-add { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 0; }
.res-add select { max-width: 22rem; }
.res-add .hint { flex-basis: 100%; margin: 0; }
.res-subhead { margin: 1.4rem 0 .4rem; font-size: .9rem; }
.res-roles { max-width: 32rem; font-size: .875rem; }
.sb-roles .res-roles { width: 100%; max-width: none; } /* the sprint page's By role pane */

/* Resources: effort by sprint (resources/index) — hours, with cost underneath for those who may see it */
.effort-table td small { display: block; font-size: .75rem; color: var(--muted); }
.effort-table tfoot td { border-top: 2px solid var(--border); background: var(--surface-2); font-weight: 600; }
.effort-toggle { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; vertical-align: middle; }
.effort-toggle:hover { border-color: var(--brand); color: var(--brand); }
.effort-toggle .icon { width: 14px; height: 14px; transform: rotate(-90deg); }
.effort-toggle[aria-expanded="true"] .icon { transform: none; }
.effort-toggle-col { width: 2rem; padding-left: 0; padding-right: 0; text-align: center; }
.effort-detail > td { background: var(--surface-2); padding: .6rem var(--card-pad) .9rem 2.6rem; }
.effort-breakup { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .effort-breakup { grid-template-columns: 1fr; } }
.effort-people, .effort-roles { font-size: .85rem; background: var(--surface); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); }
.effort-people { width: 100%; }
.effort-roles th, .effort-roles td { white-space: nowrap; }
.effort-people small { display: block; font-size: .72rem; color: var(--muted); }


/* Timesheets (timesheets/index, timesheets/approvals): hours per sprint per day. Allocated hours
   sit faintly under each box; hours on a day with none allocated are marked outside the plan. */
.ts-overdue a { font-weight: 600; }
.ts-grid { border-collapse: separate; border-spacing: 0; font-size: .875rem; width: 100%; }
.ts-grid th, .ts-grid td { padding: .4rem .35rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ts-grid thead th { font-size: .7rem; background: var(--surface-2); }
.ts-grid th.ts-day small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.ts-grid .ts-sprint { text-align: left; min-width: 9rem; padding-left: var(--card-pad); white-space: nowrap; }
.ts-grid .ts-sprint .badge { margin-left: .35rem; }
.ts-grid .ts-sprint small { display: block; font-weight: 400; }
.ts-grid tbody th { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 400; color: var(--text); }
.ts-day { text-align: center; min-width: 3.2rem; white-space: nowrap; }
.ts-grid .ts-day input { width: 3rem; padding: .25rem .1rem; text-align: center; -moz-appearance: textfield; }
.ts-grid .ts-day input::-webkit-inner-spin-button, .ts-grid .ts-day input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ts-day.is-weekend { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 4px, transparent 4px, transparent 8px); }
.ts-grid th.ts-day.is-today { color: var(--brand); }
.ts-day.is-off { background: var(--surface-2); }
.ts-day.is-outside input, .ts-grid .ts-day.is-outside:not(:has(input)), .ts-approvals .ts-day.is-outside { box-shadow: inset 0 0 0 2px var(--warn-ring); background: var(--warn-soft); }
.ts-planned { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; }
.ts-value { font-variant-numeric: tabular-nums; }
.ts-sum { min-width: 3.5rem; background: var(--surface-2); padding-right: var(--card-pad) !important; }
.ts-assess-block { padding: var(--card-pad); border-bottom: 1px solid var(--line); }
.ts-assess-block:last-child { border-bottom: 0; }
.ts-assess-title { margin: 0 0 .3rem; font-size: .95rem; font-weight: 650; color: var(--heading); }
.ts-assess-title small { font-size: .78rem; font-weight: 400; margin-left: .35rem; }
.ts-assess-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem 1.5rem; }
.ts-assess-row label { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; font-weight: 600; color: var(--text-2); }
.ts-assess-row input { font-weight: 400; font-size: .875rem; color: var(--text); } /* typed text: normal weight, not the label's */
.ts-assess-row input[type=number] { width: 6rem; }
.ts-assess-row .ts-comment { flex: 1 1 16rem; }
.ts-todate { margin: 0 0 .4rem; font-size: .82rem; color: var(--text-2); }
.ts-confidence small { font-weight: 400; color: var(--muted); max-width: 13rem; line-height: 1.35; }
.ts-assess-row select.ts-pct { width: 6rem; font-weight: 400; font-size: .875rem; color: var(--text); }
.ts-enough { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ts-enough legend { flex-basis: 100%; padding: 0; margin-bottom: .2rem; font-size: .75rem; font-weight: 600; color: var(--text-2); }
.ts-assess-row .ts-choice { flex-direction: row; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 400; color: var(--text); }
.ts-extra { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--text-2); }
.ts-assess-row .ts-extra input { width: 5rem; }
.ts-enough .error { flex-basis: 100%; }
.ts-note { margin: .2rem 0 .6rem; }
.ts-grid tfoot td { font-weight: 600; background: var(--surface-2); text-align: center; }
.ts-grid tfoot td:first-child { text-align: left; padding-left: var(--card-pad); }
.ts-legend { margin: .8rem var(--card-pad) var(--card-pad); }
.ts-key { display: inline-block; width: .8rem; height: .8rem; margin: 0 .2rem -.1rem .4rem; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--warn-ring); background: var(--warn-soft); }
.ts-approvals { font-size: .85rem; }
.ts-approvals .ts-day { min-width: 2.6rem; }
.ts-comment-cell { max-width: 16rem; }
.ts-decide { display: flex; gap: .4rem; align-items: flex-start; }
.ts-return summary { list-style: none; }
.ts-return summary::-webkit-details-marker { display: none; }
.ts-return[open] form { display: flex; flex-direction: column; gap: .35rem; margin-top: .4rem; min-width: 14rem; }

/* Home › In progress: a compact card per active sprint and release in progress. */
.ip-group { padding: .55rem var(--card-pad) .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ip-item { padding: .7rem var(--card-pad) .8rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
.ip-item:last-child { border-bottom: 0; }
.ip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.ip-name { font-size: .95rem; font-weight: 600; }
.ip-context { color: var(--muted); font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.ip-goal { margin: .2rem 0 0; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* up to two lines */
.ip-meta { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.ip-item .dl-progress { margin: .45rem 0 0; }
.ip-item .dl-bar { max-width: none; }
.ip-effort { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin-top: .25rem; color: var(--muted); font-size: .78rem; }
.ip-effort:empty { display: none; }

/* Home › My team: a fixed-height list of the workspace's people that scrolls on its own. */
.team-list { max-height: 300px; overflow-y: auto; }
.team-avatar { width: 30px; height: 30px; font-size: .72rem; }
.team-msg { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--muted); flex: none; }
.team-msg:hover { color: var(--brand); background: var(--brand-soft); }
.team-msg .icon { width: 15px; height: 15px; }


/* Home › In progress: Stories and Time bars (partials/home-bars). Time well ahead of the work is amber. */
.ip-bars { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3rem .6rem; margin-top: .5rem; font-size: .75rem; color: var(--muted); }
.ip-bar-label { font-weight: 600; }
.ip-bar { height: 8px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ip-bar i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.ip-bar.is-time i { background: var(--brand); }
.ip-bar.is-behind i { background: var(--warn); }
.ip-bar-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Home panes that load after the page (x-lazy-pane): a static placeholder — no animation. */
.lazy-pane .card-subtitle { color: var(--muted); }
.lazy-lines { display: grid; gap: .55rem; padding: .3rem var(--card-pad) var(--card-pad); }
.lazy-lines i { display: block; height: 10px; border-radius: 5px; background: var(--surface-2); }
.lazy-lines i:nth-child(1) { width: 90%; } .lazy-lines i:nth-child(2) { width: 70%; } .lazy-lines i:nth-child(3) { width: 80%; }
/* Home › Roadmap: plans as bars over nine months (partials/home-roadmap). */
.hr-chart { position: relative; padding: .4rem var(--card-pad) var(--card-pad); }
.hr-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: center; gap: .6rem; min-height: 28px; color: var(--text); }
.hr-row:hover { text-decoration: none; color: var(--brand); }
.hr-name { font-size: .8rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-track { position: relative; height: 100%; min-height: 28px; }
.hr-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--today); border-left: 2px solid var(--danger); opacity: .55; } /* today */
.hr-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: var(--bar); }
.hr-row:hover .hr-bar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--bar); }
.hr-scale { min-height: 20px; border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.hr-scale .hr-track { min-height: 20px; }
.hr-month { position: absolute; top: 2px; font-size: .68rem; color: var(--muted); border-left: 1px solid var(--line); padding-left: 3px; line-height: 16px; }
@media (max-width: 600px) { .hr-month:nth-child(even) { visibility: hidden; } .hr-row { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); } } /* phones: every other month, so labels don't overlap */

/* Home panes: minimise / restore (x-panel collapse, public/js/app.js [data-collapse]). Minimised,
   a pane shows only its header; the button shows a minus (minimise) or a square (restore). */
.panel-tools { display: flex; align-items: center; gap: .6rem; flex: none; }
.panel-toggle { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.panel-toggle:hover { color: var(--brand); background: var(--brand-soft); }
.panel-toggle .icon { width: 15px; height: 15px; }
.panel-toggle .icon + .icon, .panel.is-collapsed .panel-toggle .icon:first-child { display: none; }
.panel.is-collapsed .panel-toggle .icon + .icon { display: block; }
.panel.is-collapsed > :not(.card-header) { display: none; }
.panel.is-collapsed > .card-header { border-bottom: 0; }

/* Timesheets › Balance to go assessment: recorded of the allocation (filled), the hours left
   (empty) and any extra hours needed beyond the allocation (amber, past its end). */
.ts-bar { position: relative; height: 10px; max-width: 32rem; margin: 0 0 .35rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ts-bar i { position: absolute; top: 0; bottom: 0; }
.ts-bar-used { left: 0; background: var(--brand); }
.ts-bar-extra { background: repeating-linear-gradient(135deg, var(--warn) 0 4px, color-mix(in srgb, var(--warn) 55%, transparent) 4px 8px); }
.ts-bar-key { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .7rem; font-size: .72rem; color: var(--muted); }
.ts-bar-key i { display: inline-block; width: .7rem; height: .5rem; margin-right: .25rem; border-radius: 3px; vertical-align: middle; }
.ts-bar-key .is-used { background: var(--brand); }
.ts-bar-key .is-left { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ts-bar-key .is-extra { background: var(--warn); }


/* Milestones (milestones/_pane, sprint page, Home): a dot for the status — upcoming grey, met
   green, missed red — and a one-line add form. */
.ms-dot { width: 10px; height: 10px; flex: none; transform: rotate(45deg); border-radius: 2px; background: var(--gray-400); }
.is-met > .ms-dot, .ms-dot.is-met { background: var(--ok); }
.is-missed > .ms-dot, .ms-dot.is-missed { background: var(--danger); }
.ms-list li.is-met .primary { color: var(--text-2); }
.ms-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ms-add input[type=text] { flex: 1 1 14rem; width: auto; }
.ms-add input[type=date], .ms-add select { width: auto; }
.sb-milestones { list-style: none; margin: .9rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .35rem; font-size: .85rem; }
.sb-milestones li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bd-ms-line { stroke: var(--gray-400); stroke-width: 1; stroke-dasharray: 2 2; }
.bd-ms { fill: var(--gray-400); }
.bd-ms.is-met { fill: var(--ok); } .bd-ms.is-missed { fill: var(--danger); }
.dl-ms { position: absolute; top: 26px; margin: -4px 0 0 -5px; z-index: 2; box-shadow: 0 0 0 2px var(--surface); } /* a release's milestones on the Timeline, on the bars' bottom edge so sprint names stay readable */
.g-ms { position: absolute; top: 19px; margin-left: -5px; z-index: 3; box-shadow: 0 0 0 2px var(--surface); } /* a roadmap plan's milestones on its Gantt row */
.hr-ms { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 2px var(--surface); }
/* Home › Roadmap: a roadmap's heading row folds open its delivery row — sprints as thin bars by state
   (names on hover) in lanes, milestones underneath (partials/home-roadmap, user 2026-10-03). */
.hr-roadmap { min-height: 26px; }
.hr-roadmap .hr-name { font-weight: 650; color: var(--heading); }
.hr-toggle { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.hr-toggle:hover { color: var(--brand); }
.hr-chevron { width: 14px; height: 14px; flex: none; color: var(--muted); }
.hr-toggle[aria-expanded="false"] .hr-chevron { transform: rotate(-90deg); }
.hr-row.is-hidden { display: none; }
.hr-delivery .hr-name { font-size: .75rem; padding-left: 1.2rem; }
.hr-sprint { position: absolute; height: 6px; border-radius: 3px; background: var(--gray-400); }
.hr-sprint.is-active { background: var(--brand); }
.hr-sprint.is-completed { background: var(--ok); }
.hr-sprint:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--brand); }
.hr-dms { position: absolute; bottom: 2px; width: 8px; height: 8px; margin-left: -4px; box-shadow: 0 0 0 2px var(--surface); }
.ms-home > li { align-items: center; }

/* ================= Client projects (projects/*; client work design, 2026-10-03) ================= */
.pr-progress { display: flex; align-items: center; gap: .5rem; }
.pr-progress .dl-bar { flex: 1 1 auto; max-width: 160px; }
.pr-progress small { color: var(--muted); white-space: nowrap; }
.pr-board { margin: 0; padding: var(--card-pad); align-items: stretch; }
.pr-list .group-row th { background: var(--surface-2); text-transform: none; letter-spacing: 0; }
.pr-list .group-row th { display: table-cell; }
.pr-section { font-weight: 650; color: var(--heading); font-size: .9rem; margin-right: .5rem; }
.pr-section .muted { font-weight: 500; font-size: .8rem; }
.pr-section-tools { display: inline-block; vertical-align: middle; }
.pr-section-tools > summary { list-style: none; cursor: pointer; color: var(--muted); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; }
.pr-section-tools > summary::-webkit-details-marker { display: none; }
.pr-section-tools > summary:hover { background: var(--surface); color: var(--brand); }
.pr-section-tools[open] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .4rem; }
.pr-section-tools form { display: inline-flex; gap: .35rem; margin: 0; }
.pr-quick td { background: var(--surface); }
.pr-quick form { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; }
.pr-quick input[type=text] { flex: 1 1 14rem; min-width: 0; }
.pr-quick select, .pr-quick input[type=date] { width: auto; }
.pr-move { display: inline-flex; margin: 0; }
.ws-select { width: auto; min-height: 30px; padding-block: .15rem; font-size: .8rem; font-weight: 600; border-radius: 999px; }
.ws-select.is-doing { color: var(--brand); }
.ws-select.is-waiting { color: var(--warn); }
.ws-select.is-done { color: var(--ok); }
.sb-card .pr-move { margin-top: .3rem; }
.pr-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pr-checklist li { display: flex; align-items: center; gap: .55rem; padding: .25rem 0; border-bottom: 1px solid var(--line); }
.pr-checklist .grow { flex: 1 1 auto; min-width: 0; }
.pr-checklist li.is-done .grow { color: var(--muted); text-decoration: line-through; }
.pr-check { display: inline-flex; margin: 0; }
.pr-box { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--ok); cursor: pointer; flex: none; }
.pr-box .icon { width: 14px; height: 14px; }
li.is-done .pr-box { border-color: var(--ok); background: var(--ok-soft, var(--surface)); }
@media (max-width: 900px) { .pr-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pr-board { grid-template-columns: minmax(0, 1fr); } }
/* Task comments and activity (projects/task): comments as cards, activity as quiet lines between them. */
.pr-timeline { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.pr-comment { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .85rem; background: var(--surface); }
.pr-comment-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .88rem; }
.pr-comment-head .acts { margin-left: auto; }
.pr-comment-head .msg-avatar { width: 26px; height: 26px; font-size: .68rem; }
.pr-event { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--text-2); padding-left: .2rem; }
.pr-event .icon { width: 14px; height: 14px; color: var(--muted); }
.pr-attachment { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .85rem; }
.pr-attachment .icon { width: 15px; height: 15px; }
.mention { padding: 0 .2rem; border-radius: 4px; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.pr-comment-form { display: grid; gap: .5rem; }
.pr-comment-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pr-comment-tools select { width: auto; }
.pr-comment-tools .grow { flex: 1 1 auto; }
/* Timesheet: client project rows (client work, phase 1d) and the Add a row picker. */
.ts-project .ts-sprint small { display: block; }
.ts-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem var(--card-pad) var(--card-pad); }
.ts-add-row label { font-weight: 600; font-size: .85rem; }
.ts-add-row select { width: auto; min-width: 16rem; max-width: 100%; }
/* Project Timeline (projects/_timeline): task bars by section across weeks, a line for today. */
.pr-timeline-chart { position: relative; padding: .4rem var(--card-pad) var(--card-pad); }
.ptl-row { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); align-items: center; gap: .6rem; min-height: 28px; color: var(--text); }
a.ptl-row:hover { text-decoration: none; color: var(--brand); }
.ptl-name { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptl-group .ptl-name { font-weight: 650; color: var(--heading); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding-top: .4rem; }
.ptl-track { position: relative; height: 100%; min-height: 28px; }
.ptl-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--today); border-left: 2px solid var(--danger); opacity: .5; }
.ptl-scale { border-bottom: 1px solid var(--line); margin-bottom: .2rem; min-height: 22px; }
.ptl-week { position: absolute; top: 2px; font-size: .68rem; color: var(--muted); border-left: 1px solid var(--line); padding-left: 3px; line-height: 16px; white-space: nowrap; }
.ptl-due { position: absolute; top: 2px; font-size: .68rem; font-weight: 700; color: var(--danger); transform: translateX(-50%); }
.ptl-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: var(--gray-400); }
.ptl-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); background: var(--gray-400); }
.ptl-bar.is-doing, .ptl-dot.is-doing { background: var(--brand); }
.ptl-bar.is-waiting, .ptl-dot.is-waiting { background: var(--warn); }
.ptl-bar.is-done, .ptl-dot.is-done { background: var(--ok); }
.ptl-bar.is-late, .ptl-dot.is-late { box-shadow: 0 0 0 2px var(--danger); }
.ptl-empty, .ptl-unscheduled { margin: .4rem var(--card-pad) var(--card-pad); font-size: .85rem; }
@media (max-width: 600px) { .ptl-week:nth-child(even) { visibility: hidden; } .ptl-row { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); } }
/* Project Calendar (projects/_calendar): a month of due dates. */
.pcal { padding: .4rem var(--card-pad) var(--card-pad); }
.pcal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.pcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pcal-dow { padding: .3rem .4rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pcal-day { min-height: 92px; padding: .3rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pcal-day:nth-child(7n) { border-right: 0; }
.pcal-day.is-weekend { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.pcal-day.is-holiday { background: var(--warn-soft); }
.pcal-day.is-other { opacity: .45; }
.pcal-date { font-size: .75rem; font-weight: 600; color: var(--muted); }
.pcal-day.is-today .pcal-date { color: #fff; background: var(--brand); border-radius: 999px; padding: 0 .4rem; align-self: flex-start; }
.pcal-task { display: block; font-size: .74rem; line-height: 1.3; padding: .1rem .35rem; border-radius: 5px; background: var(--surface-2); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--gray-400); }
.pcal-task:hover { text-decoration: none; color: var(--brand); }
.pcal-task.is-doing { border-left-color: var(--brand); }
.pcal-task.is-waiting { border-left-color: var(--warn); }
.pcal-task.is-done { border-left-color: var(--ok); text-decoration: line-through; color: var(--muted); }
.pcal-task.is-late { color: var(--danger); }
.pcal-due { font-size: .7rem; font-weight: 700; color: var(--danger); }
@media (max-width: 700px) { .pcal-day { min-height: 64px; } .pcal-task { font-size: .66rem; padding: .05rem .2rem; } }
/* Dependencies and project milestones (client work, phase 2b). */
.pr-deps { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.pr-deps li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pr-deps .acts { margin-left: auto; }
.ptl-ms { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; box-shadow: 0 0 0 2px var(--surface); }
.ptl-holiday { position: absolute; top: 25%; height: 50%; border-radius: 2px; background: var(--warn); opacity: .55; }
.pcal-ms { display: flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; color: var(--heading); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pcal-ms .ms-dot { width: 8px; height: 8px; flex: none; }
.sb-card .badge-warn { align-self: flex-start; }

/* A template project's note (projects/show; client work, phase 2c). */
.pr-template-note { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); font-size: .88rem; }
/* Workload (projects/workload; client work, phase 2d): people × weeks. */
.wl-grid th.is-now { color: var(--brand); }
.wl-cell.is-some { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.wl-cell.is-busy { background: var(--warn-soft); color: var(--warn); font-weight: 700; }

/* ================= Holidays and the story form (2026-10-03) ================= */
/* Story form (user, 2026-10-03): the story, Acceptance criteria, Planning, then Save, though the criteria card sits
   outside the form (it has its own forms). */
.story-form { display: flex; flex-direction: column; }
.story-form > form { display: contents; }
.story-form .sf-story { order: 1; }
.story-form .sf-criteria, .story-form > #criteria { order: 2; }
.story-form .sf-plan { order: 3; }
.story-form .sf-actions { order: 4; }
.ac-note { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--text); }
.ac-note .icon { flex: none; margin-top: .15rem; color: var(--brand); }
/* Holidays (user, 2026-10-03): an amber tint on resource-grid, timesheet and calendar days; the name in a small label or the title. */
.res-grid .is-holiday, .ts-day.is-holiday { background: var(--warn-soft); }
th.res-day.is-holiday, th.ts-day.is-holiday { box-shadow: inset 0 -2px 0 var(--warn); }
.holiday-name { display: block; font-size: .68rem; font-weight: 600; color: var(--warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7rem; }
/* Administration › Holidays: the Add row stays on one line (date, name, half day, button). */
.holiday-add { margin-bottom: 0; }
.holiday-add input[type=date] { width: auto; min-width: 0; }
.holiday-add input[type=text] { flex: 1 1 14rem; width: auto; min-width: 12rem; }
.holiday-add .check { display: inline-flex; align-items: center; gap: .35rem; margin: 0; white-space: nowrap; }
.holiday-add .check input { width: auto; min-width: 0; }
.pcal-day .holiday-name { max-width: none; }
/* ================= 24. Attached files, Documents trees, field tips, Our story (2026-10-04) ================= */
/* Attached files (partials/files; user, 2026-10-04): name, then size · who · when; remove on the right. */
.file-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .35rem; }
.file-list li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.file-list li .icon { width: 15px; height: 15px; color: var(--muted); flex: none; }
.file-list .file-meta { color: var(--muted); font-size: .8rem; }
.file-list .acts { margin-left: auto; }
/* Documents trees (documents/_tree, _file; user, 2026-10-04): folders fold open; counts on the right; files indented. */
.doc-tree > .section-body { padding: var(--card-pad); }
.doc-nodes { list-style: none; margin: 0; padding: 0; }
.doc-nodes .doc-nodes { margin-left: 1.15rem; border-left: 1px solid var(--line); padding-left: .55rem; }
.doc-nodes summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; padding: .35rem .3rem; border-radius: 7px; }
.doc-nodes summary::-webkit-details-marker { display: none; }
.doc-nodes summary:hover { background: var(--surface-2); }
.doc-nodes summary > .icon { width: 16px; height: 16px; color: var(--warn); flex: none; }
.doc-nodes summary > .doc-caret { width: 14px; height: 14px; color: var(--muted); }
.doc-nodes .doc-label { font-weight: 600; color: var(--heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-nodes .doc-ref { cursor: inherit; }
.doc-count { margin-left: auto; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.doc-open { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); flex: none; }
.doc-open:hover { background: var(--brand-soft); color: var(--brand); }
.doc-nodes .file-list { margin: .1rem 0 .25rem 2.6rem; gap: 0; padding: 0; }
.doc-nodes .file-list li { padding: .2rem 0; border-bottom: 0; } /* no divider per document (user, 2026-10-04) */
.doc-caret { width: 14px; height: 14px; color: var(--muted); flex: none; transform: rotate(-90deg); transition: transform .15s; }
details[open] > summary > .doc-caret { transform: none; }
/* Library: the list on the left, the picked document's details on the right (documents/_detail) */
.doc-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 1.25rem; align-items: start; }
.doc-list { min-width: 0; }
.doc-detail { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; margin-bottom: 0; }
.doc-list tr.is-selected > td { background: var(--brand-soft); }
.doc-pick { flex: none; width: 15px; height: 15px; border: 1.5px solid var(--muted); border-radius: 50%; box-sizing: border-box; } /* the file icon's size: nothing shifts */
li.is-selected > .doc-pick { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 3.5px, transparent 4px); }
.doc-nodes .file-list li.is-selected > a { color: var(--brand); font-weight: 600; }
@media (max-width: 1000px) { .doc-split { grid-template-columns: 1fr; } .doc-detail { position: static; max-height: none; } }
/* A document's content (documents/_document), the same in the pane and on its own page */
.doc-title { margin: 0 0 .4rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.doc-page .doc-title { font-size: 1.4rem; }
.doc-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .8rem; }
.doc-actions form { margin: 0; }
.doc-upload-form { margin: 0 0 .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.doc-upload-form form { display: grid; gap: .45rem; width: 100%; }
.doc-upload-buttons { display: flex; gap: .35rem; }
.doc-facts { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .45rem .6rem; margin: 0; font-size: .86rem; }
.doc-facts dt { color: var(--muted); font-size: .8rem; }
.doc-facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.doc-page .doc-facts { grid-template-columns: 7rem minmax(0, 1fr); font-size: .92rem; max-width: 720px; }
.doc-description { margin-top: .8rem; font-size: .9rem; }
.doc-page .doc-description { font-size: .95rem; max-width: 75ch; }
.doc-subhead { display: flex; align-items: baseline; gap: .5rem; margin: 1.1rem calc(-1 * var(--card-pad)) .6rem; padding: .9rem var(--card-pad) 0; border-top: 1px solid var(--line); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.doc-subhead .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.doc-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.doc-versions li { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.doc-versions li.is-current { border-color: var(--brand-ring, var(--brand)); background: var(--brand-soft); }
.doc-version-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; font-size: .88rem; }
.doc-version-file { min-width: 0; overflow-wrap: anywhere; }
.doc-version-main .file-meta { flex-basis: 100%; }
.doc-versions li > .btn { flex: none; }
.file-list .file-path { flex-basis: 100%; margin-left: 1.6rem; color: var(--muted); font-size: .78rem; }
.doc-results { padding: .8rem 1rem; }
.doc-results .doc-open { margin-left: auto; order: 1; } /* on the name's line; the path below */
.doc-results .file-path { order: 2; }
.doc-results li + li { padding-top: .2rem; } /* no divider per document (user, 2026-10-04) */
/* Field tips (app.js fieldTips; user, 2026-10-04): a form's help text as a small (i) by the field's label —
   hover, tap or focus to read it; the text opens below-right so it isn't cut off at the page's left. */
.tip { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: .35rem; padding: 0; vertical-align: 1px;
  border: 1px solid var(--muted); border-radius: 50%; background: none; color: var(--muted); font: italic 700 .62rem/1 Georgia, serif; cursor: help; }
.tip:hover, .tip:focus-visible { border-color: var(--brand); color: var(--brand); outline: none; }
.tip-text { display: none; position: absolute; top: calc(100% + 6px); left: -6px; z-index: 40; width: max-content; max-width: min(300px, 70vw); padding: .5rem .65rem;
  border-radius: 8px; background: #1f2430; color: #f3f4f6; box-shadow: var(--shadow); font: 400 .78rem/1.45 var(--font); font-style: normal; text-align: left; white-space: normal; }
.tip:hover .tip-text, .tip:focus .tip-text { display: block; }
/* Our story (story.blade.php; user, 2026-10-04): one readable article on the sign-in page's dark background. */
.story-page { place-items: start center; padding: 2rem 1.5rem 2.5rem; } /* tighter, so the story fits a laptop screen (user, 2026-10-04) */
.story { width: 100%; color: #d1d5db; font-size: 1.08rem; line-height: 1.65; } /* a little smaller and wider than first set, to fit one screen (user, 2026-10-04) */
.story .wordmark { margin-bottom: 1.4rem; }
.story-kicker { margin: 0; color: #a99bff; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.story h1 { margin: .4rem 0 1rem; color: #fff; font-size: clamp(2rem, 3.6vw, 2.6rem); line-height: 1.15; letter-spacing: -.01em; }
.story h2 { margin: 2.2rem 0 .4rem; color: #fff; font-size: 1.2rem; }
.story p { margin: 0 0 1.25rem; }
.story-lead { color: #fff; font-size: 1.25rem; line-height: 1.5; }
.story-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem !important; }
.story-actions .btn { width: auto; } /* not the sign-in page's full-width button */
.story-actions .btn:not(.btn-primary) { background: transparent; color: #d1d5db; border-color: rgba(255,255,255,.2); }
.story-sign { margin-top: 2.4rem !important; color: #fff; font-weight: 600; }
.story-sign span { color: #9aa3b2; font-weight: 400; font-size: .9rem; }
.story-sign .story-role { color: #d1d5db; font-size: .95rem; }
.story-back a, .story a:not(.btn):not(.wordmark) { color: #b8bfcc; }
/* Our story in two columns (user, 2026-10-04): the article, and a side column that stays in view. */
.story-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 4rem); align-items: start; width: 100%; max-width: 1200px; }
.story-side { position: sticky; top: 2rem; display: grid; gap: 1rem; margin-top: 4.4rem; }
.story-card { padding: 1.1rem 1.2rem; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); color: #c9ced8; font-size: 1rem; line-height: 1.6; }
.story-card h2 { margin: 0 0 .7rem; color: #fff; font-size: 1rem; }
.story-card p { margin: 0 0 .7rem; }
.story-facts { margin: 0; display: grid; gap: .65rem; }
.story-facts div { display: grid; grid-template-columns: 5.9rem 1fr; gap: .6rem; align-items: baseline; }
.story-facts dt { color: #a99bff; font-weight: 700; font-size: 1.05rem; }
.story-facts dd { margin: 0; }
@media (max-width: 900px) {
  .story-wrap { grid-template-columns: minmax(0, 1fr); }
  .story-side { position: static; margin-top: 0; }
}
.story-belief { margin: 1.3rem 0; padding: .3rem 0 .3rem 1.2rem; border-left: 3px solid #a99bff; color: #fff; font-size: 1.18rem; line-height: 1.55; font-weight: 500; } /* Our story's belief, as a pull quote */

/* "Track this in my Tasks" on new messages and replies (messages/_track, _conversation). */
.track-field { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.track-for { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; margin: 0; }
.track-for select { width: auto; min-width: 11rem; }
.track-field .error { flex-basis: 100%; }
.form-actions > .check { align-self: center; }

/* Expand / Collapse pairs (x-fold-buttons): one look everywhere, with the fold / unfold icons */
.fold-buttons { display: inline-flex; flex-wrap: wrap; gap: .35rem; }

.doc-card-file { display: flex; align-items: center; gap: .3rem; overflow-wrap: anywhere; } /* the actual file name on a Library card */
.doc-card-file .icon { width: 14px; height: 14px; color: var(--muted); flex: none; }
.form-grid [data-after-file][hidden] { display: none; } /* Add document: fields wait for the file (app.js [data-doc-suggest]) */

/* Popups (app.js [data-popup]): a page's main card over the current page; the page underneath keeps its place */
dialog.popup { width: min(960px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 0; border-radius: var(--radius); background: transparent; overflow: visible; }
dialog.popup::backdrop { background: rgb(15 23 42 / .45); }
dialog.popup > .section { margin: 0; max-height: calc(100vh - 3rem); overflow-y: auto; box-shadow: 0 20px 50px rgb(0 0 0 / .25); }
dialog.popup .section-back { display: none; } /* × closes the popup instead */
dialog.popup .section-title { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.popup-loading { padding: var(--card-pad); background: var(--surface); border-radius: var(--radius); }

/* Roadmap plan form: Roadmap list with "New roadmap…", and its one document */
[data-select-or-new] [data-new-value] { margin-top: .4rem; }
[data-select-or-new] [data-new-value][hidden] { display: none; }
.rm-doc-current { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .45rem; }
.rm-doc-current .icon { width: 15px; height: 15px; color: var(--muted); }
.rm-contents { margin: .2rem 0 0; color: var(--text-2); } /* a plan's contents under its track name (plan page); on the roadmap it is only the tooltip */

/* Drag to reorder (app.js [data-reorder]): a grip on each row; the row being dragged is lifted */
.drag-grip { display: inline-grid; place-items: center; width: 18px; height: 22px; margin-right: .2rem; color: var(--muted); cursor: grab; touch-action: none; flex: none; border-radius: 4px; }
.drag-grip:hover { color: var(--brand); background: var(--brand-soft); }
.drag-grip .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.is-reordering, .is-reordering * { cursor: grabbing !important; user-select: none; }
[data-reorder-item].is-dragging { position: relative; z-index: 5; box-shadow: 0 6px 18px rgb(0 0 0 / .18); background: var(--surface); opacity: .95; }

/* A badge holding a name inside a fact list (dd) wraps within its cell instead of running into the next one
   (2026-10-04: long "Roadmap › Track" links on releases, stories and epics). */
dd .badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; }

/* Friendly error pages (errors/layout): centred, an icon, the code small, a plain title and the way on */
.error-box .body { text-align: center; }
.error-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: .2rem auto .6rem; border-radius: 16px; background: var(--brand-soft); color: var(--brand); }
.error-icon .icon { width: 26px; height: 26px; }
.error-code { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.error-title { margin: .25rem 0 .6rem; font-size: 1.4rem; color: var(--heading); }
.error-lead { margin: 0 auto; max-width: 42ch; color: var(--text-2); line-height: 1.6; }
.error-reason { margin: .8rem auto 0; max-width: 42ch; padding: .55rem .8rem; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: .9rem; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.3rem; }

/* Home: Upcoming holidays (a date tile, the name, the weekday and how soon) */
.hol-home .hol-date { display: grid; place-items: center; width: 40px; height: 42px; flex: none; border-radius: 8px; background: var(--brand-soft); color: var(--brand); line-height: 1.05; }
.hol-home .hol-date strong { font-size: 1rem; }
.hol-home .hol-date small { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.hol-home li { align-items: center; }