/* ZIA Forms: base styles copied verbatim from docs/reference/zia-2026-evaluation-form.html (fonts moved to /fonts). */
@font-face{font-family:Museo;font-weight:300;src:url(/fonts/Museo-300.otf) format("opentype")}
@font-face{font-family:Museo;font-weight:500;src:url(/fonts/Museo-500.otf) format("opentype")}
@font-face{font-family:Museo;font-weight:700;src:url(/fonts/Museo-700.otf) format("opentype")}
:root{
  --color-primary:#d13038;
  --color-secondary:#283646;
  --color-off-white:#f7f7f7;
  --color-accent-blue:#1976f1;
  --line:#dde1e6;--muted:#5f6c7b;--tint:#fdf1f1;
  --tip-line:color-mix(in srgb,var(--color-secondary) 55%,#fff);   /* 3.2:1 on white; 35% measured 2:1 */
  /* every colour the page uses is one of these; the dark values live in the prefers-color-scheme block at the end of the file.
     Brand colours above are fills (white text sits on them); --accent is the same red used as text or border on a surface. */
  --bg:var(--color-off-white);        /* page, and sunken panels inside a card (.note, read-only fields) */
  --surface:#fff;                     /* cards, header, nav */
  --raised:#fff;                      /* inputs, rating tiles, option cards, tooltips */
  --stripe:#fbfbfb;                   /* alternate rows, pre-filled blocks */
  --field-line:var(--line);           /* border of anything you click or type in (3:1 in dark) */
  --ink:var(--color-secondary);       /* text */
  --navy:var(--color-secondary);      /* header bands, table heads, badges */
  --on-navy:#fff;--on-primary:#fff;
  --accent:var(--color-primary);      /* ZIA red as a border or fill: the same #d13038 in light and dark */
  --accent-text:var(--color-primary); /* ZIA red as text: dark mode lightens it (same hue) to keep 4.5:1 on its surfaces */
  --focus:var(--color-accent-blue);
  --primary-hover:#b8252d;
  --sel-bg:var(--color-secondary);--sel-fg:#fff;   /* a picked rating tile */
  --shadow:rgb(40 54 70/.18);
  --anon-accent:#ff8a90;
  --g-bg:#fff;--g-line:#747775;--g-fg:#1f1f1f;--g-hover:#f8f9fa;   /* the Google sign-in button follows Google's own light and dark specs */
  --banner-bg:#c00;--banner-fg:#fff;
  --paper:#fff;--paper-line:#ccc;     /* print stays light */
  /* meaning tokens: ZIA red in both themes (dark mode only lightens red text, --accent-text) */
  --danger:var(--color-primary);--danger-bg:var(--tint);   /* error borders, invalid fields */
  --brand:var(--color-primary);                            /* decorative bars, ticks, header stripe */
  --btn-bg:var(--color-primary);--btn-hover:var(--primary-hover);--on-btn:var(--on-primary);   /* .btn and nav hover */
  --n-bg:var(--color-primary);                             /* section number badges */
  --top-line:transparent;                                  /* 1px divider under the header: dark draws it in --line, same width, so the box never differs */
  --head-bg:transparent;--head-bg-end:transparent;         /* .page-head fill (fades top to bottom): dark only */
  --note-bg:var(--bg);--prefill-bg:var(--stripe);--ro-bg:var(--raised);--ack-line:var(--line);
  /* /my status chips: text, tint and border per state (red = needs action, yellow = waiting, green = done) */
  --chip-bad-fg:#a7232b;--chip-bad-bg:#fdf1f1;--chip-bad-line:#e9b3b6;
  --chip-warn-fg:#7a4d00;--chip-warn-bg:#fff4cf;--chip-warn-line:#e8cd7a;
  --chip-ok-fg:#1b6030;--chip-ok-bg:#e8f5ec;--chip-ok-line:#a6d3b3;
  /* one-on-one comparison: self = neutral outline and grey box, manager = filled accent-blue chip and blue-tinted box (text labels always stay) */
  --self-chip-line:#5f6c7b;--self-box-bg:#f3f4f6;--self-box-line:#d5d9df;
  --mgr-chip-bg:#1559b8;--mgr-chip-fg:#fff;--mgr-box-bg:#eaf3ff;--mgr-box-line:#a9c8f2;
}
*{box-sizing:border-box}
picture{display:block}   /* the logo <picture> wrapper: a plain box round a block image (display:contents misplaced it in the header flex row) */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.55 Museo,system-ui,sans-serif}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.2}
p{margin:0 0 .6em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.light{font-weight:300}
.muted{color:var(--muted)}

/* header */
/* the 6px ZIA red bar is an inset shadow over padding, so it never changes the box; the 1px bottom border is always there (transparent in light) */
.top{background:var(--surface);padding-top:6px;box-shadow:inset 0 6px 0 var(--brand);border-bottom:1px solid var(--top-line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px}
.top img{height:62px;width:auto;aspect-ratio:355/156;display:block}
.top .tag{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* nav */
.nav{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;scrollbar-width:thin}
.nav a{flex:none;min-width:36px;text-align:center;padding:5px 11px;border:1px solid transparent;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;background:var(--bg);white-space:nowrap}
.nav a:hover,.nav a[aria-current]{background:var(--btn-bg);color:var(--on-btn)}
.nav a:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
/* one shared popup outside the scrolling .wrap (it would be clipped inside); zia-progress.js moves it under the hovered or focused pill */
.nav .nav-tip{position:absolute;left:0;top:100%;pointer-events:none}
.nav .tipw.nav-tip .tip{width:max-content;max-width:min(280px,calc(100vw - 16px));white-space:normal;overflow-wrap:anywhere;text-align:center}   /* four classes: must outrank .tipw.center .tip (nowrap) further down */
.nav-fill{position:absolute;left:0;bottom:-1px;height:3px;width:var(--p,0%);background:var(--brand);transition:width .25s}
/* a jump lands below the sticky bar; zia-progress.js (and the tab strip) set --nav-h to the bar's height */
.card[id]{scroll-margin-top:calc(var(--nav-h,0px) + 8px)}

/* tabs on the read-only evaluation page (zia-tabs.js): the row is sticky like .nav, a small label then a strip that scrolls sideways on its own, pill look, the open tab filled with the accent */
.tabrow{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;margin:0 0 18px;background:var(--bg);border-bottom:1px solid var(--line)}
.tabrow[hidden]{display:none}
/* the one-on-one page's reference documents: the section bar above is the sticky one, so this row scrolls with the page */
.tabs.inline .tabrow{position:static}
.tablabel{flex:none;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* no visible scrollbar: touch, trackpad, shift+wheel and the arrow keys still scroll; zia-tabs.js sets data-more where tabs are cut off and the mask fades that edge */
.tabbar{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none;scroll-padding-inline:28px}
.tabbar::-webkit-scrollbar{display:none}
.tabbar[data-more=right]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.tabbar[data-more=left]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
.tabbar[data-more=both]{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
@media (max-width:640px){.tabrow{flex-direction:column;align-items:stretch;gap:0;padding-top:10px}.tabbar{padding-top:6px}}
.tab{flex:none;font:inherit;font-size:14px;font-weight:700;padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.tab:hover{border-color:var(--btn-bg)}
.tab-sep{flex:none;align-self:stretch;width:1px;margin:0 6px;background:var(--line)}   /* divider between the two groups of parts; not a tab */
.tab[aria-selected=true]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--on-btn)}
.tab:focus-visible,.tabpanel:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tab-hint{text-align:center;color:var(--muted);margin:8px 0 24px}
.tabpanel{scroll-margin-top:calc(var(--nav-h,0px) + 8px)}

/* cards */
main{padding:28px 0 40px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin:0 0 24px;overflow:hidden}
.pad{padding:28px}
.sec-head{background:var(--navy);color:var(--on-navy);display:flex;gap:16px;align-items:center;padding:20px 28px}
.sec-head .n{flex:none;width:46px;height:46px;border-radius:12px;background:var(--n-bg);display:grid;place-items:center;font-size:22px;font-weight:700}
.sec-head h2{font-size:22px}
.sec-head p{margin:2px 0 0;font-weight:300;opacity:.85;font-size:15px}
.sec-body{padding:28px}
/* collapsible rating scale: the sec-head is the <summary>; the chevron badge turns when open */
summary.sec-head{cursor:pointer;list-style:none}
summary.sec-head::-webkit-details-marker{display:none}
summary.sec-head:hover .chev{background:color-mix(in srgb,var(--on-navy) 18%,transparent)}
summary.sec-head:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.chev{flex:none;margin-left:auto;width:32px;height:32px;border:2px solid color-mix(in srgb,var(--on-navy) 70%,transparent);border-radius:50%;display:grid;place-items:center}
.chev .icon{transition:transform .2s}
details[open]>summary .chev .icon{transform:rotate(180deg)}
details[open]>summary .when-closed,details:not([open])>summary .when-open{display:none}
@media (prefers-reduced-motion:reduce){.chev .icon{transition:none}}
.card>h2.plain{font-size:24px;padding:28px 28px 0}
h3{font-size:18px;margin:30px 0 4px;color:var(--ink)}
h3:first-child{margin-top:0}
h3::after{content:"";display:block;width:34px;height:3px;background:var(--brand);margin-top:8px;border-radius:2px}
.sub{color:var(--muted);font-weight:300;margin:6px 0 12px}
.opt-tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-text);margin-left:8px}

.note{border-left:4px solid var(--accent);background:var(--note-bg);padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0;font-weight:500}
.note.blue{border-color:var(--focus)}
ul.ticks{list-style:none;padding:0;margin:8px 0 0}
ul.ticks li{position:relative;padding-left:26px;margin:7px 0}
ul.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips span{background:var(--bg);border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:700}

/* fields */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 22px}
.grid .full{grid-column:1/-1}
label.f{display:block;font-weight:700;font-size:14px}
label.f>span.l{display:block;margin-bottom:6px}
input[type=text],input[type=email],input[type=date],select,textarea{width:100%;font:inherit;font-weight:500;color:var(--ink);background:var(--raised);border:1.5px solid var(--field-line);border-radius:10px;padding:11px 13px}
textarea{min-height:112px;resize:vertical}
input[readonly]{background:var(--bg);color:var(--muted)}
:is(input,select,textarea):focus{outline:3px solid color-mix(in srgb,var(--focus) 35%,transparent);border-color:var(--focus)}
textarea:required:invalid{border-color:var(--danger)}
.q{margin:22px 0 0}
.q>.ql{font-weight:700;font-size:16px;display:block}
.q>.qd{display:block;color:var(--muted);font-weight:300;font-size:15px;margin:2px 0 8px}

/* rating pills */
fieldset{border:0;margin:0;padding:0;min-width:0}
.rating{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pill{position:relative;display:block;text-align:center;cursor:pointer}
.pill small{display:block;margin-top:7px;font-size:12px;line-height:1.3;font-weight:500;color:var(--muted);transition:.15s}
.pill input:checked~small{color:var(--ink);font-weight:700}
.pill input:disabled~small{opacity:.4}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:grid;place-items:center;height:44px;border:1.5px solid var(--field-line);border-radius:10px;font-weight:700;cursor:pointer;background:var(--raised);transition:.15s}
.pill:hover span{border-color:var(--accent)}
.pill input:checked+span{background:var(--sel-bg);border-color:var(--sel-bg);color:var(--sel-fg)}
.pill input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.pill input:disabled+span{opacity:.4;cursor:not-allowed}

/* competency grid */
.cgrid{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
.crow{padding:20px 22px}
.crow+.crow{border-top:1px solid var(--line)}
.crow:nth-child(even){background:var(--stripe)}
.cname{font-weight:700;font-size:17px}
.cdesc{font-weight:300;color:var(--muted);font-size:15px;margin:2px 0 14px}
.crow .f+.f{margin-top:14px}
.ev{margin-top:14px}
.ev[hidden]{display:none}
.ev textarea{min-height:84px}

/* scale table */
table{width:100%;border-collapse:collapse;margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th{background:var(--navy);color:var(--on-navy);text-align:left;padding:12px 14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
td.r{width:70px;text-align:center}
.badge{display:inline-grid;place-items:center;min-width:36px;height:36px;border-radius:10px;background:var(--navy);color:var(--on-navy);font-weight:700}
/* Section 1 rating scale: every cell sits in the middle of its row and reads from the left, the badge column too */
#s1 table td,#s1 table td.r{vertical-align:middle;text-align:left}

/* option cards */
.opts{display:grid;gap:10px;margin-top:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;gap:14px;align-items:center;padding:13px 16px;border:1.5px solid var(--field-line);border-radius:12px;cursor:pointer;background:var(--raised);transition:.15s}
.opt:hover{border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);background:var(--tint)}
.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.opt input{flex:none;width:20px;height:20px;accent-color:var(--accent);margin:0}
.opt .big{flex:none;min-width:30px;height:30px;border-radius:8px;background:var(--navy);color:var(--on-navy);display:grid;place-items:center;font-weight:700;padding:0 6px}
.opt b{display:block}
.opt small{display:block;color:var(--muted);font-weight:300;font-size:14px;line-height:1.35}
.opt .txt{flex:1;min-width:0}

/* repeatable table grid */
.tgrid{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px}
.thead,.trow{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:12px;padding:12px 14px;align-items:start}
.thead{background:var(--navy);color:var(--on-navy);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.trow+.trow{border-top:1px solid var(--line)}
.trow textarea{min-height:64px}
.trow>label>span{display:none}
.btn{font:inherit;font-weight:700;border-radius:10px;padding:11px 20px;cursor:pointer;border:2px solid var(--btn-bg);background:var(--btn-bg);color:var(--on-btn);transition:.15s}
.btn[hidden]{display:none}   /* .btn sets display, which would otherwise beat [hidden] ("Print this part" while no tab is open) */
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
a.btn{display:inline-block;text-decoration:none}
.btn.ghost{background:var(--raised);color:var(--accent-text)}
.btn.ghost:hover{background:var(--tint)}
.btn.sm{padding:8px 16px;font-size:14px;margin-top:12px}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.peer{border:1.5px solid var(--line);border-radius:14px;padding:22px;margin-top:18px;background:var(--raised)}
.peer>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.peer>header h4{font-size:17px;color:var(--accent-text)}
.rm{font:inherit;font-size:14px;font-weight:700;background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline}

.sig{display:grid;grid-template-columns:2fr 1fr;gap:12px 20px}
.sig input.name{font-family:Museo,cursive;font-size:18px;font-style:italic;padding:16px 13px}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
footer{text-align:center;color:var(--muted);font-size:14px;padding:0 16px 40px}

@media (max-width:820px){
  .pad,.sec-body{padding:20px 16px}
  .sec-head{padding:16px}
  .grid,.opts.two,.sig{grid-template-columns:1fr}
  .thead{display:none}
  /* five pills: three on the first row, the last two centred under them, so every pill keeps the same width */
  .rating{grid-template-columns:repeat(6,1fr)}
  .rating .pill{grid-column:span 2}
  .rating .pill:nth-of-type(4){grid-column:2/span 2}
  .crow{padding:18px 16px}
  .trow{grid-template-columns:1fr}
  .trow>label>span{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
  .top .tag{display:none}
  .top img{height:50px}
}
@media print{
  body{background:var(--paper);font-size:12px}
  .nav,.actions,.btn,.rm{display:none!important}
  .tabrow,.tab-hint{display:none!important}
  .tabpanel[hidden]{display:block!important}   /* no tab open: Ctrl+P on the show page prints every part */
  .tabs[data-open] .tabpanel[hidden]{display:none!important}   /* zia-tabs.js sets data-open to the open panel's id: only that panel prints */
  .card{break-inside:auto;border-color:var(--paper-line)}
  .sec-head,.thead,th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .chev{display:none}
  summary.sec-head{cursor:default}
  .crow,.peer,.opt,.q{break-inside:avoid}
  textarea{border-color:var(--paper-line);resize:none}
}

/* --- app additions (not in the reference files): sign-in and dashboard only --- */
.alert{border-left:4px solid var(--focus);background:var(--bg);padding:14px 18px;border-radius:0 10px 10px 0;margin:0 0 18px;font-weight:500}
.alert.error{border-color:var(--danger);background:var(--danger-bg)}
.field-error{color:var(--accent-text);font-size:14px;font-weight:700;margin-top:6px}
/* the field a failed submit scrolled to lands below the sticky bar, its label in view */
[aria-invalid=true]{scroll-margin-top:calc(var(--nav-h,0px) + 96px)}
.or{border:0;border-top:1px solid var(--line);margin:28px 0 18px}
.narrow{max-width:560px;margin:0 auto}
.tasks{list-style:none;margin:10px 0 0;padding:0}
.tasks li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(10rem,1fr) 7.5rem 10.5rem;gap:8px 12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.tasks li.tasks-head{border-top:0;padding:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.t-name strong{display:block;overflow-wrap:anywhere}
.t-name .muted,.t-status .muted{display:block;font-size:14px;font-weight:300}
.t-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.t-act{justify-self:end}
.t-act .btn.sm{margin-top:0}
.card:has(.tasks){overflow:visible}   /* the popup may hang below the last row */
.tchip{display:inline-block;max-width:100%;text-align:center;padding:3px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;line-height:1.4}
button.tchip{cursor:pointer}
button.tchip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tchip.bad{background:var(--chip-bad-bg);border-color:var(--chip-bad-line);color:var(--chip-bad-fg)}
.tchip.warn{background:var(--chip-warn-bg);border-color:var(--chip-warn-line);color:var(--chip-warn-fg)}
.tchip.ok{background:var(--chip-ok-bg);border-color:var(--chip-ok-line);color:var(--chip-ok-fg)}
/* popup: sits next to its chip in the DOM; zia-form.js toggles .is-open, flips it (.up) and nudges it (--sx) to stay on screen */
.tipw{position:relative;display:inline-block;max-width:100%}
.tip{position:absolute;z-index:20;left:calc(var(--sx,0px)*-1);top:calc(100% + 9px);width:max-content;max-width:min(260px,calc(100vw - 16px));padding:10px 12px;background:var(--raised);color:var(--ink);border:1.5px solid var(--tip-line);border-radius:10px;box-shadow:0 6px 18px var(--shadow);font-size:14px;font-weight:500;line-height:1.4;white-space:pre-line;visibility:hidden;opacity:0;transition:opacity .12s}
.tipw.up .tip{top:auto;bottom:calc(100% + 9px)}
.tipw.is-open .tip{visibility:visible;opacity:1}
@media (max-width:640px){
  .tasks li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name name" "status date" "act act"}
  .tasks li.tasks-head{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0)}
  .t-name{grid-area:name}.t-status{grid-area:status}.t-date{grid-area:date;align-self:start;font-size:14px}
  .t-date:not(:empty)::before{content:"Due ";color:var(--muted)}
  .t-act{grid-area:act;justify-self:stretch}
  .t-act:empty{display:none}
  .t-act .btn,.t-act form{display:block;width:100%;text-align:center}
}
@media print{
  .tasks li{break-inside:avoid}.tchip{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tip{position:static;display:inline;visibility:visible;opacity:1;width:auto;max-width:none;padding:0 0 0 4px;border:0;box-shadow:none;background:none;font-size:13px;white-space:normal}
  .tip::after{content:")"}
}
/* the "(" of the printed ( … ) wrapping; screen CSS draws no pseudo-element on the box */
@media print{.tip::before{content:"("}}
.empty{color:var(--muted);font-weight:300;margin:6px 0 0}
.who{display:flex;gap:14px;align-items:center;font-size:14px}
.who form{margin:0}
.linkbtn{font:inherit;font-size:14px;font-weight:700;background:none;border:0;color:var(--accent-text);cursor:pointer;text-decoration:underline;padding:0}
/* read-only rendering (disabled fieldset): keep selected answers legible */
.ro fieldset{min-width:0}
.ro .pill input:disabled+span,.ro .pill input:disabled~small{opacity:1}
.ro .pill input:disabled:not(:checked)+span{opacity:.45}
/* text-like fields only: this rule is more specific than .pill input{opacity:0}, so radios and checkboxes must stay out of it */
.ro textarea:disabled,.ro input:disabled:not([type=radio]):not([type=checkbox]),.ro select:disabled{color:var(--ink);background:var(--ro-bg);opacity:1}
.ro .opt{cursor:default}
.ro [data-add]{display:none}

/* --- agency review (survey), from docs/reference/zia-2026-agency-review.html ---
   The survey pill is a plain number; the evaluation pill carries a caption, so the two are scoped apart. */
.group{padding:12px 4px 18px}
.group h2{font-size:26px}
.group h2::after{content:"";display:block;width:44px;height:4px;background:var(--brand);margin-top:10px;border-radius:2px}
.group p{color:var(--muted);font-weight:300;margin:10px 0 0;font-size:17px}
.sgrid{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
.shead,.srow{display:grid;grid-template-columns:1fr auto;gap:20px;padding:14px 16px;align-items:center}
.shead{background:var(--navy);color:var(--on-navy);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.srow+.srow{border-top:1px solid var(--line)}
.srow:nth-child(even){background:var(--stripe)}
.chips span b{color:var(--accent-text);margin-right:6px}
.anon{display:flex;gap:16px;align-items:flex-start;background:var(--navy);color:var(--on-navy);border-radius:14px;padding:20px 24px;margin:26px 0 0}
.anon svg{flex:none;width:30px;height:30px;color:var(--anon-accent)}
.anon b{display:block;letter-spacing:.14em;font-size:13px;text-transform:uppercase;color:var(--anon-accent);margin-bottom:4px}
.anon span{font-weight:300}
.time{display:inline-block;background:var(--tint);color:var(--accent-text);font-weight:700;border-radius:999px;padding:4px 14px;font-size:14px;margin-bottom:10px}
.survey .rating{display:flex;gap:6px;flex-wrap:wrap}
.survey .pill{display:inline-block}
.survey .pill span{display:grid;min-width:40px;height:40px;padding:0 8px}
@media (max-width:820px){.shead{display:none}.srow{grid-template-columns:1fr;gap:10px}.anon{padding:16px}}

/* One-on-one record (Phase 8): final rating has four pills (no N/A), pre-filled values are read-only blocks. */
.rating.four{grid-template-columns:repeat(4,1fr)}
.oo-meta{display:grid;grid-template-columns:auto auto 1fr;gap:10px 28px;align-items:start;margin-top:4px}
.oo-meta .l{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.oo-meta .chip{display:inline-grid;place-items:center;min-width:42px;height:38px;padding:0 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--raised)}
.oo-meta .theme p{margin:0;white-space:pre-line}
.prefill{margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--prefill-bg);white-space:pre-line;color:var(--ink)}
/* one-on-one comparison: the self and manager evidence behind each rating, read-only */
.oo-evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 18px;margin-top:14px}
.oo-evidence .l{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.oo-evidence .prefill{margin-top:4px;font-size:14px}
/* self and manager read differently at a glance, never by colour alone: each keeps its text label. Same borders and sizes in both themes. */
.oo-meta .oo-self .chip{background:var(--surface);border-color:var(--self-chip-line);color:var(--ink)}
.oo-meta .oo-mgr .chip{background:var(--mgr-chip-bg);border-color:var(--mgr-chip-bg);color:var(--mgr-chip-fg)}
.oo-evidence .oo-self .prefill{background:var(--self-box-bg);border-color:var(--self-box-line)}
.oo-evidence .oo-mgr .prefill{background:var(--mgr-box-bg);border-color:var(--mgr-box-line)}
.oo-legend{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;margin:0 0 14px;font-size:14px}
.oo-legend .key{display:inline-flex;align-items:center;gap:8px}
.oo-legend .key::before{content:"";width:18px;height:18px;border-radius:5px;border:1.5px solid var(--self-chip-line);background:var(--surface)}
.oo-legend .key.oo-mgr::before{background:var(--mgr-chip-bg);border-color:var(--mgr-chip-bg)}
/* one-on-one objectives: one stacked card per objective instead of a 7-column row */
.ogrid{display:grid;gap:14px;margin-top:12px}
.orow{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;border:1px solid var(--line);border-radius:12px;padding:16px 18px 18px;background:var(--raised)}
.orow .wide,.orow-n,.orow-meta{grid-column:1/-1}
.orow-n{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.orow-n .rm{letter-spacing:0;text-transform:none}
.orow textarea{min-height:76px}
.orow-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px}
@media (max-width:820px){.orow,.orow-meta{grid-template-columns:1fr}}
@media print{.orow{break-inside:avoid;padding:10px 12px}}
.oo-max{margin-left:12px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.readonly-text{white-space:pre-line}
@media (max-width:820px){.oo-meta{grid-template-columns:1fr 1fr}.oo-meta .theme{grid-column:1/-1}.rating.four{grid-template-columns:repeat(2,1fr)}}
@media print{.oo-meta .chip,.prefill,.oo-legend .key::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* local demo banner (resources/views/dev/banner.blade.php) */
.dev-banner{background:var(--banner-bg);color:var(--banner-fg);text-align:center;font:600 12px/1 system-ui,sans-serif;padding:6px 8px}

/* --- single-card sign-in and compact page header (replaces the hero everywhere, user decision 2026-11-10) --- */
.page-head{background:linear-gradient(var(--head-bg),var(--head-bg-end))}
.page-head .wrap{padding:36px 16px 30px}
.page-head h1{font-size:28px}
.back{display:inline-block;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--accent-text);text-decoration:none}
.back:hover{color:var(--ink);text-decoration:underline}
.back:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
@media print{.back{display:none}}
.page-head p{margin:6px 0 0;color:var(--muted);font-weight:500}
@media (max-width:600px){.page-head .wrap{padding:24px 16px 20px}.page-head h1{font-size:24px}}
h2.ct{font-size:20px;margin:0 0 4px}
h2.ct::after{content:"";display:block;width:34px;height:3px;background:var(--brand);margin-top:8px;border-radius:2px}
body.bare{min-height:100vh;display:flex;flex-direction:column}
.auth-page{flex:1;display:grid;place-items:center;padding:24px 16px}
.auth-col{width:100%;max-width:440px}
.auth-card{margin:0;padding:36px 32px}
.auth-logo{display:block;height:48px;width:auto;aspect-ratio:355/156;margin:0 0 24px}
.auth-card h1{font-size:28px}
.auth-lead{margin:8px 0 22px;color:var(--muted);font-weight:500}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:44px;padding:0 16px;background:var(--g-bg);border:1px solid var(--g-line);border-radius:4px;color:var(--g-fg);font:inherit;font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s}
.gbtn:hover{background:var(--g-hover)}
.gbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.gbtn svg{flex:none}
@media (max-width:820px){.auth-card{padding:28px 20px}}

/* --- dark mode. Automatic: follows the system setting unless the person picked Light. Manual: the Theme button
   (public/js/zia-theme.js) sets data-theme on <html> and remembers it in localStorage, on the signed-in pages only;
   the survey pages have no button and no script and only ever follow the system (they stay stateless).
   Screen only: print always stays light. Colours only: nothing here may change a size, spacing, border width, font or position,
   so the two themes lay out identically. The logo swaps source in the markup (<picture>) and below for data-theme.
   The two blocks below are identical apart from their selector and MUST stay in sync; edit both. */
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;accent-color:var(--accent);
    /* blue identity for surfaces: every surface is the hue of --color-accent-blue (214deg) at a rising lightness: page 10%, card 15%, stripe 17%, raised 20% */
    --bg:#0e1825;--surface:#162436;--raised:#203046;--stripe:#1b2a3e;
    --ink:#e8eefa;--muted:#a3b1c6;--line:#2d4261;--field-line:#6285b3;--tip-line:#7f9cc4;
    --navy:#1b3a66;
    --accent-text:#ff6b72;--focus:#6aa8ff;--tint:#35202a;   /* red text lightened to 4.5:1; fills, bars, badges and borders keep #d13038 */
    --danger-bg:#35202a;--top-line:var(--line);
    --head-bg:#0f2748;--head-bg-end:#0e1825;
    --note-bg:#17304f;--prefill-bg:#17304f;--ro-bg:#1c2736;--ack-line:#4673b3;
    --sel-bg:#5ea4ff;--sel-fg:#08111f;
    --shadow:rgb(0 0 0/.6);
    --g-bg:#131314;--g-line:#8e918f;--g-fg:#e3e3e3;--g-hover:#262728;
    --banner-bg:#a31515;
    --chip-bad-fg:#ffb3b8;--chip-bad-bg:#35202a;--chip-bad-line:#a8606c;
    --chip-warn-fg:#f1d27c;--chip-warn-bg:#372f17;--chip-warn-line:#8c7630;
    --chip-ok-fg:#8ed7a3;--chip-ok-bg:#163326;--chip-ok-line:#3f8a60;
    --self-chip-line:#8a95a3;--self-box-bg:#222a34;--self-box-line:#465160;
    --mgr-chip-bg:#5ea4ff;--mgr-chip-fg:#08111f;--mgr-box-bg:#17304f;--mgr-box-line:#4673b3;
  }
  :root:not([data-theme=light]) ::placeholder{color:var(--muted);opacity:1}
  :root:not([data-theme=light]) .ro .pill input:disabled:not(:checked)+span{opacity:.6}   /* unpicked tiles of a read-only answer: keep 4.5:1 */
  :root:not([data-theme=light]) #oo-ack{border-color:var(--ack-line)}
}
@media screen{
  :root[data-theme=dark]{
    color-scheme:dark;accent-color:var(--accent);
    /* blue identity for surfaces: every surface is the hue of --color-accent-blue (214deg) at a rising lightness: page 10%, card 15%, stripe 17%, raised 20% */
    --bg:#0e1825;--surface:#162436;--raised:#203046;--stripe:#1b2a3e;
    --ink:#e8eefa;--muted:#a3b1c6;--line:#2d4261;--field-line:#6285b3;--tip-line:#7f9cc4;
    --navy:#1b3a66;
    --accent-text:#ff6b72;--focus:#6aa8ff;--tint:#35202a;   /* red text lightened to 4.5:1; fills, bars, badges and borders keep #d13038 */
    --danger-bg:#35202a;--top-line:var(--line);
    --head-bg:#0f2748;--head-bg-end:#0e1825;
    --note-bg:#17304f;--prefill-bg:#17304f;--ro-bg:#1c2736;--ack-line:#4673b3;
    --sel-bg:#5ea4ff;--sel-fg:#08111f;
    --shadow:rgb(0 0 0/.6);
    --g-bg:#131314;--g-line:#8e918f;--g-fg:#e3e3e3;--g-hover:#262728;
    --banner-bg:#a31515;
    --chip-bad-fg:#ffb3b8;--chip-bad-bg:#35202a;--chip-bad-line:#a8606c;
    --chip-warn-fg:#f1d27c;--chip-warn-bg:#372f17;--chip-warn-line:#8c7630;
    --chip-ok-fg:#8ed7a3;--chip-ok-bg:#163326;--chip-ok-line:#3f8a60;
    --self-chip-line:#8a95a3;--self-box-bg:#222a34;--self-box-line:#465160;
    --mgr-chip-bg:#5ea4ff;--mgr-chip-fg:#08111f;--mgr-box-bg:#17304f;--mgr-box-line:#4673b3;
  }
  :root[data-theme=dark] ::placeholder{color:var(--muted);opacity:1}
  :root[data-theme=dark] .ro .pill input:disabled:not(:checked)+span{opacity:.6}   /* unpicked tiles of a read-only answer: keep 4.5:1 */
  :root[data-theme=dark] #oo-ack{border-color:var(--ack-line)}
}
/* logo: the markup (<picture>, layouts/_logo.blade.php) swaps to the white file for the system setting; these two rules do it for the manual
   choice, including a choice that differs from the system. Same box either way: fixed aspect-ratio, same width/height attributes */
@media screen{
  :root[data-theme=light] picture img{content:url(/images/zia-logo.png)}
  :root[data-theme=dark] picture img{content:url(/images/zia-logo-white.png)}
}
:root[data-theme=light]{color-scheme:light}
@media print{:root{color-scheme:light}}

/* Icon buttons (theme, Admin, Sign out): unfilled line icons, same box in both themes, only the colours differ */
.theme-row{display:flex;justify-content:flex-end;padding:10px 16px 0}
.icons{display:flex;gap:8px}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;padding:0;margin:0;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--ink);cursor:pointer;text-decoration:none;transition:.15s}
.iconbtn:hover,.iconbtn:focus-visible{border-color:var(--tip-line);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.iconbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.iconbtn svg{display:block}
.iconbtn .i-sun,.iconbtn .i-moon,.iconbtn .i-auto{display:none}   /* the theme button shows the mode the next click gives (zia-theme.js sets data-pref: Auto -> sun, Light -> moon, Dark -> moon/sun with a slash = Auto) */
:root:not([data-pref]) .iconbtn .i-sun,:root[data-pref=auto] .iconbtn .i-sun,:root[data-pref=light] .iconbtn .i-moon,:root[data-pref=dark] .iconbtn .i-auto{display:block}
/* centred popup under an icon button; zia-tip.js moves it with --sx (positive = left) to stay on screen */
.tipw.center .tip{left:50%;transform:translateX(calc(-50% - var(--sx,0px)));white-space:nowrap}
.tipw.center:not(.is-open) .tip{display:none}   /* a hidden box near the right edge would still widen the page (375px) */
@media print{.top{-webkit-print-color-adjust:exact;print-color-adjust:exact}.tipw.center{display:none}}   /* no icon buttons on paper */