/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   th-program.css — THE APPLICATION FRAME, frame 6 (3 Oct 2026). Every program is application software.

   Sean, 3 Oct 2026, on frame 5: "looking a little 80's 90's style, you cant do better?" · "forget the look, it seem its
   the problem, look at top world leading software please" · "a bunch of stick menus with just the lines" · "its really
   lacking colour or something" · "no logos visible" · "it always missing that final touch or navigation".

   What the leaders do, and what this sheet now does (New Outlook and Teams, Linear, Figma UI3, Fluent 2's single-line
   ribbon, Autodesk's browser and properties):
     · each program has ITS OWN COLOUR (--ph, --ph-ink from th-program.js) — its tile beside the platform's real mark in
       the title bar, the view you stand on, the primary command, the icons on the command bar, the row you pick, and a
       whisper of tint in the frame around the work;
     · hierarchy by SURFACES, not lines: the frame is tinted, the work and the inspector are white sheets that lift off
       it with a soft shadow; a hairline only where a table needs one;
     · navigation you can see: the views down a sidebar, each with an icon and its count; the place list at its head;
       the view's own title, icon and count over the work;
     · commands on ONE line (the simplified ribbon), icon and word, the primary filled in the program's colour;
     · Properties as an inspector on the right — what is selected, in full, beside the work.
   Light, dark and Sunlight each have their own token set below; nothing is painted outside them.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html.th-on[data-thapp="1"]{overflow:hidden}
html.th-on[data-thapp="1"] body{overflow:hidden}

/* ── THE TOKENS: one set per room — light, dark and Sunlight. The frame's own names only (--a-*, --ph*); the theme's
   names are left to the theme, so a program's own cards and forms keep the system's paint (th-system.css). ────────── */
html.th-on .ta-app{
  --ph:#1F6FB2; --ph-ink:#123955;
  --a-frame:color-mix(in srgb,var(--ph) 7%,#F5F1E9);
  --a-surface:#FFFFFF; --a-sunk:#F7F8FA; --a-th:#FAFAFB; --a-hover:rgba(17,24,39,.055); --a-press:rgba(17,24,39,.09);
  --a-line:#E7E9EE; --a-line-soft:#F0F2F5; --a-line2:#D3D8E0;
  --a-tx:#141B2E; --a-tx2:#465066; --a-mut:#6B7488;
  --ph-soft:color-mix(in srgb,var(--ph) 11%,#FFFFFF); --ph-soft2:color-mix(in srgb,var(--ph) 20%,#FFFFFF);
  --ph-text:var(--ph-ink);
  --a-sh1:0 1px 2px rgba(16,24,40,.06),0 0 0 1px rgba(16,24,40,.045);
  --a-sh2:0 1px 3px rgba(16,24,40,.06),0 6px 20px rgba(16,24,40,.06),0 0 0 1px rgba(16,24,40,.05);
  --a-sh3:0 20px 48px rgba(16,24,40,.20),0 4px 12px rgba(16,24,40,.08),0 0 0 1px rgba(16,24,40,.06);
  --a-r:6px; --a-rl:8px; --a-rd:12px;
  --a-ok-bg:#E8F6EE; --a-ok-tx:#11713F; --a-warn-bg:#FDF3DC; --a-warn-tx:#8A5300; --a-bad-bg:#FDECEC; --a-bad-tx:#B42318; --a-info-bg:#E9F1FE; --a-info-tx:#1D4ED8;
}
html.th-on[data-theme="dark"] .ta-app{
  --a-frame:color-mix(in srgb,var(--ph) 9%,#0A101C);
  --a-surface:#131B2C; --a-sunk:#0F1626; --a-th:#161F33; --a-hover:rgba(255,255,255,.06); --a-press:rgba(255,255,255,.10);
  --a-line:rgba(255,255,255,.085); --a-line-soft:rgba(255,255,255,.05); --a-line2:rgba(255,255,255,.16);
  --a-tx:#E8EDF5; --a-tx2:#B6C0CF; --a-mut:#8C97AB;
  --ph-soft:color-mix(in srgb,var(--ph) 22%,#131B2C); --ph-soft2:color-mix(in srgb,var(--ph) 34%,#131B2C);
  --ph-text:color-mix(in srgb,var(--ph) 55%,#FFFFFF);
  --a-sh1:0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.05);
  --a-sh2:0 1px 3px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.06);
  --a-sh3:0 24px 56px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  --a-ok-bg:rgba(34,197,94,.16); --a-ok-tx:#6EE7A0; --a-warn-bg:rgba(245,158,11,.16); --a-warn-tx:#FCD47A; --a-bad-bg:rgba(239,68,68,.16); --a-bad-tx:#FCA5A5; --a-info-bg:rgba(59,130,246,.18); --a-info-tx:#93C5FD;
}
/* SUNLIGHT — the roof at midday: no tint, no shadow, every edge a firm line, the ink at full strength */
html.th-on[data-mode="sun"] .ta-app{
  --a-frame:#FFFFFF; --a-surface:#FFFFFF; --a-sunk:#F4F5F7; --a-th:#F4F5F7; --a-line:#9AA3B2; --a-line-soft:#C4CAD4; --a-line2:#5E6879;
  --a-tx:#060B16; --a-tx2:#1F2937; --a-mut:#374151; --a-sh1:0 0 0 1px #5E6879; --a-sh2:0 0 0 1.5px #3B4454; --a-sh3:0 0 0 2px #1F2937;
  --ph-soft:color-mix(in srgb,var(--ph) 16%,#FFFFFF); --ph-text:var(--ph-ink);
}

/* Sunlight flattens every shadow on the platform (box-shadow:none !important) — the frame's sheets and the view you stand
   on would vanish white on white, so in the sun their edges are OUTLINES, which the sun leaves alone (found by the Measure
   & Plan restyle builder, 3 Oct) */
html.th-on[data-mode="sun"] .ta-app :is(.ta-work,.ta-insp,.ta-launch,.ta-pane,.ta-lp){outline:1.5px solid #3B4454;outline-offset:-1.5px}
html.th-on[data-mode="sun"] .ta-app :is(.ta-tabs button.ta-on,.ta-list button.ta-on,.ta-findw){outline:1px solid #5E6879;outline-offset:-1px}
html.th-on[data-mode="sun"] .ta-app .ta-findw:focus-within{outline:2px solid var(--ph-ink)}
html.th-on .ta-app{display:grid;height:calc(100dvh - var(--th-app-top,58px));max-height:calc(100dvh - var(--th-app-top,58px));min-height:0;
  grid-template-columns:256px minmax(0,1fr) 320px;
  grid-template-rows:48px minmax(0,1fr) 26px;
  grid-template-areas:"qat qat qat" "left work insp" "stat stat stat";
  column-gap:8px;padding:0 8px;
  background:var(--a-frame);color:var(--a-tx);font:400 14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
html.th-on .ta-app *{box-sizing:border-box}
/* ── THE RESET (3 Oct 2026). th-system.css paints every button and input on the platform; inside the window those looks
   are cleared once, on the frame's own furniture only, and every control is drawn by its own rule below. :where() keeps
   the specificity where it was; :not(.btn) leaves the platform's real buttons (THASK's Save and Cancel) alone. */
html.th-on .ta-app :where(.ta-qat,.ta-tabs,.ta-ribbon,#taScope,.ta-pal h3,.ta-launch,.ta-stat) button:where(:not(.btn)){appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;box-shadow:none;font:inherit;min-height:0;padding:0;color:inherit;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}
html.th-on .ta-app :where(.ta-qat,.ta-tabs,.ta-ribbon,#taScope,.ta-pal h3,.ta-launch,.ta-stat) button:where(:not(.btn)):hover{background:none;border-color:transparent}
html.th-on .ta-app button:disabled{opacity:.4}
html.th-on .ta-app :where(.ta-qat,.ta-left,.ta-vhead,.ta-ribbon,.ta-insp,.ta-stat,.ta-launch) :focus-visible{outline:2px solid var(--ph);outline-offset:2px}

/* full screen: the platform's top bar, menus and side panel fold away (the same switch as measure.html's body.mp-full) */
html.th-on body.ta-full #thTop,html.th-on body.ta-full #thGnav,html.th-on body.ta-full #thRight,html.th-on body.ta-full #thSide,html.th-on body.ta-full #thBar{display:none!important}
html.th-on body.ta-full{padding:0!important;--th-gn:0px}
html.th-on body.ta-full .ta-app{position:fixed;inset:0;height:100dvh;max-height:100dvh;margin:0;z-index:40}
html.th-on body.th-app #thFoot,html.th-on body.ta-full #thFoot{display:none}

/* ── THE TITLE BAR: Programs · the platform's mark · the program's tile and name · where you are · search · tools ──── */
html.th-on .ta-app .ta-qat{grid-area:qat;display:flex;align-items:center;gap:6px;padding:0 2px;min-width:0;color:var(--a-tx2)}
html.th-on .ta-app .ta-qat > button{height:32px;min-width:32px;border-radius:var(--a-r);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 8px;cursor:pointer;color:var(--a-tx2)}
html.th-on .ta-app .ta-qat > button:hover{background:var(--a-hover);color:var(--a-tx)}
html.th-on .ta-app .ta-qat > button[hidden]{display:none}
html.th-on .ta-app .ta-qat svg{width:18px;height:18px}
html.th-on .ta-app .ta-qat #taApps{padding:0 10px 0 8px;font:500 13px var(--sans);color:var(--a-tx)}
html.th-on .ta-app .ta-qat #taApps[aria-expanded="true"]{background:var(--a-surface);box-shadow:var(--a-sh1)}
html.th-on .ta-app .ta-mark{display:inline-flex;align-items:center;padding:0 12px 0 6px;margin-right:4px;height:26px;border-right:1px solid var(--a-line2)}
html.th-on .ta-app .ta-mark img{width:26px;height:26px;display:block;border-radius:6px}
html.th-on .ta-app .ta-ptile{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#FFFFFF;
  background:linear-gradient(140deg,var(--ph) 0%,var(--ph-ink) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(16,24,40,.18)}
html.th-on .ta-app .ta-ptile svg{width:18px;height:18px;color:#FFFFFF}
html.th-on .ta-app .ta-qat .ta-brand{margin:0 2px 0 4px;font:600 15px/1 var(--sans);letter-spacing:-.005em;color:var(--a-tx);white-space:nowrap}
html.th-on .ta-app .ta-crumb{min-width:0;display:inline-flex;align-items:center}
html.th-on .ta-app .ta-crumb .ta-doc{font:500 14px var(--sans);color:var(--a-tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.th-on .ta-app .ta-crumb .ta-doc:not(:empty)::before{content:"/";margin:0 8px 0 4px;color:var(--a-line2);font-weight:400}
html.th-on .ta-app .ta-qat .ta-sp{flex:1}
html.th-on .ta-app .ta-findw{display:flex;align-items:center;gap:8px;height:32px;width:clamp(220px,30vw,460px);padding:0 10px;cursor:text;
  background:var(--a-surface);border-radius:var(--a-r);box-shadow:var(--a-sh1);color:var(--a-mut)}
html.th-on .ta-app .ta-findw svg{width:16px;height:16px;flex:0 0 auto}
html.th-on .ta-app .ta-findw:focus-within{box-shadow:0 0 0 1px var(--ph),0 0 0 4px var(--ph-soft)}
html.th-on #taFind.ta-find{flex:1;min-width:0;height:32px;border:0;outline:0;background:transparent;color:var(--a-tx);padding:0;font:400 13.5px var(--sans);box-shadow:none}
html.th-on #taFind.ta-find::placeholder{color:var(--a-mut)}
html.th-on #taFind.ta-find:focus-visible{outline:0}

/* ── THE SIDEBAR: the place list at its head, then the program's views — icon, name, count ─────────────────────── */
html.th-on .ta-app .ta-left{grid-area:left;display:flex;flex-direction:column;gap:10px;min-height:0;padding:4px 0 8px}
html.th-on .ta-app .ta-pal{display:flex;flex-direction:column;min-height:0}
html.th-on .ta-app .ta-pal .ta-body{overflow-y:auto;flex:1;min-height:0}
html.th-on .ta-app .ta-scopepal{flex:0 1 auto;max-height:44%}
html.th-on .ta-app .ta-scopepal h3,html.th-on .ta-app .ta-tabs::before{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:6px 10px 6px;
  font:600 12px/1.2 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--a-mut);background:none;border:0}
html.th-on .ta-app .ta-scopepal h3 b{font:600 12px/1 var(--sans);color:var(--a-tx2);background:var(--a-hover);border-radius:6px;padding:3px 6px}
html.th-on .ta-app .ta-scopepal h3 b:empty{display:none}
html.th-on .ta-app .ta-list{display:flex;flex-direction:column;gap:1px}
html.th-on .ta-app .ta-list button{display:flex;flex:0 0 auto;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;border-radius:var(--a-r);cursor:pointer;color:var(--a-tx);font:500 14px/1.3 var(--sans)}
html.th-on .ta-app .ta-list button:hover{background:var(--a-hover)}
html.th-on .ta-app .ta-list button.ta-on{background:var(--a-surface);box-shadow:var(--a-sh1);font-weight:600}
html.th-on .ta-app .ta-list .ta-si{display:inline-flex;color:color-mix(in srgb,var(--ph) 72%,var(--a-mut));flex:0 0 auto}
html.th-on .ta-app .ta-list .ta-si svg{width:16px;height:16px}
html.th-on .ta-app .ta-list button.ta-on .ta-si{color:var(--ph)}
html.th-on .ta-app .ta-list .ta-st{min-width:0;display:flex;flex-direction:column}
html.th-on .ta-app .ta-list button small{display:block;margin-top:1px;color:var(--a-mut);font:400 12px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.th-on .ta-app .ta-sgrp{padding:10px 10px 4px;font:600 12px var(--sans);letter-spacing:.02em;color:var(--a-mut)}
html.th-on .ta-app .ta-tabs{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;scrollbar-width:thin}
html.th-on .ta-app .ta-tabs::before{content:attr(aria-label)}
html.th-on .ta-app .ta-tabs button{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--a-r);cursor:pointer;
  color:var(--a-tx2);font:500 14px var(--sans);text-align:left;white-space:nowrap}
html.th-on .ta-app .ta-tabs .ta-ti{display:inline-flex;color:color-mix(in srgb,var(--ph) 72%,var(--a-mut));flex:0 0 auto}
html.th-on .ta-app .ta-tabs .ta-ti svg{width:18px;height:18px}
html.th-on .ta-app .ta-tabs .ta-tl{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.th-on .ta-app .ta-tabs button[hidden]{display:none}
html.th-on .ta-app .ta-tabs .ta-tgrp{flex:0 0 auto;padding:14px 10px 4px;font:600 12px/1.2 var(--sans);color:var(--a-mut);letter-spacing:.01em}
html.th-on .ta-app .ta-tabs button:hover{background:var(--a-hover);color:var(--a-tx)}
html.th-on .ta-app .ta-tabs button.ta-on{background:var(--a-surface);color:var(--a-tx);font-weight:600;box-shadow:var(--a-sh1)}
html.th-on .ta-app .ta-tabs button.ta-on .ta-ti{color:var(--ph)}
html.th-on .ta-app .ta-tabs button.ta-on::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--ph)}
html.th-on .ta-app .ta-tabs .ta-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:6px;
  background:var(--ph-soft);color:var(--ph-text);font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;border:0}
html.th-on .ta-app .ta-tabs .ta-on .ta-badge{background:var(--ph-ink);color:#FFFFFF}
/* a program that works across the whole business keeps no empty place list — one quiet line at the foot of the sidebar */
html.th-on .ta-app.ta-noscope .ta-scopepal{order:2;margin-top:auto;max-height:none;flex:0 0 auto}
html.th-on .ta-app.ta-noscope .ta-scopepal h3{display:none}
html.th-on .ta-app.ta-noscope .ta-scopepal .ta-none{padding:8px 10px;font-size:12px;line-height:1.45;color:var(--a-mut)}

/* ── THE WORK: a white sheet over the frame — the view's title, the command bar, the register or the drawn surface ── */
html.th-on .ta-app .ta-work{grid-area:work;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  background:var(--a-surface);border-radius:var(--a-rl);box-shadow:var(--a-sh2)}
html.th-on .ta-app .ta-vhead{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:16px 20px 8px;min-width:0}
html.th-on .ta-app .ta-vicon{flex:0 0 auto;width:32px;height:32px;border-radius:var(--a-r);display:inline-flex;align-items:center;justify-content:center;background:var(--ph-soft);color:var(--ph)}
html.th-on .ta-app .ta-vicon svg{width:20px;height:20px}
html.th-on .ta-app .ta-vtitle{margin:0;font:600 19px/1.25 var(--sans);letter-spacing:-.012em;color:var(--a-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.th-on .ta-app .ta-vcount{flex:0 0 auto;font:500 12.5px/1 var(--sans);color:var(--a-mut);background:var(--a-sunk);border-radius:6px;padding:5px 8px;white-space:nowrap}
html.th-on .ta-app .ta-vcount b{color:var(--a-tx2);font-weight:600}
html.th-on .ta-app .ta-vcount:empty{display:none}
/* ── THE COMMAND BAR: one line, icon and word, the primary filled in the program's colour (Fluent's simplified ribbon) */
html.th-on .ta-app .ta-ribbon{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:4px 16px 12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid var(--a-line)}
html.th-on .ta-app .ta-ribbon::-webkit-scrollbar{display:none}
html.th-on .ta-app .ta-ribbon:empty{padding:0 0 8px}
html.th-on .ta-app .ta-pnl{display:flex;align-items:center;flex:0 0 auto}
html.th-on .ta-app .ta-pnl + .ta-pnl::before{content:"";flex:0 0 auto;width:1px;height:20px;background:var(--a-line2);margin:0 8px}
html.th-on .ta-app .ta-pnl .ta-row,html.th-on .ta-app .ta-pnl .ta-stack{display:flex;align-items:center;gap:2px}
html.th-on .ta-app .ta-pnl .ta-nm{display:none}
html.th-on .ta-app .ta-cmd,html.th-on .ta-app .ta-cmd.ta-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;height:32px;min-height:0;min-width:0;max-width:none;
  padding:0 10px;border-radius:var(--a-r);cursor:pointer;color:var(--a-tx);font:500 13px/1 var(--sans);white-space:nowrap;text-align:left}
html.th-on .ta-app .ta-cmd svg,html.th-on .ta-app .ta-cmd.ta-sm svg{width:18px;height:18px;flex:0 0 auto;color:var(--ph)}
html.th-on .ta-app .ta-cmd:hover:not(:disabled){background:var(--a-hover);box-shadow:none}
html.th-on .ta-app .ta-cmd:active:not(:disabled){background:var(--a-press)}
html.th-on .ta-app .ta-cmd.ta-primary{background:var(--ph-ink);color:#FFFFFF;padding:0 14px 0 12px;box-shadow:0 1px 2px rgba(16,24,40,.14),inset 0 1px 0 rgba(255,255,255,.14)}
html.th-on .ta-app .ta-cmd.ta-primary svg{color:#FFFFFF}
html.th-on .ta-app .ta-cmd.ta-primary:hover:not(:disabled){background:color-mix(in srgb,var(--ph-ink) 88%,#000000)}
html.th-on .ta-app .ta-cmd:disabled{opacity:.42;cursor:default}
html.th-on .ta-app .ta-cmd:disabled svg{color:var(--a-mut)}
html.th-on .ta-app .ta-cmd.ta-primary:disabled{background:var(--a-sunk);color:var(--a-mut);box-shadow:none}

/* ── THE SURFACE: the register, the lede above it, the messages ─────────────────────────────────────────────────── */
html.th-on .ta-app .ta-main{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
/* reading: a thin bar in the program's colour runs across the top of the work while the record answers (GitHub's and
   YouTube's top bar) — never a blank sheet that might be an empty one. Without motion it simply shows, still. */
html.th-on .ta-app .ta-main::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent 0,var(--ph) 50%,transparent 100%) no-repeat;background-size:40% 100%;transition:opacity .2s ease}
html.th-on .ta-app .ta-main:has(> .ta-surface[aria-busy="true"])::before{opacity:1;animation:ta-reading 1.1s linear infinite}
@keyframes ta-reading{from{background-position:-60% 0}to{background-position:160% 0}}
html.th-on .ta-app .ta-msg{flex:0 0 auto;margin:12px 20px 0;padding:9px 12px;border-radius:var(--a-r);font-size:13px;line-height:1.45;background:var(--a-sunk);color:var(--a-tx2);border:0}
html.th-on .ta-app .ta-msg[hidden]{display:none}
html.th-on .ta-app .ta-msg.ta-bad{background:var(--a-bad-bg);color:var(--a-bad-tx)}
html.th-on .ta-app .ta-msg.ta-ok{background:var(--a-ok-bg);color:var(--a-ok-tx)}
html.th-on .ta-app .ta-msg.ta-warn{background:var(--a-warn-bg);color:var(--a-warn-tx)}
html.th-on .ta-app .ta-surface{flex:1;min-height:0;overflow:auto;padding-bottom:16px}
html.th-on .ta-app .ta-lede{max-width:960px;padding:14px 20px 6px;font-size:13px;line-height:1.55;color:var(--a-tx2);background:none;border:0}
html.th-on .ta-app .ta-lede strong{color:var(--a-tx);font-weight:600}
html.th-on .ta-app .ta-grid{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
html.th-on .ta-app .ta-grid th{position:sticky;top:0;z-index:1;background:var(--a-th);text-align:left;font:600 12.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--a-tx2);
  height:36px;padding:0 12px;border-bottom:1px solid var(--a-line);white-space:nowrap;cursor:pointer;user-select:none}
html.th-on .ta-app .ta-grid th:hover{color:var(--a-tx)}
html.th-on .ta-app .ta-grid th:first-child,html.th-on .ta-app .ta-grid td:first-child{padding-left:20px}
html.th-on .ta-app .ta-grid th:last-child,html.th-on .ta-app .ta-grid td:last-child{padding-right:20px}
html.th-on .ta-app .ta-grid th[aria-sort="ascending"]::after{content:" ↑";color:var(--ph)}
html.th-on .ta-app .ta-grid th[aria-sort="descending"]::after{content:" ↓";color:var(--ph)}
html.th-on .ta-app .ta-grid td{padding:0 12px;height:40px;border-bottom:1px solid var(--a-line-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px;color:var(--a-tx)}
html.th-on .ta-app .ta-grid td:first-child{font-weight:500}
html.th-on .ta-app .ta-grid tbody tr{cursor:default}
html.th-on .ta-app .ta-grid tbody tr:hover td{background:var(--a-sunk)}
html.th-on .ta-app .ta-grid tbody tr.ta-sel td{background:var(--ph-soft)}
html.th-on .ta-app .ta-grid tbody tr.ta-sel td:first-child{box-shadow:inset 3px 0 0 var(--ph)}
html.th-on .ta-app .ta-grid tbody tr.ta-gone td{color:var(--a-mut);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--a-mut) 60%,transparent)}
html.th-on .ta-app .ta-grid .ta-num{text-align:right;font-variant-numeric:tabular-nums}
html.th-on .ta-app .ta-grid .ta-empty td{height:140px;text-align:center;color:var(--a-mut);font-size:14px;font-weight:400;text-decoration:none;border-bottom:0;white-space:normal}
html.th-on .ta-app .ta-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;font:500 12px/1.2 var(--sans);letter-spacing:0;border:0;background:var(--a-sunk);color:var(--a-tx2)}
html.th-on .ta-app .ta-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;flex:0 0 auto}
html.th-on .ta-app .ta-chip[data-tone="ok"]{background:var(--a-ok-bg);color:var(--a-ok-tx)}
html.th-on .ta-app .ta-chip[data-tone="warn"]{background:var(--a-warn-bg);color:var(--a-warn-tx)}
html.th-on .ta-app .ta-chip[data-tone="bad"]{background:var(--a-bad-bg);color:var(--a-bad-tx)}
html.th-on .ta-app .ta-chip[data-tone="info"]{background:var(--a-info-bg);color:var(--a-info-tx)}
html.th-on .ta-app .ta-none{padding:12px 20px;color:var(--a-mut);font-size:13px;line-height:1.5}
html.th-on .ta-app .ta-surface > .ta-none{padding:48px 20px;text-align:center;font-size:14px}
html.th-on .ta-app .ta-rsurf{min-height:0}

/* ── THE INSPECTOR: Properties of what is selected, on its own sheet at the right ──────────────────────────────── */
html.th-on .ta-app .ta-insp{grid-area:insp;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;background:var(--a-surface);border-radius:var(--a-rl);box-shadow:var(--a-sh2)}
html.th-on .ta-app .ta-insp .ta-pal{flex:1}
html.th-on .ta-app .ta-insp h3{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0;padding:16px 18px 14px;border-bottom:1px solid var(--a-line);background:none;
  font:600 12px/1.2 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--a-mut)}
html.th-on .ta-app .ta-insp h3 b{font:600 16px/1.3 var(--sans);letter-spacing:-.005em;text-transform:none;color:var(--a-tx);overflow-wrap:anywhere;white-space:normal}
html.th-on .ta-app .ta-insp h3 b:empty{display:none}
html.th-on .ta-app .ta-kv{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px 12px;padding:12px 18px;font-size:13.5px;line-height:1.4;margin:0}
html.th-on .ta-app .ta-kv dt{color:var(--a-mut)}
html.th-on .ta-app .ta-kv dd{margin:0;color:var(--a-tx);overflow-wrap:anywhere}
html.th-on .ta-app .ta-kv dd.ta-num{font-variant-numeric:tabular-nums}
html.th-on .ta-app .ta-sub{margin-top:10px;padding:14px 18px 0;font:600 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--a-tx)}
html.th-on .ta-app .ta-insp .ta-none.ta-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:56px 28px;color:var(--a-mut)}
html.th-on .ta-app .ta-insp .ta-none.ta-pick svg{width:26px;height:26px;color:var(--ph);opacity:.7}

/* ── THE STATUS BAR ─────────────────────────────────────────────────────────────────────────────────────────────── */
html.th-on .ta-app .ta-stat{grid-area:stat;display:flex;align-items:center;gap:18px;padding:0 6px;font-size:12px;color:var(--a-mut);white-space:nowrap;overflow:hidden;background:none}
html.th-on .ta-app .ta-stat .ta-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16A34A;margin-right:6px;vertical-align:1px;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
html.th-on .ta-app .ta-stat .ta-dot.ta-off{background:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.16)}
html.th-on .ta-app .ta-stat b{color:var(--a-tx2);font-weight:600}
html.th-on .ta-app .ta-stat .ta-sp{flex:1}

/* ── PROGRAMS: every program and every tool, each with its coloured tile ─────────────────────────────────────── */
html.th-on .ta-app .ta-launch{position:fixed;top:50px;left:8px;bottom:8px;width:min(1080px,calc(100vw - 16px));z-index:80;display:flex;flex-direction:column;overflow:hidden;
  background:var(--a-surface);color:var(--a-tx);border:0;border-radius:var(--a-rd);box-shadow:var(--a-sh3)}
html.th-on .ta-app .ta-launch[hidden]{display:none}
html.th-on body:not(.ta-full) .ta-launch{top:calc(var(--th-app-top,58px) + 50px)}
html.th-on .ta-app .ta-lhead{display:flex;gap:8px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--a-line);background:var(--a-surface)}
html.th-on #taLaunchFind,html.th-on #taStartFind{flex:1;max-width:none;height:40px;border:0;border-radius:10px;background:var(--a-sunk);color:var(--a-tx);padding:0 14px;font:400 14px var(--sans);box-shadow:inset 0 0 0 1px var(--a-line)}
html.th-on #taLaunchFind:focus-visible,html.th-on #taStartFind:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--ph),0 0 0 4px var(--ph-soft)}
html.th-on .ta-app .ta-lhead button{width:40px;height:40px;border-radius:10px;color:var(--a-tx2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
html.th-on .ta-app .ta-lhead button:hover{background:var(--a-hover)}
html.th-on .ta-app .ta-lhead svg{width:18px;height:18px}
html.th-on .ta-app .ta-lbody{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;align-content:start;background:var(--a-sunk)}
html.th-on .ta-app .ta-lp{min-width:0;padding:12px 10px 8px;border:0;border-radius:var(--a-rl);background:var(--a-surface);box-shadow:var(--a-sh1);transition:box-shadow .16s ease,transform .16s ease}
html.th-on .ta-app .ta-lp:hover{box-shadow:var(--a-sh2);transform:translateY(-1px)}
html.th-on .ta-app .ta-lp.ta-on{box-shadow:0 0 0 1.5px var(--ph),0 0 0 5px var(--ph-soft)}
html.th-on .ta-app .ta-lp h4{display:flex;align-items:center;gap:10px;margin:0 0 4px;padding:0 4px;font:600 14.5px/1.25 var(--sans);color:var(--a-tx)}
html.th-on .ta-app .ta-lp h4 .ta-ptile{width:30px;height:30px}
html.th-on .ta-app .ta-lp p{margin:0 0 8px;padding:0 4px 0 44px;font-size:12.5px;line-height:1.4;color:var(--a-mut)}
html.th-on .ta-app .ta-lp ul{list-style:none;margin:0;padding:0}
html.th-on .ta-app .ta-lp a{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;color:var(--a-tx);text-decoration:none;font-size:13px;min-width:0}
html.th-on .ta-app .ta-lp a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.th-on .ta-app .ta-lp a .ta-li{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center}
html.th-on .ta-app .ta-lp a svg{width:16px;height:16px;flex:0 0 auto;color:var(--ph)}
html.th-on .ta-app .ta-lp a:hover{background:var(--ph-soft)}
html.th-on .ta-app .ta-lp a[aria-current="page"]{background:var(--ph-soft);color:var(--ph-text);font-weight:600}
html.th-on .ta-app .ta-lp a:focus-visible{outline:2px solid var(--ph);outline-offset:-2px}
html.th-on .ta-app .ta-lp h4 a.ta-lpn{display:inline;padding:0;min-height:0;font:inherit;color:inherit;background:none;text-decoration:none}
html.th-on .ta-app .ta-lp h4 a.ta-lpn:hover{background:none;text-decoration:underline}
/* the Desk's Start tab: the same programs as the panel, in the working surface (ctx.programs) */
html.th-on .ta-app .ta-start{display:flex;flex-direction:column;min-height:100%}
html.th-on .ta-app .ta-start .ta-lhead{position:sticky;top:0;z-index:2}
html.th-on .ta-app .ta-start .ta-lbody{overflow:visible;background:none}

/* ── THE TASK PANE: every form opens on its own sheet at the right of the work — never inside the command bar ───── */
html.th-on .ta-app .ta-pane{position:absolute;top:8px;right:8px;bottom:8px;width:min(440px,calc(100% - 16px));z-index:20;overflow-y:auto;
  background:var(--a-surface);border:0;border-radius:var(--a-rd);box-shadow:var(--a-sh3)}
html.th-on .ta-app .ta-pane[hidden]{display:none}
html.th-on .ta-app .ta-pane .th-ask-host{margin:0}
html.th-on .ta-app .ta-pane .th-ask{margin:0;border:0;border-radius:0;box-shadow:none;padding:18px 20px 22px}
/* inside a program the place list is the place picker and the title bar names the place — the platform's own context bar
   would say it a third time */
html.th-on[data-thapp="1"] #th-context-bar{display:none}
/* cd-signature.css keeps a scrollbar's gutter on every page; a program is a fixed window that never scrolls the page */
html.th-on[data-thapp="1"]{scrollbar-gutter:auto}

/* ── NARROWER WINDOWS: the inspector folds away and opens over the work from Details ───────────────────────────── */
html.th-on .ta-app .ta-sheetbar{display:none}
@media (max-width:1279px) and (min-width:1100px){
  html.th-on .ta-app{grid-template-columns:212px minmax(0,1fr) 276px}
  html.th-on .ta-app .ta-findw{width:clamp(200px,24vw,320px)}
}
@media (max-width:1099px) and (min-width:901px){
  html.th-on .ta-app{grid-template-columns:208px minmax(0,1fr);grid-template-areas:"qat qat" "left work" "stat stat"}
  html.th-on .ta-app .ta-insp{display:none}
  html.th-on .ta-app.ta-show-props .ta-insp{display:flex;position:fixed;top:60px;right:12px;bottom:40px;width:min(360px,calc(100vw - 24px));z-index:50;box-shadow:var(--a-sh3)}
  html.th-on .ta-app .ta-sheetbar{display:flex;gap:6px}
  html.th-on .ta-app .ta-sheetbar #taShowLeft{display:none}
}
/* ── THE PHONE: the views as a strip of chips, the list first, one card per thing, two sheets ─────────────────── */
@media (max-width:900px){
  html.th-on .ta-app{grid-template-columns:minmax(0,1fr);grid-template-rows:52px auto minmax(0,1fr) 40px;grid-template-areas:"qat" "left" "work" "stat";column-gap:0;padding:0 6px}
  html.th-on .ta-app .ta-qat .ta-apps-l,html.th-on .ta-app .ta-mark,html.th-on .ta-app .ta-crumb,html.th-on .ta-app .ta-findw,html.th-on .ta-app #taFull{display:none}
  html.th-on .ta-app .ta-left{display:block;padding:2px 0 8px;overflow:hidden}
  html.th-on .ta-app .ta-scopepal{display:none}
  html.th-on .ta-app .ta-tabs{flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  html.th-on .ta-app .ta-tabs::-webkit-scrollbar{display:none}
  html.th-on .ta-app .ta-tabs::before,html.th-on .ta-app .ta-tabs .ta-tgrp{display:none}
  html.th-on .ta-app .ta-tabs button{height:36px;padding:0 12px;background:var(--a-surface);box-shadow:var(--a-sh1)}
  html.th-on .ta-app .ta-tabs button.ta-on{background:var(--ph-ink);color:#FFFFFF}
  html.th-on .ta-app .ta-tabs button.ta-on .ta-ti{color:#FFFFFF}
  html.th-on .ta-app .ta-insp{display:none}
  html.th-on .ta-app.ta-show-props .ta-insp,html.th-on .ta-app.ta-show-left .ta-scopepal{display:flex;flex-direction:column;position:fixed;inset:auto 0 0 0;max-height:72vh;z-index:60;
    background:var(--a-surface);border-radius:16px 16px 0 0;box-shadow:var(--a-sh3);padding:6px 6px calc(10px + env(safe-area-inset-bottom,0px))}
  html.th-on .ta-app .ta-vhead{padding:12px 14px 6px}
  html.th-on .ta-app .ta-vtitle{font-size:17px}
  html.th-on .ta-app .ta-ribbon{padding:2px 10px 10px}
  html.th-on .ta-app .ta-cmd,html.th-on .ta-app .ta-cmd.ta-sm{height:40px}
  html.th-on .ta-app .ta-sheetbar{display:flex;gap:4px}
  html.th-on .ta-app .ta-sheetbar button{height:34px;padding:0 10px;border-radius:var(--a-r);background:var(--a-surface);box-shadow:var(--a-sh1);color:var(--a-tx);font:500 12.5px var(--sans);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
  html.th-on .ta-app .ta-sheetbar svg{width:16px;height:16px;color:var(--ph)}
  html.th-on .ta-app .ta-grid thead{display:none}
  html.th-on .ta-app .ta-grid,html.th-on .ta-app .ta-grid tbody,html.th-on .ta-app .ta-grid tr,html.th-on .ta-app .ta-grid td{display:block;width:100%}
  html.th-on .ta-app .ta-grid tr{padding:12px 14px;border-bottom:1px solid var(--a-line-soft)}
  html.th-on .ta-app .ta-grid td,html.th-on .ta-app .ta-grid td:first-child,html.th-on .ta-app .ta-grid td:last-child{border:0;height:auto;padding:1px 0;max-width:none;white-space:normal}
  html.th-on .ta-app .ta-grid td:first-child{font-weight:600;font-size:14px}
  html.th-on .ta-app .ta-grid td:not(:first-child){color:var(--a-tx2);font-size:12.5px}
  html.th-on .ta-app .ta-grid td:empty{display:none}
  /* each line of a card says what it is — "Due by 5 Oct", never a bare "5 Oct" (Strata Roll builder) */
  html.th-on .ta-app .ta-grid td:not(:first-child)[data-label]::before{content:attr(data-label) " · ";color:var(--a-mut)}
  html.th-on .ta-app .ta-grid td.ta-num{text-align:left}
  html.th-on .ta-app .ta-grid tbody tr.ta-sel td:first-child{box-shadow:none}
  html.th-on .ta-app .ta-grid tbody tr.ta-sel{background:var(--ph-soft);box-shadow:inset 3px 0 0 var(--ph)}
  html.th-on .ta-app .ta-grid tbody tr.ta-sel td{background:none}
  html.th-on .ta-app .ta-stat{gap:10px}
  html.th-on .ta-app .ta-stat .ta-wide{display:none}
  html.th-on .ta-app .ta-launch{top:52px;left:0;bottom:0;width:100vw;border-radius:16px 16px 0 0}
  html.th-on .ta-app .ta-lbody{grid-template-columns:minmax(0,1fr)}
  html.th-on .ta-app .ta-lp a{min-height:44px}
  html.th-on .ta-app .ta-pane{top:0;right:0;bottom:0;width:100%;border-radius:0}
}
/* with the platform shown on a phone, the shell's bottom bar sits over the frame — leave it room (Seller Desk builder, 390×844) */
@media (max-width:768px){
  html.th-on body:not(.ta-full) .ta-app{height:calc(100dvh - var(--th-app-top,58px) - 64px - env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - var(--th-app-top,58px) - 64px - env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  html.th-on .ta-app *{transition:none!important}
  html.th-on .ta-app .ta-main::before{animation:none!important;background-size:100% 100%}
}

/* 9 Oct 2026 — below 420 px the two sheet buttons show their icons only: with a long program name the title bar ran to
   441 px in a 390 px phone and cut "Details" off (measured by the Partner Desk and Care File builders). Their names are on
   aria-label (th-program.js step 14), so hiding the visible words keeps them for a screen reader. */
@media (max-width:420px){
  html.th-on .ta-app .ta-sheetbar button{padding:0 9px}
  html.th-on .ta-app .ta-sheetbar button span{display:none}
}

/* 9 Oct 2026 — a map inside a view keeps its own stacking: Leaflet's panes carry z-index up to 1000, so without this the
   map drew over the task pane and its forms could not be pressed where they overlapped (found by the Rural File builder;
   the same shape sits in Load Chain Route, Site Pass Site access, Job Desk and Due Diligence). */
html.th-on .ta-app .ta-surface .leaflet-container{isolation:isolate;z-index:0}