/* =============================================================================
   The TGP theme (B8, 4 October 2026): one stylesheet for every tool.

   Work Tracker, Pricing, CRM, Board, Surveys, Consultant Hub and Learning all
   read their colours, type and shapes from here. The six tools built on the shared
   page shell (host/surveys/pages.js doc()) link it as /theme/tgp-theme.css; the
   Work Tracker, which is also a single file people open offline, has it written
   into its page by workspace/build_workspace.py. Approved mockup:
   docs/mockups/b8/ on branch b8-mockup.

   Light or dark: the OS setting (prefers-color-scheme) unless the page sets
   data-theme="light" or "dark" on <html>, which the Work Tracker's toggle does and
   remembers. Every text pair below meets WCAG 2.1 AA in both modes;
   tests/theme_contrast_test.js measures it on each tool's main page.

   Rules that come with the colours (Akram, 4 October 2026):
   - Text under 24px (18.66px bold) is --c-text or --c-text-muted. Teal and Cyan
     are for icons, borders, large figures and fills, never small text.
   - No text sits on the gradient. It is a 6px stripe under the band, a progress
     fill or a KPI edge.
   - Green, amber and red are for status only, always with a word and a shape
     (.is-ok circle, .is-warn diamond, .is-bad square).
   - Dark mode is shades and tints of Deep Blue; its action colour is Cyan with
     dark ink.
   - Fonts are the site's self-hosted ones (/brand/fonts/fonts.css, host/core/
     fonts.js): nothing comes from Google Fonts.
   - Nothing is cut short: no ellipsis, no line clamp; long words wrap.
   ============================================================================= */

/* ------------------------------------------------------------ 1. fonts
   The fonts are the site's self-hosted ones (host/core/fonts.js, /brand/fonts/fonts.css, linked by every page
   beside this sheet): Poppins 300 to 700 and IBM Plex Sans Arabic 400 to 700 (both OFL). The documents the server draws (PDFs, cards) use the same IBM Plex Sans Arabic, merged into one file per weight (host/consultants/assets/fonts). SST Arabic (Monotype, no web licence) is no longer used anywhere. */

/* ------------------------------------------------------------ 2. fixed tokens */
:root{
  /* the brand palette */
  --tgp-deep:#1F5D96;
  --tgp-teal:#268CAF;
  --tgp-cyan:#30CBCF;
  --tgp-white:#FFFFFF;
  --tgp-gradient:linear-gradient(90deg,#1F5D96 0%,#268CAF 55%,#30CBCF 100%);
  --tgp-gradient-rtl:linear-gradient(270deg,#1F5D96 0%,#268CAF 55%,#30CBCF 100%);

  /* type */
  --tgp-font-en:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  --tgp-font-ar:"IBM Plex Sans Arabic",Poppins,"Segoe UI",system-ui,sans-serif;
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem;
  --fs-18:1.125rem; --fs-22:1.375rem; --fs-28:1.75rem; --fs-36:2.25rem;
  --fw-light:300; --fw-regular:400; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.25; --lh-body:1.5; --lh-tight-ar:1.45; --lh-body-ar:1.75;

  /* spacing, shape, size */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:9999px;
  --ctl:44px; --ctl-dense:36px;
  --w-app:1280px;
  /* controls ease their colours and lift, never their focus ring (it shows at once) */
  --tr-ctl:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------ 3. colour tokens
   Light first; dark is the same list twice, once for the OS setting and once for
   an explicit data-theme="dark" (tests/theme_contrast_test.js checks the two match).
   .tgp-paper marks a document shown on the page as paper (the Work Tracker's
   reports): it keeps the light colours whatever the page's theme. */
:root,.tgp-paper{
  --c-bg:#F4F8FB;            /* page */
  --c-surface:#FFFFFF;       /* cards, nav */
  --c-surface-2:#F4F8FB;     /* inputs, table heads, panels */
  --c-wash:#E4F8F9;          /* Cyan wash: selected row, highlight */
  --c-text:#1F5D96;          /* 6.85:1 on surface */
  --c-text-muted:#356DA0;    /* 5.11:1 on surface-2 */
  --c-text-large:#268CAF;    /* icons, text 24px+ or 18.66px bold (3.85:1) */
  --c-link:#1F5D96;
  --c-line:rgba(31,93,150,.14);
  --c-line-strong:#628EB6;   /* control borders, 3:1 */
  --c-primary:#1F5D96;
  --c-primary-hover:#174A79;
  --c-on-primary:#FFFFFF;
  --c-focus:#1F5D96;
  --c-track:rgba(31,93,150,.12);
  --c-band:#1F5D96;
  --c-on-band:#FFFFFF;
  --c-on-band-muted:#FFFFFF;
  --c-ok:#17553B;   --c-ok-bg:#E8F5EE;
  --c-warn:#8A5A10; --c-warn-bg:#FCF3E2;
  --c-bad:#A62E2A;  --c-bad-bg:#FCEEED;
  --c-info:#1F5D96; --c-info-bg:#E4F8F9;
  /* three series a chart tells apart (Surveys: favorable, neutral, unfavorable) */
  --c-chart-1:#1F5D96; --c-chart-2:#30CBCF; --c-chart-3:#268CAF;
  /* the shared chart module (host/theme/assets/tgp-charts.js, 9 Oct 2026): three more series, a 5-step heat ramp (low to high), a diverging ramp (negative to positive); charts read only these */
  --c-chart-4:#6B5CA5; --c-chart-5:#9A6A12; --c-chart-6:#5E7A8C;
  /* eight told-apart steps of the brand blues and teals for a donut (7 Nov 2026): six strong steps in an order that alternates dark and light, 45 apart in RGB, plus one pale neutral (pie-n) for Other and Not recorded */
  --c-pie-1:#1F5D96; --c-pie-2:#30CBCF; --c-pie-3:#145D5D; --c-pie-4:#A9DDE8; --c-pie-5:#268CAF; --c-pie-6:#8FB0CF; --c-pie-n:#E4F8F9; --c-pie-n-line:#628EB6;
  --c-heat-1:#E4F8F9; --c-heat-2:#A9DDE8; --c-heat-3:#347AAF; --c-heat-4:#28679F; --c-heat-5:#1F5D96;
  /* the client's state colours (the status pills): accepted green, issued #268CAF, amendments amber, planned a pale tint with a thin outline */
  --c-st-accepted:#3F8A6C; --c-st-issued:#268CAF; --c-st-amend:#D9A23B; --c-st-planned:#E4F8F9; --c-st-planned-line:#628EB6;
  --c-div-neg-2:#A62E2A; --c-div-neg-1:#E0A29E; --c-div-mid:#F4F8FB; --c-div-pos-1:#8FC9AE; --c-div-pos-2:#17553B;
  --sh-card:0 1px 2px rgba(31,93,150,.04),0 8px 32px rgba(31,93,150,.12);
  --sh-pop:0 14px 34px -20px rgba(31,93,150,.5);
  --logo-filter:none;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --c-bg:#0A1A2B; --c-surface:#0F2740; --c-surface-2:#163552; --c-wash:#144157;
    --c-text:#F4F8FB; --c-text-muted:#BCCEE0; --c-text-large:#30CBCF; --c-link:#30CBCF;
    --c-line:rgba(188,206,224,.16); --c-line-strong:#6E8398;
    --c-primary:#30CBCF; --c-primary-hover:#59D5D8; --c-on-primary:#163552; --c-focus:#30CBCF;
    --c-track:rgba(188,206,224,.16); --c-band:#163552; --c-on-band:#FFFFFF; --c-on-band-muted:#BCCEE0;
    --c-ok:#8AE3BC; --c-ok-bg:#0F3A2E; --c-warn:#F2C673; --c-warn-bg:#3A2C10;
    --c-bad:#FFA8A2; --c-bad-bg:#3E1E1D; --c-info:#30CBCF; --c-info-bg:#144157;
    --c-chart-1:#30CBCF; --c-chart-2:#BCCEE0; --c-chart-3:#268CAF;
    --c-chart-4:#B3A6E8; --c-chart-5:#F2C673; --c-chart-6:#9DB3C4;
    --c-pie-1:#30CBCF; --c-pie-2:#6C98C9; --c-pie-3:#BCCEE0; --c-pie-4:#3F7C83; --c-pie-5:#8FD9DC; --c-pie-6:#268CAF; --c-pie-n:rgba(157,179,196,.28); --c-pie-n-line:#9DB3C4;
    --c-heat-1:#163552; --c-heat-2:#1D5576; --c-heat-3:#236E8E; --c-heat-4:#2FA3BE; --c-heat-5:#30CBCF;
    --c-st-accepted:#4FB58C; --c-st-issued:#30CBCF; --c-st-amend:#F2C673; --c-st-planned:rgba(157,179,196,.18); --c-st-planned-line:#9DB3C4;
    --c-div-neg-2:#FFA8A2; --c-div-neg-1:#8A4A47; --c-div-mid:#163552; --c-div-pos-1:#3F8A6C; --c-div-pos-2:#8AE3BC;
    --sh-card:0 0 0 1px rgba(188,206,224,.12),0 10px 28px -14px rgba(0,0,0,.6);
    --sh-pop:0 14px 34px -20px rgba(0,0,0,.8);
    --logo-filter:brightness(0) invert(1);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --c-bg:#0A1A2B; --c-surface:#0F2740; --c-surface-2:#163552; --c-wash:#144157;
    --c-text:#F4F8FB; --c-text-muted:#BCCEE0; --c-text-large:#30CBCF; --c-link:#30CBCF;
    --c-line:rgba(188,206,224,.16); --c-line-strong:#6E8398;
    --c-primary:#30CBCF; --c-primary-hover:#59D5D8; --c-on-primary:#163552; --c-focus:#30CBCF;
    --c-track:rgba(188,206,224,.16); --c-band:#163552; --c-on-band:#FFFFFF; --c-on-band-muted:#BCCEE0;
    --c-ok:#8AE3BC; --c-ok-bg:#0F3A2E; --c-warn:#F2C673; --c-warn-bg:#3A2C10;
    --c-bad:#FFA8A2; --c-bad-bg:#3E1E1D; --c-info:#30CBCF; --c-info-bg:#144157;
    --c-chart-1:#30CBCF; --c-chart-2:#BCCEE0; --c-chart-3:#268CAF;
    --c-chart-4:#B3A6E8; --c-chart-5:#F2C673; --c-chart-6:#9DB3C4;
    --c-pie-1:#30CBCF; --c-pie-2:#6C98C9; --c-pie-3:#BCCEE0; --c-pie-4:#3F7C83; --c-pie-5:#8FD9DC; --c-pie-6:#268CAF; --c-pie-n:rgba(157,179,196,.28); --c-pie-n-line:#9DB3C4;
    --c-heat-1:#163552; --c-heat-2:#1D5576; --c-heat-3:#236E8E; --c-heat-4:#2FA3BE; --c-heat-5:#30CBCF;
    --c-st-accepted:#4FB58C; --c-st-issued:#30CBCF; --c-st-amend:#F2C673; --c-st-planned:rgba(157,179,196,.18); --c-st-planned-line:#9DB3C4;
    --c-div-neg-2:#FFA8A2; --c-div-neg-1:#8A4A47; --c-div-mid:#163552; --c-div-pos-1:#3F8A6C; --c-div-pos-2:#8AE3BC;
    --sh-card:0 0 0 1px rgba(188,206,224,.12),0 10px 28px -14px rgba(0,0,0,.6);
    --sh-pop:0 14px 34px -20px rgba(0,0,0,.8);
    --logo-filter:brightness(0) invert(1);
    color-scheme:dark;
}

/* ------------------------------------------------------------ 4. status: a word, a colour and a shape */
.is-ok,.is-warn,.is-bad,.is-info{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-12);font-weight:var(--fw-semibold);line-height:1.5}
.is-ok::before,.is-warn::before,.is-bad::before,.is-info::before{content:"";width:8px;height:8px;flex:none;background:currentColor}
.is-ok{background:var(--c-ok-bg);color:var(--c-ok)} .is-ok::before{border-radius:50%}
.is-info{background:var(--c-info-bg);color:var(--c-info)} .is-info::before{border-radius:50%}
.is-warn{background:var(--c-warn-bg);color:var(--c-warn)} .is-warn::before{border-radius:2px;transform:rotate(45deg)}
.is-bad{background:var(--c-bad-bg);color:var(--c-bad)} .is-bad::before{border-radius:1px}

/* ------------------------------------------------------------ 5. the shared page shell and components
   (moved here from host/surveys/pages.js CSS, 4 October 2026: every tool on the shell used it inline) */
*{box-sizing:border-box}
html{overflow-y:scroll;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{background:var(--c-bg);color:var(--c-text);font-family:var(--tgp-font-en);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column;overflow-wrap:anywhere}
html[dir=rtl] body,[lang=ar]{font-family:var(--tgp-font-ar)}
html[dir=rtl] body{line-height:var(--lh-body-ar)}
.wrap{margin:0 auto;max-width:1280px;padding:0 1rem}
@media(min-width:640px){.wrap{padding:0 1.5rem}
}
@media(min-width:1024px){.wrap{padding:0 2.5rem}
}
#site-nav{position:sticky;top:0;z-index:50;background:var(--c-surface);box-shadow:0 1px 0 var(--c-line)}
#site-nav .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;min-height:5rem;padding-top:7px;padding-bottom:7px}
#site-nav img{display:block;height:54px;width:auto;filter:var(--logo-filter)}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.to{display:inline-flex;align-items:center;min-height:var(--ctl);border:1px solid var(--c-line-strong);border-radius:9999px;padding:.4rem 1rem;font-size:.9375rem;font-weight:500;color:var(--c-text);text-decoration:none}
.to:hover,.to:focus-visible{border-color:var(--c-text-large)}
.to[aria-current=page]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
/* Sign out is a form button, a POST (2 October 2026) */
.so{display:inline-flex;margin:0}
.so .to{background:var(--c-surface);font-family:inherit;line-height:inherit;cursor:pointer}
.tools-home{background:var(--c-surface-2);border-color:var(--tgp-cyan)}
.who{font-size:.8125rem;color:var(--c-text-muted);min-width:0}
@media(max-width:639px){.to{padding:.3rem .8rem;font-size:.875rem}
#site-nav .links{width:100%}
}
.lang{display:flex;align-items:center;gap:.25rem;font-size:.9375rem}
.lang a{display:inline-flex;align-items:center;min-height:var(--ctl);padding:.35rem .8rem;border-radius:9999px;color:var(--c-text);text-decoration:none;font-weight:500}
.lang a:hover{background:var(--c-surface-2)}
.lang a[aria-current=true]{background:var(--c-primary);color:var(--c-on-primary)}
.lang .bar{color:var(--c-text-muted)}
main{flex:1;display:flex;flex-direction:column}
.band{position:relative;overflow:hidden;color:var(--c-on-band);background:var(--c-band);padding:40px 0 112px;text-align:center}
@media(min-width:768px){.band{padding:56px 0 128px}
}
.band::after{content:"";position:absolute;inset-inline:0;bottom:0;height:6px;background:var(--tgp-gradient)}
[dir=rtl] .band::after{background:var(--tgp-gradient-rtl)}
.band .art{pointer-events:none;position:absolute;inset:0;opacity:.2}
.band .art .a1{fill:var(--tgp-white)}
.band .art .a2{fill:var(--tgp-cyan)}
.band .in{position:relative}
.band h1{margin:0 auto;max-width:48rem;font-size:1.75rem;line-height:1.25;font-weight:700;color:var(--c-on-band)}
@media(min-width:768px){.band h1{font-size:2.5rem}
}
.band .lead{margin:.75rem auto 0;max-width:48rem;font-size:1rem;line-height:1.5rem;color:var(--c-on-band)}
@media(min-width:768px){.band .lead{font-size:1.125rem;line-height:1.75rem}
}
.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.25rem 0 0;padding:0;list-style:none}
.meta li{max-width:100%;background:#FFFFFF26;border:1px solid #FFFFFF4D;border-radius:9999px;padding:.3rem .9rem;font-size:.875rem;color:var(--c-on-band)}
.meta b{font-weight:600}
.pills{margin-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.pill{display:inline-flex;align-items:center;justify-content:center;max-width:100%;border-radius:9999px;padding:.875rem 1.75rem;font-weight:500;text-decoration:none;text-align:center;transition:var(--tr-ctl)}
.pill.solid{background:var(--c-surface);color:var(--c-text);box-shadow:var(--sh-card)}
.pill.solid:hover,.pill.solid:focus-visible{transform:translateY(-.125rem);box-shadow:var(--sh-pop)}
.pill.ghost{border:1px solid #FFFFFF99;color:var(--c-on-band)}
.pill.ghost:hover,.pill.ghost:focus-visible{background:#FFFFFF1A}
.content{position:relative;margin-top:-80px;padding-bottom:48px;flex:1}
.card{position:relative;background:var(--c-surface);border-radius:20px;padding:24px 20px;margin:0 0 20px;box-shadow:var(--sh-card);border:1px solid var(--c-line);min-width:0}
@media(min-width:640px){.card{padding:32px}
}
.narrow{max-width:780px;margin-left:auto;margin-right:auto}
h2{font-size:1.25rem;line-height:1.35;font-weight:600;margin:0 0 6px;color:var(--c-text)}
h3{font-size:1rem;font-weight:600;margin:0 0 8px;color:var(--c-text)}
.sub{font-size:.875rem;color:var(--c-text-muted);margin:0 0 20px}
.del{margin-top:14px;padding-top:12px;border-top:1px solid var(--c-line)}
.qview{margin:10px 0}
.qview>summary{cursor:pointer;font-size:.875rem;font-weight:600;color:var(--c-text);display:inline-block;border:1px solid var(--c-line-strong);border-radius:9999px;padding:6px 14px}
.qview>summary:hover,.qview>summary:focus-visible{border-color:var(--tgp-cyan);outline:none}
.qview ol{margin:10px 0 6px;padding-inline-start:22px}
.qview li{margin:0 0 8px;font-size:.875rem}
.qview .qen,.qview .qar{display:block;overflow-wrap:anywhere}
.qview .qar{color:var(--c-text-muted)}
.qview .qreq{display:inline-block;margin-top:2px;font-size:.75rem;font-weight:600;color:var(--c-text-muted)}
.tpl>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.tpl>summary::-webkit-details-marker{display:none}
.tpl>summary h2{margin:0;flex:1 1 260px;min-width:0}
.tpl>summary .sub{margin:0;flex:1 1 100%}
.tpl>summary .fold{flex:none;font-size:.875rem;font-weight:500;color:var(--c-text);border:1px solid var(--c-line-strong);border-radius:9999px;padding:6px 14px}
.tpl>summary:hover .fold,.tpl>summary:focus-visible .fold{border-color:var(--tgp-cyan)}
.tpl>summary:focus-visible{outline:2px solid var(--c-focus);outline-offset:4px;border-radius:12px}
.tpl[open]>summary{margin-bottom:16px}
.tpl .fold .shut{display:none}
.tpl[open] .fold .shut{display:inline}
.tpl[open] .fold .opn{display:none}
p{margin:0 0 12px}
a{color:var(--c-link)}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
[id]{scroll-margin-top:120px}
label,.lbl{display:block;font-size:.875rem;font-weight:500;margin:0 0 6px;color:var(--c-text)}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=search],select,textarea{display:block;width:100%;max-width:100%;min-width:0;font:inherit;color:var(--c-text);background:var(--c-surface-2);border:1px solid var(--c-surface-2);border-radius:12px;padding:12px 14px;margin:0}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--c-focus);outline-offset:1px;background:var(--c-surface)}
.field{margin:0 0 18px;min-width:0}
.hint{font-size:.8125rem;color:var(--c-text-muted);margin:6px 0 0}
.two{display:grid;gap:0 16px}
.two>*{min-width:0}
@media(min-width:640px){.two{grid-template-columns:1fr 1fr}
}
.note{font-size:.875rem;color:var(--c-text-muted);margin:0 0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl);gap:.4rem;max-width:100%;font:inherit;font-weight:500;line-height:1.25;border-radius:9999px;padding:.875rem 1.75rem;border:1px solid var(--c-primary);background:var(--c-primary);color:var(--c-on-primary);text-decoration:none;cursor:pointer;text-align:center;transition:var(--tr-ctl)}
.btn:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover)}
.btn.light{background:var(--c-surface);color:var(--c-text);border-color:var(--c-line-strong)}
.btn.light:hover{background:var(--c-surface-2);border-color:var(--tgp-cyan)}
.btn.sm{padding:.5rem 1rem;font-size:.875rem;min-height:44px}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.flash{background:var(--c-surface);border-inline-start:4px solid var(--tgp-cyan);border-radius:12px;padding:14px 18px;margin:0 0 20px;font-weight:500;box-shadow:var(--sh-card)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.q{padding:20px 0;border-top:1px solid var(--c-line)}
.q legend{float:left;width:100%;padding:0;margin:0 0 14px;font-weight:500}
html[dir=rtl] .q legend{float:right}
.q legend .n{color:var(--c-text-muted);font-weight:600;margin-inline-end:.4rem}
.q legend .hint{font-weight:400}
.q .scale{clear:both}
.scale{display:flex;justify-content:space-between;gap:6px;max-width:420px}
.dot{position:relative;display:block;margin:0}
.dot input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dot span{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--c-line-strong);background:var(--c-surface);font-weight:600;font-size:1.125rem;color:var(--c-text);transition:var(--tr-ctl)}
@media(max-width:380px){.dot span{width:46px;height:46px}
}
.dot input:hover+span{border-color:var(--tgp-cyan)}
.dot input:checked+span{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.dot input:focus-visible+span{outline:3px solid var(--c-focus);outline-offset:3px}
.ends{display:flex;justify-content:space-between;gap:12px;max-width:420px;margin-top:8px;font-size:.8125rem;line-height:1.3;color:var(--c-text-muted)}
.ends span{max-width:45%}
.ends span+span{text-align:end}
.comments{padding-top:20px;border-top:1px solid var(--c-line)}
.send{margin-top:8px}
.send .btn{width:100%}
@media(min-width:640px){.send .btn{width:auto;min-width:220px}
}
.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.alert{border:1px solid var(--c-bad);border-radius:12px;padding:12px 16px;margin:0 0 20px;color:var(--c-bad);background:var(--c-surface);font-weight:500}
.alert p{margin:0}
.alert ul{margin:6px 0 0;padding-inline-start:1.2rem}
.alert a{color:var(--c-bad)}
.req{color:var(--c-bad);font-weight:600;margin-inline-start:.15rem}
.ferr{color:var(--c-bad);font-size:.8125rem;font-weight:500;margin:6px 0 0}
.bad input[type=text],.bad input[type=email],.bad input[type=date],.bad input[type=number],.bad textarea,[aria-invalid=true]{border-color:var(--c-bad)}
.bad .dot span{border-color:var(--c-bad)}
.bad legend{color:var(--c-bad)}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.grid{display:grid;gap:20px}
@media(min-width:1024px){.grid{grid-template-columns:1fr 1fr}
}
.grid .card{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tag{display:inline-block;font-size:.75rem;font-weight:600;line-height:1.4;padding:.2rem .7rem;border-radius:9999px;background:var(--c-surface-2);color:var(--c-text)}
.tag.open{background:var(--c-wash);color:var(--c-text)}
.tag.shut{background:var(--c-primary);color:var(--c-on-primary)}
.facts{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 14px;font-size:.875rem;margin:0 0 14px}
.facts dt{color:var(--c-text-muted)}
.facts dd{margin:0;font-weight:500;min-width:0}
.sync{font-size:.8125rem;color:var(--c-text-muted);margin:0 0 12px}
.sync.warn{color:var(--c-text);font-weight:600;border-inline-start:3px solid var(--tgp-cyan);padding-inline-start:10px}
.linkbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--c-surface-2);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.linkbox code{flex:1 1 220px;min-width:0;font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:.8125rem;word-break:break-all;color:var(--c-text)}
.linkbox.big{padding:16px}
.linkbox.big code{font-size:1.125rem;font-weight:600}
@media(min-width:768px){.linkbox.big code{font-size:1.375rem}
}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.acts form{margin:0}
.cd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;border-top:1px solid var(--c-line);padding-top:12px}
.cd .field{flex:1 1 170px;margin:0}
.empty{text-align:center}
.types{display:grid;gap:10px;margin:0 0 8px}
@media(min-width:768px){.types{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.type{position:relative;display:block;margin:0;cursor:pointer;min-width:0}
.type input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.type span{display:block;height:100%;border:1px solid var(--c-line-strong);border-radius:16px;padding:14px 16px}
.type b{display:block;font-weight:600}
.type small{display:block;font-size:.8125rem;color:var(--c-text-muted)}
.type input:hover+span{border-color:var(--tgp-cyan)}
.type input:checked+span{border-color:var(--c-text);box-shadow:inset 0 0 0 1px var(--c-text);background:var(--c-surface-2)}
.type input:focus-visible+span{outline:2px solid var(--c-focus);outline-offset:2px}
.part{border-top:1px solid var(--c-line);padding-top:22px;margin-top:6px}
.qs{list-style:none;margin:0 0 12px;padding:0}
.qrow{background:var(--c-surface-2);border-radius:16px;padding:14px;margin:0 0 12px}
.qrow textarea{background:var(--c-surface);border-color:var(--c-line);min-height:0;resize:none;field-sizing:content;line-height:1.4}
.qhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.qn{font-weight:600;font-size:.9375rem}
.tools{display:flex;flex-wrap:wrap;gap:6px}
.tool{font:inherit;font-size:.8125rem;font-weight:500;line-height:1.3;padding:.35rem .85rem;border-radius:9999px;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-line-strong);cursor:pointer}
.tool:hover{border-color:var(--tgp-cyan)}
.tool:disabled{opacity:.4;cursor:default;border-color:var(--c-line-strong)}
.reqt{display:inline-flex;align-items:center;gap:.35rem;margin:0}
.reqt input{margin:0;accent-color:var(--c-primary)}
/* the "Required or optional" label beside its menu is a plain label, not a pill that reads as a button (phone review, 13 Nov 2026) */
label.tool.reqt{border:0;background:none;padding-inline:0;cursor:default}
.checks{display:grid;gap:10px}
.check{display:flex;align-items:flex-start;gap:.6rem;margin:0;font-weight:500;cursor:pointer}
.check input{margin:.3rem 0 0;width:1.1rem;height:1.1rem;flex:none;accent-color:var(--c-primary)}
.qpair{display:grid;gap:10px}
@media(min-width:768px){.qpair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.qpair>div{min-width:0;display:flex;flex-direction:column}
.qpair textarea{flex:1 1 auto}
.qpair label{font-size:.8125rem;color:var(--c-text-muted)}
.ends-line{font-size:.875rem;color:var(--c-text-muted);margin:12px 0 18px}
footer{text-align:center;font-size:.8125rem;color:var(--c-text-muted);padding:20px 16px 28px;background:var(--c-surface-2)}
[hidden]{display:none!important}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:768px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1024px){.tiles.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.tile{background:var(--c-surface-2);border-radius:16px;padding:14px 16px;min-width:0}
.tile .tl{display:block;font-size:.8125rem;font-weight:500;color:var(--c-text-muted);line-height:1.35}
.tile b{display:block;font-size:1.5rem;line-height:1.25;font-weight:700;color:var(--c-text);margin-top:4px}
.tile b.soft{font-size:1rem;font-weight:600}
.tile small{display:block;font-size:.8125rem;color:var(--c-text-muted);margin-top:2px}
.filters{display:grid;gap:12px}
@media(min-width:640px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.filters .field{margin:0}
.fbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.shown{font-size:.875rem;color:var(--c-text-muted);margin:0}
.pgroup{border-top:1px solid var(--c-line);margin-top:6px}
.pghead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 20px;background:var(--c-surface-2)}
.pgtitle{min-width:0;flex:1 1 280px}
.pghead h2{margin:0;font-size:1.0625rem;line-height:1.35;overflow-wrap:anywhere}
.pgsep{color:var(--c-text-muted);font-weight:400}
.pgfacts{margin:2px 0 0;font-size:.8125rem;color:var(--c-text-muted)}
.pgacts{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.pgbody .srow:first-child{border-top:0}
.pgcells,.pgcount{display:none}
.pgcount{margin:2px 0 0;font-size:.8125rem;color:var(--c-text-muted)}
.pgcells .c-chips{display:flex;flex-wrap:wrap;gap:4px}
.pgcells .c-date,.pgcells .c-resp,.pgcells .c-avg{font-size:.8125rem;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0}
.pgcells b{font-weight:600}
.pgcells small{flex-basis:100%;font-size:.75rem;color:var(--c-text-muted)}
.pgcells .meter{width:56px;height:6px;margin:0;background:var(--c-track)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:0 0 14px}
.kpi{background:var(--c-surface-2);border-radius:14px;padding:10px 12px;min-width:0}
.kpi .tl{display:block;font-size:.75rem;font-weight:500;color:var(--c-text-muted);line-height:1.35}
.kpi b{display:block;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--c-text);margin-top:2px}
.meter{display:block;height:6px;border-radius:9999px;background:var(--c-surface);margin-top:6px;overflow:hidden}
.meter span{display:block;height:100%;border-radius:9999px;background:var(--c-primary)}
.reports{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pp{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;border-top:1px solid var(--c-line);padding-top:12px;margin-top:12px}
.pp .field{flex:1 1 170px;margin:0}
section.block{margin-top:12px}
.charts{display:grid;gap:20px}
@media(min-width:1024px){.charts.pair{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}
.charts .card{margin:0}
.chart-box{position:relative;width:100%;min-width:0}
.chart-box img{display:block;max-width:100%;height:auto}
.chip{display:inline-block;font-size:.75rem;font-weight:600;line-height:1.4;padding:.15rem .6rem;border-radius:9999px;white-space:nowrap}
.chip.flag{background:var(--c-wash);color:var(--c-text);box-shadow:inset 0 0 0 1px var(--c-text-large)}
.chip.score{background:var(--c-primary);color:var(--c-on-primary)}
.chip.soft{background:var(--c-surface-2);color:var(--c-text)}
.findings{margin:0 0 18px;padding-inline-start:1.2rem}
.findings li{margin:0 0 8px}
.hls{display:grid;gap:14px}
@media(min-width:768px){.hls{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.hl{background:var(--c-surface-2);border-radius:16px;padding:14px 16px;min-width:0}
.hl.flagged{background:var(--c-surface);border:2px solid var(--c-text-large)}
.hl ul{list-style:none;margin:0;padding:0}
.hl li{margin:0 0 10px;font-size:.875rem}
.hl li b{display:block;font-weight:600}
.hl .none{font-size:.875rem;color:var(--c-text-muted);margin:0}
.tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.tbl th{background:var(--c-primary);color:var(--c-on-primary);font-weight:600;text-align:center;padding:10px 8px;border:1px solid var(--tgp-cyan)}
.tbl td{padding:10px 8px;border:1px solid var(--tgp-cyan);text-align:center;vertical-align:top}
.tbl td.txt{text-align:start}
.tbl th,.tbl td:not(.txt){overflow-wrap:normal;word-break:normal}
.tbl .qno{color:var(--c-text-muted);font-weight:600;margin-inline-end:.35rem}
.tbl .chip{margin-inline-start:.4rem}
@media(max-width:767px){.tbl thead{display:none}
.tbl,.tbl tbody{display:block}
.tbl tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--c-surface);border:1px solid var(--tgp-cyan);border-radius:14px;padding:12px;margin:0 0 12px}
.tbl td{display:block;border:0;padding:0;text-align:start;min-width:0}
.tbl td.txt{grid-column:1/-1;font-weight:500}
.tbl td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:500;color:var(--c-text-muted)}
.tbl td.txt[data-label]::before{display:none}
.tbl td.wide{grid-column:1/-1}
}
.clist{list-style:none;margin:0;padding:0}
.clist li{border-top:1px solid var(--c-line);padding:14px 0}
.clist li:first-child{border-top:0;padding-top:0}
.chead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:.8125rem;color:var(--c-text-muted)}
.clist p{margin:0;white-space:pre-line}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.seg label{position:relative;display:block;margin:0;cursor:pointer}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:inline-block;border:1px solid var(--c-line-strong);border-radius:9999px;padding:.5rem 1.1rem;font-weight:500}
.seg input:checked+span{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.seg input:focus-visible+span{outline:2px solid var(--c-focus);outline-offset:2px}
.dlbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:768px){.dlbtns{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.dlbtns .btn{width:100%}
/* a phone (phone review, 13 Nov 2026): one button a row, so "PowerPoint" and "Answers by participant" never break inside a word; the fifth button takes a whole row at any width */
@media(max-width:479.98px){.dlbtns{grid-template-columns:minmax(0,1fr)}.dlbtns .btn{overflow-wrap:normal;word-break:normal}}
.dlbtns #dl-answers{grid-column:1/-1}
.dlmsg{margin:14px 0 0;font-size:.875rem;font-weight:500;color:var(--c-text);border-inline-start:3px solid var(--tgp-cyan);padding-inline-start:10px}
.dlmsg:empty{display:none}
.qrbox{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 16px}
.qr{display:block;width:180px;height:180px;border-radius:12px;border:1px solid var(--c-line);background:var(--c-surface);image-rendering:pixelated}
.qrbox.small .qr{width:112px;height:112px}
.qracts{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.card.slist{padding:20px 0 6px}
.slist>h2{padding:0 20px;margin:0 0 6px}
.shead{display:none}
.rows>.srow:first-child{border-top:0}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title chips" "nums nums" "acts acts" "det det";gap:6px 12px;padding:12px 20px;border-top:1px solid var(--c-line)}
.srow.is-open{background:var(--c-surface-2)}
.c-title{grid-area:title;min-width:0}
.rt{font-size:1rem;line-height:1.35;font-weight:600;margin:0}
.rsub{font-size:.8125rem;line-height:1.4;color:var(--c-text-muted);margin:2px 0 0}
.c-chips{grid-area:chips;display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:4px;max-width:9.5rem;min-width:0}
.c-nums{grid-area:nums;display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;font-size:.8125rem;min-width:0}
.c-nums>div{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.c-nums b{font-weight:600}
.c-nums small{font-size:.75rem;line-height:1.35;color:var(--c-text-muted)}
.srow .meter{width:56px;height:6px;margin:0;background:var(--c-track)}
.c-acts{grid-area:acts;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.btn.xs{padding:.35rem .8rem;font-size:.8125rem;min-height:44px}
.rdet{grid-area:det;background:var(--c-surface);border-radius:14px;padding:14px 16px;margin:4px 0;min-width:0}
.rdet-in{display:grid;gap:8px 24px}
@media(min-width:768px){.rdet-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.rdet .cd,.rdet .pp{margin-top:0}
@media(min-width:1024px){.shead{display:grid;grid-template-columns:minmax(0,1fr) 8rem 6.5rem 6.5rem 6.5rem 14rem;gap:12px;padding:0 20px 8px;font-size:.75rem;font-weight:600;color:var(--c-text-muted);border-bottom:1px solid var(--c-line)}
.srow{grid-template-columns:minmax(0,1fr) 8rem 6.5rem 6.5rem 6.5rem 14rem;grid-template-areas:"title chips date resp avg acts" "det det det det det det";align-items:center;gap:4px 12px;padding:10px 20px;min-height:60px}
.c-nums{display:contents}
.c-date{grid-area:date}
.c-resp{grid-area:resp}
.c-avg{grid-area:avg}
.c-chips{justify-content:flex-start;max-width:none}
.c-nums .ml{display:none}
.c-nums small{flex-basis:100%}
.pghead{display:grid;grid-template-columns:minmax(0,1fr) 8rem 6.5rem 6.5rem 6.5rem 14rem;grid-template-areas:"title chips date resp avg acts";align-items:center;gap:4px 12px}
.pgtitle{grid-area:title}
.pgacts{grid-area:acts;justify-content:flex-end}
.pgfacts{display:none}
.pgcount{display:block}
.pgcells{display:contents}
}
@media(min-width:1200px){.shead,.srow,.pghead{grid-template-columns:minmax(0,1fr) 9rem 6.5rem 6.5rem 6.5rem 25.5rem}
}
.c-nums small.c-inv{flex-basis:100%}
.meter.big{height:8px;background:var(--c-surface-2);margin:0 0 16px}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 4px}
@media(max-width:479px){.tiles.three{grid-template-columns:minmax(0,1fr)}
}
.filebox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--c-surface-2);border:1px dashed var(--c-text-large);border-radius:12px;padding:14px;cursor:pointer}
.filebox:hover{border-color:var(--tgp-cyan)}
.filebox .fname{flex:1 1 160px;min-width:0;font-size:.9375rem;color:var(--c-text);overflow-wrap:anywhere}
.bad .filebox{border-color:var(--c-bad)}
.upmsg{font-size:.875rem;font-weight:500;color:var(--c-text);margin:8px 0 0}
#add .seg{margin:0 0 14px}
#add:has(#ah-file:checked) #pane-type,#add:has(#ah-type:checked) #pane-file{display:none}
#add .apane+.apane{border-top:1px solid var(--c-line);margin-top:18px;padding-top:16px}
#add:has(#ah-type:checked) .apane+.apane,#add:has(#ah-file:checked) .apane+.apane{border-top:0;margin-top:0;padding-top:0}
#add .apane .sub{margin:0 0 12px}
#ty-emails{min-height:9rem;overflow-wrap:anywhere}
.i-via{display:block;font-size:.75rem;line-height:1.35;color:var(--c-text-muted);margin-top:4px}
.upmsg:empty,.ferr:empty{display:none}
.pvh{margin:18px 0 8px}
.pv{list-style:none;margin:0 0 8px;padding:0;border:1px solid var(--c-line);border-radius:14px}
.pv li{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px;padding:8px 14px;border-top:1px solid var(--c-line);font-size:.875rem;min-width:0}
.pv li:first-child{border-top:0}
@media(min-width:640px){.pv li{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
}
.pv-e,.pv-v{font-weight:500;min-width:0}
.pv-n,.pv-r{color:var(--c-text-muted);min-width:0}
.pv .chip{margin-inline-start:.3rem}
.remind{margin-top:18px}
.remind .check{margin:0 0 14px}
.days{display:grid;gap:0 16px}
@media(min-width:640px){.days{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.days .field{margin:0 0 12px}
.dayin{display:flex;align-items:center;gap:8px;min-width:0}
.dayin input[type=number]{flex:none;width:5.5rem}
.dayin span{font-size:.875rem;line-height:1.35;color:var(--c-text-muted);min-width:0}
.days input:disabled{opacity:.5}
.sched .btn{margin-top:12px}
.i-rem small{white-space:nowrap}
.nowbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border-top:1px solid var(--c-line);margin-top:18px;padding-top:16px}
.nowbox form{margin:0}
.nowbox .hint{margin:0;flex:1 1 220px}
.card.ilist{padding:20px 0 6px}
.ilist .pad{padding-left:20px;padding-right:20px}
.ifind{display:grid;gap:0 12px}
@media(min-width:640px){.ifind{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}
.ifind .field{margin:0 0 10px}
.ilist .shown{margin:0 0 10px}
.ihead{display:none}
.irows>.irow:first-child{border-top:0}
.irow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who st" "nums nums" "acts acts";gap:6px 12px;padding:12px 20px;border-top:1px solid var(--c-line)}
.i-who{grid-area:who;min-width:0}
.i-who p{margin:0}
.i-email{font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.i-name{font-size:.8125rem;line-height:1.4;color:var(--c-text-muted)}
.i-err{font-size:.8125rem;line-height:1.4;color:var(--c-text-muted);font-weight:500;margin-top:2px}
.i-st{grid-area:st;min-width:0}
.chip.st-queued{background:var(--c-surface-2);color:var(--c-text)}
.chip.st-sent{background:var(--c-surface);color:var(--c-text);border:1px solid var(--tgp-cyan)}
.chip.st-opened{background:var(--c-wash);color:var(--c-text)}
.chip.st-answered{background:var(--c-primary);color:var(--c-on-primary)}
.chip.st-failed{background:var(--c-bad-bg);color:var(--c-bad)}
.chip.st-failed::before{content:"";display:inline-block;width:7px;height:7px;border-radius:1px;background:currentColor;margin-inline-end:5px;vertical-align:1px}
.i-nums{grid-area:nums;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;font-size:.8125rem;min-width:0}
.i-dates{min-width:0}
.i-dates p{margin:0;color:var(--c-text-muted)}
.i-dates dl{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0}
.i-dates dl div{display:flex;gap:4px;min-width:0}
.i-dates dt{color:var(--c-text-muted)}
.i-dates dd{margin:0;font-weight:500}
.i-rem{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.i-rem .ml{color:var(--c-text-muted)}
.i-rem b{font-weight:600}
.i-rem small{font-size:.75rem;color:var(--c-text-muted)}
.i-acts{grid-area:acts;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.i-acts form{margin:0}
@media(min-width:1024px){.ihead{display:grid;grid-template-columns:minmax(0,1fr) 7rem 11.5rem 7.5rem 11.5rem;gap:12px;padding:0 20px 8px;font-size:.75rem;font-weight:600;color:var(--c-text-muted);border-bottom:1px solid var(--c-line)}
.irow{grid-template-columns:minmax(0,1fr) 7rem 11.5rem 7.5rem 11.5rem;grid-template-areas:"who st dates rem acts";align-items:start;gap:4px 12px;padding:12px 20px}
.i-nums{display:contents}
.i-dates{grid-area:dates}
.i-rem{grid-area:rem;flex-direction:column;align-items:flex-start}
.i-dates dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 8px}
.i-dates dl div{display:contents}
.i-rem .ml{display:none}
.i-acts{justify-content:flex-end}
}
.taps{display:grid;gap:6px;max-width:600px}
.taps.n11{grid-template-columns:repeat(11,minmax(0,1fr))}
.taps.n7{grid-template-columns:repeat(7,minmax(0,1fr));max-width:440px}
@media(max-width:560px){.taps.n11{grid-template-columns:repeat(6,minmax(0,1fr))}
}
.tap{position:relative;display:block;margin:0;min-width:0}
.tap input,.pickb input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tap span{display:flex;align-items:center;justify-content:center;height:46px;border-radius:12px;border:2px solid var(--c-line-strong);background:var(--c-surface);font-weight:600;font-size:1rem;color:var(--c-text);transition:var(--tr-ctl)}
.tap input:hover+span,.pickb input:hover+span{border-color:var(--tgp-cyan)}
.tap input:checked+span,.pickb input:checked+span{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.tap input:focus-visible+span,.pickb input:focus-visible+span{outline:3px solid var(--c-focus);outline-offset:3px}
.taps+.ends{max-width:600px}
.taps.n7+.ends{max-width:440px}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.pickb{position:relative;display:block;margin:0;min-width:96px}
.pickb span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:.5rem 1.4rem;border-radius:9999px;border:2px solid var(--c-line-strong);background:var(--c-surface);font-weight:600;color:var(--c-text);transition:var(--tr-ctl)}
.choices{display:grid;gap:8px;max-width:600px}
.chl{display:flex;align-items:flex-start;gap:.7rem;margin:0;padding:12px 14px;border:1px solid var(--c-line-strong);border-radius:12px;cursor:pointer;font-size:1rem;font-weight:400;color:var(--c-text)}
.chl input{margin:.25rem 0 0;width:1.15rem;height:1.15rem;flex:none;accent-color:var(--c-primary)}
.chl span{min-width:0}
.chl:hover{border-color:var(--tgp-cyan)}
.chl:has(input:checked){border-color:var(--c-text);background:var(--c-surface-2)}
.q .taps,.q .btns,.q .choices,.q .qtext{clear:both}
.q .qtext{min-height:110px}
.bad .tap span,.bad .pickb span,.bad .chl{border-color:var(--c-bad)}
.favs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.fav{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border-radius:14px;border:1px solid var(--c-line-strong);background:var(--c-surface-2);color:var(--c-text);text-decoration:none}
.fav:hover{border-color:var(--tgp-cyan)}
.ftop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.fav b{font-weight:600;font-size:1rem;line-height:1.35;min-width:0}
.fstar{color:var(--c-text-large);line-height:1.2;flex:none}
.fdesc{font-size:.8125rem;line-height:1.45;color:var(--c-text-muted)}
.tmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.75rem;color:var(--c-text-muted)}
.mchip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:9999px;background:var(--c-wash);color:var(--c-text);font-weight:600;font-size:.75rem;line-height:1.5;white-space:nowrap}
@media(max-width:760px){.favs{gap:8px}
.fav{padding:12px 10px;gap:6px}
.fav b{font-size:.84rem}
.fdesc{display:none}
.fav .tmeta{font-size:.75rem}
}
@media(max-width:420px){.fav .tmeta .mchip,.fav .fstar{display:none}
.fav b{font-size:.8125rem}
}
.tfilters{display:grid;gap:10px 12px;margin-top:16px}
@media(min-width:640px){.tfilters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tfilters .grow{grid-column:1/-1}
}
@media(min-width:1024px){.tfilters{grid-template-columns:minmax(0,14rem) minmax(0,12rem) minmax(0,1fr)}
.tfilters .grow{grid-column:auto}
}
.tfilters .field{margin:0}
.areas{display:flex;flex-direction:column;gap:10px;margin-top:10px}
details.area{border:1px solid var(--c-line-strong);border-radius:14px;background:var(--c-surface)}
details.area>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 16px}
details.area>summary::-webkit-details-marker{display:none}
details.area>summary:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:14px}
.chev{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c-wash);color:var(--c-text);font-size:.75rem;transition:transform .15s}
details[open]>summary .chev{transform:rotate(90deg)}
[dir=rtl] .chev .tgi{transform:scaleX(-1)}
[dir=rtl] details[open]>summary .chev{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){.chev{transition:none}
}
.aname{font-weight:600;font-size:1rem}
.acount{font-size:.8125rem;color:var(--c-text-muted)}
.ameas{display:flex;flex-wrap:wrap;gap:6px;margin-inline-start:auto}
@media(max-width:639px){.ameas{flex-basis:100%;margin-inline-start:34px}
}
#tf-count{margin-top:12px}
.thead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.thead h2{margin:0}
#about textarea{min-height:84px}
.removed>summary{list-style:none;cursor:pointer}
.removed>summary::-webkit-details-marker{display:none}
.removed>summary h2{margin:0}
.removed[open]>summary{margin-bottom:8px}
.rlist{list-style:none;margin:0;padding:0}
.rlist li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 0;border-top:1px solid var(--c-line)}
.rlist li:first-child{border-top:0}
.rname{font-weight:500;min-width:0}
.racts{display:flex;flex-wrap:wrap;gap:6px}
.racts form{margin:0}
.rwhat{display:flex;flex-direction:column;min-width:0;flex:1 1 280px}
.rwhat .rname{overflow-wrap:anywhere}
.rmeta{font-size:.8125rem;color:var(--c-text-muted);overflow-wrap:anywhere}
.delq{border-top:1px solid var(--c-line);margin-top:18px;padding-top:14px}
.trows{display:flex;flex-direction:column;border-top:1px solid var(--c-line);padding:6px}
.trow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:11px 12px;border-radius:10px;color:var(--c-text);text-decoration:none}
.trow:hover{background:var(--c-surface-2)}
.tname{font-weight:500;min-width:0}
.tpurp{grid-column:1/-1;font-size:.8125rem;color:var(--c-text-muted);min-width:0}
.trow .tmeta{white-space:nowrap}
@media(min-width:760px){.trow{grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,11rem)}
.tpurp{grid-column:auto}
.trow .tmeta{justify-content:flex-end}
}
dialog.tpv{position:fixed;inset:0 0 0 auto;margin:0;border:0;padding:0;height:100%;max-height:none;width:min(560px,100%);max-width:100%;background:var(--c-surface);color:var(--c-text);box-shadow:-12px 0 40px #1F5D9633;overflow:auto;z-index:60}
dialog.tpv::backdrop{background:rgba(10,26,43,.55)}
.tpvhead{position:sticky;top:0;background:var(--c-surface);padding:18px 20px 12px;border-bottom:1px solid var(--c-line);display:flex;flex-direction:column;gap:8px;z-index:1}
.tpvtop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.tpvtop h2{margin:0;min-width:0}
.tpvbody{padding:14px 20px 24px;display:flex;flex-direction:column;gap:14px}
.tpvfacts{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 12px;font-size:.8125rem;margin:0}
.tpvfacts dt{color:var(--c-text-muted);font-weight:500}
.tpvfacts dd{margin:0}
ol.tpvq{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
ol.tpvq li{border:1px solid var(--c-line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pqt{display:flex;gap:10px;align-items:baseline;font-size:.9375rem}
.pqn{flex:none;width:22px;height:22px;border-radius:50%;background:var(--c-primary);color:var(--c-on-primary);font-size:.75rem;font-weight:600;display:grid;place-items:center}
.pqt>span:nth-child(2){flex:1;min-width:0}
.par{display:block;color:var(--c-text-muted);font-size:.875rem}
[dir=rtl] .par{text-align:right}
.popt{font-size:.75rem;color:var(--c-text-muted);font-weight:500;white-space:nowrap}
.pscale{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pscale i{font-style:normal;color:var(--c-text);min-width:28px;height:28px;padding:0 6px;border:1px solid var(--c-line-strong);border-radius:8px;display:grid;place-items:center;font-size:.75rem}
.pends{display:flex;justify-content:space-between;gap:12px;font-size:.75rem;color:var(--c-text-muted)}
.popts{display:flex;flex-direction:column;gap:4px;font-size:.8125rem}
.popts>span::before{content:"";display:inline-block;width:12px;height:12px;border:1.5px solid var(--c-text-large);margin-inline-end:8px;vertical-align:-1px}
.popts.one span::before{border-radius:50%}
.popts.many span::before{border-radius:3px}
.ptbox{display:block;height:44px;border:1px dashed var(--c-line-strong);border-radius:10px}
.pkind{font-size:.75rem;color:var(--c-text-muted)}
.tpvacts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:4px}
.kline{margin:0 0 10px;font-size:.8125rem;color:var(--c-text-muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.kline label{margin:0;font-size:.8125rem;color:var(--c-text-muted)}
.kline select{width:auto;flex:1 1 200px;background:var(--c-surface);padding:8px 12px}
.klabel b{font-weight:600;color:var(--c-text)}
.qopts{margin-top:12px;border-top:1px solid var(--c-line);padding-top:10px}
.olist{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:8px}
.orow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.opair{display:grid;gap:6px}
@media(min-width:768px){.opair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.opair input{background:var(--c-surface);border-color:var(--c-line);padding:9px 12px}
.on{display:block;font-size:.75rem;font-weight:600;color:var(--c-text-muted);grid-column:1/-1}
.npsbar{display:flex;height:10px;border-radius:9999px;overflow:hidden;background:var(--c-surface-2);margin-top:8px}
.npsbar span{display:block;height:100%}
.kgrid{display:grid;gap:16px}
@media(min-width:1024px){.kgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.kq{border:1px solid var(--c-line);border-radius:16px;padding:16px;min-width:0}
.kq h3{font-size:1rem;margin:0 0 4px}
.kq .qno{color:var(--c-text-muted);font-weight:600;margin-inline-end:.35rem}
.kq .kmeta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.8125rem;color:var(--c-text-muted);margin:0 0 12px}
.kbig{font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--c-text)}
.kbig small{font-size:.8125rem;font-weight:500;color:var(--c-text-muted);margin-inline-start:.4rem}
.hb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,max-content);gap:4px 10px;align-items:center;font-size:.875rem;margin:0 0 8px}
.hbt{display:block;height:10px;border-radius:9999px;background:var(--c-surface-2);overflow:hidden}
.hbt span{display:block;height:100%;background:var(--c-primary);border-radius:9999px}
.hbn{color:var(--c-text-muted);font-size:.8125rem;white-space:nowrap}
@media(max-width:479px){.hb{grid-template-columns:minmax(0,1fr) minmax(0,max-content)}
.hbl{grid-column:1/-1}
}
.vbars{display:grid;gap:4px;align-items:end;margin:10px 0 4px}
.vb{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;font-size:.75rem;color:var(--c-text-muted)}
.vbt{display:flex;align-items:flex-end;width:100%;height:64px;background:var(--c-surface-2);border-radius:6px;overflow:hidden}
.vbt span{display:block;width:100%;background:var(--tgp-teal)}
.vb b{font-weight:600;color:var(--c-text)}
.klist{list-style:none;margin:0;padding:0}
.klist li{border-top:1px solid var(--c-line);padding:10px 0;font-size:.9375rem}
.klist li:first-child{border-top:0;padding-top:0}
.klist p{margin:0;white-space:pre-line}
.klist small{display:block;font-size:.75rem;color:var(--c-text-muted)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8125rem;color:var(--c-text);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:0}
.kq .none,.kq .note{color:var(--c-text-muted);margin:6px 0 0;font-size:.8125rem}
@media (prefers-reduced-motion:no-preference){.m-cards>.card,.m-cards>.narrow{animation:tgpRise .32s cubic-bezier(.2,.7,.3,1) backwards}
.m-cards>:nth-child(2){animation-delay:.04s}
.m-cards>:nth-child(3){animation-delay:.08s}
.m-cards>:nth-child(4){animation-delay:.12s}
.m-cards>:nth-child(5){animation-delay:.16s}
.m-cards>:nth-child(n+6){animation-delay:.2s}
.flash,.alert,.card.empty[role=status]{animation:tgpFade .25s ease-out both}
.npsbar>span,.hbt>span,.meter>span,.m-grow{transform-origin:left center;animation:tgpGrow .6s cubic-bezier(.2,.7,.3,1) both}
[dir=rtl] .npsbar>span,[dir=rtl] .hbt>span,[dir=rtl] .meter>span{transform-origin:right center}
@keyframes tgpGrowY{from{transform:scaleY(0)}
to{transform:scaleY(1)}
}
.vbt>span{transform-origin:center bottom;animation:tgpGrowY .6s cubic-bezier(.2,.7,.3,1) both}
}
.tgi{flex:none;display:inline-block;vertical-align:-.2em}
.hic{color:var(--c-text-large);margin-inline-end:8px;vertical-align:-4px}
.pill .tgi{margin-inline-end:8px}
.tile .tl .tgi,.kpi .tl .tgi{color:var(--c-text-large);margin-inline-end:6px;vertical-align:-3px}
/* the icons audit (10 October 2026): a heading, a tab and an empty-state line each start with their library icon */
h1>.tgi:first-child,h2>.tgi:first-child,h3>.tgi:first-child{color:var(--c-text-large);margin-inline-end:8px;vertical-align:-4px}
.band h1>.tgi:first-child{color:var(--c-on-band);width:.8em;height:.8em;margin-inline-end:.3em;vertical-align:-.05em}
.ltabs a>.tgi{margin-inline-end:6px}
[class$="-empty"]>.tgi:first-child,.empty>p>.tgi:first-child,p.empty>.tgi:first-child{color:var(--c-text-large);margin-inline-end:6px;vertical-align:-3px}
.aicon{display:inline-flex;color:var(--c-text-large)}
.ficon{display:inline-flex;color:var(--c-text-large);margin-bottom:2px}
.fstar .tgi{color:var(--c-text-large);fill:var(--c-text-large)}
.empty h2 .hic{color:var(--c-text-large)}
@media(max-width:420px){.ficon{display:none}
}
.mtile .npsbar{background:var(--c-surface)}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=search],select,textarea{background:var(--c-surface);border-color:var(--c-line-strong)}
.linkbox,.qrow,.tile,.kpi,.hl,.fav,.pghead{background:var(--c-surface);border:1px solid var(--c-line)}
.pghead{border-width:0 0 1px}
.filebox{background:var(--c-surface)}
footer{background:var(--c-surface);border-top:1px solid var(--c-line)}
/* Surveys respondent form, slice 2 (7 October 2026): the trust line, the length line, About you after the questions */
.trust{display:flex;gap:10px;align-items:flex-start;border-inline-start:3px solid var(--tgp-cyan);padding:4px 12px;margin:0 0 16px;font-size:.9375rem;color:var(--c-text)}
.trust p{margin:0}
.howlong{font-size:.875rem;margin:0 0 14px;color:var(--c-text)}
.aboutyou{border-top:1px solid var(--c-line);margin:8px 0 0;padding-top:16px}
.aboutyou h2{font-size:1rem;margin:0 0 4px}
.asinv{font-size:.875rem;margin:8px 0;color:var(--c-text)}
/* an action that asks first, inside the page, never a browser dialog (moved here from Learning's own
   stylesheet, 7 October 2026, so Surveys asks the same way; the box is white with a thin outline) */
.ask>summary{cursor:pointer;list-style:none;display:inline-flex;min-height:44px}
.ask>summary::-webkit-details-marker{display:none}
.ask[open]>summary{margin-bottom:10px}
.ask .askbox{box-sizing:border-box;max-width:100%;background:var(--c-surface);border:1px solid var(--c-line);border-radius:12px;padding:12px 14px}
.ask .askbox p{margin:0 0 10px;font-size:.875rem}
.acts>.ask[open],.nowbox>.ask[open]{flex:1 1 100%;min-width:0}
/* Surveys redesign, slice 4 (7 October 2026): one survey's page. Tool-neutral components, copied from
   Learning's own stylesheet (the back link, the tab strip, the words, More) and from the redesign's NCSS
   list (the big number, the facts list, the two columns, the failed list, share). Tokens only; every
   control at least 44 px. Learning keeps its own copies, identical, so nothing there changes. */
.backrow{display:flex;justify-content:flex-start;margin:-20px 0 12px}
@media(min-width:768px){.backrow{margin:-32px 0 16px}}
.backlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;box-sizing:border-box;padding:0 14px 0 10px;margin-inline-start:-10px;border-radius:999px;color:var(--c-on-band);font-size:.9375rem;font-weight:500;line-height:1;text-decoration:none}
.backlink:hover{background:#FFFFFF1F;text-decoration:underline;text-underline-offset:3px}
.backlink:focus-visible{outline:2px solid var(--c-on-band);outline-offset:2px;background:#FFFFFF1F}
.crumbs{margin:-20px 0 0}
@media(min-width:768px){.crumbs{margin:-32px 0 0}}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;font-size:.875rem;color:var(--c-on-band)}
.crumbs li{display:inline-flex;align-items:center;min-height:32px;min-width:0;overflow-wrap:anywhere}
.crumbs li+li::before{content:"\203A";margin:0 8px;opacity:.85}
.crumbs a{color:var(--c-on-band);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:12px 6px;margin:-12px -6px}
.crumbs a:focus-visible{outline:2px solid var(--c-on-band);outline-offset:2px}
.crumbs li[aria-current=page]{font-weight:600}
[dir=rtl] .crumbs li+li::before{content:"\2039"}
.crumbs+.backrow{margin-top:0}
.card.tabcard{padding:14px 16px}
@media(min-width:640px){.card.tabcard{padding:16px 20px}}
.ltabs{display:flex;flex-wrap:wrap;gap:6px}
.ltabs a{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--c-line-strong);border-radius:9999px;padding:.35rem 1rem;font-size:.9375rem;font-weight:500;color:var(--c-text);text-decoration:none;background:var(--c-surface)}
.ltabs a:hover,.ltabs a:focus-visible{border-color:var(--tgp-cyan)}
.ltabs a[aria-current=page]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.navrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
@media(max-width:639px){.navrow .ltabs{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:2px}.navrow .ltabs a{white-space:nowrap;padding:.35rem .55rem;font-size:.8125rem;flex:1 1 auto;justify-content:center}}
.word{display:inline-block;font-size:.75rem;font-weight:600;line-height:1.4;padding:.2rem .7rem;border-radius:9999px;border:1px solid var(--c-line-strong);color:var(--c-text);background:var(--c-surface);white-space:nowrap}
.word.ok{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.word.now{background:var(--c-surface-2);border-color:var(--c-text)}
.word.chk{border-color:var(--c-warn);color:var(--c-warn)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.rmore{display:inline-block}
.rmore>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:.875rem;font-weight:500;border:1px solid var(--c-line-strong);border-radius:9999px;padding:0 1rem;color:var(--c-text);background:var(--c-surface)}
.rmore>summary::-webkit-details-marker{display:none}
.rmore[open]{display:block;flex-basis:100%}
.rmore .acts{margin:10px 0 0}
.big2{font-size:1.75rem;font-weight:700;line-height:1.2;margin:0 0 6px}
.kv{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kv li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--c-line);padding-top:10px;font-size:.9375rem}
.kv li>span{flex:0 0 auto;max-width:45%}
.kv li:first-child{border-top:0;padding-top:0}
.kv b{font-weight:600;text-align:end;overflow-wrap:anywhere;min-width:0}
.runw{display:grid;gap:20px}
@media(min-width:960px){.runw{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.runw>*{min-width:0}
.runw .card{margin:0 0 20px}
.rline{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;border:1px solid var(--c-line);border-radius:14px;padding:10px 14px;margin:12px 0 0;font-size:.875rem}
.rline p{margin:0;flex:1 1 260px}
.flist{list-style:none;margin:0;padding:0}
.flist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--c-line)}
.flist li:first-child{border-top:0}
.flist .e{font-weight:600;overflow-wrap:anywhere;margin:0}
.flist .r{margin:2px 0 0;font-size:.8125rem;overflow-wrap:anywhere}
.flist .acts{margin:0;align-items:flex-start}
.flist .acts>.ask[open],.flist .acts>.rmore[open]{flex:1 1 100%;min-width:0}
@media(max-width:559px){.flist li{grid-template-columns:minmax(0,1fr)}}
.acts.top{margin:14px 0 0}
.sv{margin:12px 0 0}
.share{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start}
.share>div{flex:1 1 200px;min-width:0}
.share code{display:block;overflow-wrap:anywhere;font-size:.8125rem;border:1px solid var(--c-line);border-radius:10px;padding:8px 10px;margin:0 0 8px}
.qrmini{width:120px;height:120px;border:1px solid var(--c-line);border-radius:8px;background:#FFFFFF;display:block}
/* Surveys redesign, slice 5 (7 October 2026): the home page (Needs you, Open now, Projects). Tokens only; every control at
   least 44 px; the words say the state, never colour alone. .rdy2 is Learning's "Ready to run" list, copied here unchanged
   (Learning keeps its own copy, so nothing there changes). The table is .stbl, a copy of Learning's .ptbl under a name of
   its own: Pricing and Learning define a .ptbl of their own, and a global one would change theirs. New classes start sh-. */
.rdy2{list-style:none;margin:0;padding:0}
.rdy2 li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:12px 0;border-top:1px solid var(--c-line)}
.rdy2 li[hidden]{display:none}
.rdy2 li:first-child{border-top:0}
.rdy2 .t{margin:0;font-weight:500;overflow-wrap:anywhere}
.rdy2 .d{margin:2px 0 0;font-size:.875rem;color:var(--c-text);overflow-wrap:anywhere}
.rdy2 .i{padding-top:2px;color:var(--c-text)}
.rdy2 .i.chk{color:var(--c-warn)}
.rdy2 .word{margin-inline-end:6px}
@media(max-width:559px){.rdy2 li{grid-template-columns:24px minmax(0,1fr)}.rdy2 li>.go{grid-column:2;justify-self:start}}
.hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 10px}
.hhead h2{margin:0}
.sh-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.hhead .sh-tabs{margin:0}
.sh-tabs[hidden],.sh-bar[hidden],.sh-none[hidden],.note[hidden]{display:none}
.sfbtn{min-height:44px;border:1px solid var(--c-line-strong);border-radius:9999px;padding:0 14px;font:inherit;font-size:.875rem;background:var(--c-surface);color:var(--c-text);cursor:pointer}
.sfbtn[aria-pressed=true]{background:var(--c-surface-2);border:2px solid var(--c-text);font-weight:600}
.sfbtn:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.sh-bar{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:0 0 14px}
.sh-bar .field{flex:1 1 240px;margin:0}
.sh-none{display:flex;align-items:center;gap:8px;margin:0}
.sh-list{list-style:none;margin:0;padding:0}
.sh-row{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;gap:8px 20px;align-items:center;padding:14px 0;border-top:1px solid var(--c-line)}
.sh-row:first-child{border-top:0;padding-top:4px}
.sh-row .rt{margin:0 0 2px;overflow-wrap:anywhere}
.sh-row .rt a{color:var(--c-text)}
.sh-row .rsub{margin:0 0 6px;font-size:.875rem;color:var(--c-text);overflow-wrap:anywhere}
.sh-row .chips{margin:0}
.sh-prog p{margin:0 0 4px;font-size:.875rem}
.sh-prog b{font-size:1rem}
.sh-prog .meter{display:block;width:100%}
.sh-prog small{display:block;margin-top:4px;font-size:.8125rem;color:var(--c-text-muted)}
@media(max-width:767px){.sh-row{grid-template-columns:minmax(0,1fr)}.sh-oa .btn{width:100%;justify-content:center}}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 0;font-size:.875rem}
.foot-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--c-text)}
.stbl{width:100%;border-collapse:collapse;font-size:.875rem}
.stbl th{background:var(--c-primary);color:var(--c-on-primary);font-weight:600;text-align:center;vertical-align:middle;padding:8px 10px;border:1px solid var(--tgp-cyan);white-space:nowrap;word-break:normal;overflow-wrap:normal;hyphens:manual}
.stbl td{padding:10px 12px;border:1px solid var(--tgp-cyan);vertical-align:middle;overflow-wrap:break-word;word-break:normal;hyphens:manual}
.stbl td.c{text-align:center}
.stbl td .rt{margin:0;font-weight:600;overflow-wrap:anywhere}
.stbl td .rsub{margin:2px 0 0;font-size:.8125rem}
.stbl td .btn{white-space:nowrap}
.stbl tr[hidden]{display:none}
@media(max-width:639px){.stbl.cards{min-width:0}.stbl.cards thead{display:none}.stbl.cards,.stbl.cards tbody,.stbl.cards tr,.stbl.cards td{display:block;width:100%;box-sizing:border-box}.stbl.cards tr{border:1px solid var(--c-line-strong);border-radius:14px;padding:10px 12px;margin:0 0 10px}.stbl.cards tr[hidden]{display:none}.stbl.cards td{border:0;padding:3px 0;text-align:start}.stbl.cards td:first-child{font-weight:600}.stbl.cards td[data-label]:not(:empty)::before{content:attr(data-label) ": ";font-weight:600}}
/* Surveys redesign, slice 7 (7 October 2026): New survey, how to start. Template cards are plain links, the preview sits beside them from 960 px. */
.sh-pick{display:grid;gap:20px}
.sh-pick>*{min-width:0}
@media(min-width:960px){.sh-pick{grid-template-columns:minmax(0,1fr) 360px;align-items:start}}
.sh-area{margin:0 0 12px}
.sh-area>summary{cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;font-weight:600;list-style:none}
.sh-area>summary::-webkit-details-marker{display:none}
.sh-area>summary:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.sh-area[hidden],.sh-area li[hidden]{display:none}
.sh-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.sh-grid>li{display:flex;min-width:0}
.sh-grid>li>.sh-tpl{flex:1 1 auto;height:auto}
.sh-tpl{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;min-height:44px;border:1px solid var(--c-line-strong);border-radius:14px;padding:12px 14px;background:var(--c-surface);color:var(--c-text);text-decoration:none}
.sh-tpl:hover{border-color:var(--tgp-cyan)}
.sh-tpl:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.sh-tpl.sel{border:2px solid var(--c-text);background:var(--c-surface-2)}
.sh-tpl b{font-weight:600;overflow-wrap:anywhere}
.sh-tp{font-size:.8125rem;overflow-wrap:anywhere}
.sh-tpl .chips{margin:auto 0 0}
.sh-tpv{margin:0}
/* the preview panel wears the template cards' border, radius and shadow (none), and its top meets the first card row (measured: 48px under the group heading) */
body .sh-tpv.card,body.x-doc .sh-tpv.card{border:1px solid var(--c-line-strong);border-radius:14px;box-shadow:none}
@media(min-width:960px){.sh-tpv{position:sticky;top:12px}.sh-pick>.sh-tpv{margin-top:48px}/* 48px = the first group heading (Favorites) above the card row; re-measure if that heading changes */}
/* action card (6 Nov 2026): a heading and one line of text on the left, the one or two buttons on the right, centred; on a phone the buttons drop under the text */
.card.card-action{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;box-sizing:border-box}
.card-action>.ca-text{flex:1 1 280px;min-width:0}
.card-action .ca-text h2{margin:0 0 4px}
.card-action .ca-text .sub{margin:0}
.card-action>.ca-acts{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}
@media(max-width:639px){.card-action>.ca-text{flex-basis:100%}}
.sh-qs{margin:0 0 12px;padding-inline-start:20px}
.sh-qs li{margin:0 0 8px;overflow-wrap:anywhere}
.sh-qs small{display:block;font-size:.8125rem;color:var(--c-text-muted)}
.sh-rep{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.sh-rep .field{flex:1 1 280px;margin:0}
.sh-dash{border:1px dashed var(--c-line-strong);border-radius:14px;padding:12px 14px;font-size:.875rem;margin:0 0 20px}
/* Surveys redesign, slice 8 (7 October 2026): Import questions. */
.steps3{margin:0 0 12px;padding-inline-start:22px}
.steps3 li{margin:0 0 6px}
.okline{font-weight:600;margin:12px 0 8px}
.left-out{margin:0 0 8px;border-inline-start:3px solid var(--c-warn);padding-inline-start:10px;font-size:.9375rem}
.sh-types{margin:0 0 12px}
.sh-types[open]{display:block}
textarea.paste{font-family:ui-monospace,Consolas,monospace;font-size:.875rem;min-height:180px}
.qprev{margin:12px 0 0}
.sh-from{display:grid;gap:10px;margin:12px 0 4px;border:0;padding:0}
@media(min-width:768px){.sh-from{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sh-from legend{font-weight:600;margin:0 0 8px;padding:0}
.sh-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--c-line-strong);border-radius:14px;padding:12px 14px;min-height:44px;cursor:pointer;background:var(--c-surface);color:var(--c-text);box-sizing:border-box}
.sh-opt:focus-within{outline:2px solid var(--c-focus);outline-offset:2px}
.sh-opt input{margin-top:4px;accent-color:var(--c-primary);width:18px;height:18px;flex:none}
.sh-opt b{display:block;font-weight:600}
.sh-opt span span{display:block;font-size:.8125rem}
.formfoot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border-top:1px solid var(--c-line);margin-top:16px;padding-top:14px}
.formfoot p{margin:0;font-size:.875rem}
/* Surveys redesign, slice 13 (7 October 2026): From Learning. */
.from-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;border:1px dashed var(--c-line-strong);border-radius:14px;padding:10px 14px;margin:0 0 20px;font-size:.875rem}
.from-l .btn{margin-inline-start:auto}
/* Shared charts (9 October 2026, host/theme/assets/tgp-charts.js): the figure, the drawing frame, the data table under it */
.tgp-chart{margin:0 0 20px;min-width:0}
.tgp-chart>figcaption{font-weight:600;color:var(--c-text);margin:0 0 4px}
.tgp-chart .tgp-chart-sub{font-size:.875rem;color:var(--c-text-muted);margin:0 0 10px}
.tgp-chart-frame{position:relative;height:280px;min-height:240px;min-width:0}
.tgp-chart-frame canvas{max-width:100%}
.tgp-chart-scroll{overflow-x:auto;max-width:100%;border-radius:12px}
.tgp-chart-scroll:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.tgp-chart-h{margin:0;font-size:1rem;font-weight:600;color:var(--c-text);overflow-wrap:anywhere}
.tgp-chart-data{margin-top:10px}
.tgp-chart-data>summary{cursor:pointer;display:inline-flex;align-items:center;min-height:var(--ctl);font-size:.875rem;font-weight:600;color:var(--c-text)}
/* the table toggle is the same pill everywhere ("Show as table" / "Hide table"), never a bare word; a header is never broken inside a word */
.tgp-chart-data>summary.tblbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;max-width:100%;padding:.25rem 1rem;border:1px solid var(--c-line-strong);border-radius:9999px;background:var(--c-surface);color:var(--c-text);font-size:.875rem;font-weight:500;list-style:none}
.tgp-chart-data>summary.tblbtn::-webkit-details-marker{display:none}.tgp-chart-data>summary.tblbtn::marker{content:""}
.tgp-chart-data>summary.tblbtn:hover{background:var(--c-surface-2)}.tgp-chart-data>summary.tblbtn:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.tgp-chart-data .t-hide{display:none}.tgp-chart-data[open] .t-hide{display:inline}.tgp-chart-data[open] .t-show{display:none}
.tgp-chart-data[open]>summary.tblbtn{margin-block-end:10px}
/* the table button sits at the end side of its card (Akram, 7 November 2026) */
.tgp-chart-data>summary.tblbtn{display:flex;width:fit-content;margin-inline-start:auto}
.tgp-chart-data{overflow-x:auto;max-width:100%}
.tgp-chart-data tbody th{overflow-wrap:break-word;word-break:normal;hyphens:none}
.tgp-chart-data thead th{overflow-wrap:normal;word-break:normal;hyphens:none;white-space:normal}
@media(max-width:520px){.tgp-chart-data th,.tgp-chart-data td{padding:6px 4px;font-size:.8125rem}}
.tgp-chart-data table{border-collapse:collapse;width:100%;font-size:.875rem}
.tgp-chart-data th,.tgp-chart-data td{border-bottom:1px solid var(--c-line);padding:6px 8px;color:var(--c-text);overflow-wrap:anywhere}
.tgp-chart-data td,.tgp-chart-data tbody th{text-align:start}
.tgp-chart-data thead th{background:var(--c-surface-2);text-align:center;vertical-align:middle}
.tgp-chart-msg{font-size:.875rem;color:var(--c-text);background:var(--c-warn-bg);border-radius:12px;padding:8px 12px;margin:0 0 8px}
@media print{.tgp-chart-frame{height:240px}}

/* Every column header is centred, across and down (Akram, 10 October 2026). A row label (tbody th, scope=row) keeps its own alignment. */
thead th,th[scope=col],th[scope=colgroup]{text-align:center;vertical-align:middle}

/* ==== Shared motion (Akram, 10 October 2026, point 7 item 4). One quiet scheme for every tool: cards and chart boxes
   fade in on load (150 ms, staggered by at most 100 ms; opacity only, so a card never moves and no measurement of the page
   is off while it fades), controls ease their colours and shadows, table rows and cards answer the pointer. Nothing in
   this block changes a size or a position, so nothing shifts the layout. Money figures only fade. Charts draw with their own first-draw animation (host/theme/assets/tgp-charts.js). With
   prefers-reduced-motion: reduce every animation and transition is off. ==== */
@keyframes tgpMoFade{from{opacity:0}to{opacity:1}}
.card{transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}
.card:hover{border-color:var(--c-line-strong)}
.btn,.pill,button,summary,a.card,.tabs a,.tabs button,nav a{transition:var(--tr-ctl)}
.tbl tbody tr,.tgp-chart-data tbody tr{transition:background-color .15s cubic-bezier(.4,0,.2,1)}
.tbl tbody tr:hover,.tbl tbody tr:focus-within,.tgp-chart-data tbody tr:hover{background-color:var(--c-surface-2)}
@media (prefers-reduced-motion:no-preference){
  .card:not(.m-cards>*),.tgp-chart{animation:tgpMoFade .15s ease-out backwards}
  .card:nth-child(2){animation-delay:.025s}
  .card:nth-child(3){animation-delay:.05s}
  .card:nth-child(4){animation-delay:.075s}
  .card:nth-child(n+5){animation-delay:.1s}
  .money,[data-money]{animation:tgpMoFade .15s ease-out backwards}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{*,*::before,*::after{animation:none!important;transition:none!important}}
/* ==== end of shared motion ==== */