/* Finit Feedback: one stylesheet for every page. Brand blue and orange on a cool mist; the client's words are the hero. */

@font-face{font-family:"Schibsted Grotesk";src:url(/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/fonts/schibsted-grotesk-latin-wght-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#14232b;--ink-2:#34474f;--muted:#5d6e76;
  --blue:#005776;--blue-hover:#00445c;--on-blue:#fff;--blue-50:#e8f2f6;--blue-100:#cde3eb;--blue-soft:#6fa8bf;
  --orange:#e87722;--orange-ink:#9a4a0e;--orange-50:#fdf1e6;
  --green:#17724a;--green-50:#e6f4ec;--red:#b42318;--red-50:#fdecea;
  --mist:#eef3f5;--paper:#fff;--paper-2:#f7fafb;--line:#dce5e9;--line-2:#c5d2d8;
  --radius:16px;--radius-sm:10px;--radius-xs:6px;
  --shadow:0 1px 2px rgb(20 35 43 / .05),0 8px 24px -12px rgb(20 35 43 / .18);
  --shadow-window:0 2px 6px rgb(20 35 43 / .06),0 28px 56px -28px rgb(20 35 43 / .38);
  --ring:0 0 0 3px rgb(0 87 118 / .28);
  --display:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Public Sans","Segoe UI",system-ui,sans-serif;
  --side:252px;
  color-scheme:light;
}
/* Dark: chosen with the theme switch (data-theme="dark"), or by the system when the switch is on Auto (no data-theme). */
:root[data-theme="dark"]{
  --ink:#e7eef1;--ink-2:#c3d0d6;--muted:#93a6ae;
  --blue:#56b0d3;--blue-hover:#7cc4e0;--on-blue:#04202b;--blue-50:#11303b;--blue-100:#1a4250;--blue-soft:#2f7a96;
  --orange:#f2913f;--orange-ink:#f6a866;--orange-50:#3a2614;
  --green:#5cc795;--green-50:#123526;--red:#ff8a80;--red-50:#3d1a17;
  --mist:#0c171c;--paper:#13232a;--paper-2:#172a32;--line:#22363f;--line-2:#2e4752;
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 8px 24px -12px rgb(0 0 0 / .6);
  --shadow-window:0 2px 6px rgb(0 0 0 / .35),0 28px 56px -24px rgb(0 0 0 / .75);
  --ring:0 0 0 3px rgb(86 176 211 / .4);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --ink:#e7eef1;--ink-2:#c3d0d6;--muted:#93a6ae;
    --blue:#56b0d3;--blue-hover:#7cc4e0;--on-blue:#04202b;--blue-50:#11303b;--blue-100:#1a4250;--blue-soft:#2f7a96;
    --orange:#f2913f;--orange-ink:#f6a866;--orange-50:#3a2614;
    --green:#5cc795;--green-50:#123526;--red:#ff8a80;--red-50:#3d1a17;
    --mist:#0c171c;--paper:#13232a;--paper-2:#172a32;--line:#22363f;--line-2:#2e4752;
    --shadow:0 1px 2px rgb(0 0 0 / .3),0 8px 24px -12px rgb(0 0 0 / .6);
    --shadow-window:0 2px 6px rgb(0 0 0 / .35),0 28px 56px -24px rgb(0 0 0 / .75);
    --ring:0 0 0 3px rgb(86 176 211 / .4);
    color-scheme:dark;
  }
}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:15px;line-height:1.55;color:var(--ink);background:var(--mist);font-feature-settings:"tnum" 0}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blue-hover)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Forced colors drop box-shadow, so text fields (which show the ring instead of an outline) get an outline back. */
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.01em;line-height:1.2}
/* .h1: an h2 that looks like the page title, for a page shown inside another (the client's view). */
h1,.h1{font-size:30px;font-weight:700;margin:0 0 6px}
h2{font-size:18px;font-weight:650;margin:0 0 12px}
h3{font-size:15px;font-weight:650;margin:0 0 8px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.num,.big{font-variant-numeric:tabular-nums}
ul{padding-left:20px}

/* ---------- Shell ---------- */
.top{display:flex;align-items:center;gap:14px;padding:18px 28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{height:26px;display:block}
.brand .divider{width:1px;height:22px;background:var(--line-2)}
.brand .name{font-family:var(--display);font-weight:650;font-size:15px;letter-spacing:-.01em}
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .brand img{filter:brightness(0) invert(1)}}

/* The theme switch: Light, Dark, Auto. The current choice is marked from data-theme, so the page needs no script. */
.theme{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--paper);margin:0}
.theme button{display:inline-grid;place-items:center;width:30px;height:28px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.theme button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme button:hover{color:var(--ink);background:var(--mist)}
:root[data-theme="light"] .theme button[value="light"],
:root[data-theme="dark"] .theme button[value="dark"],
:root:not([data-theme]) .theme button[value="system"]{background:var(--blue-50);color:var(--blue)}
nav.side .theme-row{margin-top:auto;padding:12px 12px 12px}
nav.side .theme-row + .me{margin-top:0}
@media (max-width:900px){nav.side .theme-row{margin:0 0 0 auto;padding:0}nav.side .theme-row + .me{margin-left:4px}}
.top .theme{margin-left:auto}

main{max-width:1180px;margin:0 auto;padding:12px 28px 64px}
body.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);align-items:start}
body.app main{margin:0;max-width:none;min-width:0;padding:36px 44px 72px}
body.app .wrap{max-width:1120px}

nav.side{position:sticky;top:0;height:100vh;height:100dvh;width:var(--side);display:flex;flex-direction:column;gap:2px;padding:22px 14px 18px;background:var(--paper);border-right:1px solid var(--line);overflow-y:auto;z-index:5}
nav.side .brand{padding:2px 10px 16px}
nav.side .side-ask{margin:0 4px 4px;min-height:40px;padding:9px 14px}
nav.side .side-ask svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
nav.side .side-ask[aria-current=page]{background:var(--blue-hover);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--blue)}
nav.side .group{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 12px 4px}
nav.side a.item{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:var(--radius-sm);color:var(--ink-2);text-decoration:none;font-weight:500}
nav.side a.item svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
nav.side a.item:hover{background:var(--mist);color:var(--ink)}
nav.side a.item[aria-current=page]{background:var(--blue-50);color:var(--blue);font-weight:650}
nav.side a.item[aria-current=page] svg{opacity:1}
nav.side .badge{margin-left:auto}
nav.side .me{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:13px}
nav.side .me .who{min-width:0;line-height:1.3}
nav.side .me .who strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
nav.side .me a{font-size:12.5px}

@media (max-width:900px){
  body.app{display:block}
  body.app main{padding:20px 18px 56px}
  nav.side{position:sticky;top:0;height:auto;width:auto;flex-direction:row;align-items:center;gap:4px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap}
  nav.side .brand{padding:0 8px 0 2px}
  nav.side .brand .name,nav.side .brand .divider,nav.side .group{display:none}
  nav.side a.item{padding:8px 10px}
  nav.side a.item span.label,nav.side .side-ask span.label{display:none}
  nav.side .side-ask{margin:0 4px 0 0;padding:8px 10px;min-height:0}
  nav.side a.item[aria-current=page] span.label{display:inline}
  nav.side .me{margin:0 0 0 auto;padding:0 4px;border:0}
  nav.side .me .who strong,nav.side .me .avatar{display:none}
  .top{padding:14px 18px}
  main{padding:8px 18px 48px}
  h1,.h1{font-size:25px}
}

/* ---------- Page head ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 26px}
.page-head .sub{color:var(--muted);margin:0;max-width:62ch}
.eyebrow{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;margin:0 0 14px;text-decoration:none}

/* ---------- Surfaces ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 20px;box-shadow:var(--shadow)}
.card > :last-child{margin-bottom:0}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.card-head h2{margin:0}
.card-head a{font-size:14px;font-weight:550;text-decoration:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;align-items:start}
.cards .card{margin:0}
.grid-2{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1100px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.grid-2 > *{min-width:0}
/* Two fields side by side (From and Through), one above the other on a phone. */
.two-up{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:640px){.two-up{grid-template-columns:minmax(0,1fr)}}

/* ---------- The quote: the client's own words ---------- */
.quote{position:relative;margin:0;padding:4px 0 0 64px}
.quote::before{content:"\201C";position:absolute;left:-4px;top:-10px;font-family:var(--display);font-size:96px;line-height:1;font-weight:800;color:var(--orange)}
.quote blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(21px,2.2vw,28px);line-height:1.35;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.quote figcaption{margin-top:16px;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.quote figcaption strong{color:var(--ink);font-weight:650}
.hero{padding:34px 36px 30px}
.hero .eyebrow{margin-bottom:18px}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- Chips ---------- */
.chip,.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.5;background:var(--mist);color:var(--ink-2);white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.chip.plain::before{display:none}
.v-absolutely{background:var(--blue);color:var(--on-blue)}
.v-yes{background:var(--blue-50);color:var(--blue)}
.v-no{background:var(--orange-50);color:var(--orange-ink)}
.st-received{background:var(--orange-50);color:var(--orange-ink)}
.st-released{background:var(--green-50);color:var(--green)}
.st-hidden{background:var(--mist);color:var(--muted)}
.flag{background:var(--red-50);color:var(--red)}
.badge{display:inline-block;min-width:22px;padding:0 7px;border-radius:999px;background:var(--orange);color:#1d1206;font-size:12px;font-weight:700;line-height:20px;text-align:center}

/* ---------- Feedback list ---------- */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.feed a.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 18px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.feed a.row:hover{border-color:var(--blue-100);box-shadow:var(--shadow);transform:translateY(-1px)}
.feed .when{grid-row:span 2;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);width:92px;padding-top:2px;line-height:1.35}
.feed .when b{display:block;font-family:var(--display);font-size:20px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.feed .title{font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .title .sep{color:var(--line-2);margin:0 6px}
.feed .title .proj{font-weight:500;color:var(--muted)}
.feed .snippet{grid-column:2;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px}
.feed .tags{grid-row:span 2;display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:6px;max-width:300px}
@media (max-width:640px){
  .feed a.row{grid-template-columns:minmax(0,1fr)}
  .feed .when{grid-row:auto;width:auto}.feed .when b{display:inline;font-size:15px;margin-right:6px}
  .feed .snippet{grid-column:1}.feed .tags{grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .quote{padding-left:40px}.quote::before{font-size:72px}
  .hero{padding:26px 22px}
}

/* Compact list inside cards */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0;padding-top:2px}
.list .grow{flex:1;min-width:0}
.list .grow a,.list .grow strong{font-weight:600;text-decoration:none}
.list .grow .meta{display:block;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .end{font-size:13px;color:var(--muted);white-space:nowrap;text-align:right}
.list .end .chip{margin-right:6px}
.list .end.old{color:var(--orange-ink);font-weight:600}

.list.team .end{width:min(280px,45%);text-align:left}
.list.team .end .mix{margin-top:2px}
.avatar{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue-50);color:var(--blue);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em}

/* ---------- Numbers ---------- */
.attention{list-style:none;margin:0;padding:0}
.attention li{border-top:1px solid var(--line)}
.attention li:first-child{border-top:0}
.att-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 8px;margin:0 -8px;border-radius:var(--radius-sm);color:var(--ink);text-decoration:none}
a.att-row:hover{background:var(--blue-50)}
.att-label{font-weight:600}
.att-end{display:flex;align-items:baseline;gap:10px;text-align:right;white-space:nowrap}
.att-n{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--orange-ink)}
.att-note{font-size:13px;color:var(--muted)}.att-note.old{color:var(--orange-ink);font-weight:600}
.att-zero .att-label,.att-none{color:var(--muted);font-weight:500}
.att-none{font-size:14px}
.att-month{margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.att-month strong{color:var(--ink);font-variant-numeric:tabular-nums}
.big{font-family:var(--display);font-size:30px;font-weight:700;color:var(--ink);line-height:1}

/* The work-again mix as one bar */
.mix{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--mist);margin:8px 0 10px}
.mix span{display:block;height:100%}
.mix .m-absolutely,.legend .m-absolutely{background:var(--blue)}
.mix .m-yes,.legend .m-yes{background:var(--blue-soft)}
.mix .m-no,.legend .m-no{background:var(--orange)}
.mix-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin:0}
.mix-legend b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Buttons and forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--blue);color:var(--on-blue);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{background:var(--blue-hover);color:var(--on-blue)}
.btn.accent{background:var(--orange);color:#1d1206}.btn.accent:hover{background:#d96a17;color:#1d1206}
.btn.quiet{background:var(--paper);color:var(--blue);border-color:var(--line-2)}.btn.quiet:hover{border-color:var(--blue);background:var(--blue-50)}
.btn.danger{background:var(--paper);color:var(--red);border-color:var(--line-2)}.btn.danger:hover{border-color:var(--red);background:var(--red-50)}
.btn.small{min-height:34px;padding:6px 12px;font-size:14px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

label{display:block;font-weight:600;margin:20px 0 6px;color:var(--ink)}
.card form > label:first-child{margin-top:0}
label.check{display:inline-flex;align-items:center;gap:8px;font-weight:500;margin:8px 16px 4px 0}
label.check input{width:18px;height:18px;accent-color:var(--blue)}
.hint{color:var(--muted);font-size:13.5px;margin:-2px 0 8px}
input[type=text],input[type=email],input[type=date],input[type=search],textarea,select{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
textarea{min-height:130px;resize:vertical}
input[readonly]{background:var(--paper-2);color:var(--ink-2)}
.error{color:var(--red);font-size:13.5px;margin:6px 0 0;font-weight:500}
.banner{background:var(--red-50);color:var(--red);border:1px solid transparent;padding:12px 16px;border-radius:var(--radius-sm);font-weight:500}
.notice{background:var(--blue-50);color:var(--ink);border:1px solid var(--blue-100);padding:12px 16px;border-radius:var(--radius-sm)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.copy-row{display:flex;gap:8px;align-items:stretch;margin:0 0 14px}
.copy-row input{flex:1;min-width:0}
input.link{font-size:14px}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
details.more{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
details.more summary{cursor:pointer;font-weight:600;color:var(--blue);list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:" +";color:var(--muted)}
details.more[open] summary::after{content:" −"}
fieldset{border:0;padding:0;margin:0}

/* Segmented control for filters and ranges */
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 18px}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px}
.seg a,.seg strong{padding:6px 14px;border-radius:999px;font-size:14px;font-weight:550;text-decoration:none;color:var(--ink-2)}
.seg a:hover{background:var(--mist);color:var(--ink)}
.seg strong{background:var(--blue);color:var(--on-blue);font-weight:650}
/* A segment that is a submit button (the client's view person switcher). */
.seg button{padding:6px 14px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;font-weight:550;color:var(--ink-2);cursor:pointer}
.seg button:hover{background:var(--mist);color:var(--ink)}
/* The person switcher wraps on a team of any size, so each person is its own pill rather than one long capsule. */
.seg.cv-switch{display:flex;gap:6px;margin:0 0 14px;padding:0;background:none;border:0}
.cv-switch button,.cv-switch strong{border:1px solid var(--line-2);background:var(--paper)}
.cv-switch strong{border-color:var(--blue);background:var(--blue)}
.setting-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.setting-row .grow{flex:1 1 260px;min-width:0}
.setting-row label{margin-top:0}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--paper-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td a{font-weight:600;text-decoration:none}

/* ---------- Reading a single piece of feedback ---------- */
.reading .answer{padding:20px 0;border-top:1px solid var(--line)}
.reading .answer:first-of-type{border-top:0;padding-top:4px}
.reading .answer h2{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--muted);margin:0 0 8px;letter-spacing:0}
.reading .answer p{font-size:16.5px;line-height:1.65;color:var(--ink);max-width:68ch}
.facts{margin:0}
.facts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.facts div:first-child{border-top:0;padding-top:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.side-actions form{margin:0}
.side-actions form + form,.side-actions form + details,.side-actions p + form{margin-top:14px}

.card.narrow{max-width:760px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The bars already carry each quarter's count, so its text list is for screen readers only. */
.count-chart .chart-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Charts ---------- */
.chart{display:block;width:100%;height:auto;max-width:720px;overflow:visible}
.chart line{stroke:var(--line-2)}
.chart text{fill:var(--muted);font-family:var(--body);font-size:14px;font-variant-numeric:tabular-nums}
.chart rect{rx:4px}
.chart .bar{fill:var(--blue)}
.chart .seg-absolutely{fill:var(--blue)}.chart .seg-yes{fill:var(--blue-soft)}.chart .seg-no{fill:var(--orange)}
.chart-text{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin:10px 0 0;align-items:center}
.legend span{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 -10px 0 0;-webkit-print-color-adjust:exact;print-color-adjust:exact}

.legend .m-absolutely{background:var(--blue)!important}.legend .m-yes{background:var(--blue-soft)!important}.legend .m-no{background:var(--orange)!important}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2)}
.checks label.check{margin:6px 0}
pre.copy{white-space:pre-wrap;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;font:14px/1.6 var(--body);color:var(--ink)}
code{font-size:.92em;background:var(--mist);padding:1px 5px;border-radius:4px}
ol{padding-left:22px}ol li{margin:6px 0}

/* One-click project suggestions under a feedback row and on the feedback page */
.suggest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 4px 4px 128px}
.suggest form{margin:0}
.suggest .btn{flex-direction:column;align-items:flex-start;gap:0;line-height:1.3;padding:6px 12px;text-align:left}
.suggest .why{font-size:11.5px;font-weight:500;color:var(--muted)}
details.more .suggest{padding:10px 0 4px}
@media (max-width:640px){.suggest{padding-left:4px}}

/* ---------- Question editor ---------- */
.qlist{display:flex;flex-direction:column;gap:10px;margin-bottom:96px}
.q{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.q[open]{border-color:var(--blue-100)}
/* Right padding leaves room for the tools, which sit over the summary (see .q-wrap > .qtools). */
.q > summary{display:flex;align-items:center;gap:14px;padding:12px 128px 12px 16px;cursor:pointer;list-style:none;min-height:60px}
.q > summary::-webkit-details-marker{display:none}
.q > summary:hover .qtext{color:var(--blue)}
.qnum{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue-50);color:var(--blue);font-family:var(--display);font-weight:700;font-size:14px}
.qtext{flex:1;min-width:0;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q[open] .qtext{white-space:normal}
.qchips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.q-wrap{position:relative}
.q-wrap > .qtools{position:absolute;top:13px;right:12px;z-index:1;display:flex;gap:2px}
.tok{display:inline-block;padding:0 4px;margin:0;border-radius:5px;background:var(--orange-50);color:var(--orange-ink);font-size:.86em;font-weight:600;white-space:nowrap}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-xs);border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:var(--mist);color:var(--ink)}
.icon-btn.danger:hover{background:var(--red-50);color:var(--red)}
.icon-btn[disabled]{opacity:.3;cursor:default;background:transparent}
.qbody{padding:0 20px 20px 60px;border-top:1px solid var(--line)}
.qbody > label:first-of-type{margin-top:16px}
textarea.short{min-height:84px}
.qgrid{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}
.qgrid label{margin-top:18px}
.qreq{padding-bottom:9px}.qreq label.check{margin:0}
.fixed{margin:0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);color:var(--ink-2);font-size:14.5px}
/* Answer options only matter for "Pick one". Browsers without :has() simply keep showing them. */
.q:has(select.kind option:not([value="choice"]):checked) .qoptions{display:none}
details.adv{margin-top:16px}
.savebar{position:sticky;bottom:0;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 -12px;padding:14px 12px;background:color-mix(in srgb,var(--mist) 88%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.savebar .spacer{flex:1}
.unsaved{font-size:13.5px;font-weight:600;color:var(--orange-ink);background:var(--orange-50);padding:4px 10px;border-radius:999px}
/* The page beside its client's view: side by side when there's room (the view sticks while the left side scrolls), stacked below otherwise. */
.with-preview{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.preview-col{min-width:0}
.preview-title{font-size:18px;margin:0 0 12px}
.preview-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px}
.preview-tools label{margin:0;font-size:14px}
.preview-tools select{width:auto;min-width:0;max-width:340px;flex:1 1 180px;padding:7px 10px}
.preview-tools .btn{padding-top:7px;padding-bottom:7px}
/* A person's client form: the project and link rows above the frame, labels in one column. */
.form-tools{max-width:820px;margin:0 0 20px}
.form-tools .preview-tools{flex-wrap:nowrap;margin:0 0 10px}
.form-tools .preview-tools label{flex:none;min-width:64px}
.form-tools .preview-tools select{max-width:none}
.form-tools .copy-row{flex:1;min-width:0;margin:0}
@media (max-width:520px){.form-tools .preview-tools{flex-wrap:wrap}.form-tools .copy-row{flex-basis:100%}}
.form-view{max-width:1100px}
/* .btn sets a display, which would beat the hidden attribute the live script sets on the Show button. */
.preview-tools [hidden]{display:none}
@media (min-width:1200px){
  .wrap:has(> .with-preview){max-width:1440px}
  .with-preview{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .preview-col{position:sticky;top:20px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 8px;margin:-2px -4px 0}
  .stacked-only{display:none}
}
/* Beside the preview the editor column is narrow: a question's chips go under its text, as on a phone. */
@media (min-width:1200px) and (max-width:1599px){
  .with-preview .q > summary{flex-wrap:wrap}
  .with-preview .qtext{flex-basis:calc(100% - 60px)}
  .with-preview .qchips{justify-content:flex-start;flex:1}
}
@media (max-width:700px){
  .q > summary{flex-wrap:wrap}
  .qtext{flex-basis:calc(100% - 60px)}
  .qchips{justify-content:flex-start;flex:1}
  .qbody{padding-left:20px}
  .qgrid{grid-template-columns:1fr}
}

/* ---------- People picker: a scrolling checkbox list; people-picker.js adds the search box and chips ---------- */
.picker{margin-top:20px}
.picker legend{display:block;font-weight:600;margin:0 0 6px;padding:0;color:var(--ink)}
.picker-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.picker-warning{margin:0 0 8px;padding:8px 12px;font-size:14px;background:var(--orange-50);border-color:transparent;color:var(--orange-ink)}
.pick-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 8px 3px 12px;border:1px solid var(--blue-100);border-radius:999px;background:var(--blue-50);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.pick-chip::after{content:"\00d7";font-size:17px;line-height:1;color:var(--muted)}
.pick-chip:hover{border-color:var(--blue)}
.pick-chip:hover::after{color:var(--ink)}
.picker-filter{margin:0 0 8px}
.picker-list{max-height:288px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--paper)}
label.picker-row{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:center;margin:0;padding:8px 12px;border-top:1px solid var(--line);font-weight:500;cursor:pointer}
label.picker-row:first-child{border-top:0}
label.picker-row:hover{background:var(--paper-2)}
label.picker-row:has(input:checked){background:var(--blue-50)}
.picker-row input{grid-row:span 2;width:18px;height:18px;margin:0;accent-color:var(--blue)}
.pr-name,.pr-email{min-width:0;overflow-wrap:anywhere}
.pr-email{grid-column:2;color:var(--muted);font-size:13px;line-height:1.4}
.picker [hidden]{display:none}
.picker-none{margin:0;padding:10px 12px}

/* ---------- Empty states ---------- */
.empty{text-align:left;padding:8px 0}
.empty p{color:var(--muted);max-width:52ch}

/* ---------- Public pages: landing and the client form ---------- */
body.public{background:var(--mist)}
.landing{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:24px}
.landing .panel{width:min(600px,100%);background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:44px 44px 36px}
.landing h1{font-size:clamp(30px,3.6vw,38px);font-weight:750;letter-spacing:-.025em;margin:0 0 12px}
.landing h1 em{font-style:italic;color:var(--blue);font-weight:650}
.landing .lede{font-size:17px;color:var(--ink-2);margin:0 0 28px}
.landing .client{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}

.form-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:28px;align-items:start}
@media (max-width:900px){.form-layout{grid-template-columns:1fr}}
.form-layout aside{position:sticky;top:20px;background:transparent;border:0;box-shadow:none;padding:6px 4px;color:var(--ink-2);font-size:14.5px}
.form-layout aside h2,.cv-side h2,.cv-more h2{font-size:16px;margin-top:22px}
.form-layout aside ul,.cv-side ul,.cv-more ul{padding-left:18px}
.form-layout aside li,.cv-side li,.cv-more li{margin:4px 0}
.form-card h1,.form-card .h1{font-size:28px}
.form-card .req{color:var(--orange-ink)}

/* ---------- The client's view: what the person asked gets, framed as a separate window ---------- */
/* A size container has no width of its own, so it takes the full width of its column (it would collapse in a flex or auto-width one). */
.client-view{container-type:inline-size;width:100%;min-width:0;background:var(--mist);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-window);overflow:hidden}
.cv-bar{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.cv-chip{flex:none;display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--blue-50);color:var(--blue);font-size:12px;font-weight:650;line-height:1.6;white-space:nowrap}
.cv-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.cv-frame{padding:22px}
.cv-frame .card{margin:0}
.cv-email{max-width:72ch;margin:0 0 22px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.cv-email dl{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line);font-size:14px}
.cv-email dl div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;padding:2px 0}
.cv-email dt{color:var(--muted)}
.cv-email dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.cv-email .subject dd{font-weight:650}
.cv-email-body{overflow-wrap:anywhere}
.cv-email-body > :last-child{margin-bottom:0}
.cv-page{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.cv-side{display:none;padding:6px 4px;color:var(--ink-2);font-size:14.5px}
.cv-more{padding:12px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink-2);font-size:14.5px}
.cv-more summary{cursor:pointer;font-weight:600;color:var(--blue);list-style:none}
.cv-more summary::-webkit-details-marker{display:none}
.cv-more summary::after{content:" +";color:var(--muted)}
.cv-more[open] summary::after{content:" −"}
.cv-more[open] summary{margin-bottom:10px}
@container (min-width:720px){
  .cv-page{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:28px}
  .cv-side{display:block}
  .cv-more{display:none}
}
@container (max-width:479px){
  .cv-frame{padding:12px}
  .cv-frame .card,.cv-email{padding:18px 16px}
  .cv-frame .form-card .h1{font-size:23px}
}

/* ---------- Print ---------- */
@media print{
  /* Paper is always light: the light tokens, whatever the theme switch or the system says. */
  :root,:root[data-theme],:root:not([data-theme]){
    --ink:#14232b;--ink-2:#34474f;--muted:#5d6e76;
    --blue:#005776;--blue-hover:#00445c;--on-blue:#fff;--blue-50:#e8f2f6;--blue-100:#cde3eb;--blue-soft:#6fa8bf;
    --orange:#e87722;--orange-ink:#9a4a0e;--orange-50:#fdf1e6;
    --green:#17724a;--green-50:#e6f4ec;--red:#b42318;--red-50:#fdecea;
    --mist:#eef3f5;--paper:#fff;--paper-2:#f7fafb;--line:#dce5e9;--line-2:#c5d2d8;
    --shadow:0 1px 2px rgb(20 35 43 / .05),0 8px 24px -12px rgb(20 35 43 / .18);
    --shadow-window:0 2px 6px rgb(20 35 43 / .06),0 28px 56px -28px rgb(20 35 43 / .38);
    --ring:0 0 0 3px rgb(0 87 118 / .28);
    color-scheme:light;
  }
  .mix span,.chip{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  nav.side,.top,.noprint,.seg,.back{display:none!important}
  body.app{display:block}
  body,body.app main{background:#fff;padding:0;margin:0}
  .card{box-shadow:none;border:0;padding:0 0 12px;break-inside:avoid}
  .feed a.row{border:0;border-bottom:1px solid #ccc;border-radius:0}
  .person-section{break-before:page;break-inside:auto}
  .contents{break-after:page}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Last on purpose: in Windows high contrast, focus must show even on inputs, whose :focus rule above drops the outline. */
@media (forced-colors:active){:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid CanvasText}}