/*
 * TMS (DigiTasks) phase 2 components, v1.0, 2026-10-22.
 * Load after tokens.css and components.css. The phase 1 components stay as they are; this file only adds.
 * Same CSP rules: no inline styles. Dynamic values come from JS through the CSSOM:
 *   --w  width in %  (bars, fills)        el.style.setProperty('--w', '75%')
 *   --t  marker position in % (targets, time passed)
 *   --h  height in px (mini columns)
 *   flex-grow on segments                 el.style.flexGrow = 6
 * Screens: PHASE2.md. Reference markup: demo/phase2.html.
 */

/* ======================================================================
   Shared
   ====================================================================== */

/* Read / Edit switch: .tms-seg with links. The current mode carries aria-current="page". */
a.tms-seg__btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tms-seg__btn[aria-current="page"] {
  background: var(--surface); box-shadow: 0 1px 2px rgba(16, 42, 48, 0.12); color: var(--teal-700); font-weight: 700;
}
.tms-seg--md .tms-seg__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 13px; }

/* Progress meter with the weak scale. Put a band class on the meter or on a parent. */
.tms-meter { position: relative; display: block; flex: none; width: var(--meter-w, 60px); height: 6px; border-radius: var(--r-pill); background: var(--line-card); }
.tms-meter--fluid { --meter-w: 100%; }
.tms-meter--md { height: 8px; }
.tms-meter--lg { height: 12px; }
.tms-meter__fill { display: block; height: 100%; width: var(--w, 0%); min-width: 2px; border-radius: var(--r-pill); background: var(--band, var(--teal-600)); }
.tms-meter__tick { position: absolute; top: -3px; bottom: -3px; left: var(--t, 0%); width: 2px; border-radius: 1px; background: var(--ink); }
/* Bands: 100 complete · 61–99 on its way · 41–60 weak 1 · 21–40 weak 2 · 0–20 weak 3 */
.tms-band--done { --band: var(--green);    --band-text: var(--green-text); }
.tms-band--ok   { --band: var(--teal-600); --band-text: var(--ink); }
.tms-band--w1   { --band: var(--amber);    --band-text: var(--amber-text); }
.tms-band--w2   { --band: var(--orange);   --band-text: var(--orange-text); }
.tms-band--w3   { --band: var(--rose);     --band-text: var(--rose-text); }
.tms-pct { font-weight: 700; color: var(--band-text, var(--ink)); white-space: nowrap; }

/* Small mini ring (34 px). The arc length is an SVG attribute: stroke-dasharray="<pct × 0.8796> 87.96". */
.tms-miniring { display: block; width: 34px; height: 34px; flex: none; }
.tms-miniring__track { stroke: var(--teal-50); }
.tms-miniring__fill { stroke: var(--band, var(--teal-600)); }

/* Large ring with a sub label (Objectives summary, Reports OKR) */
.tms-ring--lg { width: 112px; height: 112px; }
.tms-ring--lg .tms-ring__value { flex-direction: column; font-size: 28px; line-height: 30px; }
.tms-ring__sub { font-size: 11.5px; line-height: 14px; font-weight: 500; color: var(--muted); }

/* Switch: <button type="button" role="switch" aria-checked="true|false" class="tms-switch" aria-labelledby="…"> */
.tms-switch {
  position: relative; flex: none; width: 40px; height: 22px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: #B6C2C6; cursor: pointer;
}
.tms-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--r-pill);
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left .15s ease;
}
.tms-switch[aria-checked="true"] { background: var(--teal-700); }
.tms-switch[aria-checked="true"]::after { left: 21px; }
.tms-switch:disabled { opacity: .5; cursor: not-allowed; }
.tms-switch--lg { width: 46px; height: 26px; }
.tms-switch--lg::after { width: 20px; height: 20px; }
.tms-switch--lg[aria-checked="true"]::after { left: 23px; }
/* A switch with its label inside one button ("Counts towards overall") */
.tms-switchbtn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; color: var(--text-2); cursor: pointer; }
.tms-switchbtn__track { position: relative; width: 34px; height: 20px; flex: none; border-radius: var(--r-pill); background: #C5D0D4; }
.tms-switchbtn__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r-pill); background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: left .15s ease; }
.tms-switchbtn[aria-checked="true"] .tms-switchbtn__track { background: var(--teal-700); }
.tms-switchbtn[aria-checked="true"] .tms-switchbtn__track::after { left: 16px; }
/* A row that explains a switch */
.tms-switchrow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--table-head); }
.tms-switchrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tms-switchrow__title { font-weight: 600; color: var(--ink); }
.tms-switchrow__note { font-size: var(--fs-small); line-height: 17px; color: var(--muted); }

/* Radio cards: <label class="tms-choice"><input type="radio" …> …</label>.
   Browsers without :has() need the .is-checked class set from JS. */
.tms-choices { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tms-choices > legend { padding: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tms-choice { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.tms-choice input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--teal-700); }
.tms-choice__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tms-choice__label { font-weight: 700; color: var(--ink); }
.tms-choice__desc { font-size: var(--fs-small); line-height: 17px; color: var(--muted); }
.tms-choice:has(input:checked), .tms-choice.is-checked { border-color: var(--teal-600); box-shadow: 0 0 0 1px var(--teal-600); background: #F2FAFB; }
.tms-choice:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Checkbox rows */
.tms-checks { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.tms-checks > legend { padding: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tms-check { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.tms-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--teal-700); }
.tms-check__label { flex: 1; color: var(--text-strong); }
.tms-check__meta { font-size: 12px; color: var(--muted); }

/* Notes and boxes */
.tms-infobox { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #EFF6FF; color: #1E3A8A; font-size: 13px; line-height: 18px; }
.tms-infobox > svg { flex: none; margin-top: 1px; }
.tms-statusbox { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 18px; }
.tms-statusbox > svg { flex: none; margin-top: 1px; }
.tms-statusbox__text { display: flex; flex-direction: column; gap: 2px; }
.tms-statusbox--seen  { background: #F0FDF4; color: var(--green-text); }
.tms-statusbox--sent  { background: #EFF6FF; color: var(--blue-text); }
.tms-statusbox--draft { background: #FFFBEB; color: var(--amber-text); }
.tms-statusbox--muted { background: #F3F6F7; color: var(--text-2); }
.tms-help--ok { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--green-text); }

/* State tags: reports and two-step sign-in (always icon + label) */
.tms-state { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-tag); font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--line-soft); color: var(--text-2); }
.tms-state--seen, .tms-state--on     { background: var(--green-tint); color: var(--green-text); }
.tms-state--sent                     { background: var(--blue-tint);  color: var(--blue-text); }
.tms-state--draft, .tms-state--reset { background: var(--amber-tint); color: var(--amber-text); }
.tms-state--running, .tms-state--locked { background: var(--line-soft); color: var(--text-2); }
.tms-state--off                      { background: var(--slate-tint); color: var(--slate-text); }
.tms-state--sm { height: 22px; padding: 0 8px 0 6px; }

/* Extra KPI tile colours */
.tms-kpi--cyan  { --kpi-tint: var(--cyan-tint);  --kpi-solid: var(--cyan);  --kpi-text: var(--cyan-text); }
.tms-kpi--green { --kpi-tint: var(--green-tint); --kpi-solid: var(--green); --kpi-text: var(--green-text); }

/* Extra avatar colours. Pick one per account from a hash of the username. */
.tms-avatar--lg     { width: 38px; height: 38px; font-size: 13px; }
.tms-avatar--amber  { background: #FBBF24; color: #3B2A00; }
.tms-avatar--green  { background: var(--green-tint);  color: var(--green-text); }
.tms-avatar--violet { background: var(--violet-tint); color: var(--violet-text); }
.tms-avatar--orange { background: var(--orange-tint); color: var(--orange-text); }
.tms-avatar--cyan   { background: var(--cyan-tint);   color: var(--cyan-text); }
.tms-avatar--rose   { background: var(--rose-tint);   color: var(--rose-text); }
.tms-avatar--slate  { background: #E2E8F0;            color: #1E293B; }

/* Card header icon */
.tms-cardicon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--ci-bg, var(--teal-50)); color: var(--ci-fg, var(--teal-700)); }
.tms-cardicon--violet { --ci-bg: var(--violet-tint); --ci-fg: var(--violet-text); }
.tms-cardicon--cyan   { --ci-bg: var(--cyan-tint);   --ci-fg: var(--cyan-text); }
.tms-cardicon--green  { --ci-bg: var(--green-tint);  --ci-fg: var(--green-text); }

/* Split view with a right rail (Reports, Users) */
.tms-split__main { flex: 999 1 720px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tms-split__rail { flex: 1 1 340px; max-width: 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Static rows (tables you edit in place, not rows you open) */
.tms-row--static { cursor: default; }
.tms-row--static:hover { background: #FAFCFC; }
.tms-row.is-inactive { opacity: .72; }
.tms-row.is-hidden { opacity: .6; }
.tms-list__total { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; background: var(--table-head); font-size: 13px; color: var(--text-2); }
.tms-list__total strong { color: var(--ink); }

/* Inline edit cells: look like text until hovered or focused */
.tms-cell { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; color: var(--text-strong); }
.tms-cell:hover { border-color: var(--line-card); }
.tms-cell:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--focus-soft); background: var(--surface); }
.tms-cell--boxed { border-color: var(--line-card); background: #FBFCFC; }
.tms-cell--strong { font-weight: 600; }
.tms-cell--missing { border-color: var(--amber); background: #FFFBEB; }
.tms-cell--missing::placeholder { color: var(--amber-text); opacity: 1; }
.tms-numwrap { position: relative; display: inline-flex; align-items: center; }
.tms-numwrap::after { content: "%"; position: absolute; right: 8px; font-size: 12.5px; color: var(--muted); pointer-events: none; }
.tms-cell--num { width: 64px; padding-right: 22px; border-color: var(--line-card); background: var(--surface); font-weight: 700; color: var(--band-text, var(--ink)); }
.tms-handle { display: inline-flex; color: #A3ABAF; cursor: grab; }
.tms-savestate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--green-text); }
.tms-savestate--saving { color: var(--muted); }

/* Popover (HIS task picker) */
.tms-pop { position: absolute; z-index: 20; width: 420px; max-width: calc(100vw - 32px); padding: 10px; border: 1px solid var(--line-card); border-radius: 12px; background: var(--surface); box-shadow: var(--sh-pop); display: flex; flex-direction: column; gap: 8px; }
.tms-pop__opt { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.tms-pop__opt:hover, .tms-pop__opt[aria-selected="true"] { background: var(--row-hover); }
.tms-pop__nr { font-size: 13px; font-weight: 700; color: var(--teal-700); }
.tms-pop__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-strong); }
.tms-pop__meta { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tms-pop__foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }

/* Dashed "add" button */
.tms-btn--add { border: 1.5px dashed #9FB7BC; background: var(--surface); color: var(--teal-700); }
.tms-btn--add:hover { background: var(--teal-50); }
/* Text-only destructive action ("Deactivate account", "Unlink") */
.tms-btn--danger-text { background: transparent; color: var(--danger); padding: 0 6px; }
.tms-btn--danger-text:hover { background: var(--danger-bg); }
/* Full-width form button */
.tms-btn--block { width: 100%; height: 50px; justify-content: center; border-radius: 12px; font-size: 16px; font-weight: 700; }

/* ======================================================================
   Objectives: read and edit views
   ====================================================================== */
.tms-qtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tms-qtab { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--line-card); border-radius: 14px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.tms-qtab[aria-selected="true"] { padding: 11px 15px; border: 2px solid var(--teal-600); background: #F3FAFB; }
.tms-qtab__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tms-qtab__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.tms-qtab__value { font-size: 20px; font-weight: 700; color: var(--ink); }
.tms-qtab__value--none { color: var(--muted); }
.tms-qtab__note { font-size: 12px; line-height: 16px; color: var(--muted); }
@media (max-width: 900px) { .tms-qtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tms-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding: 20px 22px; }
.tms-summary__ring { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.tms-summary__formula { display: flex; flex-direction: column; gap: 4px; max-width: 200px; }
.tms-summary__side { flex: 1 1 240px; display: flex; flex-direction: column; gap: 8px; padding-left: 20px; border-left: 1px solid var(--line-soft); }
.tms-summary__foot { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.tms-figs { flex: 999 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.tms-fig { padding: 12px 14px; border-radius: 12px; background: var(--table-head); display: flex; flex-direction: column; gap: 6px; --band: var(--fig); }
.tms-fig__name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tms-fig__sw { width: 10px; height: 10px; border-radius: 3px; background: var(--fig); }
.tms-fig__value { font-size: 26px; line-height: 30px; font-weight: 700; color: var(--fig-text); }
.tms-fig__note { font-size: 12px; line-height: 16px; color: var(--muted); }
.tms-fig--plan     { --fig: var(--hl-plan);     --fig-text: var(--blue-text); }
.tms-fig--accepted { --fig: var(--hl-accepted); --fig-text: var(--violet-text); }
.tms-fig--bugs     { --fig: var(--hl-bugs);     --fig-text: var(--warn-fg); }
.tms-fig--internal { --fig: var(--hl-internal); --fig-text: var(--green-text); }
.tms-fig--quarter  { --fig: var(--teal-600);    --fig-text: var(--teal-700); }

/* Section card → group header button → objective rows */
.tms-osec { overflow: hidden; }
.tms-osec--accepted { --sec: var(--violet); }
.tms-osec--bugs     { --sec: var(--orange); }
.tms-osec--planned  { --sec: var(--blue); }
.tms-osec--internal { --sec: var(--green); }
.tms-osec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.tms-osec__sw { width: 12px; height: 12px; flex: none; border-radius: 4px; background: var(--sec); }
.tms-osec__name { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.tms-osec__meta, .tms-osec__figure { font-size: 13px; color: var(--muted); }
.tms-osec__end { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.tms-osec__pct { min-width: 44px; text-align: right; font-size: 16px; font-weight: 700; color: var(--ink); }
.tms-osec__head .tms-meter { --meter-w: 140px; height: 8px; --band: var(--sec); }

.tms-ogroup { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 20px; border: 0; border-top: 1px solid var(--line-soft); background: #FBFCFC; font: inherit; text-align: left; cursor: pointer; }
.tms-ogroup:hover { background: var(--row-hover); }
.tms-ogroup--static { cursor: default; padding-left: 14px; }
.tms-ogroup__chev { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .15s ease; }
.tms-ogroup[aria-expanded="true"] .tms-ogroup__chev, .tms-ogroup__toggle[aria-expanded="true"] .tms-ogroup__chev { transform: rotate(90deg); }
.tms-ogroup__toggle { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tms-ogroup__name { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-2); }
.tms-ogroup__count { font-size: var(--fs-small); color: var(--muted); }
.tms-ogroup__done { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--green-text); }
.tms-ogroup__end { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.tms-ogroup .tms-meter { --meter-w: 110px; }
.tms-ogroup__more { padding: 6px 20px 10px 46px; border-top: 1px solid #F1F4F5; }

.tms-orows { --cols: 116px minmax(0, 1.4fr) 76px 100px 64px 92px minmax(0, 1fr); }
.tms-orows--edit { --cols: 22px minmax(0, 1.6fr) 210px 124px 150px minmax(0, 1fr) 34px; }
.tms-orows__head { display: grid; grid-template-columns: var(--cols); gap: 10px; padding: 8px 20px 4px 18px; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tms-orow { position: relative; display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; min-height: 48px; padding: 6px 20px 6px 46px; border-top: 1px solid #F1F4F5; background: var(--surface); }
.tms-orows--edit .tms-orow { gap: 10px; min-height: 44px; padding: 4px 20px 4px 18px; }
.tms-orow:hover { background: #FAFCFC; }
.tms-orow__prog { display: flex; align-items: center; gap: 8px; }
.tms-orow__prog .tms-meter { --meter-w: 56px; }
.tms-orow__title { min-width: 0; font-weight: 500; color: var(--text-strong); }
.tms-orow__his { font-size: var(--fs-small); font-weight: 600; color: var(--teal-700); }
.tms-orow__num { font-size: 13px; text-align: right; color: var(--text-3); }
.tms-orow__note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }

/* Delivery status chip, and the same look as a select in edit mode */
.tms-del, .tms-delselect { --del-bg: var(--chip-bg); --del-fg: var(--text-3); --del-dot: var(--slate); }
.tms-del--live   { --del-bg: var(--green-tint); --del-fg: var(--green-text); --del-dot: var(--green); }
.tms-del--hotfix { --del-bg: var(--cyan-tint);  --del-fg: var(--cyan-text);  --del-dot: var(--cyan); }
.tms-del--appnode{ --del-bg: var(--blue-tint);  --del-fg: var(--blue-text);  --del-dot: var(--blue); }
.tms-del--dev    { --del-bg: var(--amber-tint); --del-fg: var(--amber-text); --del-dot: var(--amber); }
.tms-del { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-tag); background: var(--del-bg); color: var(--del-fg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tms-del::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--del-dot); }
.tms-delselect { position: relative; }
.tms-delselect select { width: 100%; height: 32px; padding: 0 28px 0 10px; appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 8px; background: var(--del-bg); color: var(--del-fg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tms-delselect select:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--focus-soft); }
.tms-delselect__chev { position: absolute; right: 9px; top: 9px; width: 14px; height: 14px; pointer-events: none; color: var(--del-fg); }

/* Linked HIS task button in an edit row */
.tms-hislink { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.tms-hislink:hover { border-color: var(--line-card); }
.tms-hislink__nr { font-size: 13px; font-weight: 700; color: var(--teal-700); }
.tms-hislink__meta { font-size: var(--fs-small); white-space: nowrap; color: var(--muted); }
.tms-hislink__empty { font-size: 13px; color: var(--muted); }

/* ======================================================================
   HIS tasks
   ====================================================================== */
.tms-list--his { --cols: 70px minmax(0, 1fr) 140px 130px 70px 128px 98px; }
.tms-list--his.tms-list--panel-open { --cols: 70px minmax(0, 1fr) 128px 128px 98px; }
.tms-mod { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.tms-mod::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: var(--r-pill); background: var(--mod, var(--slate)); }
.tms-mod--medapp { --mod: var(--mod-medapp); }  .tms-mod--clinic { --mod: var(--mod-clinic); }
.tms-mod--finance { --mod: var(--mod-finance); } .tms-mod--it { --mod: var(--mod-it); }
.tms-mod--reception { --mod: var(--mod-reception); } .tms-mod--administration { --mod: var(--mod-administration); }
.tms-type { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.tms-type svg { stroke: var(--type, currentColor); }
.tms-type--new { --type: var(--blue-text); }
.tms-type--bug { --type: var(--warn-fg); }
/* HIS statuses and impact in the panel picker (extends .tms-statuspick from phase 1) */
.tms-statuspick__opt--worklist[aria-pressed="true"]  { background: var(--blue-tint);   color: var(--blue-text);   border-color: var(--blue); }
.tms-statuspick__opt--his-progress[aria-pressed="true"] { background: var(--amber-tint); color: var(--amber-text); border-color: var(--amber); }
.tms-statuspick__opt--ontest[aria-pressed="true"]    { background: var(--cyan-tint);   color: var(--cyan-text);   border-color: var(--cyan); }
.tms-statuspick__opt--completed[aria-pressed="true"] { background: var(--green-tint);  color: var(--green-text);  border-color: var(--green); }
.tms-statuspick__opt--postponed[aria-pressed="true"] { background: var(--violet-tint); color: var(--violet-text); border-color: var(--violet); }
.tms-statuspick__opt--cancelled[aria-pressed="true"] { background: var(--slate-tint);  color: var(--slate-text);  border-color: var(--slate); }
.tms-statuspick__opt--refused[aria-pressed="true"]   { background: var(--rose-tint);   color: var(--rose-text);   border-color: var(--rose); }
.tms-statuspick__opt--high[aria-pressed="true"]      { background: var(--rose-tint);   color: var(--rose-text);   border-color: var(--rose); }
.tms-statuspick__opt--medium[aria-pressed="true"]    { background: var(--amber-tint);  color: var(--amber-text);  border-color: var(--amber); }
.tms-statuspick__opt--low[aria-pressed="true"]       { background: var(--slate-tint);  color: var(--slate-text);  border-color: var(--slate); }
.tms-statuspick--even .tms-statuspick__opts { flex-wrap: nowrap; }
.tms-statuspick--even .tms-statuspick__opt { flex: 1; justify-content: center; }
.tms-linked { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--table-head); }
.tms-linked__item { display: flex; align-items: center; gap: 10px; color: var(--text-strong); text-decoration: none; }
.tms-linked__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* ======================================================================
   Public form and sign-in (no sidebar)
   ====================================================================== */
.tms-public { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100vh; background: var(--page); }
.tms-hero { flex: 1 1 460px; box-sizing: border-box; padding: 44px 56px; background-color: var(--teal-800); color: #FFFFFF; display: flex; flex-direction: column; gap: 40px; }
.tms-hero__logo { display: block; width: 200px; max-width: 100%; height: auto; filter: brightness(0) invert(1); }
.tms-hero__body { margin-top: auto; display: flex; flex-direction: column; gap: 24px; max-width: 460px; }
.tms-hero__title { margin: 0; font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -0.02em; }
.tms-hero__text { margin: 0; max-width: 420px; font-size: 18px; line-height: 27px; color: #DCEDEF; }
.tms-hero__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; counter-reset: step; }
.tms-hero__steps li { counter-increment: step; display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 22px; color: #DCEDEF; }
.tms-hero__steps li::before { content: counter(step); width: 34px; height: 34px; flex: none; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.12); color: var(--teal-light); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tms-hero__foot { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: var(--sb-muted); }
/* Static TMS mark (no animation): small for the hero foot, large for sign-in */
.tms-mark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-brand); }
.tms-mark__letters { font-size: 24px; line-height: 1; color: #FFFFFF; }
.tms-mark__letters > :nth-child(1) { font-weight: 500; }
.tms-mark__letters > :nth-child(2) { font-weight: 700; }
.tms-mark__letters > :nth-child(3) { font-weight: 600; font-style: italic; }
.tms-mark__bar { width: 3px; height: 20px; border-radius: 2px; background: var(--brand-orange); }
.tms-mark__words { display: flex; flex-direction: column; gap: 3px; font-size: 17px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-muted); }
.tms-mark--xl { gap: 16px; }
.tms-mark--xl .tms-mark__letters { font-size: 76px; }
.tms-mark--xl .tms-mark__bar { width: 7px; height: 60px; border-radius: 4px; }
.tms-mark--ink .tms-mark__letters { color: var(--ink); }

.tms-publicmain { flex: 999 1 560px; min-width: 0; box-sizing: border-box; padding: 24px 32px 40px; display: flex; flex-direction: column; }
.tms-publicmain__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.tms-publicmain__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px 0; }
.tms-langnote { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); }
.tms-formcard { width: 100%; max-width: 560px; box-sizing: border-box; padding: 32px; border: 1px solid var(--line-card); border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(16, 42, 48, 0.04), 0 18px 48px rgba(16, 42, 48, 0.10); display: flex; flex-direction: column; gap: 20px; }
.tms-formcard--narrow { max-width: 460px; gap: 22px; }
.tms-formcard__title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }

.tms-recipient { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--table-head); }
.tms-recipient__text { display: flex; flex-direction: column; min-width: 0; }
.tms-recipient__to, .tms-recipient__dept { font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
.tms-recipient__name { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.tms-recipient__handle { font-size: 13px; font-weight: 400; color: var(--muted); }

/* Request kind picker: <fieldset class="tms-kinds"> … <label class="tms-kind tms-kind--fix"><input type="radio">…</label>.
   Keep this order inside the label: input, icon, text, dot (the dot follows the input for :checked ~). */
.tms-kinds { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tms-kinds > legend { padding: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tms-kinds__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tms-kind { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--control-border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.tms-kind input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tms-kind:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tms-kind:has(input:checked), .tms-kind.is-checked { border-color: var(--teal-600); box-shadow: 0 0 0 1px var(--teal-600); background: #F2FAFB; }
.tms-kind__icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--k-bg); color: var(--k-fg); }
.tms-kind--develop  { --k-bg: var(--violet-tint); --k-fg: var(--violet-text); }
.tms-kind--optimise { --k-bg: var(--blue-tint);   --k-fg: var(--blue-text); }
.tms-kind--fix      { --k-bg: var(--orange-tint); --k-fg: var(--warn-fg); }
.tms-kind__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tms-kind__label { font-size: 14px; line-height: 19px; font-weight: 700; color: var(--ink); }
.tms-kind__sub { font-size: 12px; line-height: 16px; color: var(--muted); }
.tms-kind__dot { width: 18px; height: 18px; flex: none; box-sizing: border-box; border: 1.5px solid #9AA6AB; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); }
.tms-kind input:checked ~ .tms-kind__dot { border: 0; background: var(--teal-700); }
.tms-kind input:checked ~ .tms-kind__dot::after { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: #FFFFFF; }
.tms-kinds--error .tms-kind { border-color: var(--danger); }
/* Phone: three narrow cards, icon above the label */
.tms-kinds--stacked .tms-kinds__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tms-kinds--stacked .tms-kind { flex-direction: column; justify-content: flex-start; gap: 6px; min-height: 100px; padding: 12px 6px 10px; text-align: center; border-radius: 14px; }
.tms-kinds--stacked .tms-kind__dot { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; }
.tms-kinds--stacked .tms-kind__sub { font-size: 11.5px; line-height: 15px; }
/* A word longer than its card ("Оптимизировать" on an iPhone 16) is hyphenated, never pushed over the border. */
.tms-kinds--stacked .tms-kind__text { align-self: stretch; }
.tms-kinds--stacked .tms-kind__label, .tms-kinds--stacked .tms-kind__sub { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

.tms-fieldfoot { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-small); line-height: 17px; color: var(--muted); }
.tms-fieldfoot__count { flex: none; }
.tms-privacy { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #FFF8EB; color: #7A4A06; font-size: 13px; line-height: 18px; }
.tms-privacy > svg { flex: none; margin-top: 1px; color: #B45309; }
.tms-kbdnote { text-align: center; font-size: var(--fs-small); color: var(--muted); }

/* Result states (request sent, link inactive, signed in) */
.tms-done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; text-align: center; }
.tms-done__icon { width: 68px; height: 68px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--green-tint); color: var(--green); }
.tms-done__icon--warn { background: var(--amber-tint); color: #B45309; }
.tms-done__title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; color: var(--ink); }
.tms-done__text { margin: 0; max-width: 400px; font-size: 14px; line-height: 21px; color: var(--text-3); }
.tms-done__number { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 20px; border-radius: 14px; background: var(--teal-50); color: var(--teal-700); }
.tms-done__no { font-size: 16px; font-weight: 600; }
.tms-done__nr { font-size: 34px; line-height: 38px; font-weight: 700; }
.tms-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* Sign-in */
.tms-stepper { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.tms-stepper__step { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.tms-stepper__step + .tms-stepper__step::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--line); }
.tms-stepper__mark { width: 22px; height: 22px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--line-soft); color: var(--text-3); font-size: 11.5px; font-weight: 700; }
.tms-stepper__step[aria-current="step"] { color: var(--teal-700); }
.tms-stepper__step[aria-current="step"] .tms-stepper__mark { background: var(--teal-700); color: #FFFFFF; }
.tms-stepper__step.is-done { color: var(--green-text); }
.tms-stepper__step.is-done .tms-stepper__mark { background: var(--green-tint); color: var(--green-text); }
.tms-pass { position: relative; }
.tms-pass .tms-input { width: 100%; padding-right: 84px; }
.tms-pass__toggle { position: absolute; right: 6px; top: 3px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--teal-700); cursor: pointer; }
.tms-setup { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: setup; }
.tms-setup li { counter-increment: setup; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.tms-setup li::before { content: counter(setup); width: 24px; height: 24px; flex: none; border-radius: var(--r-pill); background: var(--teal-50); color: var(--teal-700); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tms-qr { display: block; width: 160px; height: 160px; box-sizing: border-box; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #FFFFFF; }
.tms-secret { align-self: flex-start; padding: 8px 10px; border-radius: 9px; background: var(--chip-bg); font-family: Consolas, "Segoe UI Mono", monospace; font-size: 14px; letter-spacing: 0.06em; color: var(--ink); }
/* One-time code: six boxes drawn over one real input (inputmode="numeric" autocomplete="one-time-code") */
.tms-otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; cursor: text; }
.tms-otp:focus-within { outline: 3px solid rgba(14, 140, 153, 0.35); outline-offset: 4px; border-radius: 12px; }
.tms-otp__box { height: 58px; border: 1.5px solid var(--control-border); border-radius: 12px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--ink); }
.tms-otp__box.is-filled { background: var(--table-head); }
.tms-otp__box.is-active { border: 2px solid var(--teal-600); }
.tms-otp__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; cursor: text; }
.tms-otp--error .tms-otp__box { border-color: var(--danger); background: var(--danger-bg); }
.tms-hintbox { width: 100%; max-width: 460px; box-sizing: border-box; margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--teal-50); color: #0A4D55; font-size: 13.5px; line-height: 19px; }
.tms-hintbox > svg { flex: none; margin-top: 1px; }
.tms-hintbox strong { font-weight: 700; }

/* ======================================================================
   Phone (under 768 px)
   ====================================================================== */
.tms-m { display: flex; flex-direction: column; min-height: 100vh; background: var(--page); }
.tms-mhead { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 6px 0 16px; background: var(--teal-800); color: #FFFFFF; }
.tms-mhead__title { margin: 0; flex: 1; font-size: 19px; line-height: 24px; font-weight: 700; }
.tms-mhead__btn { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tms-mbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 10px; background: var(--surface); border-bottom: 1px solid var(--line-card); }
.tms-mbar__link { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-size: var(--fs-small); color: var(--muted); }
.tms-mbody { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 18px 16px 20px; }
.tms-chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.tms-chips--scroll::-webkit-scrollbar { display: none; }
.tms-chips--scroll .tms-chip { flex: none; }
.tms-mrow { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 11px 16px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line-card); background: var(--surface); font: inherit; text-align: left; color: var(--body); text-decoration: none; cursor: pointer; }
.tms-mrow[aria-current="true"] { background: var(--row-selected); box-shadow: inset 3px 0 0 var(--teal-600); }
.tms-mrow__top { display: flex; align-items: center; gap: 8px; }
.tms-mrow__nr { font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.tms-mrow__when { margin-left: auto; font-size: var(--fs-small); color: var(--muted); }
.tms-mrow__when--waiting { font-weight: 600; color: var(--warn-fg); }
.tms-mrow__issue { font-size: 14.5px; line-height: 20px; font-weight: 500; color: var(--text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tms-mrow__issue--new { font-weight: 650; }
.tms-mrow__meta { font-size: 12px; line-height: 16px; color: var(--muted); }
.tms-tabbar { position: sticky; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 66px; background: var(--surface); border-top: 1px solid var(--line-card); }
.tms-tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-3); text-decoration: none; }
.tms-tabbar__item[aria-current="page"] { color: var(--teal-700); font-weight: 700; }
.tms-tabbar__badge { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--badge-new); color: #FFFFFF; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tms-carousel { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; }
.tms-carousel > * { flex: none; width: 250px; scroll-snap-align: start; }
/* Bottom sheet: role="dialog" aria-modal="true"; trap focus; Esc and the scrim close it */
.tms-sheet { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; }
.tms-sheet--inline { position: relative; inset: auto; min-height: 640px; }
.tms-sheet__scrim { flex: 1; min-height: 72px; border: 0; background: rgba(23, 38, 43, 0.45); cursor: pointer; }
.tms-sheet__panel { max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 32px rgba(16, 42, 48, 0.18); animation: tmsSheetUp .25s ease-out both; }
.tms-sheet__grab { align-self: center; width: 40px; height: 5px; margin: 8px 0 2px; border-radius: var(--r-pill); background: var(--control-border); }
.tms-sheet__head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 18px; }
.tms-sheet__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 4px 18px 16px; }
.tms-sheet__foot { display: flex; gap: 10px; padding: 12px 18px 18px; border-top: 1px solid var(--line-soft); }
.tms-sheet__foot .tms-btn { height: 50px; border-radius: 14px; font-size: 15px; flex: 1; justify-content: center; }
.tms-sheet__foot .tms-btn--primary { flex: 2; }
@keyframes tmsSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tms-statuspick--grid .tms-statuspick__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tms-statuspick--grid .tms-statuspick__opt { height: 46px; border-radius: 12px; font-size: 14px; }
.tms-toasts--bottom { top: auto; right: 16px; bottom: 82px; left: 16px; }

/* ======================================================================
   All users (administrators)
   ====================================================================== */
.tms-list--allusers { --cols: minmax(230px, 1.6fr) 168px 120px 76px 76px 76px 120px 96px 64px 150px 40px; --row-h: 72px; }
.tms-list--allusers .tms-list__inner { min-width: 1250px; }
.tms-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tms-person__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tms-person__name { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); text-decoration: none; }
a.tms-person__name:hover { text-decoration: underline; }
button.tms-person__name { padding: 0; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
button.tms-person__name:hover { color: var(--teal-700); }
.tms-person__meta { max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); line-height: 17px; color: var(--muted); overflow: hidden; }
.tms-cellstack { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tms-cellstack__value { display: flex; align-items: baseline; gap: 6px; }
.tms-cellstack__big { font-size: 18px; line-height: 22px; font-weight: 700; color: var(--ink); }
.tms-cellstack__unit { font-size: 12px; color: var(--muted); }
.tms-cellstack__note { font-size: 11.5px; color: var(--muted); }
.tms-wait { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--warn-fg); }
/* Mix bar: outer width (--w) is relative to the busiest person; segments get flex-grow from JS */
.tms-mix { display: flex; width: var(--w, 100%); height: 6px; border-radius: var(--r-pill); overflow: hidden; background: var(--track); }
.tms-mix > span { flex: 0 1 0; }
.tms-mix__started  { background: #3B82F6; }
.tms-mix__progress { background: var(--amber); }
.tms-mix__hold     { background: #8B5CF6; }
.tms-tagnew { height: 20px; padding: 0 7px; border-radius: 6px; background: var(--blue-tint); color: var(--blue-text); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; }
.tms-attn { margin: 0; padding: 0; list-style: none; }
.tms-attn__item { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid #F1F4F5; }
.tms-attn__icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--a-bg); color: var(--a-fg); }
.tms-attn__text { flex: 1; min-width: 0; color: var(--text-3); }
.tms-attn__text strong { color: var(--ink); }
.tms-attn--wait   { --a-bg: var(--orange-tint); --a-fg: var(--warn-fg); }
.tms-attn--plan   { --a-bg: var(--amber-tint);  --a-fg: var(--amber-text); }
.tms-attn--report { --a-bg: var(--blue-tint);   --a-fg: var(--blue-text); }
.tms-attn--weak1  { --a-bg: var(--weak-1-bg);   --a-fg: var(--weak-1-fg); }
.tms-attn--weak2  { --a-bg: var(--weak-2-bg);   --a-fg: var(--weak-2-fg); }
.tms-attn--weak3  { --a-bg: var(--weak-3-bg);   --a-fg: var(--weak-3-fg); }
.tms-compare { display: flex; flex-direction: column; gap: 10px; }
.tms-compare__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.tms-compare__name { font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tms-compare__value { text-align: right; font-size: 14px; }
.tms-compare .tms-meter { --meter-w: 100%; height: 12px; }
.tms-compare .tms-meter::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 60%; border-left: 2px dashed #9AA6AB; }

/* ======================================================================
   Reports
   ====================================================================== */
.tms-ptabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tms-ptab { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 52px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--line-card); border-radius: 14px; background: var(--surface); font: inherit; cursor: pointer; }
.tms-ptab[aria-selected="true"] { padding: 0 13px; border: 2px solid var(--teal-600); background: #F3FAFB; }
.tms-ptab__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.tms-list--kpi { --cols: minmax(220px, 1.6fr) 64px 72px minmax(140px, 1fr) 118px 64px; --row-h: 52px; }
.tms-list--kpi .tms-list__inner { min-width: 820px; }
.tms-kpiname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tms-kpiname__title { font-weight: 600; color: var(--text-strong); }
.tms-kpiname__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tms-src { height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; }
.tms-src--auto   { background: var(--teal-50);     color: var(--teal-700); }
.tms-src--manual { background: var(--violet-tint); color: var(--violet-text); }
.tms-kpinum { text-align: right; font-size: 13.5px; color: var(--text-3); }
.tms-kpinum--actual { font-size: 16px; font-weight: 700; color: var(--ink); }
/* Bullet bar: fill (--w) against a target tick (--t) */
.tms-bullet { position: relative; display: block; height: 10px; border-radius: var(--r-pill); background: var(--track); --kfill: var(--teal-600); }
.tms-bullet__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill); background: var(--kfill); }
.tms-bullet__target { position: absolute; top: -4px; bottom: -4px; left: var(--t, 0%); width: 2px; border-radius: 1px; background: var(--ink); }
.tms-bullet--on      { --kfill: var(--green); }
.tms-bullet--close   { --kfill: var(--amber); }
.tms-bullet--below   { --kfill: var(--rose); }
.tms-bullet--running { --kfill: var(--teal-600); }
.tms-bullet--info    { --kfill: #64748B; }
.tms-kstat { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-tag); font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--slate-tint); color: var(--slate-text); }
.tms-kstat--on      { background: var(--green-tint); color: var(--green-text); }
.tms-kstat--close   { background: var(--amber-tint); color: var(--amber-text); }
.tms-kstat--below   { background: var(--rose-tint);  color: var(--rose-text); }
.tms-kstat--running { background: var(--line-soft);  color: var(--text-2); }
/* Spark columns: four tiny bars, Q1–Q4; height from --h */
.tms-spark { display: flex; align-items: flex-end; gap: 4px; height: 28px; }
.tms-spark__bar { width: 10px; height: var(--h, 3px); border-radius: 3px 3px 1px 1px; background: #BFE0E4; }
.tms-spark__bar--sel  { background: var(--teal-700); }
.tms-spark__bar--none { height: 3px; background: var(--line-card); }
/* Large quarter columns */
.tms-cols--lg { height: 150px; gap: 14px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.tms-cols--lg .tms-cols__col { align-items: center; gap: 6px; }
.tms-cols--lg .tms-cols__bar { width: 100%; max-width: 56px; border-radius: 6px 6px 2px 2px; background: #9FD0D5; }
.tms-cols--lg .tms-cols__bar--sel { background: var(--teal-700); }
.tms-cols--lg .tms-cols__bar--running { background: repeating-linear-gradient(135deg, #9FD0D5 0 6px, #CFE8EB 6px 12px); }
.tms-cols--lg .tms-cols__bar--none { height: 8px; box-sizing: border-box; border: 1.5px dashed #B6C2C6; background: transparent; }
.tms-cols__val { font-size: 13px; font-weight: 700; color: var(--text-2); }
.tms-cols__val--sel { color: var(--teal-700); }
.tms-cols__axis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; text-align: center; font-size: var(--fs-small); color: var(--muted); }
/* Excel import drop zone: a <label> around a visually hidden file input */
.tms-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; border: 1.5px dashed #9FD0D5; border-radius: 14px; background: #F8FCFC; text-align: center; cursor: pointer; }
.tms-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tms-drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tms-drop.is-over { border-color: var(--teal-600); background: var(--teal-50); }
.tms-drop__icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--green-tint); color: #15803D; }
.tms-drop__title { font-weight: 700; color: var(--ink); }
.tms-drop__or { font-size: 13px; color: var(--muted); }
.tms-drop__or span { font-weight: 600; color: var(--teal-700); text-decoration: underline; }
.tms-history { margin: 0; padding: 0; list-style: none; }
.tms-history__item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid #F1F4F5; }
.tms-history__text { flex: 1; display: flex; flex-direction: column; }
.tms-history__text strong { color: var(--ink); }
.tms-history__text span { font-size: var(--fs-small); color: var(--muted); }

/* ======================================================================
   Users
   ====================================================================== */
.tms-list--users { --cols: minmax(220px, 1.4fr) minmax(200px, 1.2fr) 132px 150px 112px 32px; --row-h: 68px; }
.tms-list--users .tms-list__inner { min-width: 880px; }
.tms-role { height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; }
.tms-role--staff { background: var(--teal-50);     color: var(--teal-700); }
.tms-role--admin { background: var(--violet-tint); color: var(--violet-text); }
.tms-role--mgmt  { background: var(--amber-tint);  color: var(--amber-text); }
.tms-role--off   { background: var(--slate-tint);  color: var(--slate-text); }
.tms-linkcell { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.tms-linkcell__dot { width: 8px; height: 8px; flex: none; border-radius: var(--r-pill); background: var(--green); }
.tms-linkcell__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.tms-linkcell.is-off .tms-linkcell__dot { background: var(--slate); }
.tms-linkcell.is-off .tms-linkcell__url { color: var(--muted); text-decoration: line-through; }
.tms-datacounts { display: flex; flex-direction: column; font-size: var(--fs-small); line-height: 17px; color: var(--text-3); }
.tms-datacounts strong { color: var(--ink); }
/* Text input with a fixed prefix: digitasks.medpark.md/@ + link name */
.tms-prefix { display: flex; align-items: center; height: 42px; box-sizing: border-box; border: 1px solid var(--control-border); border-radius: var(--r-ctl); background: var(--surface); overflow: hidden; }
.tms-prefix:focus-within { border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--focus-soft); }
.tms-prefix.is-invalid { border-color: var(--danger); }
.tms-prefix__pre { height: 100%; padding: 0 2px 0 12px; display: inline-flex; align-items: center; background: #F3F6F7; color: var(--muted); font-size: 13px; white-space: nowrap; }
.tms-prefix__input { flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-weight: 600; color: var(--ink); }
.tms-secrow { display: flex; align-items: center; gap: 10px; }
.tms-secrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tms-secrow__title { font-weight: 600; color: var(--ink); }
.tms-secrow__note { font-size: var(--fs-small); color: var(--muted); }

/* ======================================================================
   Lists
   ====================================================================== */
.tms-lists { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.tms-listnav { flex: 1 1 260px; max-width: 300px; padding: 10px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.tms-listnav__group { padding: 10px 10px 4px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tms-listnav__item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: var(--r-ctl); background: transparent; font: inherit; font-weight: 500; color: var(--text-strong); text-align: left; cursor: pointer; }
.tms-listnav__item:hover { background: var(--row-hover); }
.tms-listnav__item[aria-current="page"] { background: var(--teal-50); color: var(--teal-700); font-weight: 700; }
.tms-listnav__name { flex: 1; min-width: 0; }
.tms-listnav__count { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.tms-listnav__miss { height: 20px; min-width: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--amber-tint); color: var(--amber-text); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tms-listnav__dirty { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--amber); }
.tms-listedit { flex: 999 1 760px; min-width: 0; display: flex; flex-direction: column; }
.tms-listkind { height: 22px; padding: 0 8px 0 6px; border-radius: var(--r-tag); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.tms-listkind--system { background: var(--violet-tint); color: var(--violet-text); }
.tms-listkind--own    { background: var(--teal-50);     color: var(--teal-700); }
.tms-list--values { --cols: 28px minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 52px 56px 36px; --row-h: 50px; }
.tms-list--values.tms-list--with-color { --cols: 28px 112px minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 52px 56px 36px; }
.tms-list--values.tms-list--with-flag  { --cols: 28px minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 128px 52px 56px 36px; }
.tms-list--values.tms-list--with-color.tms-list--with-flag { --cols: 28px 112px minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 128px 52px 56px 36px; }
.tms-list--values .tms-list__inner { min-width: 860px; }
.tms-list--values .tms-row { gap: 10px; }
.tms-order { display: inline-flex; flex-direction: column; }
.tms-order__btn { width: 26px; height: 18px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tms-order__btn:hover:not(:disabled) { background: var(--line-soft); }
.tms-order__btn:disabled { color: #C4CDD0; cursor: default; }
/* Colour button: opens a menu with the eight palette colours */
.tms-swatch { --sw-bg: var(--slate-tint); --sw-fg: var(--slate-text); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 4px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; }
.tms-swatch__chip { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--sw-bg); color: var(--sw-fg); }
.tms-swatch--blue   { --sw-bg: var(--blue-tint);   --sw-fg: var(--blue-text); }
.tms-swatch--amber  { --sw-bg: var(--amber-tint);  --sw-fg: var(--amber-text); }
.tms-swatch--violet { --sw-bg: var(--violet-tint); --sw-fg: var(--violet-text); }
.tms-swatch--green  { --sw-bg: var(--green-tint);  --sw-fg: var(--green-text); }
.tms-swatch--cyan   { --sw-bg: var(--cyan-tint);   --sw-fg: var(--cyan-text); }
.tms-swatch--orange { --sw-bg: var(--orange-tint); --sw-fg: var(--warn-fg); }
.tms-swatch--rose   { --sw-bg: var(--rose-tint);   --sw-fg: var(--rose-text); }
.tms-swatch--slate  { --sw-bg: var(--slate-tint);  --sw-fg: var(--slate-text); }
/* Tones: render list values (statuses, kinds, impact, delivery) in the colour chosen on the Lists page.
   class="tms-pill tms-pill--tone tms-tone--violet" · class="tms-chip__dot tms-dot--tone tms-tone--violet" */
.tms-tone--blue   { --tone-bg: var(--blue-tint);   --tone-fg: var(--blue-text);   --tone-dot: var(--blue); }
.tms-tone--amber  { --tone-bg: var(--amber-tint);  --tone-fg: var(--amber-text);  --tone-dot: var(--amber); }
.tms-tone--violet { --tone-bg: var(--violet-tint); --tone-fg: var(--violet-text); --tone-dot: var(--violet); }
.tms-tone--green  { --tone-bg: var(--green-tint);  --tone-fg: var(--green-text);  --tone-dot: var(--green); }
.tms-tone--cyan   { --tone-bg: var(--cyan-tint);   --tone-fg: var(--cyan-text);   --tone-dot: var(--cyan); }
.tms-tone--orange { --tone-bg: var(--orange-tint); --tone-fg: var(--warn-fg);     --tone-dot: var(--orange); }
.tms-tone--rose   { --tone-bg: var(--rose-tint);   --tone-fg: var(--rose-text);   --tone-dot: var(--rose); }
.tms-tone--slate  { --tone-bg: var(--slate-tint);  --tone-fg: var(--slate-text);  --tone-dot: var(--slate); }
.tms-pill--tone { background: var(--tone-bg); color: var(--tone-fg); }
.tms-dot--tone  { background: var(--tone-dot); }
.tms-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; padding: 14px 20px; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-card) var(--r-card); background: var(--surface); }
.tms-savebar__text { flex: 1 1 300px; font-size: var(--fs-small); line-height: 18px; color: var(--muted); }
.tms-savebar--dirty { background: #FFFBEB; }
.tms-savebar--dirty .tms-savebar__text { color: var(--amber-text); }

/* ======================================================================
   Dialog (add or edit a manual KPI)
   <div class="tms-modal"><section class="tms-modal__card" role="dialog" aria-modal="true" aria-labelledby="…">
   ====================================================================== */
.tms-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(23, 38, 43, 0.45); }
.tms-modal--inline { position: relative; inset: auto; z-index: auto; min-height: 560px; border-radius: var(--r-card); }
.tms-modal__card { width: 100%; max-width: 560px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-pop); }
.tms-modal__head { display: flex; align-items: center; gap: 10px; padding: 16px 12px 12px 20px; border-bottom: 1px solid var(--line-soft); }
.tms-modal__title { flex: 1; margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); }
.tms-modal__body { overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.tms-modal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.tms-modal__foot .tms-btn--danger-text { margin-right: auto; }
/* Three language fields side by side; English first and required */
.tms-langgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tms-langgrid .tms-label { display: flex; align-items: center; gap: 6px; }
.tms-langgrid__tag { height: 18px; padding: 0 6px; border-radius: 5px; background: var(--chip-bg); color: var(--text-3); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; }
.tms-quartergrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .tms-langgrid { grid-template-columns: minmax(0, 1fr); } .tms-quartergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================================================================
   Lists → Greeting occasions
   ====================================================================== */
.tms-list--greetings { --cols: 56px 52px minmax(240px, 1.6fr) minmax(200px, 1fr) 132px 40px; --row-h: 58px; }
.tms-list--greetings .tms-list__inner { min-width: 820px; }
.tms-occbadge { width: 36px; height: 36px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--tone-bg); color: var(--tone-fg); }
.tms-occtitle { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tms-occtitle__text { font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tms-occtitle__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tms-occrule { font-size: 13px; line-height: 18px; color: var(--text-3); }
.tms-occnext { font-size: 13px; font-weight: 600; color: var(--text-2); }
.tms-occedit { display: flex; flex-direction: column; gap: 16px; margin: 0 20px; padding: 16px 18px; border: 1px solid var(--line-card); border-radius: 14px; background: #FBFCFC; }
.tms-occedit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.tms-occpreview { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--control-border); background: var(--page); display: flex; flex-direction: column; gap: 4px; }
.tms-iconpick { display: flex; flex-wrap: wrap; gap: 6px; }
.tms-iconpick__opt { width: 36px; height: 36px; border: 1.5px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tms-iconpick__opt[aria-pressed="true"] { border-color: var(--teal-600); background: #F2FAFB; color: var(--teal-700); }

/* ======================================================================
   Small layout helpers used by several screens
   ====================================================================== */
.tms-band--his { --band: var(--cyan); }
.tms-orow > .tms-pop { top: 42px; left: calc(50px + 30%); }
.tms-panel__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tms-panel__who .tms-h2 { font-size: 17px; line-height: 22px; }
.tms-panel__foot .tms-btn--danger-text { margin-left: auto; }
.tms-cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.tms-cardhead__end { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tms-listedit__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft); }
.tms-listedit__title { flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px; }
.tms-listedit__note { margin: 14px 20px 0; }
.tms-listedit__add { padding: 10px 20px 4px; }

/* ======================================================================
   Phone refinements (v1.1, 27 Oct 2026): PHASE2.md §20
   Canvas row "Phone refinements · from the prod review". Replaces the five-tab bar of §9.
   ====================================================================== */
/* Header: page title (or the TMS mark on Dashboard), search, optional filter, and the avatar that opens
   the account menu. No hamburger. */
.tms-mhead { padding: 0 8px 0 16px; gap: 2px; }
.tms-mhead__title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tms-mhead__mark { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-family: var(--font-brand); color: var(--lockup-fg); text-decoration: none; }
.tms-mhead__mark .tms-lockup__mark { padding: 0; font-size: 24px; }
.tms-mhead__mark .tms-lockup__l, .tms-mhead__mark .tms-lockup__word { animation: none; }
.tms-mhead__mark .tms-lockup__bar { width: 3px; height: 20px; animation: none; }
.tms-mhead__mark .tms-lockup__words { font-size: 11px; line-height: 12px; }
.tms-mhead__btn { position: relative; }
.tms-mhead__badge { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border: 2px solid var(--teal-800); border-radius: var(--r-pill); background: var(--brand-orange); color: #FFFFFF; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tms-mhead__me { width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tms-mhead__me .tms-avatar { font-size: 13px; }

/* Tab bar: Dashboard, Tasks, the rocket, Objectives, HIS. The rocket sits in the middle slot. */
.tms-tabbar__item { white-space: nowrap; }
.tms-tabbar__new { display: flex; justify-content: center; align-items: flex-start; }
/* The New button: our rocket with a plus on its body. Flat: a white ring and a hairline, no shadow.
   <button class="tms-rocketbtn" aria-haspopup="dialog" aria-expanded="false"><svg class="tms-rocket">…</svg></button> */
.tms-rocketbtn { position: relative; z-index: 2; margin-top: -16px; width: 62px; height: 62px; box-sizing: border-box; padding: 0; border: 4px solid var(--surface); border-radius: var(--r-pill); outline: 1px solid var(--line-card); background: var(--teal-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tms-rocketbtn:hover { background: var(--teal-700-hover); }
.tms-rocketbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tms-rocket { width: 36px; height: 36px; transition: transform .15s ease; }
.tms-rocket__body { fill: #FFFFFF; }
.tms-rocket__fin, .tms-rocket__stripe, .tms-rocket__flame { fill: var(--brand-orange); }
.tms-rocket__core { fill: #FBBF24; }
.tms-rocket__nozzle { fill: var(--lockup-muted); }
.tms-rocket__plus { fill: none; stroke: var(--teal-700); stroke-width: 2.8; stroke-linecap: round; }
.tms-rocketbtn:active .tms-rocket, .tms-rocketbtn[aria-expanded="true"] .tms-rocket { transform: translateY(-3px); }

/* Account menu: the sheet the avatar opens (what More was) */
.tms-me { display: flex; align-items: center; gap: 12px; padding: 12px 8px 14px 20px; border-bottom: 1px solid var(--line-soft); }
.tms-me .tms-avatar { width: 44px; height: 44px; font-size: 16px; }
.tms-me__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tms-me__name { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--ink); }
.tms-me__meta { font-size: 13px; line-height: 18px; color: var(--muted); }
.tms-menulist { display: flex; flex-direction: column; padding: 6px 0; }
.tms-menulist__group { padding: 12px 20px 4px; font-size: 11.5px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tms-menulist__item { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 16px 0 20px; color: var(--ink); font-size: 15.5px; font-weight: 600; text-decoration: none; }
.tms-menulist__item:hover { background: var(--row-hover); }
.tms-menulist__item .tms-icon { width: 22px; height: 22px; color: var(--text-2); }
.tms-menulist__label { flex: 1; }
.tms-menulist__badge { height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--orange-tint); color: var(--orange-text); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.tms-menulist__item .tms-menulist__chev { width: 16px; height: 16px; color: #7A858A; }
.tms-langrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line-soft); font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.tms-langrow .tms-seg__btn { width: 56px; height: 36px; font-size: 14px; }
.tms-sheet__signout { padding: 8px 20px 20px; }

/* Progress pie: a filled pie instead of a long bar on phones. Same bands as the meter.
   <span class="tms-pie tms-band--ok" role="img" aria-label="75% complete" data-w="75"></span> (--w via the CSSOM) */
.tms-pie { --pie: 30px; display: inline-block; flex: none; width: var(--pie); height: var(--pie); border-radius: var(--r-pill); background: conic-gradient(var(--band, var(--teal-600)) var(--w, 0%), var(--track) 0); box-shadow: inset 0 0 0 1.5px var(--band, var(--teal-600)); }
.tms-pie--xs { --pie: 18px; }
.tms-pie--sm { --pie: 22px; }
.tms-pie--lg { --pie: 34px; }
.tms-pie--none { --band: #CBD5DA; --w: 0%; }
.tms-pieval { display: inline-flex; align-items: center; gap: 6px; }
.tms-pieval--stack { flex-direction: column; gap: 3px; }
.tms-pieval--stack .tms-pct { font-size: 12px; line-height: 14px; }
/* Large ring for the phone summary (conic, with a hole) */
.tms-mring { width: 92px; height: 92px; flex: none; border-radius: var(--r-pill); background: conic-gradient(var(--band, var(--teal-600)) var(--w, 0%), var(--teal-50) 0); display: flex; align-items: center; justify-content: center; }
.tms-mring__hole { width: 70px; height: 70px; border-radius: var(--r-pill); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tms-mring__value { font-size: 22px; line-height: 24px; font-weight: 700; color: var(--ink); }
.tms-mring__sub { font-size: 11px; line-height: 14px; color: var(--muted); }

/* Phone page body: intro, toolbar (Read/Edit, year, ⋯) */
.tms-mintro { display: flex; flex-direction: column; gap: 4px; }
.tms-mintro__saved { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--green-text); }
.tms-mtools { display: flex; align-items: center; gap: 8px; }
.tms-mtools__gap { flex: 1; }
.tms-mtools .tms-select__el { width: auto; height: 40px; padding: 0 10px; }
/* Dot icons (more ⋯, drag grip) are stroked points: "M5 12h.01M12 12h.01M19 12h.01" */
.tms-icon--dots { stroke-width: 3.4; }
.tms-iconbtn--box { width: 40px; height: 40px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--text-strong); }

/* Quarter tabs on phones: four small tiles with a pie */
.tms-mqtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tms-mqtab { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 9px 10px; box-sizing: border-box; border: 1px solid var(--line-card); border-radius: 12px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.tms-mqtab[aria-selected="true"] { padding: 8px 9px; border: 2px solid var(--teal-600); background: #F3FAFB; }
.tms-mqtab__name { font-size: 12.5px; line-height: 16px; font-weight: 700; color: var(--ink); }
.tms-mqtab .tms-pct { font-size: 14px; }
.tms-mqtab__state { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--muted); }
.tms-mqtab__state--running { color: var(--teal-700); }

/* Phone summary: ring + four figure rows, then counts and weak sections */
.tms-msum { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tms-msum__top { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.tms-mfig { display: grid; grid-template-columns: minmax(0, 1fr) 18px 44px; align-items: center; gap: 8px; min-height: 30px; }
.tms-mfig + .tms-mfig { border-top: 1px solid var(--line-soft); }
.tms-mfig__name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tms-mfig .tms-pct { text-align: right; font-size: 14px; }
.tms-msum__foot { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; line-height: 17px; color: var(--muted); }
.tms-msum__foot strong { color: var(--ink); }

/* Phone objectives: section card, group header, one row per objective. Nothing sits in fixed columns,
   so long titles wrap instead of running into the next value. */
.tms-mosec { overflow: hidden; }
.tms-mosec__head { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 0; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.tms-mosec__name { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--ink); }
.tms-mosec__meta { font-size: 12.5px; line-height: 17px; color: var(--muted); }
.tms-mosec__end { display: flex; align-items: center; gap: 8px; }
.tms-mosec__end .tms-pct { min-width: 42px; text-align: right; font-size: 16px; }
.tms-mosec__chev { width: 18px; height: 18px; color: var(--text-3); transition: transform .15s ease; }
.tms-mosec__head[aria-expanded="true"] .tms-mosec__chev { transform: rotate(180deg); }
.tms-mosec__tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 12px; }
.tms-mogroup { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line-soft); background: #F8FAFB; font: inherit; text-align: left; cursor: pointer; }
.tms-mogroup[aria-expanded="true"] .tms-ogroup__chev { transform: rotate(90deg); }
.tms-mogroup__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tms-mogroup__name { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.tms-mogroup__count { font-size: 12px; line-height: 16px; color: var(--muted); }
.tms-mogroup__end { display: flex; align-items: center; gap: 6px; }
.tms-mogroup__end .tms-pct { min-width: 36px; text-align: right; font-size: 13.5px; }
/* Edit view: the group header has a menu button next to it */
.tms-mogroupbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-top: 1px solid var(--line-soft); background: #F8FAFB; }
.tms-mogroupbar .tms-mogroup { border-top: 0; background: transparent; padding-right: 4px; }
.tms-morow { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.tms-morow__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tms-morow__title { font-size: 14.5px; line-height: 20px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tms-morow__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tms-morow__note { font-size: 12.5px; line-height: 17px; color: var(--muted); }
.tms-morow__effort { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
/* Small tags in phone rows: the HIS link, "From Q3", typed by hand, the objective a HIS task counts in */
.tms-mtag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-tag); background: var(--chip-bg); color: var(--text-3); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.tms-mtag .tms-icon { width: 12px; height: 12px; stroke-width: 2.4; }
.tms-mtag--his { background: var(--teal-50); color: var(--teal-700); font-weight: 700; }
.tms-mtag--obj { background: var(--violet-tint); color: var(--violet-text); }
.tms-morow .tms-tag, .tms-mhrow .tms-tag { height: 24px; padding: 0 8px 0 5px; font-size: 12px; }

/* Edit view: one card per objective */
.tms-mocards { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); }
.tms-mocard { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--surface); }
.tms-mocard--new { border-color: #F2C894; }
.tms-mocard__top { display: flex; align-items: center; gap: 6px; }
.tms-mocard__move { margin-left: -6px; cursor: grab; }
.tms-mocard__remove { margin-left: auto; margin-right: -6px; color: var(--danger); }
.tms-mocard__kicker { font-size: 11.5px; line-height: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tms-mocard__hint { margin-top: -4px; font-size: 12px; line-height: 16px; color: var(--amber-text); }
.tms-mocard__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tms-mocard .tms-textarea { min-height: 0; font-size: 14.5px; line-height: 20px; }
.tms-mocard .tms-input, .tms-mocard .tms-select__el { height: 42px; }
.tms-mocard .tms-hislink { height: 42px; border-color: var(--control-border); }
.tms-mocard .tms-hislink--empty { border-style: dashed; border-color: #9FB4B9; color: var(--teal-700); font-weight: 600; }
.tms-mocard__info { font-size: 12px; line-height: 16px; color: var(--muted); }
.tms-mprog { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #F6F9FA; }
.tms-mprog__text { display: flex; flex-direction: column; min-width: 0; }
.tms-mprog__text .tms-pct { font-size: 15px; line-height: 19px; }
.tms-mprog__source { font-size: 12px; line-height: 16px; color: var(--muted); }
.tms-mprog__manual { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tms-mprog__manual .tms-mprog__label { flex: 1; }
.tms-mprog__manual .tms-input { width: 76px; height: 38px; text-align: right; font-weight: 600; }

/* HIS tasks on phones: summary row, active filters and one card per task */
.tms-mbar__row { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13px; line-height: 18px; color: var(--muted); }
.tms-mbar__row > :first-child { flex: 1; min-width: 0; }
.tms-mbar__row strong { color: var(--ink); }
.tms-mbar__row .tms-select__el { width: auto; height: 36px; padding: 0 8px; }
.tms-mbar__row .tms-iconbtn--box { width: 36px; height: 36px; }
.tms-activef { display: flex; align-items: center; gap: 6px; padding: 0 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.tms-activef__chip { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 2px 0 10px; border-radius: 8px; background: var(--teal-50); color: #0A5560; font-size: 12.5px; font-weight: 600; }
.tms-activef__x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tms-mhrow { gap: 6px; padding: 12px 16px; }
.tms-mhrow .tms-mrow__nr { white-space: nowrap; }
.tms-mhrow__title { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tms-mhrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; line-height: 16px; }
.tms-mhrow .tms-mod { font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; }
.tms-mhrow .tms-type { font-size: 12.5px; font-weight: 600; color: var(--type); }
/* Filter sheet: toggle chips. The module group has Show only / Hide. */
.tms-fgroup { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.tms-fgroup legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.tms-fgroup .tms-seg { display: grid; grid-template-columns: 1fr 1fr; }
.tms-optchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tms-optchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--text-strong); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tms-optchip[aria-pressed="true"] { border-color: var(--teal-700); background: var(--teal-50); color: #0A5560; }
.tms-optchip__check { display: none; width: 13px; height: 13px; stroke-width: 2.8; }
.tms-optchip[aria-pressed="true"] .tms-optchip__check { display: block; }
.tms-optchip__count { font-size: 12px; font-weight: 500; color: var(--muted); }

/* ======================================================================
   Motion preferences
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root:not(.tms-motion-always) .tms-switch::after, :root:not(.tms-motion-always) .tms-switchbtn__track::after, :root:not(.tms-motion-always) .tms-ogroup__chev, :root:not(.tms-motion-always) .tms-sheet__panel, :root:not(.tms-motion-always) .tms-rocket, :root:not(.tms-motion-always) .tms-mosec__chev { transition: none !important; animation: none !important; }
}

/* ======================================================================
   The phone itself (iPhone and Android): its edges, its keyboard and the browser's own bars
   ====================================================================== */
/* dvh: the height that is really visible, as Safari's toolbar comes and goes (vh is the tallest). */
.tms-app, .tms-public, .tms-m { min-height: 100vh; min-height: 100dvh; }
.tms-sheet__panel { max-height: 92vh; max-height: 92dvh; }
.tms-modal__card { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
@media (max-width: 767px) {
  /* viewport-fit=cover: what sits at an edge keeps clear of the notch and the home indicator. */
  .tms-mhead { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .tms-tabbar { height: calc(66px + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .tms-toasts--bottom { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .tms-sheet__panel { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .tms-sheet__foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .tms-sheet__panel:not(:has(.tms-sheet__foot)) .tms-sheet__body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  /* --kb (js/keyboard.js): the iPhone keyboard covers the page's bottom; sheets sit above it. */
  .tms-sheet { bottom: var(--kb, 0px); }
  /* Text fields at 16 px: under that, iOS zooms the page in when one is tapped. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  .tms-select--compact .tms-select__el, .tms-delselect select { font-size: 16px; }
}