:root{
  --accent:#0f766e; --accent-2:#14b8a6; --ink:#14302e;
  --bg:#f4f6f6; --card:#ffffff; --line:#e6e9e9; --muted:#5b6360;
  --focus:#1a56db; --danger:#b42318; --star:#e8a800; --staroff:#d6dad9;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#1c1f22;line-height:1.5;font-size:16px;
  background:
    radial-gradient(1200px 400px at 100% -5%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;min-height:100vh}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 20px}
main.wrap{padding-top:26px;padding-bottom:52px}

/* accessibility */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--accent);padding:10px 16px;z-index:10;border-radius:0 0 8px 0}
.skip:focus{left:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

/* header/footer */
header.site{background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 78%, var(--accent-2)));color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
header.site .wrap{display:flex;align-items:baseline;gap:12px;padding-top:15px;padding-bottom:15px}
header.site .brand{font-weight:800;letter-spacing:.2px;font-size:18px}
header.site .org{opacity:.92;font-size:14px}
.site-foot{color:var(--muted);font-size:13px;padding:26px 0;text-align:center}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;margin:0 0 20px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -18px rgba(16,24,40,.18)}
.card.narrow{max-width:420px;margin:44px auto}

/* sign-in screen — focused, no app chrome, 8-pt rhythm */
body.auth{background:
  radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
  var(--bg)}
body.auth header.site,body.auth .site-foot{display:none}
body.auth main.wrap{padding-top:0}
.auth-wrap{max-width:400px;margin:9vh auto 0;padding-bottom:48px}
.auth-brandline{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 24px}
.auth-badge{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:20px;
  border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 65%,transparent)}
.auth-word{font-weight:800;font-size:18px;letter-spacing:.2px;color:var(--ink)}
.auth-card{padding:32px 28px}
.auth-card h1{font-size:24px;text-align:center;margin:0 0 6px}
.auth-sub{text-align:center;color:var(--muted);margin:0 0 24px;font-size:15px}
.auth-card form{display:flex;flex-direction:column;gap:16px}
.auth-card .field{margin:0}
.auth-card .field label{font-size:14px;margin-bottom:6px}
.auth-card input{min-height:46px}
.auth-card .btn{width:100%;margin-top:4px}
.auth-foot{text-align:center;color:var(--muted);font-size:13px;margin:22px auto 0;max-width:320px;line-height:1.5}
.card.danger{border-color:#f2c9c4}
.center-card{text-align:center;max-width:480px;margin:60px auto}
.survey.card{padding:26px 28px}
h1{font-family:"Iowan Old Style",Palatino,"Book Antiqua",Georgia,serif;font-size:29px;line-height:1.14;margin:.1em 0 .35em;color:var(--ink);letter-spacing:-.2px}
h2{font-size:17px;margin:.2em 0 .6em}
.muted{color:var(--muted)}
.intro{color:#3a3f43;font-size:15.5px}
.opt{color:var(--muted);font-weight:400;font-size:.9em}
.when{margin:-.2em 0 .5em;color:var(--muted);font-size:14px;font-weight:600}

/* survey */
.public header.site .brand{font-size:18px}
.phase-chip{display:inline-block;background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 72%,var(--accent-2)));color:#fff;font-weight:800;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin:0 0 8px;box-shadow:0 2px 8px -3px color-mix(in srgb,var(--accent) 60%,transparent)}
.scale-legend{background:color-mix(in srgb,var(--accent) 6%,#fff);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));border-radius:12px;padding:11px 15px;font-size:14.5px;margin-bottom:20px}
fieldset{border:0;margin:0 0 18px;padding:0}
fieldset.rate{border-top:1px solid var(--line);padding-top:18px;margin-bottom:18px}
legend{font-weight:600;font-size:16px;padding:0;margin-bottom:10px;display:flex;align-items:baseline;gap:9px}
legend .qnum{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;
  background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent);font-weight:800;font-size:13px;border-radius:7px;align-self:flex-start;margin-top:1px}

/* stars as radios */
.stars{display:flex;gap:4px;flex-wrap:wrap;position:relative}
/* Radios are visually hidden and do NOT intercept clicks — the label (with the star) is the
   click target, so tapping a star selects exactly that star. Keyboard focus still works. */
.stars input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.stars label{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;cursor:pointer;border-radius:10px;transition:transform .1s ease,background .1s ease}
.stars label:hover{background:#fbf6e6}
.stars .star{width:36px;height:36px;fill:var(--staroff);transition:fill .1s ease,transform .1s ease}
.stars label.on .star{fill:var(--star)}
.stars label.on{transform:scale(1.04)}
.stars input:focus-visible + label{outline:3px solid var(--focus);outline-offset:2px}
.stars input:checked + label .star{fill:var(--star)}
.scalehint{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;margin:8px 2px 0}

/* retrospective before/now — grid keeps both rows' stars perfectly aligned */
.retro-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;margin-top:6px}
.rr-lab{font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);white-space:nowrap;justify-self:start}
.rr-lab.now{color:var(--accent)}
.rr-cell{min-width:0}
@media (max-width:480px){
  .retro-grid{grid-template-columns:1fr;gap:2px 0}
  .rr-lab{margin-top:6px}
}

/* progress bar */
.progress{margin:6px 0 18px}
.progress-track{height:9px;background:#e7eae9;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width .25s ease}
.progress-text{margin:6px 2px 0;font-size:13px;color:var(--muted)}

/* retrospective before/now rows */
fieldset.rate.retro .stars{margin:4px 0}
.stars .rowlab{flex:0 0 100%;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:2px}
@media (min-width:520px){.stars .rowlab{flex:0 0 84px;margin:0;align-self:center}}
.anon-note{background:#f1f5f4;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px}

.field{margin:0 0 14px}
.field label{display:block;font-weight:600;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=datetime-local],input:not([type]),textarea{
  width:100%;font:inherit;padding:12px 13px;border:1.5px solid #c7cbcf;border-radius:10px;background:#fff;transition:border-color .12s,box-shadow .12s}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=datetime-local]:focus,input:not([type]):focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
textarea{resize:vertical}
.hint{color:var(--muted);font-size:13px;margin:5px 0 0}
fieldset.who{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
fieldset.who legend{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff 0%),var(--accent));color:#fff;border:0;border-radius:11px;
  padding:13px 22px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;min-height:46px;
  box-shadow:0 2px 10px -4px color-mix(in srgb,var(--accent) 65%,transparent);transition:transform .1s ease,filter .1s ease,box-shadow .1s ease}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn:active{transform:translateY(0)}
.btn.small{padding:9px 15px;font-size:14px;min-height:40px;box-shadow:none}
.btn.ghost{background:#fff;color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:none}
.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 7%,#fff);filter:none}
.btn.danger-btn{background:var(--danger)}
.alert{background:#fdecea;border:1px solid #f2c9c4;color:#8a1c13;padding:10px 14px;border-radius:9px;margin:0 0 14px}
.ok{background:#e7f6ec;border:1px solid #b7e0c4;color:#14602e;padding:8px 14px;border-radius:9px;display:inline-block}

/* admin */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.inline{display:inline}
.back{text-decoration:none;font-weight:600}
table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.list th.num,table.list td.num{text-align:center;width:70px}
.rowacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.tag.open{background:#e7f6ec;color:#14602e}
.tag.closed{background:#eee;color:#555}
.linkrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 4px}
.linklabel{font-weight:600;font-size:13px;display:block;margin-bottom:5px}
.copybar{display:flex;gap:6px}
.copybar input{font-size:13px}
.counts{margin:14px 0 8px}
.btnbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 6px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:34px;font-weight:900;line-height:1;border-radius:50%;
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent)}

/* link cards + QR */
.linkcard{min-width:0}
.qrwrap{margin-top:8px}
.qrwrap summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14px}
.qr{width:150px;margin:8px 0 2px}
.qr svg{width:150px;height:150px;display:block;border:1px solid var(--line);border-radius:8px;background:#fff}
.linkrow.one{grid-template-columns:1fr;max-width:440px}

/* radio cards (mode picker) */
.modepick{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.modepick.tight{margin-top:0}
.modepick legend{font-weight:700;font-size:14px}
.radio-card{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0;cursor:pointer}
.radio-card input{margin-top:3px}
.radio-card span{font-size:14.5px;line-height:1.4}
.radio-card em{color:var(--accent);font-style:normal;font-weight:700}
.radio-inline{display:block;margin:6px 0;font-size:14.5px;cursor:pointer}
.radio-inline input{margin-right:6px}

/* results bars */
.rbar{margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rbar:last-of-type{border-bottom:0}
.rbar-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.rbar-q{font-weight:600;font-size:14.5px}
.rbar-growth{font-weight:800;color:var(--accent);white-space:nowrap;font-size:15px}
.twobar{display:flex;align-items:center;gap:10px;margin:4px 0}
.tb-lab{flex:0 0 48px;font-size:12px;color:var(--muted);text-align:right}
.tb-track{flex:1;height:18px;background:#f0f2f2;border-radius:6px;overflow:hidden}
.tb-fill{display:block;height:100%;border-radius:6px}
.tb-fill.pre{background:#bcd4d0}
.tb-fill.post{background:var(--accent)}
.tb-pct{flex:0 0 46px;font-size:13px;font-weight:700}
.legend-key{font-size:13px;color:var(--muted);margin-top:14px}
.dot{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:middle;margin-right:3px}
.dot.pre{background:#bcd4d0}.dot.post{background:var(--accent)}

@media (max-width:620px){
  .linkrow,.grid2{grid-template-columns:1fr}
  h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}