/* T2 Errors (staff screen) — public/t2Errors.js draws into #screen-t2errors.
   Every class is t2e- prefixed: this shares one page with the whole staff app. */

#screen-t2errors { --t2e-orange: #EA580C; }
/* The whole width of the screen (owner's request): six tiles in a row and a
   table with eight columns need it more than a reading-width card does. */
#staffApp > main:has(#screen-t2errors.active) { max-width: none; }


/* Six tiles, one row, two lines each (label / number + note). Too narrow for
   six: the row scrolls sideways rather than wrapping (owner's rule). */
.t2e-stats { display: grid; grid-template-columns: repeat(6, minmax(118px, 1fr)); gap: 8px; margin-top: 16px; overflow-x: auto; padding: 2px; }
.t2e-stat { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.t2e-stat:hover { border-color: var(--indigo); }
.t2e-stat.on { box-shadow: 0 0 0 2px var(--indigo); border-color: var(--indigo); }
.t2e-stat.mine { background: var(--indigo-light); border-color: #F3C4CB; }
.t2e-stat-k { font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2e-stat-l2 { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; min-width: 0; }
.t2e-stat-v { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; flex: none; }
.t2e-stat-v.warn { color: var(--amber); }
.t2e-stat-v.bad { color: var(--indigo); }
.t2e-stat-s { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.t2e-tabs { display: flex; gap: 2px; margin-top: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; }
.t2e-tabs button { border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted); padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.t2e-tabs button.on { color: var(--indigo); border-bottom-color: var(--indigo); }
.t2e-tabs .c { font-weight: 500; opacity: .65; margin-left: 4px; }

.t2e-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.t2e-fbar input[type=text] { flex: 1 1 280px; min-width: 0; }
.t2e-fbar select { max-width: 240px; }
.t2e-fbar select[hidden] { display: none; }
@media (max-width: 760px) { .t2e-fbar select, .t2e-fbar .btn { flex: 1 1 45%; max-width: none; } }
.t2e-active { flex-basis: 100%; font-size: 12px; color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--border); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.t2e-active:empty { display: none; }
.t2e-chip { border: 1px solid #F3C4CB; background: var(--indigo-light); color: var(--indigo); font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.t2e-clear { border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: underline; cursor: pointer; }

/* Open tasks per staff member, most first. */
.t2e-staffbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.t2e-staffbar.focus { border-color: var(--indigo); box-shadow: 0 0 0 2px var(--indigo-light); background: var(--surface); }
.t2e-staffbar-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); margin-right: 4px; }
.t2e-staffbar button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 10px 4px 4px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.t2e-staffbar button.all { padding-left: 10px; }
.t2e-staffbar button.on { background: var(--text); border-color: var(--text); color: #fff; }
.t2e-av { width: 22px; height: 22px; border-radius: 50%; background: var(--indigo-light); color: var(--indigo); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.t2e-n { font-weight: 500; opacity: .7; }
.t2e-od { color: var(--indigo); font-weight: 700; font-size: 11.5px; }
.t2e-staffbar button.on .t2e-od { color: #FFB4C0; }
.t2e-me { font-size: 10px; font-weight: 700; background: var(--indigo); color: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }

.t2e-tbl-wrap { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.t2e-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.t2e-tbl th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--bg); padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; }
.t2e-tbl th.sortable { cursor: pointer; }
.t2e-tbl th.sortable:hover { color: var(--text); }
.t2e-arr { color: var(--indigo); margin-left: 3px; }
.t2e-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.t2e-tbl tr.r { cursor: pointer; }
.t2e-tbl tr.r:hover td { background: var(--bg); }
.t2e-tbl tr.r.sel td { background: var(--indigo-light); }
.t2e-tbl td.nowrap { white-space: nowrap; }
.t2e-title-cell { min-width: 220px; max-width: 540px; }
/* Long text: titles stop at 2 lines (hover for the whole title), text at 2
   lines with an inline "Show all" box; the side panel shows it in full. */
.t2e-t { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.t2e-s { color: var(--text-muted); font-size: 12px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.t2e-longmeta { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.t2e-len { font-size: 10.5px; font-weight: 700; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; padding: 0 6px; }
.t2e-link { border: none; background: none; color: var(--indigo); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0; }
.t2e-link:hover { text-decoration: underline; }
.t2e-fulltext { margin-top: 6px; max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.5; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); cursor: auto; }
.t2e-cut { color: var(--amber); font-weight: 600; }
.t2e-hit { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.t2e-dim { color: var(--text-dim); font-size: 11.5px; }
.t2e-clink { color: var(--indigo); font-weight: 600; cursor: pointer; border: none; background: none; font: inherit; padding: 0; text-align: left; }
.t2e-clink:hover { text-decoration: underline; }
.t2e-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 12px; color: var(--text-muted); gap: 10px; flex-wrap: wrap; }
.t2e-pager { display: flex; gap: 4px; flex-wrap: wrap; }
.t2e-pager button { border: 1px solid var(--border); background: var(--surface); border-radius: 7px; padding: 4px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.t2e-pager button.on { background: var(--text); color: #fff; border-color: var(--text); }
.t2e-pager button:disabled { opacity: .4; cursor: default; }
.t2e-empty { padding: 40px 18px; text-align: center; color: var(--text-dim); font-size: 13px; }
@media (max-width: 760px) { .t2e-hide-sm { display: none; } }

.t2e-kind { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.t2e-kind.note { background: var(--violet-light); color: var(--violet); }
.t2e-kind.task { background: var(--blue-light); color: var(--blue); }
.t2e-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.t2e-pill.open { background: var(--amber-light); color: var(--amber); }
.t2e-pill.done { background: var(--success-light); color: var(--success); }
.t2e-pill.overdue { background: var(--indigo-light); color: var(--indigo); }
.t2e-pill.grey { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.t2e-prio { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.t2e-prio.CRITICAL { color: var(--indigo); }
.t2e-prio.ESSENTIAL { color: var(--amber); }
.t2e-late { color: var(--indigo); font-weight: 600; }

/* By client */
.t2e-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
.t2e-cc { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.t2e-cc-head { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.t2e-cc-name { font-weight: 700; overflow-wrap: anywhere; }
.t2e-cc-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.t2e-cc-pills { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.t2e-cc-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); padding: 10px 14px 2px; }
.t2e-cc-row { display: flex; gap: 10px; padding: 8px 14px; cursor: pointer; border-left: 3px solid transparent; }
.t2e-cc-row:hover { background: var(--bg); }
.t2e-cc-row.sel { background: var(--indigo-light); border-left-color: var(--indigo); }
.t2e-cc-row .m { flex: 1; min-width: 0; }
.t2e-cc-row .t { font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t2e-cc-row .s { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.t2e-cc-row .side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.t2e-cc-more { padding: 6px 14px 0; font-size: 12px; color: var(--text-dim); }
.t2e-cc-foot { padding: 8px 14px 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Side panel — moved to <body> by t2Errors.js (a transformed .screen would
   turn position:fixed into "fixed to the screen element"). */
.t2e-dr-bg { position: fixed; inset: 0; background: rgba(32,23,23,.25); display: none; z-index: 1000; }
.t2e-dr-bg.open { display: block; }
.t2e-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -14px 0 40px rgba(60,20,20,.1); display: flex; flex-direction: column; transform: translateX(105%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s; z-index: 1001; }
.t2e-drawer.open { transform: none; visibility: visible; transition: transform .18s ease; }
.t2e-dr-head { display: flex; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.t2e-dr-head h2 { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.t2e-dr-head h2.long { font-size: 15px; }
.t2e-dr-sub { margin-top: 6px; font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.t2e-dr-x { margin-left: auto; font-size: 22px; color: var(--text-muted); line-height: 1; border: none; background: none; cursor: pointer; padding: 0 2px; align-self: flex-start; }
.t2e-dr-body { flex: 1; overflow-y: auto; padding: 14px 18px; font-size: 13.5px; }
.t2e-fields { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 0; }
.t2e-fields dt { color: var(--text-dim); font-size: 12.5px; }
.t2e-fields dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.t2e-fields .sep { grid-column: 1 / -1; border-top: 1px solid var(--border); margin: 4px 0; }
.t2e-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.t2e-msg { margin-bottom: 16px; }
.t2e-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.t2e-msg-meta { font-size: 11.5px; color: var(--text-dim); }
.t2e-msg-v { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.t2e-msg-v.clamped { max-height: 230px; overflow: hidden; position: relative; }
.t2e-msg-v.clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(rgba(250,250,249,0), var(--bg)); }
.t2e-msg-v.full { max-height: max(60vh, 360px); overflow: auto; position: relative; }
.t2e-msg-v.empty { color: var(--text-dim); font-style: italic; }
.t2e-more { display: block; width: 100%; margin-top: 6px; padding: 7px; border: 1px dashed var(--border); border-radius: 9px; background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.t2e-more:hover { border-color: var(--indigo); color: var(--indigo); }
.t2e-cutbanner { background: var(--amber-light); border: 1px solid #FCD9A6; color: #92400E; border-radius: 9px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; margin-bottom: 8px; }
.t2e-rel { margin-top: 18px; }
.t2e-rel-list { border-left: 2px solid var(--border); margin: 6px 0 0 6px; }
.t2e-rel-item { position: relative; padding: 6px 0 8px 14px; cursor: pointer; }
.t2e-rel-item::before { content: ""; position: absolute; left: -6px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text-dim); }
.t2e-rel-item.task::before { border-color: var(--blue); }
.t2e-rel-item.note::before { border-color: var(--violet); }
.t2e-rel-item.cur { background: var(--indigo-light); border-radius: 0 8px 8px 0; }
.t2e-rel-item .t { font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t2e-rel-item .s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.t2e-absent { margin-top: 12px; font-size: 12px; color: var(--text-dim); }
.t2e-absent s { color: var(--text-muted); }

/* Client Overview: the T2 errors module's rows reuse .ov-row; these are its extras.
   Titles can run to 500 characters, so they stop at two lines (hover for all). */
.ov-t2-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov-t2-kind { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; margin-right: 4px; }
.ov-t2-kind.note { background: var(--violet-light); color: var(--violet); }
.ov-t2-kind.task { background: var(--blue-light); color: var(--blue); }


/* A laptop keeps the table on screen: Completed is the first column to go. */
@media (max-width: 1440px) { .t2e-hide-md { display: none; } }

/* Phones: each row is a card — status, then the title across the full
   width, then the rest on one wrapping line. Sort with the Sort box. */
@media (max-width: 760px) {
  .t2e-tbl thead { display: none; }
  .t2e-tbl, .t2e-tbl tbody { display: block; }
  .t2e-tbl tr.r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px; border-bottom: 1px solid var(--border); }
  .t2e-tbl tr.r td { display: block; padding: 0; border: none; background: none; font-size: 12.5px; }
  .t2e-tbl tr.r td.t2e-title-cell { order: -1; flex: 1 1 100%; min-width: 0; max-width: none; font-size: 13.5px; }
  .t2e-tbl tr.r.sel { background: var(--indigo-light); }
  .t2e-tbl tr.r td.t2e-hide-md, .t2e-tbl tr.r td.t2e-hide-sm { display: none; }
  .t2e-tbl tr.r td.t2e-who { min-width: 0; }
  .t2e-tbl tr.r td.t2e-client { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
  .t2e-tbl-wrap { overflow-x: visible; }
  /* Thumb-sized targets. */
  .t2e-link, .t2e-clink { min-height: 44px; display: inline-flex; align-items: center; }
  .t2e-chip, .t2e-staffbar button, .t2e-pager button { min-height: 44px; }
  .t2e-pager button { min-width: 44px; }
}

/* Keyboard users see where they are. */
.t2e-tbl tr.r:focus-visible, .t2e-stat:focus-visible, .t2e-cc-row:focus-visible, .t2e-rel-item:focus-visible,
.t2e-staffbar button:focus-visible, .t2e-chip:focus-visible, .t2e-tbl th.sortable:focus-visible,
.t2e-tabs button:focus-visible, .t2e-link:focus-visible, .t2e-clink:focus-visible, .t2e-pager button:focus-visible {
  outline: 2px solid var(--indigo); outline-offset: 2px;
}
.t2e-tbl tr.r:focus-visible { outline-offset: -2px; }

.t2e-who { min-width: 110px; }

/* No client chosen: the page asks for one (it's a client view). */
.t2e-choose { margin-top: 18px; padding: 36px 20px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.t2e-choose-t { font-size: 15px; font-weight: 600; color: var(--text); }
.t2e-choose .btn { margin-top: 6px; }
.t2e-choose .t2e-link { margin-top: 2px; }

/* Whose records these are (the header scrolls away on a long list). */
#t2eWho { margin-top: 14px; font-size: 14px; line-height: 1.5; }
#t2eWho:empty { display: none; }
#t2eWho .t2e-link { font-size: 12.5px; margin-left: 4px; }

/* Thumb-sized on a phone (UI test C7). */
@media (max-width: 760px) {
  #screen-t2errors .t2e-tabs button { min-height: 44px; }
  #screen-t2errors .t2e-fbar input[type=text], #screen-t2errors .t2e-fbar select, #screen-t2errors .t2e-fbar .btn { min-height: 44px; }
  #t2eExport { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
}
/* Narrow phones: one control per line, so no dropdown clips its label. */
@media (max-width: 480px) {
  #screen-t2errors .t2e-fbar select, #screen-t2errors .t2e-fbar .btn { flex: 1 1 100%; }
}

/* AI analysis view */
.t2a { margin-top: 14px; }
.t2a-intro, .t2a-meta { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.t2a-run { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.t2a-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.t2a-tile { border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; background: var(--surface); min-width: 0; }
.t2a-tile .k { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.t2a-tile .v { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.t2a-tile .s { font-size: 11.5px; color: var(--text-dim); }
.t2a-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.t2a-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); min-width: 0; }
.t2a-card h3 { font-size: 14px; margin: 0 0 8px; }
.t2a-chart { position: relative; height: 240px; }
.t2a-summary { border-left: 3px solid var(--indigo); padding: 4px 0 4px 12px; margin: 12px 0; font-size: 14px; line-height: 1.55; }
.t2a-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; }
.t2a-year { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; padding: 6px 0; border-top: 1px solid var(--border); }
.t2a-year:first-of-type { border-top: none; }
.t2a-year b { flex: none; width: 44px; }
.t2a-theme { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.t2a-theme:first-of-type { border-top: none; }
.t2a-theme .n { font-weight: 700; }
.t2a-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--indigo-light); color: var(--indigo); margin-left: 6px; }
.t2a-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.t2a-empty { font-size: 13px; color: var(--text-dim); padding: 14px 0; }
.t2a-tag-once { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }

/* AI analysis: tables and the year selector (nothing needs hovering) */
.t2a-wide { margin-top: 12px; }
.t2a-scroll { overflow-x: auto; }
.t2a-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.t2a-tbl th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.t2a-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.t2a-tbl .num { text-align: right; white-space: nowrap; }
.t2a-tbl th.num { text-align: right; }
.t2a-heat td.has { background: rgba(79, 70, 229, calc(0.08 + var(--i) * 0.45)); font-weight: 700; text-align: center; }
.t2a-heat td.num { text-align: center; }
.t2a-heat td.tot { font-weight: 700; }
.t2a-heat tr.top td { font-size: 12px; border-top: 2px solid var(--border); }
.t2a-heat td.who { font-weight: 600; white-space: nowrap; }
.t2a-mini { margin-top: 8px; }
.t2a-split { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .t2a-split { grid-template-columns: 1fr; } }
.t2a-pie .t2a-chart { height: 260px; }
.t2a-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; }
.t2a-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 3px; min-width: 60px; overflow: hidden; }
.t2a-bar i { display: block; height: 100%; }
.t2a-yr { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); margin: 0 4px 2px 0; }
.t2a-tag-warn { background: #FEF3C7; color: #92400E; margin-left: 4px; }
.t2a-years { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.t2a-years button { border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.t2a-years button.on { background: var(--indigo-light); border-color: #F3C4CB; color: var(--indigo); }
.t2a-years .c { font-weight: 500; opacity: .65; margin-left: 5px; }
.t2a-h4 { font-size: 13px; margin: 14px 0 6px; }
.t2a-src { border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 11.5px; color: var(--indigo); border-radius: 6px; padding: 1px 7px; margin: 0 4px 3px 0; cursor: pointer; white-space: nowrap; }
.t2a-src:hover { border-color: var(--indigo); }

/* Year-on-year trend: coloured key, ringed numbers, red/green change */
.t2a-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.t2a-lg { color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.t2a-chg { font-weight: 700; }
.t2a-good { color: #15803D; }
.t2a-bad { color: #B91C1C; }
.t2a-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.t2a-pick { font-size: 13px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.t2a-pick select { font: inherit; font-size: 13px; padding: 4px 8px; }

/* Modern look: trend card, change chips, pager */
.t2a-card[data-t2a-section="chart-trend"] { background: linear-gradient(180deg, var(--surface) 0%, #fff 100%); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12); }
.t2a-card[data-t2a-section="chart-trend"] .t2a-legend { margin: 6px 0 12px; }
.t2a-card[data-t2a-section="chart-trend"] .t2a-tbl th { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.t2a-card[data-t2a-section="chart-trend"] .t2a-tbl td { border-bottom: 1px solid rgba(148, 163, 184, .18); padding: 8px; }
.t2a-card[data-t2a-section="chart-trend"] .t2a-tbl tbody tr:hover { background: rgba(79, 70, 229, .04); }
.t2a-chg { display: inline-block; font-weight: 700; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(148, 163, 184, .16); color: var(--text-muted); }
.t2a-chg.t2a-good { background: #DCFCE7; color: #15803D; }
.t2a-chg.t2a-bad { background: #FEE2E2; color: #B91C1C; }
.t2a-pick select { border-radius: 8px; }
.t2a-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.t2a-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.t2a-pager button { border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); min-width: 32px; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.t2a-pager button.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.t2a-pager button:disabled { opacity: .45; cursor: default; }
.t2a-pager button:not(:disabled):not(.on):hover { border-color: var(--indigo); color: var(--indigo); }
.t2a-gap { color: var(--text-dim); padding: 0 2px; }

/* Trend card: headline, sparkline, repeat-rate strip */
.t2a-hero { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 14px; }
@media (max-width: 640px) { .t2a-hero { grid-template-columns: 1fr; } }
.t2a-hero-k { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.t2a-hero-v { font-family: 'Space Grotesk', sans-serif; font-size: 56px; font-weight: 700; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.t2a-hero-d { font-size: 13px; font-weight: 600; margin-top: 2px; }
.t2a-flat { color: var(--text-muted); }
.t2a-spark { width: 100%; height: auto; max-height: 150px; overflow: visible; }
.t2a-sp-n { font: 700 13px 'Space Grotesk', sans-serif; fill: var(--text); }
.t2a-sp-y { font-size: 11px; font-weight: 600; fill: var(--text-muted); }
.t2a-sp-base { stroke: var(--border); stroke-width: 1; }
.t2a-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 4px; margin-bottom: 14px; }
.t2a-cell { border-radius: 8px; padding: 7px 0 5px; text-align: center; border: 1px solid var(--border); }
.t2a-cell b { display: block; font-size: 13px; }
.t2a-cell small { display: block; font-size: 11px; color: var(--text-muted); }

/* Repeat rate heading, plain numbers with thin bars, and a left card that fills its row */
.t2a-rr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 8px; }
.t2a-rr-tag { font-size: 12px; font-weight: 700; color: var(--indigo); background: var(--indigo-light); border-radius: 6px; padding: 2px 9px; }
.t2a-rr-d { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; flex: 1 1 240px; }
.t2a-n { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.t2a-b { display: block; width: 100%; max-width: 72px; min-width: 36px; height: 4px; border-radius: 2px; background: rgba(148, 163, 184, .22); margin: 3px 0 0 auto; overflow: hidden; }
.t2a-b i { display: block; height: 100%; border-radius: 2px; }
.t2a-mini td.yr { font-weight: 600; white-space: nowrap; }
.t2a-trend-scroll { max-height: 330px; overflow-y: auto; }
.t2a-trend-scroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.t2a-card[data-t2a-section="chart-year"] { display: flex; flex-direction: column; }
.t2a-card[data-t2a-section="chart-year"] .t2a-chart { flex: 1 1 auto; height: auto; min-height: 300px; }
.t2a-card[data-t2a-section="chart-year"] .t2a-chart canvas { position: absolute; left: 0; top: 0; }

/* Kind pop-up: the count in Share of errors by kind opens that kind's errors */
.t2a-count { font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--indigo); background: var(--indigo-light); border: 1px solid transparent; border-radius: 8px; min-width: 38px; padding: 2px 10px; cursor: pointer; }
.t2a-count:hover { border-color: var(--indigo); }
.t2a-count:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.t2a-modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: none; z-index: 1100; }
.t2a-modal-bg.open { display: block; }
.t2a-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--surface, #fff); border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35); display: none; flex-direction: column; z-index: 1101; }
.t2a-modal.open { display: flex; }
.t2a-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; border-bottom: 1px solid var(--border); }
.t2a-modal-head h2 { font-size: 17px; margin: 0 0 4px; }
.t2a-modal-head .t2a-meta { margin-top: 2px; }
.t2a-modal-x { border: none; background: none; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.t2a-modal-x:hover { color: var(--text); }
.t2a-modal-body { padding: 4px 20px; overflow-y: auto; min-height: 0; }
.t2a-modal-body .t2a-tbl thead th { position: sticky; top: 0; background: var(--surface, #fff); z-index: 1; }
.t2a-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 14px; border-top: 1px solid var(--border); }
.t2a-tbl tr[data-t2a-krow] { transition: background .15s ease; }
.t2a-tbl tr.t2a-hl { background: rgba(79, 70, 229, .07); }

/* Source chips: a note and a task look different; filters wrap neatly */
.t2a-src-note { color: #475569; background: #F1F5F9; }
.t2a-src-task { color: #4338CA; background: #EEF2FF; border-color: #C7D2FE; }
.t2a-picker { row-gap: 8px; }
.t2a-pick select { max-width: 220px; }
/* Assign a task: the popup, and what marks a task the portal assigned */
.t2e-portalmeta { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.t2e-src.portal { color: var(--indigo); font-weight: 600; }
.t2e-shot { margin: 0 0 16px; }
.t2e-shot-view { margin-top: 8px; }
.t2e-shot-img { display: block; max-width: 100%; max-height: 320px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.modal-dialog.t2a-dialog { max-width: 760px; padding: 32px 36px; text-align: left; }
.t2a-dialog .field { margin-bottom: 14px; }
.t2a-dialog label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.t2a-dialog input[type=text], .t2a-dialog select, .t2a-dialog textarea { width: 100%; box-sizing: border-box; }
.t2a-dialog input[readonly] { background: var(--bg); color: var(--text-muted); }
.t2a-dialog input[type=text][hidden] { display: none; }
.t2a-dialog select + input[type=text] { margin-top: 8px; }
.t2a-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.t2a-hint { font-weight: 400; color: var(--text-dim); font-size: 11.5px; }
.t2a-file { font-size: 12.5px; font-weight: 600; color: var(--indigo); overflow-wrap: anywhere; }
.t2a-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 560px) { .t2a-row { grid-template-columns: minmax(0, 1fr); } }
.t2a-dialog textarea { min-height: 130px; }
.t2a-dialog .modal-title { font-size: 22px; }
/* The file chooser: the native input covers the whole box (click, keyboard and drop all work) and is hidden behind a modern drop zone */
.t2a-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 20px 16px; border: 2px dashed var(--border); border-radius: 12px; background: var(--bg); color: var(--text-muted); transition: border-color .15s, background .15s; }
.t2a-drop:hover, .t2a-drop:focus-within { border-color: var(--indigo); background: var(--indigo-light); }
.t2a-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.t2a-drop-ic { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--indigo); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.t2a-drop-txt { font-size: 13.5px; color: var(--text); }
.t2a-drop-txt b { color: var(--indigo); }
.t2a-drop-sub { font-size: 11.5px; color: var(--text-dim); }
.t2a-drop .t2a-file { margin-top: 4px; position: relative; pointer-events: none; }

/* What the assigner and the assignee can do to a portal task, from its panel */
.t2e-act { margin: 0 0 16px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.t2e-act .field { margin-bottom: 10px; }
.t2e-act label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.t2e-act textarea { width: 100%; box-sizing: border-box; min-height: 90px; }
.t2e-act-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.t2e-upload { position: relative; cursor: pointer; }
.t2e-upload.disabled { opacity: .55; pointer-events: none; }
.t2e-shot-item { margin-bottom: 8px; }
.t2e-act .alert { margin: 10px 0 0; }
.modal-dialog.t2a-dialog { position: relative; }
.t2a-x { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.t2a-x:hover, .t2a-x:focus-visible { background: var(--bg); color: var(--text); }
/* .alert sets its own display, which beats the hidden attribute: an empty error box showed as a pink bar */
.t2a-dialog .alert[hidden], .t2e-act .alert[hidden] { display: none; }

/* Staff Tasks (view 3): three tabs over one table, with counts and turnaround above it */
.t2s { margin-top: 14px; }
.t2s-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.t2s-title { font-size: 18px; font-weight: 700; }
.t2s-btns { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.t2s-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0; }
.t2s-stat { display: block; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; transition: background .12s, border-color .12s; }
.t2s-stat:hover { background: var(--bg); }
.t2s-stat.sel { background: var(--indigo-light); border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.t2s-stat:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.t2s-stat.red { background: var(--indigo-light); border-color: #F3C4CB; }
.t2s-stat .k { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.t2s-stat .v { display: block; font-size: 22px; font-weight: 700; }
.t2s-stat .v small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.t2s-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.t2s-bar label { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.t2s-chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.t2s-chip.on { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.t2s-search { margin-left: auto; min-width: 220px; flex: 0 1 280px; }
.t2s-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.t2s-tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.t2s-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.t2s-tbl tbody tr:last-child td { border-bottom: none; }
.t2s-none { text-align: center; color: var(--text-muted); padding: 28px 12px; }
.t2s-cat { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.t2s-who { display: inline-flex; align-items: center; gap: 6px; }
.t2s-av { width: 22px; height: 22px; border-radius: 50%; background: var(--indigo-light); color: var(--indigo); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.t2s-me { font-size: 10.5px; font-weight: 700; background: #EFF6FF; color: #2563EB; border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.t2s-age { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.t2s-age.old { color: var(--indigo); font-weight: 700; }
.t2s-more { padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); border-top: 1px solid var(--border); }
.t2s-legend { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
@media (max-width: 760px) { .t2s-search { margin-left: 0; flex: 1 1 100%; } }
.t2s-open { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; }
.t2s-open:hover { color: var(--indigo); text-decoration: underline; }
.t2s-act { white-space: nowrap; text-align: right; }
/* Complete, then the edit and delete icons, side by side on one line. */
.t2s-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.t2s-acts > * { flex: 0 0 auto; }
.t2s-icon.icon-btn-danger:hover { color: #DC2626; border-color: #DC2626; background: #FEF2F2; }

/* The header: the Call Dashboard's hero (.cuv-hero in index.html) with the view switch inside it, owner's choice
   "option 2" of the hero mockups, 2026-10-23. */
.cuv-hero.t2e-hero { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 4px; }
.t2e-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; width: 100%; }
.t2e-title { margin: 2px 0 4px; }
.t2e-lede { margin: 0; }
.t2e-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.t2e-hero-side #t2eAssignBtn { box-shadow: 0 4px 12px rgba(200,16,46,.25); }
.t2e-sync { font-size: 12px; color: var(--text-muted); line-height: 1.5; text-align: right; }
.t2e-sync b { color: var(--text); font-weight: 600; }
.t2e-syncchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px; }
.t2e-live { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px #DCFCE7; flex: none; }
.t2e-views { display: inline-flex; align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 3px; gap: 2px; }
.t2e-views[hidden] { display: none; }
.t2e-views button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 6px 16px; border-radius: 99px; cursor: pointer; }
.t2e-views button:hover { color: var(--text); }
.t2e-views button.on { background: var(--indigo); color: #fff; box-shadow: 0 2px 6px rgba(200,16,46,.3); }
.t2e-views button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
@media (max-width: 560px) {
  .t2e-hero-side { align-items: stretch; width: 100%; }
  .t2e-hero-side #t2eAssignBtn { width: 100%; }
  .t2e-sync { text-align: left; }
  .t2e-views { align-self: stretch; }
  .t2e-views button { flex: 1 1 0; padding-inline: 8px; }
}
.t2s-count { font-size: 12.5px; color: var(--text-muted); margin: 0 0 8px; }
/* .btn sets its own display, which beat the hidden attribute: with no client chosen the button still showed. */
#t2eAssignBtn[hidden] { display: none; }
/* The Staff Tasks table scrolls inside its own box at every width (the Records table's wrapper stops doing that on a phone and would make the whole page scroll sideways). */
.t2s-wrap { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
/* Wide enough to read: on a narrow screen the box scrolls sideways rather than crushing the columns (names broke letter by letter, and the "you" badge stacked). */
.t2s-tbl { min-width: 780px; }
.t2s-tbl td:first-child { min-width: 230px; }
.t2s-who, .t2s-me { white-space: nowrap; }

/* My Tasks and Firm Wide (owner's option 1, 2026-10-26) */
.t2e-views-sep { width: 1px; background: var(--border); margin: 5px 4px; align-self: stretch; }
.t2s-row { cursor: pointer; }
.t2s-row:hover td { background: var(--bg); }
.t2s-row:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.t2s-sec { margin-top: 16px; }
.t2s-sec-h { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.t2s-pill { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 7px; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.t2s-export { margin-left: auto; }
.t2f-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.t2f-mode { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 3px; gap: 2px; }
.t2f-mode button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 5px 15px; border-radius: 99px; cursor: pointer; }
.t2f-mode button.on { background: var(--indigo); color: #fff; box-shadow: 0 2px 6px rgba(200,16,46,.3); }
.t2f-mode button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.t2f-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.t2f-in { flex: 1 1 200px; min-width: 0; max-width: 320px; }
.t2f-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.t2f-tbl { min-width: 720px; }
.t2f-tbl td:first-child { min-width: 180px; }
.t2f-tbl th:not(:first-child), .t2f-tbl td:not(:first-child) { text-align: center; }
.t2f-n { border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px; color: var(--text); cursor: pointer; padding: 3px 12px; border-radius: 8px; }
.t2f-n:hover, .t2f-n:focus-visible { background: var(--indigo-light); color: var(--indigo); outline: none; }
.t2f-n.hot { color: var(--indigo); }
.t2f-zero { color: var(--text-dim); }
.t2f-avg { font-weight: 600; }
.t2f-total td { background: var(--bg); border-top: 2px solid var(--border); }
.t2f-drill { margin-top: 18px; }
.t2f-drill-h { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.t2f-drill-h .t2e-link { margin-left: auto; }
@media (max-width: 560px) { .t2f-in { max-width: none; flex-basis: 100%; } }
.t2s-co { color: var(--text-muted); font-size: 12px; }

/* My Tasks: each list (Assigned to me, Assigned by me) scrolls inside its own box instead of lengthening the page. */
.t2s-sec .t2s-wrap { max-height: 420px; overflow-y: auto; }
.t2s-sec .t2s-tbl th { position: sticky; top: 0; z-index: 1; background: var(--surface, #fff); }

.t2e-prog { margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.t2e-prog[hidden] { display: none; }

.t2a-live { max-height: 200px; overflow-y: auto; margin: 0 0 14px; padding: 8px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; font-size: 13px; line-height: 1.5; }
.t2a-live > div + div { margin-top: 3px; }
.t2a-cost { margin-left: 12px; font-size: 12.5px; color: var(--text-muted); }
.t2a-tile .v.t2a-v-long { font-size: 16px; line-height: 1.25; overflow-wrap: break-word; }
.t2a-stale { opacity: 0.45; pointer-events: none; user-select: none; }
.t2a-stale-note { margin: 4px 0 8px; }
.t2a-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .t2a-cost { display: block; margin: 4px 0 0; } }