/* 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 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 reads as a link on the selection page (not yet converted). */
a.ev-mark { text-decoration: none; }
a.ev-mark .chip { text-decoration: underline; text-underline-offset: 0.15em; }
a.ev-mark:hover .chip { background: var(--surface-sunk); }
/* 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; }
}

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