/* Extreme priorities survey v1.1.1: shared styles.
   Palette is read from Extreme's slide template: black ground, deep violet header band,
   bright violet for emphasis, pale cyan for headings and numbers, green for "live" and success.
   Change a colour here and every page follows. */

@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/poppins-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/poppins-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/poppins-latin-700-normal.woff2') format('woff2')}

:root{
  --ink:#05030b;            /* page ground */
  --ink-2:#0d0820;          /* raised surface */
  --ink-3:#150c33;          /* card surface */
  --violet-900:#1a0b4a;     /* header band, dark end */
  --violet-700:#32108a;     /* header band, light end */
  --violet:#7b2cff;         /* emphasis, bars, selected */
  --violet-soft:rgba(123,44,255,.18);
  --cyan:#8fe3f7;           /* headings, numbers */
  --green:#22d284;          /* live, success */
  --red:#ff6b81;            /* errors */
  --text:#ffffff;
  --text-dim:rgba(255,255,255,.68);
  --text-faint:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.14);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--ink);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
}
body.bare{padding-left:0;padding-right:0}
button,select,input{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
[hidden]{display:none!important}

.eyebrow{margin:0 0 6px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.muted{color:var(--text-dim)}
.err{color:var(--red);font-weight:500}

/* Header band, after the title area of Extreme's slides */
.band{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='xMaxYMin slice'%3E%3Cg fill='none' stroke='%23a98bff' stroke-opacity='.35' stroke-width='1.2'%3E%3Cpath d='M380 0C520 70 640 110 800 118'/%3E%3Cpath d='M470 0C590 52 700 86 800 92'/%3E%3C/g%3E%3C/svg%3E") right top/cover no-repeat,
    linear-gradient(115deg,var(--violet-900),var(--violet-700));
}

.brand{display:block;height:clamp(20px,5.6vw,30px);width:auto;max-width:60%;opacity:.8;margin:0 0 14px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;
  border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--text);
  font-weight:600;cursor:pointer;text-decoration:none;touch-action:manipulation;transition:background .18s,border-color .18s,transform .18s,opacity .18s;
}
.btn:hover{border-color:rgba(255,255,255,.4)}
.btn.primary{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.primary:hover{background:#8d48ff;border-color:#8d48ff}
.btn.cyan{background:var(--cyan);border-color:var(--cyan);color:#06121a}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn.small{min-height:40px;padding:8px 18px;font-size:.9rem}

/* Sign-in and other plain pages */
body.plain{display:grid;place-items:center;padding-block:32px}
.login{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.login h1{margin:0;font-size:1.6rem;line-height:1.25;text-wrap:balance}
.login p{margin:0}
.login form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.login label{font-size:.85rem;font-weight:500;color:var(--text-dim)}
.login input{
  min-height:50px;padding:10px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--ink-3);
}
.login input:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 3px var(--violet-soft)}
.foot{color:var(--text-faint);font-size:.78rem;margin-top:10px!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.pick select.need{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(143,227,247,.35)}
.count .go{display:block;margin-top:2px;font-size:.82rem;font-weight:600;color:var(--cyan)}

.tbls{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin-top:14px}
.btn.tbl{min-height:72px;font-size:1.3rem;font-weight:700;padding:0 8px;border-width:0;text-shadow:none}
.btn.tbl:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tdot{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin-right:.45em;vertical-align:-.05em;border:1px solid rgba(255,255,255,.55)}
.tchip{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.tchip>span{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--violet-700);border:1px solid var(--violet);color:#fff;font-size:.9rem}
.tchip b{color:var(--cyan);font-size:1.05rem}
button.link{-webkit-appearance:none;appearance:none;box-shadow:none;background:transparent;border:0;padding:6px 0;color:var(--cyan);font:inherit;font-size:.86rem;text-decoration:underline;cursor:pointer;min-height:36px}