/* =============================== theme.css ====================================
   THE ONE FILE. Every font, size, weight, colour, corner, shadow and timing the
   redesigned screens use is defined here and nowhere else. `app.css` holds
   layout and components and only ever REFERS to what is below — it contains no
   font size, no weight, no colour and no radius of its own for a themed screen.

   To change how the product looks, change this file:

     · a text style     → section 1   (five styles; edit one, every use follows)
     · a font family    → section 2
     · a colour         → section 3
     · corner rounding  → section 4
     · shadows, motion  → sections 5–6

   ┌──────────┬───────┬─────────┬────────┬────────────────────────────────────┐
   │ style    │ size  │ leading │ weight │ used for                           │
   ├──────────┼───────┼─────────┼────────┼────────────────────────────────────┤
   │ display  │ 24px  │ 1.1     │ strong │ headline figures (stat tiles)      │
   │ title    │ 20px  │ 1.25    │ strong │ the page title — one per screen    │
   │ heading  │ 15px  │ 1.35    │ strong │ dialog titles, empty states,       │
   │          │       │         │        │ figures inside a detail panel      │
   │ body     │ 13px  │ 1.5     │ regular│ table cells, controls, sentences   │
   │ caption  │ 12px  │ 1.4     │ medium │ column heads, field labels, tags,  │
   │          │       │         │        │ secondary lines, counts            │
   └──────────┴───────┴─────────┴────────┴────────────────────────────────────┘

   Each style is a BUNDLE — size, leading, weight, tracking and colour — not a
   single number, so "make captions a little larger and lighter" is one edit in
   one place. A component picks a style; where it needs emphasis inside that
   style it picks a weight from section 1b. It never invents a size.

   Scope. The product is moving to this theme one screen at a time, so the
   tokens live on `.t2` rather than `:root`: a screen (or a piece of shared
   chrome) joins by carrying the class `t2`, and a screen that has not been
   reworked yet is not touched. When the last one has joined, `.t2` below
   becomes `:root` and nothing else changes.

   Nothing here computes, formats or reorders a value. It is paint. */

/* Arial, metric-matched to Inter, so text does not reflow when Inter arrives. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

.t2 {
  /* ---- 1. text styles ------------------------------------------------------ */
  --type-display-size: 24px;  --type-display-leading: 1.1;  --type-display-weight: 600;
  --type-display-tracking: -.025em;  --type-display-color: var(--ink);

  --type-title-size: 20px;    --type-title-leading: 1.25;   --type-title-weight: 600;
  --type-title-tracking: -.017em;    --type-title-color: var(--ink);

  --type-heading-size: 15px;  --type-heading-leading: 1.35; --type-heading-weight: 600;
  --type-heading-tracking: -.01em;   --type-heading-color: var(--ink);

  --type-body-size: 13px;     --type-body-leading: 1.5;     --type-body-weight: 400;
  --type-body-tracking: 0;           --type-body-color: var(--ink-2);

  --type-caption-size: 12px;  --type-caption-leading: 1.4;  --type-caption-weight: 500;
  --type-caption-tracking: 0;        --type-caption-color: var(--ink-4);

  /* The same five, as `font` shorthands for a rule that wants the whole style. */
  --type-display: var(--type-display-weight) var(--type-display-size)/var(--type-display-leading) var(--sans);
  --type-title:   var(--type-title-weight)   var(--type-title-size)/var(--type-title-leading)     var(--sans);
  --type-heading: var(--type-heading-weight) var(--type-heading-size)/var(--type-heading-leading) var(--sans);
  --type-body:    var(--type-body-weight)    var(--type-body-size)/var(--type-body-leading)       var(--sans);
  --type-caption: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-leading) var(--sans);

  /* ---- 1b. emphasis within a style ---------------------------------------- */
  --weight-regular: 400;  --weight-medium: 500;  --weight-strong: 600;
  /* Running text that wraps (notes, help, definitions) vs. a label on a line. */
  --leading-relaxed: 1.55;  --leading-snug: 1.3;  --leading-tight: 1.2;
  --metric-medium-size: 36px; /* compact dashboard count */
  --metric-large-size: 44px; /* dashboard count, distinct from running text */
  /* Initials inside a 24px mark or avatar: the caption, stepped down to fit. */
  --mark-size: calc(var(--type-caption-size) - 2px);

  /* ---- 2. font families ---------------------------------------------------- */
  --sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;   /* hashes and codes only */

  /* ---- 3. colour ------------------------------------------------------------
     Slate. Tone rather than hue: a light rail on a hairline, a tinted page a
     step darker than its cards, and white surfaces that therefore lift. Every
     neutral carries the same slight blue-grey cast, so the greys read as one
     family. One working colour — a desaturated steel navy, dark enough to
     behave like ink — for the primary action, selection and focus. Hue proper
     is spent on two things only: status, and the single copper "this is next"
     signal. When something on screen is coloured, it means something. */
  /* text */
  --ink: #1B2430;  --ink-2: #2E3947;  --ink-3: #4F5D6E;  --ink-4: #5C6A7B;
  --ink-5: #A9B3BF; --ink-placeholder: #7A8797; --dash: #97A3B1; --faint: #8492A3;
  /* lines */
  --line: #D5DCE4; --line-2: #E3E8EE; --line-3: #EDF1F5;
  --input-line: #C6CFD9; --control-line: #8492A3;
  /* surfaces */
  --paper: #EEF1F5; --page-wash: #E7EBF0;
  --surface: #FFFFFF; --surface-2: #EEF2F6; --surface-3: #F4F6F9; --surface-4: #F8FAFB;
  --hover-wash: rgba(27,36,48,.05); --active-wash: rgba(27,36,48,.08);
  --glass: rgba(255,255,255,.55);
  --setup-scrim: rgba(15,23,42,.42);
  --setup-shadow-color: rgba(15,23,42,.3);
  --viewer-scrim: #101b2bb3;
  --viewer-shadow-color: #0005;
  --scrim: rgba(23,32,44,.50);
  --skel-hi: #DDE4EB;
  /* the working colour */
  --accent: #25374D; --accent-hover: #1A2A3D; --accent-ink: #25374D;
  --accent-tint: #E3EAF2; --accent-tint-line: #C9D5E2;
  --accent-wash: rgba(37,55,77,.08);
  --on-accent: #FFFFFF; --on-accent-2: rgba(255,255,255,.72);
  --link: #25374D; --focus: #35506F; --ring: 0 0 0 3px rgba(53,80,111,.18);
  /* the one "do this next" signal */
  --brand-accent: #B4531A; --brand-accent-halo: rgba(180,83,26,.14); --kicker-fg: #5C6A7B;
  /* Schedule review movement and date-review notes. */
  --why-movement-earlier-color: #27816a; --why-movement-later-color: #b65e28;
  --why-review-ink: #91551b; --why-review-tint: #fff3e3;
  --why-review-line: #dbb889; --why-review-wash: #fff8ed;
  --schedule-dialog-backdrop: rgba(20,24,29,.35);
  --workflow-menu-shadow: 0 8px 24px rgba(18,22,27,.12);
  /* status */
  --danger: #A8291F; --danger-dot: #D0382C; --danger-tint: #FCEFED;
  --danger-tint-2: #FEF7F6; --danger-line: #F6D6D2; --danger-line-2: #EDB9B3;
  --warn: #85560A; --warn-dot: #C28A12; --warn-tint: #FBF3DF; --warn-line: #EBDAAE;
  --ok: #1A6545; --ok-dot: #2F9467; --ok-tint: #E6F3EC; --ok-line: #C4E0D1;
  --neutral: #4F5D6E; --neutral-dot: #97A3B1;
  /* F6: the one colour for a value the AI proposed and no person has yet
     confirmed. Blue, so it reads as "proposed" beside the ink of everything a
     person set or the file stated; the product has one theme, so one value.
     A confirmed or edited value takes the normal ink and loses the mark. */
  --ai: #1B4FD8; --ai-tint: #E8EEFB; --ai-line: #C9D6F5;
  /* F7: one fixed colour per slip cause, read by the project-level
     attribution and by the per-activity breakdown alike (compare/causes.js).
     Progress causes in the cool half, re-plan causes in the warm half; a bar
     of several causes and the unattributed remainder are greys. */
  --cause-data-date-push: #637BDD; --cause-unfinished-work: #189D91; --cause-actual-dates: #389DC6;
  --cause-remaining-duration-change: #C28A12; --cause-original-duration-change: #D9A441;
  --cause-logic-change: #B4531A; --cause-constraint-change: #8E44AD; --cause-calendar-change: #2F9467;
  --cause-mixed: #6B7684; --cause-residual: #A9B3BF;
  /* F9: the lines a reviewer adds to the Trends chart, one colour each, in
     the order they were added; the ninth wraps to the first. */
  --series-1: #25374D; --series-2: #B4531A; --series-3: #2F9467; --series-4: #8E44AD;
  --series-5: #C28A12; --series-6: #2F6F9F; --series-7: #A8291F; --series-8: #5B7DB1;
  /* fills with a little form: controls, the primary, headers, tiles */
  --control-bg: linear-gradient(180deg, #FFFFFF, #F6F8FA);
  --control-bg-hover: linear-gradient(180deg, #FAFBFC, #EEF2F6);
  --primary-bg: linear-gradient(180deg, #32496A, #25374D);        --primary-line: #1F3045;
  --primary-bg-hover: linear-gradient(180deg, #2B405D, #1D2D41);  --primary-line-hover: #172537;
  --primary-shadow: 0 1px 2px rgba(27,36,48,.28), inset 0 1px 0 rgba(255,255,255,.14);
  --head-bg: linear-gradient(180deg, #F6F8FA, #EFF3F7);
  --tile-bg: linear-gradient(180deg, #F7F9FB, #EFF3F7);
  --sheet-head-bg: linear-gradient(180deg, #F7F9FB, #FFFFFF);
  --strip-bg: linear-gradient(180deg, #F3F5F8, #ECF0F4);
  /* the inverse bar (selection) and tooltips: light on ink */
  --inverse-bg: linear-gradient(180deg, #2A3A4E, #1E2A39); --inverse-solid: #1B2430;
  --inverse-text: #FFFFFF; --inverse-text-2: #C9CCD3; --inverse-text-3: #B9BDC6; --inverse-muted: #7A808B;
  --inverse-wash: rgba(255,255,255,.10); --inverse-wash-2: rgba(255,255,255,.12); --inverse-wash-3: rgba(255,255,255,.07);
  --inverse-control: #FFFFFF; --inverse-control-hover: #E9EAEC;
  /* the rail */
  /* The spine. It is the one dark object in the product, and it is dark for a
     structural reason rather than a decorative one: at 64px it is a permanent
     edge the eye reads as the frame of the window, so the page beside it is
     unmistakably the work. A light rail at this width reads as a leftover
     column. `--rail-mark` is the "you are here" bar, the only bright thing on
     it, which is why it is not the accent (too dark to show here). */
  --sidebar-bg: #1A222D; --sidebar-bg-2: #232D3A; --sidebar-line: #283341;
  --sidebar-line-2: #323E4D; --sidebar-text: #ECF0F5; --sidebar-text-2: #AAB6C4;
  --sidebar-text-3: #7B8798; --sidebar-label: #78849A; --sidebar-dot: #93A0B0;
  --sidebar-dot-on: #FFFFFF; --rail-mark: #FFFFFF; --rail-hover: rgba(255,255,255,.07);
  --rail-on: rgba(255,255,255,.12); --rail-badge: rgba(255,255,255,.14);
  /* Surfaces that open INSIDE the rail -- the project switcher's list. On ink,
     recession is a hole rather than a raised card: a field is cut into the
     spine (black, not white), and the panel it sits in is the one step lighter.
     The dot ring is achromatic on purpose, so the health colour it surrounds is
     the only thing carrying meaning. */
  /* `--rail-badge` composited onto `--sidebar-bg`, as an opaque colour. The
     folded rail needs the same chip the open one has, but OPAQUE: at 64px the
     count sits on top of the icon, and a translucent chip let the glyph's
     outline run through the digit. Same value, so the badge does not change
     colour when the rail folds. */
  --rail-chip: #3A414A;
  --rail-panel: #212B37; --rail-field: rgba(0,0,0,.26);
  --rail-dot-ring: rgba(255,255,255,.10);
  --rail-skel: rgba(255,255,255,.07); --rail-skel-hi: rgba(255,255,255,.17);

  /* ---- 4. corners ---------------------------------------------------------- */
  /* Project setup wizard (v2): the design's own steps between the five text
     styles -- the step title, tags, the large recorded value -- and the two
     agency marks on step 3. */
  --sw-size-step: 18px; --sw-size-tag: 11px; --sw-size-micro: 10px; --sw-size-figure: 22px;
  --std-usace-tint: #FBEEE6; --std-usace-ink: #9A3412; --std-usace-line: #C2581C;
  --std-navfac-tint: #E6ECF5; --std-navfac-ink: #1E3A5F;
  --radius-xs: 4px;    /* checkboxes, tags, skeleton bars */
  --radius-sm: 6px;    /* buttons, inputs, nav items, menu items */
  --radius-md: 8px;    /* the switcher, notes, small panels */
  --radius-lg: 10px;   /* cards, tiles, the list surface, menus */
  --radius-xl: 12px;   /* dialogs, the selection bar */
  --radius-pill: 999px;

  /* ---- 5. elevation: resting card, raised card, floating menu, dialog ------
     Tinted with the ink's own hue — a neutral black shadow on a blue-grey
     ground reads as dirt. */
  --shadow-1: 0 1px 2px rgba(27,36,48,.06), 0 1px 1px rgba(27,36,48,.04);
  --shadow-2: 0 1px 2px rgba(27,36,48,.05), 0 4px 12px -4px rgba(27,36,48,.10);
  --shadow-3: 0 0 0 1px rgba(27,36,48,.08), 0 4px 8px -2px rgba(27,36,48,.10), 0 14px 28px -8px rgba(27,36,48,.20);
  --shadow-4: 0 0 0 1px rgba(27,36,48,.10), 0 28px 64px -14px rgba(27,36,48,.42);
  --shadow-tip: 0 6px 16px -6px rgba(27,36,48,.5);
  --shadow-up: 0 -1px 0 rgba(27,36,48,.04), 0 -8px 20px -12px rgba(27,36,48,.18);   /* a bar resting on the bottom edge */

  /* ---- 6. motion: how long, and how it settles ----------------------------- */
  --t-fast: 120ms; --t-med: 180ms; --ease: cubic-bezier(.2, .8, .2, 1);

  /* The ground every themed box stands on: the body style. */
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ---- the five styles as classes, for markup that wants one directly -------- */
.t2 .tx-display { font: var(--type-display); letter-spacing: var(--type-display-tracking); color: var(--type-display-color); font-variant-numeric: tabular-nums; }
.t2 .tx-title   { font: var(--type-title);   letter-spacing: var(--type-title-tracking);   color: var(--type-title-color); }
.t2 .tx-heading { font: var(--type-heading); letter-spacing: var(--type-heading-tracking); color: var(--type-heading-color); }
.t2 .tx-body    { font: var(--type-body);    letter-spacing: var(--type-body-tracking);    color: var(--type-body-color); }
.t2 .tx-caption { font: var(--type-caption); letter-spacing: var(--type-caption-tracking); color: var(--type-caption-color); }
.t2 .tx-strong  { font-weight: var(--weight-strong); }
.t2 .tx-medium  { font-weight: var(--weight-medium); }
.t2 .tx-num     { font-variant-numeric: tabular-nums; }

/* Existing trial component values, centralized without changing their appearance.
   Root scope also covers legacy TIA elements outside a .t2 ancestor. */
:root {
  --type-micro-size: 11px; /* the smallest text in the product, on every screen */
  --schedule-dialog-backdrop: rgba(20,24,29,.35);
  --component-color-17263d04: #17263d04;
  --component-color-17816a: #17816a;
  --component-color-18283d77: #18283d77;
  --component-color-1b325a0a: #1b325a0a;
  --component-color-1f334504: #1f334504;
  --component-color-1f385426: #1f385426;
  --component-color-20344e06: #20344e06;
  --component-color-20385304: #20385304;
  --component-color-2038530a: #2038530a;
  --component-color-2038531a: #2038531a;
  --component-color-23395412: #23395412;
  --component-color-23395426: #23395426;
  --component-color-24395206: #24395206;
  --component-color-25364e: #25364e;
  --component-color-263349: #263349;
  --component-color-26354b: #26354b;
  --component-color-293c56: #293c56;
  --component-color-29487215: #29487215;
  --component-color-294f83: #294f83;
  --component-color-304966: #304966;
  --component-color-33816d: #33816d;
  --component-color-345b8f: #345b8f;
  --component-color-365f95: #365f95;
  --component-color-3f6295: #3f6295;
  --component-color-426a9b: #426a9b;
  --component-color-426a9b0f: #426a9b0f;
  --component-color-52647b: #52647b;
  --component-color-526f97: #526f97;
  --component-color-537bc1: #537bc1;
  --component-color-58677b: #58677b;
  --component-color-59677b: #59677b;
  --component-color-5a6b82: #5a6b82;
  --component-color-61738d: #61738d;
  --component-color-6188bc12: #6188bc12;
  --component-color-6389bf: #6389bf;
  --component-color-638aba: #638aba;
  --component-color-647489: #647489;
  --component-color-6689ba: #6689ba;
  --component-color-6a778b: #6a778b;
  --component-color-718099: #718099;
  --component-color-77869a: #77869a;
  --component-color-78869b: #78869b;
  --component-color-788ba7: #788ba7;
  --component-color-7b879a: #7b879a;
  --component-color-7b8ca4: #7b8ca4;
  --component-color-7c8ba0: #7c8ba0;
  --component-color-7d8da2: #7d8da2;
  --component-color-7f8da1: #7f8da1;
  --component-color-8090a7: #8090a7;
  --component-color-8299b7: #8299b7;
  --component-color-8490a1: #8490a1;
  --component-color-8592a5: #8592a5;
  --component-color-8995a7: #8995a7;
  --component-color-8d9db3: #8d9db3;
  --component-color-91a1b7: #91a1b7;
  --component-color-95a9c5: #95a9c5;
  --component-color-9baec7: #9baec7;
  --component-color-9cb4d3: #9cb4d3;
  --component-color-a3b3c9: #a3b3c9;
  --component-color-a45c28: #a45c28;
  --component-color-a5b5c9: #a5b5c9;
  --component-color-a6b5c8: #a6b5c8;
  --component-color-ad652c: #ad652c;
  --component-color-b46429: #b46429;
  --component-color-b8c9df: #b8c9df;
  --component-color-bbcadd: #bbcadd;
  --component-color-c4874b: #c4874b;
  --component-color-c4d3e6: #c4d3e6;
  --component-color-c8d3e2: #c8d3e2;
  --component-color-cad6e5: #cad6e5;
  --component-color-d1dff1: #d1dff1;
  --component-color-d2dae6: #d2dae6;
  --component-color-d5deea: #d5deea;
  --component-color-d7e1ef: #d7e1ef;
  --component-color-dae5f3: #dae5f3;
  --component-color-dbe3ee: #dbe3ee;
  --component-color-dce3ed: #dce3ed;
  --component-color-dce4ee: #dce4ee;
  --component-color-dce4ef: #dce4ef;
  --component-color-dde4ed: #dde4ed;
  --component-color-dfe5ec: #dfe5ec;
  --component-color-dfe5ee: #dfe5ee;
  --component-color-dfe5ef: #dfe5ef;
  --component-color-e2e7ef: #e2e7ef;
  --component-color-e4e9f0: #e4e9f0;
  --component-color-e4edf9: #e4edf9;
  --component-color-e5eaf1: #e5eaf1;
  --component-color-e6edf5: #e6edf5;
  --component-color-e6eef8: #e6eef8;
  --component-color-e7edf5: #e7edf5;
  --component-color-e9f0f8: #e9f0f8;
  --component-color-edf0f5: #edf0f5;
  --component-color-edf2f8: #edf2f8;
  --component-color-edf2fa: #edf2fa;
  --component-color-edf3fa: #edf3fa;
  --component-color-edf3fb: #edf3fb;
  --component-color-eef3fa: #eef3fa;
  --component-color-eff2f6: #eff2f6;
  --component-color-f0f3f7: #f0f3f7;
  --component-color-f0f8f5: #f0f8f5;
  --component-color-f1f3f7: #f1f3f7;
  --component-color-f1f4f8: #f1f4f8;
  --component-color-f1f6fc: #f1f6fc;
  --component-color-f2faf6: #f2faf6;
  --component-color-f4f6f9: #f4f6f9;
  --component-color-f4f7fb: #f4f7fb;
  --component-color-f4f8fe: #f4f8fe;
  --component-color-f5f7fa: #f5f7fa;
  --component-color-f7f9fc: #f7f9fc;
  --component-color-f8fafc: #f8fafc;
  --component-color-f9fafc: #f9fafc;
  --component-color-fafbfd: #fafbfd;
  --component-color-fafcff: #fafcff;
  --component-color-fff: #fff;
  --component-color-fff8f2: #fff8f2;
  --component-color-ffffffed: #ffffffed;
  --component-radius-10px: 10px;
  --component-radius-12px: 12px;
  --component-radius-14px: 14px;
  --component-radius-3px: 3px;
  --component-radius-4px: 4px;
  --component-radius-5px: 5px;
  --component-radius-6px: 6px;
  --component-radius-7px: 7px;
  --component-radius-8px: 8px;
  --component-radius-9px: 9px;
  --component-size-10px: 10px;
  --component-size-11px: 11px;
  --component-size-12px: 12px;
  --component-size-13px: 13px;
  --component-size-14px: 14px;
  --component-size-16px: 16px;
  --component-size-17px: 17px;
  --component-size-18px: 18px;
  --component-size-19px: 19px;
  --component-size-20px: 20px;
  --component-size-21px: 21px;
  --component-size-22px: 22px;
  --component-size-24px: 24px;
  --component-size-25px: 25px;
  --component-size-26px: 26px;
  --component-size-32px: 32px;
  --component-size-8px: 8px;
  --component-size-9px: 9px;
  --component-weight-500: 500;
  --component-weight-550: 550;
  --component-weight-600: 600;
  --component-weight-650: 650;
}

/* Schedule removal uses the same clear confirmation in Setup and Schedules. */
.schedule-delete-modal .modal-head h2 { color: #a52620; }
.schedule-delete-modal .modal-body > input { width: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid #b9c3cf; border-radius: 8px; padding: 10px 12px; }
.schedule-delete-modal .modal-body > input:focus { outline: none; border-color: #a52620; box-shadow: 0 0 0 3px rgb(165 38 32 / 12%); }
.schedule-delete-modal .modal-foot .danger-h:not(:disabled) { background: #a52620; border-color: #a52620; color: white; }

/* Trial workflow components: retain their existing rendered values. */
:root {
  --component-color-27816a: #27816a;
  --component-color-91551b: #91551b;
  --component-color-b65e28: #b65e28;
  --component-color-dbb889: #dbb889;
  --component-color-fff3e3: #fff3e3;
  --component-color-fff8ed: #fff8ed;
  --radius-component-8: 8px;
  --radius-component-10: 10px;
  --workflow-menu-shadow-color: rgba(18,22,27,.12);
}

/* Project setup wizard (v2): the design's own palette and mono face, scoped to
   the wizard and the dialogs it opens, so the screen matches its design
   without moving a colour anywhere else in the app. */
.sw, .sw-scrim {
  --accent: #1E293B; --accent-hover: #0F172A; --accent-ink: #1E293B; --accent-tint: #EEF1F5;
  --accent-tint-line: #CBD5E1; --accent-wash: rgba(30, 41, 59, .12); --link: #1E293B; --focus: #1E293B;
  --on-accent: #FFFFFF; --on-accent-2: #CBD5E1;
  --ink: #111827; --ink-2: #374151; --ink-3: #4B5563; --ink-4: #646B78; --ink-5: #9CA3AF;
  --line: #D1D5DB; --line-2: #E5E7EB; --line-3: #F1F2F4; --input-line: #D1D5DB;
  --surface: #FFFFFF; --surface-2: #F3F4F6; --surface-3: #F4F6F9; --surface-4: #F9FAFB;
  --ok: #15803D; --ok-dot: #16A34A; --ok-tint: #F3FAF6; --ok-line: #CFE9D8; --sw-ok-ink: #14532D; --sw-ok-panel: #F6FBF8;
  --warn: #B45309; --warn-dot: #D97706; --warn-tint: #FFFBEB; --warn-line: #FCD34D; --sw-warn-ink: #92400E;
  --danger: #B91C1C; --danger-dot: #DC2626; --danger-tint: #FEF2F2; --danger-tint-2: #FEF7F7;
  --danger-line: #FECACA; --danger-line-2: #FCA5A5;
  --inverse-solid: #1F2937; --inverse-text: #F9FAFB; --inverse-wash-2: rgba(255, 255, 255, .15);
  --sw-kicker: #8B6B3D; --sw-disabled: #94A3B8; --sw-form: #FAFBFC; --sw-fresh: #F3FAF6;
  --sw-scrim: rgba(17, 24, 39, .55); --sw-scrim-2: rgba(17, 24, 39, .35);
  --sw-shadow: 0 24px 48px rgba(0, 0, 0, .25); --sw-shadow-2: 0 24px 48px rgba(0, 0, 0, .3);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.cmp-host.kind-setup { --sw-scrim: rgba(17, 24, 39, .55); --sw-shadow: 0 24px 48px rgba(0, 0, 0, .25); }

/* Review submissions on Schedules without replacing the page. */
.schedule-dialog { width:min(680px,calc(100vw - 32px)); max-height:88vh; padding:0; border:1px solid #d7deea; border-radius:14px; color:#182333; background:#fff; box-shadow:0 24px 80px #17263833; }
.schedule-dialog::backdrop { background:#18233370; }
.schedule-dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
.schedule-dialog .modal-head { flex:none; padding:14px 20px; }
.schedule-dialog .modal-head h2 { margin:0; }
.schedule-dialog .modal-body { overflow:auto; min-height:0; padding:12px 20px; overscroll-behavior:contain; }
.schedule-review-identity { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; }
.schedule-review-identity h3 { margin:0; font-size:15px; overflow-wrap:anywhere; }
.schedule-dialog .modal-foot { flex:none; justify-content:flex-end; gap:10px; padding:12px 20px; }
.schedule-check-totals { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
.schedule-check-totals>div { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:8px; background:#f2f5f9; }
.schedule-check-totals strong { font-size:22px; }
.schedule-check-totals .passed { color:#18704f; background:#edf8f2; }
.schedule-check-totals .attention { color:#925400; background:#fff6e6; }
.schedule-check-group { border:1px solid #dde3ec; border-radius:8px; margin:8px 0; }
.schedule-check-group summary { padding:9px 12px; cursor:pointer; font-weight:600; }
.schedule-check-row { margin:0; padding:9px 12px; border-top:1px solid #edf0f5; overflow-wrap:anywhere; }
.schedule-check-row p { margin:5px 0 0; }

.schedule-check-evidence { margin-top:6px; }
.schedule-check-evidence p { line-height:1.45; }

/* Project directory: a compact overview above one paginated table. */
.directory-overview { display:flex; align-items:center; gap:32px; padding:24px; margin-bottom:20px; background:#fff; border:1px solid #d7deea; border-radius:12px; }
.directory-visual { display:flex; align-items:center; gap:20px; min-width:300px; }
.directory-visual h2 { font-size:16px; margin:0 0 6px; }
.directory-visual p { color:#65738a; font-size:13px; margin:0; }
.directory-ring { --coverage:0%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:96px; height:96px; flex-shrink:0; border-radius:50%; background:conic-gradient(#426e85 var(--coverage),#edf1f5 0); }
.directory-ring::before { content:''; position:absolute; inset:8px; background:white; border-radius:50%; }
.directory-ring strong,.directory-ring span { position:relative; } .directory-ring strong { font-size:26px; } .directory-ring span { font-size:11px; color:#65738a; }
.directory-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; flex:1; }
.directory-stats>div { display:flex; flex-direction:column; gap:8px; border-left:1px solid #e4e9f0; padding-left:20px; }
.directory-stats span { color:#65738a; font-size:12px; } .directory-stats strong { font-size:26px; }
.directory-toolbar,.directory-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; }
.directory-toolbar input { width:min(420px,65%); } .directory-toolbar label { display:flex; align-items:center; gap:8px; font-size:12px; color:#65738a; }
.directory-toolbar select { width:70px; } .directory-table { overflow-x:auto; } .directory-table table { width:100%; min-width:720px; }
.directory-table th { background:#f7f9fc; } .directory-table td { padding-top:18px!important; padding-bottom:18px!important; }
.directory-project { border:0; background:none; color:#243d59; font:inherit; font-weight:600; cursor:pointer; text-align:left; overflow-wrap:anywhere; padding:0; }
.directory-project:hover { text-decoration:underline; } .directory-number { max-width:220px; overflow-wrap:anywhere; }
.directory-status { display:inline-block; border-radius:20px; background:#e9f3ef; color:#256b50; padding:4px 10px; font-size:12px; white-space:nowrap; }
.directory-status.draft { background:#fbf2df; color:#8a601c; }
.directory-pagination { border-top:1px solid #e4e9f0; } .directory-pagination>div { display:flex; align-items:center; gap:14px; }
.directory-empty { text-align:center; padding:40px 16px; color:#65738a; }
@media(max-width:1100px) { .directory-overview { flex-direction:column; align-items:stretch; } .directory-stats { gap:12px; } }
@media(max-width:600px) { .directory-stats { grid-template-columns:repeat(2,1fr); } .directory-pagination { align-items:flex-start; flex-direction:column; } .directory-visual { min-width:0; } }
.directory-toolbar input[type="search"] { height:36px; padding:8px 12px; border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#243447; font:inherit; font-size:13px; }
.directory-toolbar input[type="search"]:focus { outline:2px solid #b7c9dc; outline-offset:1px; }
.directory-toolbar select { min-width:76px; padding:6px 10px; }
.directory-table td { padding-top:13px!important; padding-bottom:13px!important; }
.directory-stats { grid-template-columns:repeat(3,1fr); row-gap:20px; }
.directory-secondary { margin-top:5px; font-size:11px; line-height:1.5; color:#728096; font-weight:400; }
.directory-update { font-size:12px; font-weight:500; }
.directory-table table { min-width:1080px; }
.directory-table td:first-child { min-width:190px; max-width:280px; }
.directory-lost { color:#b43b42; font-weight:600; } .directory-gained { color:#23825c; font-weight:600; }
.directory-quality { height:4px; margin-top:7px; margin-left:auto; width:90px; border-radius:5px; background:linear-gradient(to right,#557b91 var(--score),#e7ecf2 var(--score)); }
.directory-table .iconbtn { font-size:22px; }
@media(max-width:600px) { .directory-stats { grid-template-columns:repeat(2,1fr); } }
/* Rich projects table: keep the complete comparison context, with a quiet frame. */
.projects-rich .projects-overview { margin:0 0 20px; border:1px solid #d7deea; border-radius:12px; background:#fff; padding:20px; }
.projects-rich .projects-overview>h2 { font-size:16px; margin:0 0 4px; }
.projects-rich .projects-overview>.muted { margin:0 0 16px; font-size:12px; }
.projects-rich .pf-band { margin:0; border:0; box-shadow:none; }
.projects-rich .pf-exposure { display:grid; grid-template-columns:repeat(3,minmax(100px,1fr)); gap:14px 20px; }
.projects-rich .pf-fact .v { font-size:22px; }
.projects-rich .dtoolbar { flex-wrap:wrap; padding:14px 16px; gap:12px; }
.projects-rich .dsearch { min-width:240px; flex:1; max-width:380px; }
.projects-rich .pj-table { min-width:1080px; }
.projects-rich .pf-row>td { padding-top:16px; padding-bottom:16px; }
.projects-rich .pf-dgrid { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); border:1px solid #d7deea; border-radius:10px; overflow:hidden; background:#fff; }
.projects-rich .pf-d { padding:14px 18px; border-right:1px solid #e4e9f0; }
.projects-rich .pf-dk { font-size:12px; } .projects-rich .pf-dv { font-size:19px; }
.projects-rich .pf-detail>td { background:#f6f8fb; padding:16px 20px; }
.projects-rich .pf-basis { font-size:12px; margin-top:10px; color:#65738a; }
.projects-rich .iconbtn { font-size:22px; }
@media(min-width:1600px) { .projects-rich .pf-dgrid { grid-template-columns:repeat(8,minmax(100px,1fr)); } }
@media(max-width:800px) { .projects-rich .pf-exposure { grid-template-columns:repeat(2,1fr); } }
.t2.projects-rich .pf-exposure { display:grid; grid-template-columns:repeat(3,minmax(100px,1fr)); gap:14px 20px; }
.t2.projects-rich .pf-band { grid-template-columns:150px minmax(220px,1fr) minmax(360px,1.5fr); }
.t2.projects-rich .pf-dgrid { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); }
@media(min-width:1600px) { .t2.projects-rich .pf-dgrid { grid-template-columns:repeat(8,minmax(100px,1fr)); } }
@media(max-width:1000px) { .t2.projects-rich .pf-band { grid-template-columns:140px 1fr; } .t2.projects-rich .pf-exposure { grid-column:1/-1; } }
.t2.projects-rich>.pane { padding-top:16px; }
.t2.projects-rich .projects-overview { padding:16px 20px; margin-bottom:16px; }
.t2.projects-rich .projects-overview-header { padding:0 0 14px; }
.t2.projects-rich .projects-overview-header .pagehead { margin:0; }
.t2.projects-rich .projects-overview-header h1 { font-size:20px; }
.t2.projects-rich .projects-overview-header .subline { margin:4px 0 0; }
.projects-back-top { display:block; margin:12px 0 0 auto; }
/* Compact overview: remove the legacy top margin and keep the table in view. */
.t2.projects-rich>.pane { padding-top:8px; }
.t2.projects-rich .projects-overview { margin:0 0 12px; padding:12px 16px; }
.t2.projects-rich .projects-overview-header { padding:0 0 10px; }
.t2.projects-rich .pf-band { margin:0; grid-template-columns:120px minmax(200px,1fr) minmax(360px,1.5fr); }
.t2.projects-rich .pf-ringcell { padding:8px; }
.t2.projects-rich .pf-ring { width:94px; height:94px; }
.t2.projects-rich .pf-keys { padding:8px 12px; gap:4px; }
.t2.projects-rich .pf-exposure { padding:10px 14px; gap:8px 16px; }
.t2.projects-rich .pf-fact .v { font-size:20px; }
@media(max-width:1000px) { .t2.projects-rich .pf-band { grid-template-columns:120px 1fr; } }
.t2.projects-rich .pf-ringmid { width:94px; height:94px; padding:0 14px; box-sizing:border-box; }
.t2.projects-rich .pf-ringmid b { font-size:22px; }
.t2.projects-rich .pf-ringmid span { font-size:10px; line-height:1.15; margin-top:3px; }
/* Keep the small ring's label outside its centre so it never crosses the stroke. */
.t2.projects-rich .pf-ringcell { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; }
.t2.projects-rich .pf-ringmid { position:static; transform:none; width:auto; height:auto; padding:0; display:block; }
.t2.projects-rich .pf-ringmid b { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.t2.projects-rich .pf-ringcell { position:relative; }
.t2.projects-rich .pf-ringmid span { max-width:104px; margin:0; font-size:11px; line-height:1.3; }
.t2.projects-rich .projects-ring-visual { position:relative; width:94px; height:94px; }
.t2.projects-rich .projects-ring-caption { max-width:104px; text-align:center; font-size:11px; line-height:1.3; color:var(--ink-4); }
.t2.projects-rich .pj-table th { text-align:center; vertical-align:middle; }
/* Align summary values with their headings; project identity remains left-aligned. */
.t2.projects-rich .pj-table tbody tr.pf-row > td:nth-child(n+3):nth-child(-n+7) { text-align:center; }
.t2.projects-rich .pj-table tbody tr.pf-row .pj-sparkwrap { display:flex; justify-content:center; }
.t2.projects-rich .pj-table tbody tr.pf-row .bar { margin-inline:auto; justify-content:center; }

/* Ask: compact context and clear answer states. */
.chatscr .pageblock { padding-bottom:12px; }
.chatscr .chatcol { max-width:960px; }
.chatscr .ai-empty { padding:24px 0; }
.chatscr .ai-sugg-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.chatscr .ai-sugg { width:100%; min-height:64px; text-align:left; white-space:normal; }
.ai-answer-state { font-size:12px; color:var(--ink-4); padding:6px 0; }
.ai-load-older { display:block; margin:8px auto 16px; }
.ai-load-older[hidden] { display:none; }
.ai-stepsdone .s { overflow-wrap:anywhere; }
@media(max-width:900px) { .chatscr .ai-sugg-list { grid-template-columns:1fr; } }
.ai-source-record { padding:8px 12px; }
.ai-source-record dl { display:grid; grid-template-columns:minmax(100px,1fr) 2fr; gap:6px 12px; font-size:12px; }
.ai-source-record dt { color:var(--ink-4); text-transform:capitalize; }
.ai-source-record dd { margin:0; overflow-wrap:anywhere; }

/* Guided review tasks share the conversation's reading width. */
.chat-workflows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 8px; }
.chat-workflow { text-align:left; padding:14px; border:1px solid #d4dce7; border-radius:10px; background:#fff; color:inherit; font:inherit; cursor:pointer; }
.chat-workflow strong,.chat-workflow span { display:block; }
.chat-workflow span { font-size:12px; color:#64748b; margin-top:5px; line-height:1.5; }
.chat-workflow[aria-pressed="true"] { border-color:#334b6b; background:#f1f5fa; }
.chat-workflow:focus-visible { outline:2px solid #567aaa; outline-offset:2px; }
.chat-task-input { width:100%; box-sizing:border-box; font:inherit; padding:10px; border:1px solid #cbd5e1; border-radius:8px; margin-bottom:8px; resize:vertical; }
@media(max-width:600px) { .chat-workflows { grid-template-columns:1fr; } }
.ai-draft-actions { margin-top:10px; }
.ai-draft-editor { margin-top:8px; padding:12px; border:1px solid #d4dce7; border-radius:8px; }
.ai-draft-editor > button { margin-right:8px; }
.chatscr .chat-workflows { grid-template-columns:repeat(4,minmax(0,1fr)); }
.chatscr .chat-workflow { padding:12px; border-radius:9px; }
.chatscr .chat-workflow span { font-size:12px; }
.chatscr .chatcompose { background:#fff; border-top:1px solid #e2e8f0; padding-top:12px; }
dialog.ai-draft-editor { width:min(640px,calc(100vw - 40px)); box-sizing:border-box; max-height:85vh; overflow:auto; margin:auto; padding:24px; color:#243247; background:#fff; border:1px solid #cbd5e1; box-shadow:0 16px 60px #0f172a33; }
dialog.ai-draft-editor::backdrop { background:#0f172a66; }
dialog.ai-draft-editor h2 { margin:0 0 12px; font-size:20px; }
@media(max-width:800px) { .chatscr .chat-workflows { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .chatscr .chat-workflows { grid-template-columns:1fr; } }
.chatscr .chat-reset-task { align-self:flex-start; margin:0 0 8px; }
.chatscr .chatlog { mask-image:none; -webkit-mask-image:none; padding:16px 8px; }
.chatscr .ai-turn.ai { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px 20px; margin-bottom:16px; }
.chatscr .ai-draft-actions { display:flex; gap:8px; }
.chatscr .ai-draft-actions > .btn { background:transparent; border-color:transparent; box-shadow:none; color:#64748b; padding:4px 8px; font-size:12px; }
.chatscr .ai-stepsdone { border:0; background:#f8fafc; border-radius:6px; }
.chatscr .chatcompose { border-radius:12px; margin-bottom:10px; padding:12px; }
.chatscr .pageblock .pagehead { max-width:944px; }

/* Sources stay compact in the answer, with animated, readable evidence. */
.chatscr .ai-stepsdone { border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; overflow:hidden; }
.chatscr .ai-stepsdone > summary { min-height:40px; padding:9px 13px; gap:10px; flex-wrap:wrap; }
.chatscr .ai-stepsdone > summary:hover { background:#f1f5f9; }
.chatscr .ai-stepsdone > summary:focus-visible, .ai-source-record > summary:focus-visible { outline:2px solid #647eab; outline-offset:-2px; border-radius:6px; }
.chatscr .ai-stepsdone > summary .n { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 5px; border-radius:6px; background:#e8edf4; color:#475569; font:inherit; font-size:11px; }
.chatscr .ai-stepsdone > summary .warn { font-size:11px; color:#856122; background:#fff7e5; padding:3px 7px; border-radius:5px; }
.ai-source-content { overflow:hidden; }
.chatscr .ai-stepsdone .ai-steps { padding:10px 13px 13px; border-top:1px solid #e2e8f0; }
.chatscr .ai-source-record { margin-top:8px; padding:0; border:1px solid #e2e8f0; border-radius:7px; background:#fff; }
.ai-source-record > summary { padding:9px 11px; cursor:pointer; font-weight:600; }
.ai-source-record dl { margin:0; padding:4px 11px 12px; }
.chatscr .ai-stepsdone[open] > summary::before { transform:rotate(-45deg); }
.chatscr .ai-stepsdone.is-expanded > summary::before { transform:rotate(45deg); }
@media (prefers-reduced-motion:reduce) {
  .chatscr .ai-stepsdone > summary::before { transition:none; }
}
.ai-followups { display:flex; flex-wrap:wrap; gap:7px; border-top:1px solid #e8edf3; padding-top:12px; margin-top:12px; }
.ai-followups-label { flex-basis:100%; font-size:11px; color:var(--ink-4); margin-bottom:2px; }
.ai-followup { border:1px solid #dce3ed; background:#fff; border-radius:16px; padding:6px 11px; font:inherit; font-size:12px; text-align:left; color:var(--ink-3); cursor:pointer; }
.ai-followup:hover { background:#f1f5f9; border-color:#9aaec7; color:var(--ink); }
.ai-followup:focus-visible { outline:2px solid #647eab; outline-offset:2px; }
.ai-turn.ai:has(~ .ai-turn.ai) .ai-followups { display:none; }