/* Start screen: one question, one tile per job, a few big buttons per job. Tokens are the Crew phone app's. */
:root{
  --bg:#F1F4F0; --surface:#FFFFFF; --ink:#18221D; --muted:#5A6861; --line:#D9E0DA;
  --accent:#C2311C; --accent-soft:#F7E2DD; --ok:#2C6A55; --ok-soft:#DDEDE5; --xlr:#FC6C07;
  --f-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cond:"Barlow Condensed", "Arial Narrow", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#111714; --surface:#19211D; --ink:#E6ECE8; --muted:#97A59E; --line:#2A3530;
  --accent:#EC5E45; --accent-soft:#3A1E18; --ok:#74B79D; --ok-soft:#1C2E26; color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:16px/1.45 var(--f-body)}
button,select,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--xlr);outline-offset:2px}
[hidden]{display:none!important}

.bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;background:var(--surface);border-bottom:1px solid var(--line);
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))}
.word{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-cond);font-weight:700;font-size:20px;letter-spacing:.06em}
.sp{flex:1}
.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:36px}
select.chip{max-width:7.5em}
.chip.role{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;flex:none}
.iconbtn svg{width:19px;height:19px}

.body{max-width:1040px;margin:0 auto;display:grid;gap:18px;
  padding:22px max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
@media (min-width:700px){.body{padding-top:44px;gap:24px}}
h1{margin:0;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:.01em;font-size:34px;text-wrap:balance;display:flex;align-items:center;gap:10px}
@media (min-width:700px){h1{font-size:50px}}
h1 svg{width:34px;height:34px;color:var(--accent);flex:none}
.label{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Dashboard (signed in): hello, workspaces, a section per role. */
.lead{margin:0;color:var(--muted);max-width:60ch}
.lead a{color:var(--ink);font-weight:700}
.crumb{justify-self:start;background:none;border:0;padding:4px 0;cursor:pointer;font-weight:700;color:var(--muted);font-size:15px}
.crumb:hover{color:var(--ink)}
.spaces{display:flex;flex-wrap:wrap;gap:8px;margin-top:-6px}
.ws{display:grid;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:700;line-height:1.25}
.ws small{font-weight:500;color:var(--muted);font-size:12.5px;text-transform:capitalize}
.sec{display:grid;gap:12px}
.sec h2{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:24px;letter-spacing:.01em}
.sec h2 svg{width:24px;height:24px;color:var(--accent)}
.more{display:grid;gap:10px;margin-top:6px}
@media (min-width:700px){.more{grid-template-columns:1fr 1fr}}

/* Role tiles: icon and name only. */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.tile{position:relative;display:grid;align-content:space-between;gap:14px;min-height:124px;padding:16px;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);transition:border-color .15s,transform .1s}
@media (min-width:700px){.tile{min-height:160px;padding:20px}}
.tile:hover{border-color:var(--ink)}
.tile:active{transform:scale(.98)}
.tile svg{width:34px;height:34px;color:var(--accent)}
.tile b{font-family:var(--f-cond);font-weight:700;font-size:22px;line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
@media (min-width:700px){.tile b{font-size:25px}}
.tile.mine{border-color:var(--ok)}
.tile .tag{position:absolute;top:12px;right:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;padding:2px 6px;border-radius:4px;background:var(--ok-soft);color:var(--ok)}

.alt{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border:1.5px dashed var(--line);border-radius:var(--r);background:transparent;cursor:pointer;text-align:left;font-weight:600}
.alt svg{width:22px;height:22px;color:var(--muted);flex:none}
.textbtn{justify-self:start;background:none;border:0;padding:4px 0;cursor:pointer;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* Role home: a few big buttons, the first one dark. */
.actions{display:grid;gap:10px}
@media (min-width:700px){.actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.act{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:80px;padding:14px 16px;text-decoration:none;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);transition:border-color .15s}
@media (min-width:700px){.act{min-height:104px;padding:20px}}
.act:hover{border-color:var(--ink)}
.act .ic{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.act .ic svg{width:25px;height:25px}
.act b{font-size:18px;line-height:1.2}
@media (min-width:700px){.act b{font-size:20px}}
.act .go{font-size:24px;color:var(--muted)}
.act.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.act.primary .ic{background:var(--accent);color:#fff}
.act.primary .go{color:inherit;opacity:.7}
.act.locked{background:transparent;border-style:dashed;cursor:default;color:var(--muted)}
.act.locked .ic{background:var(--line);color:var(--muted)}
.act.locked small{display:block;font-size:13px;font-weight:500}
.act.ask{cursor:pointer;color:var(--ink)}
.act.ask small{color:var(--accent);font-weight:700}
.act.ask:hover{border-color:var(--ink)}
.act.ask:disabled{opacity:.6;cursor:progress}
.orgs{display:grid;gap:8px}
.orgs .btn{text-align:left;min-height:48px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));margin:0;z-index:5;
  width:max-content;max-width:calc(100vw - 32px);background:var(--ink);color:var(--surface);padding:12px 16px;border-radius:10px;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}

dialog{border:0;border-radius:16px;padding:0;background:var(--surface);color:var(--ink);width:min(440px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog form{display:grid;gap:14px;padding:22px}
dialog h2{margin:0;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;font-size:26px}
dialog input{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg)}
.err{margin:0;color:var(--accent);font-size:14px}
.row{display:flex;gap:10px;justify-content:flex-end}
.btn{border:0;border-radius:10px;padding:11px 18px;font-weight:700;cursor:pointer;background:var(--ink);color:var(--surface)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}