/* 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; }