:root {
      --bg: #b5d3c1;
      --panel: #ffffff;
      --panel-soft: #e9eff3;
      --surface: #e7fff2;
      --surface-container: #dbf4e7;
      --surface-container-low: #e1f9ec;
      --surface-container-lowest: #ffffff;
      --surface-variant: #d0e8db;
      --ink: #0a1f18;
      --muted: #404943;
      --outline: #707973;
      --line: #d8e1dc;
      --outline-variant: #c0c9c1;
      --brand: #1c3a5e;
      --brand-2: #006c45;
      --brand-soft: #98f6c2;
      --blue: #2774a6;
      --amber: #ffba48;
      --red: #c44d43;
      --green: #3a9b63;
      --charcoal: #14231d;
      --cream: #fbfaf4;
      --shadow: 0 18px 54px rgba(19, 40, 32, .12);
      --shadow-soft: 0 10px 30px rgba(19, 40, 32, .08);
      /* Topbar-only: negative spread keeps the shadow below the bar. The card
         token (--shadow-soft, 30px blur) bled ~20px ABOVE a sticky top:0 bar,
         visible in the safe-area / pull-down strip over it. */
      --shadow-topbar: 0 12px 14px -10px rgba(19, 40, 32, .16);
      --radius: 16px;
      --app-back-width: 60px;
      --app-back-height: 40px;
      --app-back-radius: 14px;
      --ease-out: cubic-bezier(.23,1,.32,1);
      --ease-in-out: cubic-bezier(.77,0,.175,1);
      /* Interaction scale — one shared motion vocabulary so every control speaks
         the same language on touch. Durations are short and restrained (field
         tool, not a game). Press is the tactile "I felt your tap" response that
         works where :hover does not: on a thumb, outdoors, in a WKWebView. */
      --dur-instant: 90ms;
      --dur-fast: 140ms;
      --dur-base: 200ms;
      --dur-slow: 280ms;
      --press: .97;
      --press-strong: .94;
      color-scheme: light;
      font-family: var(--font-system);
    }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    input, select, textarea, button { font-family: var(--font-system); font-size: 17px; }
    input::placeholder, textarea::placeholder { font-size: inherit; color: color-mix(in srgb, var(--muted) 72%, transparent); }
    h1 { font-size: var(--text-large-title); line-height: 1.18; font-weight: var(--weight-bold); letter-spacing: -0.02em; }
    h2 { font-size: var(--text-title-2); line-height: 1.25; font-weight: var(--weight-bold); letter-spacing: -0.01em; }
    h3 { font-size: var(--text-headline); line-height: 1.3; font-weight: var(--weight-semibold); }
    p, li { font-size: var(--text-body); line-height: 1.45; }
    .muted, small { font-size: var(--text-subheadline); line-height: 1.4; }
    .btn, button { font-weight: var(--weight-semibold); line-height: 1.2; }
    body.dark {
      --bg: #0d1411;
      --panel: #14211b;
      --panel-soft: #193026;
      --surface: #13251d;
      --surface-container: #193228;
      --surface-container-low: #1d3a2d;
      --surface-container-lowest: #111c17;
      --surface-variant: #253c31;
      --ink: #eef8f1;
      --muted: #b8c9bf;
      --outline: #789083;
      --line: #2f473b;
      --outline-variant: #3f594b;
      --brand: #98f6c2;
      --brand-2: #73db9a;
      --cream: #101713;
      --shadow: 0 18px 54px rgba(0, 0, 0, .35);
      --shadow-soft: 0 10px 28px rgba(0, 0, 0, .28);
      --shadow-topbar: 0 12px 14px -10px rgba(0, 0, 0, .45);
      color-scheme: dark;
    }
    html.dark { color-scheme: dark; background: #262624; }
    /* ---- Compatibility aliases -------------------------------------------
       These names are used 126 times across the stylesheets without a fallback
       (--text 39x, --mono 17x, --focus-ring 16x, --accent 15x, --danger 12x,
       --primary 9x, --success 7x, --surface-2 6x, ...) but none of them was
       ever defined, so every one was an UNRESOLVABLE var().

       An unresolvable var() is "invalid at computed-value time", which is not
       the same as being ignored: the property falls back to its inherited
       value if it is an inherited property, and to its initial value if not.
       So `color: var(--text)` painted the label in whatever colour the
       CONTAINER happened to use, and `background: var(--accent)` painted
       nothing at all. A filled button inside a white card therefore drew white
       text on white -- the buttons that cannot be seen in light mode -- and a
       primary field button rendered with no fill whatsoever.

       Declared on :root AND body on purpose. body.dark redefines the palette on
       <body>, so an alias declared only on :root would resolve against the
       LIGHT palette and then inherit those light colours down into dark mode. */
    :root,
    body {
      --text: var(--ink);
      --primary: var(--brand);
      --accent: var(--brand-2);
      --danger: var(--red);
      --success: var(--green);
      --warning: var(--amber);
      --surface-2: var(--surface-container-low);
      --surface-soft: var(--surface-container-low);
      --surface-raised: var(--surface-container);
      --surface-strong: var(--surface-container-lowest);
      --mono: var(--font-mono);
      --page-pad: 20px;
      /* Contrast partners for --accent. Light --accent is a dark green, dark
         --accent is a light mint, so the legible label colour flips with it. */
      --accent-contrast: #ffffff;
      --on-accent: #ffffff;
      --focus-ring: #0f6848;
    }
    body.dark {
      --accent-contrast: #07131d;
      --on-accent: #07131d;
      --focus-ring: #98f6c2;
    }
    * { box-sizing: border-box; }
    /* How far the floating bottom bar and the assistant sit above the screen
       edge. It used to be the safe-area inset PLUS 4px, which on a phone with a
       34px home indicator inset parked the bar 38px up — higher than a bottom
       bar normally rides. Sitting 10px inside the inset brings it down to 24px,
       still well clear of the indicator itself, which is a thin line centred in
       that band rather than the whole of it. Phones without an inset keep an
       8px edge. One token so the bar, the assistant and the clearance under
       them can never drift apart. */
    :root { --bottom-dock: max(8px, calc(env(safe-area-inset-bottom, 0px) - 10px)); }
    html { min-width: 0; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; touch-action: pan-y; }
    img, svg, video, canvas { max-width: 100%; height: auto; }
    button, input, select, textarea { max-width: 100%; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      overscroll-behavior-x: none;
    }
    /* Both elements, and `html.modal-open body` rather than a bare
       `body.modal-open`: on phones <html> is the scroller, and
       `body:not(.login-active){overflow-y:auto}` later in this sheet has the
       same specificity as `body.modal-open`, so the plain form lost on source
       order and the page scrolled under every dialog. */
    html.modal-open,
    html.modal-open body { overflow: hidden; overscroll-behavior: none; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto !important; }
      *, *::before, *::after { scroll-behavior: auto !important; }
    }
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
      line-height: 1;
      vertical-align: middle;
    }
    button, input, select, textarea { font: inherit; }
    button { border: 0; border-radius: var(--radius); cursor: pointer; color: inherit; }
    /* Keyboard focus must stay visible in every theme. A translucent ring
       composited to ~1.1:1 on dark/gray, i.e. effectively invisible, so the
       ring is now an opaque per-theme token meeting WCAG 1.4.11 (>=3:1). */
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 3px solid var(--focus-ring, #0f6848);
      outline-offset: 2px;
    }

    /* ============================================================
       Interaction system — one shared press language.
       The app was instrumented for the mouse (many :hover states) but is used
       primarily by a thumb, outdoors, in a WKWebView where :hover does not
       fire (or sticks after a tap). Press feedback is what makes a control feel
       alive under a finger. These rules add the missing tactile response to the
       component families that had none; controls with their own :active rule
       keep it (higher specificity wins). Reusable utilities are provided for
       future markup; the grouped selectors retrofit existing components without
       touching HTML. All transforms collapse under reduced-motion.
       ============================================================ */

    /* Reusable primitives for new markup. */
    .pressable { transition: transform var(--dur-instant) var(--ease-out); touch-action: manipulation; }
    .pressable:active { transform: scale(var(--press)); }
    .pressable-strong { transition: transform var(--dur-instant) var(--ease-out); touch-action: manipulation; }
    .pressable-strong:active { transform: scale(var(--press-strong)); }
    .selectable { transition: transform var(--dur-instant) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
    .selectable:active { transform: scale(var(--press)); }

    /* Retrofit: buttons, chips and tabs get a standard press (.97). */
    .btn.secondary:active, .btn.ghost:active, .btn.danger:active, .btn.warn:active,
    .oauth-button:active, .toggle-chip:active, .road-filter-btn:active,
    .sketch-share-button:active, .topbar-whatsapp-button:active, .review-action:active,
    .se-action:active, .report-view-btn:active, .se-count-chip:active, .map-tab:active {
      transform: scale(var(--press));
    }

    /* Retrofit: icon-only buttons feel more responsive with a deeper press (.94). */
    .notify-button:active, .map-locate-button:active, .map-home-button:active,
    .map-tools-button:active, .map-quick-button:active, .settings-back-btn:active {
      transform: scale(var(--press-strong));
    }

    /* Retrofit: wide rows and card actions get a gentle press (.99) so they
       acknowledge the tap without visibly shrinking. */
    .pm-command-row:active, .pm-member-row:active, .member-row:active,
    .settings-row:active, .settings-profile-row:active, .settings-icon-row:active,
    .settings-inline-row:active, .review-filter-row:active,
    .notification-workbench-row:active, .notification-inbox-action:active,
    .duty-template-row:active, .progress-metric-row:active, .progress-blocker-row:active,
    .scurve-month-row:active, .project-command-action:active, .project-cockpit-action:active,
    .project-compact-option:active, .project-directory-card-action:active,
    .project-access-history-row:active, .engineer-leaderboard-row:active,
    .se-evidence-row:active, .confirm-row:active, .pmr-se-row:active {
      transform: scale(.99);
    }

    /* Give retrofit targets a transform transition only when they lack one, so
       the press eases in instead of snapping. Scoped narrowly to avoid clobbering
       any multi-property transition already declared on these components. */
    .oauth-button, .toggle-chip, .road-filter-btn, .report-view-btn, .se-count-chip,
    .map-tab, .settings-row, .member-row, .duty-template-row, .progress-metric-row,
    .progress-blocker-row, .scurve-month-row, .confirm-row {
      transition: transform var(--dur-instant) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }

    @media (prefers-reduced-motion: reduce) {
      .pressable:active, .pressable-strong:active, .selectable:active,
      .btn.secondary:active, .btn.ghost:active, .btn.danger:active, .btn.warn:active,
      .oauth-button:active, .toggle-chip:active, .road-filter-btn:active,
      .sketch-share-button:active, .topbar-whatsapp-button:active, .review-action:active,
      .se-action:active, .report-view-btn:active, .se-count-chip:active, .map-tab:active,
      .notify-button:active, .map-locate-button:active, .map-home-button:active,
      .map-tools-button:active, .map-quick-button:active, .settings-back-btn:active,
      .pm-command-row:active, .pm-member-row:active, .member-row:active,
      .settings-row:active, .settings-profile-row:active, .settings-icon-row:active,
      .settings-inline-row:active, .review-filter-row:active,
      .notification-workbench-row:active, .notification-inbox-action:active,
      .duty-template-row:active, .progress-metric-row:active, .progress-blocker-row:active,
      .scurve-month-row:active, .project-command-action:active, .project-cockpit-action:active,
      .project-compact-option:active, .project-directory-card-action:active,
      .project-access-history-row:active, .engineer-leaderboard-row:active,
      .se-evidence-row:active, .confirm-row:active, .pmr-se-row:active {
        transform: none;
      }
    }
    .app { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
    .app.map-mode { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #d4e4ef; }
    .app.map-mode .sidebar,
    .app.map-mode .topbar { display: none; }
    .app.map-mode .bottom-nav { display: none !important; }
    .app.settings-mode { display: block; }
    .app.settings-mode .sidebar,
    .app.settings-mode .topbar,
    .app.settings-mode .bottom-nav { display: none; }
    .app.map-mode .main,
    .app.map-mode .content { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; padding: 0; margin: 0; display: block; overflow: hidden; background: #d4e4ef; }
    .app.map-mode .content,
    .app.map-mode .content.route-slide-left,
    .app.map-mode .content.route-slide-right { animation: none !important; transform: none !important; will-change: auto !important; }
    @supports (height: 100svh) {
      .app.map-mode,
      .app.map-mode .main,
      .app.map-mode .content,
      .app.map-mode .map-page,
      .app.map-mode .map-layout,
      .app.map-mode #map {
        height: 100svh;
        min-height: 100svh;
      }
    }
    .sidebar {
      position: sticky;
      top: 0;
      z-index: 1;
      height: 100vh;
      padding: 18px;
      background: var(--surface-container-lowest);
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow: auto;
      color: var(--ink);
      box-shadow: var(--shadow-soft);
    }
    .brand { display: flex; align-items: center; gap: 12px; padding: 8px; }
    .brand-mark, .avatar {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: var(--radius);
      background: var(--surface-variant);
      color: var(--brand);
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(0,55,35,.08);
    }
    .brand strong, .profile strong { display: block; font-size: 18px; }
    .brand span, .profile span { color: var(--outline); font-size: 12px; }
    .muted { color: var(--muted); font-size: 12px; }
    .sidebar .brand span, .sidebar .muted { color: var(--outline); }
    .project-card {
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel-soft);
      box-shadow: none;
    }
    .project-card small, .eyebrow { color: var(--brand-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
    .eyebrow-heading { display: block; font-size: 13px; margin-bottom: 12px; }
    .nav-group { display: grid; gap: 6px; }
    .nav-label { margin: 10px 8px 2px; color: var(--outline); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
    .nav-project-list { display: grid; gap: 2px; margin: 2px 4px 6px 26px; padding-left: 10px; border-left: 2px solid var(--line); }
    .nav-project-item { min-height: 32px; padding: 6px 10px; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; text-align: left; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .nav-project-item:hover { background: var(--surface-container-low); color: var(--brand-2); }
    .nav-project-item.active { color: var(--ink); font-weight: 700; background: var(--surface-container-low); }
    .nav-project-current-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #5a94c9; box-shadow: 0 0 0 3px rgba(90,148,201,.18); position: relative; }
    .nav-project-current-dot::after {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      background: #5a94c9;
      opacity: .55;
      animation: nav-project-pulse 1.8s ease-out infinite;
    }
    @keyframes nav-project-pulse {
      0% { transform: scale(1); opacity: .55; }
      100% { transform: scale(2.4); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-project-current-dot::after { animation: none; display: none; }
    }
    .nav-btn { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); background: transparent; text-align: left; color: var(--muted); font-weight: 700; transition: background .18s ease, color .18s ease, transform .18s ease; }
    .nav-btn.active, .nav-btn:hover {
      background: var(--brand-soft);
      color: var(--brand-2);
      font-weight: 700;
      box-shadow: none;
    }
    .nav-btn:active { transform: scale(.98); }
    .nav-btn svg { color: currentColor; }
    .nav-btn svg { width: 18px; height: 18px; flex: none; }
    .sync-box { margin-top: auto; padding: 14px; border-radius: var(--radius); background: var(--brand); color: #fff; display: grid; gap: 6px; box-shadow: 0 14px 34px rgba(0,55,35,.18); }
    .sync-box small { opacity: .78; }
    .main { min-width: 0; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 18px;
      background: var(--page-wash);
      border-bottom: 1px solid var(--line);
      /* No backdrop-filter: a frosted bar smudges whatever scrolls under it and
         the owner reported the blur twice. The bar is opaque instead. */
      box-shadow: var(--shadow-topbar);
    }
    @media (max-width: 980px) {
      .topbar { transition: transform .22s ease, opacity .18s ease; will-change: transform; }
      .topbar.mobile-scroll-hidden { transform: translate3d(0, -105%, 0); opacity: 0; pointer-events: none; }
    }
    .mobile-menu { display: none; width: 42px; height: 42px; border-radius: var(--radius); background: var(--surface-container-lowest); border: 1px solid var(--line); }
    .hamburger-icon { width: 18px; display: grid; gap: 4px; }
    .hamburger-icon span { display: block; height: 2px; border-radius: 999px; background: currentColor; }
    .search { flex: 1; max-width: 560px; position: relative; }
    .search input, .control, textarea {
      width: 100%;
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      padding: 11px 13px;
      color: var(--ink);
      box-shadow: 0 1px 0 rgba(255,255,255,.8);
      transition: border-color .16s ease, box-shadow .16s ease;
    }
    .search input:focus, .control:focus, textarea:focus {
      outline: 0;
      border-color: rgba(47,143,99,.55);
      box-shadow: 0 0 0 4px rgba(47,143,99,.12);
    }
    textarea { min-height: 88px; resize: vertical; }
    .profile { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius); background: rgba(255,255,255,.86); border: 1px solid var(--line); }
    .content { padding: 26px; display: grid; gap: 18px; max-width: 1280px; width: 100%; margin: 0 auto; }
    .content.route-slide-left { animation: routeSlideLeft var(--dur-slow) cubic-bezier(.12,.92,.18,1); }
    .content.route-slide-right { animation: routeSlideRight var(--dur-slow) cubic-bezier(.12,.92,.18,1); }
    .content.route-slide-none { animation: none !important; }
    html.app-booting .content,
    html.app-booting .content *,
    html.app-booting .bottom-nav,
    html.app-booting .sidebar,
    html.app-booting .topbar {
      animation: none !important;
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
    html.app-booting .app { visibility: visible !important; }
    html.app-booting .app .content > * { filter: none !important; opacity: 1 !important; }
    html.app-booting .app .topbar,
    html.app-booting .app .bottom-nav { filter: none !important; opacity: 1 !important; }
    html.app-booting .sidebar { visibility: hidden !important; }
    html.app-booting .sidebar-backdrop { visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; }
    @media (max-width: 980px) {
      html.app-booting .sidebar {
        transform: translate3d(-105%, 0, 0) !important;
        transition: none !important;
      }
    }
    @keyframes routeSlideLeft {
      from { opacity: .46; transform: translateX(56px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes routeSlideRight {
      from { opacity: .46; transform: translateX(-56px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .content.route-slide-left,
      .content.route-slide-right { animation: none; }
    }
    body.login-active { overflow: hidden; overscroll-behavior: none; }
    button, .btn, .control, input, select, textarea, .card, .form-card, .modal, .table-wrap { border-radius: max(10px, var(--radius)); }
    .profile-photo-picker { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; }
    .profile-photo-picker input { display: none; }
    .profile-photo-picker strong, .profile-photo-picker small { display: block; }
    .profile-photo-picker small { color: var(--muted); margin-top: 3px; }
    .settings-avatar-preview { width: 50px; height: 50px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--brand-soft); color: var(--brand); background-size: cover; background-position: center; font-weight: 700; }
    .notifications-feed { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
    .notification-item.unread { border-left: 4px solid #2d8cff !important; background: color-mix(in srgb, #dceeff 82%, var(--surface-container-lowest)) !important; }
    body.dark .notification-item.unread { background: color-mix(in srgb, #164b7c 58%, var(--panel)) !important; }
    .notification-see-more { min-height: 42px; padding: 9px 16px; border-radius: 10px; background: #e1e3e7; color: #20242a; font-weight: 700; }
    .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
    h1 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 36px); letter-spacing: 0; }
    h2 { margin: 0 0 12px; font-size: 18px; }
    h3 { margin: 0 0 8px; font-size: 15px; }
    p { margin: 0; line-height: 1.55; }
    .grid { display: grid; gap: 14px; }
    .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .card {
      background: var(--surface-container-lowest);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 5px 18px rgba(19,40,32,.05);
      padding: 18px;
      transition: box-shadow .18s ease, transform .18s ease;
      min-width: 0;
    }
    .card:hover { box-shadow: 0 10px 26px rgba(19,40,32,.08); }
    .kpi {
      min-height: 118px;
      display: grid;
      align-content: space-between;
      position: relative;
      overflow: hidden;
      border-left: 4px solid var(--brand);
    }
    .kpi::after { display: none; }
    .kpi strong { font-size: 28px; line-height: 1.1; color: var(--brand); }
    .pm-operations-queue { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-container-lowest); }
    .pm-operations-queue h1 { margin: 6px 0 8px; font-size: clamp(28px, 6vw, 48px); letter-spacing: -.055em; }
    .pm-operations-queue p { max-width: 55ch; color: var(--muted); }
    .pm-operations-count { display: grid; place-items: center; min-width: 86px; min-height: 86px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-2); font-size: 30px; font-weight: 800; line-height: 1; }
    .pm-operations-count small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .pm-operations-metrics .kpi { min-height: 108px; }
    .pm-operations-project, .pm-operations-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .pm-operations-project h2, .pm-operations-actions h2 { margin: 4px 0 6px; }
    .pm-command-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 8px 0 26px; border-bottom: 1px solid var(--line); }
    .pm-command-intro h1 { max-width: 16ch; margin: 8px 0 10px; font-size: clamp(32px, 6vw, 58px); letter-spacing: -.06em; line-height: .98; }
    .pm-command-intro p { max-width: 48ch; color: var(--muted); }
    .pm-command-kicker, .pm-command-project-top > span:first-child { color: var(--brand-2); font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
    .pm-command-total { display: grid; gap: 3px; min-width: 116px; padding-left: 18px; border-left: 2px solid var(--brand-2); }
    .pm-command-total strong { color: var(--brand); font-size: 46px; letter-spacing: -.06em; line-height: .9; }
    .pm-command-total span { color: var(--muted); font-size: 12px; font-weight: 700; }
    .pm-command-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr); gap: 22px; margin-top: 22px; }
    .pm-command-main { display: grid; align-content: start; gap: 16px; min-width: 0; }
    .pm-command-review, .pm-command-project, .pm-command-next { border: 1px solid var(--line); border-radius: 18px; background: var(--surface-container-lowest); }
    body:not(.dark) .pm-command-review,
    body:not(.dark) .pm-command-project,
    body:not(.dark) .pm-command-next { background: var(--card-tint); }
    .pm-command-review { overflow: hidden; }
    .pm-command-section-head { padding: 20px 22px 14px; }
    .pm-command-section-head h2, .pm-command-next h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.035em; }
    .pm-command-section-head p, .pm-command-next p { color: var(--muted); font-size: 13px; }
    .pm-command-list { border-top: 1px solid var(--line); }
    .pm-command-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background .18s ease, padding-left .18s ease; }
    .pm-command-row:last-child { border-bottom: 0; }
    .pm-command-row:hover, .pm-command-row:focus-visible { padding-left: 24px; background: var(--surface-container-low); }
    .pm-command-row.is-expanded { background: color-mix(in srgb, var(--amber) 9%, var(--surface-container-lowest)); }
    .pm-command-signal { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; font-weight: 800; }
    .pm-command-signal.amber { background: color-mix(in srgb, var(--amber) 22%, var(--surface-container-lowest)); color: #8a5b00; }
    body.dark .pm-command-signal.amber { color: var(--amber); }
    .pm-command-signal.blue { background: color-mix(in srgb, var(--blue) 18%, var(--surface-container-lowest)); color: var(--blue); }
    .pm-command-signal.green { background: color-mix(in srgb, var(--green) 18%, var(--surface-container-lowest)); color: var(--green); }
    .pm-command-signal.red { background: color-mix(in srgb, var(--red) 16%, var(--surface-container-lowest)); color: var(--red); }
    .pm-command-signal svg { width: 18px; height: 18px; }
    .se-command-evidence .pm-command-section-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; }
    .se-command-evidence .pm-command-section-head > div { flex: 1 1 200px; min-width: 0; }
    .se-command-evidence .pm-command-section-head .btn { flex: 0 0 auto; min-height: 38px; }
    /* Modernized PM report review (control-room shell + inspector cards) */
    .pm-command-total.is-clear strong { color: var(--green); display: inline-flex; align-items: center; }
    .pm-command-total strong svg { width: 34px; height: 34px; }
    .pm-review-report-list { border-top: 1px solid var(--line); }
    .pm-review-report-media { margin-top: 2px; }
    .pm-review-report-media table { width: 100%; margin: 4px 0 0; border-collapse: separate; }
    .pm-review-report-media td { vertical-align: top; padding: 0 6px 8px 0 !important; }
    .pm-review-report-media img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--line); }
    .pm-review-report-media .cap { margin-top: 4px; color: var(--muted); font-size: 10px; }
    .pm-review-roster { display: grid; gap: 2px; }
    .pm-review-roster-row { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-top: 1px solid var(--line); }
    .pm-review-roster-row:first-child { border-top: 0; }
    .pm-review-roster-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-container-low); color: var(--brand); font-weight: 800; font-size: 12px; }
    .pm-review-roster-copy { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
    .pm-review-roster-copy strong { font-size: 13px; overflow-wrap: anywhere; }
    .pm-review-roster-copy small { color: var(--muted); font-size: 11px; }
    .pm-review-roster-count { flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--amber) 18%, var(--surface-container-lowest)); color: #8a5b00; font-weight: 800; font-size: 13px; }
    body.dark .pm-review-roster-count { color: var(--amber); }
    .pm-command-project-empty { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
    .pm-command-row-copy { display: grid; gap: 4px; min-width: 0; }
    .pm-command-row-copy strong { font-size: 15px; }
    .pm-command-row-copy small { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
    .pm-command-arrow { color: var(--brand); font-size: 22px; }
    .pm-command-side { display: grid; align-content: start; gap: 14px; }
    .pm-command-project { display: grid; gap: 10px; padding: 20px; }
    .pm-command-project-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .pm-command-project h2 { margin: 4px 0 0; font-size: 30px; letter-spacing: -.05em; overflow-wrap: anywhere; }
    .pm-command-project p { color: var(--muted); font-size: 13px; }
    .pm-command-project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .pm-command-project-meta span { display: grid; gap: 2px; color: var(--muted); font-size: 11px; }
    .pm-command-project-meta b { color: var(--ink); font-size: 22px; }
    .pm-command-project .btn { width: 100%; }
    .pm-command-next { padding: 18px 20px; }
    .duty-composer { gap: 14px; }
    .duty-composer-intro { padding: 4px 2px 10px; }
    .duty-composer-intro h2 { max-width: 18ch; margin: 6px 0 8px; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.055em; }
    .duty-composer-kicker { margin: 0; color: var(--brand-2); font: 700 10px var(--font-mono); letter-spacing: .11em; }
    .duty-composer-section { display: grid; gap: 18px; padding: 20px; border-color: var(--line); border-radius: 18px; }
    .duty-composer-section .section-title { align-items: flex-start; margin: 0; }
    .duty-composer-section .section-title { display: flex; justify-content: space-between; gap: 12px; }
    .dw-date-inline { flex: none; align-self: center; color: var(--muted); font: 700 11px var(--font-mono); white-space: nowrap; }
    .duty-composer-section .section-title > div { display: grid; gap: 4px; }
    .duty-composer-section .section-title h2 { margin: 0; }
    .duty-composer-section .section-title p { margin: 0; font-size: 12px; }
    .duty-composer-section label { display: grid; gap: 7px; min-width: 0; }
    .duty-composer-section label > span { color: var(--ink); font-size: 12px; font-weight: 750; }
    .duty-composer-section .control, .duty-composer-section textarea { width: 100%; min-height: 44px; }
    .duty-composer-section textarea { min-height: 132px; resize: vertical; }
    .duty-composer-section .control:focus-visible, .duty-composer-section textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-color: var(--brand-2); }
    .duty-composer-section:focus-within { border-color: color-mix(in srgb, var(--brand-2) 55%, var(--line)); box-shadow: 0 10px 28px rgba(6,45,39,.07); }
    .dw-priority-field { display: grid; gap: 9px; }
    .dw-field-label { color: var(--ink); font-size: 12px; font-weight: 750; }
    .dw-priority { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
    .dw-prio { display: grid; justify-items: center; gap: 6px; min-width: 0; cursor: pointer; background: transparent; -webkit-tap-highlight-color: transparent; user-select: none; }
    .dw-prio input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
    .dw-prio-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-container-low); color: var(--muted); font-size: 15px; font-weight: 800; transition: transform var(--dur-instant) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
    .dw-prio-note { color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; white-space: nowrap; }
    .dw-prio:hover .dw-prio-btn { border-color: var(--brand-2); transform: translateY(-1px); }
    .dw-prio input:checked + .dw-prio-btn { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-2) 18%, transparent); transform: scale(1.06); animation: dwPrioritySelect .24s var(--ease-out); }
    body.dark .dw-prio input:checked + .dw-prio-btn{ background: var(--brand-2); border-color: var(--brand-2); color: #0d1720; }
    .dw-prio:active, .dw-prio:focus-within { background: transparent; }
    .dw-prio input:focus-visible + .dw-prio-btn { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
    @keyframes dwPrioritySelect { 0% { transform: scale(.9); } 65% { transform: scale(1.1); } 100% { transform: scale(1.06); } }
    .dw-invalid-pulse { animation: dwInvalidPulse .48s var(--ease-out); border-color: #c83b32 !important; box-shadow: 0 0 0 4px color-mix(in srgb, #c83b32 16%, transparent) !important; }
    @keyframes dwInvalidPulse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
    .duty-wizard-foot .btn { transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .42s ease, background .28s ease, color .28s ease, box-shadow .28s ease; }
    .duty-wizard-foot .btn:active { transform: scale(.9); filter: brightness(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-2) 22%, transparent), 0 10px 24px rgba(0,0,0,.18); }
    .pm-sent-duties { display: grid; gap: 16px; }
    .pm-sent-duties-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .pm-sent-duties-head h2 { margin: 5px 0; }
    .pm-sent-duties-head p { margin: 0; max-width: 48ch; }
    .pm-sent-duties-empty { display: grid; gap: 5px; place-items: center; min-height: 120px; padding: 22px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
    .pm-sent-duties-empty strong { color: var(--ink); }
    .pm-task-review-table { display: grid; gap: 16px; }
    .pm-task-review-table-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .pm-task-review-table-head h2 { margin: 5px 0; }
    .pm-task-review-table-head p { margin: 0; max-width: 48ch; }
    .duty-composer-submit { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 2px 0; }
    .duty-composer-submit .muted { max-width: 42ch; font-size: 12px; }
    .duty-composer-submit .btn { min-width: 160px; min-height: 46px; }

    /* ---- PM new-duty wizard: one focused step at a time ---- */
    .duty-wizard { gap: 16px; }
    .duty-wizard-head h2 { margin: 0 0 4px; font-size: clamp(22px, 4vw, 30px); letter-spacing: -.04em; }
    .duty-wizard-head .muted { margin: 0; font-size: 13px; max-width: 44ch; }
    .duty-wizard-rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 12px; }
    .duty-wizard-rail::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 999px; background: var(--line); }
    .duty-wizard-rail::after { content: ""; position: absolute; left: 8px; bottom: 4px; height: 3px; border-radius: 999px; background: var(--brand-2); width: var(--dw-progress, 33%); max-width: calc(100% - 16px); transition: width .34s var(--ease-out); }
    .dw-step { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 8px 6px; border-radius: var(--radius); background: transparent; color: var(--muted); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); }
    .dw-step:active { transform: scale(.98); }
    .dw-step b { width: 28px; height: 28px; flex: none; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface-container-low); color: var(--muted); border: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
    .dw-step span { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
    .dw-step.is-active { background: var(--surface-container-low); color: var(--ink); }
    .dw-step.is-active b { background: var(--brand); color: #fff; border-color: transparent; transform: scale(1.05); }
    body.dark .dw-step{ color: #aeb8c3; }
    body.dark .dw-step b{ background: #20262d; color: #dbe3ea; border-color: #3b4651; }
    body.dark .dw-step.is-active{ background: #202a33; color: #f5f7fa; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
    body.dark .dw-step.is-active b{ background: #b9d8ef; color: #122235; border-color: #d5e8f6; box-shadow: 0 0 0 3px rgba(185,216,239,.16); }
    body.dark .dw-step.is-done b{ color: transparent; }
    .dw-step.is-done b { background: var(--brand-2); color: transparent; border-color: transparent; position: relative; }
    .dw-step.is-done b::after { content: ""; position: absolute; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; border-radius: 1px; transform: translateY(-1px) rotate(-45deg); animation: dwCheckPop .3s var(--ease-out); }
    @keyframes dwCheckPop { 0% { opacity: 0; transform: translateY(-1px) rotate(-45deg) scale(.4); } 60% { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1.14); } 100% { transform: translateY(-1px) rotate(-45deg) scale(1); } }
    .duty-wizard-stage { display: grid; grid-template-columns: 1fr; gap: 16px; }
    .duty-wizard-main { min-width: 0; display: grid; gap: 16px; overflow-x: clip; }
    .dw-panel { display: none; }
    .dw-panel.is-active { display: grid; }
    .dw-panel.is-active.dw-in-fwd { animation: dwInFwd .34s var(--ease-out); }
    .dw-panel.is-active.dw-in-back { animation: dwInBack .34s var(--ease-out); }
    @keyframes dwInFwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
    @keyframes dwInBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
    .duty-wizard-preview { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-low); padding: 16px; }
    .dw-prev-label { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 10px; letter-spacing: .01em; }
    .dw-prev-card { background: var(--surface-container-lowest); border: 1px solid var(--line); border-radius: 14px; padding: 13px; box-shadow: var(--shadow-soft); }
    .dw-prev-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .dw-prev-top strong { font-size: 15px; letter-spacing: -.01em; line-height: 1.25; }
    .dw-prev-meta { margin-top: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
    .dw-prev-meta2 { margin-top: 3px; font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
    .dw-prev-card p { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; word-break: break-word; }
    .duty-wizard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
    .duty-wizard-foot .btn { min-width: 132px; min-height: 48px; }
    .duty-wizard-foot .dw-back { min-width: 96px; }
    .duty-wizard-foot .dw-next { transition: transform var(--dur-instant) var(--ease-out), opacity var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
    .duty-wizard-foot .btn:disabled { opacity: .45; box-shadow: none; pointer-events: none; }
    @media (min-width: 981px) {
      .duty-wizard-stage { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
      .duty-wizard-preview { position: sticky; top: 16px; }
    }
    /* The live preview is a desktop affordance (it sits beside the step). On a
       phone it is hidden so it can never add height that forces a scroll. */
    @media (max-width: 980px) {
      .duty-wizard-preview { display: none; }
    }
    /* Phone: one step must fit the viewport without scrolling — that is the whole
       point of the wizard. Drop the redundant head (the rail already orients),
       hide the per-step descriptions, and tighten spacing so the rail, the
       active card and the footer sit on one screen. */
    @media (max-width: 720px) {
      .duty-wizard-head { display: none; }
      .duty-wizard, .duty-wizard-main, .duty-wizard-stage { gap: 12px; }
      .duty-composer-section.dw-panel { padding: 14px; gap: 13px; }
      .dw-panel .section-title { padding-bottom: 10px; margin-bottom: 12px; }
      .dw-panel .section-title p { display: none; }
      .dw-panel .section-title h2 { font-size: 17px; line-height: 22px; }
      .duty-composer-section.dw-panel textarea { min-height: 108px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dw-panel.is-active.dw-in-fwd, .dw-panel.is-active.dw-in-back { animation: none; }
      .dw-step, .dw-step b { transition: none; }
      .dw-step.is-done b::after { animation: none; }
      .dw-prio input:checked + .dw-prio-btn, .dw-invalid-pulse { animation: none; }
      .duty-wizard-rail::after { transition: none; }
    }
    .duty-template-preview { display: grid; gap: 14px; }
    .duty-template-head h2 { margin: 5px 0; font-size: 20px; letter-spacing: -.035em; }
    .duty-template-head p { margin: 0; font-size: 12px; }
    .duty-template-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
    .duty-template-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
    .duty-template-row:last-child { border-bottom: 0; }
    .duty-template-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; color: var(--brand-2); font-size: 20px; }
    .duty-template-row strong { font-size: 14px; }
    .duty-template-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
    .duty-template-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 700 11px var(--font-mono); }
    .report-command-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 8px 0 26px; border-bottom: 1px solid var(--line); }
    .report-command-intro h1 { max-width: 15ch; margin: 0 0 10px; font-size: clamp(32px, 6vw, 58px); letter-spacing: -.06em; line-height: .98; }
    .report-command-intro p { max-width: 54ch; color: var(--muted); }
    .report-command-kicker { margin: 0; color: var(--brand-2); font: 700 10px var(--font-mono); letter-spacing: .1em; }
    .report-command-total { display: grid; gap: 3px; min-width: 128px; padding-left: 18px; border-left: 2px solid var(--amber); }
    .report-command-total strong { color: var(--brand); font-size: 46px; letter-spacing: -.06em; line-height: .9; }
    .report-command-total span { color: var(--muted); font-size: 12px; font-weight: 700; }
    .report-command-total.verified { border-left-color: var(--green); }
    .report-command-total.verified strong { color: var(--green); font-size: 20px; letter-spacing: -.02em; line-height: 1; }
    .report-command-metrics { display: flex; align-items: stretch; gap: 10px; }
    .report-command-task-signal { display: grid; gap: 3px; min-width: 142px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--blue) 10%, var(--surface-container-lowest)); }
    .report-command-task-signal strong { color: var(--ink); font-size: 15px; }
    .report-command-task-signal span { color: var(--muted); font-size: 11px; font-weight: 700; }
    body.dark .report-command-task-signal, body.gray .report-command-task-signal { background: color-mix(in srgb, var(--blue) 16%, var(--surface-container-lowest)); border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); }
    body.dark .report-command-total.verified, body.gray .report-command-total.verified { border-left-color: var(--green); }
    .report-command-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0 14px; }
    .report-command-summary h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.035em; }
    .report-command-summary p { font-size: 13px; }
    .report-command-summary-stats { display: flex; gap: 18px; color: var(--muted); font-size: 12px; }
    .report-command-summary-stats span { display: grid; gap: 2px; }
    .report-command-summary-stats b { color: var(--ink); font-size: 20px; }
    .report-command-queue { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-container-lowest); }
    .report-command-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
    .report-command-queue-head h2 { margin: 0; font-size: 18px; letter-spacing: -.03em; }
    .report-command-empty { padding: 34px 20px; text-align: center; }
    .report-command-empty strong { font-size: 16px; }
    .report-command-empty p { margin-top: 6px; font-size: 13px; }
    .report-review-desk { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 16px; }
    .report-review-roster, .report-review-inbox { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-container-lowest); overflow: hidden; }
    .report-review-roster-head, .report-review-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
    .report-review-roster-head h2, .report-review-inbox-head h2 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
    .report-review-roster-head span { color: var(--muted); font: 700 11px var(--font-mono); }
    .report-review-roster-list { display: grid; gap: 1px; background: var(--line); }
    .report-review-roster-item { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: var(--surface-container-lowest); }
    .report-review-roster-item strong { display: block; font-size: 13px; }
    .report-review-roster-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
    .report-review-roster-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; }
    .report-review-roster-count { margin-left: auto; color: var(--amber); font: 800 16px var(--font-mono); }
    .report-review-inbox .report-table { border: 0; border-radius: 0; }
    .report-review-inbox-head { padding-right: 14px; }
    .report-review-inbox-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
    .report-test-preview { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px; text-align: left; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, var(--blue) 6%, var(--surface-container-lowest)); }
    .report-test-preview > div { min-width: 0; flex: 1; }
    .report-test-preview strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .report-test-preview p { margin: 3px 0 0; font-size: 11px; }
    body.dark .report-test-preview, body.gray .report-test-preview { background: color-mix(in srgb, var(--blue) 12%, var(--surface-container-lowest)); }
    @media (max-width: 860px) { .report-command-intro { grid-template-columns: 1fr; align-items: start; } .report-command-metrics { width: 100%; } .report-command-total, .report-command-task-signal { flex: 1; } .report-review-desk { grid-template-columns: 1fr; } .report-review-roster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 520px) { .report-command-metrics { gap: 8px; } .report-command-total, .report-command-task-signal { min-width: 0; } .report-review-roster-list { grid-template-columns: 1fr; } .report-review-desk { margin-top: 12px; } }
    .progress-command-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 8px 0 26px; border-bottom: 1px solid var(--line); }
    .progress-command-intro h1 { max-width: 17ch; margin: 7px 0 10px; font-size: clamp(32px, 6vw, 58px); letter-spacing: -.06em; line-height: .98; }
    .progress-command-intro p { max-width: 56ch; color: var(--muted); }
    .progress-command-kicker { margin: 0; color: var(--brand-2); font: 700 10px var(--font-mono); letter-spacing: .1em; }
    .progress-command-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .progress-blocker-panel { margin-top: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-container-lowest); overflow: hidden; }
    .progress-blocker-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
    .progress-blocker-head h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.035em; }
    .progress-blocker-head p { font-size: 13px; }
    .progress-blocker-list { display: grid; }
    .progress-blocker-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
    .progress-blocker-row:last-child { border-bottom: 0; }
    .progress-blocker-row strong { font-size: 14px; }
    .progress-blocker-row p { margin-top: 3px; color: var(--muted); font-size: 12px; }
    .progress-blocker-count { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 15px; font-weight: 800; }
    .progress-blocker-count.red { background: color-mix(in srgb, var(--red) 16%, var(--surface-container-lowest)); color: var(--red); }
    .progress-blocker-count.amber { background: color-mix(in srgb, var(--amber) 22%, var(--surface-container-lowest)); color: #8a5b00; }
    .progress-blocker-count.blue { background: color-mix(in srgb, var(--blue) 18%, var(--surface-container-lowest)); color: var(--blue); }
    .progress-empty { padding: 24px 20px; }
    .progress-empty p { margin-top: 4px; font-size: 13px; }
    .progress-command-data { margin-top: 22px; }
    @media (max-width: 640px) {
      .duty-composer-section { padding: 16px; }
      .duty-composer-submit { align-items: stretch; flex-direction: column; }
      .duty-composer-submit .btn-row, .duty-composer-submit .btn { width: 100%; }
      .duty-template-row { grid-template-columns: 30px minmax(0, 1fr); }
      .duty-template-meta { grid-column: 2; }
      .report-command-intro { align-items: flex-start; flex-direction: column; }
      .report-command-total { min-width: 0; padding-left: 14px; }
      .report-command-summary { align-items: flex-start; flex-direction: column; }
      .progress-command-intro { align-items: flex-start; flex-direction: column; }
      .progress-command-actions, .progress-command-actions .btn { width: 100%; }
    }
    @media (max-width: 640px) {
      .pm-operations-queue { align-items: flex-start; flex-direction: column; }
      .pm-operations-count { min-width: 68px; min-height: 68px; font-size: 24px; }
      .pm-operations-project, .pm-operations-actions { align-items: stretch; flex-direction: column; }
      .pm-operations-project .btn, .pm-operations-actions .btn { width: 100%; }
      .pm-command-intro { align-items: flex-start; flex-direction: column; }
      .pm-command-total { min-width: 0; padding: 0 0 0 14px; }
      .pm-command-layout { grid-template-columns: 1fr; }
      .pm-command-row { grid-template-columns: 38px 1fr auto; padding: 14px; }
      .pm-command-signal { width: 36px; height: 36px; }
    }
    .pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 5px 9px; border-radius: 999px; background: var(--surface-container-low); color: var(--brand); font-weight: 700; font-size: 12px; }
    .pill.red { color: var(--red); background: #fae8e7; } .pill.blue { color: var(--blue); background: #e4f0f7; } .pill.amber { color: #8b5c05; background: #fff2d5; } .pill.green { color: var(--brand-2); background: #dff8e8; } .pill.purple { color: #6d28d9; background: #ede9fe; } .pill.muted { color: var(--muted); background: var(--surface-container-low); }
    .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 15px; border-radius: var(--radius); background: var(--brand); color: #fff; font-weight: 700; box-shadow: 0 10px 22px rgba(0,55,35,.16); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
    .btn:hover { transform: translateY(-1px); }
    .btn.secondary { background: var(--surface-container-lowest); color: var(--brand); border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(19,40,32,.04); }
    .btn.warn { background: var(--amber); color: #2b1f06; }
    .btn.danger { background: var(--red); }
    .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; -webkit-overflow-scrolling: touch; }
    .mobile-report-cards { display: none; }
    .report-mobile-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-lowest); padding: 14px; box-shadow: var(--shadow-soft); min-width: 0; }
    .report-mobile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .report-mobile-head strong { display: block; color: var(--ink); overflow-wrap: anywhere; }
    .report-mobile-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
    .report-mobile-meta div { min-width: 0; }
    .report-mobile-meta span { display: block; color: var(--muted); font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
    .report-mobile-meta b { display: block; margin-top: 3px; overflow-wrap: anywhere; }
    .mobile-task-cards { display: none; }
    .task-mobile-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-lowest); padding: 14px; box-shadow: var(--shadow-soft); }
    .task-mobile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .task-mobile-head strong, .task-mobile-head p, .task-mobile-card dd, .task-mobile-card dt { overflow-wrap: anywhere; word-break: normal; }
    .task-mobile-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
    .task-mobile-card dt { color: var(--muted); font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
    .task-mobile-card dd { margin: 3px 0 0; font-weight: 700; }
    .task-mobile-actions .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .progress-section-list { display: grid; gap: 10px; margin-top: 14px; }
    .progress-section-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-lowest); padding: 14px 16px; }
    .progress-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .progress-section-head strong { font-size: 15px; overflow-wrap: anywhere; }
    .progress-section-metrics { display: grid; gap: 8px; margin-top: 12px; }
    .progress-metric-row { display: grid; grid-template-columns: 64px minmax(0,1fr) 62px; gap: 10px; align-items: center; }
    .progress-metric-row .progress-metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: var(--font-mono); }
    .progress-metric-row .progress { height: 8px; }
    .progress-metric-row .progress-metric-value { font-size: 12px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
    .engineer-leaderboard { display: grid; gap: 10px; margin-top: 12px; }
    .engineer-leaderboard-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-container-lowest); }
    .engineer-leaderboard-rank { width: 20px; flex: none; text-align: center; font-weight: 800; color: var(--muted); font-size: 13px; }
    .engineer-leaderboard-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--surface-container-low); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background-size: cover; background-position: center; }
    .engineer-leaderboard-body { flex: 1; min-width: 0; }
    .engineer-leaderboard-body strong { display: block; overflow-wrap: anywhere; }
    .engineer-leaderboard-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 5px; }
    .engineer-leaderboard-stats span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-mono); }
    .engineer-leaderboard-stats b { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
    .scurve-mobile-summary { display: none; }
    .scurve-month-row { display: grid; grid-template-columns: 52px minmax(0,1fr) 74px; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface-container-lowest); }
    .scurve-month-row + .scurve-month-row { margin-top: 8px; }
    .scurve-month-row .progress { height: 7px; }
    .section-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    table { width: 100%; border-collapse: collapse; min-width: 760px; background: var(--surface-container-lowest); }
    th, td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
    th { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--panel-soft); position: sticky; top: 0; }
    tbody tr:hover { background: var(--surface-container-low); }
    tr:last-child td { border-bottom: 0; }
    .map-page { height: 100vh; min-height: 100vh; position: relative; overflow: hidden; background: #d4e4ef; }
    .map-layout { position: absolute; inset: 0; min-height: 100vh; }
    #map { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100vh; border-radius: 0; border: 0; overflow: hidden; background: #e8efe9; box-shadow: none; }
    .map-floating-panel {
      position: absolute;
      z-index: 500;
      left: 84px;
      bottom: 16px;
      width: min(390px, calc(100% - 190px));
      max-height: 38vh;
      overflow: auto;
      pointer-events: auto;
    }
    .map-count-badge { position: absolute; z-index: 500; right: 16px; bottom: 16px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface-container-lowest) 94%, transparent); color: var(--brand); font-weight: 700; box-shadow: var(--shadow-soft); }
    .map-tools-button { position: absolute; z-index: 520; right: 16px; top: 16px; min-height: 46px; padding: 10px 14px; border-radius: 999px; background: color-mix(in srgb, var(--surface-container-lowest) 96%, transparent); color: var(--brand); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-soft); font-weight: 700; }
    .map-follow-button { position: absolute; z-index: 521; left: 16px; bottom: 16px; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface-container-lowest) 96%, transparent); color: var(--brand); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); }
    .map-follow-button.active { background: var(--brand); color: #fff; border-color: transparent; }
    .map-duty-pin span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
    .map-nearest-ring { animation: mapNearestPulse 1.6s ease-in-out infinite; }
    @keyframes mapNearestPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .map-nearest-ring { animation: none; } }
    .map-nearest-prompt { position: absolute; z-index: 540; left: 50%; transform: translateX(-50%); bottom: 16px; max-width: min(440px, calc(100% - 32px)); background: color-mix(in srgb, var(--surface-container-lowest) 97%, transparent); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 14px; display: flex; align-items: center; gap: 14px; backdrop-filter: blur(10px); }
    .map-nearest-prompt.within-tap { border-color: var(--brand); }
    .map-nearest-copy { display: grid; gap: 2px; min-width: 0; }
    .map-nearest-copy strong { font-size: 16px; }
    .map-nearest-copy small { color: var(--muted); }
    .map-nearest-actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
    .map-nearest-actions .btn { min-height: 40px; padding: 8px 12px; font-size: 13px; }
    .map-home-button { position: absolute; z-index: 530; left: 16px; top: 16px; min-height: 46px; padding: 10px 16px; border-radius: 999px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow); font-weight: 700; }
    .layer-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
    .toggle-chip { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-lowest); color: var(--brand); font-weight: 700; }
    .toggle-chip input { width: 16px; height: 16px; accent-color: var(--brand-2); }
    .point-detail { display: grid; gap: 8px; padding: 14px; }
    .point-detail h2 { margin-bottom: 0; font-size: 20px; }
    /* 44px, not 38: this panel is the map's action surface, tapped one-handed
       in a trench with gloves on. It was the smallest live target in the app. */
    .point-detail .btn { min-height: 44px; padding: 8px 11px; font-size: 13px; }
    .house-connection { color: #e00000; font-weight: 700; }
    .map-popup-meta { display: grid; gap: 3px; margin-top: 4px; min-width: 160px; }
    .map-popup-meta span { display: flex; justify-content: space-between; gap: 12px; }
    .leaflet-tooltip.mh-label {
      display: none;
      border: 1px solid rgba(0,55,35,.18);
      border-radius: 6px;
      background: rgba(255,255,255,.94);
      color: var(--brand);
      box-shadow: 0 6px 14px rgba(19,40,32,.14);
      font: 700 11px/1.25 var(--font-system);
      padding: 4px 6px;
    }
    .map-labels-on.show-manhole-labels .leaflet-tooltip.mh-label { display: block; }
      .point-meta { display: grid; grid-template-columns: minmax(96px, 120px) minmax(0, 1fr); align-items: center; gap: 6px 10px; font-size: 12px; }
    .point-meta span:first-child { color: var(--muted); }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
    label span { color: var(--ink); font-size: 13px; }
    body.login-active { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
    .login-screen { position: fixed; inset: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; padding: 18px; background: var(--page-wash); }
    body.dark .login-screen { background: var(--page-wash); }
    .login-card { width: min(960px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--surface-container-lowest); box-shadow: var(--shadow); }
    .login-hero {
      padding: clamp(26px, 5vw, 56px);
      background:
        linear-gradient(rgba(20,61,45,.88), rgba(20,61,45,.92)),
        repeating-linear-gradient(35deg, rgba(255,255,255,.13) 0 1px, transparent 1px 34px),
        radial-gradient(circle at 78% 24%, rgba(117,210,154,.42), transparent 28%),
        #143d2d;
      color: #fff;
      display: grid;
      align-content: space-between;
      gap: 36px;
      min-height: 560px;
    }
    .login-hero p { color: rgba(255,255,255,.76); }
    .login-form { padding: clamp(24px, 4vw, 44px); display: grid; align-content: center; gap: 16px; }
    .oauth-actions { display: grid; gap: 12px; }
    .oauth-button {
      width: 100%;
      min-height: 52px;
      justify-content: flex-start;
      gap: 14px;
      padding-inline: 18px;
      border-radius: 14px;
    }
    .oauth-button.google { background: var(--surface-container-lowest) !important; color: var(--ink) !important; border: 1px solid var(--line); box-shadow: none !important; }
    .oauth-button.microsoft { background: #2f2f2f !important; color: #fff !important; border: 1px solid #2f2f2f; box-shadow: none !important; }
    .oauth-button.apple { background: #111 !important; color: #fff !important; border: 1px solid #111; box-shadow: none !important; }
    .oauth-button:hover { transform: none; filter: none; }
    .oauth-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
    .oauth-button:disabled { opacity: .62; cursor: wait; }
    .oauth-mark {
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      color: #4285f4;
      border: 1px solid #dadce0;
      font: 800 15px/1 Arial, sans-serif;
      flex: 0 0 auto;
    }
    .microsoft-mark { display: grid; grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 10px); gap: 2px; flex: 0 0 auto; }
    .microsoft-mark i:nth-child(1) { background: #f35325; }
    .microsoft-mark i:nth-child(2) { background: #81bc06; }
    .microsoft-mark i:nth-child(3) { background: #05a6f0; }
    .microsoft-mark i:nth-child(4) { background: #ffba08; }
    .auth-status { margin: 0; }
    .auth-privacy { margin: 0; font-size: 12px; line-height: 1.55; }
    .auth-legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; margin: 0; font-size: 12px; text-align: right; }
    .auth-legal-links a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
    .temporary-login {
      display: grid;
      gap: 10px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }
    .temporary-login-head { display: grid; gap: 3px; }
    .temporary-login-head strong { color: var(--ink); }
    .temporary-login-head small { color: var(--muted); line-height: 1.45; }
    .temporary-login-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .temporary-login .control { width: 100%; min-height: 46px; }
    .temporary-login .btn { width: 100%; min-height: 46px; }
    .remember-login { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; cursor: pointer; }
    .remember-login input { width: 18px; height: 18px; accent-color: var(--accent); }
    @media (max-width: 520px) {
      .temporary-login-fields { grid-template-columns: 1fr; }
    }
    .bottom-nav { display: none; }
    .topbar { position: sticky; }
    /* Scroll progress indicator: a thin bar on the topbar's bottom divider
       that reflects how far the user has scrolled through the current
       page, YouTube-style. Single source of truth -- see
       bindScrollLoadingBar() below. */
    .scroll-loading-bar { position: absolute; left: 0; bottom: -2px; width: 0%; height: 3px; z-index: 1000; pointer-events: none; opacity: 0; background: #1c1e21; transition: width .1s linear, opacity .3s ease; }
    .scroll-loading-bar.is-visible { opacity: 1; }
    body.dark .scroll-loading-bar{ background: #ffffff; }
    @media (prefers-reduced-motion: reduce) { .scroll-loading-bar { transition: opacity .3s ease; } }
    /* ===== Feedback & overlay motion =====================================
       Two components carry almost every acknowledgment and every decision
       point in the app: the toast (confirms an action landed) and the modal
       (asks for or reports a decision). Neither had any motion at all --
       they simply appeared and vanished. Since both are single shared
       primitives, animating them once gives every workflow in the app the
       same authored feedback, for free. Confident-arrival timing matches the
       curve already used by the project switcher and route transitions
       elsewhere in this file, so the motion reads as one language, not two. */
    .toast { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: grid; gap: 8px; max-width: 360px; }
    .toast div { padding: 12px 14px; border-radius: var(--radius); background: var(--ink); color: #fff; box-shadow: var(--shadow); animation: toastIn .32s cubic-bezier(.16,1,.3,1) both; }
    .toast div.toast-leaving { animation: toastOut .22s cubic-bezier(.4,0,1,1) both; }
    @keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(6px) scale(.98); } }
    .modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(12,30,22,.42); animation: modalScrimIn .2s ease-out both; }
    .modal-backdrop.closing { animation: modalScrimOut .18s ease-in both; pointer-events: none; }
    @keyframes modalScrimIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes modalScrimOut { from { opacity: 1; } to { opacity: 0; } }
    .modal-backdrop > .modal,
    .modal-backdrop > form.modal { animation: modalRiseIn .3s cubic-bezier(.16,1,.3,1) both; }
    .modal-backdrop.closing > .modal,
    .modal-backdrop.closing > form.modal { animation: modalRiseOut .18s cubic-bezier(.4,0,1,1) both; }
    @keyframes modalRiseIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes modalRiseOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(10px) scale(.98); } }
    @keyframes modalSheetIn { from { opacity: .6; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes modalSheetOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(22px); } }
    @media (prefers-reduced-motion: reduce) {
      .toast div, .toast div.toast-leaving,
      .modal-backdrop, .modal-backdrop.closing,
      .modal-backdrop > .modal, .modal-backdrop > form.modal,
      .modal-backdrop.closing > .modal, .modal-backdrop.closing > form.modal,
      .modal-backdrop:not(.modal-backdrop-centered) > .modal,
      .modal-backdrop:not(.modal-backdrop-centered) > form.modal,
      .modal-backdrop.closing:not(.modal-backdrop-centered) > .modal,
      .modal-backdrop.closing:not(.modal-backdrop-centered) > form.modal { animation: none; }
    }

    /* ===== Button "done" state =========================================
       An action that completes with the button still on screen -- save
       preferences, save/clear the WhatsApp link, copy the project code, copy
       push feedback, save your name -- no longer fires a toast at the far
       edge of the screen. The button that was pressed reports its own
       success: it washes to confirm-green, its label crossfades to a drawn
       checkmark, then it settles back to rest. Feedback lands where the eye
       already is. Errors and connection/sync status still use the toast --
       those are not "an action finished", and several have no button to
       return to. */
    /* A fixed confirm-green, not var(--green): the dark theme
       desaturate --green to a near-gray, which made the "done" flash colorless
       in exactly the modes where the wash should read most clearly. */
    .btn-done { position: relative; white-space: nowrap; background: #1f9d57 !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 20px -8px rgba(31,157,87,.6) !important; animation: btnDonePop .16s var(--ease-out); }
    /* The dark/gray primary-button rule (body.dark .btn:not(.danger):not(.warn)
       :not(.secondary)) paints a blue gradient at a high specificity, which
       swallowed the confirm-green. Match its shape so the "done" wash wins in
       those themes, and clear the gradient + dark text it would otherwise leave
       behind. */
    body.dark .btn.btn-done:not(.secondary):not(.danger):not(.warn){ background: #24b061 !important; background-image: none !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(36,176,97,.55) !important; }
    .btn-done > .btn-done-check { width: 18px; height: 18px; flex: none; }
    .btn-done > .btn-done-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: btnDoneCheck .2s var(--ease-out) .03s forwards; }
    .btn-done > .btn-done-label { animation: btnDoneLabel .16s var(--ease-out) .03s both; }
    @keyframes btnDonePop { 0% { transform: scale(1); } 42% { transform: scale(.965); } 100% { transform: scale(1); } }
    @keyframes btnDoneCheck { to { stroke-dashoffset: 0; } }
    @keyframes btnDoneLabel { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
    @media (prefers-reduced-motion: reduce) {
      .btn-done { animation: none; }
      .btn-done > .btn-done-check path { animation: none; stroke-dashoffset: 0; }
      .btn-done > .btn-done-label { animation: none; }
    }

    .role-onboarding-modal { width: min(560px, 100%); display: grid; gap: 16px; max-height: min(720px, calc(100dvh - 32px)); overflow-y: auto; }
    .role-choice-list { display: grid; gap: 12px; }
    .role-onboarding-modal .role-back { justify-self: start; min-height: 44px; }
    .role-onboarding-modal hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
    .confirm-row { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
    .confirm-row input { flex: 0 0 auto; margin-top: 3px; }
    .modal { width: min(680px, 100%); max-height: 90vh; overflow: auto; background: var(--surface-container-lowest); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
    .progress { height: 10px; border-radius: 999px; background: #e7eee9; overflow: hidden; }
    .progress span { display: block; height: 100%; background: var(--brand-2); }
    .backend-pre { white-space: pre-wrap; overflow: auto; max-height: 520px; padding: 14px; border-radius: var(--radius); background: #0d1620; color: #d9f5e7; font: 12px/1.55 Consolas, monospace; min-width: 0; }
    .form-card { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: 12px; box-shadow: 0 4px 20px rgba(6,45,39,.05); padding: clamp(18px, 3vw, 28px); min-width: 0; }
    .section-title { display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--outline-variant); }
    .section-title b { width:32px; height:32px; border-radius:999px; display:grid; place-items:center; background:var(--brand-2); color:#fff; font-size:13px; }
    .section-title h2 { margin:0; font-size:24px; line-height:32px; color:var(--ink); }
    .users-role-groups { display: grid; gap: 16px; }
    .users-role-group h2, .users-role-group h3 { margin: 0 0 14px; font-size: 20px; }
    .users-role-groups .users-role-group h3 { font-size: 17px; }
    .users-role-groups .users-role-group + .users-role-group { border-top: 1px solid var(--line); padding-top: 16px; }
    .project-hero { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
    .project-hero-settings { position: absolute; top: 16px; right: 16px; }
    .project-hero-name { display: flex; align-items: center; gap: 6px; }
    .project-hero-name h2 { margin: 0; overflow-wrap: anywhere; }
    .btn-icon { width: 32px; height: 32px; min-height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; background: transparent; color: var(--outline); box-shadow: none; }
    .btn-icon:hover { background: var(--surface-container-low); color: var(--brand-2); }
    .btn-icon svg { width: 16px; height: 16px; }
    .project-hero-code { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
    .project-hero-code code { font-family: var(--font-mono); font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--surface-container-low); color: var(--brand-2); letter-spacing: .03em; }
    .project-overview-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
    .project-overview-meta > div { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; background: var(--surface-container-lowest); }
    .project-overview-meta span { color: var(--muted); font-size: 11px; font-weight: 700; }
    .project-overview-meta strong { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
    .project-overview-meta .project-overview-status { color: var(--green); }
    .project-overview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
    .project-workspace-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
    .project-workspace-controls .btn { width: 100%; min-height: 44px; padding-inline: 10px; }
    .project-access-shell { display: grid; gap: 18px; }
    .project-access-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
    .project-access-intro h2 { margin: 5px 0 4px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.035em; }
    .project-access-intro p { max-width: 60ch; margin: 0; color: var(--muted); line-height: 1.5; }
    .project-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .project-access-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-container-lowest); }
    .project-access-panel-wide { grid-column: 1 / -1; }
    .project-access-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .project-access-panel-head h3 { margin: 0; font-size: 17px; }
    .project-access-panel-head .eyebrow { margin: 0; }
    .project-access-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-container-low); }
    .project-access-code code { color: var(--brand-2); font: 800 14px var(--font-mono); letter-spacing: .05em; overflow-wrap: anywhere; }
    .project-access-history { display: grid; gap: 8px; }
    .project-access-history-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .project-access-history-row:last-child { border-bottom: 0; padding-bottom: 0; }
    .project-access-history-row strong { display: block; overflow-wrap: anywhere; }
    .project-access-history-row small { color: var(--muted); }
    .project-access-history-row time { color: var(--muted); font-size: 11px; white-space: nowrap; }
    .project-directory { display: grid; gap: 16px; }
    .project-directory-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
    .project-directory-head h2 { margin: 5px 0 4px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.035em; }
    .project-directory-head p { max-width: 58ch; margin: 0; color: var(--muted); line-height: 1.5; }
    .project-directory-count { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--brand-2); color: #fff; font-size: 18px; font-weight: 800; }
    .project-directory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: min(460px, 52vh); overflow-y: auto; padding: 2px 6px 2px 0; scrollbar-color: var(--brand-2) var(--surface-container-low); scrollbar-width: thin; }
    .project-directory-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-container-lowest); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
    .project-directory-card:hover { border-color: color-mix(in srgb, var(--brand-2) 55%, var(--line)); transform: translateY(-1px); }
    .project-directory-card.is-active { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 7%, var(--surface-container-lowest)); }
    .project-directory-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .project-directory-index { color: var(--muted); font: 700 11px var(--font-mono); letter-spacing: .08em; }
    .project-directory-card h3 { margin: 0; color: var(--ink); font-size: 16px; overflow-wrap: anywhere; }
    .project-directory-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 7px; color: var(--muted); font-size: 11px; }
    .project-directory-card-meta span { font-weight: 700; }
    .project-directory-card-meta code { color: var(--brand-2); font: 700 11px var(--font-mono); letter-spacing: .03em; }
    .project-directory-card-action { display: flex; justify-content: flex-end; }
    .project-directory-card-action .btn { white-space: nowrap; }
    .project-compact-switcher { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-container-lowest); }
    .project-context-label { display: grid; gap: 3px; min-width: 0; }
    .project-context-label span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .project-context-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .project-compact-switcher details { position: relative; width: min(300px, 52%); }
    .project-compact-switcher summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-container-lowest); color: var(--ink); cursor: pointer; list-style: none; font-size: 13px; font-weight: 800; }
    .project-compact-switcher summary::-webkit-details-marker { display: none; }
    .project-compact-switcher summary::after { content: '⌄'; color: var(--muted); font-size: 16px; }
    .project-compact-switcher details[open] summary { position: relative; z-index: 41; border-color: var(--brand-2); }
    .project-compact-switcher details[open]::before { content: ''; position: fixed; z-index: 39; inset: 0; background: rgba(10,31,24,.22); backdrop-filter: blur(3px); animation: project-switch-backdrop .18s ease-out both; }
    .project-compact-menu { position: fixed; z-index: 40; top: 50%; left: 50%; width: min(420px, calc(100vw - 28px)); max-height: min(68vh, 520px); overflow: auto; display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-container-lowest); box-shadow: 0 22px 70px rgba(8,24,18,.24); transform: translate(-50%, -50%); animation: project-switch-panel .22s cubic-bezier(.16,1,.3,1) both; }
    .project-compact-menu-head { display: block; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 800; }
    .project-compact-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-size: 13px; font-weight: 750; }
    .project-compact-option:hover, .project-compact-option:focus-visible { background: var(--surface-container-low); }
    @keyframes project-switch-panel { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
    @keyframes project-switch-backdrop { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .project-compact-switcher details[open]::before, .project-compact-menu { animation: none; } }
    body.dark .project-compact-switcher details[open]::before { background: rgba(0,0,0,.46); }
    .project-access-panel:has(.project-access-code) { display: none; }
    .project-needs-attention { border-left: 4px solid var(--amber); background: color-mix(in srgb, var(--surface-container-low) 70%, transparent); }
    .project-danger-zone { border-color: color-mix(in srgb, #dc2626 40%, var(--line)); }
    .project-join-card { padding: 18px; }
    .project-join-card .btn { min-height: 40px; padding: 9px 14px; border-radius: 12px; box-shadow: 0 6px 14px rgba(0,55,35,.12); }
    .project-join-card .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,55,35,.16); }
    .project-danger-zone .eyebrow { color: #dc2626; }
    .project-danger-zone p { margin-bottom: 14px; }
    .project-lifecycle-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .project-lifecycle-actions .btn { min-width: 150px; }
    .project-lifecycle-archive { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
    .project-lifecycle-archive h3 { margin: 0 0 10px; font-size: 16px; }
    .project-profile-zone, .project-operations-zone { display: grid; gap: 14px; }
    .project-profile-zone { padding-bottom: 4px; }
    .project-operations-zone { padding-top: 6px; border-top: 1px solid var(--line); }
    .project-zone-label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .project-zone-label::after { content: ''; height: 1px; flex: 1; background: var(--line); }
    .project-command-center { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--brand-2); border-radius: 20px; background: color-mix(in srgb, var(--brand-2) 8%, var(--surface-container-lowest)); }
    .project-command-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
    .project-command-head h1 { margin: 4px 0 6px; font-size: clamp(26px, 5vw, 42px); letter-spacing: -.05em; overflow-wrap: anywhere; }
    .project-command-head p { max-width: 58ch; margin: 0; color: var(--muted); line-height: 1.5; }
    .project-command-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: var(--surface-container-lowest); color: var(--green); font-size: 12px; font-weight: 800; white-space: nowrap; }
    .project-command-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .project-command-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .project-command-metric { display: grid; gap: 3px; min-width: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--brand-2) 20%, var(--line)); border-radius: 14px; background: var(--surface-container-lowest); }
    .project-command-metric strong { font-size: 24px; letter-spacing: -.03em; }
    .project-command-metric span { color: var(--muted); font-size: 11px; font-weight: 700; }
    .project-command-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .project-command-actions .btn { min-height: 42px; }
    .project-workspace-tabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-container-low); scrollbar-width: none; }
    .project-workspace-tabs::-webkit-scrollbar { display: none; }
    .project-workspace-tab { min-height: 40px; padding: 8px 13px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
    .project-workspace-tab:hover, .project-workspace-tab:focus-visible { background: var(--surface-container-lowest); color: var(--ink); }
    .project-workspace-tab.is-active { background: var(--brand-2); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-2) 24%, transparent); }
    .project-timeline { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-container-lowest); }
    .project-timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .project-timeline-head h2 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
    .project-timeline-list { display: grid; gap: 0; }
    .project-timeline-item { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; padding: 0 0 16px; }
    .project-timeline-item:last-child { padding-bottom: 0; }
    .project-timeline-item::before { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
    .project-timeline-item:last-child::before { display: none; }
    .project-timeline-dot { position: relative; z-index: 1; width: 16px; height: 16px; border: 3px solid var(--surface-container-lowest); border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 1px var(--brand-2); }
    .project-timeline-copy strong { display: block; overflow-wrap: anywhere; }
    .project-timeline-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
    .project-timeline-item time { color: var(--muted); font-size: 11px; white-space: nowrap; }
    .project-control-room { display: grid; gap: 14px; }
    .project-control-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
    .project-control-head h2 { margin: 4px 0; font-size: 24px; letter-spacing: -.035em; }
    .project-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .project-control-card { display: grid; gap: 8px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-container-lowest); }
    .project-control-card h3 { margin: 0; font-size: 16px; }
    .project-control-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .project-control-card .btn { width: fit-content; margin-top: 2px; }
    .project-control-card.is-alert { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--surface-container-lowest)); }
    .project-cockpit { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.55fr); gap: 12px; padding: 12px; border-radius: 22px; background: #0d1620; color: #fff; }
    .project-cockpit-identity { display: flex; flex-direction: column; justify-content: space-between; min-height: 270px; padding: 22px; border-radius: 16px; background: #1c3a5e; }
    .project-cockpit-identity .eyebrow { color: rgba(255,255,255,.7); }
    .project-cockpit-identity h1 { margin: 18px 0 8px; color: #fff; font-size: clamp(28px, 5vw, 48px); letter-spacing: -.06em; overflow-wrap: anywhere; }
    .project-cockpit-identity p { margin: 0; color: rgba(255,255,255,.76); line-height: 1.45; }
    .project-cockpit-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.24); }
    .project-cockpit-code code { color: #fff; font: 700 12px var(--font-mono); letter-spacing: .04em; overflow-wrap: anywhere; }
    .project-cockpit-status { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.82); font-size: 12px; font-weight: 800; }
    .project-cockpit-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8bf0b7; box-shadow: 0 0 0 4px rgba(139,240,183,.18); }
    .project-cockpit-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: stretch; }
    .project-cockpit-action { display: flex; min-height: 128px; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: #172535; color: #fff; text-align: left; cursor: pointer; transition: background .18s ease, transform .18s ease; }
    .project-cockpit-action:hover, .project-cockpit-action:focus-visible { background: rgba(255,255,255,.14); transform: translateY(-2px); }
    .project-cockpit-action svg { width: 24px; height: 24px; color: #9be8ba; }
    .project-cockpit-action strong { font-size: 15px; }
    .project-cockpit-action span { color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.35; }
    .project-command-shell { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-container-lowest); color: var(--ink); }
    .project-settings-entry { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-container-lowest); color: var(--ink); text-align: left; cursor: pointer; }
    .project-settings-entry b, .project-settings-entry small { display: block; }
    .project-settings-entry small { margin-top: 5px; color: var(--muted); }
    .project-settings-entry > span:last-child { font-size: 28px; color: var(--muted); }
    .project-settings-shell .project-settings-identity h2 { margin: 8px 0 4px; }
    .project-settings-detail { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
    .project-settings-detail > span { color: var(--muted); font-size: 13px; }
    .project-settings-detail > div { display: flex; align-items: center; gap: 8px; }
    .project-command-identity { display: grid; align-content: start; min-height: 310px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-container-low); }
    .project-command-kicker { color: var(--brand-2); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .project-command-identity h1 { margin: 14px 0 8px; color: var(--ink); font-size: clamp(38px, 10vw, 64px); letter-spacing: -.065em; overflow-wrap: anywhere; }
    .project-command-identity p { max-width: 35ch; color: var(--muted); line-height: 1.45; }
    .project-command-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 22px; }
    .project-command-meta span { display: grid; gap: 4px; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
    .project-command-meta b { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
    .project-command-dot { width: 7px; height: 7px; border-radius: 50%; background: #8bf0b7; }
    .project-command-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding: 12px 0 0; border-top: 1px solid var(--line); }
    .project-command-code code { color: var(--brand); font: 700 12px var(--font-mono); letter-spacing: .05em; overflow-wrap: anywhere; }
    .project-command-code .copy-confirmed { color: #2f9b62; animation: project-copy-confirm .22s cubic-bezier(.16,1,.3,1); }
    .project-command-contents { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-container-lowest); }
    .project-command-contents h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
    .project-command-contents p { color: var(--muted); font-size: 13px; }
    .project-command-content-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .project-command-content-list span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface-container-low); font-size: 12px; font-weight: 700; }
    .project-command-actions { display: none; }
    .project-command-action { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #172535; color: #fff; text-align: left; transition: background .18s ease, transform .18s ease; }
    .project-command-action:hover, .project-command-action:focus-visible { background: #21364c; transform: translateX(2px); }
    .project-command-action-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #274666; color: #9be8ba; }
    .project-command-action-icon svg { width: 18px; height: 18px; }
    .project-command-action strong, .project-command-action small { display: block; }
    .project-command-action small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: 11px; }
    .project-command-action > b { color: #9be8ba; font-size: 18px; }
    .project-command-identity { animation: project-command-arrive .42s cubic-bezier(.16,1,.3,1) both; }
    @keyframes project-command-arrive { from { opacity: .72; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes project-copy-confirm { from { transform: scale(.72) rotate(-10deg); } to { transform: scale(1) rotate(0); } }
    @media (prefers-reduced-motion: reduce) {
      .project-command-identity, .project-command-code .copy-confirmed { animation: none; }
    }
    body.dark .project-command-shell { border-color: var(--line); background: var(--panel); color: #fff; }
    body.dark .project-command-identity { border-color: transparent; background: #1c3a5e; }
    body.dark .project-command-kicker { color: #9be8ba; }
    body.dark .project-command-identity h1 { color: #fff; }
    body.dark .project-command-identity p { color: rgba(255,255,255,.74); }
    body.dark .project-command-meta span { color: rgba(255,255,255,.86); }
    body.dark .project-command-meta b { color: rgba(255,255,255,.56); }
    body.dark .project-command-code { border-color: rgba(255,255,255,.2); }
    body.dark .project-command-code code { color: #fff; }
    .project-information { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--brand-2); border-radius: 20px; background: color-mix(in srgb, var(--brand-2) 6%, var(--surface-container-lowest)); }
    .project-information-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 4px 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--brand-2) 22%, var(--line)); }
    .project-information-head h1 { margin: 5px 0 6px; font-size: clamp(30px, 6vw, 50px); letter-spacing: -.06em; overflow-wrap: anywhere; }
    .project-information-head p { max-width: 58ch; margin: 0; color: var(--muted); line-height: 1.5; }
    .project-information-status { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--green); font-size: 12px; font-weight: 800; white-space: nowrap; }
    .project-information-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .project-identity-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 10px; }
    .project-identity-code { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 10px; background: var(--surface-container-lowest); color: var(--brand-2); font: 800 13px var(--font-mono); letter-spacing: .05em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-2) 20%, var(--line)); }
    .project-identity-copy { width: 28px; height: 28px; min-height: 28px; color: var(--brand-2); }
    .project-identity-meta { color: var(--muted); font-size: 12px; font-weight: 700; }
    .project-information-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
    .project-information-cell { display: grid; gap: 5px; min-width: 0; padding: 14px; background: var(--surface-container-lowest); }
    .project-information-cell span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
    .project-information-cell strong, .project-information-cell code { color: var(--ink); overflow-wrap: anywhere; }
    .project-information-cell code { color: var(--brand-2); font: 700 13px var(--font-mono); }
    .project-contents { display: grid; gap: 10px; }
    .project-contents h2 { margin: 0; font-size: 18px; }
    .project-contents-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .project-content-tag { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 700; background: var(--surface-container-low); }
    .project-section-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 4px; }
    .member-roster { display: grid; gap: 10px; }
    .member-roster + h3 { margin-top: 18px; }
    .member-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-lowest); }
    .member-row-info { min-width: 0; flex: 1; }
    .member-row-info strong { display: block; overflow-wrap: anywhere; }
    .member-row-info span { display: block; color: var(--outline); font-size: 12px; margin-top: 2px; }
    .member-role-heading { display: flex; align-items: baseline; gap: 8px; }
    .member-role-count { color: var(--outline); font-size: 12px; font-weight: 600; }
    @media (max-width: 640px) {
      .project-hero { align-items: stretch; flex-direction: column; }
      .project-overview-meta { grid-template-columns: 1fr; }
      .project-overview-actions > * { flex: 1 1 160px; }
      .project-workspace-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .project-access-intro { align-items: flex-start; }
      .project-command-head { flex-direction: column; }
      .project-command-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .project-control-head { align-items: flex-start; }
      .project-control-grid { grid-template-columns: 1fr; }
      .project-cockpit { grid-template-columns: 1fr; }
      .project-cockpit-identity { min-height: 220px; }
      .project-cockpit-actions { grid-template-columns: 1fr 1fr; }
      .project-cockpit-action { min-height: 92px; padding: 14px; }
      .project-command-shell { grid-template-columns: 1fr; }
      .project-command-identity { min-height: 0; }
      .project-information-head { flex-direction: column; }
      .project-compact-switcher { align-items: stretch; flex-direction: column; }
      .project-compact-switcher details { width: 100%; }
      .project-information-grid { grid-template-columns: 1fr; }
      .project-access-grid { grid-template-columns: 1fr; }
      .project-access-panel-wide { grid-column: auto; }
      .project-directory-head { align-items: flex-start; }
      .project-directory-card { grid-template-columns: 1fr; gap: 14px; }
      .project-directory-list { grid-template-columns: 1fr; max-height: 58vh; }
      .project-directory-card-action { justify-content: stretch; }
    .project-directory-card-action > * { width: 100%; }
      .member-row { flex-wrap: wrap; }
      .member-row .btn-row { width: 100%; }
    }
    .team-plan-card h2 { font-size: 24px; }
    .team-plan-card .team-count-value { display: block; font-size: 30px; line-height: 1.1; font-weight: 700; }
    .team-plan-card .team-count-label { font-size: 15px; margin-top: 4px; }
    .team-plan-card .upgrade-summary { font-size: 15px; font-weight: 600; }
    .team-plan-card > div:first-child { flex-wrap: wrap; }
    .team-plan-card > div:first-child > .pill { width: min(900px, 100%); min-height: 44px; justify-content: center; text-align: center; }
    /* The QR sits beside the code, never instead of it: the code still has to be
       readable and copyable for anyone who cannot scan. Fixed white ground and a
       little padding in BOTH themes — a scanner needs the quiet zone and the
       usual dark-on-light polarity, so this one element does not follow the
       theme. */
    .team-group-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .team-group-qr, .pm-code-qr { flex: none; width: 92px; height: 92px; padding: 6px; border: 0; border-radius: 12px !important; background: #fff; cursor: pointer; }
    .team-group-qr:empty, .pm-code-qr:empty { display: none; }
    .team-group-qr svg, .pm-code-qr svg { display: block; width: 100%; height: 100%; }
    /* .pm-code is a `1fr auto` grid: the code takes the wide left column and the
       Copy button the narrow right one. Putting the QR in that same right column
       stacks it under Copy instead of stealing width from the code, which was
       forcing the code to wrap onto two lines. */
    .pm-code-qr { grid-column: 2; justify-self: end; width: 76px; height: 76px; padding: 5px; }
    .team-group-code { display: grid; gap: 10px; margin-top: 14px; }
    .team-group-code strong { display: block; font-size: 14px; }
    .team-group-code code { display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--surface-container-low); font-family: var(--font-mono); font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
    #taskForm > .form-card:nth-of-type(1) .section-title b { border-radius: 30px; }
    #taskForm > .form-card:nth-of-type(2) .section-title b { border-radius: 20px; border-width: 0; }
    #reportForm > .form-card .section-title b { border-radius: 30px; }
    #reportForm .file-picker-ui { border-radius: 30px; }
    .form-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:6px; }
    .dashboard-main-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:18px; align-items:start; }
    .compact-actions .btn-row { gap: 6px; }
    @media (max-width: 1180px) {
      .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dashboard-main-grid { grid-template-columns: 1fr; }
      .content { max-width: 100%; }
    }
    @media (max-width: 980px) {
      .app { grid-template-columns: 1fr; }
      .sidebar { position: fixed; inset: 0 auto 0 0; width: 286px; transform: translateX(-105%); transition: .2s ease; z-index: 60; box-shadow: var(--shadow); }
      .sidebar.open { transform: none; }
      .mobile-menu { display: grid; place-items: center; }
      .topbar { padding: 10px 12px; }
      .profile span { display: none; }
      /* Body/#root is the scroller on phones (see the max-width:980px block
         below). .content must flow to its natural height so the page scrolls;
         a fixed height here (it used to be a hardcoded 675px) trapped every
         non-dashboard route in a stub-height inner scroller that would not pan
         on tall Android devices (Galaxy S Ultra), i.e. "can't scroll". The
         dashboard route already forced height:auto to dodge this; this makes
         every route behave the same. */
      .content { padding: 16px 12px 92px; }
      .page-head, .login-card { grid-template-columns: 1fr; display: grid; }
      .two, .three, .four, .form-grid { grid-template-columns: 1fr; }
      .dashboard-main-grid { grid-template-columns: 1fr; }
      .login-hero { min-height: auto; }
      .map-page, .map-layout, #map { height: 100vh; min-height: 100vh; }
      .map-tools-button { right: 10px; top: 10px; max-width: calc(50% - 14px); justify-content: center; }
      .map-count-badge { top: auto; right: 10px; bottom: 76px; }
      .map-home-button { left: 10px; top: 10px; max-width: calc(50% - 14px); justify-content: center; }
      .map-follow-button { left: 10px; bottom: 76px; }
      .map-floating-panel {
        left: 10px;
        right: 10px;
        bottom: 132px;
        width: auto;
        max-height: 32vh;
      }
    }
    @media (max-width: 720px) {
      body { font-size: 13px; }
      .topbar { min-height: 58px; align-items: center; gap: 8px; }
      .topbar > div:first-of-type .muted { display: none; }
      .search { display: none; }
      .content { padding: 12px 10px 88px; gap: 12px; }
      .page-head { gap: 10px; }
      h1 { font-size: 24px; line-height: 30px; }
      h2 { font-size: 17px; line-height: 23px; }
      .card, .form-card { padding: 14px; border-radius: 10px; }
      .kpi { min-height: 92px; }
      .kpi strong { font-size: 23px; }
      .btn { width: 100%; min-height: 46px; padding: 10px 12px; }
      .btn-row { display: grid; grid-template-columns: 1fr; width: 100%; }
      .table-wrap { border-radius: 10px; }
      table { min-width: 620px; font-size: 12px; }
      th, td { padding: 10px 9px; }
      .report-table { display: none; }
      .mobile-report-cards { display: grid; gap: 12px; }
      .report-mobile-actions .btn-row { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
      .report-mobile-actions .btn { width: 100%; min-height: 42px; }
      .section-title { align-items: flex-start; gap: 10px; margin-bottom: 14px; }
      .section-title h2 { font-size: 20px; line-height: 26px; }
      .form-actions { display: grid; gap: 12px; }
      .login-screen { padding: 10px; align-items: stretch; }
      .login-card { min-height: calc(100vh - 20px); }
      .login-hero { padding: 20px; gap: 18px; }
      .login-form { padding: 20px; align-content: start; }
      .modal-backdrop { align-items: end; padding: 10px; }
      .modal-backdrop.modal-backdrop-centered { align-items: center; }
      /* Join a project opens all the way, not as a card floating in the middle
         of a page you can still see around. It rises from the bottom edge and
         fills the visible viewport — --visible-viewport-height, not 100vh,
         because on a phone 100vh is the LARGE viewport and would run the sheet
         under the browser bar. */
      .modal-backdrop.join-sheet { padding: 0; align-items: stretch; }
      .modal-backdrop.join-sheet > form.modal,
      .modal-backdrop.join-sheet > .modal {
        width: 100% !important;
        max-width: none !important;
        height: var(--visible-viewport-height, 100vh);
        max-height: none;
        margin: 0;
        border-radius: 0;
        /* The dialog carries `display:grid` in an inline style, and an inline
           declaration only loses to !important. Flex is what makes the
           margin-top:auto below actually push the actions to the foot — in a
           grid with align-content:start an auto margin has no free space in
           its own row track to eat. */
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
        padding: max(22px, calc(env(safe-area-inset-top, 0px) + 14px)) 18px max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
      }
      /* Push the two actions to the bottom of the sheet so the tall surface has
         a foot instead of a long empty tail. */
      .modal-backdrop.join-sheet > .modal > .btn-row,
      .modal-backdrop.join-sheet > form.modal > .btn-row { margin-top: auto; }

      .modal { max-height: calc(100vh - 20px); padding: 14px; border-radius: 12px; }
      /* A bottom-anchored dialog is a sheet, not a floating card -- it should
         rise from the edge it lives on, not fade in from the void. The
         centered variant (join dialog, confirmations) keeps the rise-in above. */
      .modal-backdrop:not(.modal-backdrop-centered) > .modal,
      .modal-backdrop:not(.modal-backdrop-centered) > form.modal { animation: modalSheetIn .3s cubic-bezier(.16,1,.3,1) both; }
      .modal-backdrop.closing:not(.modal-backdrop-centered) > .modal,
      .modal-backdrop.closing:not(.modal-backdrop-centered) > form.modal { animation: modalSheetOut .18s cubic-bezier(.4,0,1,1) both; }
      .toast { left: 10px; right: 10px; bottom: 78px; max-width: none; }
      .map-floating-panel { bottom: 126px; max-height: 34vh; }
      .point-detail .btn-row { grid-template-columns: 1fr; }
      .map-count-badge { left: 10px; right: 10px; text-align: center; bottom: 70px; font-size: 12px; }
      .map-follow-button { bottom: 172px; width: 46px; max-width: none; }
    }
    /* iOS keyboard: release the fixed card height so focused fields remain visible. */
    @media (max-width: 720px) and (max-height: 600px) {
      body.login-active .login-screen { height: 100%; min-height: 100%; overflow-y: auto; align-items: flex-start; }
      body.login-active .login-card { min-height: auto; max-height: none; }
      body.login-active .login-form { max-height: none; overflow-y: visible; }
    }
    @media (max-width: 430px) {
      /* No .content padding here: the ≤980px block above owns the gutter now
         (it comes later in the file, so anything set here was already dead --
         it claimed 8px while the page actually rendered 12px). */
      .card, .form-card { padding: 12px; }
      .brand strong, .profile strong { font-size: 16px; }
      h1 { font-size: 22px; line-height: 28px; }
      .point-meta { grid-template-columns: 90px minmax(0, 1fr); }
      .map-home-button, .map-tools-button { padding-inline: 12px; font-size: 12px; }
      .map-floating-panel { bottom: 164px; max-height: 30vh; }
      .map-locate-button { bottom: 112px; }
      table { min-width: 560px; }
    }
    /* SewerSite visual world: "Site Plan / Survey Drawing" -- blueprint-paper
       ground, deep ink-blue linework, safety-orange accent for status. This
       replaces the prior green SaaS palette; see PRODUCT.md/DESIGN.md for
       the direction contract. Keeps current app logic, data and responsive
       structure intact. */
    :root {
      --bg: #eceff1;
      --panel: #ffffff;
      --panel-soft: #e4ebf0;
      --surface: #ffffff;
      --surface-container: #dde6ec;
      --surface-container-low: #e9eff3;
      --surface-container-lowest: #ffffff;
      --surface-variant: #ccd8e0;
      --ink: #16233a;
      --muted: #5b6b7a;
      --outline: #7c8fa0;
      --line: #c3d0da;
      --outline-variant: #aebdc9;
      --brand: #1c3a5e;
      --brand-2: #2f6690;
      --brand-soft: #d4e4ef;
      --blue: #2f6690;
      --amber: #d9622b;
      --red: #b23a2f;
      --green: #3f7d52;
      --charcoal: #16233a;
      --cream: #ffffff;
      --shadow: 0 18px 48px rgba(20, 32, 28, .16);
      --shadow-soft: 0 8px 22px rgba(20, 32, 28, .10);
      /* The page canvas (html/body/#root/.app/.main) all read this, so the
         off-white-to-mint wash under the blueprint grid is one definition
         that stays in sync everywhere instead of a flat --bg repeated per
         element. */
      --page-wash:
        linear-gradient(180deg, #eceff1 0%, #b2dfdb 100%),
        repeating-linear-gradient(0deg, rgba(28,58,94,.05) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(28,58,94,.05) 0 1px, transparent 1px 28px);
      /* The colours the wash starts and finishes on, so the strips painted
         beyond either end of the page can continue it exactly. */
      --page-wash-start: #eceff1;
      --page-wash-edge: #b2dfdb;
      /* impeccable.style-style card treatment: a hairline tint (not a flat
         white slab, not a loud gradient) so elevation reads from the border
         + a subtle background shift rather than heavy shadow. Text keeps
         14.7:1+ contrast since the tint is only 6% strength. */
      --card-tint: color-mix(in srgb, var(--surface-container-lowest) 94%, #2f9e8f 6%);
      --radius: 3px;
      --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
      --text-caption: 12px;
      --text-footnote: 13px;
      --text-subheadline: 15px;
      --text-body: 17px;
      --text-headline: 17px;
      --text-title-3: 20px;
      --text-title-2: 22px;
      --text-title-1: 28px;
      --text-large-title: 34px;
      --weight-regular: 400;
      --weight-medium: 500;
      --weight-semibold: 600;
      --weight-bold: 700;
      font-family: var(--font-system);
    }
    body.dark {
      --bg: #0d1620;
      --panel: #142433;
      --panel-soft: #1a2e40;
      --surface: #101f2c;
      --surface-container: #16293a;
      --surface-container-low: #1a3040;
      --surface-container-lowest: #0c1620;
      --surface-variant: #223c50;
      --ink: #e8eef3;
      --muted: #9fb2c0;
      --outline: #7f95a6;
      --line: #2a4256;
      --outline-variant: #35526a;
      --brand: #7fb0e0;
      --brand-2: #5a94c9;
      --cream: #0c1620;
      --shadow: 0 18px 54px rgba(0, 0, 0, .45);
      --shadow-soft: 0 10px 28px rgba(0, 0, 0, .34);
    }
    /* The one place the page wash is painted.
       --page-wash is a vertical gradient. Painting it on html, body, #root,
       .app and .content at once — as this file used to — means five boxes of
       different heights each drawing their own copy, so at any given screen
       position each shows a different point of its gradient and every box edge
       becomes a visible colour step. Left on body alone it propagates to the
       canvas, which covers the whole scrollable area and extends its edge
       colours into the overscroll region, so it still tracks scroll depth and
       no seam can form. Nothing else in the app shell may set a background. */
    body {
      /* Five layers: a strip above the page, a strip below it, then the wash.
         A background TILES outside its positioning area, and that area is the
         page — so past the last pixel of content the gradient restarted at its
         top colour, a hard line under the last card. Filling past the page with
         one flat colour only moves the problem, because the wash begins and
         ends on different colours: choosing the end colour cut the top instead,
         which is the mint band that appeared under the topbar on a pull-down.
         Stretching the wash itself covers both ends but washes them out by
         ~12/255, a real change to the design.
         So the two ends get their own strips, half a viewport each, sitting
         just outside the page and painted the exact colour the wash reaches
         there. The propagated body background paints over the whole canvas,
         which is why these land in the rubber-band area — the same reason the
         tiling showed there. The wash keeps background-size:auto, so the page
         itself is pixel-for-pixel what it was.
         overscroll-behavior on html/body removes the region altogether where it
         is supported; the strips are what covers it where it is not. */
      background:
        linear-gradient(var(--page-wash-start), var(--page-wash-start)),
        linear-gradient(var(--page-wash-edge), var(--page-wash-edge)),
        var(--page-wash);
      background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
      background-size: 100% 50vh, 100% 50vh, auto, auto, auto;
      background-position: 0 -50vh, 0 calc(100% + 50vh), 0 0, 0 0, 0 0;
      background-color: var(--page-wash-edge);
      font-family: var(--font-system);
    }
    body.dark {
      background: var(--page-wash);
    }
    h1, h2, h3, .brand strong, .profile strong, .kpi strong, .section-title h2 {
      font-family: var(--font-system);
      letter-spacing: -.01em;
    }
    .app { grid-template-columns: 272px 1fr; }
    .sidebar {
      padding: 20px 16px;
      background: var(--brand);
      border-right: 1px solid rgba(0,0,0,.2);
      color: #eef4ec;
    }
    body.dark .sidebar {
      background: var(--surface-container-lowest);
      border-right: 1px solid var(--line);
      color: var(--ink);
    }
    .brand {
      padding: 6px 6px 14px;
      border-bottom: 1px dashed rgba(238,244,236,.28);
      margin-bottom: 4px;
    }
    body.dark .brand { border-bottom: 1px dashed var(--line); }
    .brand-mark, .avatar {
      width: 40px;
      height: 40px;
      border-radius: var(--radius);
      background: var(--amber);
      color: #241304;
      font-family: var(--font-mono);
      font-weight: 700;
      box-shadow: none;
    }
    .brand strong { color: #fff; font-size: 17px; font-weight: 600; }
    body.dark .brand strong { color: var(--ink); }
    .profile strong { color: var(--ink); font-size: 17px; font-weight: 600; }
    .brand span, .profile span {
      color: var(--outline);
      font-size: 12px;
      font-family: var(--font-mono);
    }
    .muted {
      color: var(--muted);
      font-size: 12px;
      font-family: var(--font-mono);
    }
    .sidebar .brand span, .sidebar .muted { color: rgba(238,244,236,.6); }
    body.dark .sidebar .brand span, body.dark .sidebar .muted { color: var(--outline); }
    .project-card {
      padding: 13px 14px;
      border: 1px dashed rgba(238,244,236,.3);
      border-radius: var(--radius);
      background: rgba(255,255,255,.04);
      box-shadow: none;
    }
    body.dark .project-card {
      border: 1px dashed var(--line);
      background: var(--panel-soft);
    }
    .project-card small, .eyebrow {
      color: var(--amber);
      font-size: 10px;
      letter-spacing: .1em;
      font-weight: 700;
      font-family: var(--font-mono);
    }
    .nav-group { gap: 3px; }
    .nav-label {
      margin: 14px 10px 4px;
      color: rgba(238,244,236,.5);
      font-size: 10px;
      letter-spacing: .12em;
      font-weight: 700;
      font-family: var(--font-mono);
    }
    body.dark .nav-label { color: var(--outline); }
    .nav-btn {
      min-height: 42px;
      padding: 9px 12px;
      border-radius: var(--radius);
      color: rgba(238,244,236,.82);
      font-weight: 500;
      border-left: 2px solid transparent;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    body.dark .nav-btn { color: var(--muted); }
    .nav-btn:hover {
      background: rgba(255,255,255,.06);
      color: #fff;
    }
    .nav-btn.active {
      background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
      color: #fff;
      font-weight: 700;
      border-left-color: var(--amber);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }
    body.dark .nav-btn:hover {
      background: var(--surface-container-low);
      color: var(--brand-2);
    }
    body.dark .nav-btn.active {
      background: linear-gradient(155deg, var(--surface-container-low), var(--surface-container));
      color: var(--brand-2);
    }
    .nav-btn svg { width: 17px; height: 17px; }
    .nav-btn .nav-text { min-width: 0; flex: 1; }
    .notification-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: #cf2e24;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      box-shadow: 0 0 0 2px rgba(255,255,255,.85);
      margin-left: auto;
      flex: none;
    }
    /* Only the <=980px block reset these, so at wider widths the buttons fell
       back to the UA `buttonface`, which paints mid-grey under color-scheme:
       dark. Reset it unconditionally so the nav is never UA-coloured. */
    .bottom-nav button { position: relative; background: transparent; color: inherit; }
    .topbar-map-button { width: 44px; height: 44px; flex: none; display: none; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-container-lowest); color: var(--brand-2); box-shadow: var(--shadow-soft); }
    .topbar-map-button svg { width: 21px; height: 21px; }
    body.dark .topbar-map-button { background: var(--panel); color: var(--brand-2); border-color: var(--line); }
    .home-duty-card {
      margin-bottom: 16px;
      border-left: 6px solid var(--brand-2);
    }
    .home-duty-card.urgent {
      border-color: #ff3131;
      background: linear-gradient(135deg, rgba(255,49,49,.13), var(--panel) 42%);
    }
    body.dark .home-duty-card.urgent {
      background: linear-gradient(135deg, rgba(255,49,49,.2), var(--panel) 48%);
    }
    .report-file-input input[type="file"] {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .file-picker-ui {
      min-height: 92px;
      border: 1px dashed var(--outline-variant);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      color: var(--ink);
    }
    .file-picker-ui strong { display: block; color: var(--ink); }
    .file-picker-ui span { color: var(--muted); font-size: 12px; }
    .file-picker-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius);
      background: var(--surface-container-low);
      display: grid;
      place-items: center;
      color: var(--brand-2);
      flex: none;
    }
    /* Site Engineer reports share the PM duty wizard's rail, motion and footer.
       Only the content treatment differs: each step is one compact field sheet. */
    .se-report-wizard .duty-wizard-stage { grid-template-columns: minmax(0, 1fr); }
    .se-report-wizard .dw-panel {
      gap: 15px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-soft);
    }
    .se-report-wizard .dw-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--line);
    }
    .se-report-wizard .dw-panel-head h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
    .se-report-wizard .dw-panel-head time,
    .se-report-wizard .dw-panel-head span { color: var(--muted); font: 600 11px/1.3 var(--font-mono); text-align: right; }
    .se-report-wizard .form-grid { gap: 13px; }
    .se-report-duty-context {
      padding: 13px 14px;
      border-left: 3px solid var(--brand-2);
      border-radius: 0 12px 12px 0;
      background: var(--surface-container-low);
    }
    .se-report-duty-context strong,
    .se-report-duty-context p { display: block; margin: 4px 0 0; }
    .se-report-duty-context p { color: var(--muted); font-size: 13px; line-height: 1.45; }
    .report-final-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-comment-field { display: grid; gap: 7px; }
    .report-comment-field textarea { min-height: 126px; }
    .se-report-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .se-report-wizard .duty-wizard-foot .dw-submit { margin-left: auto; }
    /* Match the PM wizard's blue action language in every Site Engineer theme. */
    .se-report-wizard .duty-wizard-foot .dw-back,
    .se-report-wizard .duty-wizard-foot .dw-next,
    .se-report-wizard .duty-wizard-foot .dw-submit {
      background: linear-gradient(155deg, #2f6690, #1c3a5e) !important;
      color: #fff !important;
      border-color: #2f6690 !important;
      box-shadow: 0 8px 20px rgba(28,58,94,.2), inset 0 1px 0 rgba(255,255,255,.14);
    }
    .se-report-wizard .duty-wizard-foot .dw-back:hover,
    .se-report-wizard .duty-wizard-foot .dw-next:hover,
    .se-report-wizard .duty-wizard-foot .dw-submit:hover { filter: brightness(1.08); }
    @media (max-width: 520px) {
      .se-report-wizard .dw-panel { padding: 14px; }
      .se-report-wizard .dw-panel-head { align-items: flex-start; }
      .report-final-grid { grid-template-columns: 1fr; }
      .se-report-wizard .duty-wizard-foot .btn { min-width: 0; flex: 1; }
    }
    body.dark .card,
    body.dark .form-card,
    body.dark table,
    body.dark .control,
    body.dark textarea,
    body.dark .file-picker-ui {
      color: var(--ink);
      background-color: var(--panel);
    }
    body.dark th {
      color: var(--ink);
      background: var(--surface-container);
    }
    body.dark td,
    body.dark label span,
    body.dark .muted {
      color: var(--muted);
    }
    .sync-box {
      padding: 13px 14px;
      border-radius: var(--radius);
      background: rgba(0,0,0,.22);
      border: 1px dashed rgba(238,244,236,.24);
      box-shadow: none;
      font-family: var(--font-mono);
      font-size: 12px;
    }
    body.dark .sync-box {
      background: var(--surface-container-low);
      border: 1px dashed var(--line);
      color: var(--ink);
    }
    .sync-alert {
      border: 1px solid rgba(196,77,67,.35);
      border-left: 4px solid var(--red);
      background: rgba(196,77,67,.08);
      color: var(--ink);
    }
    .sync-alert strong { color: var(--red); }
    /* Reports waiting offline is the app working as designed, not a failure --
       red would teach the engineer to fear a normal day in a basement. */
    /* Specific enough to outrank both `.card` (border-color, later in the file)
       and `body:not(.dark) .card` (background) -- otherwise the amber rail goes
       grey and the warm tint is replaced by the ordinary card tint. */
    .card.sync-alert.sync-queued {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      border: 1px solid color-mix(in srgb, var(--warning, #d99632) 42%, var(--line));
      border-left: 4px solid var(--warning, #d99632);
      background: color-mix(in srgb, var(--warning, #d99632) 12%, var(--surface));
    }
    .sync-queued strong { color: var(--ink); }
    .sync-queued p { margin: 4px 0 0; }
    .sync-queued .btn { width: auto; flex: none; }
    .topbar {
      min-height: 62px;
      padding: 10px 20px;
      background: rgb(255,253,247);
    }
    body.dark .topbar { background: rgb(18,30,25); }
    .mobile-menu {
      width: 40px;
      height: 40px;
      background: var(--panel);
    }
    .search input, .control, textarea {
      min-height: 46px;
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      padding: 11px 14px;
      box-shadow: inset 0 1px 2px rgba(19,40,32,.04);
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .search input {
      font-family: var(--font-mono);
      font-size: 13px;
    }
    .search input:focus, .control:focus, textarea:focus {
      border-color: var(--brand-2);
      background: var(--surface-container-lowest);
      box-shadow: 0 0 0 3px rgba(47,107,79,.14), inset 0 1px 2px rgba(19,40,32,.04);
      outline: none;
    }
    .profile {
      padding: 5px;
      background: transparent;
      border-color: transparent;
    }
    h1 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; font-weight: 600; }
    h2 { font-size: 17px; font-weight: 600; }
    h3 { font-size: 14px; font-weight: 600; }
    .card {
      background: var(--surface-container-lowest);
      border-color: var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    }
    /* impeccable.style card treatment, light mode only -- dark keeps the
       flat elevated surface so cards still read as raised above --bg. */
    body:not(.dark) .card { background: var(--card-tint); }
    .card:hover {
      box-shadow: var(--shadow);
      border-color: var(--outline-variant);
      transform: translateY(-2px);
    }
    .kpi {
      min-height: 116px;
      border-left: 3px solid var(--amber);
    }
    .kpi strong {
      font-size: 30px;
      line-height: 1;
      color: var(--brand-2);
      font-weight: 700;
    }
    .kpi-green { border-left-color: var(--brand-2); }
    .kpi-green strong { color: var(--brand-2); }
    .kpi-amber { border-left-color: var(--amber); }
    .kpi-amber strong { color: #b3760f; }
    body.dark .kpi-amber strong{ color: var(--amber); }
    .kpi-red { border-left-color: var(--red); }
    .kpi-red strong { color: var(--red); }
    .kpi-blue { border-left-color: var(--blue); }
    .kpi-blue strong { color: var(--blue); }
    .pill {
      min-height: 24px;
      padding: 4px 9px;
      color: var(--brand-2);
      font-weight: 600;
      font-size: 11px;
      font-family: var(--font-mono);
      letter-spacing: .02em;
    }
    .pill.red { color: var(--red); background: #f8e3de; }
    .pill.blue { color: var(--blue); background: #e0edf1; }
    .pill.amber { color: #7a4212; background: #f7e2c8; }
    .pill.green { color: var(--brand-2); background: #dcefe0; }
    .pill.purple { color: #5b3a9b; background: #e9e2f7; }
    body.dark .pill.red { background: rgba(171,61,47,.18); }
    body.dark .pill.blue { background: rgba(42,109,140,.18); }
    body.dark .pill.amber { background: rgba(200,114,42,.18); }
    body.dark .pill.green { background: rgba(47,107,79,.2); }
    body.dark .pill.purple { background: rgba(91,58,155,.2); }
    .btn {
      min-height: 42px;
      padding: 10px 16px;
      border-radius: var(--radius);
      background: linear-gradient(155deg, var(--brand-2), var(--brand));
      color: #fff;
      font-weight: 600;
      box-shadow: 0 8px 20px rgba(0,55,35,.2), inset 0 1px 0 rgba(255,255,255,.14);
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
    }
    .btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,55,35,.24), inset 0 1px 0 rgba(255,255,255,.16); }
    .btn:active { transform: scale(.97); filter: brightness(.98); }
    @media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
    .btn.secondary {
      background: var(--panel);
      color: var(--brand);
      border: 1px solid var(--line);
      box-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    .btn.secondary:hover { transform: translateY(-1px); }
    .btn.secondary:hover { background: var(--panel-soft); }
    .btn.warn { background: var(--amber); color: #241304; }
    table { background: var(--surface-container-lowest); }
    th, td { padding: 12px 12px; }
    th {
      font-size: 10px;
      letter-spacing: .08em;
      background: var(--panel-soft);
      font-family: var(--font-mono);
      font-weight: 600;
    }
    td { font-size: 13px; }
    tbody tr:hover { background: var(--panel-soft); }
    .map-page { background: #d8dcc9; }
    body.dark .map-page { background: var(--bg); }
    #map { background: #dee2cd; }
    .map-count-badge, .map-tools-button, .map-locate-button {
      border-radius: 30px;
      background: rgba(255,253,247,.97);
      color: var(--brand);
      font-weight: 600;
      font-family: var(--font-mono);
      box-shadow: var(--shadow-soft);
    }
    .map-locate-button { border-radius: 18px; }
    body.dark .map-count-badge,
    body.dark .map-tools-button,
    body.dark .map-locate-button {
      background: rgba(14,24,21,.94);
      color: var(--brand-2);
    }
    body.dark .card,
    body.dark .form-card,
    body.dark .modal,
    body.dark .profile,
    body.dark .bottom-nav,
    body.dark .table-wrap {
      color: var(--ink);
    }
    body.dark .btn.secondary,
    body.dark .toggle-chip,
    body.dark .file-picker-ui,
    body.dark .control,
    body.dark input,
    body.dark select,
    body.dark textarea {
      color: var(--ink);
      background: var(--panel);
      border-color: var(--line);
    }
    body.dark .btn.secondary:hover { background: var(--panel-soft); }
    body.dark .file-picker-ui strong { color: var(--ink); }
    body.dark .file-picker-ui span { color: var(--muted); }
    body.dark .pill { color: var(--brand-2); }
    body.dark .pill.red { color: #ff8a80; }
    body.dark .pill.blue { color: #8fd6ff; }
    body.dark .pill.amber { color: #ffd27a; }
    body.dark .pill.green { color: var(--green); }
    body.dark .pill.purple { color: #c4a5ff; }
    body.dark #map { background: var(--surface-container-lowest); }
    .map-home-button {
      min-height: 44px;
      border-radius: var(--radius);
      font-weight: 600;
    }
    .toggle-chip {
      min-height: 40px;
      background: var(--panel);
      font-weight: 600;
      font-size: 13px;
    }
    .point-detail h2 { font-size: 19px; }
    .house-connection {
      color: var(--red);
      font-weight: 700;
      font-family: var(--font-mono);
    }
    .map-popup-meta, .point-meta {
      font-family: var(--font-mono);
      font-size: 12px;
    }
    /* Map labels sit on the BASEMAP, which does not follow the app theme (OSM is
       always light, satellite is always dark imagery). They therefore carry their
       own fixed, opaque, high-contrast colours -- ink on a near-white chip, with a
       dark outline so the chip also holds on satellite -- in both themes. The old
       rule used var(--brand) for the text, which is a LIGHT colour in dark mode:
       pale text on a pale chip, unreadable. */
    .leaflet-tooltip.mh-label {
      border: 1px solid rgba(10,28,22,.55);
      border-radius: 4px;
      background: rgb(255,255,255);
      color: rgb(12,30,24);
      box-shadow: 0 2px 8px rgba(0,0,0,.35);
      font: 700 11px/1.25 var(--font-mono);
    }
    body.dark .leaflet-tooltip.mh-label { background: rgb(255,255,255); color: rgb(12,30,24); border-color: rgba(10,28,22,.55); }
    .leaflet-tooltip.mh-label::before { border-top-color: rgb(255,255,255); }
    .map-labels-on.show-manhole-labels .leaflet-tooltip.mh-label {
      display: block;
    }
    .pipe-label-icon {
      pointer-events: none;
      width: 1px !important;
      height: 1px !important;
    }
    .pipe-label-text {
      display: none;
      align-items: center;
      flex-direction: column;
      gap: 1px;
      white-space: nowrap;
      transform: translate(-50%, -50%);
      transform-origin: center;
      padding: 4px 6px;
      border-radius: 6px;
      border: 1px solid rgba(10,28,22,.55);
      background: rgb(255,255,255);
      color: rgb(12,30,24);
      box-shadow: 0 2px 8px rgba(0,0,0,.35);
      font: 700 11px/1.25 var(--font-system);
    }
    .pipe-label-text small { font: 700 10px/1.2 var(--font-mono); color: rgb(38,62,52); }
    .pipe-label-text strong { color: inherit; }
    .pipe-label-text small:first-child { font: 700 12px/1.2 var(--font-system); opacity: 1; }
    .map-labels-on.show-pipe-labels .pipe-label-text {
      display: inline-flex;
    }
    body.dark .pipe-label-text {
      background: rgb(255,255,255);
      color: rgb(12,30,24);
      border-color: rgba(10,28,22,.55);
    }
    body.dark .pipe-label-text small { color: rgb(38,62,52); }
    .pipe-info-popup { display:grid; gap:3px; min-width:122px; font-family:var(--font-mono); }
    .pipe-info-popup strong { color:var(--brand); font-size:14px; }
    .pipe-info-popup span { color:var(--muted); font-size:12px; }
    .pipe-info-popup small { color:var(--muted); font-size:11px; }
    .point-meta { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr); align-items: center; }
    label { font-weight: 600; }
    .login-screen { background: var(--page-wash); }
    .login-card {
      background: var(--panel);
      border-radius: 30px;
      box-shadow: var(--shadow);
    }
    .login-hero {
      background:
        linear-gradient(rgba(11,25,20,.9), rgba(11,25,20,.94)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px),
        #163a2e;
    }
    .toast div {
      background: var(--brand);
      border-left: 3px solid var(--amber);
      font-size: 13px;
    }
    .modal {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .progress { height: 8px; background: var(--surface-container); }
    .backend-pre {
      background: #0e1815;
      color: #b9e6a3;
      font: 12px/1.55 var(--font-mono);
    }
    .form-card {
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }
    body:not(.dark) .form-card { background: var(--card-tint); }
    .section-title { border-bottom: 1px dashed var(--outline-variant); }
    .section-title b {
      width: 30px;
      height: 30px;
      border-radius: var(--radius);
      background: var(--amber);
      color: #241304;
      font-size: 12px;
      font-family: var(--font-mono);
      font-weight: 700;
    }
    .section-title h2 { font-size: 22px; line-height: 30px; }
    @media (max-width: 980px) {
      .app { grid-template-columns: 1fr; }
      .sidebar { width: 280px; }
    }
    @media (max-width: 720px) {
      .btn { min-height: 46px; }
      .map-count-badge { font-size: 11px; }
    }
    .sidebar-close,
    .sidebar-backdrop {
      display: none;
    }
    /* Mobile overflow hardening: page scrolls only vertically; wide data stays contained. */
    html, body, #root {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
    .app, .main, .content, .page-head, .grid, .card, .form-card, .form-grid, .dashboard-main-grid,
    .topbar, .login-screen, .login-card, .modal, .backend-pre, label, .btn-row {
      min-width: 0;
      max-width: 100%;
    }
    input, select, textarea, button {
      min-width: 0;
    }
    .content {
      overflow-x: hidden;
    }
    /* `overflow-x: hidden` cannot be paired with `overflow-y: visible`: per the
       CSS overflow axis rules the browser silently promotes the other axis to
       `auto`, so every box that merely wanted to clip a wide table became a
       vertical scroll container. Those containers have nothing to scroll (their
       content is sized by the document), so a touch drag that starts inside one
       is captured by it and goes nowhere -- the page appears frozen on iOS and
       Android web. `overflow-x: clip` clips the same way WITHOUT promoting the
       other axis, so the document stays the one and only vertical scroller.
       The `hidden` declarations above/below are kept as the pre-clip fallback
       (iOS < 16); this block upgrades them wherever `clip` is understood. */
    @supports (overflow: clip) {
      .content {
        overflow-x: clip;
        overflow-y: visible;
      }
    }
    /* .content scrolls its own content independently of body (it has its own
       height + overflow-y:auto on mobile -- see below), so a background set
       on body/.app/.main stays pinned to the viewport frame instead of
       tracking scroll depth, which is what read as a hard cutoff partway
       down a long page. background-attachment:local ties the wash to
       .content's own (full) scrollable height instead, so it stays
       continuous top to bottom of the actual page, not just one screenful. */
    /* The wash is painted ONCE, by body, and propagates to the canvas — see the
       note on `body`. .content must not paint its own copy: a vertical gradient
       drawn by several boxes of different heights shows a different point of
       itself at the same screen position in each, so wherever one box ends the
       one behind steps to another colour. That is the seam that appeared while
       scrolling. */
    .topbar {
      width: 100%;
      max-width: 100vw;
    }
    .topbar > div:first-of-type {
      min-width: 0;
      overflow: hidden;
    }
    .topbar > div:first-of-type strong,
    .topbar > div:first-of-type .muted {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table-wrap {
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
    }
    .form-card, .card {
      overflow-wrap: anywhere;
    }
    @media (max-width: 980px) {
      body.sidebar-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
      }
      body.sidebar-open .main { touch-action: none !important; }
      body.sidebar-open .sidebar,
      body.sidebar-open .sidebar .nav-group { touch-action: pan-y !important; overscroll-behavior: contain !important; }
      html,
      body,
      #root {
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
      }
      /* Only <html> may own the vertical scroll. body/#root inherited
         `overflow-y: auto` above purely to satisfy `overflow-x: hidden`, which
         made each of them a scroll container with nothing to scroll -- and
         `overscroll-behavior-y: none` on top of that stopped the dead container
         from handing the gesture back to the document. Between them a swipe
         could be swallowed outright, which is the "page will not scroll" report
         from phones. The document rubber-band this was suppressing is handled
         by the wash strips on body instead. */
      html {
        overscroll-behavior-y: none;
      }
      body,
      #root {
        overflow-y: visible;
        overscroll-behavior-y: auto;
      }
      .app {
        display: block;
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: visible;
        overscroll-behavior-y: auto;
      }
      .main {
        width: 100%;
        max-width: 100vw;
        min-height: 100%;
        overflow-x: hidden;
      }
      /* Same axis rule as on .content: clip horizontally without turning these
         into vertical scrollers. Surfaces that deliberately own their own
         scroll -- .app.map-mode, .app.settings-mode, the teams command center,
         the chat page, the login screen -- set overflow themselves with higher
         specificity and are unaffected. */
      @supports (overflow: clip) {
        body,
        #root,
        .app:not(.map-mode),
        .main {
          overflow-x: clip;
          overflow-y: visible;
        }
      }
      .sidebar {
        max-width: min(280px, 86vw);
      }
      .sidebar-close {
        margin-left: auto;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(238,244,236,.28);
        border-radius: var(--radius);
        background: rgba(255,255,255,.08);
        color: #fff;
        font-size: 26px;
        line-height: 1;
        font-weight: 600;
      }
      body.dark .sidebar-close {
        border-color: var(--line);
        background: var(--surface-container-low);
        color: var(--ink);
      }
      .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        display: block;
        opacity: 0;
        pointer-events: none;
        background: rgba(11, 21, 17, .48);
        backdrop-filter: blur(2px);
        transition: opacity .18s ease;
      }
      .sidebar.open + .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
      }
      .content {
        width: 100%;
        max-width: 100vw;
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
      }
      .page-head {
        display: grid;
        grid-template-columns: 1fr;
      }
      .form-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    @media (max-width: 720px) {
      .content {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
      }
      .card, .form-card {
        width: 100%;
      }
      .control, input, select, textarea {
        width: 100%;
      }
      table {
        min-width: 0;
        width: 100%;
      }
      .table-wrap table {
        min-width: 560px;
      }
      .table-wrap[style*="overflow-x:hidden"] table {
        min-width: 0;
      }
      .task-table { display: none; }
      .mobile-task-cards { display: grid; gap: 12px; }
      .scurve-table-wrap { display: none; }
      .scurve-mobile-summary { display: grid; gap: 8px; margin-top: 12px; }
      .btn-row {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    @media (max-width: 430px) {
      .content {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
      }
      .section-title {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
      }
      .section-title h2 {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .table-wrap table {
        min-width: 520px;
      }
      .table-wrap[style*="overflow-x:hidden"] table {
        min-width: 0;
      }
    }
    /* Final responsive architecture: distinct desktop, tablet and phone layouts. */
    @media (min-width: 1280px) {
      .app:not(.map-mode) {
        grid-template-columns: 292px minmax(0, 1fr);
      }
      .content {
        max-width: 1440px;
        padding: 32px;
        gap: 22px;
      }
      .dashboard-main-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
        gap: 22px;
      }
      .form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .form-card {
        padding: 28px;
      }
      .grid.four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (min-width: 981px) and (max-width: 1279px) {
      .app:not(.map-mode) {
        grid-template-columns: 260px minmax(0, 1fr);
      }
      .content {
        max-width: 1120px;
        padding: 24px;
      }
      .dashboard-main-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 980px) {
      .topbar {
        position: sticky;
      }
      .mobile-menu {
        flex: 0 0 40px;
      }
      .profile {
        flex: 0 0 auto;
      }
      .grid.two,
      .dashboard-main-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .grid.three,
      .grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      /* The "anchored right" KPI layout (see "Home KPI cards" rule) puts
         the label in a shrinkable column fighting a big auto-sized number
         for space -- fine at full card width, but two cards per row halves
         that width and the number (e.g. "0.00 m") no longer fits next to
         the label without wrapping badly. Fall back to simple stacked
         label/number/pill at this width, where any value length is safe. */
      .content > .grid.four > .kpi,
      .content > .grid.four > .kpi.kpi-link {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        align-content: space-between !important;
        gap: 0 !important;
      }
      .content > .grid.four > .kpi > .muted:first-child {
        grid-column: 1 !important;
        grid-row: auto !important;
        align-self: start !important;
      }
      .content > .grid.four > .kpi > strong {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: start !important;
        text-align: left !important;
        font-size: 28px !important;
      }
      .content > .grid.four > .kpi > .pill {
        grid-column: 1 !important;
        grid-row: auto !important;
      }
      .form-actions {
        align-items: stretch;
      }
      .form-actions > .btn-row {
        justify-self: stretch;
      }
    }
    @media (max-width: 720px) {
      body {
        min-width: 0;
      }
      .topbar {
        gap: 8px;
      }
      .topbar > div:first-of-type strong {
        font-size: 13px;
      }
      .content {
        gap: 12px;
      }
      .page-head {
        margin-bottom: 2px;
      }
      .page-head .btn-row {
        margin-top: 4px;
      }
      .kpi {
        min-height: 86px;
      }
      .kpi strong {
        font-size: 24px;
      }
      .map-page,
      .map-layout,
      #map {
        width: 100vw;
        max-width: 100vw;
      }
    }
    @media (max-width: 390px) {
      .bottom-nav button {
        font-size: 9px;
      }
      .card,
      .form-card {
        padding: 10px;
      }
      .section-title {
        gap: 8px;
      }
      .section-title h2 {
        font-size: 19px;
      }
    }
    /* Phone safe-area coverage for iOS/Android browser chrome and PWA display modes. */
    html {
      min-height: 100%;
      /* No background here on purpose. A background on html wins the canvas and
         stops body's wash propagating to it, so the two gradients — sized to
         two different boxes — disagree and step at html's edge. */
    }
    :root {
      --mobile-safe-top: env(safe-area-inset-top, 0px);
      --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
      --mobile-safe-left: env(safe-area-inset-left, 0px);
      --mobile-safe-right: env(safe-area-inset-right, 0px);
    }
    body {
      min-height: 100vh;
      min-height: 100dvh;
    }
    @media (max-width: 980px) {
      :root {
        /* Keep the first paint geometrically identical to later iOS frames.
           WebView safe-area env values can resolve a frame late during launch. */
        --mobile-safe-top: 0px;
        --mobile-safe-bottom: 0px;
        --mobile-safe-left: 0px;
        --mobile-safe-right: 0px;
      }
      body::before { display: none !important; }
      body {
        /* --bg is the colour the wash STARTS on, so using it here painted the
           area past the page in the gradient's top colour while the page itself
           ended on its bottom one — the hard line under the last card on a
           scrolled page. --page-wash-edge is the colour it ends on. */
        background-color: var(--page-wash-edge);
        min-height: 100vh !important;
      }
      #root { min-height: 100vh !important; }
      .app:not(.map-mode) {
        min-height: 100vh;
      }
      .login-screen {
        min-height: auto;
        padding-bottom: calc(120px + var(--mobile-safe-bottom));
        align-items: start;
      }
      .login-card {
        min-height: auto;
      }
      .app:not(.map-mode) .content {
        padding-bottom: 110px;
      }
      .topbar {
        top: 0;
        min-height: calc(56px + var(--mobile-safe-top));
        padding-top: var(--mobile-safe-top);
        padding-left: max(12px, var(--mobile-safe-left));
        padding-right: max(12px, var(--mobile-safe-right));
        box-shadow: var(--shadow-topbar);
      }
      .sidebar {
        padding-top: calc(20px + var(--mobile-safe-top));
        padding-left: max(16px, var(--mobile-safe-left));
        padding-bottom: calc(20px + var(--mobile-safe-bottom));
      }
    }
    .app.map-mode,
    .app.map-mode .main,
    .app.map-mode .content,
    .app.map-mode .map-page,
    .app.map-mode .map-layout,
    .app.map-mode #map {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      min-height: 100vh;
      min-height: 100dvh;
      max-width: 100vw;
      overflow: hidden;
      background-color: var(--bg);
    }
    .app.map-mode .map-page,
    .app.map-mode .map-layout,
    .app.map-mode #map {
      position: fixed;
      inset: 0;
      bottom: 0;
    }
    .app.map-mode .leaflet-control-zoom {
      display: none !important;
    }
    .app.map-mode .map-tools-button {
      top: max(58px, calc(var(--mobile-safe-top) + 24px));
    }
    .app.map-mode .map-home-button {
      position: fixed;
      top: max(12px, calc(var(--mobile-safe-top) + 8px), calc(env(safe-area-inset-top) + 8px));
      left: max(12px, calc(env(safe-area-inset-left) + 8px));
      width: 50px;
      min-height: 50px;
      height: 50px;
      padding: 0;
      border-radius: 50%;
      justify-content: center;
    }
    .app.map-mode .map-home-button {
      background: #1c3a5e;
      color: #fff;
      border-color: #1c3a5e;
    }
    .app.map-mode .map-locate-button {
      left: auto;
      right: max(12px, var(--mobile-safe-right));
      bottom: max(16px, calc(var(--mobile-safe-bottom) + 10px));
      width: 50px !important;
      height: 50px !important;
      min-height: 50px !important;
      padding: 0;
      border-radius: 30px !important;
      font-size: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      background: var(--surface-container-lowest);
      color: var(--ink);
      border-color: var(--line);
    }
    .app.map-mode .map-locate-button .map-location-icon {
      display: block;
      width: 24px;
      height: 29px;
      flex: 0 0 auto;
      margin: 0;
      overflow: visible;
    }
    .app.map-mode .map-quick-tools {
      position: fixed;
      right: max(12px, var(--mobile-safe-right));
      bottom: max(66px, calc(var(--mobile-safe-bottom) + 60px));
      z-index: 536;
      display: grid;
      justify-items: center;
      align-items: center;
      gap: 4px;
      padding: 4px;
      border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
      border-radius: 30px;
      background: color-mix(in srgb, var(--surface-container-lowest) 82%, transparent);
      box-shadow: 0 18px 42px rgba(20,32,28,.22), inset 0 1px 0 rgba(255,255,255,.62);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      overflow: hidden;
      width: 50px !important;
      box-sizing: border-box;
    }
    .app.map-mode .map-quick-button {
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      margin: 0 auto;
      padding: 0 !important;
      justify-self: center;
      border-radius: 30px !important;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink);
      box-shadow: none;
      font: 700 13px/1 var(--font-system);
      display: inline-grid;
      place-items: center;
      transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .42s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
    }
    .app.map-mode .map-quick-button.active {
      background: linear-gradient(145deg, #d6e8f5, #eef5fb);
      color: #0d2440;
      border-color: rgba(90,148,201,.2);
      box-shadow: 0 7px 18px rgba(28,58,94,.18), inset 0 1px 0 rgba(255,255,255,.78);
      transform: translateY(-1px);
    }
    .app.map-mode .map-quick-button.pressed {
      transform: scale(.9);
      filter: brightness(1.6);
      box-shadow: 0 0 0 6px rgba(127,176,224,.26), 0 10px 24px rgba(0,0,0,.22);
    }
    body.dark .app.map-mode .map-quick-tools {
      background: rgba(13,22,32,.78);
      border-color: rgba(127,176,224,.16);
      box-shadow: 0 20px 46px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
    }
    body.dark .app.map-mode .map-quick-button.active {
      background: linear-gradient(145deg, #a9cbe8, #d6e8f5);
      color: #0d2440;
    }
    /* Map controls follow the selected Light / Dark / Gray appearance. */
    body:not(.dark) .app.map-mode .map-network-tabs {
      background: rgba(250,253,249,.82);
      border-color: rgba(28,58,94,.18);
      box-shadow: 0 14px 34px rgba(22,48,74,.18), inset 0 1px 0 rgba(255,255,255,.86);
    }
    body:not(.dark) .app.map-mode .map-network-tabs {
      background: rgba(250,253,249,.9);
      border-color: rgba(28,58,94,.2);
      box-shadow: 0 14px 34px rgba(22,48,74,.18), inset 0 1px 0 rgba(255,255,255,.86);
    }
    body:not(.dark) .app.map-mode .map-network-tab { color: #4a6478; background: transparent; }
    body:not(.dark) .app.map-mode .map-network-tab.active { color: #0d2440; }
    body:not(.dark) .app.map-mode .map-quick-tools,
    body:not(.dark) .app.map-mode .map-locate-button {
      background: rgba(250,253,249,.84);
      border-color: rgba(28,58,94,.18);
      color: #16233a;
    }
    body:not(.dark) .app.map-mode .map-home-button {
      background: rgba(250,253,249,.9);
      border-color: rgba(28,58,94,.2);
      color: #16233a;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    body.dark .app.map-mode .map-network-tabs {
      background: rgba(10,18,28,.9);
      border-color: rgba(127,176,224,.16);
      box-shadow: 0 16px 38px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
    }
    body.dark .app.map-mode .map-network-tab { color: #9fb2c0; background: rgba(255,255,255,.025); }
    body.dark .app.map-mode .map-network-tab.active {
      color: #eef5fb;
      background: linear-gradient(135deg, #5a94c9, #1c3a5e);
    }
    body.dark .app.map-mode .map-locate-button,
    body.dark .app.map-mode .map-home-button {
      background: rgba(10,20,30,.9);
      border-color: rgba(127,176,224,.18);
      color: #eef5fb;
      box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
    }
    
    
    
    
    
    .app.map-mode .map-road-panel {
      position: fixed;
      right: max(62px, calc(var(--mobile-safe-right) + 58px));
      bottom: max(214px, calc(var(--mobile-safe-bottom) + 208px));
      z-index: 537;
      width: min(270px, calc(100vw - 84px));
      max-height: min(48vh, 430px);
      padding: 12px;
      border-radius: 18px;
      border: 1px solid rgba(24,71,0,.22);
      background: color-mix(in srgb, var(--surface-container-lowest) 96%, transparent);
      box-shadow: 0 16px 38px rgba(0,0,0,.24);
      display: none;
      gap: 10px;
      overflow: auto;
    }
    .app.map-mode .map-road-panel.open {
      display: grid;
    }
    .map-road-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--brand);
    }
    .map-road-panel-head strong {
      font-family: var(--font-system);
      font-size: 15px;
    }
    .map-road-panel-head button {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: var(--surface-container-low);
      color: var(--brand);
      font-size: 20px;
      line-height: 1;
      font-weight: 700;
    }
    .road-filter-list {
      display: grid;
      gap: 7px;
    }
    .road-filter-btn {
      width: 100%;
      min-height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--surface-container-lowest);
      color: var(--brand);
      padding: 8px 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      text-align: left;
    }
    .road-filter-btn small {
      color: var(--muted);
      font: 700 11px/1 var(--font-mono);
      white-space: nowrap;
    }
    .road-filter-btn.active {
      background: #1c3a5e;
      color: #fff;
      border-color: #1c3a5e;
    }
    .road-filter-btn.active small {
      color: rgba(255,255,255,.75);
    }
    .map-network-tabs {
      position: fixed;
      z-index: 600;
      top: max(12px, calc(var(--mobile-safe-top) + 8px), calc(env(safe-area-inset-top) + 8px));
      left: max(70px, calc(env(safe-area-inset-left) + 70px));
      display: flex;
      width: min(360px, calc(100vw - 82px));
      gap: 3px;
      height: 50px !important;
      padding: 3px;
      box-sizing: border-box;
      border: 1px solid rgba(130,160,149,.22);
      border-radius: 999px;
      background: rgba(10,18,28,.9);
      box-shadow: 0 12px 28px rgba(0,0,0,.24);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      isolation: isolate;
    }
    .map-network-tab {
      position: relative;
      z-index: 1;
      min-height: 42px;
      min-width: 0;
      padding: 10px 6px;
      border: 0;
      border-radius: 30px !important;
      background: transparent;
      color: #9eb0a8;
      font: 750 14px/1 var(--font-system);
      white-space: nowrap;
      overflow: hidden;
      flex: 1 1 0%;
      justify-content: center;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: color .38s cubic-bezier(.4,0,.2,1), transform .28s ease, flex-grow .38s cubic-bezier(.4,0,.2,1), background .38s cubic-bezier(.4,0,.2,1), box-shadow .38s cubic-bezier(.4,0,.2,1);
    }
    .map-network-tab.active {
      flex-grow: 3.4;
      color: #06130d;
      background: linear-gradient(135deg, #4ade80, #16a34a);
      box-shadow: 0 6px 16px rgba(16,80,45,.38), inset 0 1px 0 rgba(255,255,255,.5);
      backdrop-filter: saturate(1.4);
      -webkit-backdrop-filter: saturate(1.4);
    }
    .map-network-tab:active { transform: scale(.96); }
    .map-tab-letter {
      display: inline-block;
      opacity: 0;
      transform: translateY(3px);
      transition: opacity .22s ease, transform .22s ease;
    }
    .map-tab-letter.show { opacity: 1; transform: none; }
    body.dark .app.map-mode .map-road-panel {
      background: rgba(14,24,21,.96);
      border-color: rgba(127,176,224,.22);
    }
    
    .app.map-mode #map.map-background-off .leaflet-tile-pane {
      display: none !important;
    }
    .app.map-mode .map-count-badge,
    .app.map-mode .leaflet-control-attribution {
      display: none !important;
    }
    .app.map-mode .map-tools-button {
      display: inline-flex !important;
      left: auto;
      right: max(12px, var(--mobile-safe-right));
      top: auto;
      bottom: max(66px, calc(var(--mobile-safe-bottom) + 60px));
      min-height: 40px;
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 999px;
      background: #1c3a5e;
      color: #fff;
      border-color: #1c3a5e;
      font-size: 0;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 28px rgba(0,0,0,.28);
    }
    .app.map-mode .map-tools-button::before {
      content: "⚙";
      font-size: 19px;
      line-height: 1;
    }
    .app.map-mode .map-floating-panel {
      display: none;
      left: max(10px, var(--mobile-safe-left));
      right: max(10px, var(--mobile-safe-right));
      bottom: max(12px, calc(var(--mobile-safe-bottom) + 8px));
      width: auto;
      max-height: min(42vh, 330px);
      z-index: 540;
      pointer-events: auto;
    }
    .app.map-mode .map-floating-panel.open {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    .app.map-mode #pointDetail.open {
      position: fixed !important;
      left: max(10px, var(--mobile-safe-left)) !important;
      right: max(10px, var(--mobile-safe-right)) !important;
      bottom: max(12px, calc(var(--mobile-safe-bottom) + 8px)) !important;
      width: auto !important;
      max-height: none !important;
      overflow: visible !important;
      z-index: 9999 !important;
      pointer-events: auto !important;
    }
    .app.map-mode #pointDetail.open .point-detail {
      border: 1px solid var(--line);
      box-shadow: 0 18px 42px rgba(0,0,0,.28);
      gap: 12px;
      padding: 14px;
      overflow: visible;
    }
    .app.map-mode #pointDetail.open .point-detail h2 {
      font-size: 21px;
      line-height: 1.15;
    }
    .app.map-mode #pointDetail.open .point-detail .btn-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }
    .app.map-mode #pointDetail.open .point-detail .btn {
      width: 100%;
      min-height: 48px;
      padding: 10px 12px;
    }
    .app.map-mode .map-home-button {
      left: max(12px, var(--mobile-safe-left));
      top: max(12px, calc(var(--mobile-safe-top) + 8px), calc(env(safe-area-inset-top) + 8px));
      width: var(--app-back-width) !important;
      height: var(--app-back-height) !important;
      min-height: var(--app-back-height) !important;
      padding: 0;
      border-radius: var(--app-back-radius) !important;
      background: #1c3a5e;
      color: #fff;
      border-color: #1c3a5e;
    }
    @media (max-width: 720px) {
      .topbar {
        min-height: calc(54px + var(--mobile-safe-top));
      }
      .content {
        min-height: calc(100dvh - 56px);
      }
      input,
      select,
      textarea,
      .control {
        font-size: 16px !important;
        line-height: 1.35;
      }
      input::placeholder,
      textarea::placeholder {
        font-size: 16px;
      }
    }
    body.dark .btn {
      background: linear-gradient(155deg, #ededf0, #c8c8d2) !important;
      color: #0a0a0b !important;
      border-color: transparent !important;
      box-shadow: 0 12px 26px rgba(0, 0, 0, .42);
    }
    body.dark .btn.secondary {
      background: var(--surface-container) !important;
      color: var(--ink) !important;
      border-color: var(--outline-variant) !important;
    }
    body.dark .btn.warn {
      background: #855800 !important;
      color: #fff4d6 !important;
      border-color: #a97714 !important;
    }
    body.dark .btn.danger {
      background: #84251f !important;
      color: #fff !important;
      border-color: #a83a31 !important;
    }
    @media (max-width: 980px) {
      .bottom-nav button {
        min-width: 0;
        min-height: 44px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        padding: 6px 2px;
        background: transparent;
        color: var(--ink);
        position: relative;
      }
      /* Icon-only rail: the label stays in the markup for screen readers
         (aria-label on the button covers it too) but is not shown. */
      .bottom-label {
        display: none !important;
      }
      /* The active/pressed highlight is a fixed-size circle inside this box,
         so it never nudges anything or changes the button's footprint. */
      .bottom-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 999px;
      }
      .bottom-icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.1;
      }
    }
    @media (max-width: 390px) {
      :root {
        --mobile-safe-top: max(env(safe-area-inset-top, 0px), 32px);
      }
    }
  
    /* Touch/click hardening for mobile release: nav buttons and closed overlays must never capture taps. */
    .bottom-nav button,
    .bottom-nav button * {
      pointer-events: auto;
    }
    .sidebar:not(.open) + .sidebar-backdrop {
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }
    .sidebar.open + .sidebar-backdrop {
      visibility: visible !important;
    }

    /* Release cleanup: remove background text / watermark overlays while keeping app logic intact. */
    body::before,
    body::after,
    .app::before,
    .app::after,
    .main::before,
    .main::after,
    .content::before,
    .content::after {
      content: none !important;
      display: none !important;
      pointer-events: none !important;
    }
    /* The third backdrop state is black on purpose, in both themes: with the
       basemap gone the point is to read the network itself, and the pipes and
       manholes are drawn in reds and ambers that need a dark ground to carry.
       var(--bg) gave a pale green in light mode -- the map went blank rather
       than becoming a drawing. */
    .app.map-mode #map.map-background-off {
      background: #0b0f0d !important;
    }
    .app.map-mode #map.map-background-off .leaflet-tile-pane,
    .app.map-mode #map.map-background-off .leaflet-control-attribution {
      display: none !important;
    }


    /* Desktop/web manhole detail panel: keep mobile/app bottom sheet unchanged. */
    @media (min-width: 981px) {
      .app.map-mode.desktop-detail-open #pointDetail.desktop-point-panel,
      .app.map-mode #pointDetail.desktop-point-panel.open {
        position: fixed !important;
        left: auto !important;
        right: max(16px, var(--mobile-safe-right)) !important;
        top: 112px !important;
        bottom: auto !important;
        width: min(380px, calc(100vw - 32px)) !important;
        max-width: 380px !important;
        max-height: calc(100vh - 128px) !important;
        max-height: calc(100dvh - 128px) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: hidden !important;
        z-index: 9995 !important;
        pointer-events: auto !important;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-detail {
        display: grid;
        gap: 16px;
        max-height: inherit;
        overflow: auto;
        padding: 18px;
        border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--surface-container-lowest) 96%, transparent);
        box-shadow: 0 22px 54px rgba(10, 24, 18, .24);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-detail-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px dashed var(--outline-variant);
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-detail-header h2 {
        margin: 3px 0 0;
        font-size: 22px;
        line-height: 1.15;
        overflow-wrap: anywhere;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-detail-close {
        width: 36px;
        height: 36px;
        min-height: 36px;
        flex: 0 0 36px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--panel);
        color: var(--brand);
        font-size: 22px;
        line-height: 1;
        font-weight: 700;
        box-shadow: none;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        font-family: var(--font-system);
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-meta span {
        display: block;
        color: var(--muted);
        font: 700 10px/1.2 var(--font-mono);
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-meta strong {
        display: block;
        margin-top: 4px;
        min-height: 32px;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-container-low);
        color: var(--ink);
        overflow-wrap: anywhere;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-meta strong:has(.pill) {
        padding: 6px 8px;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-actions {
        display: grid;
        gap: 10px;
        padding-top: 4px;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-actions .btn-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-actions .btn {
        width: 100%;
        min-height: 46px;
      }
      .app.map-mode #pointDetail.desktop-point-panel .point-actions .btn.secondary {
        min-height: 42px;
      }
      .app.map-mode #pointDetail:not(.open) {
        display: none !important;
        pointer-events: none !important;
      }
      body.dark .app.map-mode #pointDetail.desktop-point-panel .point-detail {
        background: color-mix(in srgb, var(--surface-container-lowest) 95%, transparent);
        box-shadow: 0 24px 58px rgba(0, 0, 0, .52);
      }
      body.dark .app.map-mode #pointDetail.desktop-point-panel .point-detail-close {
        background: var(--panel);
        color: var(--ink);
      }
    }


    @media (max-width: 980px) {
      .point-detail-close {
        display: none !important;
      }
    }


    /* Desktop/web fixed sidebar: keep manager/navigation pinned and full-height while content scrolls. */
    @media (min-width: 981px) {
      .app:not(.map-mode) {
        --desktop-sidebar-width: 272px;
        display: block;
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        padding-left: var(--desktop-sidebar-width);
      }
      .app:not(.map-mode) .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--desktop-sidebar-width);
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        z-index: 60;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .app:not(.map-mode) .main {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
      }
    }
    @media (min-width: 1280px) {
      .app:not(.map-mode) {
        --desktop-sidebar-width: 292px;
      }
    }
    @media (min-width: 981px) and (max-width: 1279px) {
      .app:not(.map-mode) {
        --desktop-sidebar-width: 260px;
      }
    }

    /* Desktop/web topbar cleanup: remove search/profile blocks and center room title. */
    @media (min-width: 981px) {
      /* Was a rigid three-column grid -- [1fr][brand][1fr] -- with the brand
         pinned to column 2. That leaves exactly ONE cell to the right of it,
         while the app appends a SECOND right-hand control at runtime (the
         WhatsApp button, bindPage()) whenever the project carries a group
         link. Auto-placement cannot go backwards past an explicitly placed
         item, so the bell found no free cell on row 1 and wrapped to row 2 at
         the far LEFT -- the desktop topbar rendered 128px tall with its brand
         adrift in the middle and the bell stranded underneath. A flex row
         seats any number of controls on one line, injected or not. */
      .app:not(.map-mode) .topbar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: initial;
        gap: 12px;
      }
      .app:not(.map-mode) .topbar > .search,
      .app:not(.map-mode) .topbar > .profile {
        display: none !important;
      }
      .app:not(.map-mode) .topbar > .mobile-menu {
        display: none !important;
      }
      .app:not(.map-mode) .topbar > div:first-of-type {
        /* Auto margins take the free space on both sides, so the brand sits in
           the middle whatever the action buttons add up to -- the job
           grid-column: 2 used to do, without the single fixed cell beside it. */
        margin-inline: auto;
        text-align: center;
      }
      .app:not(.map-mode) .topbar > div:first-of-type strong,
      .app:not(.map-mode) .topbar > div:first-of-type .muted {
        text-align: center;
      }
    }

    /* Desktop/web full-width workspace: use the complete monitor area on any desktop size. */
    @media (min-width: 981px) {
      .app:not(.map-mode) .main {
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
      }
      .app:not(.map-mode) .topbar {
        width: 100% !important;
        max-width: none !important;
      }
      .app:not(.map-mode) .content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        justify-self: stretch;
        align-self: stretch;
        min-height: calc(100vh - 62px);
        min-height: calc(100dvh - 62px);
      }
      .app:not(.map-mode) .page-head,
      .app:not(.map-mode) .grid,
      .app:not(.map-mode) .dashboard-main-grid,
      .app:not(.map-mode) .form-card,
      .app:not(.map-mode) .card,
      .app:not(.map-mode) .table-wrap {
        width: 100%;
        max-width: none;
      }
      .app:not(.map-mode) .dashboard-main-grid {
        grid-template-columns: minmax(0, 1.65fr) minmax(360px, .7fr);
      }
    }


    /* Desktop review navigation cards */
    .kpi.kpi-link {
      width: 100%;
      text-align: left;
      border: 1px solid var(--line);
      cursor: pointer;
    }
    .kpi.kpi-link:hover {
      border-color: var(--brand-2);
      transform: translateY(-1px);
    }
    .task-review-summary .card {
      min-height: 132px;
    }

    /* Review table sorting and simplified manager tables. */
    .sort-th {
      appearance: none;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      font: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
    }
    .sort-th::after {
      content: "↕";
      opacity: .42;
      font-size: 11px;
      line-height: 1;
    }
    .sort-th.active::after {
      content: attr(data-sort-icon);
      opacity: .9;
    }
    th.review-actions-head {
      width: 230px;
    }
    .review-table-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 12px;
    }
    .review-table-head h2 {
      margin: 0;
    }
    .review-sort-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .review-sort-controls label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .review-sort-controls select {
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      color: var(--ink);
      padding: 7px 10px;
      font-weight: 700;
    }
    .review-actions-cell {
      width: 132px;
      min-width: 132px;
      text-align: right;
      vertical-align: top;
    }
    .review-actions-cell .btn-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
      justify-items: stretch;
      width: 112px;
      margin-left: auto;
    }
    .review-actions-cell .btn {
      width: 100%;
      min-height: 36px;
      padding: 8px 10px;
      white-space: nowrap;
      box-shadow: none;
    }
    @media (max-width: 720px) {
      .review-table-head {
        display: grid;
        gap: 10px;
      }
      .review-sort-controls {
        justify-content: stretch;
      }
      .review-sort-controls label,
      .review-sort-controls select {
        width: 100%;
      }
    }


    /* Review table per-column filters: compact controls inside the table headers. */
    .review-filter-row th { vertical-align: bottom; }
    .review-th-label { display:block; margin-bottom:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--outline); }
    .review-column-filter { width:100%; min-height:34px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-container-lowest); color:var(--ink); padding:6px 8px; font-size:12px; font-family:var(--font-system); font-weight:700; letter-spacing:0; text-transform:none; }
    .review-actions-cell { width:132px; min-width:132px; white-space:normal; }
    .review-action-stack { display:grid; gap:8px; justify-items:stretch; }
    .review-action-stack .btn { width:100%; min-height:38px; padding:8px 10px; box-shadow:none; }
    @media (max-width:720px) { .review-column-filter{min-height:38px;font-size:13px;} .review-actions-cell{width:auto;min-width:0;} }


    /* Theme-safe table rows for review/task pages. */
    :root {
      --task-row-approved-bg: #f0fbf4;
      --task-row-declined-bg: #fff1f0;
      --task-row-active-bg: #fffaf0;
      --table-row-bg: var(--surface-container-lowest);
      --table-row-alt-bg: color-mix(in srgb, var(--surface-container-lowest) 92%, var(--panel-soft));
    }
    body.dark {
      --task-row-approved-bg: rgba(47, 107, 79, .22);
      --task-row-declined-bg: rgba(171, 61, 47, .22);
      --task-row-active-bg: rgba(200, 114, 42, .18);
      --table-row-bg: var(--panel);
      --table-row-alt-bg: var(--surface-container-lowest);
    }
    .table-wrap,
    .table-wrap table {
      background: var(--panel);
      color: var(--ink);
    }
    .table-wrap tbody tr {
      background: var(--table-row-bg);
    }
    .table-wrap tbody tr:nth-child(even) {
      background: var(--table-row-alt-bg);
    }
    .table-wrap td {
      background: transparent;
      color: var(--ink);
      border-color: var(--line);
    }
    .table-wrap th {
      border-color: var(--line);
    }
    body.dark .table-wrap,
    body.dark .table-wrap table,
    body.dark .table-wrap thead,
    body.dark .table-wrap tbody,
    body.dark .table-wrap tfoot {
      background: var(--panel) !important;
      color: var(--ink) !important;
    }
    body.dark .table-wrap td,
    body.dark .table-wrap td strong {
      color: var(--ink) !important;
    }
    body.dark .table-wrap .muted {
      color: var(--muted) !important;
    }
    body.dark .review-filter-row th,
    body.dark .table-wrap th {
      background: var(--surface-container) !important;
      color: var(--ink) !important;
    }
    body.dark .review-column-filter {
      background: var(--surface-container-lowest) !important;
      color: var(--ink) !important;
      border-color: var(--line) !important;
    }


    /* Review UX cleanup: less horizontal tables, theme-safe rows and compact action stack. */
    .review-table-wrap table,
    .task-table table,
    .report-table table {
      min-width: 0 !important;
      width: 100%;
      table-layout: fixed;
    }
    .review-table-wrap th,
    .review-table-wrap td,
    .task-table th,
    .task-table td,
    .report-table th,
    .report-table td {
      vertical-align: top;
    }
    .review-column-filter {
      width: 100%;
      margin-top: 7px;
      min-height: 34px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--surface-container-lowest);
      color: var(--ink);
      padding: 6px 8px;
      font-weight: 700;
    }
    .review-th-label {
      display: block;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--outline);
    }
    .review-actions-cell {
      width: 160px;
    }
    .review-action-stack {
      display: grid;
      gap: 8px;
      min-width: 132px;
      max-width: 180px;
      margin-left: auto;
    }
    .review-action-stack .btn {
      width: 100%;
      min-height: 38px;
      padding: 8px 10px;
    }
    .review-clean-actions {
      justify-content: flex-end;
      margin: 0 0 14px;
    }
    .review-clean-actions .btn {
      min-height: 40px;
    }
    .review-filter-row th:first-child { width: 30%; }
    .review-filter-row th:nth-child(2) { width: 18%; }
    .review-filter-row th:nth-child(3) { width: 15%; }
    .review-filter-row th:nth-child(4) { width: 14%; }
    .review-filter-row th:nth-child(5) { width: 14%; }
    body.dark .review-column-filter {
      background: var(--panel);
      border-color: var(--line);
      color: var(--ink);
    }
    @media (max-width: 1180px) {
      .review-table-wrap table,
      .task-table table,
      .report-table table {
        min-width: 720px !important;
      }
    }


    /* My Reports table: prioritize comment/notes, remove photo column from UI and keep downloads usable. */
    .my-reports-table table {
      min-width: 820px !important;
      table-layout: fixed;
    }
    .my-reports-table .myrep-date-col { width: 15%; }
    .my-reports-table .myrep-point-col { width: 16%; }
    .my-reports-table .myrep-activity-col { width: 14%; }
    .my-reports-table .myrep-status-col { width: 12%; }
    .my-reports-table .myrep-notes-col { width: auto; }
    .my-reports-table .myrep-download-col { width: 132px; }
    .my-reports-table th,
    .my-reports-table td {
      overflow-wrap: anywhere;
      word-break: normal;
    }
    .my-reports-table .myrep-notes-head,
    .my-reports-table .myrep-notes-cell {
      min-width: 220px;
      white-space: normal;
      line-height: 1.45;
    }
    .my-reports-table .myrep-download-head,
    .my-reports-table .myrep-download-cell {
      width: 124px;
      min-width: 124px;
      white-space: normal;
      text-align: left;
    }
    .my-reports-table .myrep-download-cell .btn-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      width: 92px;
    }
    .my-reports-table .myrep-download-cell .btn {
      width: 100%;
      min-height: 36px;
      padding: 8px 10px;
      white-space: nowrap;
      box-shadow: none;
    }
    @media (max-width: 1180px) {
      .my-reports-table table {
        min-width: 780px !important;
      }
    }


    /* Compact Settings page: no duplicate page header, no oversized card. */
    .settings-shell {
      width: 100%;
      max-width: 640px;
      display: grid;
      gap: 26px;
      align-items: start;
      justify-items: stretch;
      margin: clamp(24px, 6vh, 64px) auto 0;
      padding-left: clamp(0px, 1vw, 18px);
    }
    .settings-profile-row { display: flex; align-items: center; gap: 14px; padding: 10px 4px; width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radius); cursor: pointer; }
    .settings-profile-row:hover, .settings-profile-row:focus-visible { background: var(--surface-container-low); }
    .settings-row-foot-split { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px 16px; }
    .settings-row-foot-split .btn { width: 100%; min-height: 48px; }
    .settings-profile-row .settings-avatar-preview { width: 54px; height: 54px; font-size: 16px; }
    .settings-profile-row-info { display: grid; gap: 2px; min-width: 0; }
    .settings-profile-row-info strong { font-size: 16px; overflow-wrap: anywhere; }
    .settings-profile-row-info small { color: var(--muted); font-size: 12px; }
    .settings-profile-row input[type="file"] { display: none; }
    .settings-group-label { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-2); margin: 0 4px 12px; }
    .settings-group-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-lowest); box-shadow: var(--shadow-soft); overflow: hidden; }
    .billing-overview { display:grid; gap:14px; }
    .billing-status-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
    .billing-status-head h2 { margin:0 0 4px; text-transform:capitalize; }
    .billing-price-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .billing-price-grid > div { padding:14px; border-radius:14px; background:var(--surface-container); display:flex; align-items:baseline; gap:4px; }
    .billing-price-grid strong { font-size:clamp(20px,5vw,28px); }
    .billing-price-grid span { color:var(--muted); font-size:13px; }
    .settings-group-card > p.muted { padding: 12px 16px 0; margin: 0; }
    .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
    .settings-group-card > .settings-row:last-child,
    .settings-group-card > *:last-child .settings-row:last-child { border-bottom: none; }
    .settings-row > span:first-child, .settings-row > strong:first-child { font-weight: 600; font-size: 14px; }
    .settings-row select.control { min-height: 38px; width: auto; max-width: 58%; padding: 6px 10px; font-size: 13px; }
    a.settings-row { color: var(--ink); text-decoration: none; }
    a.settings-row:hover, button.settings-row:hover { background: var(--surface-container-low); }
    .settings-row-chevron { color: var(--outline); flex: none; }
    button.settings-row { width: 100%; text-align: left; background: transparent; border-radius: 0; }
    .settings-row-danger { color: var(--red); }
    .settings-row-foot { padding: 12px 16px; display: flex; }
    .settings-row-foot .btn { width: 100%; }
    .settings-group-danger .settings-group-card { border-color: color-mix(in srgb, var(--red) 32%, var(--line)); }
    @media (max-width: 720px) {
      .settings-shell {
        margin-top: 4px;
        padding-left: 0;
        gap: 22px;
      }
    }
    .settings-title { font-size: 28px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
    .settings-subpage-head { display: flex; align-items: center; gap: 12px; }
    .settings-back-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-container-low); border: none; display: grid; place-items: center; color: var(--ink); cursor: pointer; }
    .settings-back-btn:hover, .settings-back-btn:focus-visible { background: var(--surface-container); }
    .settings-profile-card {
      display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
      padding: 16px; border: 1px solid var(--line); border-radius: 18px;
      background: var(--surface-container-lowest); box-shadow: var(--shadow-soft); cursor: pointer;
    }
    .settings-profile-card:hover, .settings-profile-card:focus-visible { background: var(--surface-container-low); }
    .settings-profile-card .settings-avatar-preview { width: 64px; height: 64px; font-size: 20px; }
    .settings-promo-card {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 18px; border-radius: 18px; background: var(--brand); color: #fff;
      box-shadow: var(--shadow-soft); text-align: left; width: 100%; cursor: pointer; border: none;
    }
    .settings-promo-card:hover { filter: brightness(1.04); }
    .settings-promo-card-copy strong { display: block; font-size: 16px; margin-bottom: 4px; }
    .settings-promo-card-copy span { display: block; font-size: 13px; opacity: .85; max-width: 30ch; }
    .settings-promo-card-icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.16); }
    .settings-row-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-container-low); color: var(--brand-2); }
    .settings-row-danger .settings-row-icon { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
    .settings-row-icon svg { width: 19px; height: 19px; }
    .settings-icon-row-link .settings-row-label { flex: 1; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
    .settings-icon-row-body { padding: 18px; }
    .notif-pause-section { margin: 0 0 6px; }
    .notif-pause-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
    .notif-pause-help { margin: 3px 0 12px; font-size: 13px; }
    .notif-pause-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .notif-pause-grid .btn { width: 100%; min-height: 48px; font-size: 15px; }
    .notif-pause-status { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 18%, var(--surface-container-lowest)); color: color-mix(in srgb, var(--amber) 55%, var(--ink)); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
    .notif-pause-resume { width: 100%; min-height: 48px; margin-top: 12px; }
    .settings-icon-row-body .settings-inline-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
    .settings-icon-row-link { display: flex; align-items: center; gap: 16px; min-height: 62px; padding: 14px 18px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
    .settings-icon-row-link:last-child { border-bottom: none; }
    .settings-icon-row-link:hover { background: var(--surface-container-low); }
    button.settings-icon-row-link { width: 100%; text-align: left; background: transparent; border: none; font: inherit; cursor: pointer; }
    .app.settings-mode .main { min-height: 100dvh; }
    .app.settings-mode .content { display: block; width: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: auto; }
    .app.settings-mode .settings-shell { max-width: 760px; margin: 0; padding: 8px 24px 48px; gap: 22px; }
    .app.settings-mode .settings-subpage-head { position: sticky; top: 0; z-index: 5; min-height: 82px; margin: 0 -24px; padding: 18px 24px; background: color-mix(in srgb, var(--surface-container-lowest) 94%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
    .app.settings-mode .settings-back-btn { width: 46px; height: 46px; border: 1px solid var(--line); }
    .app.settings-mode .settings-title { font-size: clamp(24px, 5vw, 32px); letter-spacing: -.045em; }
    @media (max-width: 720px) {
      .app.settings-mode .settings-shell { padding: 0 16px 32px; }
      .app.settings-mode .settings-subpage-head { margin: 0 -16px; padding: 14px 16px; min-height: 72px; }
    }


    /* Desktop readable-width system: keep web pages professional on large monitors without stretching cards/tables too wide. */
    @media (min-width: 981px) {
      .app:not(.map-mode) .content {
        --desktop-readable-width: min(100%, 1360px);
        --desktop-narrow-width: min(100%, 1040px);
        max-width: calc(1360px + clamp(48px, 6vw, 96px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: clamp(24px, 3vw, 48px) !important;
        padding-right: clamp(24px, 3vw, 48px) !important;
        align-content: start;
      }
      .app:not(.map-mode) .content > .page-head,
      .app:not(.map-mode) .content > .grid,
      .app:not(.map-mode) .content > .dashboard-main-grid,
      .app:not(.map-mode) .content > .card,
      .app:not(.map-mode) .content > .form-card,
      .app:not(.map-mode) .content > .table-wrap {
        width: 100% !important;
        max-width: var(--desktop-readable-width) !important;
      }
      .app:not(.map-mode) .content > .card:only-child,
      .app:not(.map-mode) .content > .form-card:only-child {
        max-width: var(--desktop-narrow-width) !important;
      }
      .app:not(.map-mode) .content .table-wrap,
      .app:not(.map-mode) .content table {
        max-width: 100% !important;
      }
      .app:not(.map-mode) .content .table-wrap {
        overflow-x: auto;
        overscroll-behavior-x: contain;
      }
      .app:not(.map-mode) .content .card,
      .app:not(.map-mode) .content .form-card {
        box-sizing: border-box;
      }
    }


    /* Mobile My Reports cleanup: no stretched empty gap, priority instead of decision, comment emphasized. */
    @media (max-width: 980px) {
      .app:not(.map-mode) .content {
        align-content: start !important;
        grid-auto-rows: max-content;
      }
    }
    @media (max-width: 720px) {
      .app:not(.map-mode) .content {
        min-height: auto !important;
        align-content: start !important;
      }
      .mobile-report-cards {
        align-self: start;
      }
      .my-report-mobile-cards .report-mobile-card {
        margin-top: 0;
      }
      .my-report-mobile-cards .report-mobile-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .my-report-mobile-cards .report-mobile-comment {
        grid-column: 1 / -1;
        padding-top: 8px;
        border-top: 1px dashed var(--outline-variant);
      }
      .my-report-mobile-cards .report-mobile-comment b {
        white-space: pre-wrap;
        line-height: 1.45;
      }
    }


    /* Final design + notification repair layer */
    .main { min-width: 0; overflow-x: hidden; }
    .content { width: min(100%, 1360px); max-width: 1360px; padding-left: clamp(22px, 3vw, 42px); padding-right: clamp(22px, 3vw, 42px); }
    .content > .card, .content > .form-card { max-width: 100%; }
    .content > .card, .content > .form-card { border-radius: 8px; }
    .page-head { min-width: 0; }
    .page-head h1 { overflow-wrap: anywhere; }
    .settings-compact { max-width: 760px; margin: clamp(26px, 6vh, 72px) auto 0; width: 100%; }
    .settings-compact .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notify-button {
      position: relative;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--surface-container-lowest);
      color: var(--brand);
      display: inline-grid;
      place-items: center;
      box-shadow: var(--shadow-soft);
      flex: none;
    }
    .notify-button svg { width: 20px; height: 20px; }
    /* Tactile press on the round topbar icons (bell, WhatsApp, map): they
       spring in on touch and settle back on release, so a tap that opens
       something still gives a physical acknowledgment. Reduced-motion opt-out
       below. */
    .notify-button, .topbar-map-button { transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease; -webkit-tap-highlight-color: transparent; }
    .topbar-map-button:active { transform: scale(.85); background: var(--surface-container-low); }
    .notify-button.is-ringing svg { animation: topbar-bell-ring .44s cubic-bezier(.16, 1, .3, 1) both; transform-origin: 50% 12%; }
    @keyframes topbar-bell-ring {
      0% { transform: rotate(0deg); }
      24% { transform: rotate(12deg); }
      48% { transform: rotate(-10deg); }
      72% { transform: rotate(6deg); }
      100% { transform: rotate(0deg); }
    }
    @media (prefers-reduced-motion: reduce) { .topbar-map-button:active { transform: none; } .notify-button.is-ringing svg { animation: none; } }
    .notify-button .notification-badge { position: absolute; top: -6px; right: -6px; margin-left: 0; }
    .topbar .notify-button .notification-badge {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      font-size: 10.5px;
      font-weight: 800;
      background: #dc2626;
      color: #fff;
      border: 2px solid var(--panel);
      box-shadow: 0 2px 6px rgba(220, 38, 38, .38);
      transform-origin: 50% 50%;
      animation: notification-badge-pop .28s cubic-bezier(.2,.8,.2,1) both;
    }
    body.dark .topbar .notify-button .notification-badge { border-color: var(--panel); }
    @keyframes notification-badge-pop { 0% { transform: scale(0); } 65% { transform: scale(1.15); } 100% { transform: scale(1); } }
    .topbar .notify-button:has(.notification-badge) svg { color: #ef4444; stroke: #ef4444; animation: notification-icon-pulse 1.35s ease-in-out infinite; transform-origin: 50% 50%; }
    @keyframes notification-icon-pulse { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.12); opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .topbar .notify-button:has(.notification-badge) svg { animation: none; } }
    .notification-item.unread { background: color-mix(in srgb, var(--surface-container-low) 70%, transparent); }
    .notification-item h2 { margin-bottom: 4px; }
    .notification-actions-card { display: grid; gap: 10px; }
    .notification-actions-card .btn-row { justify-content: flex-start; }
    .notification-status-note { max-width: 760px; }
    body.dark .notification-item.unread { background: color-mix(in srgb, var(--surface-container) 78%, transparent); }
    body.dark .notify-button { background: var(--panel); border-color: var(--line); color: var(--brand-2); }
    .topbar-whatsapp-button svg { color: #25D366 !important; }
    .topbar-whatsapp-button { padding: 0; }
    .topbar-whatsapp-button .whatsapp-app-icon { width: 30px; height: 30px; display: block; }
    @media (min-width: 981px) {
      .table-wrap table { table-layout: auto; }
      .report-table table, .task-table table { min-width: 900px; }
      .dashboard-main-grid { align-items: start; }
      .grid.four { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
    }
    @media (max-width: 980px) {
      /* One gutter for the whole phone layout, and --page-pad IS that gutter.
         The breakout shells (.pw-/.pc-/.pr-/.pm-project-) pull themselves out
         of the content box with calc(var(--page-pad) * -1), so the token has
         to equal .content's real padding: while it said 20px and .content
         padded 12px, every one of those shells hung 8px off BOTH screen edges
         (measured, not theorised). Tight on purpose -- a phone has no width
         to spare -- but not zero, so a card border never touches the glass. */
      :root,
      body { --page-pad: 10px; }
      .content { width: 100%; max-width: 100vw; padding-left: max(var(--page-pad), var(--mobile-safe-left)); padding-right: max(var(--page-pad), var(--mobile-safe-right)); }
      .settings-compact { margin-top: 0; }
      .settings-compact .form-grid { grid-template-columns: 1fr; }
      .notify-button { width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }
    }
    @media (max-width: 720px) {
      .content { padding-top: 14px; }
      .notification-actions-card .btn-row { display: grid; grid-template-columns: 1fr; }
      .topbar .notify-button + .profile { margin-left: 0; }
      .profile .avatar { width: 36px; height: 36px; }
    }


    /* Final notification/design polish: keep notification pages readable and icons clean. */
    .notification-actions-card,
    .push-ready-card,
    .settings-compact {
      max-width: 980px;
      width: 100%;
    }
    .notify-button {
      border-radius: 999px;
      width: 46px;
      height: 46px;
      background: var(--surface-container-lowest);
      color: var(--brand);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }
    .notify-button:hover {
      transform: translateY(-1px);
      background: var(--panel-soft);
    }
    .topbar .notify-button:has(.notification-badge) {
      background: #ef3131;
      border-color: #ef3131;
      color: #fff;
      box-shadow: 0 8px 18px rgba(239,49,49,.24);
    }
    .topbar .notify-button:has(.notification-badge):hover {
      background: #d92828;
      border-color: #d92828;
    }
    .topbar .notify-button:has(.notification-badge) svg,
    .topbar .notify-button:has(.notification-badge) .material-symbols-outlined {
      color: #fff;
      stroke: #fff;
    }
    /* Unread state must remain visible even when later theme/mobile rules
       restyle the shared topbar button. */
    .topbar .notify-button:has(.notification-badge) {
      background: var(--surface-container-lowest) !important;
      border-color: var(--line) !important;
      color: var(--brand) !important;
    }
    .topbar .notify-button:has(.notification-badge) svg {
      color: #ef3131 !important;
      fill: #ef3131 !important;
      stroke: #ef3131 !important;
    }
    .notify-button .notification-badge {
      min-width: 22px;
      height: 22px;
      top: -8px;
      right: -8px;
      background: #ef3131;
      color: #fff;
      border: 2px solid var(--surface-container-lowest);
      box-shadow: 0 8px 18px rgba(239,49,49,.32);
    }
    .notification-item {
      max-width: 980px;
      width: 100%;
      border-radius: 18px !important;
    }
    body.dark .notify-button {
      background: var(--surface-container-lowest);
      color: var(--brand-2);
      border-color: var(--line);
    }
    @media (min-width: 981px) {
      .content {
        padding-left: clamp(24px, 3vw, 44px);
        padding-right: clamp(24px, 3vw, 44px);
      }
      .content > .card,
      .content > .form-card,
      .table-wrap {
        max-width: 1180px;
      }
      .content .grid.four,
      .content .grid.three,
      .content .dashboard-main-grid {
        max-width: 1180px;
      }
    }

    .notifications-feed { width: 100%; max-width: 980px; margin: 0 auto; }
    .notifications-feed > .card,
    .notifications-feed > .notification-item { border-radius: 18px !important; }
    .table-wrap { border-radius: 16px !important; overflow: auto; }
    .table-wrap table { border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; }
    /* Keep every data table visibly rounded, including its actual outer cells. */
    .table-wrap,
    .content > .card:has(.table-wrap),
    .content > .form-card:has(.table-wrap) {
      border-radius: 18px !important;
    }
    .table-wrap {
      background: var(--panel);
      border: 1px solid var(--line);
      overflow: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    .table-wrap > table {
      width: 100%;
      min-width: 620px;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      border-radius: 18px !important;
      overflow: hidden;
    }
    .table-wrap > table > thead > tr:first-child > th:first-child { border-top-left-radius: 17px; }
    .table-wrap > table > thead > tr:first-child > th:last-child { border-top-right-radius: 17px; }
    .table-wrap > table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 17px; }
    .table-wrap > table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 17px; }
    .table-wrap button,
    .review-action-stack .btn,
    .task-mobile-actions .btn,
    .report-mobile-actions .btn { border-radius: 14px !important; }
    .card button, .form-card button { border-radius: 14px; }
    .notification-read { margin-top: 8px; }
    @media (max-width: 980px) {
      .topbar-map-button { display: inline-grid; }
      .topbar > .profile { display: none; }
    }
    @media (max-width: 720px) {
      /* The unit inside var() must be one every engine parses: a var() with an
         unparseable fallback is invalid at computed-value time, and that drops
         height to `auto` rather than falling back to an earlier declaration.
         100vh is the safe base; @supports upgrades it where dvh exists. */
      body.login-active .login-screen { inset: 0; height: var(--app-viewport-height, 100vh); min-height: 0; padding: max(12px, var(--mobile-safe-top)) 12px max(12px, var(--mobile-safe-bottom)); place-items: center; }
      body.login-active .login-card { width: min(440px, 100%); min-height: 0; max-height: calc(var(--app-viewport-height, 100vh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 24px); grid-template-columns: 1fr; overflow: hidden; }
      @supports (height: 100dvh) {
        body.login-active .login-screen { height: var(--app-viewport-height, 100dvh); }
        body.login-active .login-card { max-height: calc(var(--app-viewport-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 24px); }
      }
      body.login-active .login-hero { display: none; }
      body.login-active .login-form { padding: clamp(18px, 5vw, 26px); align-content: center; overflow: hidden; }
    }
    /* Final table frame treatment: the table itself owns the rounded border.
       The shadow lives on .table-wrap, not the table -- the wrap's own
       overflow:auto (for horizontal scroll) would clip a shadow painted on
       its child. */
    .table-wrap { box-shadow: var(--shadow-soft) !important; }
    .table-wrap > table,
    .table-wrap table {
      border: 1px solid var(--line) !important;
      border-radius: 18px !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      overflow: hidden !important;
      background: var(--panel) !important;
    }
    .table-wrap > table > thead > tr:first-child > th:first-child,
    .table-wrap table > thead > tr:first-child > th:first-child { border-top-left-radius: 17px !important; }
    .table-wrap > table > thead > tr:first-child > th:last-child,
    .table-wrap table > thead > tr:first-child > th:last-child { border-top-right-radius: 17px !important; }
    .table-wrap > table > tbody > tr:last-child > td:first-child,
    .table-wrap table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 17px !important; }
    .table-wrap > table > tbody > tr:last-child > td:last-child,
    .table-wrap table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 17px !important; }
    .card:has(.table-wrap),
    .form-card:has(.table-wrap) { overflow: hidden !important; border-radius: 18px !important; }

    html, body, #root, button, a, .card, .bottom-nav { scroll-behavior: smooth; }
    *, *::before, *::after { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .bottom-nav, .route-slide-left, .route-slide-right { will-change: transform; }
    /* Final interaction and table rules. */
    html, body, #root { touch-action: pan-y !important; }
    .map-mode, .map-mode .map-page, .map-mode .leaflet-container { touch-action: pan-x pan-y !important; }
    /* Keep the mobile shell stable during the first WebView viewport pass. */
    @media (max-width: 980px) {
      .topbar {
        top: 0 !important;
        transition: none !important;
      }
    }
    .content table {
      width: 100%;
      border: 1px solid var(--line) !important;
      border-radius: 20px !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      overflow: hidden !important;
      clip-path: inset(0 round 20px);
    }
    .content table thead tr:first-child th:first-child { border-top-left-radius: 19px !important; }
    .content table thead tr:first-child th:last-child { border-top-right-radius: 19px !important; }
    .content table tbody tr:last-child td:first-child { border-bottom-left-radius: 19px !important; }
    .content table tbody tr:last-child td:last-child { border-bottom-right-radius: 19px !important; }
    .btn, button, input, select, textarea, .card, .form-card, .modal, .table-wrap, table { border-radius:16px !important; }
    .bottom-nav, .bottom-nav button, .pill, .avatar, .notification-badge { border-radius:999px !important; }
    .table-wrap, .content table, .content .card, .content .form-card { overflow:hidden !important; }
    .btn, .card, .form-card, .table-wrap, table, input, select, textarea { border-radius:22px !important; }
    .bottom-nav, .bottom-nav button, .pill, .avatar { border-radius:999px !important; }
    /* The blanket `button { border-radius:16px !important }` above was squaring
       off the Tasks Review segmented control, so the pill container held two
       rounded-rectangle tabs — the mismatch against the pill-shaped preview
       button. These are pills by design, so they join the exemption list. */
    .pmr-seg, .pmr-seg-btn, .pmr-seg-btn b, .pmr-preview, .pmr-sort-btn { border-radius:999px !important; }

    /* Project active-state buttons, both themes.
       `body.dark .btn.secondary { background:var(--surface-container)!important }`
       was flattening BOTH of these to the same grey in dark mode, so "Set
       active" and "Active project" became indistinguishable — you could not
       tell whether a project was already active. Light mode already showed a
       green pair, so dark mode is brought in line rather than invented.
       Actionable = tinted/outlined green. Current = solid green. */
    body:not(.dark) .pdp-actions > [data-action="activate-project"],
    body:not(.dark) .btn.secondary[data-action="activate-project"] {
      background: color-mix(in srgb, #168653 10%, #fff) !important;
      border-color: color-mix(in srgb, #2fbf78 65%, transparent) !important;
      color: #168653 !important;
    }
    body.dark .pdp-actions > [data-action="activate-project"],
    body.dark .btn.secondary[data-action="activate-project"] {
      background: color-mix(in srgb, #2fbf78 16%, transparent) !important;
      border-color: color-mix(in srgb, #2fbf78 55%, transparent) !important;
      color: #6ee7a8 !important;
    }
    /* The current project: solid green, white text, in both themes. */
    body .pdp-active-confirm:disabled,
    body.dark .pdp-active-confirm:disabled,
    body.dark .btn.secondary.pdp-active-confirm:disabled {
      background: #168653 !important;
      border-color: #2fbf78 !important;
      color: #fff !important;
      opacity: 1 !important;
    }
    /* Full theme surfaces: each theme changes the whole app, tables included. */
    body.dark .app, body.dark .main, body.dark .content, body.dark .topbar, body.dark .sidebar, body.dark .card, body.dark .form-card, body.dark .table-wrap, body.dark table, body.dark input, body.dark select, body.dark textarea { background:var(--panel) !important; color:var(--ink) !important; border-color:var(--line) !important; }
    
    
    
    
    body.dark table th { background:var(--surface-container) !important; color:var(--ink) !important; }
    
    body.dark table td{ background:transparent !important; color:var(--ink) !important; border-color:var(--line) !important; }
    body.dark .muted{ color:var(--muted) !important; }
    
    
    
    
    
    
    
    
    /* Mobile navigation polish: reveal the header on the first upward movement and keep the bottom bar as low as the safe area allows. */
    @media (max-width:980px) {
      .main { padding-top: 64px !important; }
      .topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        transition: transform .16s ease, opacity .12s ease !important;
      }
    }
    /* Dark theme — a warm charcoal ground (Claude-app-like, not near-black)
       with neutral grey surfaces stacked on top, so the page reads as dark
       and the cards are what carry the grey. Surfaces lighten as they stack
       (bg < lowest < panel < low < container < variant); each step keeps at
       least ~1.06:1 on the one below it, which is what makes elevation
       legible without borders. Ink is #f5f4ef rather than pure white: still
       13.8:1 on the ground, with less of the halation that #fff produces.
       Status hues stay chromatic. */
    html.dark, body.dark {
      --bg: #262624;
      --panel: #313130;
      --panel-soft: #3a3937;
      --surface: #313130;
      --surface-container: #403f3b;
      --surface-container-low: #363532;
      --surface-container-lowest: #2b2b28;
      --surface-variant: #4a4844;
      --ink: #f5f4ef;
      --muted: #a8a29e;
      --outline: #8f8a85;
      --line: #3a3937;
      --outline-variant: #47453f;
      --brand: #ededf0;
      --brand-2: #d0d0d8;
      --brand-soft: #363532;
      --blue: #85b9e8;
      --amber: #e3a955;
      --red: #f08a83;
      --green: #68cf92;
      --charcoal: #201f1e;
      --cream: #262624;
      --shadow: 0 18px 54px rgba(0, 0, 0, .6);
      --shadow-soft: 0 10px 28px rgba(0, 0, 0, .46);
      --page-wash:
        linear-gradient(var(--bg), var(--bg)),
        repeating-linear-gradient(0deg, rgba(208,208,216,.026) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(208,208,216,.026) 0 1px, transparent 1px 28px);
      --page-wash-start: var(--bg);
      --page-wash-edge: var(--bg);
      background: var(--bg) !important;
      color: var(--ink) !important;
    }
    html.dark { background: #262624; }
    body.dark .app,
    body.dark .main,
    body.dark .content { background: var(--bg) !important; color: var(--ink) !important; }
    body.dark .sidebar,
    body.dark .topbar,
    body.dark .card,
    body.dark .form-card,
    body.dark .login-card,
    body.dark .modal,
    body.dark .table-wrap { background: var(--panel) !important; border-color: var(--line) !important; color: var(--ink) !important; }
    body.dark input,
    body.dark select,
    body.dark textarea,
    body.dark .control { background: var(--surface-container-low) !important; border-color: var(--line) !important; color: #fff !important; }
    body.dark input::placeholder,
    body.dark textarea::placeholder { color: #7f8792 !important; }
    body.dark .btn:not(.danger):not(.warn):not(.secondary) { background: linear-gradient(155deg, #bcd9f2, #5a94c9) !important; border-color: transparent !important; color: #0d2440 !important; box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5) !important; }
    body.dark .sync-box { background: #e9eff3 !important; border-color: #e9eff3 !important; color: #101216 !important; box-shadow: 0 10px 24px rgba(0,0,0,.28) !important; }
    body.dark .btn.secondary { background: var(--surface-container) !important; border-color: var(--outline-variant) !important; color: #fff !important; }
    body.dark .nav-btn:hover { background: var(--surface-container) !important; color: #fff !important; }
    body.dark .nav-btn.active { background: linear-gradient(155deg, var(--surface-container), #262b33) !important; color: var(--brand-2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; }
    body.dark .bottom-nav { background: var(--surface-container-lowest) !important; border-color: var(--line) !important; }
    body.dark .bottom-nav button.active { color: #fff !important; }
    body.dark table th { background: var(--surface-container) !important; color: #fff !important; }
    body.dark table td { color: #f2f4f7 !important; border-color: var(--line) !important; }
    body.dark .pill.green { background: var(--surface-container) !important; color: #e5e7eb !important; }
    body.dark .section-title b,
    /* Sidebar counters stay neutral in dark; the topbar bell keeps the red
       unread badge — it is the one counter that must read as "unacted". */
    body.dark .nav-btn .notification-badge { background: #d8dbe0 !important; color: #101216 !important; }
    body.dark .topbar .notify-button .notification-badge { background: #dc2626 !important; color: #fff !important; }
    body.dark .login-screen { background: var(--page-wash) !important; }
    body.dark .login-hero { background: linear-gradient(145deg, #1c2026, #0f1115) !important; color: #fff !important; }
    body.dark .login-screen svg, body.dark .login-screen .icon, body.dark .login-screen [class*="icon"] { color: #fff !important; fill: currentColor; }
    body.dark .brand-mark { background: #e5e7eb !important; color: #111318 !important; }

    /* Shadcn-inspired sidebar: neutral, compact and theme-safe. */
    .sidebar {
      --sidebar-bg: #ffffff;
      --sidebar-text: #475569;
      --sidebar-icon: #64748b;
      --sidebar-label: #64748b;
      --sidebar-muted: #94a3b8;
      --sidebar-hover-bg: #f1f5f9;
      --sidebar-active-bg: rgba(15, 23, 42, .08);
      --sidebar-active-text: #0f172a;
      --sidebar-border: #e2e8f0;
      --sidebar-badge-bg: #334155;
      --sidebar-badge-text: #ffffff;
      padding: 20px 16px !important;
      gap: 18px !important;
      background: var(--sidebar-bg) !important;
      border-right: 1px solid var(--sidebar-border) !important;
      color: var(--sidebar-text) !important;
      overflow: hidden !important;
    }
    .sidebar .nav-group {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
    }
    .sidebar .nav-group::-webkit-scrollbar { display: none; }
    .sidebar .nav-section { display: grid; gap: 4px; flex: none; }
    .sidebar .nav-section .nav-label { margin: 0 12px 6px !important; }
    .sidebar .nav-label {
      margin: 18px 12px 6px !important;
      color: var(--sidebar-label) !important;
      font-family: inherit !important;
      font-size: 11px !important;
      line-height: 16px;
      font-weight: 600 !important;
      letter-spacing: .06em !important;
      text-transform: uppercase;
    }
    .sidebar .nav-btn {
      width: 100%;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px !important;
      border: 0 !important;
      border-radius: 8px !important;
      background: transparent !important;
      color: var(--sidebar-text) !important;
      font-family: inherit;
      font-size: 14px;
      line-height: 20px;
      font-weight: 500 !important;
      text-align: left;
      box-shadow: none !important;
      transition: background-color 200ms ease, color 200ms ease, transform 200ms ease !important;
    }
    .sidebar .nav-btn:hover { background: var(--sidebar-hover-bg) !important; color: var(--sidebar-active-text) !important; }
    .sidebar .nav-btn.active {
      background: var(--sidebar-active-bg) !important;
      color: var(--sidebar-active-text) !important;
      font-weight: 600 !important;
    }
    .sidebar .nav-btn:active { transform: scale(.99); }
    .sidebar .nav-btn:focus-visible { outline: 2px solid var(--sidebar-active-text); outline-offset: 2px; }
    .sidebar .nav-btn svg {
      width: 18px !important;
      height: 18px !important;
      flex: 0 0 18px;
      color: var(--sidebar-icon) !important;
      stroke-width: 2;
    }
    .sidebar .nav-btn .nav-text { min-width: 0; flex: 1; line-height: 20px; }
    .sidebar .nav-btn:hover svg,
    .sidebar .nav-btn.active svg { color: var(--sidebar-active-text) !important; }
    .sidebar .nav-btn:disabled,
    .sidebar .nav-btn[aria-disabled="true"] { color: var(--sidebar-muted) !important; opacity: .55; }
    .sidebar .notification-badge {
      background: var(--sidebar-badge-bg) !important;
      color: var(--sidebar-badge-text) !important;
      box-shadow: none !important;
    }
    .sidebar .sync-box {
      padding: 12px !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 8px !important;
      background: #f8fafc !important;
      color: #475569 !important;
      box-shadow: none !important;
    }
    body.dark .sidebar {
      --sidebar-bg: #0f1115;
      --sidebar-text: #cbd5e1;
      --sidebar-icon: #94a3b8;
      --sidebar-label: #94a3b8;
      --sidebar-muted: #64748b;
      --sidebar-hover-bg: #1e293b;
      --sidebar-active-bg: rgba(248, 250, 252, .10);
      --sidebar-active-text: #f8fafc;
      --sidebar-border: #252a31;
      --sidebar-badge-bg: #475569;
      --sidebar-badge-text: #ffffff;
    }
    body.dark .sidebar .nav-btn:hover { color: #f1f5f9 !important; }
    body.dark .sidebar .sync-box {
      background: #171a20 !important;
      border-color: #2b3038 !important;
      color: #cbd5e1 !important;
    }
    
    
    

    /* iOS login keyboard: lock the document to the visual viewport, not the layout viewport. */
    @media (max-width: 720px) {
      body.login-active,
      body.login-active #root {
        position: fixed;
        inset: 0;
        width: 100%;
        height: var(--visible-viewport-height, 100vh);
        min-height: 0;
        margin: 0;
        overflow: hidden;
        overscroll-behavior: none;
      }
      @supports (height: 100dvh) {
        body.login-active,
        body.login-active #root { height: var(--visible-viewport-height, 100dvh); }
      }
      body.login-active .login-screen {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        place-items: center;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
      }
      body.login-active .login-card {
        width: min(440px, 100%);
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
      }
      body.login-active .login-form {
        min-height: 0;
        max-height: 100%;
        padding: clamp(16px, 4vw, 24px);
        align-content: center;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overflow-anchor: none;
      }
      body.login-active .login-form::-webkit-scrollbar { display: none; }
      body.login-active .login-form input {
        font-size: 16px;
        touch-action: manipulation;
      }
      @media (max-height: 560px) {
        body.login-active .login-screen { place-items: stretch center; }
        body.login-active .login-form { align-content: start; }
      }
    }

    @media (hover: none), (pointer: coarse) {
      .sidebar .nav-btn:not(.active):hover {
        background: transparent !important;
        color: var(--sidebar-text) !important;
      }
      .sidebar .nav-btn:not(.active):hover svg { color: var(--sidebar-icon) !important; }
    }

    /* Keep the mobile drawer below the status bar and group navigation naturally. */
    @media (max-width: 980px) {
      .sidebar {
        padding-top: calc(12px + var(--mobile-safe-top)) !important;
        padding-bottom: calc(12px + var(--mobile-safe-bottom)) !important;
        gap: 10px !important;
        overflow: hidden !important;
      }
      .sidebar .nav-group {
        justify-content: flex-start !important;
        gap: 10px !important;
      }
      .sidebar .nav-label {
        margin-top: 10px !important;
        margin-bottom: 4px !important;
      }
      .sidebar .nav-section:first-child .nav-label { margin-top: 0 !important; }
      .sidebar .nav-btn { min-height: 44px; padding-top: 10px !important; padding-bottom: 10px !important; }
    }

    /* Keep mobile page titles completely below the fixed safe-area header. */
    @media (max-width: 980px) {
      .topbar {
        min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
        padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
      }
      .main {
        padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
      }
      .content > .page-head:first-child,
      .content > header:first-child {
        margin-top: 10px !important;
      }
    }

    .toast div {
      background: var(--ink) !important;
      color: var(--bg) !important;
      border: 1px solid color-mix(in srgb, var(--bg) 28%, transparent) !important;
    }
    @media (max-width: 980px) {
      .toast { bottom: max(78px, calc(78px + var(--mobile-safe-bottom, 0px))) !important; }
    }

    /* Ensure navigation labels keep contrast against each theme's active pill. */
    @media (max-width: 980px) {
      body:not(.dark) .bottom-nav button.active,
      body:not(.dark) .bottom-nav button.active .bottom-label,
      body:not(.dark) .bottom-nav button.active .bottom-icon { color: #0f172a !important; }
      body.dark .bottom-nav button.active,
      body.dark .bottom-nav button.active .bottom-label,
      body.dark .bottom-nav button.active .bottom-icon { color: #f8fafc !important; }
      
    }
    .manhole-sketch-card {
      display: grid;
      gap: 16px;
    }
    .sketch-help {
      display: none;
    }
    .sketch-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .sketch-tool {
      min-height: 42px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface-container-lowest);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    .sketch-tool:hover,
    .sketch-tool:focus-visible,
    .sketch-tool.is-active {
      border-color: var(--brand);
      background: var(--brand-soft);
      color: var(--brand);
    }
    .sketch-tool .material-symbols-outlined {
      font-size: 20px;
    }
    .sketch-tool svg { width: 18px; height: 18px; flex: 0 0 auto; }
    .manhole-sketch-launch svg { width: 18px; height: 18px; }
    .sketch-share-button svg { width: 18px; height: 18px; }
    .manhole-sketch-card [data-node-menu] svg { width: 16px; height: 16px; flex: 0 0 auto; }
    .sketch-tool[data-sketch-action="clear"] {
      font-size: 0;
    }
    .sketch-tool[data-sketch-action="clear"]::after {
      content: "Clear";
      font-size: 12px;
      font-weight: 700;
    }
    .sketch-color {
      width: 46px;
      height: 46px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      overflow: hidden;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }
    .sketch-color::-webkit-color-swatch-wrapper {
      padding: 0;
    }
    .sketch-color::-webkit-color-swatch {
      border: 0;
      border-radius: 50%;
    }
    .sketch-color::-moz-color-swatch {
      border: 0;
      border-radius: 50%;
    }
    .sketch-canvas-wrap {
      width: 100%;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--sketch-canvas-bg, #fff);
      touch-action: none;
    }
    .sketch-node-menu {
      position: fixed;
      z-index: 30;
      display: none;
      min-width: 176px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface-container-lowest);
      box-shadow: 0 14px 36px rgba(0,0,0,.22);
    }
    .sketch-node-menu.is-open { display: grid; gap: 6px; }
    .sketch-node-menu button { width: 100%; justify-content: flex-start; border-radius: 10px; }
    .sketch-node-menu .danger { color: var(--red); }
    .manhole-sketch-card,
    .manhole-sketch-card * {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    .manhole-sketch-card input,
    .manhole-sketch-card output,
    .manhole-sketch-card canvas {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    .manhole-sketch-card button,
    .manhole-sketch-card select,
    .manhole-sketch-card [role="button"] {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .sketch-switches,
    .sketch-width-control {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface-container-lowest);
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
    }
    .sketch-switches {
      display: none;
    }
    .sketch-width-control input {
      width: 92px;
      accent-color: var(--brand);
    }
    .manhole-sketch-card.sketch-disabled .sketch-workspace {
      display: none;
    }
    .sketch-fullscreen-close {
      display: none;
    }
    .manhole-sketch-card:not(.is-fullscreen) .sketch-workspace,
    .manhole-sketch-card:not(.is-fullscreen) .sketch-fullscreen-topbar {
      display: none;
    }
    .manhole-sketch-launch {
      min-height: 48px;
    }
    .sketch-fullscreen-topbar {
      display: none;
    }
    .manhole-sketch-card.is-fullscreen {
      position: fixed;
      inset: 0;
      z-index: 10050;
      width: 100vw;
      height: 100dvh;
      max-width: none;
      margin: 0;
      padding: 0;
      border-radius: 0;
      background: var(--bg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .manhole-sketch-card.is-fullscreen .section-title {
      display: flex !important;
      grid-template-columns: none !important;
      align-items: center;
      flex: 0 0 auto;
      min-height: 48px;
      margin: 0;
      padding: 0 0 8px;
      justify-content: flex-end;
      border-bottom: 0;
    }
    .manhole-sketch-card.is-fullscreen .section-title > b,
    .manhole-sketch-card.is-fullscreen .section-title > h2 {
      display: none;
    }
    .manhole-sketch-card.is-fullscreen .sketch-fullscreen-close {
      display: inline-flex;
      margin-left: auto;
    }
    .manhole-sketch-card.is-fullscreen .sketch-fullscreen-topbar {
      display: flex !important;
      position: relative;
      z-index: 4;
      justify-content: flex-start;
      align-items: center;
      flex: 0 0 auto;
      padding: max(12px, env(safe-area-inset-top)) 12px 8px;
      background: var(--bg);
    }
    .manhole-sketch-card.is-fullscreen .sketch-fullscreen-topbar::after {
      content: "Vullnet's Sketches";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      color: var(--ink);
      font-size: 16px;
      font-weight: 700;
      line-height: 44px;
      white-space: nowrap;
      pointer-events: none;
    }
    .manhole-sketch-card.is-fullscreen .sketch-fullscreen-close {
      margin-left: 0 !important;
      margin-right: auto !important;
      align-self: flex-start;
    }
    .manhole-sketch-card.is-fullscreen .manhole-sketch-launch {
      display: none;
    }
    .manhole-sketch-card.is-fullscreen .sketch-canvas-wrap {
      min-height: 0;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      overscroll-behavior: contain;
      touch-action: none;
      border: 0;
      border-radius: 0;
      scrollbar-width: none;
    }
    .manhole-sketch-card.is-fullscreen .sketch-canvas-wrap::-webkit-scrollbar {
      display: none;
    }
    .manhole-sketch-card.is-fullscreen .sketch-workspace {
      min-height: 0;
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 0;
      overflow: hidden;
    }
    .manhole-sketch-card.is-fullscreen .sketch-toolbar {
      flex: 0 0 auto;
      max-height: none;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      overflow: visible;
      padding: 0 12px 10px;
      background: var(--bg);
    }
    .manhole-sketch-card.is-fullscreen .sketch-tool {
      min-width: 0;
      min-height: 44px;
      padding: 8px 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .manhole-sketch-card.is-fullscreen .sketch-width-control {
      grid-column: span 2;
      width: auto;
      min-width: 0;
    }
    .manhole-sketch-card.is-fullscreen .sketch-width-control {
      flex: 1 1 280px;
      min-width: 240px;
    }
    .manhole-sketch-card.is-fullscreen .sketch-width-control input {
      width: auto;
      min-width: 0;
      flex: 1 1 auto;
    }
    .manhole-sketch-card.is-fullscreen .sketch-manhole-picker {
      flex: 0 0 46px;
      width: 46px;
      height: 46px;
      min-width: 46px;
      margin-left: auto;
      margin-right: 8px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--surface-container-lowest);
      color: var(--brand);
      font: 800 11px/1 Arial, sans-serif;
      text-align: center;
      text-align-last: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      transform: translateX(25px);
      position: relative;
      z-index: 2;
      margin-left: 0;
      margin-right: 0;
    }
    .manhole-sketch-card.is-fullscreen .sketch-color {
      grid-column: 4;
      justify-self: center;
      flex: 0 0 46px;
      width: 46px;
      height: 46px;
    }
    .sketch-share-button {
      display: none;
    }
    .manhole-sketch-card.is-fullscreen .sketch-share-button {
      display: inline-flex;
      position: fixed;
      right: 16px;
      bottom: max(16px, env(safe-area-inset-bottom));
      z-index: 6;
      min-height: 46px;
      padding: 10px 16px;
      border: 1px solid var(--brand);
      border-radius: 999px;
      background: var(--brand);
      color: #fff;
      align-items: center;
      gap: 7px;
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }
    body.dark .manhole-sketch-card.is-fullscreen .sketch-share-button {
      background: #1c3a5e;
      border-color: #73db9a;
      color: #ffffff;
    }
    
    .manhole-sketch-card.is-fullscreen .sketch-fullscreen-close {
      background: #2b8f24;
      color: #ffffff;
      border-color: #2b8f24;
      column-gap: 25px;
    }
    .manhole-sketch-card.is-fullscreen #manholeSketchCanvas {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      flex: 0 0 auto;
      transform-origin: center center;
    }
    .sketch-zoom-value {
      display: none !important;
    }
    /* Pinch zoom is the single zoom control in the fullscreen sketch. */
    .manhole-sketch-card [data-sketch-action="zoom-in"],
    .manhole-sketch-card [data-sketch-action="zoom-out"],
    .manhole-sketch-card [data-sketch-action="zoom-reset"] {
      display: none !important;
    }
    html.sketch-fullscreen-open,
    body.sketch-fullscreen-open {
      overflow: hidden;
      overscroll-behavior: none;
      height: 100%;
    }
    body.dark .manhole-sketch-card.is-fullscreen {
      background: #0e1613;
    }
    
    :root {
      --sketch-canvas-bg: #fffdf7;
      --sketch-grid: #d9e2dc;
      --sketch-mh-fill: #e9eff3;
      --sketch-mh-stroke: #16233a;
      --sketch-mh-text: #16233a;
    }
    body.dark {
      --sketch-canvas-bg: #201f1e;
      --sketch-grid: #47453f;
      --sketch-mh-fill: #363532;
      --sketch-mh-stroke: #d0d0d8;
      --sketch-mh-text: #f5f4ef;
    }
    
    #manholeSketchCanvas {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 15 / 7;
      touch-action: none;
      cursor: crosshair;
    }
    @media (max-width: 560px) {
      .sketch-toolbar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .sketch-tool {
        padding: 8px 5px;
        font-size: 11px;
        min-width: 0;
      }
      .sketch-color {
        width: 46px;
        justify-self: center;
        grid-column: 4;
      }
      .sketch-manhole-picker {
        width: 46px;
        height: 46px;
        min-width: 46px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface-container-lowest);
        color: var(--brand);
        font: 800 11px/1 Arial, sans-serif;
      text-align: center;
      text-align-last: center;
      text-indent: 0;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        grid-column: 3;
        justify-self: end;
        margin-right: 18px;
      }
      .sketch-manhole-picker:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
      .sketch-width-control {
        grid-column: span 2;
        width: 100%;
        min-width: 0;
        flex-direction: row;
      }
      .sketch-width-control input {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
      }
    }
    [aria-busy="true"] {
      cursor: progress !important;
      opacity: .72;
      pointer-events: none;
    }
    [data-action="kmz-contract"],
    [data-action="copy-push-feedback"],
    .developer-only {
      display: none !important;
    }
    @media (max-width: 720px) {
      .point-detail .btn,
      .review-action-stack .btn,
      .my-reports-table .btn,
      .review-clean-actions .btn,
      .map-quick-button,
      .mobile-menu,
      .notify-button,
      .topbar-map-button {
        min-width: 44px !important;
        min-height: 44px !important;
      }
    }
    .map-setup-card { display: grid; gap: 16px; }
    .map-setup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .map-setup-note {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-container-low);
      color: var(--muted);
      line-height: 1.55;
    }
    .map-import-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .map-import-stat {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-container-low);
    }
    .map-import-stat strong { display: block; margin-top: 4px; font-size: 22px; color: var(--ink); }
    .map-import-errors {
      margin: 0;
      padding: 12px 12px 12px 32px;
      border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line));
      border-radius: 12px;
      background: color-mix(in srgb, var(--red) 8%, var(--surface-container-lowest));
      color: var(--ink);
    }
    .map-import-preview-table { max-height: 330px; overflow: auto; }
    .map-editor-panel {
      position: fixed;
      right: max(62px, calc(var(--mobile-safe-right) + 58px));
      bottom: max(66px, calc(var(--mobile-safe-bottom) + 60px));
      z-index: 538;
      width: min(260px, calc(100vw - 84px));
      display: none;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface-container-lowest) 96%, transparent);
      box-shadow: 0 16px 38px rgba(0,0,0,.24);
      backdrop-filter: blur(16px);
    }
    .map-editor-panel.open { display: grid; }
    .map-editor-panel .btn { width: 100%; min-height: 44px; }
    .map-editor-panel [data-action="start-add-house-connection-pipe"] { display: none; }
    .map-editor-hint {
      position: fixed;
      left: 50%;
      top: max(68px, calc(var(--mobile-safe-top) + 34px));
      z-index: 539;
      transform: translateX(-50%);
      width: min(520px, calc(100vw - 120px));
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--ink);
      color: var(--surface-container-lowest);
      box-shadow: 0 14px 34px rgba(0,0,0,.25);
      text-align: center;
      font-weight: 700;
      pointer-events: none;
    }
    .map-entry-modal .modal { width: min(760px, 100%); }
    .join-dialog {
      width: min(456px, calc(100vw - 28px)) !important;
      gap: 18px !important;
      padding: 22px !important;
      border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
      border-radius: 22px !important;
      box-shadow: 0 24px 70px rgba(10, 35, 26, .22);
    }
    .join-dialog-intro { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; }
    .join-dialog-intro::before { content: ''; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, var(--surface-container-lowest)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); grid-row: span 2; }
    .join-dialog-intro .eyebrow { margin: 0 0 2px; }
    .join-dialog-intro h2 { margin: 0 !important; font-size: clamp(21px, 5vw, 27px); letter-spacing: -.03em; }
    .join-dialog-intro p { grid-column: 2; margin: 4px 0 0; line-height: 1.55; }
    .join-dialog-field { display: grid; gap: 8px; }
    .join-dialog-field > span { color: var(--ink); font-size: 13px; font-weight: 800; }
    .join-dialog-field .control { min-height: 54px; border-radius: 14px; padding-inline: 16px; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
    .join-dialog-actions { display: grid !important; grid-template-columns: .8fr 1.2fr !important; gap: 10px !important; margin-top: 2px; }
    .join-dialog-actions .btn { min-height: 46px; border-radius: 14px; box-shadow: none; }
    .join-dialog-actions .btn[type="submit"] { box-shadow: 0 9px 20px color-mix(in srgb, var(--brand) 24%, transparent); }
    @media (max-width: 520px) {
      .join-dialog { padding: 18px !important; border-radius: 20px !important; }
      .join-dialog-actions { grid-template-columns: 1fr 1.15fr !important; }
    }
    .map-entry-coordinates {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-container-low);
    }
    .map-entry-coordinates span { color: var(--muted); }
    .map-entry-coordinates strong { display: block; margin-top: 3px; color: var(--ink); }
    .map-draft-marker {
      width: 18px;
      height: 18px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 30%, transparent);
    }
    @media (max-width: 720px) {
      .map-setup-actions { display: grid; grid-template-columns: 1fr; }
      .map-import-summary { grid-template-columns: 1fr; }
      .map-entry-coordinates { grid-template-columns: 1fr; }
      .map-editor-hint { width: calc(100vw - 92px); font-size: 12px; }
      .map-entry-modal .modal { max-height: calc(100dvh - 18px); }
    }
    /* Final map-theme overrides: must remain after all generic map/button rules. */
    html:not(.dark) body .app.map-mode .map-network-tabs,
    html:not(.dark) body .app.map-mode .map-quick-tools,
    html:not(.dark) body .app.map-mode .map-locate-button,
    html:not(.dark) body .app.map-mode .map-home-button {
      background: rgba(250,253,249,.86) !important;
      border-color: rgba(28,58,94,.2) !important;
      color: #16233a !important;
      box-shadow: 0 16px 38px rgba(34,67,50,.2), inset 0 1px 0 rgba(255,255,255,.86) !important;
    }
    html:not(.dark) body .app.map-mode .map-network-tab { color: #4a6478 !important; }
    html:not(.dark) body .app.map-mode .map-network-tab.active { color: #0b3021 !important; }
    html.dark body .app.map-mode .map-network-tabs,
    html.dark body .app.map-mode .map-quick-tools,
    html.dark body .app.map-mode .map-locate-button,
    html.dark body .app.map-mode .map-home-button {
      background: rgba(28,28,31,.94) !important;
      border-color: var(--line) !important;
      color: var(--ink) !important;
      box-shadow: 0 18px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }
    html.dark body .app.map-mode .map-network-tab { color: var(--muted) !important; }
    html.dark body .app.map-mode .map-network-tab.active {
      color: #0a0a0b !important;
      background: linear-gradient(135deg, #ededf0, #c8c8d2) !important;
    }
    
    
    
    
    /* Isolated mobile drawer safe-area fix. Keep it separate so it can be
       reverted independently if a device reports a different inset. */
    @media (max-width: 980px) {
      .sidebar {
        --drawer-bottom-extension: max(var(--mobile-safe-bottom, 0px), 47px);
        height: auto !important;
        bottom: calc(-1 * var(--drawer-bottom-extension)) !important;
        padding-bottom: calc(12px + var(--drawer-bottom-extension)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }
      .sidebar-backdrop { bottom: calc(-1 * var(--drawer-bottom-extension)) !important; }
    }
    /* Bottom navigation: a static floating pill. Its position, size and
       shape never change -- not on scroll, not on tap. The only thing that
       changes is which button carries the highlight: a solid circle behind
       that button's icon, sized and placed the same for every route, so
       "selected" and "just tapped" both read as one clear, fixed state
       instead of the bar or the icon growing. */
    @media (max-width: 980px) {
      .bottom-nav {
        --nav-inset: max(14px, env(safe-area-inset-left, 0px));
        position: fixed !important;
        z-index: 50 !important;
        left: var(--nav-inset) !important;
        right: max(14px, env(safe-area-inset-right, 0px)) !important;
        bottom: var(--bottom-dock) !important;
        height: auto !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(var(--nav-count, 4), minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 6px 8px !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--surface-container-lowest) 97%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
        outline: 0 !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
      }
      .bottom-nav::after,
      .bottom-nav::before {
        display: none !important;
      }
      /* AI assistant lives just above the bottom bar and stays there, fixed, the
         same way the bar does — it used to sit in the topbar where it scrolled
         out of reach. Bottom bar: bottom = max(10px, safe-area + 4px), height
         ~58px, so this clears it by ~14px. */
      .ai-fab {
        position: fixed;
        z-index: 51;
        right: max(14px, env(safe-area-inset-right, 0px));
        bottom: calc(var(--bottom-dock) + 84px);
        display: block;
        pointer-events: auto;
      }
      .ai-fab .ai-topbar-button {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        /* .notify-button brings 1px 6px of padding, which leaves a 38px content
           box inside this 52px button. The mark is 46px, so it overflowed that
           box and the browser nudged it clear of the start edge — the manhole
           sat 4px right of the button's centre. A round icon button has no use
           for side padding. */
        padding: 0;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: var(--ink);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      /* Safety orange, the palette's accent for anything that acts rather than
         reports — the assistant is the one thing on the page that does. */
      /* The fallback is not decoration: one of the dark palettes leaves --amber
         undefined, and a var() with no fallback is invalid at computed-value
         time, so the colour silently fell back to inherited grey. */
      .ai-fab .ai-topbar-button,
      body.dark .ai-fab .ai-topbar-button {
        /* The dark rule is needed, not redundant: body.dark .notify-button sets
           this button's colour to var(--brand-2), which the dark palette defines
           as #d0d0d8 — a grey. Matching its specificity with .ai-fab in the
           selector is enough; no !important required. */
        color: var(--amber);
        /* The background belongs here for the same reason, and it is the same
           trap: `.ai-fab .ai-topbar-button` above is two classes, while
           `body.dark .notify-button` is two classes plus an element, so in dark
           mode the shared notify chrome won its `background: transparent` and
           painted a rounded plate behind the robot. The engineer sheet had
           already patched this for its own role with !important; the manager
           had no such rule, which is why the plate showed there. Neutralising
           it once, for every role and both themes, is the fix. */
        background: transparent;
        box-shadow: none;
        border: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      /* The mark itself lives in ai-assistant.css: it is the assistant's icon,
         and it now appears in the chat as well as on this button, so it cannot
         stay inside a phone-only media query. */
      .ai-fab .ai-topbar-button svg { width: 100%; height: 100%; display: block; overflow: visible; }
      .ai-fab .ai-topbar-button:active { transform: scale(var(--press-strong, .94)); }
      /* The assistant's own full-screen page must cover it. */
      body.ai-page .ai-fab, body.ai-open .ai-fab { display: none; }
      .app.map-mode .ai-fab,
      .app.settings-mode .ai-fab,
      .app.project-detail-mode .ai-fab { display: none; }
      .bottom-nav button,
      .bottom-nav button.active,
      .bottom-nav button.pressed {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 999px !important;
        -webkit-tap-highlight-color: transparent !important;
        appearance: none !important;
        height: auto !important;
        min-height: 44px !important;
        transform: none !important;
        filter: none !important;
      }
      .bottom-nav button.pressed .bottom-label { color: inherit !important; }
      /* The highlight circle: same size at rest, active and pressed, so
         nothing in the bar resizes -- only the background/color fade in. */
      .bottom-nav .bottom-icon {
        transition: background .16s ease, color .16s ease !important;
      }
      .bottom-nav button.active .bottom-icon,
      .bottom-nav button.pressed .bottom-icon {
        background: linear-gradient(145deg, #73db9a, #b8f4c2) !important;
        box-shadow: 0 4px 12px rgba(53, 168, 83, .28) !important;
      }
      body.dark .bottom-nav button.active .bottom-icon,
      body.dark .bottom-nav button.pressed .bottom-icon {
        background: linear-gradient(145deg, #e15a5a, #ff9a9a) !important;
        box-shadow: 0 4px 12px rgba(150, 35, 35, .30) !important;
      }
      @media (prefers-reduced-motion: reduce) {
        .bottom-nav .bottom-icon { transition: none !important; }
      }
      .topbar {
        gap: 6px !important;
      }
      .mobile-menu {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }
      .hamburger-icon {
        width: 23px !important;
        gap: 5px !important;
      }
      .hamburger-icon span {
        height: 3px !important;
        border-radius: 999px !important;
      }
      .topbar > div:first-of-type {
        flex: 1 1 auto !important;
        text-align: left !important;
        margin-left: 0 !important;
      }
      .topbar > div:first-of-type strong {
        font-size: clamp(22px, 6vw, 28px) !important;
        line-height: 1 !important;
        letter-spacing: -.04em !important;
        white-space: nowrap !important;
      }
      .topbar > div:first-of-type .muted {
        display: none !important;
      }
    }
    @media (max-width: 980px) {
      .sidebar .nav-btn.pressed svg {
        color: inherit !important;
        transform: scale(1.24) !important;
        transform-origin: center !important;
        transition: transform .42s cubic-bezier(.2,.9,.2,1), color .42s ease !important;
      }
    }
    /* Viewport fix: let the document own scrolling instead of clipping the app shell. */
    html, body, #root { min-height: 100%; height: auto; }
    @media (max-width: 980px) {
      .app:not(.map-mode) { height: auto !important; min-height: 100dvh !important; }
      .app:not(.map-mode) .main { height: auto !important; min-height: 100dvh !important; overflow: visible !important; }
      .app:not(.map-mode) .content {
        height: auto !important;
        min-height: calc(100dvh - 58px) !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
      }
      /* 96px clears the bottom bar but not the assistant, which floats 84px
         above the bar and is 52px tall — so the last card ran underneath it and
         the launcher sat on top of the content. Reserve the launcher's own band
         plus 12px, and only on pages that actually show it. */
      body.has-ai-fab .app:not(.map-mode):not(.settings-mode):not(.project-detail-mode) .content {
        padding-bottom: calc(var(--bottom-dock) + 148px) !important;
      }
      /* body clips horizontally but must NOT own the vertical scroll -- see the
         overflow-axis note further up. `auto` here made body a second, dead
         scroll container that ate touch drags. */
      body:not(.login-active) { overflow-x: hidden; overflow-y: auto; }
      @supports (overflow: clip) {
        body:not(.login-active) { overflow-x: clip; overflow-y: visible; }
      }
    }

    /* Settings starts at the top ------------------------------------------
       The settings header is fixed and the content already clears it with a
       72px top offset (see site-engineer.css). But .main additionally carries
       the mobile topbar clearance (64px), and settings-mode hides the topbar,
       so that 64px is pure dead space stacked on top of the real clearance --
       it pushed Settings into the middle of the screen. Zero only .main;
       the content's own 72px header clearance and bottom-nav clearance stay. */
    .app.settings-mode .main { padding-top: 0 !important; }

    /* Notifications: Action Inbox --------------------------------------- */
    .route-notifications .notification-inbox {
      width: min(100%, 920px);
      max-width: 920px;
      margin: 0 auto;
      display: grid;
      gap: 30px;
    }
    .route-notifications .notification-inbox-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 0 20px;
      border-bottom: 1px solid var(--line);
    }
    .route-notifications .notification-inbox-toolbar > div {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .route-notifications .notification-inbox-toolbar strong {
      color: var(--ink);
      font-size: 17px;
      line-height: 1.25;
    }
    .route-notifications .notification-inbox-toolbar > div > span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.4;
    }
    .route-notifications .notification-mark-all {
      min-height: 44px;
      padding: 10px 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: none;
      border: 1px solid var(--line);
      border-radius: 14px !important;
      background: var(--panel);
      color: var(--brand);
      font-weight: 750;
    }
    .route-notifications .notification-mark-all .material-symbols-outlined {
      font-size: 19px;
    }
    .route-notifications .notification-inbox-group {
      display: grid;
      gap: 12px;
    }
    .route-notifications .notification-inbox-group > header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px;
    }
    .route-notifications .notification-inbox-group > header h2 {
      margin: 0;
      color: var(--ink);
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -.025em;
    }
    .route-notifications .notification-inbox-group > header > span {
      min-width: 28px;
      height: 28px;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--surface-container-low);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    .route-notifications .notification-inbox-group.is-action > header > span {
      background: color-mix(in srgb, var(--brand) 12%, var(--panel));
      color: var(--brand);
    }
    .route-notifications .notification-inbox-list {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--panel);
      box-shadow: 0 14px 34px rgba(15, 38, 31, .06);
    }
    .route-notifications .notification-inbox-item {
      width: 100%;
      min-height: 104px;
      padding: 18px 20px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0 !important;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: background-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
    }
    .route-notifications .notification-inbox-item:last-child {
      border-bottom: 0;
    }
    .route-notifications .notification-inbox-item:hover {
      background: var(--surface-container-lowest);
    }
    .route-notifications .notification-inbox-item:active {
      transform: scale(.992);
    }
    .route-notifications .notification-inbox-item:focus-visible {
      position: relative;
      z-index: 1;
      outline: 3px solid var(--focus-ring);
      outline-offset: -3px;
    }
    .route-notifications .notification-inbox-item.unread {
      background: color-mix(in srgb, var(--brand) 5%, var(--panel));
    }
    .route-notifications .notification-inbox-icon {
      position: relative;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--surface-container-low);
      color: var(--muted);
    }
    .route-notifications .notification-inbox-icon .material-symbols-outlined {
      font-size: 23px;
    }
    .route-notifications .notification-inbox-item.unread .notification-inbox-icon {
      background: var(--brand);
      color: #fff;
    }
    .route-notifications .notification-inbox-item.unread .notification-inbox-icon::after {
      content: "";
      position: absolute;
      top: -3px;
      right: -3px;
      width: 11px;
      height: 11px;
      border: 2px solid var(--panel);
      border-radius: 50%;
      background: #2d8cff;
    }
    .route-notifications .notification-inbox-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .route-notifications .notification-inbox-meta {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .route-notifications .notification-inbox-meta > span {
      color: var(--brand);
    }
    .route-notifications .notification-inbox-meta time::before {
      content: "·";
      margin-right: 9px;
    }
    .route-notifications .notification-inbox-copy > strong {
      overflow: hidden;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .route-notifications .notification-inbox-body {
      overflow: hidden;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .route-notifications .notification-inbox-action {
      min-height: 38px;
      padding: 0 4px 0 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 800;
    }
    .route-notifications .notification-inbox-action .material-symbols-outlined {
      font-size: 19px;
      transition: transform .18s ease;
    }
    .route-notifications .notification-inbox-item:hover .notification-inbox-action .material-symbols-outlined {
      transform: translateX(3px);
    }
    .route-notifications .notification-inbox-error {
      width: fit-content;
      margin-top: 3px;
      color: var(--red);
      font-size: 12px;
      font-weight: 750;
    }
    .route-notifications .notification-inbox-item.delivery-failed .notification-inbox-icon {
      background: color-mix(in srgb, var(--red) 12%, var(--panel));
      color: var(--red);
    }
    .route-notifications .notification-inbox-group.is-earlier .notification-inbox-item:not(.delivery-failed) .notification-inbox-icon {
      color: var(--muted);
    }
    .route-notifications .notification-inbox-empty {
      min-height: 280px;
      padding: 42px 24px;
      display: grid;
      place-content: center;
      justify-items: center;
      text-align: center;
      border: 1px dashed var(--line);
      border-radius: 22px;
      background: var(--panel);
    }
    .route-notifications .notification-inbox-empty > .material-symbols-outlined {
      width: 58px;
      height: 58px;
      margin-bottom: 18px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: var(--surface-container-low);
      color: var(--brand);
      font-size: 28px;
    }
    .route-notifications .notification-inbox-empty h2 {
      max-width: 420px;
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 20px;
    }
    .route-notifications .notification-inbox-empty p {
      max-width: 480px;
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
    }
    .route-notifications .notification-see-more {
      width: fit-content;
      min-height: 44px;
      margin: -10px auto 0;
      padding: 10px 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid var(--line);
      border-radius: 14px !important;
      background: var(--panel);
      color: var(--ink);
      font-weight: 750;
    }
    .route-notifications .notification-see-more .material-symbols-outlined {
      font-size: 19px;
    }
    body.dark .route-notifications .notification-inbox-list, body.dark .route-notifications .notification-inbox-empty, body.dark .route-notifications .notification-mark-all, body.dark .route-notifications .notification-see-more{
      background: var(--panel);
      border-color: var(--line);
      box-shadow: none;
    }
    body.dark .route-notifications .notification-inbox-item.unread{
      background: color-mix(in srgb, var(--surface-container) 72%, var(--panel));
    }
    body.dark .route-notifications .notification-inbox-item.unread .notification-inbox-icon{
      background: var(--surface-container);
      color: var(--ink);
    }
    @media (max-width: 720px) {
      .route-notifications .notification-inbox {
        gap: 24px;
      }
      .route-notifications .notification-inbox-toolbar {
        align-items: stretch;
        padding-bottom: 18px;
      }
      .route-notifications .notification-mark-all {
        width: 44px;
        padding: 0;
      }
      .route-notifications .notification-mark-all:not(:focus) {
        font-size: 0;
      }
      .route-notifications .notification-mark-all .material-symbols-outlined {
        font-size: 20px;
      }
      .route-notifications .notification-inbox-group > header h2 {
        font-size: 18px;
      }
      .route-notifications .notification-inbox-item {
        min-height: 96px;
        padding: 16px;
        grid-template-columns: 44px minmax(0, 1fr) 24px;
        gap: 12px;
      }
      .route-notifications .notification-inbox-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
      }
      .route-notifications .notification-inbox-action {
        min-height: 36px;
        padding: 0;
      }
      .route-notifications .notification-inbox-action > span:first-child {
        display: none;
      }
      .route-notifications .notification-inbox-action .material-symbols-outlined {
        font-size: 21px;
      }
      .route-notifications .notification-inbox-copy > strong,
      .route-notifications .notification-inbox-body {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .route-notifications .notification-inbox-body {
        -webkit-line-clamp: 2;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .route-notifications .notification-inbox-item,
      .route-notifications .notification-inbox-action .material-symbols-outlined {
        transition: none;
      }
    }

    /* Notifications prototype 2: Project Timeline ---------------------- */
    .route-notifications .notification-timeline {
      width: min(100%, 940px);
      max-width: 940px;
      margin: 0 auto;
      display: grid;
      gap: 34px;
    }
    .route-notifications .notification-timeline-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 0 20px;
      border-bottom: 1px solid var(--line);
    }
    .route-notifications .notification-timeline-toolbar > div {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .route-notifications .notification-timeline-toolbar strong {
      color: var(--ink);
      font-size: 17px;
      line-height: 1.25;
    }
    .route-notifications .notification-timeline-toolbar > div > span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.4;
    }
    .route-notifications .notification-timeline-day {
      display: grid;
      grid-template-columns: 128px minmax(0, 1fr);
      gap: 26px;
    }
    .route-notifications .notification-timeline-day > header {
      align-self: start;
      position: sticky;
      top: 88px;
      display: grid;
      justify-items: start;
      gap: 8px;
      padding-top: 7px;
    }
    .route-notifications .notification-timeline-day > header h2 {
      margin: 0;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.25;
      letter-spacing: -.015em;
      text-transform: capitalize;
    }
    .route-notifications .notification-timeline-day > header span {
      min-width: 27px;
      height: 27px;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--surface-container-low);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    .route-notifications .notification-timeline-events {
      min-width: 0;
    }
    .route-notifications .notification-timeline-event {
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 14px;
    }
    .route-notifications .notification-timeline-rail {
      position: relative;
      display: flex;
      justify-content: center;
    }
    .route-notifications .notification-timeline-rail::after {
      content: "";
      position: absolute;
      top: 50px;
      bottom: -8px;
      left: 50%;
      width: 1px;
      background: var(--line);
      transform: translateX(-50%);
    }
    .route-notifications .notification-timeline-event.is-last .notification-timeline-rail::after {
      display: none;
    }
    .route-notifications .notification-timeline-icon {
      position: relative;
      z-index: 1;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--panel);
      color: var(--muted);
      box-shadow: 0 6px 18px rgba(15, 38, 31, .06);
    }
    .route-notifications .notification-timeline-icon .material-symbols-outlined {
      font-size: 21px;
    }
    .route-notifications .notification-timeline-event.unread .notification-timeline-icon {
      border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
      background: var(--brand);
      color: #fff;
    }
    .route-notifications .notification-timeline-event.unread .notification-timeline-icon::after {
      content: "";
      position: absolute;
      top: -4px;
      right: -4px;
      width: 11px;
      height: 11px;
      border: 2px solid var(--panel);
      border-radius: 50%;
      background: #2d8cff;
    }
    .route-notifications .notification-timeline-content {
      width: 100%;
      min-width: 0;
      margin: 0 0 8px;
      padding: 4px 16px 26px;
      display: grid;
      justify-items: start;
      gap: 5px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0 !important;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: background-color .18s ease, padding .18s cubic-bezier(.2,.8,.2,1);
    }
    .route-notifications .notification-timeline-event.is-last .notification-timeline-content {
      margin-bottom: 0;
    }
    .route-notifications .notification-timeline-content:hover {
      padding-left: 20px;
      border-radius: 14px !important;
      background: color-mix(in srgb, var(--surface-container-low) 62%, transparent);
    }
    .route-notifications .notification-timeline-content:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
      border-radius: 14px !important;
    }
    .route-notifications .notification-timeline-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .route-notifications .notification-timeline-meta > span:first-child {
      color: var(--brand);
    }
    .route-notifications .notification-timeline-meta time::before {
      content: "·";
      margin-right: 8px;
    }
    .route-notifications .notification-timeline-meta em {
      padding: 3px 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--amber) 18%, var(--panel));
      color: color-mix(in srgb, var(--amber) 58%, var(--ink));
      font-size: 10px;
      font-style: normal;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .route-notifications .notification-timeline-content > strong {
      color: var(--ink);
      font-size: 17px;
      line-height: 1.3;
      letter-spacing: -.012em;
    }
    .route-notifications .notification-timeline-body {
      max-width: 68ch;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }
    .route-notifications .notification-timeline-open {
      margin-top: 7px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 800;
    }
    .route-notifications .notification-timeline-open .material-symbols-outlined {
      font-size: 18px;
      transition: transform .18s ease;
    }
    .route-notifications .notification-timeline-content:hover .notification-timeline-open .material-symbols-outlined {
      transform: translateX(3px);
    }
    .route-notifications .notification-timeline-error {
      margin-top: 3px;
      color: var(--red);
      font-size: 12px;
      font-weight: 750;
    }
    .route-notifications .notification-timeline-event.delivery-failed .notification-timeline-icon {
      border-color: color-mix(in srgb, var(--red) 24%, var(--line));
      background: color-mix(in srgb, var(--red) 10%, var(--panel));
      color: var(--red);
    }
    .route-notifications .notification-timeline-empty {
      min-height: 300px;
      padding: 44px 24px;
      display: grid;
      place-content: center;
      justify-items: center;
      text-align: center;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .route-notifications .notification-timeline-empty > .material-symbols-outlined {
      width: 58px;
      height: 58px;
      margin-bottom: 18px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: var(--surface-container-low);
      color: var(--brand);
      font-size: 29px;
    }
    .route-notifications .notification-timeline-empty h2 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 20px;
    }
    .route-notifications .notification-timeline-empty p {
      max-width: 480px;
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
    }
    body.dark .route-notifications .notification-timeline-icon{
      background: var(--panel);
      border-color: var(--line);
      box-shadow: none;
    }
    body.dark .route-notifications .notification-timeline-event.unread .notification-timeline-icon{
      background: var(--surface-container);
      color: var(--ink);
    }
    @media (max-width: 720px) {
      .route-notifications .notification-timeline {
        gap: 26px;
      }
      .route-notifications .notification-timeline-toolbar {
        align-items: stretch;
        padding-bottom: 18px;
      }
      .route-notifications .notification-timeline-day {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .route-notifications .notification-timeline-day > header {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2px;
      }
      .route-notifications .notification-timeline-day > header h2 {
        font-size: 18px;
      }
      .route-notifications .notification-timeline-event {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 11px;
      }
      .route-notifications .notification-timeline-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
      }
      .route-notifications .notification-timeline-rail::after {
        top: 46px;
      }
      .route-notifications .notification-timeline-content {
        padding: 1px 4px 24px 8px;
      }
      .route-notifications .notification-timeline-content:hover {
        padding-left: 8px;
        background: transparent;
      }
      .route-notifications .notification-timeline-body {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }

    /* Notifications prototype 3: Signal Center ------------------------- */
    .route-notifications .notification-signal-center {
      width: min(100%, 920px);
      max-width: 920px;
      margin: 0 auto;
      display: grid;
      gap: 26px;
    }
    .route-notifications .notification-signal-metrics {
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--panel);
      box-shadow: 0 14px 34px rgba(15, 38, 31, .06);
    }
    .route-notifications .notification-signal-metrics > div {
      min-width: 0;
      min-height: 112px;
      padding: 20px 22px;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
      gap: 10px;
      border-right: 1px solid var(--line);
    }
    .route-notifications .notification-signal-metrics > div:last-child {
      border-right: 0;
    }
    .route-notifications .notification-signal-metrics span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .035em;
      line-height: 1.25;
      text-transform: uppercase;
    }
    .route-notifications .notification-signal-metrics strong {
      color: var(--ink);
      font-size: clamp(30px, 5vw, 44px);
      font-variant-numeric: tabular-nums;
      letter-spacing: -.045em;
      line-height: .95;
    }
    .route-notifications .notification-signal-metrics .is-action strong {
      color: color-mix(in srgb, var(--amber) 74%, var(--ink));
    }
    .route-notifications .notification-signal-metrics .is-unread strong {
      color: var(--brand);
    }
    .route-notifications .notification-signal-metrics .is-complete strong {
      color: var(--green);
    }
    .route-notifications .notification-signal-toolbar {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      padding: 0 2px;
    }
    .route-notifications .notification-signal-toolbar > div {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .route-notifications .notification-signal-toolbar strong {
      color: var(--ink);
      font-size: 21px;
      letter-spacing: -.025em;
      line-height: 1.2;
    }
    .route-notifications .notification-signal-toolbar > div > span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.4;
    }
    .route-notifications .notification-signal-groups {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--panel);
      box-shadow: 0 16px 38px rgba(15, 38, 31, .06);
    }
    .route-notifications .notification-signal-group {
      border-bottom: 1px solid var(--line);
    }
    .route-notifications .notification-signal-group:last-child {
      border-bottom: 0;
    }
    .route-notifications .notification-signal-group > summary {
      min-height: 78px;
      padding: 14px 18px;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto auto 24px;
      align-items: center;
      gap: 13px;
      color: var(--ink);
      cursor: pointer;
      list-style: none;
      transition: background-color .18s ease;
    }
    .route-notifications .notification-signal-group > summary::-webkit-details-marker {
      display: none;
    }
    .route-notifications .notification-signal-group > summary:hover,
    .route-notifications .notification-signal-group[open] > summary {
      background: color-mix(in srgb, var(--surface-container-low) 58%, transparent);
    }
    .route-notifications .notification-signal-group > summary:focus-visible {
      position: relative;
      z-index: 2;
      outline: 3px solid var(--focus-ring);
      outline-offset: -3px;
    }
    .route-notifications .notification-signal-group-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--surface-container-low);
      color: var(--brand);
    }
    .route-notifications .notification-signal-group-icon .material-symbols-outlined {
      font-size: 22px;
    }
    .route-notifications .notification-signal-group-title {
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    .route-notifications .notification-signal-group-title strong {
      font-size: 16px;
      line-height: 1.25;
    }
    .route-notifications .notification-signal-group-title span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }
    .route-notifications .notification-signal-unread {
      padding: 5px 9px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--brand) 10%, var(--panel));
      color: var(--brand);
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
    }
    .route-notifications .notification-signal-group-count {
      min-width: 30px;
      height: 30px;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }
    .route-notifications .notification-signal-chevron {
      color: var(--muted);
      font-size: 22px;
      transition: transform .2s cubic-bezier(.2,.8,.2,1);
    }
    .route-notifications .notification-signal-group[open] .notification-signal-chevron {
      transform: rotate(180deg);
    }
    .route-notifications .notification-signal-list {
      border-top: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface-container-lowest) 38%, var(--panel));
    }
    .route-notifications .notification-signal-event {
      width: 100%;
      min-height: 96px;
      padding: 16px 18px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0 !important;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: background-color .18s ease;
    }
    .route-notifications .notification-signal-event:last-of-type {
      border-bottom: 0;
    }
    .route-notifications .notification-signal-event:hover {
      background: var(--panel);
    }
    .route-notifications .notification-signal-event:focus-visible {
      position: relative;
      z-index: 1;
      outline: 3px solid var(--focus-ring);
      outline-offset: -3px;
    }
    .route-notifications .notification-signal-event.unread {
      box-shadow: inset 3px 0 0 var(--brand);
    }
    .route-notifications .notification-signal-event-icon {
      position: relative;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: var(--surface-container-low);
      color: var(--muted);
    }
    .route-notifications .notification-signal-event-icon .material-symbols-outlined {
      font-size: 21px;
    }
    .route-notifications .notification-signal-event.unread .notification-signal-event-icon {
      background: var(--brand);
      color: #fff;
    }
    .route-notifications .notification-signal-event-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .route-notifications .notification-signal-event-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }
    .route-notifications .notification-signal-event-meta > span:first-child {
      color: var(--brand);
    }
    .route-notifications .notification-signal-event-meta time::before {
      content: "·";
      margin-right: 8px;
    }
    .route-notifications .notification-signal-event-meta em {
      padding: 3px 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--amber) 18%, var(--panel));
      color: color-mix(in srgb, var(--amber) 66%, var(--ink));
      font-size: 9px;
      font-style: normal;
      font-weight: 900;
      letter-spacing: .045em;
      text-transform: uppercase;
    }
    .route-notifications .notification-signal-event-copy > strong {
      overflow: hidden;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .route-notifications .notification-signal-event-body {
      overflow: hidden;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .route-notifications .notification-signal-event-open {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--brand);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }
    .route-notifications .notification-signal-event-open .material-symbols-outlined {
      font-size: 19px;
      transition: transform .18s ease;
    }
    .route-notifications .notification-signal-event:hover .notification-signal-event-open .material-symbols-outlined {
      transform: translateX(3px);
    }
    .route-notifications .notification-signal-event-error {
      color: var(--red);
      font-size: 11px;
      font-weight: 800;
    }
    .route-notifications .notification-signal-event.delivery-failed .notification-signal-event-icon {
      background: color-mix(in srgb, var(--red) 12%, var(--panel));
      color: var(--red);
    }
    .route-notifications .notification-signal-empty,
    .route-notifications .notification-signal-clipped {
      padding: 22px 18px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }
    .route-notifications .notification-signal-clipped {
      border-top: 1px dashed var(--line);
      font-weight: 750;
    }
    body.dark .route-notifications .notification-signal-metrics, body.dark .route-notifications .notification-signal-groups{
      border-color: var(--line);
      background: var(--panel);
      box-shadow: none;
    }
    body.dark .route-notifications .notification-signal-metrics .is-unread strong, body.dark .route-notifications .notification-signal-metrics .is-complete strong{
      color: var(--ink);
    }
    body.dark .route-notifications .notification-signal-event.unread .notification-signal-event-icon{
      background: var(--surface-container);
      color: var(--ink);
    }
    @media (max-width: 720px) {
      .route-notifications .notification-signal-center {
        gap: 22px;
      }
      .route-notifications .notification-signal-metrics {
        border-radius: 17px;
      }
      .route-notifications .notification-signal-metrics > div {
        min-height: 94px;
        padding: 15px 12px;
      }
      .route-notifications .notification-signal-metrics span {
        font-size: 9px;
      }
      .route-notifications .notification-signal-metrics strong {
        font-size: 30px;
      }
      .route-notifications .notification-signal-toolbar {
        align-items: center;
      }
      .route-notifications .notification-signal-toolbar strong {
        font-size: 19px;
      }
      .route-notifications .notification-signal-groups {
        border-radius: 18px;
      }
      .route-notifications .notification-signal-group > summary {
        min-height: 72px;
        padding: 12px;
        grid-template-columns: 40px minmax(0, 1fr) auto 20px;
        gap: 10px;
      }
      .route-notifications .notification-signal-group-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
      }
      .route-notifications .notification-signal-unread {
        display: none;
      }
      .route-notifications .notification-signal-group-count {
        min-width: 28px;
        height: 28px;
        padding: 0 7px;
      }
      .route-notifications .notification-signal-event {
        min-height: 94px;
        padding: 14px 12px;
        grid-template-columns: 40px minmax(0, 1fr) 22px;
        gap: 10px;
      }
      .route-notifications .notification-signal-event-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
      }
      .route-notifications .notification-signal-event-open > span:first-child {
        display: none;
      }
      .route-notifications .notification-signal-event-body {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
      }
    }

    /* Notifications prototype 5: Notification Workbench ---------------- */
    .route-notifications .notification-workbench {
      position: relative;
      width: min(100%, 1080px);
      max-width: 1080px;
      min-height: 580px;
      height: min(690px, calc(100dvh - 210px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(300px, 38%) minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--panel);
      box-shadow: 0 20px 48px rgba(15, 38, 31, .08);
    }
    .route-notifications .notification-sheet-backdrop {
      display: none;
    }
    .route-notifications .notification-workbench-list-pane {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      border-right: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface-container-lowest) 36%, var(--panel));
    }
    .route-notifications .notification-workbench-list-head {
      min-height: 82px;
      padding: 17px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
    }
    .route-notifications .notification-workbench-list-head > div {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .route-notifications .notification-workbench-list-head strong {
      color: var(--ink);
      font-size: 16px;
      line-height: 1.25;
    }
    .route-notifications .notification-workbench-list-head > div > span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }
    .route-notifications .notification-workbench-list-head .notification-mark-all {
      min-height: 38px;
      padding: 8px 10px;
      border-radius: 12px !important;
      font-size: 11px;
    }
    .route-notifications .notification-workbench-list-head .notification-mark-all .material-symbols-outlined {
      font-size: 18px;
    }
    .route-notifications .notification-workbench-list {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-color: var(--outline) transparent;
      scrollbar-width: thin;
    }
    .route-notifications .notification-workbench-list::-webkit-scrollbar,
    .route-notifications .notification-workbench-preview::-webkit-scrollbar {
      width: 8px;
    }
    .route-notifications .notification-workbench-list::-webkit-scrollbar-thumb,
    .route-notifications .notification-workbench-preview::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 999px;
      background: var(--outline);
      background-clip: padding-box;
    }
    .route-notifications .notification-workbench-row {
      width: 100%;
      min-height: 104px;
      padding: 16px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 18px;
      align-items: center;
      gap: 12px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0 !important;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: background-color .18s ease;
    }
    .route-notifications .notification-workbench-row:last-child {
      border-bottom: 0;
    }
    .route-notifications .notification-workbench-row:hover {
      background: color-mix(in srgb, var(--surface-container-low) 70%, transparent);
    }
    .route-notifications .notification-workbench-row.selected {
      background: var(--panel);
      box-shadow: inset 3px 0 0 var(--brand);
    }
    .route-notifications .notification-workbench-row:focus-visible {
      position: relative;
      z-index: 1;
      outline: 3px solid var(--focus-ring);
      outline-offset: -3px;
    }
    .route-notifications .notification-workbench-row-icon {
      position: relative;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: var(--surface-container-low);
      color: var(--muted);
    }
    .route-notifications .notification-workbench-row-icon .material-symbols-outlined {
      font-size: 21px;
    }
    .route-notifications .notification-workbench-row.unread .notification-workbench-row-icon {
      background: var(--brand);
      color: #fff;
    }
    .route-notifications .notification-workbench-row.delivery-failed .notification-workbench-row-icon {
      background: color-mix(in srgb, var(--red) 12%, var(--panel));
      color: var(--red);
    }
    .route-notifications .notification-workbench-row-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .route-notifications .notification-workbench-row-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 750;
    }
    .route-notifications .notification-workbench-row-meta > span {
      color: var(--brand);
    }
    .route-notifications .notification-workbench-row-meta time::before {
      content: "·";
      margin-right: 8px;
    }
    .route-notifications .notification-workbench-row-copy > strong,
    .route-notifications .notification-workbench-row-copy > span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .route-notifications .notification-workbench-row-copy > strong {
      color: var(--ink);
      font-size: 14px;
      line-height: 1.3;
    }
    .route-notifications .notification-workbench-row-copy > span:last-child {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }
    .route-notifications .notification-workbench-unread-dot {
      width: 9px;
      height: 9px;
      justify-self: center;
      border: 2px solid var(--panel);
      border-radius: 50%;
      background: #2d8cff;
      box-shadow: 0 0 0 1px color-mix(in srgb, #2d8cff 30%, transparent);
    }
    .route-notifications .notification-workbench-row-arrow {
      color: var(--muted);
      font-size: 19px;
    }
    .route-notifications .notification-workbench-list-empty {
      min-height: 320px;
      padding: 32px 22px;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 7px;
      color: var(--muted);
      text-align: center;
    }
    .route-notifications .notification-workbench-list-empty .material-symbols-outlined {
      margin-bottom: 8px;
      font-size: 32px;
    }
    .route-notifications .notification-workbench-list-empty strong {
      color: var(--ink);
      font-size: 16px;
    }
    .route-notifications .notification-workbench-list-empty span:last-child {
      max-width: 28ch;
      font-size: 13px;
      line-height: 1.45;
    }
    .route-notifications .notification-workbench-preview {
      min-width: 0;
      min-height: 0;
      padding: clamp(26px, 4vw, 46px);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background: var(--panel);
    }
    .route-notifications .notification-workbench-preview.is-empty {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .route-notifications .notification-workbench-preview.is-empty > .material-symbols-outlined {
      width: 62px;
      height: 62px;
      margin-bottom: 18px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: var(--surface-container-low);
      color: var(--muted);
      font-size: 30px;
    }
    .route-notifications .notification-workbench-preview.is-empty h2 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 21px;
    }
    .route-notifications .notification-workbench-preview.is-empty p {
      max-width: 40ch;
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
    }
    .route-notifications .notification-workbench-preview-head {
      display: flex;
      align-items: center;
      gap: 11px;
    }
    .route-notifications .notification-workbench-close {
      display: none;
    }
    .route-notifications .notification-workbench-preview-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--surface-container-low);
      color: var(--brand);
    }
    .route-notifications .notification-workbench-preview-icon .material-symbols-outlined {
      font-size: 23px;
    }
    .route-notifications .notification-workbench-preview-kind {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .045em;
      text-transform: uppercase;
    }
    .route-notifications .notification-workbench-preview-status {
      margin-left: auto;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--surface-container-low);
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }
    .route-notifications .notification-workbench-preview-status.is-action {
      background: color-mix(in srgb, var(--amber) 16%, var(--panel));
      color: color-mix(in srgb, var(--amber) 68%, var(--ink));
    }
    .route-notifications .notification-workbench-preview-status.is-error {
      background: color-mix(in srgb, var(--red) 12%, var(--panel));
      color: var(--red);
    }
    .route-notifications .notification-workbench-preview-copy {
      max-width: 66ch;
      margin: 40px 0 34px;
    }
    .route-notifications .notification-workbench-preview-copy h2 {
      max-width: 18ch;
      margin: 0 0 14px;
      color: var(--ink);
      font-size: clamp(28px, 4vw, 42px);
      letter-spacing: -.04em;
      line-height: 1.04;
      text-wrap: balance;
    }
    .route-notifications .notification-workbench-preview-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.6;
    }
    .route-notifications .notification-workbench-context {
      margin: 0;
      padding: 0;
      border-top: 1px solid var(--line);
    }
    .route-notifications .notification-workbench-context > div {
      min-height: 58px;
      display: grid;
      grid-template-columns: minmax(110px, .55fr) minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      border-bottom: 1px solid var(--line);
    }
    .route-notifications .notification-workbench-context dt {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }
    .route-notifications .notification-workbench-context dd {
      min-width: 0;
      margin: 0;
      color: var(--ink);
      font-size: 13px;
      font-weight: 750;
      text-align: right;
      overflow-wrap: anywhere;
    }
    .route-notifications .notification-workbench-warning {
      margin-top: 20px;
      padding: 13px 14px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border: 1px solid color-mix(in srgb, var(--red) 22%, var(--line));
      border-radius: 14px;
      background: color-mix(in srgb, var(--red) 7%, var(--panel));
      color: var(--red);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }
    .route-notifications .notification-workbench-warning .material-symbols-outlined {
      flex: none;
      font-size: 19px;
    }
    .route-notifications .notification-workbench-primary {
      width: 100%;
      min-height: 50px;
      margin-top: auto;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 0;
      border-radius: 15px !important;
      background: var(--brand);
      color: #fff;
      font-weight: 850;
      cursor: pointer;
    }
    .route-notifications .notification-workbench-primary .material-symbols-outlined {
      font-size: 21px;
      transition: transform .18s ease;
    }
    .route-notifications .notification-workbench-primary:hover .material-symbols-outlined {
      transform: translateX(3px);
    }
    .route-notifications .notification-workbench-primary:focus-visible,
    .route-notifications .notification-workbench-close:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
    }
    body.dark .route-notifications .notification-workbench{
      border-color: var(--line);
      background: var(--panel);
      box-shadow: none;
    }
    body.dark .route-notifications .notification-workbench-row.unread .notification-workbench-row-icon{
      background: var(--surface-container);
      color: var(--ink);
    }
    body.dark .route-notifications .notification-workbench-row.selected{
      background: var(--surface-container-low);
    }
    body.dark .route-notifications .notification-workbench-primary{
      background: var(--surface-container);
      color: var(--ink);
      border: 1px solid var(--line);
    }
    @media (max-width: 720px) {
      .route-notifications .notification-workbench {
        width: 100%;
        min-height: 0;
        height: auto;
        display: block;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .route-notifications .notification-workbench-list-pane {
        display: block;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--panel);
      }
      .route-notifications .notification-workbench-list-head {
        min-height: 72px;
        padding: 13px 14px;
      }
      .route-notifications .notification-workbench-list-head .notification-mark-all {
        width: 40px;
        min-height: 40px;
        padding: 0;
      }
      .route-notifications .notification-workbench-list-head .notification-mark-all > span:last-child {
        display: none;
      }
      .route-notifications .notification-workbench-list {
        overflow: visible;
      }
      .route-notifications .notification-workbench-row {
        min-height: 100px;
        padding: 14px;
      }
      .route-notifications .notification-workbench-row.selected {
        background: transparent;
        box-shadow: none;
      }
      .route-notifications .notification-sheet-backdrop {
        position: fixed;
        z-index: 139;
        inset: 0;
        display: block;
        border: 0;
        border-radius: 0 !important;
        background: rgba(5, 10, 14, .54);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
      }
      .route-notifications .notification-workbench-preview {
        position: fixed;
        z-index: 140;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: min(82dvh, 720px);
        padding: 22px max(20px, var(--mobile-safe-right)) calc(24px + var(--mobile-safe-bottom)) max(20px, var(--mobile-safe-left));
        overflow-y: auto;
        border: 1px solid var(--line);
        border-bottom: 0;
        border-radius: 26px 26px 0 0;
        background: var(--panel);
        box-shadow: 0 -22px 50px rgba(5, 10, 14, .24);
        visibility: hidden;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
      }
      .route-notifications .notification-workbench.is-detail-open .notification-sheet-backdrop {
        opacity: 1;
        pointer-events: auto;
      }
      .route-notifications .notification-workbench.is-detail-open .notification-workbench-preview {
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s;
      }
      .route-notifications .notification-workbench-preview.is-empty {
        display: none;
      }
      .route-notifications .notification-workbench-close {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 13px !important;
        background: var(--surface-container-low);
        color: var(--ink);
      }
      .route-notifications .notification-workbench-close .material-symbols-outlined {
        font-size: 21px;
      }
      .route-notifications .notification-workbench-preview-icon {
        display: none;
      }
      .route-notifications .notification-workbench-preview-copy {
        margin: 30px 0 26px;
      }
      .route-notifications .notification-workbench-preview-copy h2 {
        font-size: 28px;
      }
      .route-notifications .notification-workbench-preview-copy p {
        font-size: 15px;
      }
      .route-notifications .notification-workbench-context > div {
        min-height: 54px;
        grid-template-columns: minmax(92px, .5fr) minmax(0, 1fr);
      }
      .route-notifications .notification-workbench-primary {
        margin-top: 26px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .route-notifications .notification-workbench-preview,
      .route-notifications .notification-sheet-backdrop {
        transition: none;
      }
    }

    /* Notifications: shared social-style project feed ----------------- */
    .route-notifications .notification-social-feed {
      --notification-p1: #a94b4b;
      --notification-p2: #a86d24;
      --notification-p3: #287769;
      width: min(100%, 820px);
      max-width: 820px;
      margin: 0 auto;
    }
    .route-notifications .notification-feed-section > h2 {
      margin: 0;
      padding: 8px 0 10px;
      color: color-mix(in srgb, var(--muted) 78%, var(--ink));
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: .09em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .route-notifications .notification-feed-section + .notification-feed-section > h2 {
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }
    .route-notifications .notification-feed-list {
      display: block;
    }
    .route-notifications .notification-feed-item {
      position: relative;
      width: 100%;
      min-height: 82px;
      padding: 14px 16px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      align-items: start;
      gap: 12px;
      border: 0;
      border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
      border-radius: 0 !important;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      background: transparent;
      transition: background-color .16s ease;
    }
    .route-notifications .notification-feed-item:first-child {
      border-top: 0;
    }
    .route-notifications .notification-feed-item.priority-1 {
      background: color-mix(in srgb, var(--notification-p1) 6%, transparent);
      box-shadow: inset 3px 0 0 var(--notification-p1);
    }
    .route-notifications .notification-feed-item.priority-2 {
      background: color-mix(in srgb, var(--notification-p2) 6%, transparent);
      box-shadow: inset 3px 0 0 var(--notification-p2);
    }
    .route-notifications .notification-feed-item.priority-3 {
      background: color-mix(in srgb, var(--notification-p3) 4%, transparent);
      box-shadow: inset 3px 0 0 var(--notification-p3);
    }
    .route-notifications .notification-feed-item.is-unread {
      background: color-mix(in srgb, var(--brand-2) 8%, transparent);
      box-shadow: inset 3px 0 0 var(--brand-2);
    }
    .route-notifications .notification-feed-item.is-unread.priority-1 {
      background: color-mix(in srgb, var(--notification-p1) 12%, transparent);
      box-shadow: inset 3px 0 0 var(--notification-p1);
    }
    .route-notifications .notification-feed-item.is-unread.priority-2 {
      background: color-mix(in srgb, var(--notification-p2) 12%, transparent);
      box-shadow: inset 3px 0 0 var(--notification-p2);
    }
    .route-notifications .notification-feed-item.is-unread .notification-feed-copy > strong {
      font-weight: 800;
      color: var(--ink);
    }
    .route-notifications .notification-feed-item.is-read {
      background: transparent;
      box-shadow: none;
      opacity: .78;
    }
    .route-notifications .notification-feed-item.is-read .notification-feed-copy > strong {
      font-weight: 600;
      color: color-mix(in srgb, var(--ink) 80%, var(--muted));
    }
    .route-notifications .notification-feed-item.is-read .notification-feed-description {
      color: var(--muted);
    }
    body.dark .route-notifications .notification-feed-item.is-unread {
      background: color-mix(in srgb, var(--brand-2) 14%, transparent);
    }
    .route-notifications .notification-feed-item:hover {
      background: color-mix(in srgb, var(--surface-container-low) 52%, transparent);
    }
    .route-notifications .notification-feed-item:focus-visible {
      position: relative;
      z-index: 1;
      outline: 3px solid var(--focus-ring);
      outline-offset: -3px;
    }
    .route-notifications .notification-project-avatar-wrap {
      position: relative;
      width: 48px;
      height: 48px;
      display: block;
    }
    .route-notifications .notification-project-avatar {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 12px;
      background-position: center;
      background-size: cover;
    }
    .route-notifications .notification-project-avatar svg {
      width: 23px;
      height: 23px;
    }
    .route-notifications .priority-1 .notification-project-avatar {
      background: color-mix(in srgb, var(--notification-p1) 18%, var(--panel));
      color: color-mix(in srgb, var(--notification-p1) 78%, var(--ink));
    }
    .route-notifications .priority-2 .notification-project-avatar {
      background: color-mix(in srgb, var(--notification-p2) 18%, var(--panel));
      color: color-mix(in srgb, var(--notification-p2) 78%, var(--ink));
    }
    .route-notifications .priority-3 .notification-project-avatar {
      background: color-mix(in srgb, var(--notification-p3) 15%, var(--panel));
      color: color-mix(in srgb, var(--notification-p3) 82%, var(--ink));
    }
    .route-notifications .notification-priority-reveal {
      position: absolute;
      inset: 0 2px 2px 0;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      font-size: 17px;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      transform-origin: center;
      opacity: 0;
      animation: none;
    }
    .route-notifications .notification-feed-item.is-unread .notification-priority-reveal {
      animation: notification-priority-reveal 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
    }
    .route-notifications .notification-feed-item.is-read .notification-priority-reveal {
      display: none;
    }
    .route-notifications .notification-priority-reveal b {
      font-weight: 900;
    }
    .route-notifications .priority-1 .notification-priority-reveal,
    .route-notifications .priority-1 .notification-unread-dot {
      background: var(--notification-p1);
    }
    .route-notifications .priority-2 .notification-priority-reveal,
    .route-notifications .priority-2 .notification-unread-dot {
      background: var(--notification-p2);
    }
    .route-notifications .priority-3 .notification-unread-dot {
      background: var(--notification-p3);
    }
    @keyframes notification-priority-reveal {
      0%, 28% { opacity: 1; transform: scale(1); }
      14% { opacity: 1; transform: scale(1.08); }
      44%, 78% { opacity: 0; transform: scale(.94); }
      92%, 100% { opacity: 1; transform: scale(1); }
    }
    .route-notifications .notification-feed-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .route-notifications .notification-feed-copy > strong {
      overflow-wrap: anywhere;
      color: var(--ink);
      font-size: 13.8px;
      font-weight: 850;
      line-height: 1.35;
    }
    .route-notifications .notification-feed-description {
      overflow-wrap: anywhere;
      color: color-mix(in srgb, var(--muted) 88%, var(--ink));
      font-size: 12.7px;
      line-height: 1.45;
    }
    .route-notifications .notification-feed-metadata {
      margin-top: 4px;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .route-notifications .notification-feed-time {
      padding-top: 2px;
      color: var(--muted);
      font-size: 11px;
      font-variant-numeric: tabular-nums;
      line-height: 1.2;
      white-space: nowrap;
    }
    .route-notifications .notification-unread-dot {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 10px;
      height: 10px;
      background: #dc2626;
      border: 2px solid var(--panel);
      border-radius: 50%;
      box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 22%, transparent);
    }
    .route-notifications .notification-feed-item.is-unread .notification-feed-time {
      padding-right: 18px;
      font-weight: 700;
      color: var(--brand-2);
    }
    .notifications-feed-toolbar {
      padding: 10px 12px 4px;
      display: flex;
      justify-content: flex-end;
    }
    .notifications-mark-all {
      min-height: 32px;
      padding: 6px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface-container-lowest);
      color: var(--brand-2);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease;
    }
    .notifications-mark-all:hover {
      background: color-mix(in srgb, var(--brand-2) 10%, var(--surface-container-lowest));
      border-color: var(--brand-2);
    }
    body.dark .notifications-mark-all { background: var(--panel); }
    .route-notifications .notification-feed-more {
      min-height: 42px;
      margin: 14px auto 18px;
      padding: 9px 16px;
      display: block;
      border: 1px solid var(--line);
      border-radius: 9px !important;
      background: var(--panel);
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 800;
    }
    .route-notifications .notification-feed-more:hover {
      background: var(--surface-container-lowest);
      color: var(--ink);
    }
    .route-notifications .notification-feed-empty {
      min-height: 240px;
      padding: 36px 22px;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 7px;
      color: var(--muted);
      text-align: center;
    }
    .route-notifications .notification-feed-empty strong {
      color: var(--ink);
      font-size: 16px;
    }
    .route-notifications .notification-feed-empty span:last-child {
      max-width: 34ch;
      font-size: 13px;
      line-height: 1.45;
    }
    body.dark .route-notifications .notification-social-feed {
      --notification-p1: #e58080;
      --notification-p2: #d7a561;
      --notification-p3: #8fa9a4;
    }
    body.dark .route-notifications .notification-feed-item:hover{
      background: var(--surface-container-low);
    }
    @media (max-width: 560px) {
      .route-notifications .notification-feed-item {
        min-height: 88px;
        padding: 13px 14px;
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 12px;
      }
      .route-notifications .notification-project-avatar-wrap {
        width: 46px;
        height: 46px;
      }
      .route-notifications .notification-feed-time {
        grid-column: 3;
        justify-self: end;
        align-self: center;
        padding-top: 0;
      }
      .route-notifications .notification-unread-dot {
        top: 14px;
        right: 12px;
      }
      .route-notifications .notification-feed-copy {
        padding-right: 8px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .route-notifications .notification-feed-item.is-unread .notification-priority-reveal {
        inset: auto -2px -2px auto;
        width: 18px;
        height: 18px;
        border: 2px solid var(--bg);
        border-radius: 6px;
        font-size: 9px;
        opacity: 1;
        animation: none;
      }
    }
/* Project Manager portfolio and stacked project sheets */
html.project-sheet-open{overflow:hidden!important;overscroll-behavior:none!important}
body.project-sheet-open{position:fixed!important;left:0;right:0;width:100%;overflow:hidden!important;overscroll-behavior:none!important}
body.project-sheet-open .content{overflow:hidden!important;overscroll-behavior:none}
body.project-sheet-open .app:not(.map-mode),body.project-sheet-open .main{overflow:hidden!important;overscroll-behavior:none!important}
body.project-sheet-open .pm-project-sheet-stack{touch-action:none}body.project-sheet-open .pm-project-sheet,body.project-sheet-open .pm-sheet-scroll,body.project-sheet-open .pm-sheet-form{touch-action:pan-y;overscroll-behavior:contain}
.pm-project-management{display:grid;gap:34px;max-width:1180px;margin:0 auto;padding:8px 0 40px;overflow:hidden}
.pc-shell{display:grid;gap:22px}.pc-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:8px 2px 20px;border-bottom:1px solid var(--line)}.pc-head h1{margin:0;font-size:clamp(36px,6vw,68px);line-height:.94;letter-spacing:-.055em}.pc-head p{max-width:52ch;margin:10px 0 0;color:var(--muted);font-size:14px}.pc-head>.btn{min-height:46px;padding-inline:18px}.pc-head>.btn svg{width:18px;height:18px}
.pc-project-control{display:block}
.pr-shell{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface-container-lowest)}.pr-head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:clamp(22px,4vw,40px);background:var(--brand);color:#fff}.pr-head>div>span{color:#9be8ba;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.pr-head h1{margin:8px 0 7px;color:#fff;font-size:clamp(38px,7vw,72px);line-height:.9;letter-spacing:-.055em}.pr-head p{max-width:52ch;margin:0;color:rgba(255,255,255,.72);font-size:14px}.pr-head>.btn{background:#fff;color:#16304e}.pr-head>.btn svg{width:18px;height:18px}.pr-columns,.pr-summary{display:grid;grid-template-columns:46px minmax(0,1fr) 82px 90px 22px;align-items:center;gap:14px}.pr-columns{padding:11px 22px;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.pr-project{border-bottom:1px solid var(--line)}.pr-project:last-child{border-bottom:0}.pr-summary{width:100%;min-height:76px;padding:13px 22px;background:transparent;color:var(--ink);text-align:left}.pr-summary:hover{background:var(--surface-container-low)}.pr-project.is-open>.pr-summary{background:var(--surface-container-low)}.pr-number{color:var(--muted);font:700 11px var(--font-mono)}.pr-identity{display:grid;gap:4px;min-width:0}.pr-identity b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}.pr-identity code{color:var(--muted);font-size:9px;letter-spacing:.07em}.pr-count{font:700 12px var(--font-mono)}.pr-state{justify-self:start;padding:5px 8px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase}.pr-state.is-current{border-color:color-mix(in srgb,var(--green) 42%,var(--line));color:var(--green)}.pr-state.is-archived{color:var(--red)}.pr-summary>svg{transition:transform .22s cubic-bezier(.16,1,.3,1)}.pr-project.is-open .pr-summary>svg{transform:rotate(180deg)}.pr-detail{padding:0 22px 26px;background:var(--surface-container-low);animation:prOpen .28s cubic-bezier(.16,1,.3,1) both}.pr-detail-grid{display:grid;grid-template-columns:1.2fr 1fr .6fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pr-detail-grid>div{display:grid;gap:7px;padding:20px 18px 20px 0}.pr-detail-grid>div+div{padding-left:18px;border-left:1px solid var(--line)}.pr-detail-grid span{color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.pr-detail-grid strong{display:flex;align-items:center;gap:8px;font-size:14px}.pr-detail-grid code{font-size:11px}.pr-detail-grid .btn-icon{width:32px;height:32px}.pr-scope{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}.pr-scope h3,.pr-team h3{margin:0 0 9px;font-size:15px}.pr-scope>div:first-child>div{display:flex;flex-wrap:wrap;gap:7px}.pr-scope>div:first-child span{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-container-lowest);font-size:11px;font-weight:700}.pr-row-actions{display:flex;flex-wrap:wrap;gap:8px}.pr-team{padding-top:22px}.pr-member{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.pr-member>span:nth-child(2){display:grid;gap:3px}.pr-member small{color:var(--muted);font-size:11px}.pr-member>i{font-style:normal;color:var(--green);font-size:10px;font-weight:800}.pr-member.is-manager{padding:11px;border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));border-radius:11px;background:var(--surface-container-lowest);margin-bottom:5px}.pr-empty{margin:14px 0 0;color:var(--muted);font-size:12px}@keyframes prOpen{from{opacity:.65;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pc-workspace{display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr);gap:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface-container-lowest);min-height:560px}.pc-rail{min-width:0;padding:18px 12px;background:var(--surface-container-low);border-right:1px solid var(--line)}.pc-rail-title{display:flex;align-items:center;justify-content:space-between;padding:0 8px 14px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.pc-rail-title b{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:8px;background:var(--surface-container-lowest);color:var(--ink);font-size:12px}.pc-project-list{display:grid;gap:5px}.pc-project-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:62px;padding:9px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink);text-align:left}.pc-project-row:hover{background:color-mix(in srgb,var(--surface-container-lowest) 65%,transparent)}.pc-project-row.is-selected{border-color:var(--line);background:var(--surface-container-lowest)}.pc-project-row-index{color:var(--muted);font:700 10px var(--font-mono)}.pc-project-row>span:nth-child(2){display:grid;gap:3px;min-width:0}.pc-project-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.pc-project-row small{overflow:hidden;text-overflow:ellipsis;color:var(--muted);font:600 9px var(--font-mono);letter-spacing:.05em}.pc-project-row i{font-style:normal;color:var(--muted);font-size:9px;font-weight:800}.pc-project-row i.is-current{color:var(--green)}.pc-project-row i.is-archived{color:var(--red)}
.pc-dossier{display:grid;align-content:start;min-width:0;padding:clamp(22px,4vw,42px)}.pc-dossier-head{display:flex;align-items:start;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}.pc-dossier-head h2{margin:9px 0 0;font-size:clamp(30px,5vw,54px);line-height:1;letter-spacing:-.05em;overflow-wrap:anywhere}.pc-status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.pc-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.pc-status.is-current{color:var(--green)}.pc-status.is-archived{color:var(--red)}.pc-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.pc-actions .btn{min-height:42px}
.pc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}.pc-facts>div{display:grid;gap:6px;min-width:0;padding:20px 16px 20px 0}.pc-facts>div+div{padding-left:16px;border-left:1px solid var(--line)}.pc-facts span{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.pc-facts strong{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px}.pc-facts code{overflow:hidden;text-overflow:ellipsis;font-size:11px;letter-spacing:.06em}.pc-facts .btn-icon{width:32px;height:32px;flex:none}
.pc-systems,.pc-team{padding-top:26px}.pc-systems{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr);gap:24px;padding-bottom:26px;border-bottom:1px solid var(--line)}.pc-systems h3,.pc-team h3{margin:0;font-size:17px}.pc-systems p,.pc-team p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.pc-system-list{display:flex;flex-wrap:wrap;align-content:start;justify-content:flex-end;gap:7px}.pc-system-list span{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-container-low);font-size:12px;font-weight:700}.pc-team-head{display:flex;align-items:start;justify-content:space-between;gap:18px;margin-bottom:14px}.pc-team-head>span{color:var(--muted);font:700 11px var(--font-mono)}.pc-person{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.pc-person>span:nth-child(2){display:grid;gap:3px}.pc-person small{color:var(--muted);font-size:11px}.pc-person>i{font-style:normal;color:var(--green);font-size:10px;font-weight:800}.pc-person.is-manager{padding:12px;border:1px solid color-mix(in srgb,var(--green) 30%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--green) 7%,transparent);margin-bottom:6px}.pc-empty-team{padding:18px 0;color:var(--muted);font-size:13px}
.pc-lifecycle{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface-container-lowest)}.pc-lifecycle>header{display:flex;align-items:start;justify-content:space-between;gap:18px;padding:20px 22px;background:var(--surface-container-low)}.pc-lifecycle h2{margin:0;font-size:19px;letter-spacing:-.02em}.pc-lifecycle header p{max-width:58ch;margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.pc-lifecycle header>span{flex:none;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface-container-lowest);color:var(--muted);font-size:10px;font-weight:800}.pc-lifecycle .pm-project-settings-list{padding:0 20px;border-top:1px solid var(--line)}.pc-lifecycle .pm-project-setting:last-child{border-bottom:0}.pc-lifecycle .pm-project-setting-summary{padding-block:15px}.pc-lifecycle .pm-project-setting-summary b{font-size:15px}.pc-lifecycle .pm-project-setting-panel-inner{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pc-lifecycle .pm-project-danger{margin-top:0;border-top:0;border-left:1px solid color-mix(in srgb,var(--red) 35%,var(--line));padding:4px 0 22px 18px}
.pm-project-create-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pm-project-create-bar>div{display:grid;gap:4px}.pm-project-create-bar strong{font-size:17px}.pm-project-create-bar span{color:var(--muted);font-size:13px}.pm-project-create-bar .btn span{color:inherit;font-size:inherit}.pm-project-create-bar .btn svg{width:18px;height:18px}
.pm-project-portfolio{display:block}
.pm-sheet-project-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pm-sheet-project-actions>.btn:only-child{grid-column:1/-1}
.pm-project-browser,.pm-project-settings{min-width:0}
.pm-project-heading,.pm-project-settings-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}
.pm-project-heading h1,.pm-project-settings-head h2{margin:4px 0 0;font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-.045em}
.pm-project-heading p,.pm-project-settings-head p{margin:8px 0 0;color:var(--muted);max-width:540px}
.pm-project-arrows{display:flex;gap:8px}
.pm-project-carousel{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px max(1px,calc((100% - 410px)/2)) 10px;cursor:grab;touch-action:pan-x pan-y}
.pm-project-carousel::-webkit-scrollbar{display:none}.pm-project-carousel.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.pm-project-card{position:relative;display:flex;flex:0 0 min(410px,88vw);min-height:258px;scroll-snap-align:center;flex-direction:column;text-align:left;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:0;box-shadow:none;overflow:hidden}
.pm-project-card-open{display:flex;width:100%;height:100%;min-height:258px;flex-direction:column;padding:24px;color:inherit;background:transparent;border:0;text-align:left}
.pm-project-card::after{content:"";position:absolute;inset:auto -60px -105px auto;width:210px;height:210px;border:34px solid color-mix(in srgb,var(--text) 6%,transparent);border-radius:50%;pointer-events:none}
.pm-project-card.is-active{background:#112b26;color:#f5fbf9;border-color:#315e53}.pm-project-card.is-active::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:#72d5aa}
.pm-project-card-top,.pm-project-card-meta{display:flex;justify-content:space-between;gap:14px}.pm-project-status{font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.pm-project-index{font:700 12px ui-monospace,monospace;opacity:.55}
.pm-project-name{display:block;margin-top:30px;max-width:calc(100% - 70px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:32px;font-weight:850;line-height:1;letter-spacing:-.04em}.pm-project-card-open>code{margin-top:10px;font-size:13px;letter-spacing:.1em;color:inherit;opacity:.68}.pm-project-card-rule{height:1px;background:currentColor;opacity:.14;margin:24px 0 16px}
.pm-project-card-meta{margin-top:auto}.pm-project-card-meta span{display:grid;gap:4px;min-width:0}.pm-project-card-meta small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.62}.pm-project-card-meta b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-project-settings{border-top:1px solid var(--line);padding-top:28px}.pm-project-settings-head{align-items:start}.pm-project-settings-list{display:grid;border-top:1px solid var(--line)}.pm-project-setting{border-bottom:1px solid var(--line)}
.pm-project-setting-summary{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 2px;color:var(--text);background:transparent;border:0;text-align:left}.pm-project-setting-summary>span:first-child{display:grid;gap:4px}.pm-project-setting-summary b{font-size:17px}.pm-project-setting-summary code{font-size:11px;color:var(--muted);letter-spacing:.08em}.pm-project-setting-facts{display:flex;align-items:center;gap:14px}.pm-project-setting-facts small{color:var(--muted)}.pm-project-setting-facts i{font-style:normal;font-size:11px;font-weight:800;padding:5px 9px;border-radius:99px;background:var(--surface-raised,var(--surface));border:1px solid var(--line)}.pm-project-setting-facts i.active{color:var(--green)}.pm-project-setting-facts i.archived{color:var(--muted)}.pm-project-setting-facts em{font-style:normal;font-size:20px;transition:transform .2s ease}.pm-project-setting.is-open .pm-project-setting-facts em{transform:rotate(180deg)}
.pm-project-setting-panel{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1)}.pm-project-setting-panel-inner{min-height:0;overflow:hidden;opacity:0;transform:translateY(-9px);transition:opacity .18s ease-out,transform .34s cubic-bezier(.16,1,.3,1)}.pm-project-setting.is-open .pm-project-setting-panel{grid-template-rows:1fr}.pm-project-setting.is-open .pm-project-setting-panel-inner{opacity:1;transform:none;transition-delay:.04s}.pm-project-setting-copy,.pm-project-danger{padding:4px 2px 22px}.pm-project-setting-copy h3,.pm-project-danger h3{margin:0 0 6px}.pm-project-setting-copy p,.pm-project-danger p{color:var(--muted);margin:0 0 14px}.pm-project-danger{margin-top:2px;border-top:1px solid color-mix(in srgb,var(--red) 35%,var(--line));padding-top:20px}.pm-project-danger .eyebrow{color:var(--red)}
.pm-project-empty{padding:36px;border:1px dashed var(--line);border-radius:20px}.pm-project-empty h1{margin:8px 0}.pm-project-empty p{color:var(--muted);margin:0 0 18px}
.pm-project-sheet-stack{position:fixed;inset:0;z-index:220;pointer-events:none}.pm-sheet-backdrop{position:absolute;inset:0;background:rgba(2,7,10,.58);backdrop-filter:blur(3px);pointer-events:auto;animation:pmFade .18s ease both}.pm-project-sheet{position:absolute;top:0;right:0;width:min(460px,100%);height:100%;display:flex;flex-direction:column;color:var(--text,var(--ink));background:var(--surface-container-lowest,var(--surface));border-left:1px solid var(--line);box-shadow:-24px 0 70px rgba(0,0,0,.22);pointer-events:auto;animation:pmSheetIn .28s cubic-bezier(.22,.8,.25,1) both}.pm-project-edit-sheet,.pm-project-confirm-sheet{right:22px;top:18px;height:calc(100% - 36px);border:1px solid var(--line);border-radius:20px;box-shadow:-30px 0 90px rgba(0,0,0,.38)}.pm-project-confirm-sheet{right:44px;top:36px;height:calc(100% - 72px);z-index:2}.pm-sheet-handle{display:none}.pm-sheet-head{display:flex;justify-content:space-between;align-items:start;gap:14px;padding:24px;border-bottom:1px solid var(--line)}.pm-sheet-head h2{margin:5px 0 0;font-size:29px;letter-spacing:-.04em}.pm-sheet-scroll{overflow-y:auto;padding:24px;overscroll-behavior:contain}.pm-project-identity-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--line)}.pm-project-identity-grid span{display:grid;gap:5px}.pm-project-identity-grid small,.pm-member-row small{color:var(--muted)}.pm-project-identity-grid code{font-size:13px;letter-spacing:.08em}.pm-members-section{padding-top:24px}.pm-members-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:15px}.pm-members-title h3{margin:4px 0 0}.pm-members-title>small{color:var(--muted)}.pm-member-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.pm-member-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--surface-raised,var(--surface));border:1px solid var(--line);font-weight:850}.pm-member-row>span:nth-child(2){display:grid;gap:3px}.pm-member-row.is-manager{padding:14px;border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--green) 6%,transparent);margin-bottom:8px}.pm-member-row.is-manager i{font-style:normal;font-size:11px;font-weight:800;color:var(--green)}.pm-member-remove{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--red);font-size:22px}.pm-members-empty{padding:18px 0;color:var(--muted)}.pm-sheet-footer{margin-top:auto;padding:18px 24px max(18px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}.pm-sheet-footer .btn{width:100%}.pm-sheet-form{display:grid;gap:20px;padding:24px}.pm-sheet-form label{display:grid;gap:8px}.pm-sheet-form label>span{font-weight:750}.pm-sheet-form>p{color:var(--muted);line-height:1.55}.pm-sheet-form-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@keyframes pmFade{from{opacity:0}to{opacity:1}}@keyframes pmSheetIn{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}
@media(max-width:819px){.pm-project-management{gap:28px;padding-top:2px}.pm-project-heading,.pm-project-settings-head{align-items:start}.pm-project-heading h1,.pm-project-settings-head h2{font-size:34px}.pm-project-arrows{display:none}.pm-project-carousel{margin-inline:calc(var(--page-pad,16px)*-1);padding-inline:var(--page-pad,16px);scroll-padding-inline:var(--page-pad,16px)}.pm-project-card{flex-basis:calc(100vw - (var(--page-pad,16px)*2));min-height:245px;scroll-snap-align:start}.pm-project-setting-facts small{display:none}.pm-project-sheet{top:auto;bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 8px));left:10px;right:10px;width:auto;height:min(80dvh,720px);border:1px solid var(--line);border-radius:24px;box-shadow:0 -24px 70px rgba(0,0,0,.35);animation:pmSheetUp .3s cubic-bezier(.22,.8,.25,1) both}.pm-project-sheet .pm-sheet-footer{padding-bottom:18px}.pm-project-edit-sheet{left:10px;right:10px;top:auto;bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 8px));height:min(70dvh,620px)}.pm-project-confirm-sheet{left:14px;right:14px;top:auto;bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));height:auto;min-height:380px;max-height:64dvh}.pm-sheet-handle{display:block;width:38px;height:4px;border-radius:99px;background:var(--line);margin:9px auto 0}.pm-sheet-head{padding:16px 20px}.pm-sheet-scroll,.pm-sheet-form{padding:20px}.pm-project-identity-grid{grid-template-columns:1fr 1fr}.pm-members-title{align-items:start;flex-direction:column;gap:4px}@keyframes pmSheetUp{from{transform:translateY(36px);opacity:.6}to{transform:none;opacity:1}}}
@media(max-width:390px){.pm-project-card{padding:20px}.pm-project-card-meta{gap:9px}.pm-project-card-meta small{font-size:9px}.pm-project-card-meta b{font-size:12px}.pm-project-setting-summary{gap:8px}.pm-project-setting-facts{gap:7px}.pm-project-setting-facts i{padding:4px 7px}.pm-sheet-form-actions{grid-template-columns:1fr}}
@media(max-width:560px){.pm-project-create-bar{align-items:stretch;flex-direction:column}.pm-project-create-bar .btn{width:100%}.pm-sheet-project-actions{grid-template-columns:1fr}}
@media(max-width:819px){.pc-head{align-items:stretch;flex-direction:column}.pc-head>.btn{width:100%}.pc-workspace{display:block;min-height:0;border-inline:0;border-radius:0;margin-inline:calc(var(--page-pad,16px)*-1)}.pc-rail{padding:12px var(--page-pad,16px);border-right:0;border-bottom:1px solid var(--line)}.pc-rail-title{padding-inline:0}.pc-project-list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:3px}.pc-project-list::-webkit-scrollbar{display:none}.pc-project-row{flex:0 0 min(270px,78vw);scroll-snap-align:start;border-color:var(--line);background:var(--surface-container-lowest)}.pc-dossier{padding:26px var(--page-pad,16px) 34px}.pc-dossier-head{flex-direction:column}.pc-actions{width:100%;justify-content:stretch}.pc-actions .btn{flex:1}.pc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-facts>div:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line)}.pc-facts>div:nth-child(4){border-top:1px solid var(--line)}.pc-systems{grid-template-columns:1fr}.pc-system-list{justify-content:flex-start}}
@media(max-width:390px){.pc-head h1{font-size:40px}.pc-dossier-head h2{font-size:34px}.pc-facts strong{font-size:13px}.pc-project-row{flex-basis:84vw}}
@media(max-width:620px){.pc-lifecycle>header{align-items:flex-start;flex-direction:column}.pc-lifecycle .pm-project-setting-panel-inner{grid-template-columns:1fr}.pc-lifecycle .pm-project-danger{border-top:1px solid color-mix(in srgb,var(--red) 35%,var(--line));border-left:0;padding:18px 0 22px}}
@media(max-width:620px){.pr-shell{margin-inline:calc(var(--page-pad,16px)*-1);border-inline:0;border-radius:0}.pr-head{align-items:stretch;flex-direction:column;padding:26px var(--page-pad,16px)}.pr-head>.btn{width:100%}.pr-columns{display:none}.pr-summary{grid-template-columns:32px minmax(0,1fr) auto 18px;gap:9px;padding:12px var(--page-pad,16px)}.pr-count{display:none}.pr-state{font-size:8px}.pr-detail{padding:0 var(--page-pad,16px) 24px}.pr-detail-grid{grid-template-columns:1fr 1fr}.pr-detail-grid>div{padding:16px 12px 16px 0}.pr-detail-grid>div:nth-child(2){padding-left:12px}.pr-detail-grid>div:nth-child(3){grid-column:1/-1;padding-left:0;border-top:1px solid var(--line);border-left:0}.pr-scope{align-items:stretch;flex-direction:column}.pr-row-actions{display:grid;grid-template-columns:1fr}.pr-member{grid-template-columns:40px minmax(0,1fr) auto}}
body.dark .pr-shell{background:var(--panel)}body.dark .pr-detail,body.dark .pr-project.is-open>.pr-summary{background:var(--surface-container-lowest)}body.dark .pr-member.is-manager{background:var(--panel)}
.pw-shell{max-width:1040px;margin:0 auto}.pw-top{position:relative;z-index:12;display:flex;align-items:stretch;justify-content:space-between;gap:12px;margin-bottom:14px}.pw-switcher{position:relative;min-width:0}.pw-switcher>summary{display:flex;min-width:min(390px,60vw);min-height:52px;align-items:center;justify-content:space-between;gap:18px;padding:8px 13px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--surface-container-lowest);cursor:pointer;list-style:none}.pw-switcher>summary::-webkit-details-marker,.pw-more>summary::-webkit-details-marker{display:none}.pw-switcher>summary>span{display:grid;min-width:0;gap:2px}.pw-switcher>summary small{color:var(--muted);font-size:10px;font-weight:750}.pw-switcher>summary b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.pw-switcher[open]>summary svg{transform:rotate(180deg)}.pw-project-menu{position:absolute;top:calc(100% + 7px);left:0;width:min(390px,calc(100vw - 32px));overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface-container-lowest);box-shadow:0 18px 48px rgba(12,31,47,.16)}.pw-project-choice{display:flex;width:100%;min-height:54px;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;text-align:left}.pw-project-choice:last-child{border-bottom:0}.pw-project-choice:hover,.pw-project-choice.is-selected{background:var(--surface-container-low)}.pw-project-choice>span{display:grid;min-width:0;gap:3px}.pw-project-choice b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.pw-project-choice small{color:var(--muted);font:600 9px var(--font-mono)}.pw-project-choice i{font-style:normal;color:var(--muted);font-size:10px;font-weight:750}.pw-create{min-height:52px;flex:none;border-radius:12px}.pw-create svg{width:18px;height:18px}.pw-dossier{border:1px solid var(--line);border-radius:16px;background:var(--surface-container-lowest);box-shadow:0 10px 30px rgba(19,40,32,.06)}.pw-identity{position:relative;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 26px;border-bottom:1px solid var(--line)}.pw-status-line{display:flex;align-items:center;gap:8px;margin-bottom:11px}.pw-status,.pw-sync{display:inline-flex;align-items:center;gap:6px;min-height:25px;padding:4px 8px;border-radius:999px;background:var(--surface-container-low);color:var(--muted);font-size:10px;font-weight:800}.pw-status.is-active{color:var(--green);background:color-mix(in srgb,var(--green) 11%,transparent)}.pw-status.is-archived{color:var(--red);background:color-mix(in srgb,var(--red) 9%,transparent)}.pw-sync i{width:6px;height:6px;border-radius:50%;background:var(--green)}.pw-sync.has-warning{color:color-mix(in srgb,var(--amber) 75%,var(--ink))}.pw-sync.has-warning i{background:var(--amber)}.pw-identity h1{max-width:700px;margin:0;color:var(--ink);font-size:clamp(28px,5vw,42px);line-height:1.05;letter-spacing:-.035em;overflow-wrap:anywhere}.pw-identity p{margin:7px 0 0;color:var(--muted);font-size:13px}.pw-more{position:relative;flex:none}.pw-more>summary{display:flex;min-width:94px;min-height:42px;align-items:center;justify-content:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--surface-container-low);cursor:pointer;list-style:none;font-size:12px;font-weight:750}.pw-more>summary>span:first-child{letter-spacing:2px}.pw-more-menu{position:absolute;top:calc(100% + 7px);right:0;width:220px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface-container-lowest);box-shadow:0 18px 48px rgba(12,31,47,.16)}.pw-more-menu button{display:flex;width:100%;min-height:44px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;font-size:12px;font-weight:700;text-align:left}.pw-more-menu button:last-child{border-bottom:0}.pw-more-menu button:hover{background:var(--surface-container-low)}.pw-more-menu button.is-danger{color:var(--red)}.pw-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr)}.pw-main{min-width:0;padding:22px 26px 28px}.pw-team{min-width:0;padding:22px 22px 28px;border-left:1px solid var(--line);background:var(--surface-container-low)}.pw-code{display:flex;width:100%;min-height:72px;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:12px;color:#fff;background:var(--brand);text-align:left}.pw-code>span{display:grid;gap:4px}.pw-code small{color:rgba(255,255,255,.68);font-size:10px;font-weight:750}.pw-code code{color:#fff;font-size:14px;letter-spacing:.08em}.pw-code>span:last-child{display:flex;align-items:center;gap:7px;font-size:11px}.pw-code svg{width:17px;height:17px}.pw-section{padding-top:26px}.pw-section+.pw-section{margin-top:26px;border-top:1px solid var(--line)}.pw-section>header,.pw-team>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.pw-section h2,.pw-team h2{margin:0;color:var(--ink);font-size:17px;letter-spacing:-.015em}.pw-section header p,.pw-team header p{margin:4px 0 0;color:var(--muted);font-size:12px}.pw-facts{display:grid;grid-template-columns:1.3fr .7fr .7fr;margin:0;border-top:1px solid var(--line)}.pw-facts>div{min-width:0;padding:14px 10px 5px 0}.pw-facts>div+div{padding-left:14px;border-left:1px solid var(--line)}.pw-facts dt{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.pw-facts dd{overflow:hidden;margin:6px 0 0;color:var(--ink);font-size:14px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.pw-systems,.pw-team ul{margin:0;padding:0;list-style:none}.pw-systems{display:grid;gap:1px;border-block:1px solid var(--line)}.pw-systems li{display:flex;min-height:44px;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}.pw-systems li:last-child{border-bottom:0}.pw-systems svg{width:17px;height:17px;color:var(--green)}.pw-systems .is-empty{color:var(--muted);font-weight:500}.pw-team>header>span{color:var(--muted);font:700 10px var(--font-mono)}.pw-person{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:60px;padding:9px 0;border-bottom:1px solid var(--line)}.pw-person>span:nth-child(2){display:grid;min-width:0;gap:3px}.pw-person b{overflow:hidden;color:var(--ink);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.pw-person small{color:var(--muted);font-size:10px}.pw-person>i{font-style:normal;color:var(--green);font-size:9px;font-weight:800}.pw-person-more{display:grid;width:38px;height:38px;place-items:center;border:0;border-radius:10px;color:var(--red);background:transparent;font-size:21px}.pw-person-more:hover{background:color-mix(in srgb,var(--red) 8%,transparent)}.pw-team-empty{padding:18px 0;color:var(--muted)}.pw-team-empty b{color:var(--ink);font-size:13px}.pw-team-empty p{margin:5px 0 0;font-size:11px;line-height:1.45}.pw-empty{display:grid;max-width:560px;justify-items:start;margin:8vh auto;padding:30px;border:1px dashed var(--line);border-radius:16px;background:var(--surface-container-lowest)}.pw-empty-icon{display:grid;width:48px;height:48px;place-items:center;margin-bottom:18px;border-radius:12px;color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}.pw-empty-icon svg{width:22px;height:22px}.pw-empty h1{margin:0;font-size:28px}.pw-empty p{max-width:48ch;margin:8px 0 20px;color:var(--muted);line-height:1.5}
@media(max-width:760px){.pw-layout{grid-template-columns:1fr}.pw-team{border-top:1px solid var(--line);border-left:0}.pw-identity{padding:20px}.pw-main,.pw-team{padding-inline:20px}}
@media(max-width:520px){.pw-shell{margin-inline:calc(var(--page-pad,16px)*-1)}.pw-top{padding-inline:var(--page-pad,16px)}.pw-switcher{flex:1}.pw-switcher>summary{width:100%;min-width:0}.pw-create{width:52px;padding:0}.pw-create span{display:none}.pw-create svg{margin:0}.pw-dossier{border-inline:0;border-radius:0;box-shadow:none}.pw-identity{align-items:flex-start;padding:18px var(--page-pad,16px)}.pw-identity h1{font-size:30px}.pw-more>summary{width:44px;min-width:44px;padding:0}.pw-more>summary>span:last-child{display:none}.pw-main,.pw-team{padding:18px var(--page-pad,16px) 24px}.pw-facts{grid-template-columns:1fr 1fr}.pw-facts>div:first-child{grid-column:1/-1;padding-bottom:14px;border-bottom:1px solid var(--line)}.pw-facts>div:nth-child(2){padding-left:0;border-left:0}.pw-code{min-height:68px}.pw-project-menu{width:calc(100vw - (var(--page-pad,16px)*2))}.pw-more-menu{right:0;width:min(230px,calc(100vw - 32px))}}
body.dark .pw-dossier,body.dark .pw-switcher>summary,body.dark .pw-project-menu,body.dark .pw-more-menu,body.dark .pw-empty{background:var(--panel)}body.dark .pw-team{background:var(--surface-container-lowest)}
.pw-more>summary{min-height:44px}.pw-person-more{width:44px;height:44px}.pw-switcher>summary:focus-visible,.pw-project-choice:focus-visible,.pw-create:focus-visible,.pw-more>summary:focus-visible,.pw-more-menu button:focus-visible,.pw-code:focus-visible,.pw-person-more:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
body.dark .pc-workspace{background:var(--panel)}body.dark .pc-rail{background:var(--surface-container-lowest)}body.dark .pc-project-row.is-selected{background:var(--surface-container-low);border-color:var(--outline-variant)}body.dark .pc-person.is-manager{background:color-mix(in srgb,var(--green) 10%,transparent)}
@media(prefers-reduced-motion:reduce){.pm-project-setting-panel,.pm-project-sheet,.pm-sheet-backdrop{animation:none;transition:none}.pm-project-carousel{scroll-behavior:auto}}
body.dark .pm-project-card{color:#f7f9fc;background:var(--panel);border-color:var(--line)}
body.dark .pm-project-sheet{color:#f7f9fc;background:var(--panel);border-color:var(--line);--text:#f7f9fc;--muted:#91a0b0;--line:var(--line);--surface:var(--surface-container-lowest)}
/* Project deck: the next card rises from beneath the current project. */
.pm-project-carousel{position:relative;display:block;height:294px;overflow:hidden;padding:2px 0 34px;cursor:grab;touch-action:pan-y;isolation:isolate}
.pm-project-card{position:absolute;inset:2px auto auto 50%;width:min(410px,calc(100% - 34px));height:258px;transform:translateX(-50%) translateX(var(--deck-x,0%)) translateY(var(--deck-y,0)) scale(var(--deck-scale,1));transform-origin:50% 100%;z-index:var(--deck-z,1);transition:transform .38s cubic-bezier(.16,1,.3,1),filter .24s ease-out,box-shadow .3s ease-out;will-change:transform;box-shadow:0 14px 36px rgba(0,0,0,.16)}
.pm-project-card[aria-hidden="true"]{pointer-events:none;filter:saturate(.9) brightness(.92)}
.pm-project-card[aria-hidden="false"]{pointer-events:auto;filter:none;box-shadow:0 28px 70px rgba(0,0,0,.3)}
.pm-project-card-copy{position:absolute;top:112px;right:63px;z-index:24;display:flex;align-items:center;justify-content:center;gap:6px;min-width:64px;height:36px;padding:0 10px;border:1px solid rgba(255,255,255,.2);border-radius:11px;color:#fff;background:rgba(255,255,255,.08);font-size:11px;font-weight:800;transition:background-color .18s ease,border-color .18s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.pm-project-card:not(.is-active) .pm-project-card-copy{color:var(--ink);background:var(--surface-container-low);border-color:var(--line)}
.pm-project-card-copy:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}.pm-project-card-copy:active{transform:scale(.94)}.pm-project-card-copy svg{width:16px;height:16px}.pm-project-card-copy.is-copied{min-width:36px;padding:0;color:#0d1319;background:#fff;border-color:#fff}.pm-project-card-copy.is-copied svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:pmCopyCheck .34s cubic-bezier(.65,0,.35,1) forwards}
.pm-project-card-meter{position:absolute;top:70px;right:22px;display:flex;width:30px;height:104px;flex-direction:column;align-items:center;gap:7px;color:var(--muted);pointer-events:none}
.pm-project-meter-bars{display:grid;width:9px;height:78px;grid-template-rows:repeat(var(--project-count),minmax(1px,1fr));gap:1px;align-content:end}
.pm-project-meter-bars i{display:block;min-height:1px;border-radius:99px;background:rgba(255,255,255,.14);transition:background-color .28s ease,box-shadow .28s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.pm-project-meter-bars i.is-filled{background:rgba(255,255,255,.82)}
.pm-project-meter-bars i.is-current{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.48);transform:scaleX(1.45)}
.pm-project-card-meter small{font:700 9px/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
@keyframes pmCopyCheck{to{stroke-dashoffset:0}}
.pm-project-carousel.is-dragging .pm-project-card,.pm-project-carousel.is-immediate .pm-project-card{transition:none}
.pm-project-carousel.is-dragging{cursor:grabbing;user-select:none}
@media(max-width:819px){.pm-project-carousel{height:282px;margin-inline:calc(var(--page-pad,16px)*-1);padding-inline:0}.pm-project-card{width:calc(100% - (var(--page-pad,16px)*2));height:245px}.pm-project-card-open{min-height:245px}}
@media(prefers-reduced-motion:reduce){.pm-project-card,.pm-project-card-copy,.pm-project-card-copy.is-copied svg path,.pm-project-setting-panel-inner{transition:none;animation:none;will-change:auto}.pm-project-card-copy.is-copied svg path{stroke-dashoffset:0}}

/* Project dossier: identity, real scope and the project-scoped crew. */
.pm-project-details-sheet{width:min(500px,100%)}
.pm-dossier-head{align-items:center;padding-bottom:20px}.pm-dossier-head>div{display:grid;gap:9px}.pm-dossier-head h2{margin:0;max-width:360px;font-size:clamp(27px,4vw,34px);line-height:1.02}.pm-sheet-status{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.pm-sheet-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.pm-sheet-status.is-active{color:#79dfb3;background:rgba(121,223,179,.08);border-color:rgba(121,223,179,.22)}.pm-sheet-status.is-archived{color:#a5afba;background:rgba(165,175,186,.07)}
.pm-dossier-scroll{display:grid;gap:30px;padding-top:22px}.pm-dossier-identity{display:grid;gap:24px}.pm-dossier-code{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 20px;border-bottom:1px solid var(--line)}.pm-dossier-code>span{display:grid;gap:6px;min-width:0}.pm-dossier-code small{color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.1em}.pm-dossier-code code{overflow:hidden;color:var(--text);font-size:16px;font-weight:750;letter-spacing:.1em;text-overflow:ellipsis;white-space:nowrap}.pm-dossier-code .btn-icon{flex:none}.pm-dossier-code .btn-icon.is-copied{color:#0d1319;background:#fff;border-color:#fff}
.pm-dossier-scope{display:grid;gap:9px}.pm-dossier-scope h3,.pm-dossier-section-head h3{margin:0;font-size:20px;letter-spacing:-.025em}.pm-dossier-scope p,.pm-dossier-section-head p{margin:0;color:var(--muted);line-height:1.5}.pm-dossier-types{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}.pm-dossier-types span{padding:7px 10px;border:1px solid #33414e;border-radius:999px;color:#d7e1ea;background:#141d25;font-size:11px;font-weight:750}.pm-dossier-types span.is-empty{color:var(--muted);border-style:dashed;background:transparent}
.pm-dossier-facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}.pm-dossier-facts span{display:grid;gap:4px;padding:17px 12px}.pm-dossier-facts span+span{border-left:1px solid var(--line)}.pm-dossier-facts b{font-size:22px;line-height:1;font-variant-numeric:tabular-nums}.pm-dossier-facts small{color:var(--muted);font-size:10px;line-height:1.25;text-transform:uppercase;letter-spacing:.07em}
.pm-dossier-team{display:grid;gap:16px}.pm-dossier-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px}.pm-dossier-section-head>div{display:grid;gap:5px}.pm-dossier-section-head>span{flex:none;color:var(--muted);font:700 12px/1 var(--mono)}.pm-dossier-manager{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:14px 15px;border:1px solid rgba(121,223,179,.2);border-radius:15px;background:rgba(121,223,179,.055)}.pm-dossier-manager .pm-member-avatar{width:46px;height:46px;color:#0d211a;background:#c8f4df;border-color:transparent}.pm-dossier-manager>span:nth-child(2),.pm-dossier-person>span:nth-child(2){display:grid;gap:3px;min-width:0}.pm-dossier-manager b,.pm-dossier-person b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pm-dossier-manager small,.pm-dossier-person small{color:var(--muted)}.pm-dossier-manager i{font-style:normal;color:#79dfb3;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.09em}
.pm-dossier-engineers{display:grid}.pm-dossier-role-label{display:flex;align-items:center;justify-content:space-between;padding:8px 1px 7px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.pm-dossier-role-label span{font-variant-numeric:tabular-nums}.pm-dossier-person{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;min-height:66px;border-bottom:1px solid var(--line)}.pm-dossier-role-label+.pm-dossier-person{border-top:1px solid var(--line)}.pm-dossier-person .pm-member-remove{opacity:.72;transition:opacity .18s ease,background-color .18s ease}.pm-dossier-person .pm-member-remove:hover{opacity:1;background:rgba(196,77,67,.08)}.pm-dossier-empty{padding:20px 0;border-block:1px dashed var(--line);text-align:center}.pm-dossier-empty p{max-width:330px;margin:6px auto 0;color:var(--muted);line-height:1.45}
@media(max-width:819px){.pm-dossier-scroll{gap:26px;padding-top:18px}.pm-dossier-head h2{font-size:28px}.pm-dossier-facts span{padding:15px 8px}.pm-dossier-facts b{font-size:20px}.pm-dossier-facts small{font-size:9px}.pm-dossier-section-head{align-items:start}.pm-project-details-sheet{width:auto;height:min(82dvh,730px)}}
@media(max-width:370px){.pm-dossier-facts{grid-template-columns:1fr 1fr}.pm-dossier-facts span:last-child{grid-column:1/-1;border-top:1px solid var(--line);border-left:0}.pm-dossier-manager{grid-template-columns:42px 1fr}.pm-dossier-manager i{grid-column:2}.pm-dossier-person{grid-template-columns:38px 1fr auto}}
@media(prefers-reduced-motion:reduce){.pm-dossier-person .pm-member-remove{transition:none}}

/* Sheet motion is consumed once. Data polling may remount the DOM, but must not replay it. */
.pm-project-sheet-stack .pm-sheet-backdrop,.pm-project-sheet-stack .pm-project-sheet{animation:none}
.pm-project-sheet-stack.is-opening-details .pm-sheet-backdrop,.pm-project-sheet-stack.is-opening-confirm .pm-sheet-backdrop{animation:pmFade 180ms cubic-bezier(.23,1,.32,1) both}
.pm-project-sheet-stack.is-opening-details .pm-project-details-sheet,.pm-project-sheet-stack.is-opening-edit .pm-project-edit-sheet,.pm-project-sheet-stack.is-opening-confirm .pm-project-confirm-sheet{animation:pmSheetIn 260ms cubic-bezier(.23,1,.32,1) both}
@media(max-width:819px){.pm-project-sheet-stack.is-opening-details .pm-project-details-sheet,.pm-project-sheet-stack.is-opening-edit .pm-project-edit-sheet,.pm-project-sheet-stack.is-opening-confirm .pm-project-confirm-sheet{animation:pmSheetUp 280ms cubic-bezier(.23,1,.32,1) both}}
@media(prefers-reduced-motion:reduce){.pm-project-sheet-stack.is-opening-details .pm-project-details-sheet,.pm-project-sheet-stack.is-opening-edit .pm-project-edit-sheet,.pm-project-sheet-stack.is-opening-confirm .pm-project-confirm-sheet{animation:pmFade 160ms cubic-bezier(.23,1,.32,1) both}}

/* Tasks Review: a focused PM queue, not a second task history screen. */
.pm-task-review{display:grid;gap:18px;max-width:1080px;margin:0 auto;padding-bottom:34px}.pm-review-hero{display:flex;align-items:end;justify-content:space-between;gap:22px;padding:8px 2px 4px}.pm-review-hero h1{margin:7px 0 8px;font-size:clamp(30px,4vw,46px);letter-spacing:-.045em}.pm-review-hero p{max-width:550px;margin:0;color:var(--muted);line-height:1.5}.pm-review-total{display:grid;justify-items:end;gap:3px;flex:none;padding-bottom:3px}.pm-review-total strong{font-size:36px;line-height:1;font-variant-numeric:tabular-nums}.pm-review-total small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.pm-review-summary{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}.pm-review-summary div{display:grid;gap:5px;padding:15px 18px}.pm-review-summary div+div{border-left:1px solid var(--line)}.pm-review-summary strong{font-size:25px;font-variant-numeric:tabular-nums}.pm-review-summary span{color:var(--muted);font-size:12px;font-weight:750}.pm-review-panel{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.pm-review-panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.pm-review-panel h2{margin:0;font-size:21px}.pm-review-panel header p{margin:5px 0 0;color:var(--muted);font-size:13px}.pm-review-list{display:grid}.pm-review-row{display:grid;grid-template-columns:minmax(0,1fr) 190px 142px;gap:20px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);transition:background-color .18s ease}.pm-review-row:last-child{border-bottom:0}.pm-review-row:hover{background:var(--surface-container-low)}.pm-review-main{min-width:0}.pm-review-title{display:flex;align-items:center;gap:10px}.pm-review-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pm-review-title .pill{flex:none}.pm-review-main>p{overflow:hidden;margin:7px 0;color:var(--muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.pm-review-meta{display:flex;flex-wrap:wrap;gap:7px 15px;color:var(--muted);font:600 11px/1.3 var(--mono)}.pm-review-progress{display:grid;gap:4px}.pm-review-status{font-weight:800;font-size:12px}.status-green{color:var(--green)}.status-blue{color:var(--blue)}.status-amber{color:var(--amber)}.status-neutral{color:var(--muted)}.pm-review-time{color:var(--muted);font:600 10px/1.2 var(--mono)}.pm-review-steps{display:flex;gap:4px;margin-top:5px}.pm-review-steps i{display:block;width:25px;height:4px;border-radius:4px;background:var(--line)}.pm-review-steps i.is-on{background:currentColor}.progress-sent .pm-review-steps{color:var(--muted)}.progress-opened .pm-review-steps{color:var(--amber)}.progress-submitted .pm-review-steps{color:var(--blue)}.progress-completed .pm-review-steps{color:var(--green)}.pm-review-actions{justify-self:end}.pm-review-actions .review-action-stack{display:flex;flex-wrap:wrap;justify-content:end;gap:6px}.pm-review-actions .btn{min-height:36px;padding:8px 10px;font-size:11px}.pm-review-empty{display:grid;justify-items:center;gap:8px;padding:48px 20px;text-align:center}.pm-review-empty>span{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;color:var(--green);background:var(--surface-container-low);font-size:22px}.pm-review-empty strong{font-size:17px}.pm-review-empty p{max-width:360px;margin:0;color:var(--muted);font-size:13px}
@media(max-width:819px){.pm-task-review{gap:14px;padding:0 0 26px}.pm-review-hero{align-items:start;padding-top:2px}.pm-review-hero h1{font-size:32px}.pm-review-total strong{font-size:30px}.pm-review-summary div{padding:13px 12px}.pm-review-summary strong{font-size:22px}.pm-review-panel{border-radius:16px}.pm-review-panel>header{padding:16px}.pm-review-row{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px}.pm-review-progress{justify-items:end}.pm-review-actions{grid-column:1/-1;justify-self:stretch;padding-top:4px}.pm-review-actions .review-action-stack{justify-content:stretch}.pm-review-actions .btn{flex:1}.pm-review-meta{gap:5px 11px}.pm-review-title{align-items:start;flex-direction:column;gap:6px}.pm-review-main>p{white-space:normal;line-height:1.4}.pm-review-steps i{width:20px}}
@media(prefers-reduced-motion:reduce){.pm-review-row{transition:none}}
.pm-review-timeline-list{display:grid}.pm-review-disclosure{border-bottom:1px solid var(--line)}.pm-review-disclosure:last-child{border-bottom:0}.pm-review-disclosure summary{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:18px;padding:18px 20px;cursor:pointer;list-style:none;transition:background-color .18s ease}.pm-review-disclosure summary::-webkit-details-marker{display:none}.pm-review-disclosure summary:hover,.pm-review-disclosure[open] summary{background:var(--surface-container-low)}.pm-review-summary-main{display:grid;gap:8px;min-width:0}.pm-review-summary-main .pm-review-title{display:flex;align-items:center;gap:10px}.pm-review-summary-main .pm-review-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pm-review-summary-status{display:grid;justify-items:end;gap:4px;font-size:12px;font-weight:800;text-align:right}.pm-review-summary-status small{color:var(--muted);font:600 10px/1 var(--mono)}.pm-review-chevron{color:var(--muted);font-size:18px;transition:transform .2s ease}.pm-review-disclosure[open] .pm-review-chevron{transform:rotate(180deg)}.pm-review-detail{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;align-items:center;gap:22px;padding:0 20px 20px;background:var(--surface-container-low)}.pm-review-instruction{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.pm-review-timeline{display:flex;align-items:start;gap:0}.pm-review-timeline-step{position:relative;display:grid;justify-items:center;gap:7px;min-width:74px;color:var(--muted);text-align:center}.pm-review-timeline-step:not(:last-child)::after{content:"";position:absolute;top:5px;left:calc(50% + 6px);width:calc(100% - 12px);height:2px;background:var(--line)}.pm-review-timeline-step.is-done{color:var(--green)}.pm-review-timeline-step.is-done::after{background:var(--green)}.pm-review-timeline-step span{z-index:1;width:12px;height:12px;border:2px solid currentColor;border-radius:50%;background:var(--surface-container-low)}.pm-review-timeline-step.is-current span{box-shadow:0 0 0 4px color-mix(in srgb,currentColor 16%,transparent)}.pm-review-timeline-step strong{font-size:10px;line-height:1.15}.pm-review-timeline-step small{color:var(--muted);font:600 9px/1 var(--mono)}.pm-review-detail-footer{display:grid;justify-items:end;gap:10px;color:var(--muted);font:600 10px/1 var(--mono)}.pm-review-detail-footer .review-action-stack{display:flex;gap:6px}.pm-review-detail-footer .btn{min-height:34px;padding:7px 10px;font-size:11px}
@media(max-width:819px){.pm-review-disclosure summary{grid-template-columns:minmax(0,1fr) auto 14px;gap:10px;padding:16px}.pm-review-summary-status{font-size:11px}.pm-review-detail{grid-template-columns:1fr;padding:0 16px 18px;gap:16px}.pm-review-timeline{overflow-x:auto;padding-bottom:3px}.pm-review-timeline-step{min-width:82px}.pm-review-detail-footer{display:flex;align-items:center;justify-content:space-between}.pm-review-detail-footer .review-action-stack{flex-wrap:wrap;justify-content:end}.pm-review-detail-footer .btn{min-height:32px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.pm-review-chevron,.pm-review-disclosure summary{transition:none}}
.pm-field-queue{max-width:1120px}.pm-queue-summary{grid-template-columns:repeat(4,1fr)}.pm-queue-summary .queue-attention strong{color:var(--red)}.pm-queue-summary .queue-progress strong{color:var(--amber)}.pm-queue-summary .queue-review strong{color:var(--blue)}.pm-queue-summary .queue-complete strong{color:var(--green)}.pm-queue-list{display:grid;gap:14px}.pm-queue-section{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.pm-queue-section>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;border-bottom:1px solid var(--line)}.pm-queue-section>header h2{margin:0;font-size:18px}.pm-queue-section>header p{margin:5px 0 0;color:var(--muted);font-size:12px}.pm-queue-section .pm-review-disclosure:last-child{border-bottom:0}.pm-queue-section.queue-red>header{border-top:2px solid var(--red)}.pm-queue-section.queue-amber>header{border-top:2px solid var(--amber)}.pm-queue-section.queue-blue>header{border-top:2px solid var(--blue)}.pm-queue-section>.pm-review-empty{padding:30px 20px}.pm-queue-section>.pm-review-list{min-height:0}
@media(max-width:819px){.pm-queue-summary{grid-template-columns:repeat(2,1fr)}.pm-queue-summary div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.pm-queue-summary div:nth-child(4){border-top:1px solid var(--line)}.pm-queue-section{border-radius:16px}.pm-queue-section>header{padding:15px 16px}.pm-queue-section>header h2{font-size:17px}}
.pm-review-hero-actions{display:grid;justify-items:end;gap:10px}.pm-review-preview-button{min-height:34px;padding:7px 11px;font-size:11px}.pm-review-preview-note{margin:0;padding:10px 14px;border:1px dashed var(--amber);border-radius:10px;color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent);font-size:12px}
.pm-review-tools{display:flex;align-items:center;justify-content:space-between;gap:12px}.pm-review-tools .pm-review-info{flex:1}.pm-review-tools .pm-review-preview-button{flex:0 0 auto}
.pm-review-duty-status.status-button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;cursor:default;font:inherit;background:transparent}.pm-review-duty-status.status-button i{display:block;width:9px;height:9px;border-radius:50%;background:currentColor}.pm-review-duty-status.pending{color:var(--amber);animation:pm-review-status-pulse 1.8s ease-in-out infinite}.pm-review-duty-status.ready{color:var(--green);animation:pm-review-status-pulse 1.8s ease-in-out infinite}.pm-review-duty-status.pending:focus,.pm-review-duty-status.ready:focus{outline:none}.pm-review-inspector{border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 92%,var(--brand-2));padding:16px;margin-top:8px}.pm-review-inspector-label{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.pm-review-inspector h3{margin:0 0 8px;font-size:18px}.se-pm-duty-context{border-left:3px solid var(--brand-2)}.se-pm-duty-context small{display:block;margin-top:10px;color:var(--muted)}@keyframes pm-review-status-pulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.22);filter:brightness(1.22)}}
@media(max-width:819px){.pm-review-hero-actions{align-items:end}.pm-review-preview-button{white-space:nowrap}}
.pm-simple-review{max-width:920px;gap:18px}.pm-simple-hero{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:4px 2px}.pm-simple-hero h1{margin:0 0 6px;font-size:clamp(30px,4vw,44px);letter-spacing:-.045em}.pm-simple-hero p{margin:0;color:var(--muted)}.pm-simple-total{display:grid;justify-items:end;gap:3px}.pm-simple-total strong{font-size:34px;line-height:1}.pm-simple-total small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.pm-simple-focus{display:flex;gap:10px}.pm-simple-focus span{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px}.pm-simple-focus b{color:var(--text);font-size:17px}.pm-simple-project{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.pm-simple-project>header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}.pm-simple-project h2{margin:0;font-size:17px}.pm-simple-project>header span{color:var(--muted);font:600 11px/1 var(--mono)}.pm-simple-duty{border-bottom:1px solid var(--line)}.pm-simple-duty:last-child{border-bottom:0}.pm-simple-duty summary{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;list-style:none}.pm-simple-duty summary::-webkit-details-marker{display:none}.pm-simple-duty summary:hover,.pm-simple-duty[open] summary{background:var(--surface-container-low)}.pm-simple-duty summary>span{display:grid;gap:4px;min-width:0}.pm-simple-duty strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pm-simple-duty small{color:var(--muted);font-size:12px}.pm-simple-duty em{font-style:normal;font-size:11px;font-weight:800;white-space:nowrap}.pm-simple-duty summary>b{color:var(--muted);font-size:17px;font-weight:400}.pm-simple-duty-detail{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:0 18px 16px;background:var(--surface-container-low)}.pm-simple-duty-detail p{margin:0;color:var(--muted);font-size:13px}.pm-simple-duty-detail>span{color:var(--muted);font:600 10px/1 var(--mono)}.pm-simple-duty-detail .review-action-stack{display:flex;gap:5px}.pm-simple-duty-detail .btn{min-height:32px;padding:6px 9px;font-size:11px}.pm-simple-review .pm-review-empty{border:1px solid var(--line);border-radius:16px;background:var(--surface)}
@media(max-width:819px){.pm-simple-review{gap:14px}.pm-simple-hero{align-items:start}.pm-simple-hero h1{font-size:31px}.pm-simple-focus span{flex:1;justify-content:center}.pm-simple-duty summary{grid-template-columns:minmax(0,1fr) auto 13px;padding:14px}.pm-simple-duty-detail{grid-template-columns:1fr auto;padding:0 14px 14px}.pm-simple-duty-detail>div{grid-column:1/-1}.pm-simple-duty-detail .review-action-stack{justify-content:stretch}.pm-simple-duty-detail .btn{flex:1}}
.pm-review-workflow{max-width:920px;gap:22px}.pm-review-workflow-head{display:flex;align-items:end;justify-content:space-between;gap:20px}.pm-review-workflow-head h1{margin:4px 0 6px;font-size:clamp(30px,4vw,44px);letter-spacing:-.045em}.pm-review-workflow-head p{margin:0;color:var(--muted);max-width:520px}.pm-review-workflow-head .pm-review-total{display:grid;justify-items:end;gap:3px}.pm-review-workflow-head .pm-review-total strong{font-size:34px;line-height:1}.pm-review-workflow-head .pm-review-total small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.pm-review-state-stack{display:grid;gap:14px}.pm-review-state{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.pm-review-state>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px;border-bottom:1px solid var(--line)}.pm-review-state>header h2{margin:0;font-size:18px}.pm-review-state>header p{margin:4px 0 0;color:var(--muted);font-size:12px}.pm-review-state>header>strong{display:grid;place-items:center;min-width:30px;height:30px;border-radius:9px;font-size:14px}.pm-review-state-attention{border-color:color-mix(in srgb,var(--red) 42%,var(--line))}.pm-review-state-attention>header>strong{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}.pm-review-state-ready{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}.pm-review-state-ready>header>strong{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}.pm-review-duty{border-bottom:1px solid var(--line)}.pm-review-duty:last-child{border-bottom:0}.pm-review-duty summary{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:14px;padding:16px 19px;cursor:pointer;list-style:none}.pm-review-duty summary::-webkit-details-marker{display:none}.pm-review-duty summary:hover,.pm-review-duty[open] summary{background:var(--surface-container-low)}.pm-review-duty-copy{display:grid;gap:4px;min-width:0}.pm-review-duty-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pm-review-duty-copy small{color:var(--muted);font-size:12px}.pm-review-duty-status{font-size:11px;font-weight:800;white-space:nowrap}.pm-review-duty-status.pending{color:var(--amber)}.pm-review-duty-status.ready{color:var(--green)}.pm-review-chevron{color:var(--muted);font-size:18px;transition:transform 180ms ease}.pm-review-duty[open] .pm-review-chevron{transform:rotate(180deg)}.pm-review-duty-detail{display:grid;gap:13px;padding:0 19px 17px;background:var(--surface-container-low)}.pm-review-duty-detail>p{margin:0;padding-top:14px;color:var(--muted);font-size:13px;line-height:1.5}.pm-review-duty-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font:600 10px/1 var(--mono);text-transform:uppercase}.pm-review-duty-actions{display:flex;gap:7px}.pm-review-duty-actions .btn{min-height:34px;padding:7px 11px;font-size:11px}.pm-review-waiting{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.pm-review-waiting i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 35%,transparent);animation:pm-duty-pulse 1.8s ease-out infinite}@keyframes pm-duty-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 40%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}.pm-review-state-empty{padding:24px 19px;color:var(--muted);font-size:13px}@media(max-width:819px){.pm-review-workflow{gap:16px}.pm-review-workflow-head{align-items:start}.pm-review-workflow-head h1{font-size:31px}.pm-review-workflow-head .pm-review-total strong{font-size:28px}.pm-review-duty summary{grid-template-columns:minmax(0,1fr) auto 14px;padding:15px}.pm-review-duty-detail{padding:0 15px 15px}.pm-review-duty-meta{font-size:9px}.pm-review-duty-actions{flex-wrap:wrap}.pm-review-duty-actions .btn{flex:1}}
.pm-review-state{transition:border-color 180ms ease,box-shadow 180ms ease}.pm-review-state>summary{list-style:none}.pm-review-state>summary::-webkit-details-marker{display:none}.pm-review-state-head{display:flex!important;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px!important;cursor:pointer}.pm-review-state-head>div{min-width:0}.pm-review-state-head h2{margin:0}.pm-review-state-head p{margin:4px 0 0}.pm-review-state-chevron{color:var(--muted);font-size:18px;transition:transform 220ms ease}.pm-review-state[open] .pm-review-state-chevron{transform:rotate(180deg)}.pm-review-state[open]{box-shadow:0 8px 24px color-mix(in srgb,var(--text) 8%,transparent)}.pm-review-state[open] .pm-review-duty-list{animation:pm-review-slide-in 220ms cubic-bezier(.22,1,.36,1) both}@keyframes pm-review-slide-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.pm-review-steps{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-bottom:1px solid var(--line);background:var(--surface-container-low)}.pm-review-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-height:42px;padding:6px 10px;border:0;border-radius:10px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;transition:background 180ms ease,color 180ms ease,transform 180ms ease}.pm-review-step:hover{transform:translateY(-1px)}.pm-review-step.is-active{background:var(--surface);color:var(--text);box-shadow:0 3px 12px color-mix(in srgb,var(--text) 8%,transparent)}.pm-review-step span{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--line);border-radius:50%;font:700 11px/1 var(--mono)}.pm-review-step.is-active span{background:var(--text);border-color:var(--text);color:var(--surface)}.pm-review-step strong{font-size:12px}.pm-review-step b{font:700 11px/1 var(--mono);opacity:.7}.pm-review-state-single{animation:pm-review-slide-in 220ms cubic-bezier(.22,1,.36,1) both}.pm-review-state-single>.pm-review-state-head{border-bottom:1px solid var(--line)}@media(max-width:819px){.pm-review-step{min-height:40px;padding:5px 8px}.pm-review-step strong{font-size:11px}.pm-review-step b{font-size:10px}}
.pm-review-steps{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding-bottom:12px;background:transparent}.pm-review-steps::before{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:999px;background:var(--line)}.pm-review-steps::after{content:"";position:absolute;left:8px;bottom:4px;height:3px;width:calc(50% - 8px);border-radius:999px;background:var(--brand-2);transition:transform .34s var(--ease-out)}.pm-review-steps:has(.pm-review-step[data-review-state="ready"].is-active)::after{transform:translateX(100%)}.pm-review-step{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:8px 6px;border-radius:var(--radius);background:transparent;color:var(--muted);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out)}.pm-review-step:active{transform:scale(.98)}.pm-review-step em{font:700 11px/1 var(--mono);font-style:normal;opacity:.72}.pm-review-step.is-active{background:var(--surface-container-low);color:var(--ink)}.pm-review-step.is-active b{background:var(--brand);color:#fff;border-color:transparent;transform:scale(1.05)}.pm-review-step.is-active em{opacity:1;color:var(--text)}
.pm-review-steps{width:100%;min-width:0}.pm-review-step{min-width:0;overflow:hidden}.pm-review-step span,.pm-review-step strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}.pm-review-step em{display:block;flex:none;min-width:12px;text-align:right;white-space:nowrap}.pm-review-step b{flex:none}.pm-review-step.is-active{transform:none}.pm-review-step:active{transform:scale(.985)}body.dark .pm-review-step{color:#aeb8c3}body.dark .pm-review-step.is-active{background:var(--surface-container);color:#f5f7fa;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}body.dark .pm-review-step b{background:var(--surface-container);color:#dbe3ea;border-color:var(--outline-variant)}body.dark .pm-review-step.is-active b{background:#b9d8ef;color:#122235;border-color:#d5e8f6;box-shadow:0 0 0 3px rgba(185,216,239,.16)}
.pm-review-step span{flex:1;min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;font-size:11px;letter-spacing:-.025em}.pm-review-step em{width:14px;min-width:14px;margin-left:auto}.pm-review-step{gap:6px;padding-left:8px;padding-right:8px}
.pm-review-step,.pm-review-step.is-active,.pm-review-step:hover{background:transparent!important;box-shadow:none!important;color:var(--text)}.pm-review-step{border-radius:0;transform:none!important;padding-left:4px;padding-right:4px}.pm-review-step span{font-size:13px;font-weight:800;color:var(--text);overflow:visible;text-overflow:clip}.pm-review-step em{font-size:12px;color:var(--muted)}body.dark .pm-review-step, body.dark .pm-review-step span{color:#f2f5f7}.pm-review-step.is-active span{color:var(--text)}body.dark .pm-review-step.is-active span{color:#fff}
.pm-review-state-single,.pm-review-duty{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.pm-review-state-single>.pm-review-state-head{border-bottom:1px solid var(--line);padding-left:0!important;padding-right:0!important}.pm-review-duty{border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}.pm-review-duty summary{padding-left:0;padding-right:0}.pm-review-duty summary:hover,.pm-review-duty[open] summary{background:transparent}.pm-review-duty-detail{padding-left:0;padding-right:0;background:transparent}.pm-review-state-empty{padding-left:0;padding-right:0}.pm-review-state-single{margin-top:0}.pm-review-step span{font-weight:850;text-shadow:none}.pm-review-step em{font-weight:800}.pm-review-steps{background:transparent}
.pm-review-step{outline:0!important;border:0!important;box-shadow:none!important;background:transparent!important}.pm-review-step:focus,.pm-review-step:focus-visible,.pm-review-step:hover{outline:0!important;border:0!important;box-shadow:none!important;background:transparent!important}.pm-review-step span{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important}.pm-review-step.is-active span{background:transparent!important;color:var(--text)!important}.pm-review-step b{border-radius:999px!important;outline:0!important;flex:none}.pm-review-step::after{display:none!important}
/* Restore the compact framed switch: both labels stay readable, active state gets one pill. */
.pm-review-steps{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-bottom:1px solid var(--line);background:var(--surface-container-low);overflow:visible}
.pm-review-step,.pm-review-step:not(.is-active),.pm-review-step.is-active{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-content:initial;gap:8px;min-width:0;min-height:42px;flex:none;padding:6px 10px;border-radius:10px!important;background:transparent!important;color:var(--muted)!important;transform:none!important;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.pm-review-step.is-active{background:var(--surface)!important;color:var(--text)!important;box-shadow:0 3px 12px color-mix(in srgb,var(--text) 8%,transparent)}
.pm-review-step b{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--line);border-radius:50%!important;background:transparent;color:inherit;font:700 11px/1 var(--mono);opacity:1}
.pm-review-step.is-active b{background:var(--text);border-color:var(--text);color:var(--surface);transform:none}
.pm-review-step span{display:block;min-width:0;max-width:none;overflow:visible;opacity:1;color:inherit!important;font-size:12px;font-weight:800;letter-spacing:0;line-height:1.1;white-space:nowrap}
@media(max-width:819px){.pm-review-step,.pm-review-step:not(.is-active),.pm-review-step.is-active{min-height:40px;padding:5px 8px;gap:7px}.pm-review-step span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.pm-review-step{transition:none!important}}
.pm-review-state-single{animation:none!important}
.pm-review-state-single>.pm-review-duty-list{animation:pm-review-slide-in 220ms cubic-bezier(.22,1,.36,1) both}
.pm-review-info{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:680px}
.pm-review-info strong{color:var(--text);font-weight:800}
.pm-review-tools{min-width:0}
.pm-review-tools .pm-review-preview-button{width:auto;min-width:0;max-width:max-content;white-space:nowrap;flex:0 0 auto}
/* Flat review switch: no enclosing pills, only the active number is emphasized. */
.pm-review-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 0 12px;background:transparent;border-bottom:0;overflow:visible}
.pm-review-step,.pm-review-step:not(.is-active),.pm-review-step.is-active{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-content:initial;gap:7px;min-width:0;min-height:34px;padding:0 0 5px;border:0!important;border-radius:0!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important;transform:none!important;transition:color .18s ease}
.pm-review-step.is-active{color:var(--text)!important}
.pm-review-step b{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--line);border-radius:50%!important;background:transparent;color:inherit;font:700 11px/1 var(--mono);opacity:1}
.pm-review-step.is-active b{background:var(--muted);border-color:var(--muted);color:var(--surface);transform:none}
.pm-review-step span{display:block;min-width:0;max-width:none;overflow:visible;opacity:1;color:inherit!important;font-size:13px;font-weight:800;letter-spacing:0;line-height:1.1;white-space:nowrap}
.pm-review-steps::before{left:0;right:0;bottom:0;height:2px;border-radius:0;background:var(--line)}
.pm-review-steps::after{left:0;bottom:0;height:2px;width:calc(50% - 4px);border-radius:0;background:var(--brand-2);transition:transform .34s var(--ease-out)}
@media(max-width:819px){.pm-review-step,.pm-review-step:not(.is-active),.pm-review-step.is-active{min-height:32px;padding-bottom:5px}.pm-review-step span{font-size:12px}}
@media(max-width:560px){.pm-review-tools{align-items:flex-start}.pm-review-info{min-width:0;font-size:14px}.pm-review-tools .pm-review-preview-button{width:auto;max-width:46%;padding-inline:10px;font-size:11px}}
/* Match the New Duties rail: keep the active review state in a quiet, tactile frame. */
.pm-review-step.is-active,
.pm-review-step.is-active:hover,
.pm-review-step.is-active:focus-visible{background:var(--surface-container-low)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent)!important}
.pm-review-step.is-active b{background:var(--brand)!important;border-color:transparent!important;color:#fff!important}
body.dark .pm-review-step.is-active{background:#202a33!important;color:#f5f7fa!important;border-color:#34404b!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}
body.dark .pm-review-step.is-active b{background:#b9d8ef!important;color:#122235!important;border-color:#d5e8f6!important}
/* Keep both review states balanced while giving the active rail the New Duties shape. */
.pm-review-steps{gap:10px;padding:3px 4px 12px}
.pm-review-step,.pm-review-step:not(.is-active),.pm-review-step.is-active{min-height:42px;padding:5px 10px;gap:8px}
.pm-review-step.is-active,.pm-review-step.is-active:hover,.pm-review-step.is-active:focus-visible{border-radius:14px!important}
@media(max-width:560px){.pm-review-steps{gap:8px;padding-inline:2px}.pm-review-step,.pm-review-step:not(.is-active),.pm-review-step.is-active{min-height:40px;padding-inline:9px}.pm-review-step span{font-size:12px}}
/* Match the New Duties rail: each state starts from the left with stable spacing. */
.pm-review-step,.pm-review-step:not(.is-active),.pm-review-step.is-active{grid-template-columns:auto minmax(0,1fr);justify-content:start;align-content:center;gap:9px;text-align:left}
.pm-review-step b{width:28px;height:28px;font-size:12px}
.pm-review-step span{font-size:14px;line-height:1.15}
.pm-review-step span{transform:translateY(4px)}
.pm-review-reviewed{margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.pm-review-reviewed>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 6px}
.pm-review-reviewed>header h3{margin:0;font-size:15px;line-height:1.25}
.pm-review-reviewed>header p{margin:3px 0 0;color:var(--muted);font-size:11px}
.pm-review-reviewed>header>strong{display:grid;place-items:center;min-width:25px;height:25px;border-radius:8px;background:var(--surface-container-low);color:var(--muted);font-size:12px}
.pm-review-reviewed .pm-review-duty{opacity:.76}
.pm-review-reviewed .pm-review-duty summary{padding-top:11px;padding-bottom:11px}
.pm-review-reviewed .pm-review-duty-copy strong{font-size:13px}
.pm-review-reviewed .pm-review-duty-detail,.pm-review-reviewed .pm-review-chevron{display:none}
.pm-review-record .review-action-stack,.pm-review-record .pm-review-duty-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:4px}
.pm-review-record .review-action-stack .btn,.pm-review-record .pm-review-duty-actions .btn{min-width:0;width:100%;white-space:nowrap}
@media(max-width:560px){.pm-review-record .review-action-stack,.pm-review-record .pm-review-duty-actions{gap:6px}.pm-review-record .review-action-stack .btn,.pm-review-record .pm-review-duty-actions .btn{padding-inline:7px;font-size:10px}}
@media(max-width:560px){.pm-review-step,.pm-review-step:not(.is-active),.pm-review-step.is-active{gap:8px;padding-inline:7px}.pm-review-step b{width:27px;height:27px;font-size:12px}.pm-review-step span{font-size:13px}}
.pm-review-duty.pm-review-report-only { border-left: 3px solid var(--accent, #a88752); }
.pm-review-duty-status.field-report { color: var(--accent, #a88752); }
.pm-review-duty-status.field-report i { background: currentColor; }
.pm-review-duty-status:not(.field-report)::after { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; animation: pm-review-status-pulse 1.5s ease-in-out infinite; }
.pm-review-duty-status:not(.field-report) i { animation-delay: .2s; }
.pm-review-duty[open] .pm-review-duty-detail{position:fixed;z-index:90;inset:10vh 50% auto;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));max-height:78vh;overflow:auto;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 24px 80px color-mix(in srgb,#000 42%,transparent);animation:pm-review-sheet-in 220ms cubic-bezier(.22,1,.36,1) both}
.pm-review-duty[open] .pm-review-duty-detail:before{content:"";position:fixed;z-index:-1;inset:-100vh;background:color-mix(in srgb,#000 42%,transparent);pointer-events:none}
.pm-review-duty[open] .pm-review-duty-detail h3{font-size:24px;line-height:1.12;margin:0}
.pm-review-duty[open] .pm-review-duty-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pm-review-duty[open] .pm-review-duty-meta span{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-container-low)}
@keyframes pm-review-sheet-in{from{opacity:0;transform:translate(-50%,10px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.pm-review-record-backdrop{position:fixed;z-index:110;inset:0;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,#000 52%,transparent);animation:pm-record-fade 160ms ease both}
/* The evidence the Approve/Return decision rests on. Tiles stay small enough
   that several fit above the decision buttons, and large enough to be worth
   tapping; the sketch gets full width because it is a drawing, not a snapshot. */
.pmr-evidence{display:grid;gap:12px;margin-top:14px}
.pmr-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.pmr-shot{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2,var(--surface));cursor:zoom-in;aspect-ratio:1;min-height:96px}
.pmr-shot img{display:block;width:100%;height:100%;object-fit:cover}
.pmr-shot:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pmr-evidence-empty{margin:0;color:var(--muted);font-size:.86rem}
.pmr-sketch{margin:0;display:grid;gap:6px}
.pmr-sketch figcaption{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.pmr-sketch img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.pmr-gps-link{color:var(--primary,var(--accent));text-decoration:underline;text-underline-offset:2px}
/* A weak fix has to be readable as a caveat, not as decoration, because the
   manager approves construction evidence against this coordinate. */
.pmr-gps-weak{margin-left:8px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--warning) 16%,transparent);color:var(--warning);font-size:11px;font-weight:800;white-space:nowrap}
.pmr-lightbox{position:fixed;z-index:130;inset:0;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,#000 82%,transparent);cursor:zoom-out;animation:pm-record-fade 160ms ease both}
.pmr-lightbox img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain}
.pmr-lightbox-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:color-mix(in srgb,#000 55%,transparent);color:#fff;cursor:pointer}
.pm-review-record{width:min(620px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 28px 90px color-mix(in srgb,#000 48%,transparent);animation:pm-record-in 220ms cubic-bezier(.22,1,.36,1) both}
.pm-review-record>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pm-review-record h2{margin:5px 0 0;font-size:clamp(22px,4vw,32px);line-height:1.05}
.pm-review-record-meta{display:grid;gap:5px;padding:16px 0}
.pm-review-record-meta-where{font-size:16px;font-weight:800;line-height:1.3}
.pm-review-record-meta-who{color:var(--muted);font-size:13px;line-height:1.4}
.pm-review-record-meta-time{color:var(--muted);font:600 11px/1.4 var(--mono);letter-spacing:.02em}
@keyframes pm-record-fade{from{opacity:0}to{opacity:1}}@keyframes pm-record-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){.pm-review-record-backdrop{padding:12px}.pm-review-record{max-height:calc(100vh - 24px);padding:18px}}
.pm-review-duty .pm-review-duty-detail{display:none!important;position:static!important;inset:auto!important;transform:none!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;animation:none!important}
.pm-review-duty .pm-review-chevron{display:none!important}
.pm-review-duty>summary::-webkit-details-marker{display:none!important}
.pm-review-duty>summary::marker{content:""!important}
.pm-review-decision{display:inline-grid;place-items:center;min-height:30px;padding:0 10px;border-radius:8px;font-size:11px;font-weight:800;white-space:nowrap}
.pm-review-decision.approved{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.pm-review-decision.declined{color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.pm-review-duty-status.approved,.pm-review-duty-status.declined{display:block!important;width:7px!important;height:48px!important;border-radius:3px!important;animation:none!important}
.pm-review-duty-status.approved{background:#4ee17c!important;color:#4ee17c!important}
.pm-review-duty-status.declined{background:#ff3b3b!important;color:#ff3b3b!important}
.pm-review-duty-status.approved i,.pm-review-duty-status.declined i{display:none!important}
.pm-review-duty-status.status-button{display:block!important;width:7px!important;height:48px!important;border-radius:3px!important;animation:none!important;background:currentColor!important}
.pm-review-duty-status.status-button i,.pm-review-duty-status.status-button::after{display:none!important;content:none!important}
.pm-review-duty-status.pending{color:var(--amber)!important}
.pm-review-duty-status.ready{color:var(--green)!important}
.pm-review-duty-status.field-report{color:var(--amber)!important}
.pm-review-duty-status.status-button{position:relative;display:grid!important;place-items:center;width:18px!important;height:48px!important;background:transparent!important;color:var(--muted)!important}
.pm-review-duty-status.status-button::before{content:"";position:absolute;right:-8px;top:0;width:7px;height:48px;border-radius:3px;background:currentColor}
.pm-review-duty-status.status-button i{display:block!important;position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:currentColor}
.pm-review-duty-status.status-button::after{display:block!important;content:"";position:absolute;z-index:1;width:6px;height:6px;border-radius:50%;background:currentColor;transform:translateY(9px)}
.pm-review-duty-status.pending{color:var(--amber)!important}.pm-review-duty-status.ready{color:var(--green)!important}.pm-review-duty-status.field-report{color:#b99058!important}
.pm-review-duty-status.approved{color:#4ee17c!important}.pm-review-duty-status.declined{color:#ff3b3b!important}
.pm-review-duty-status.status-button{display:grid!important;position:relative;width:22px!important;height:22px!important;background:transparent!important;color:var(--muted)!important;border-radius:0!important}
.pm-review-duty-status.status-button::before{display:none!important;content:none!important}
.pm-review-duty-status.status-button i{display:block!important;position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:currentColor}
.pm-review-duty-status.status-button::after{display:block!important;content:"";position:absolute;z-index:1;width:6px;height:6px;border-radius:50%;background:currentColor;transform:translateY(9px)}
.pm-review-duty-status.pending{color:var(--amber)!important}.pm-review-duty-status.ready{color:var(--green)!important}.pm-review-duty-status.field-report{color:#b99058!important}
.pm-review-duty-status.approved,.pm-review-duty-status.declined{width:22px!important;height:48px!important;background:transparent!important}
.pm-review-duty-status.approved::before,.pm-review-duty-status.declined::before{display:block!important;content:"";position:absolute;right:-12px;top:0;width:7px;height:48px;border-radius:3px;background:currentColor}
.pm-review-duty-status.approved i,.pm-review-duty-status.declined i{display:block!important;position:relative!important;z-index:1!important;width:9px!important;height:9px!important;border-radius:50%!important;background:currentColor!important}
.pm-review-duty-status.approved::after,.pm-review-duty-status.declined::after{display:block!important;content:""!important;position:absolute!important;z-index:1!important;width:6px!important;height:6px!important;border-radius:50%!important;background:currentColor!important;transform:translateY(9px)!important}
.pm-review-duty-status.approved,.pm-review-duty-status.declined{width:22px!important;height:22px!important;background:transparent!important;color:var(--muted)!important}
.pm-review-duty-status.approved::before,.pm-review-duty-status.declined::before,.pm-review-duty-status.approved::after,.pm-review-duty-status.declined::after{display:none!important;content:none!important}
.pm-review-duty-status.approved i,.pm-review-duty-status.declined i{width:7px!important;height:7px!important;background:#aeb8c2!important}
.pm-review-duty-status.status-button,
.pm-review-duty-status.status-button.approved,
.pm-review-duty-status.status-button.declined{position:relative!important;display:grid!important;place-items:center!important;width:22px!important;height:30px!important;border:0!important;border-radius:0!important;background:transparent!important;animation:none!important}
.pm-review-duty-status.status-button::before{display:none!important;content:none!important}
.pm-review-duty-status.status-button i{display:block!important;position:absolute!important;top:6px!important;left:7px!important;width:10px!important;height:10px!important;border-radius:50%!important;background:currentColor!important}
.pm-review-duty-status.status-button::after{display:block!important;content:""!important;position:absolute!important;top:20px!important;left:9px!important;width:7px!important;height:7px!important;border-radius:50%!important;background:currentColor!important;transform:none!important}
.pm-review-duty-status.status-button.pending{color:var(--amber)!important}
.pm-review-duty-status.status-button.ready{color:var(--green)!important}
body:not(.dark) .pm-review-duty-status.status-button.ready{color:#3b82f6!important}
body:not(.dark) .pm-review-duty-status.status-button.declined{color:#3b82f6!important}
body .pm-review-duty-status.status-button.ready,
body .pm-review-duty-status.status-button.declined{color:#3b82f6!important}
.pm-review-duty-status.status-button.field-report{color:#b99058!important}
.pm-review-duty-status.status-button.approved{color:#4ee17c!important}
.pm-review-duty-status.status-button.declined{color:#ff4d4d!important}
@keyframes pm-review-dot-breathe{0%,100%{opacity:.58;transform:scale(.82)}45%{opacity:1;transform:scale(1)}}
.pm-review-duty-status.status-button i{animation:pm-review-dot-breathe 1.45s ease-in-out infinite!important;transform-origin:center}
.pm-review-duty-status.status-button::after{animation:pm-review-dot-breathe 1.45s ease-in-out .18s infinite!important;transform-origin:center!important}
@media(prefers-reduced-motion:reduce){.pm-review-duty-status.status-button i,.pm-review-duty-status.status-button::after{animation:none!important;opacity:1!important;transform:none!important}}
.pm-review-duty-status.status-button.field-report::after{display:none!important;content:none!important;animation:none!important}
.pm-review-duty-status.status-button.field-report i{top:10px!important}
.pm-review-duty-status.status-button.approved,
.pm-review-duty-status.status-button.declined{width:28px!important;height:38px!important;border-right:4px solid currentColor!important;border-radius:0 3px 3px 0!important}
.pm-review-duty-status.status-button.approved::before,
.pm-review-duty-status.status-button.declined::before{display:block!important;content:""!important;position:absolute!important;top:7px!important;left:6px!important;width:10px!important;height:10px!important;border-radius:50%!important;background:currentColor!important;animation:pm-review-dot-breathe 1.45s ease-in-out infinite!important}
.pm-review-duty-status.status-button.approved::after,
.pm-review-duty-status.status-button.declined::after{display:block!important;content:""!important;position:absolute!important;top:21px!important;left:8px!important;width:7px!important;height:7px!important;border-radius:50%!important;background:currentColor!important;animation:pm-review-dot-breathe 1.45s ease-in-out .18s infinite!important;transform-origin:center!important}
@media(prefers-reduced-motion:reduce){.pm-review-duty-status.status-button.approved::before,.pm-review-duty-status.status-button.approved::after,.pm-review-duty-status.status-button.declined::before,.pm-review-duty-status.status-button.declined::after{animation:none!important;opacity:1!important;transform:none!important}}
.pm-review-duty-status.status-button.approved,
.pm-review-duty-status.status-button.declined{width:22px!important;height:30px!important;border-right:0!important;border-radius:0!important;background:transparent!important}
.pm-review-duty-status.status-button.approved::before,
.pm-review-duty-status.status-button.declined::before{top:6px!important;left:7px!important}
.pm-review-duty-status.status-button.approved::after,
.pm-review-duty-status.status-button.declined::after{top:20px!important;left:9px!important}
.pm-review-duty-status.status-button.approved,
.pm-review-duty-status.status-button.declined{width:22px!important;background:transparent!important;border:0!important;overflow:visible!important}
.pm-review-duty-status.status-button.approved i,
.pm-review-duty-status.status-button.declined i,
.pm-review-duty-status.status-button.approved::after,
.pm-review-duty-status.status-button.declined::after{background:var(--green)!important}
.pm-review-duty-status.status-button.approved::before,
.pm-review-duty-status.status-button.declined::before{display:none!important;content:none!important}
.pm-review-status-rail{position:absolute;top:0;right:-10px;width:4px;height:30px;border-radius:999px;background:currentColor}
body .pm-review-duty-status.status-button.declined{color:#ff4d4d!important}
body .pm-review-duty-status.status-button.declined i,
body .pm-review-duty-status.status-button.declined::after{background:#3b82f6!important}
.pm-review-declined .pm-review-duty-status.status-button.declined .pm-review-status-rail{background:#ff2f2f!important}

/* Impeccable shape: compact review sheet with a clear reading order. */
.pm-review-record-backdrop{padding:16px!important;background:color-mix(in srgb,#071019 58%,transparent)!important}
.pm-review-record{width:min(540px,100%)!important;max-height:min(720px,calc(100vh - 32px))!important;padding:20px!important;border:1px solid color-mix(in srgb,var(--line) 80%,transparent)!important;border-radius:22px!important;background:var(--surface)!important;box-shadow:0 24px 70px color-mix(in srgb,#000 42%,transparent)!important}
.pm-review-record>header{align-items:flex-start!important;gap:14px!important;padding-bottom:14px!important}
.pm-review-record>header>div{min-width:0}
.pm-review-record .pm-review-inspector-label{margin:0 0 6px!important;font-size:10px!important;line-height:1.2!important;letter-spacing:.12em!important}
.pm-review-record h2{max-width:360px!important;margin:0!important;font-size:clamp(24px,5vw,30px)!important;line-height:1.04!important;letter-spacing:-.035em!important}
.pm-review-record>header .btn{min-height:40px!important;padding:8px 18px!important;border-radius:999px!important;flex:0 0 auto}
.pm-review-record .pm-review-duty-actions{display:flex!important;gap:8px!important;margin-top:8px!important}
.pm-review-record .pm-review-duty-actions .btn{flex:1!important;min-height:42px!important;padding:9px 12px!important;border-radius:12px!important;font-size:12px!important}
@media(max-width:560px){
  .pm-review-record-backdrop{padding:10px!important}
  .pm-review-record{max-height:calc(100vh - 20px)!important;padding:16px!important;border-radius:20px!important}
  .pm-review-record h2{font-size:25px!important}
  .pm-review-record>header .btn{min-height:38px!important;padding-inline:14px!important}
  .pm-review-record .pm-review-duty-actions{gap:6px!important}
  .pm-review-record .pm-review-duty-actions .btn{min-height:40px!important;padding-inline:8px!important}
}

/* Review sheet v2: decision-first, compact and theme-safe. */
.pm-review-record-backdrop{place-items:center!important;padding:14px!important;backdrop-filter:blur(5px)}
.pm-review-record{position:relative!important;width:min(520px,100%)!important;padding:22px!important;overflow:auto!important;border-radius:22px!important;box-shadow:0 28px 90px rgba(0,0,0,.38),inset 0 3px 0 var(--brand-2)!important}
.pm-review-record>header{display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important;align-items:start!important;gap:16px!important;padding:2px 0 18px!important}
.pm-review-record>header>div{display:grid!important;gap:9px!important}
.pm-review-record h2{max-width:390px!important;font-size:clamp(25px,5vw,31px)!important;line-height:1.02!important}
.pm-review-record .pm-review-inspector-label{display:inline-flex!important;align-items:center!important;justify-self:start!important;max-width:100%!important;margin:0!important;padding:6px 9px!important;border-radius:999px!important;color:var(--brand-2)!important;background:color-mix(in srgb,var(--brand-2) 11%,transparent)!important;font-family:inherit!important;font-size:10px!important;font-weight:800!important;line-height:1.15!important;letter-spacing:.055em!important;white-space:normal!important}
.pm-review-record-close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:12px;color:var(--text);background:var(--surface-container-low);cursor:pointer;transition:background-color .16s ease,transform .16s ease}
.pm-review-record-close:hover{background:color-mix(in srgb,var(--brand-2) 10%,var(--surface-container-low));transform:translateY(-1px)}
.pm-review-record-close:focus-visible{outline: 3px solid var(--focus-ring);outline-offset:2px}
.pm-review-record-close .material-symbols-outlined{font-size:20px}
.pm-review-record-meta{border-top:1px solid var(--line)!important;padding:14px 0!important}
.pm-review-record .pm-review-duty-actions{margin-top:14px!important}
.pm-review-record .review-action-stack{display:grid!important;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;gap:9px!important;width:100%!important}
.pm-review-record .review-action-stack .btn{min-height:44px!important;border-radius:13px!important;font-size:12px!important;font-weight:850!important}
.pm-review-record .review-action-stack .review-approve{border-color:color-mix(in srgb,var(--green) 55%,var(--line))!important;color:#fff!important;background:var(--green)!important}
.pm-review-record .review-action-stack .review-decline{border-color:#c9362f!important;color:#fff!important;background:#c9362f!important}
.pm-review-record .review-action-stack .review-approve:hover{background:color-mix(in srgb,var(--green) 88%,#000)!important}
.pm-review-record .review-action-stack .review-decline:hover{background:#ad2c27!important}
body.dark .pm-review-record{box-shadow:0 28px 90px rgba(0,0,0,.64),inset 0 3px 0 #6ea5ce!important}
body.dark .pm-review-record .pm-review-inspector-label{color:#b9d8ef!important;background:rgba(110,165,206,.13)!important}
@media(max-width:560px){
  .pm-review-record-backdrop{padding:8px!important}
  .pm-review-record{width:100%!important;max-height:calc(100dvh - 16px)!important;padding:18px!important;border-radius:20px!important}
  .pm-review-record>header{grid-template-columns:minmax(0,1fr) 38px!important;gap:12px!important;padding-bottom:15px!important}
  .pm-review-record-close{width:38px;height:38px}
  .pm-review-record .review-action-stack{grid-template-columns:.8fr 1.2fr!important}
}
@media(max-width:350px){.pm-review-record .review-action-stack{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.pm-review-record-close{transition:none!important}}

.pm-review-record-instruction,.pm-review-record-response,.pm-review-record-awaiting{margin-top:14px;border-radius:14px}
.pm-review-record-instruction{padding:13px 15px;border:1px solid var(--line);background:var(--surface-container-low)}
.pm-review-record-instruction>span,.pm-review-record-awaiting>span{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pm-review-record-instruction p{margin:7px 0 0;color:var(--text);font-size:13px;line-height:1.45}
.pm-review-record-response{padding:15px;border:1px solid color-mix(in srgb,var(--brand-2) 30%,var(--line));background:color-mix(in srgb,var(--brand-2) 7%,var(--surface))}
.pm-review-record-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pm-review-record-section-head span{color:var(--brand-2);font-size:12px;font-weight:850}
.pm-review-record-section-head strong{color:var(--muted);font-size:10px;font-weight:700}
.pm-review-record-response>p{margin:12px 0 14px;color:var(--text);font-size:14px;font-weight:650;line-height:1.48}
.pm-review-record-response dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.pm-review-record-response dl>div{min-width:0;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--brand-2) 18%,var(--line))}
.pm-review-record-response dt{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pm-review-record-response dd{overflow:hidden;margin:4px 0 0;color:var(--text);font-size:12px;font-weight:750;line-height:1.35;text-overflow:ellipsis}
.pm-review-record-awaiting{display:grid;gap:6px;padding:14px 15px;border:1px dashed color-mix(in srgb,var(--amber) 55%,var(--line));background:color-mix(in srgb,var(--amber) 7%,var(--surface))}
.pm-review-record-awaiting strong{font-size:13px}
body.dark .pm-review-record-response{border-color:var(--outline-variant);background:var(--surface-container-lowest)}
body.dark .pm-review-record-instruction{background:var(--surface-container-lowest)}
body.dark .pm-review-record-section-head span{color:#9ec7e5}
@media(max-width:390px){.pm-review-record-response dl{grid-template-columns:1fr}.pm-review-record-section-head{align-items:flex-start;flex-direction:column;gap:4px}}

/* Site Engineer My Duties: action-first field workflow. */
.se-duty-page{width:min(820px,100%);margin:0 auto;padding:4px 0 28px}
.se-duty-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:12px 2px 20px}
.se-duty-header h1{margin:0;color:var(--ink);font-size:clamp(30px,6vw,46px);line-height:1;letter-spacing:-.04em}
.se-duty-header p{max-width:560px;margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.se-duty-header-actions{display:flex;align-items:center;gap:8px;flex:none}
.se-duty-preview-button{min-height:42px!important;padding:8px 12px!important;border-radius:12px!important;font-size:11px!important}
.se-duty-total{display:grid;place-items:center;min-width:42px;height:42px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--surface-container-lowest);font-size:18px;font-weight:850;font-variant-numeric:tabular-nums}
.se-duty-preview-note{margin:0 0 14px;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--amber) 65%,var(--line));border-radius:12px;color:var(--muted);background:color-mix(in srgb,var(--amber) 6%,transparent);font-size:11px;line-height:1.4}
.se-duty-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:18px;padding:4px;border:1px solid var(--line);border-radius:16px;background:var(--surface-container-low)}
.se-duty-tabs button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:46px;padding:8px 12px;border:0;border-radius:12px;color:var(--muted);background:transparent;font:inherit;font-weight:750;cursor:pointer;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.se-duty-tabs button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se-duty-tabs button b{display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:9px;color:inherit;background:color-mix(in srgb,currentColor 9%,transparent);font-size:12px;font-variant-numeric:tabular-nums}
.se-duty-tabs button.is-active{color:var(--ink);background:var(--surface-container-lowest);box-shadow:0 6px 18px rgba(15,33,27,.08)}
.se-duty-tabs button:focus-visible{outline: 3px solid var(--focus-ring);outline-offset:2px}
.se-duty-worklist{display:grid;gap:12px}
.se-duty-row{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface-container-lowest);box-shadow:0 10px 30px rgba(19,40,32,.06)}
.se-duty-row-main{padding:17px 18px 15px}
.se-duty-row-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.se-duty-project{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.se-duty-row h2{margin:0;color:var(--ink);font-size:19px;line-height:1.2;letter-spacing:-.015em}
.se-duty-priority{flex:none;padding:6px 9px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:var(--surface-container-low);font-size:10px;font-weight:850}
.se-duty-instruction{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.se-duty-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.se-duty-facts span{min-width:0;color:var(--ink);font-size:13px;font-weight:700;overflow-wrap:anywhere}
.se-duty-facts b{display:block;margin-bottom:4px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.se-duty-correction-note{margin-top:15px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--red) 36%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--red) 7%,var(--surface-container-lowest))}
.se-duty-correction-note b{color:var(--red);font-size:11px}
.se-duty-correction-note p{margin:5px 0 0;color:var(--ink);font-size:13px;line-height:1.45}
.se-duty-row footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px 11px 18px;border-top:1px solid var(--line);background:var(--surface-container-low)}
.se-duty-status{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:12px;font-weight:750}
.se-duty-status i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-2) 12%,transparent)}
.se-duty-row.is-correction .se-duty-status i{background:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 12%,transparent)}
.se-duty-row.is-awaiting-review .se-duty-status i{background:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 14%,transparent)}
.se-duty-row footer .btn{min-height:40px;padding:8px 14px;border-radius:12px;font-size:12px}
.se-duty-row.is-correction footer .btn{background:var(--red)}
.se-duty-row.is-preview{border-style:dashed}
.se-duty-row footer .btn:disabled{cursor:default;opacity:.56;transform:none!important}
.se-duty-empty{display:grid;justify-items:start;gap:7px;padding:24px 2px;border-top:1px solid var(--line)}
.se-duty-empty h2{margin:0;color:var(--ink);font-size:19px}
.se-duty-empty p{max-width:480px;margin:0;color:var(--muted);font-size:14px;line-height:1.5}
body.dark .se-duty-tabs{background:var(--surface-container-lowest)}
body.dark .se-duty-tabs button.is-active{background:var(--surface-container);box-shadow:none}
body.dark .se-duty-row{box-shadow:none}
body.dark .se-duty-correction-note{background:rgba(196,77,67,.09)}
@media(max-width:560px){
  .se-duty-page{padding-top:0}
  .se-duty-header{padding:10px 4px 18px}
  .se-duty-header h1{font-size:34px}
  .se-duty-header p{font-size:14px}
  .se-duty-header-actions{align-items:flex-end;flex-direction:column-reverse}
  .se-duty-preview-button{min-height:36px!important;padding:6px 9px!important}
  .se-duty-total{min-width:38px;height:38px;border-radius:12px;font-size:16px}
  .se-duty-tabs{position:sticky;top:0;z-index:4;margin-inline:-2px}
  .se-duty-tabs button{padding-inline:10px;font-size:13px}
  .se-duty-row-main{padding:15px}
  .se-duty-row h2{font-size:17px}
  .se-duty-facts{grid-template-columns:1fr 1fr;gap:10px}
  .se-duty-row footer{padding-left:15px}
}
@media(max-width:360px){.se-duty-tabs button span{font-size:12px}.se-duty-facts{grid-template-columns:1fr}.se-duty-row footer{align-items:stretch;flex-direction:column}.se-duty-row footer .btn{width:100%}}
/* Site Engineer reports live inside My duties rather than a separate route. */
.se-duty-reports{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.se-duty-reports>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.se-duty-reports h2{margin:3px 0 4px;color:var(--ink);font-size:20px;letter-spacing:-.02em}
.se-duty-reports header p{margin:0;color:var(--muted);font-size:13px}
.se-duty-report-count{display:grid;place-items:center;min-width:34px;height:30px;border-radius:10px;background:var(--surface-container-low);color:var(--ink);font-weight:800}
.se-duty-report-list{display:grid;gap:0;border-top:1px solid var(--line)}
.se-duty-report-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.se-duty-report-main{display:flex;align-items:flex-start;gap:10px;min-width:0}
.se-duty-report-mark{width:8px;height:8px;flex:none;margin-top:6px;border-radius:50%;background:var(--muted)}
.se-duty-report-mark.approved,.se-duty-report-mark.green{background:var(--green)}
.se-duty-report-mark.returned,.se-duty-report-mark.declined{background:var(--red)}
.se-duty-report-main strong{display:block;color:var(--ink);font-size:14px}
.se-duty-report-main p,.se-duty-report-main small{display:block;margin:3px 0 0;color:var(--muted);font-size:12px}
.se-duty-report-actions{display:flex;align-items:center;gap:8px;flex:none}
.se-duty-report-actions .btn{min-height:34px;padding:7px 10px;border-radius:10px;font-size:12px}
.se-duty-report-empty{display:grid;gap:8px;padding:18px 0;color:var(--muted);font-size:13px}
.se-duty-report-empty strong{color:var(--ink);font-size:15px}
.se-duty-report-empty .btn{width:max-content;margin-top:3px}
@media(max-width:560px){.se-duty-report-row{align-items:flex-start}.se-duty-report-actions{flex-direction:column;align-items:flex-end}.se-duty-report-actions .pill{font-size:10px}.se-duty-report-actions .btn{min-height:32px}.se-duty-reports{margin-top:18px}}
.role-site-engineer .se-duty-page {
  max-width: 760px;
}

.role-site-engineer .se-duty-header {
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 16px;
}

.role-site-engineer .se-duty-header h1 {
  margin-bottom: 6px;
}

.role-site-engineer .se-duty-header p {
  max-width: 560px;
}

.role-site-engineer .se-duty-tabs {
  display: flex;
  gap: 8px;
  padding: 5px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
}

.role-site-engineer .se-duty-tabs button {
  flex: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.role-site-engineer .se-duty-tabs button:hover {
  color: var(--text);
}

.role-site-engineer .se-duty-tabs button:active {
  transform: scale(.98);
}

.role-site-engineer .se-duty-tabs button.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
}

.role-site-engineer .se-duty-tabs button b {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: .78rem;
}

.role-site-engineer .se-duty-tabs button.is-active b {
  color: var(--on-accent);
  background: var(--accent);
}

.role-site-engineer .se-duty-worklist {
  display: grid;
  gap: 0;
}

.role-site-engineer .se-duty-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.role-site-engineer .se-duty-row:first-child {
  border-top: 1px solid var(--line);
}

.role-site-engineer .se-duty-row-main {
  padding: 17px 0 14px;
}

.role-site-engineer .se-duty-row-heading h2 {
  font-size: 1rem;
}

.role-site-engineer .se-duty-row footer {
  padding: 0 0 15px;
}

.role-site-engineer .se-duty-reports {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}


/* ---------------------------------------------------------------------------
   Focus visibility (WCAG 1.4.11). The former ring was rgba(0,108,69,.34),
   which composited to 1.70:1 on light, 1.30:1 on dark and 1.12:1 on gray --
   below the 3:1 minimum, and practically invisible on the dark themes.
   These opaque per-theme rings measure 6.3:1+ against every surface they sit
   on. resolvedTheme() always toggles the explicit classes, so class selectors
   are authoritative for system theme too.
--------------------------------------------------------------------------- */
:root { --focus-ring: #0f6848; }
html.dark, body.dark { --focus-ring: #d6d6df; }

/* Text fields drew a .12-.14 alpha glow that all but vanished on dark/gray.
   Keep the soft glow for mouse focus, but give keyboard focus a real ring. */
.search input:focus-visible, .control:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--focus-ring);
}

/* ---------------------------------------------------------------------------
   Touch ergonomics. This is a field app used one-handed, often with gloves,
   and several icon-sized controls (32px .btn-icon, the 27px-tall switches)
   sit inside larger clickable cards, so a near-miss hits the card instead of
   the control. Grow the hit area to 44px on touch pointers only, without
   moving a single pixel of the visual design.
--------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn-icon, .wa-switch, .notif-switch { position: relative; }
  .btn-icon::after, .wa-switch::after, .notif-switch::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* ---------------------------------------------------------------------------
   Sticky hover on touch. None of the 89 :hover rules were guarded, so on a
   phone the hover state latches after a tap and the element stays lifted
   until you tap somewhere else -- most visible on the cards and buttons that
   translate on hover. Touch pointers get no hover intent, so neutralise just
   the movement there; the colour changes are harmless and still read as
   press feedback.
--------------------------------------------------------------------------- */
@media (hover: none) {
  .dw-prio:hover .dw-prio-btn,
  .btn:hover,
  .project-directory-card:hover,
  .project-join-card .btn:hover,
  .project-cockpit-action:hover,
  .project-command-action:hover,
  .card:hover,
  .btn.secondary:hover,
  .kpi.kpi-link:hover,
  .notify-button:hover,
  .route-notifications .notification-inbox-item:hover .notification-inbox-action .material-symbols-outlined,
  .route-notifications .notification-timeline-content:hover .notification-timeline-open .material-symbols-outlined,
  .route-notifications .notification-signal-event:hover .notification-signal-event-open .material-symbols-outlined,
  .route-notifications .notification-workbench-primary:hover .material-symbols-outlined,
  .pm-review-step:hover,
  .pm-review-record-close:hover,
  .project-card.is-clickable:hover,
  .dataio-export-btn:hover {
    transform: none;
  }
}

/* Project directory — compact scan first, focused management in the sheet. */
.pd-shell{width:min(100%,880px);margin:0 auto;padding:22px 18px 110px;color:var(--ink)}
.pd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:8px 2px 22px;border-bottom:1px solid var(--line)}
.pd-head h1{margin:4px 0 6px;font-size:clamp(1.75rem,5vw,2.35rem);line-height:1.05;letter-spacing:-.035em}.pd-head p{max-width:520px;margin:0;color:var(--muted);line-height:1.5}.pd-head .btn{flex:0 0 auto;min-height:44px;gap:8px}.pd-head .btn svg{width:18px;height:18px}
.pd-list-head{display:flex;align-items:center;justify-content:space-between;padding:22px 4px 10px}.pd-list-head b{font-size:.8rem;letter-spacing:.02em}.pd-list-head span{display:grid;min-width:26px;height:26px;padding:0 8px;place-items:center;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.75rem;font-weight:800}
.pd-list{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pd-row{width:100%;min-height:76px;display:grid;grid-template-columns:44px minmax(0,1fr) auto 20px;align-items:center;gap:14px;padding:13px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer}.pd-row:last-child{border-bottom:0}.pd-row:hover{background:color-mix(in srgb,var(--primary) 5%,var(--surface))}.pd-row:focus-visible{position:relative;z-index:1;outline:3px solid color-mix(in srgb,var(--primary) 38%,transparent);outline-offset:-3px}.pd-row.is-current{background:color-mix(in srgb,var(--primary) 7%,var(--surface))}.pd-row.is-current .pd-row-icon{background:var(--primary);color:#fff}.pd-row.is-archived{opacity:.67}
.pd-row-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:12px;background:var(--surface-2);color:var(--primary)}.pd-row-icon svg{width:20px;height:20px}.pd-row-copy{min-width:0;min-height:44px;display:grid;align-content:center;gap:3px}.pd-row-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.98rem;line-height:1.2}.pd-row-copy small{display:flex;align-items:center;color:var(--muted);font-size:.74rem}.pd-status{padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.68rem;font-weight:800}.pd-row.is-current .pd-status{border-color:color-mix(in srgb,var(--success) 45%,var(--line));color:var(--success)}.pd-chevron{width:18px;height:18px;color:var(--muted)}
.pd-empty{width:min(100%,540px);margin:64px auto;padding:42px 24px;text-align:center}.pd-empty>span{display:grid;width:56px;height:56px;margin:0 auto 18px;place-items:center;border-radius:14px;background:var(--surface-2);color:var(--primary)}.pd-empty>span svg{width:26px}.pd-empty h1{margin:0 0 8px}.pd-empty p{margin:0 auto 22px;color:var(--muted);line-height:1.5}
.pds-more{position:relative;min-width:128px}.pds-more summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:800;cursor:pointer;list-style:none}.pds-more summary::-webkit-details-marker{display:none}.pds-more summary:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 38%,transparent);outline-offset:2px}.pds-more>div{position:absolute;right:0;bottom:calc(100% + 8px);z-index:5;width:210px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 14px 34px rgba(10,31,53,.16)}.pds-more>div button{width:100%;min-height:42px;padding:9px 11px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:.84rem;font-weight:700;text-align:left;cursor:pointer}.pds-more>div button:hover{background:var(--surface-2)}.pds-more>div button.is-danger{color:var(--danger)}
@media(max-width:620px){.pd-shell{padding:14px 12px 96px}.pd-head{align-items:flex-start}.pd-head p{font-size:.86rem}.pd-head .btn{width:44px;padding:0;justify-content:center}.pd-head .btn span{display:none}.pd-list{border-radius:14px}.pd-row{grid-template-columns:42px minmax(0,1fr) auto;padding:12px;gap:11px}.pd-row-icon{width:42px;height:42px}.pd-chevron{display:none}.pd-status{padding:4px 7px}.pd-row-copy small{gap:6px}.pm-sheet-project-actions{grid-template-columns:minmax(0,1fr) 128px}}
@media(prefers-reduced-motion:reduce){.pd-row{scroll-behavior:auto}}
.pd-head .eyebrow{display:none}.pds-more>div button{min-height:44px}

/* Instant confirmation on "Set active": the tap turns the button green right
   away instead of leaving it unchanged while the project switch and re-render
   happen. */
/* Selector is deliberately heavier than `body.dark .btn.secondary` (0,3,1),
   which also uses !important and would otherwise keep the button grey. --success
   is not defined anywhere, so the green is literal. */
body .btn.is-confirming,
body.dark .btn.is-confirming,
body .btn.secondary.is-confirming,
body.dark .btn.secondary.is-confirming{
  background:#1f9d55!important;
  border-color:#1f9d55!important;
  color:#fff!important;
  transform:scale(.98);
  transition:background .16s ease,border-color .16s ease,transform .16s ease
}
/* Copy confirmation sits NEXT TO the code instead of replacing it. */
.copy-flash{display:inline-flex;align-items:center;gap:5px;margin-left:8px;color:var(--success,#1f9d55);font-size:.74rem;font-weight:800;animation:pdFadeIn .18s ease both}
.copy-flash svg{width:14px;height:14px}
.is-copied{outline:2px solid color-mix(in srgb,var(--success,#1f9d55) 55%,transparent);outline-offset:2px;border-radius:12px}

/* Join and leave requests are separate tables, each with its own heading and
   colour, so two opposite decisions can never be read as one list. */
.pdp-request-groups{display:grid;gap:16px}
.pdp-request-group{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.pdp-request-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.88rem}
.pdp-request-group.is-join .pdp-request-title{background:color-mix(in srgb,#3b82f6 12%,var(--surface))}
.pdp-request-group.is-leave .pdp-request-title{background:color-mix(in srgb,#f59e0b 14%,var(--surface))}
.pdp-request-count{display:grid;min-width:24px;height:24px;padding:0 8px;place-items:center;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.72rem;font-weight:800}

/* The header and list frame settle in first, so the cards land into a finished
   shell rather than appearing alongside it. (The cards' own cascade lives with
   the .pd-row rule further down, where it can override the base styles.) */
@keyframes pdFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pd-head,.pd-list-head{animation:pdFadeIn .34s cubic-bezier(.16,1,.3,1) both}
.pd-list-head{animation-delay:.05s}
.pd-list{animation:pdFadeIn .36s cubic-bezier(.16,1,.3,1) both;animation-delay:.08s}
.content.route-slide-none .pd-head,
.content.route-slide-none .pd-list-head,
.content.route-slide-none .pd-list,
.content.route-slide-none .pd-row,
.content.route-slide-none .pd-row.is-current::after{animation:none!important}
@media(prefers-reduced-motion:reduce){
  .pd-head,.pd-list-head,.pd-list,.pd-row{animation:none}
}

/* Project directory: semantic color and purposeful state motion. */
.pd-shell,.pdp-shell{
  --pd-blue:#236aa1;
  --pd-blue-soft:#eaf4fb;
  --pd-active:#123f62;
  --pd-active-deep:#0c304c;
  --pd-active-accent:#58dc9a;
  --pd-archive:#9a6416;
  --pd-archive-soft:#fff4df;
}
.pd-list{background:color-mix(in srgb,var(--pd-blue-soft) 22%,var(--surface));box-shadow:0 18px 42px -34px rgba(18,63,98,.55)}
.pd-row{position:relative;isolation:isolate;transition:background-color 180ms ease,color 180ms ease,transform 180ms cubic-bezier(.16,1,.3,1)}
.pd-row:hover{background:color-mix(in srgb,var(--pd-blue-soft) 70%,var(--surface));transform:translateX(3px)}
.pd-row:active{transform:translateX(1px) scale(.995)}
.pd-row-icon{background:var(--pd-blue-soft);color:var(--pd-blue);transition:background-color 180ms ease,color 180ms ease,transform 220ms cubic-bezier(.16,1,.3,1)}
.pd-row:hover .pd-row-icon{transform:scale(1.06)}
.pd-row.is-current{overflow:hidden;background:linear-gradient(112deg,var(--pd-active),var(--pd-active-deep));color:#fff}
.pd-row.is-current::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.12) 48%,transparent 70%);transform:translateX(-115%);animation:pd-active-signal 650ms 180ms cubic-bezier(.16,1,.3,1) both;pointer-events:none}
.pd-row.is-current:hover{background:linear-gradient(112deg,#174f78,var(--pd-active-deep));color:#fff}
.pd-row.is-current .pd-row-icon{background:var(--pd-active-accent);color:#073824}
.pd-row.is-current .pd-row-copy small,.pd-row.is-current .pd-chevron{color:#d9edf8}
.pd-row.is-current .pd-row-copy i{background:var(--pd-active-accent)}
.pd-row.is-current .pd-status{border-color:rgba(88,220,154,.55);background:rgba(7,47,38,.38);color:#bff7d9}
.pd-row.is-current .pd-status::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--pd-active-accent);box-shadow:0 0 0 3px rgba(88,220,154,.14)}
.pd-row.is-current:focus-visible{outline:3px solid #fff;outline-offset:-4px;box-shadow:0 0 0 3px var(--pd-active-accent)}
.pd-row.is-archived{opacity:1;background:color-mix(in srgb,var(--pd-archive-soft) 46%,var(--surface))}
.pd-row.is-archived .pd-row-icon{background:var(--pd-archive-soft);color:var(--pd-archive)}
.pd-row.is-archived .pd-status{border-color:color-mix(in srgb,var(--pd-archive) 34%,var(--line));background:var(--pd-archive-soft);color:#70470d}
.pd-row:not(.is-current):not(.is-archived) .pd-status{border-color:color-mix(in srgb,var(--pd-blue) 25%,var(--line));background:var(--pd-blue-soft);color:#174f78}
/* Cards deal themselves out top-to-bottom every time the page opens. The delay
   comes from --pd-i (set inline per row in app.js), so the cascade keeps working
   past the fourth card instead of flattening out like the old nth-child list. */
.pd-row{animation:pd-row-arrive 420ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(120ms + min(var(--pd-i,0) * 85ms, 680ms))}
.pm-project-sheet{animation-duration:360ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.pds-more[open]>div{transform-origin:bottom right;animation:pds-menu-in 160ms cubic-bezier(.16,1,.3,1) both}
body.dark .pd-shell,body.dark .pdp-shell{--pd-blue:#72b7e8;--pd-blue-soft:#152f43;--pd-active:#195276;--pd-active-deep:#0d334e;--pd-active-accent:#67e6a7;--pd-archive:#e4aa52;--pd-archive-soft:#3b2d19}
body.dark .pd-row.is-archived .pd-status{color:#ffdca5}body.dark .pd-row:not(.is-current):not(.is-archived) .pd-status{color:#badef5}
/* Starts fully transparent and a little lower, so each card is clearly seen to
   arrive. The old 0.7 start made the cascade almost invisible. */
@keyframes pd-row-arrive{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes pd-active-signal{to{transform:translateX(115%)}}
@keyframes pds-menu-in{from{opacity:.5;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pd-row,.pd-row.is-current::after,.pds-more[open]>div{animation:none}.pd-row,.pd-row-icon{transition:none}.pd-row:hover,.pd-row:active{transform:none}}

/* Full project page — the directory is navigation, not a disclosure drawer. */
.pdp-shell{width:min(100%,980px);margin:0 auto;padding:14px 18px 110px;color:var(--ink);animation:pdp-page-in 320ms cubic-bezier(.16,1,.3,1) both}
.pdp-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.pdp-back{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--primary);font:inherit;font-weight:800;cursor:pointer}.pdp-back svg{width:20px;height:20px}.pdp-back:hover{background:var(--pd-blue-soft)}.pdp-back:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 38%,transparent);outline-offset:2px}.pdp-actions{display:flex;align-items:center;gap:8px}.pdp-actions>.btn{min-height:44px}.pdp-actions .pds-more{min-width:116px}
.pdp-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:28px;border-radius:16px;background:var(--pd-blue-soft);color:var(--ink)}.pdp-hero.is-current{background:linear-gradient(112deg,var(--pd-active),var(--pd-active-deep));color:#fff}.pdp-hero.is-archived{background:var(--pd-archive-soft)}.pdp-status{display:inline-flex;margin-bottom:12px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.76);color:var(--pd-blue);font-size:.7rem;font-weight:900}.pdp-hero.is-current .pdp-status{background:rgba(7,47,38,.42);color:#bff7d9}.pdp-hero.is-archived .pdp-status{color:#70470d}.pdp-hero h1{margin:0 0 7px;font-size:clamp(1.8rem,5vw,2.65rem);line-height:1.05;letter-spacing:-.035em}.pdp-hero p{margin:0;max-width:54ch;color:inherit;opacity:.76}
.pdp-code{min-width:220px;display:grid;grid-template-columns:1fr auto;gap:5px 14px;padding:15px 16px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:rgba(255,255,255,.92);color:#123f62;text-align:left;cursor:pointer}.pdp-code span{grid-column:1/-1;font-size:.69rem;font-weight:800;opacity:.7}.pdp-code code{font-size:.85rem;font-weight:900}.pdp-code svg{width:18px;height:18px}.pdp-code:focus-visible{outline:3px solid var(--pd-active-accent);outline-offset:3px}.pdp-code-row{display:flex;align-items:center;gap:12px;flex:none;margin-top:30px}

    /* Full-screen QR, the moment the code is actually used: one phone held up,
       another pointed at it. ------------------------------------------------ */
    .qr-scan-overlay {
      position: fixed;
      inset: 0;
      /* Above the app shell and the AI sheet (z-index 120), because this is a
         hold-it-up-to-a-camera surface — nothing should sit over it. */
      z-index: 150;
      display: grid;
      place-items: center;
      padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
      overflow: auto;                 /* last resort on a very short viewport */
      background: rgba(6, 14, 20, .82);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      animation: qrScanIn .22s ease-out both;
      cursor: pointer;
    }
    .qr-scan-overlay.closing { animation: qrScanOut .2s ease-in both; pointer-events: none; }
    @keyframes qrScanIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes qrScanOut { from { opacity: 1; } to { opacity: 0; } }
    .qr-scan-card {
      display: grid;
      justify-items: center;
      gap: 14px;
      padding: 20px;
      border-radius: 22px;
      /* Always white, never the theme: a scanner expects dark modules on a
         light ground, and the quiet zone has to stay light too. */
      background: #fff;
      box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
      transform-origin: center;
      cursor: default;
    }
    .qr-scan-art {
      /* As large as the screen allows, capped on THREE axes. The 62vh term is
         not redundant with vmin: a phone held sideways is 844x390, so vmin is
         the height and 78vmin still left a 416px card in a 390px viewport —
         the code and hint below it fell off the bottom. 62vh leaves room for
         the card's own padding, the code line and the hint. */
      width: min(78vmin, 74vw, 62vh, 420px);
      height: min(78vmin, 74vw, 62vh, 420px);
    }
    .qr-scan-art svg { display: block; width: 100%; height: 100%; }
    .qr-scan-code {
      font-family: var(--font-mono, ui-monospace, Menlo, monospace);
      font-size: clamp(15px, 4.4vw, 20px);
      font-weight: 800;
      letter-spacing: .12em;
      color: #10243a;
      cursor: text;
      user-select: all;
    }
    .qr-scan-hint { margin: 0; color: #5b6b7a; font-size: 12.5px; font-weight: 650; text-align: center; }
    .qr-scan-close {
      position: absolute;
      top: max(14px, env(safe-area-inset-top, 0px));
      right: max(14px, env(safe-area-inset-right, 0px));
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, .16);
      color: #fff;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
    }
    @media (prefers-reduced-motion: reduce) {
      .qr-scan-overlay, .qr-scan-overlay.closing { animation-duration: .01ms; }
    }

    /* Camera scanner for joining a project -------------------------------- */
    .qr-cam {
      position: fixed;
      inset: 0;
      z-index: 160;                   /* over the join dialog that opened it */
      display: grid;
      place-items: center;
      background: #05090c;
      animation: qrScanIn .2s ease-out both;
    }
    .qr-cam-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      /* cover, so the preview matches what the lens actually sees rather than
         letterboxing it — the framing guide has to mean something. */
      object-fit: cover;
      background: #05090c;
    }
    .qr-cam-frame {
      position: relative;
      width: min(68vmin, 300px);
      aspect-ratio: 1;
      /* A dimmed surround with a clear window, so it is obvious where to aim. */
      box-shadow: 0 0 0 100vmax rgba(4, 8, 12, .58);
      border-radius: 22px;
    }
    .qr-cam-frame i {
      position: absolute;
      width: 30px;
      height: 30px;
      border: 3px solid #fff;
    }
    .qr-cam-frame i:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
    .qr-cam-frame i:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
    .qr-cam-frame i:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
    .qr-cam-frame i:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
    .qr-cam-hint {
      position: absolute;
      left: 20px;
      right: 20px;
      top: calc(max(20px, env(safe-area-inset-top, 0px)) + 8px);
      margin: 0;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
    }
    .qr-cam-cancel {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(max(22px, env(safe-area-inset-bottom, 0px)) + 12px);
      min-width: 150px;
      min-height: 48px;
      padding: 0 22px;
      border: 0;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, .94);
      color: #0d1b26;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
    }
    /* The scan button in the join dialog. */
    .join-scan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; }
    .join-scan-btn svg { width: 19px; height: 19px; flex: none; }

.pdp-code-row .pdp-code{flex:1;min-width:220px}.pdp-code-qr{flex:none;width:64px;height:64px;padding:5px;border:0;border-radius:10px!important;background:#fff;cursor:pointer}.pdp-code-qr:empty{display:none}.pdp-code-qr svg{display:block;width:100%;height:100%}
.pdp-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;margin-top:18px}.pdp-overview,.pdp-team{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.pdp-overview h2,.pdp-team h2{margin:0;font-size:1.05rem}.pdp-overview dl{display:grid;gap:0;margin:14px 0 28px}.pdp-overview dl div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}.pdp-overview dt{color:var(--muted);font-size:.78rem}.pdp-overview dd{margin:0;font-weight:850;text-align:right}.pdp-systems{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.pdp-systems span{padding:7px 10px;border-radius:9px;background:var(--pd-blue-soft);color:var(--pd-blue);font-size:.75rem;font-weight:800}.pdp-team>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.pdp-team>header p{margin:5px 0 0;color:var(--muted);font-size:.82rem}.pdp-team>header>span{font-size:.75rem;font-weight:850;color:var(--muted)}.pdp-team ul{padding:0;margin:0;list-style:none}.pdp-team li{min-height:58px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}.pdp-team li:last-child{border-bottom:0}.pdp-team li>span:nth-child(2){display:grid;gap:3px}.pdp-team li small{color:var(--muted)}.pdp-team li i{font-size:.7rem;font-style:normal;font-weight:850;color:var(--success)}.pdp-team .pdp-empty{display:block;min-height:0;padding:18px 0;color:var(--muted)}
body.dark .pdp-code{background:#f4f9fc;color:#123f62}body.dark .pdp-hero.is-archived .pdp-status{background:#fff4df;color:#70470d}
@keyframes pdp-page-in{from{opacity:.72;transform:translateX(14px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:700px){.pdp-shell{padding:10px 12px 96px}.pdp-nav{align-items:flex-start}.pdp-back span{display:none}.pdp-actions{flex-wrap:wrap;justify-content:flex-end}.pdp-actions>.btn.secondary{order:3;width:100%}.pdp-hero{align-items:stretch;flex-direction:column;padding:22px 18px}.pdp-code-row{width:100%}.pdp-code{width:100%;min-width:0}.pdp-code-qr{width:56px;height:56px}.pdp-grid{grid-template-columns:1fr}.pdp-overview,.pdp-team{padding:18px 16px}}
@media(prefers-reduced-motion:reduce){.pdp-shell{animation:none}}

/* Project detail uses the same focused subpage chrome as Settings. */
.app.project-detail-mode{display:block}.app.project-detail-mode .sidebar,.app.project-detail-mode>.sidebar-backdrop,.app.project-detail-mode .topbar,.app.project-detail-mode .bottom-nav{display:none!important}.app.project-detail-mode .main{min-height:100dvh;padding-top:0!important}.app.project-detail-mode .content{display:block;width:100%;max-width:none!important;margin:0!important;padding:0!important;overflow:auto}.app.project-detail-mode .pdp-shell{width:100%;max-width:none;margin:0;padding:0 24px 56px}.app.project-detail-mode .pdp-nav{position:sticky;top:0;z-index:6;min-height:82px;margin:0 -24px 22px;padding:18px 24px;background:color-mix(in srgb,var(--surface-container-lowest) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.app.project-detail-mode .pdp-back{width:46px;height:46px;padding:0;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--surface-container-low)}.app.project-detail-mode .pdp-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.app.project-detail-mode .pdp-actions{margin-left:auto}.app.project-detail-mode .pdp-shell>main{width:min(100%,980px);margin:0 auto}
.app.project-detail-mode .pdp-shell,.app.project-detail-mode .content{animation:none!important}
@media(max-width:700px){.app.project-detail-mode .pdp-shell{padding:0 16px 36px}.app.project-detail-mode .pdp-nav{min-height:calc(72px + env(safe-area-inset-top,0px));margin:0 -16px 18px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}.app.project-detail-mode .pdp-actions>.btn.secondary{order:initial;width:auto}.app.project-detail-mode .pdp-actions>.btn{padding-inline:14px}.app.project-detail-mode .pdp-actions .pds-more{min-width:52px}.app.project-detail-mode .pdp-actions .pds-more summary{justify-content:center;padding:0}.app.project-detail-mode .pdp-actions .pds-more summary>span:first-child{display:none}}
@media(max-width:620px){.route-project:not(.project-detail-mode) .pd-shell{padding-left:4px;padding-right:4px}.route-project:not(.project-detail-mode) .pd-head,.route-project:not(.project-detail-mode) .pd-list-head{padding-left:4px;padding-right:4px}}
.app.project-detail-mode .pdp-nav{justify-content:flex-start}.app.project-detail-mode .pdp-back{width:var(--app-back-width)!important;height:var(--app-back-height)!important;border-radius:var(--app-back-radius)!important}.pdp-nav-title{position:static;min-width:0;max-width:calc(100% - 70px);overflow:hidden;margin:12px 0 0;font-size:clamp(1.375rem,4vw,1.5rem);font-weight:850;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap}.app.project-detail-mode .pdp-hero h1{display:none}@media(max-width:700px){.app.project-detail-mode .pdp-hero p{display:none}.app.project-detail-mode .pdp-status{margin-bottom:0}.app.project-detail-mode .pdp-hero{padding:16px 16px 14px;gap:14px;justify-content:flex-start}.app.project-detail-mode .pdp-code-row{margin-top:0}}.app.project-detail-mode .pdp-shell>main>.pdp-actions{display:flex;width:100%;align-items:stretch;gap:10px;margin:12px 0 18px}.app.project-detail-mode .pdp-shell>main>.pdp-actions>.btn{flex:1;min-height:48px}.app.project-detail-mode .pdp-shell>main>.pdp-actions>.pds-more{flex:1;min-width:0}.app.project-detail-mode .pdp-shell>main>.pdp-actions>.pds-more summary{min-height:48px}.pdp-active-confirm:disabled{opacity:1;border-color:color-mix(in srgb,var(--success) 45%,var(--line));background:color-mix(in srgb,var(--success) 12%,var(--surface));color:var(--success);cursor:default}
@media(max-width:560px){.app.project-detail-mode .pdp-shell>main>.pdp-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.app.project-detail-mode .pdp-shell>main>.pdp-actions>.btn.secondary:first-child{grid-column:1/-1;width:100%}.app.project-detail-mode .pdp-shell>main>.pdp-actions>.pds-more{width:100%}}
.pdp-hero{position:relative;padding-top:28px}.pdp-hero-edit{position:absolute;top:18px;right:18px;display:inline-flex;width:max-content;min-width:0;min-height:32px;padding:5px 11px;border-color:rgba(255,255,255,.5);border-radius:9px;background:rgba(255,255,255,.94);color:#123f62;font-size:.76rem;line-height:1.1;box-shadow:0 6px 14px -12px rgba(5,38,67,.75)}.pdp-hero-edit:hover{background:#fff}.pdp-hero-edit:focus-visible{outline:3px solid rgba(255,255,255,.76);outline-offset:2px}.app.project-detail-mode .pdp-shell>main>.pdp-actions{margin-top:12px}.app.project-detail-mode .pdp-shell>main>.pdp-actions>.pdp-active-confirm,.app.project-detail-mode .pdp-shell>main>.pdp-actions>[data-action="activate-project"]{width:100%;min-height:50px;flex-basis:100%;border-radius:12px}.app.project-detail-mode .pdp-shell>main>.pdp-actions>[data-action="activate-project"]{border:1px solid #2fbf78;background:color-mix(in srgb,#2fbf78 14%,var(--surface));color:#168653;font-weight:900;transition:background-color 220ms cubic-bezier(.16,1,.3,1),color 220ms ease,transform 140ms ease}.app.project-detail-mode .pdp-shell>main>.pdp-actions>[data-action="activate-project"]:active{transform:scale(.985)}.pdp-active-confirm:disabled{border-color:#2fbf78;background:#168653;color:#fff;box-shadow:0 10px 24px -18px rgba(22,134,83,.9);animation:pdp-active-set 420ms cubic-bezier(.16,1,.3,1) both}
.pdp-danger-zone{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding:20px;border:2px solid var(--red);border-radius:14px;background:color-mix(in srgb,var(--red) 7%,var(--surface));box-shadow:0 8px 22px -18px color-mix(in srgb,var(--red) 70%,transparent)}.pdp-danger-zone h2{margin:0;color:var(--red);font-size:1rem}.pdp-danger-zone p{max-width:52ch;margin:5px 0 0;color:var(--muted);font-size:.8rem;line-height:1.45}.pdp-danger-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.pdp-danger-actions button{min-height:40px;padding:8px 13px;border:1px solid var(--red);border-radius:10px;background:transparent;color:var(--red);font:inherit;font-size:.78rem;font-weight:850;cursor:pointer}.pdp-danger-actions button:hover{background:color-mix(in srgb,var(--red) 12%,var(--surface))}.pdp-danger-actions button.is-danger{background:var(--red);color:#fff}
@keyframes pdp-active-set{from{filter:saturate(.65);transform:scale(.985)}to{filter:none;transform:none}}
@media(max-width:620px){.pdp-hero{padding-top:24px}.pdp-hero-edit{top:16px;right:16px}.pdp-danger-zone{align-items:stretch;flex-direction:column;gap:14px;padding:18px}.pdp-danger-actions{display:grid;grid-template-columns:1fr;width:100%}.pdp-danger-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){.pdp-active-confirm:disabled{animation:none}.app.project-detail-mode .pdp-shell>main>.pdp-actions>[data-action="activate-project"]{transition:none}}
.wa-proj-edit input[aria-invalid="true"],.wa-single input[aria-invalid="true"],.wa-body input[aria-invalid="true"]{border-color:var(--danger)!important;outline:3px solid color-mix(in srgb,var(--danger) 22%,transparent);outline-offset:1px}
/* Project and Dashboard use the document as their single mobile scroll owner.
   The old fixed 675px .content scroller sat inside an already-scrollable page;
   touch gestures could be captured by either layer and occasionally moved
   neither, especially after a sheet closed. One vertical owner also lets the
   root modal lock reliably freeze the page behind a dialog. */
@media(max-width:980px){
  .app.route-project:not(.map-mode) .main,
  .app.route-dashboard:not(.map-mode) .main{height:auto;min-height:100dvh;overflow:visible;touch-action:pan-y}
  .app.route-project:not(.map-mode) .content,
  .app.route-dashboard:not(.map-mode) .content{height:auto!important;min-height:calc(100dvh - 56px);overflow-y:visible!important;overscroll-behavior-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  .app.project-detail-mode .content{min-height:100dvh}
}

/* A normal route must always regain the document scroller after closing a
   project sheet, modal, fullscreen sketch, or the AI page. The lock classes
   remain authoritative while those surfaces are genuinely open. */
html:not(.modal-open):not(.project-sheet-open):not(.ai-page-lock):not(.sketch-fullscreen-open){
  height:auto!important;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto!important;
  overscroll-behavior-y:auto;
  touch-action:pan-y!important;
}
/* Same unlock for body, except that body must NOT take the vertical scroll:
   <html> is the document scroller. `overflow-y:auto!important` here was the
   last rule still making body a second scroll container with nothing to
   scroll, which is what swallowed the drag on phones. */
body:not(.login-active):not(.modal-open):not(.project-sheet-open):not(.ai-scroll-locked):not(.ai-page):not(.sketch-fullscreen-open){
  height:auto!important;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:visible!important;
  overscroll-behavior-y:auto;
  touch-action:pan-y!important;
}
@supports (overflow: clip) {
  body:not(.login-active):not(.modal-open):not(.project-sheet-open):not(.ai-scroll-locked):not(.ai-page):not(.sketch-fullscreen-open){
    overflow-x:clip;
  }
}

/* One back-control silhouette across focused pages. Individual routes keep
   their own surface and border colors; only geometry, icon scale and tactile
   behavior are shared. This keeps PM, Site Engineer, map and modal navigation
   visually identical without changing wizard footer actions that say Back. */
.app button:is(
  .settings-back-btn,
  .pdp-back,
  .map-home-button,
  .teams-command-back,
  .teams-map-back,
  .directory-back,
  .flow-back,
  .inbox-back,
  .teams-role-back,
  .se-report-detail-back,
  .role-back
),
.role-onboarding-modal .role-back {
  display: inline-grid !important;
  place-items: center !important;
  width: var(--app-back-width) !important;
  min-width: var(--app-back-width) !important;
  max-width: var(--app-back-width) !important;
  height: var(--app-back-height) !important;
  min-height: var(--app-back-height) !important;
  padding: 0 !important;
  border-radius: var(--app-back-radius) !important;
  flex: 0 0 var(--app-back-width) !important;
  line-height: 0 !important;
}
.app button:is(
  .settings-back-btn,
  .pdp-back,
  .map-home-button,
  .teams-command-back,
  .teams-map-back,
  .directory-back,
  .flow-back,
  .inbox-back,
  .teams-role-back,
  .se-report-detail-back,
  .role-back
) svg,
.role-onboarding-modal .role-back svg {
  display: block;
  width: 20px !important;
  height: 20px !important;
}
.account-direction-fields{border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:1fr;gap:12px}.account-direction-fields legend{padding:0 8px;font-weight:800}.account-direction-fields small{color:var(--muted)}

    /* A duty already reported to the PM reads as delivered on the map: the
       numbered pin becomes a check on the success colour. Both states use
       tokens so the contrast holds in light and dark. */
    .map-duty-pin.is-reported span { background: var(--green, #3a9b63); }

/* AI work assist — the manager's pre-check inside the review inspector, and
   the duty-instruction drafter in the wizard. Tokens only, both themes. */
.pm-review-ai{display:grid;gap:9px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pm-review-ai-go{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 12px;font-size:11px;justify-self:start}
.pm-review-ai-go svg{width:15px;height:15px}
.pm-review-ai-note{margin:0;color:var(--muted);font-size:11.5px;line-height:1.45}
.pm-review-ai-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pm-review-ai-check{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--text,var(--ink))}
.pm-review-ai-check svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}
.pm-review-ai-check.ok svg{color:var(--green)}
.pm-review-ai-check.bad svg{color:var(--red)}
.pm-review-ai-verdict{margin:0;font-size:12.5px;color:var(--muted)}
.pm-review-ai-verdict b{color:var(--text,var(--ink))}
.pm-review-ai-verdict.bad b{color:var(--red)}
.pm-review-ai-verdict.ok b{color:var(--green)}
.pm-review-ai-comment{display:grid;gap:5px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-container-low)}
.pm-review-ai-comment span{font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pm-review-ai-comment pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:12px;line-height:1.5;color:var(--text,var(--ink))}

.dw-ai{display:grid;gap:7px;margin-top:12px}
.dw-ai-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;justify-self:start}
.dw-ai-go svg{width:17px;height:17px}
.dw-ai-note{margin:0;color:var(--muted);font-size:11.5px;line-height:1.45;max-width:56ch}
@media(max-width:560px){.dw-ai-go{width:100%}}

/* Health & Safety (buildings only). */
/* Health & Safety. A warning, never a blocker -- the owner's own decision --
   so it is styled to be noticed (amber, not red: red here is reserved for the
   card's actual severity pills) rather than to stop anything. */
.hazard-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.hazard-warning svg { width: 16px; height: 16px; flex: none; }
.se-sr-summary-hazard {
  color: var(--amber);
  font-weight: 700;
}
.se-sr-summary-hazard svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.hazard-section { margin-bottom: 16px; }
.hazard-section h2 { margin: 0 0 10px; font-size: 15px; }
.hazard-resolved summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.hazard-empty { padding: 12px 0; }
.hazard-card { display: grid; gap: 10px; margin-bottom: 10px; }
.hazard-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hazard-card-head strong { display: block; font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }
.hazard-card-action { margin: 0; font-size: 13px; color: var(--muted); }
.hazard-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.hazard-actions .btn { width: auto; }
.pill.hazard-severity-low { color: var(--muted); }
.pill.hazard-severity-medium { color: var(--amber); }
.pill.hazard-severity-high,
.pill.hazard-severity-critical { color: var(--red); }

/* The hazard dialog reuses this narrow modal shell. */
.building-generate-modal { width: min(480px, 100%); display: grid; gap: 14px; }
/* Element type + level picker (report form and hazard dialog). */
.building-group-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }