/* Elixir Thread: how the app wears design system v2 (thread-v2.css stays exactly as
   handed over, so a new release of the system can replace it without a merge).
   Only what the app needs beyond the system lives here: the name menu holds forms and
   buttons, the phone Menu button opens the drawer, and pages not yet converted get a
   legacy-looking status chip. Pages not yet converted sit outside any .t2 root, so they
   keep their legacy look; only the top bar (its own root) and converted pages are v2. */

/* Status chips on pages not yet converted. status_chip emits the v2 classes everywhere; outside a
   .t2 root they take the legacy chip look (same rules as .chip in components.css). Inside a .t2
   root the system's .t2 .t2-chip rules are more specific and win. */
.t2-chip { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.05em 0.6em; border-radius: var(--radius-pill); font-size: var(--size-0); font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.t2-chip .t2-ico { width: 0.95em; height: 0.95em; stroke-width: 2; flex: none; }
.t2-chip--good { color: var(--good); background: var(--good-bg); }
.t2-chip--caution { color: var(--caution); background: var(--caution-bg); }
.t2-chip--problem { color: var(--problem); background: var(--problem-bg); }
.t2-chip--neutral { color: var(--neutral); background: var(--neutral-bg); }
/* A neutral tag (a procedure's kind) on a page not yet converted: the same properties as the system's
   .t2 .t2-tag, in legacy tokens, so inside a .t2 root the system's rule wins whole. Never a status. */
.t2-tag { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.0625rem 0.5rem 0.125rem; border-radius: var(--radius); background: var(--surface-sunk); color: var(--text-secondary); font-size: var(--size-0); font-weight: 500; line-height: 1.45; white-space: nowrap; }

/* A button that reads as a menu link (Sign out is a form, so it is a button). */
.t2 button.t2-pop__link { border: 0; background: none; padding: 0; width: 100%; text-align: left; cursor: pointer; }
.t2 button.t2-pop__link:hover { color: var(--action); }
.t2 .t2-pop__who { color: var(--text-secondary); font-size: var(--fs-small); }
.t2 .t2-prefs { display: grid; gap: var(--s4); }
.t2 .t2-persona { display: grid; gap: var(--s3); }
.t2 .t2-persona .t2-btn { justify-self: start; }
.t2 .banner { background: var(--caution-bg); color: var(--text); font-size: var(--fs-small); }

/* Phone: the Menu button opens nav and tools under the bar (shell.js toggles .is-open). */
@media (max-width: 44rem) {
  .t2 .t2-bar.is-open .t2-bar__in { flex-wrap: wrap; height: auto; min-height: 3.5rem; padding-bottom: var(--s4); row-gap: var(--s3); }
  .t2 .t2-bar.is-open .t2-brand { height: 3.5rem; }
  .t2 .t2-bar.is-open .t2-menu-btn { order: 2; }
  .t2 .t2-bar.is-open .t2-nav { display: grid; order: 3; flex-basis: 100%; gap: 0; white-space: normal; align-self: auto; }
  .t2 .t2-bar.is-open .t2-bar__tools { display: grid; order: 4; flex-basis: 100%; margin-left: 0; gap: var(--s3); }
  .t2 .t2-bar.is-open .t2-nav > a, .t2 .t2-bar.is-open .t2-nav > details > summary { height: auto; padding: 0.75rem 0; border-top: 1px solid var(--border); }
  .t2 .t2-bar.is-open .t2-nav > a[aria-current="page"]::after { display: none; }
  .t2 .t2-bar.is-open .t2-nav > a > span:not(.t2-nav__count), .t2 .t2-bar.is-open .t2-nav > details > summary > span { display: inline; }
  .t2 .t2-bar.is-open .t2-nav > details { display: block; }
  .t2 .t2-bar.is-open .t2-pop { position: static; box-shadow: none; background: transparent; padding: 0.25rem 0 0.5rem 1.75rem; min-width: 0; }
  .t2 .t2-bar.is-open .t2-me > summary { padding-left: 0; }
  .t2 .t2-bar.is-open .t2-me__name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* A section still loading: calm bars in the system's own greys (no shimmer under reduced motion). */
.t2 .t2-skel { display: grid; gap: 1.125rem; }
.t2 .t2-skel > i { display: block; height: 1.25rem; border-radius: 4px; background: linear-gradient(90deg, var(--surface-sunk) 0%, var(--track) 50%, var(--surface-sunk) 100%); background-size: 200% 100%; animation: t2-skel 1.6s var(--ease) infinite; }
.t2 .t2-skel > i.w-90 { width: 90%; }
.t2 .t2-skel > i.w-75 { width: 75%; }
.t2 .t2-skel > i.w-60 { width: 60%; }
.t2 .t2-skel > i.w-40 { width: 40%; }
@keyframes t2-skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .t2 .t2-skel > i { animation: none; } }

/* A button that reads as a text action (the brief's "Ask Claude" is a form). */
.t2 button.t2-go { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }

/* Density (spec section 7, rule 1): the H1 sits within 220px of the top. The file row reads at a
   tighter line height than body copy. */
.t2 .t2-file { line-height: 1.25; }

/* The file row's links (ten with Meetings and Issues) wrap onto a second line inside their own
   column instead of pushing the row wider than the page at about 950px. The client keeps its
   room on the left; each link stays whole. On a phone they fold into "In this file" as before. */
.t2 .t2-file { flex-wrap: wrap; row-gap: 0.375rem; }
.t2 .t2-file__id { flex: 0 1 auto; }
.t2 .t2-file__links { flex: 1 1 24rem; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem var(--s5); }
.t2 .t2-file__links a { white-space: nowrap; }

/* The demonstration notice on a converted page: a slim strip fixed to the bottom of the window,
   so the page's own head still starts at the top. Pages not yet converted keep it on top. */
body:has(main.t2-page) .t2-chrome > .banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0.375rem var(--gutter, 1rem); border-top: 1px solid var(--border); border-bottom: 0; font-size: 0.8125rem; line-height: 1.3; text-align: center; }
body:has(main.t2-page) .t2-page { padding-bottom: 6rem; }
@media print { body:has(main.t2-page) .t2-chrome > .banner { display: none; } }

/* A hub's page head carries an eyebrow above the H1: set the two a little closer so the H1 still sits
   within 220px of the top. */
.t2 .t2-head__main:has(> .t2-eyebrow) { gap: 0.25rem; }

/* My time (BUILD-01): an hours box in the week's table fits "10.25" beside its spinner. The table
   scrolls inside its wrapper, so a wider box never widens the page. */
.t2 .tm-hours .t2-input[type="number"] { min-width: 4.5rem; }

/* Who prepares each step (BUILD-14): the assignee choice in the area page's step rows, and the two
   small forms under the steps. On a phone the choice sits in the row's second column like the other
   cells; the table scrolls inside its wrapper, so the choice never widens the page. */
.t2.scr-workpaper .scr-steps .tm-who-c { width: 10.5rem; }
.t2.scr-workpaper .scr-steps:has(.tm-who-h) :is(th:nth-child(5), td.scr-sign) { width: 12rem; }
.t2 .tm-who > select { padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: var(--fs-small); }
.t2 .tm-assign { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s4) var(--s6); align-items: end; margin-bottom: var(--s5); }
.t2 .tm-assign > form { display: grid; gap: var(--s3); align-content: end; }
@media (max-width: 72rem) { .t2.scr-workpaper .scr-steps .tm-who-c { width: 9.5rem; } .t2.scr-workpaper .scr-steps:has(.tm-who-h) :is(th:nth-child(5), td.scr-sign) { width: auto; } }
@media (max-width: 44rem) {
  .t2.scr-workpaper .scr-steps td.tm-who-c { grid-column: 2; width: auto; }
  .t2.scr-workpaper .scr-steps td.tm-who-c::before { content: "Assigned to"; display: block; font-size: var(--fs-small); color: var(--text-secondary); }
}
/* A budget change (BUILD-14): the partner's decision form keeps its parts apart. */
.t2 .tm-decide { display: grid; gap: var(--s4); }
/* Evidence on the paper (BUILD-05): the Evidence and Cross-references areas are v2 roots of their own, so a
   page not yet converted can hold them. The root takes the page's ground, not its own. */
.t2.ev-root { background: transparent; margin: 0 0 1.5rem; min-width: 0; }
.t2 .ev-panel { gap: var(--s4); grid-template-columns: minmax(0, 1fr); }   /* a wide table scrolls inside its wrap */
.t2 .ev-panel h2.t2-panel__head { font-size: var(--fs-h3); }
.t2 .ev-form { display: grid; gap: var(--s4); max-width: 34rem; }
.t2 .ev-file { padding: 0.5rem; }
.t2 .ev-message { margin: var(--s2) 0; }
.t2 .ev-withdrawn { display: grid; gap: var(--s2); font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .ev-acts { white-space: nowrap; }
.t2 .xr-head { margin-top: var(--s2); }
.t2 .xr-list { display: grid; gap: var(--s3); }
.t2 .xr-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; }
.t2 .xr-meta { flex-basis: 100%; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .xr-list a { color: var(--text); font-weight: 560; }                  /* panel links are ink (spec 7.5) */
.t2 .xr-list a:hover { color: var(--action); }
.t2 .xr-meta a { color: var(--text-secondary); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.t2 :is(.xr-list, .t2-empty) + .xr-head { margin-top: var(--s4); }
.t2 .ev-table td:nth-last-child(2) { white-space: nowrap; }                /* the date */
/* A tickmark that opens its evidence or its note is a link (how it looks is in the Tickmarks block at the end). */
a.ev-mark { text-decoration: none; }
/* A page not yet converted keeps its main column to the screen, and on a phone or tablet a wide table
   scrolls inside itself instead of widening the page (as .t2-main and .t2-table-wrap do on converted pages). */
.with-panel > * { min-width: 0; }
@media (max-width: 860px) {
  .with-panel .table:not(.table--stack) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================================================
   Tickmarks as coloured symbols (the partner asked for colourful symbols, not capital letters).
   areas/tickmarks.py `badge()` writes every mark as
       <span class="tk tk--green" title="V: ..."><span aria-hidden="true">glyph</span><span class="tk-vh">V, ...</span></span>
   The glyph is for the eye; the letters, the meaning and the state are the accessible name in .tk-vh, so
   colour is never the only signal. One badge for every page, inside a .t2 root or on a page not yet
   converted: it sets its own font and colours and reads no .t2 token except the focus ring's --focus
   (the legacy tokens.css defines it too).
   Colours by family: green agreements, amber exclusions, grey notes, purple adjustments, red exceptions,
   teal-blue for a mark Thread applies itself (a failed cast or tie is red, with a heavier edge).
   The colours are tokens in tokens.css (--tk-<family>-ink, -wash and -edge), with the contrast of each ink on
   its wash (WCAG 2.x, computed; text needs 4.5:1).
   Dark values apply under html[data-theme="dark"], under a .t2 root set to dark, and under the device
   setting unless html says light (the same three triggers as the system's own dark tokens).
   ========================================================================================================== */
.tk {
  --tk-font: "Segoe UI Symbol", "Segoe UI", system-ui, -apple-system, "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", "Arial Unicode MS", sans-serif;
  --tk-ink: var(--tk-grey-ink); --tk-wash: var(--tk-grey-wash); --tk-edge: var(--tk-grey-edge);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.2em;
  box-sizing: border-box; min-width: 1.5em; height: 1.5em; padding: 0 0.2em;
  border: 1px solid var(--tk-edge); border-radius: 0.4em; background: var(--tk-wash); color: var(--tk-ink);
  font: 700 1rem/1 var(--tk-font); font-style: normal; font-variant-numeric: lining-nums; letter-spacing: 0;
  white-space: nowrap; text-decoration: none; vertical-align: -0.16em;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.tk--green { --tk-ink: var(--tk-green-ink); --tk-wash: var(--tk-green-wash); --tk-edge: var(--tk-green-edge); }
.tk--amber { --tk-ink: var(--tk-amber-ink); --tk-wash: var(--tk-amber-wash); --tk-edge: var(--tk-amber-edge); }
.tk--grey { --tk-ink: var(--tk-grey-ink); --tk-wash: var(--tk-grey-wash); --tk-edge: var(--tk-grey-edge); }
.tk--purple { --tk-ink: var(--tk-purple-ink); --tk-wash: var(--tk-purple-wash); --tk-edge: var(--tk-purple-edge); }
.tk--red { --tk-ink: var(--tk-red-ink); --tk-wash: var(--tk-red-wash); --tk-edge: var(--tk-red-edge); }
.tk--teal { --tk-ink: var(--tk-teal-ink); --tk-wash: var(--tk-teal-wash); --tk-edge: var(--tk-teal-edge); }
/* A mark Thread applies sits beside a figure: a little smaller, with room before it. A mark that fails keeps its
   red and takes a heavier edge, so it differs from a passing one without relying on hue. */
.tk--sys { font-size: 0.8125rem; margin-left: 0.3em; vertical-align: -0.2em; }
.tk--failed { border-width: 2px; border-color: var(--tk-ink); }
/* A mark with no glyph shows its letters, a little smaller to fit two or three. */
.tk--letters { font-size: 0.8125rem; }
/* The number a mark names beside its glyph (AJ3, N1). */
.tk-n { font-size: 0.85em; }
/* The accessible name: read by screen readers, never seen. */
.tk-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* A mark that opens its evidence or its note: a line under the badge says it is a link, it inverts on hover and
   focus, and the keyboard ring follows the badge. */
a.ev-mark { display: inline-block; border-radius: 0.5em; }
a.ev-mark .tk { box-shadow: 0 0.1em 0 var(--tk-ink); cursor: pointer; }
a.ev-mark:hover .tk, a.ev-mark:focus-visible .tk { background: var(--tk-ink); color: var(--tk-wash); }
a.ev-mark:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The key at the top of the library page, and a mark inside a checkbox label. */
.t2 .tk-key-head { font-size: var(--fs-h3); margin: 0 0 var(--s3); }
.t2 .tk-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s3) var(--s6); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.t2 .tk-key > li { display: flex; align-items: flex-start; gap: var(--s3); }
.t2 .tk-key .tk { flex: none; margin-top: 0.1em; vertical-align: baseline; }
label .tk { margin-right: 0.35em; }
@media (forced-colors: active) {
  .tk { border-color: CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .tk--failed { border-width: 3px; }
}
@media print { .tk { box-shadow: none; } }

/* The forecast completion date (BUILD-11; D-047), wherever staff see it: always marked Estimate, with the rule's
   basis beside it. The tag is a quiet label, never a status colour. On a compact row (the portfolio) the basis
   is read on hover (the line's title) and by a screen reader, and it is printed. */
.t2 .fc { display: grid; gap: 0.25rem; min-width: 0; }
.t2 .fc-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; }
.t2 .fc-tag { display: inline-flex; padding: 0.0625rem 0.4375rem 0.125rem; border: 1px solid var(--border-strong); border-radius: var(--r-ctl); color: var(--text-secondary); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; }
.t2 .fc-date { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.t2 .fc-diff, .t2 .fc-none { color: var(--text-secondary); font-size: var(--fs-small); }
.t2 .fc-basis { max-width: var(--measure); color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.5; overflow-wrap: anywhere; }
.t2 .fc--compact .fc-basis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media print {
  .t2 .fc--compact .fc-basis { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}

/* Client Room, files to assign: the file name and who sent it take the full width of the row and the
   assign form (request, team-only, Assign) sits beneath it at every width. Wide controls never go in
   a column beside text. */
.t2 .queue.cr-assign > li { flex-wrap: wrap; justify-content: flex-start; }
.t2 .queue.cr-assign > li > span:first-child { flex: 1 1 100%; min-width: 0; }

/* Client Room request page: the head aside holds Accept with a sentence on what accepting means (or the
   referral note). The aside takes its own full-width line under the title, the sentence runs across it,
   and Accept and the way back sit beneath, at every width. Before, the aside was max-content beside the
   title: the sentence ran on one line off the page and squeezed the title. */
.t2.scr-clientroom .t2-head:has(> .t2-head__aside > p) { flex-wrap: wrap; align-items: flex-start; }
.t2.scr-clientroom .t2-head__aside:has(> p) { flex: 1 1 100%; flex-wrap: wrap; }
.t2.scr-clientroom .t2-head__aside > p { order: -1; flex: 1 1 100%; min-width: 0; margin: 0; }

/* The way to change a record is a visible button, never a muted toggle: a fold that opens an edit form
   wears the button on its summary (<summary class="t2-btn t2-btn--secondary t2-btn--small">). */
.t2 details > summary.t2-btn { list-style: none; width: fit-content; }
.t2 details > summary.t2-btn::-webkit-details-marker { display: none; }
.t2 details[open] > summary.t2-btn { margin-bottom: var(--s4); }

/* The shared sign-off block on a converted page ({% signoff_block target engagement look="t2" %}): each
   sign-off and each Sign button in a wrapping row; the Sign button is secondary, so the page keeps its
   one solid button. Earlier sign-offs fold beneath. */
.t2 .t2-signoffs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.t2 .t2-signoffs > form { margin: 0; }
.t2 .t2-signoff { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: var(--fs-small); min-width: 0; overflow-wrap: anywhere; }
.t2 .t2-signoffs__earlier { flex-basis: 100%; }
.t2 .t2-signoffs__earlier > .t2-fold__body { display: grid; gap: 0.375rem; }

/* The compact Next step band on file pages (external interim review ER-U3, 1 November 2026): one line with the
   step, its button and the gate's count, so the page's work starts near the top. The reason, "After this" and
   the gate's links stay, each kept to a line; only the gate's tick strip and its one-line description are not
   drawn (the count and "See the open checks" say the same). My queue and the area page keep the full band. */
.t2 .t2-band--compact { grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 2rem; align-items: center; padding: 1rem 1.5rem 1rem 2rem; }
.t2 .t2-band--compact .t2-band__main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; }
.t2 .t2-band--compact .t2-band__eyebrow { flex-basis: 100%; }
.t2 .t2-band--compact .t2-band__title { flex: 1 1 18rem; margin-top: 0; font-size: 1.375rem; text-wrap: pretty; }
.t2 .t2-band--compact .t2-band__actions { margin-top: 0; }
.t2 .t2-band--compact .t2-band__why,
.t2 .t2-band--compact .t2-band__then { flex-basis: 100%; margin-top: 0; padding-top: 0; border-top: 0; font-size: var(--fs-small); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.t2 .t2-band--compact .t2-band__gate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.875rem; padding: 0 0 0 1.5rem; max-width: 22rem; }
.t2 .t2-band--compact .t2-band__label { flex-basis: 100%; }
.t2 .t2-band--compact .t2-band__figure { font-size: 1.5rem; }
.t2 .t2-band--compact .t2-ticks, .t2 .t2-band--compact .t2-band__note { display: none; }
@media (max-width: 64rem) {
  .t2 .t2-band--compact { grid-template-columns: 1fr; }
  .t2 .t2-band--compact .t2-band__gate { padding: 0.5rem 0 0; border-left: 0; border-top: 1px solid var(--band-line); max-width: none; }
}

/* A long lede on a file page, two lines until "Read more" (ER-U3; static/thread/js/lede.js) */
.t2 .t2-lede.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.t2 .t2-lede__more { justify-self: start; align-self: flex-start; margin-top: 0.25rem; padding: 0.25rem 0; border: 0; background: none; color: var(--action); font: inherit; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
@media print { .t2 .t2-lede.is-clamped { display: block; -webkit-line-clamp: unset; } .t2 .t2-lede__more { display: none; } }

/* A folded gate still names its open checks in view (ER-U2) */
.t2 .t2-gate__summary { display: grid; gap: 0.375rem; margin: 0.25rem 0 0.75rem; }
.t2 .t2-gate__count { font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-gate__names { display: grid; gap: 0.25rem; padding-left: 1.125rem; list-style: disc; font-size: var(--fs-ui); }