/* Application styles. Every colour goes through a token in tokens.css — no hex, no rgb().
 * Brand assets come from evince-site and are never redrawn (see brand/wordmark.css).
 */
*{box-sizing:border-box}
  body{margin:0;background:var(--ev-cream);color:var(--ev-text-deep);font:16px/1.55 "Space Grotesk",system-ui,sans-serif}
  header{background:var(--ev-rust);color:var(--ev-sand);padding:18px 28px;display:flex;justify-content:space-between;align-items:center}
  header .logo{display:inline-flex;text-decoration:none}
  header nav a, header nav button{color:var(--ev-sand);background:none;border:0;font:inherit;cursor:pointer;margin-left:18px;text-decoration:none}
  main{max-width:720px;margin:48px auto;padding:0 24px}
  /* Admin pages: the profiles table needs the whole window. The column stays readable on the
     left — text blocks keep the 720px measure — and only .card--full takes the full width. */
  main.wide{max-width:none;margin:40px 0;padding:0 32px}
  main.wide > :not(.card--full){max-width:720px}
  main.wide .card--full{max-width:none}
  main.wide .grid th,main.wide .grid td{padding-right:18px;white-space:nowrap}
  main.wide .grid td:first-child{white-space:normal;min-width:220px}
  .paging{display:flex;justify-content:space-between;gap:16px;margin:14px 0 0;font-size:var(--ev-size-small)}
  .paging a{color:var(--ev-rust)}
  .eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ev-text-muted);margin:0 0 10px}
  h1{font:400 44px/1.1 "Instrument Serif",serif;margin:0 0 18px}
  h1 em{font-style:italic;color:var(--ev-accent)}
  h2{font:400 28px/1.2 "Instrument Serif",serif;margin:28px 0 10px}
  p.lead{font-size:18px;color:var(--ev-text-deep)}
  .card{background:var(--ev-on-accent);border:1px solid var(--ev-rule);border-radius:20px;padding:28px;box-shadow:0 6px 24px var(--ev-rule);margin:20px 0}
  label{display:block;font-weight:500;margin-bottom:6px}
  input[type=email],input[type=file],textarea{width:100%;padding:12px 14px;border:1px solid var(--ev-rule-link);border-radius:12px;font:inherit;background:var(--ev-on-accent)}
  textarea{min-height:170px;resize:vertical;line-height:1.55}
  textarea:focus,input:focus{outline:2px solid var(--ev-accent);outline-offset:1px}
  /* Stepper. The accent MARKS the active step; it does not fill it. White on terracotta measures
     3.74:1 and cream on terracotta 3.62:1, both short of AA 4.5:1 for text, so the label and the
     numeral stay deep rust at 6.99:1 on a 12% accent tint. A page-level rust fill was the other
     way to make it obvious, and it turns a progress indicator into a second header. */
  .steps{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin:0 0 var(--ev-space-5);font-size:var(--ev-size-fine)}
  .step{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:var(--ev-radius-pill);text-decoration:none;border:1px solid transparent;white-space:nowrap}
  .step__dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font-size:11px;flex:0 0 auto}
  .step--todo{color:var(--ev-step-todo-fg)}
  .step--done{color:var(--ev-step-done-fg)}
  .step--current{background:var(--ev-step-active-tint);color:var(--ev-step-active-fg);border-color:var(--ev-step-active-mark);font-weight:500}
  .step--current .step__dot{border-color:var(--ev-step-active-mark);border-width:2px}
  a.step:hover{border-color:var(--ev-rule-link);color:var(--ev-rust)}
  a.step:focus-visible{outline:2px solid var(--ev-focus-ring);outline-offset:2px}
  .steps-compact{display:none;color:var(--ev-text-muted);font-size:var(--ev-size-fine);margin:0 0 var(--ev-space-4)}
  /* 720, not 640: measured, the six steps still fit at 768 and overflow by 641. */
  @media (max-width:720px){.steps{display:none}.steps-compact{display:block}}

  .flownav{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--ev-rule)}
  .flownav .back{color:var(--ev-text-muted);text-decoration:none;padding:12px 0}
  .flownav .back:hover{color:var(--ev-rust)}
  .flownav form{text-align:right}
  .returnlink{display:flex;gap:8px;align-items:center;margin:10px 0 6px}
  .returnlink input{flex:1;min-width:0;font:inherit;font-size:var(--ev-size-small);padding:10px 12px;border:1px solid var(--ev-rule-link);border-radius:10px;background:var(--ev-surface-card);color:var(--ev-text-deep)}
  .cta-link{display:inline-block;background:var(--ev-accent);color:var(--ev-on-accent);border-radius:999px;padding:12px 22px;text-decoration:none}
  .cta-link:hover{filter:brightness(.95)}
  @media (max-width:600px){.steps{font-size:12px}.step{padding:6px 10px}}
  .claim{background:var(--ev-on-accent);border:1px solid var(--ev-rule);border-radius:20px;padding:22px 24px;box-shadow:0 6px 24px var(--ev-rule);margin:16px 0}
  .claim.settled{box-shadow:none;background:var(--ev-surface-settled)}
  .claim.gone{padding:14px 22px;background:transparent;border-style:dashed;box-shadow:none}
  .claim-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;justify-content:space-between}
  .claim h2{font:400 25px/1.25 "Instrument Serif",serif;margin:0}
  .band{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px;white-space:nowrap}
  .band-demonstrated{background:var(--ev-teal);color:var(--ev-on-accent)}
  .band-supported{background:var(--ev-sand);color:var(--ev-rust)}
  .band-mentioned{background:transparent;color:var(--ev-text-muted);border:1px solid var(--ev-rule-link)}
  .claim .esco{font-size:13px;color:var(--ev-text-muted);margin:6px 0 0}
  .claim .why{margin:12px 0 0}
  .claim .struck{text-decoration:line-through;text-decoration-thickness:1px}
  .claim .removed-note{color:var(--ev-text-muted);font-size:14px;margin:4px 0 0}
  .undo{background:none;border:0;color:var(--ev-rust);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:6px 2px;margin-left:6px}
  .claim .removed,.claim .settled-note{color:var(--ev-text-muted);margin:0;font-size:15px}
  .claim .tick{color:var(--ev-teal)}
  .claim .ev{margin-top:14px}
  .claim .ev summary{cursor:pointer;color:var(--ev-text-muted);font-size:14px}
  .claim .ev ul{margin:10px 0 0;padding-left:18px}
  .claim .ev li{margin-bottom:9px;font-size:15px}
  .claim .ev .kind{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ev-text-muted);margin-right:6px}
  .claim .note{margin-top:12px}
  .verdicts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
  .verdicts form{margin:0}
  .verdict{min-height:48px;padding:12px 20px;border-radius:999px;border:1.5px solid var(--ev-rule-link);background:var(--ev-on-accent);font:inherit;color:var(--ev-text-deep);cursor:pointer}
  .verdict:hover{border-color:var(--ev-rust)}
  /* No verdict button is styled as the primary one. Filling "Yes, that's me" made it read as
     already chosen AND as the recommended answer, on a question about the person's own skills whose
     answers feed the spec §4 acceptance rate. All three carry equal weight until one is chosen. */
  .verdict:hover{border-color:var(--ev-rust);color:var(--ev-rust)}
  .verdict:focus-visible{outline:2px solid var(--ev-accent);outline-offset:2px}
  @media (max-width:600px){.verdicts{flex-direction:column}.verdict{width:100%}.claim h2{font-size:22px}}
  .gap{margin:16px 0 0;padding:14px 16px;background:var(--ev-tint-sand);border-radius:14px}
  .gap h3{font:500 13px/1 "Space Grotesk",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ev-rust);margin:0 0 8px}
  .gap ul{margin:8px 0 0;padding-left:18px}
  /* Stage list. No bar and no clock: both were estimates dressed as measurements. These five are
     real state, written by the job as it reaches each one. */
  .stages{list-style:none;margin:0;padding:0}
  .stage{display:flex;align-items:center;gap:var(--ev-space-3);padding:var(--ev-space-2) 0;font-size:var(--ev-size-body)}
  .stage__mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto}
  .stage--todo{color:var(--ev-step-todo-fg)}
  .stage--done,.stage--active,.stage--failed{color:var(--ev-text-deep)}
  .stage--done .stage__mark{color:var(--ev-step-done-fg)}
  .stage--failed .stage__mark{color:var(--ev-text-deep);font-size:19px}
  .stage-error{color:var(--ev-text-deep);margin:var(--ev-space-4) 0 0}
  /* The one moving thing on the page: the wordmark's C, one turn every eight seconds. */
  .stage__spin{width:20px;height:20px;overflow:visible;color:var(--ev-accent);animation:ev-turn 8s linear infinite}
  .stage__spin ellipse{fill:none;stroke:currentColor;stroke-width:7}
  @keyframes ev-turn{to{transform:rotate(360deg)}}
  /* Short waits (a form marked data-wait): the phrase centred over the page behind a scrim, with the
     same turning C. Without these rules the box is an ordinary block at the foot of the page. */
  #waiting{position:fixed;inset:0;background:var(--ev-scrim);display:none;align-items:center;justify-content:center;z-index:50}
  #waiting.on{display:flex}
  #waiting .box{max-width:420px;padding:0 28px;text-align:center}
  #waiting .stage__spin{display:block;width:34px;height:34px;margin:0 auto 14px}
  #waiting p{margin:0}
  @media (prefers-reduced-motion:reduce){
    .stage__spin{animation:none}
    .stage__spin ellipse{display:none}
    #waiting .stage__spin ellipse{display:initial}
    .stage--active .stage__mark::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ev-accent)}
  }
  /* What the person has already answered, readable and correctable. */
  .answered{list-style:none;margin:0 0 var(--ev-space-5);padding:0}
  .answered__item{border-top:1px solid var(--ev-rule);padding:var(--ev-space-4) 0}
  .answered__q{margin:0;color:var(--ev-text-muted);font-size:var(--ev-size-small)}
  .answered__a{margin:6px 0 0;color:var(--ev-text-deep)}
  .answered__a--none{color:var(--ev-text-muted);font-style:italic}
  .answered__item .undo{display:inline-block;margin:6px 0 0;padding-left:0}
  .struck{text-decoration:line-through;text-decoration-thickness:1px}
  .removed-note{color:var(--ev-text-muted);font-size:var(--ev-size-small);margin:4px 0 0}
  .undo{background:none;border:0;color:var(--ev-rust);font:inherit;font-size:var(--ev-size-small);text-decoration:underline;cursor:pointer;padding:6px 2px;margin-left:6px}
  .gap{margin:16px 0 0;padding:14px 16px;background:var(--ev-tint-sand);border-radius:14px}
  .gap h3{font:500 13px/1 var(--ev-font-ui);letter-spacing:var(--ev-tracking-eyebrow);text-transform:uppercase;color:var(--ev-rust);margin:0 0 8px}
  .gap ul{margin:8px 0 0;padding-left:18px}
  .verdict:hover{border-color:var(--ev-rust);color:var(--ev-rust)}
  .verdict:focus-visible{outline:2px solid var(--ev-focus-ring);outline-offset:2px}

  .chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
  .chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:11px 18px;border:1.5px solid var(--ev-rule-link);border-radius:999px;background:var(--ev-on-accent);font:inherit;color:var(--ev-text-deep);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .chip[aria-pressed=true]{background:var(--ev-rust);border-color:var(--ev-rust);color:var(--ev-on-accent)}
  .chip .star{border:0;background:none;font:inherit;line-height:1;padding:0 0 0 2px;color:var(--ev-sand);cursor:pointer;opacity:.55}
  .chip[aria-pressed=true] .star[aria-pressed=true]{color:var(--ev-mustard);opacity:1}
  .chip .star:not([hidden]){display:inline}
  .progress{display:flex;gap:6px;margin:0 0 18px}
  .progress i{flex:1;height:4px;border-radius:2px;background:var(--ev-rule-strong)}
  .progress i.on{background:var(--ev-accent)}
  .skip{background:none;border:0;color:var(--ev-text-muted);font:inherit;text-decoration:underline;cursor:pointer;margin-left:16px;padding:12px 0}
  @media (max-width:600px){main{margin:24px auto}h1{font-size:34px}.chip{min-height:52px}}
  blockquote.q{font:400 26px/1.3 "Instrument Serif",serif;margin:0 0 8px;border-left:4px solid var(--ev-accent);padding-left:18px}
  button.cta{background:var(--ev-accent);color:var(--ev-on-accent);border:0;border-radius:999px;padding:12px 22px;font:500 16px "Space Grotesk",sans-serif;cursor:pointer;margin-top:14px}
  button.cta:hover{filter:brightness(.95)}
  button.danger{background:none;color:var(--ev-rust);border:1px solid var(--ev-rust);border-radius:999px;padding:10px 18px;font:inherit;cursor:pointer}
  .muted{color:var(--ev-text-muted);font-size:14px}
  .ok{border-left:4px solid var(--ev-teal);padding-left:14px}
  .err{border-left:4px solid var(--ev-accent);padding-left:14px;color:var(--ev-rust)}
  footer{max-width:720px;margin:60px auto;padding:0 24px;color:var(--ev-text-muted);font-size:13px}
  footer p{margin:0 0 6px}
  footer a{color:inherit}
  .card a{color:var(--ev-rust)}
  .grid{width:100%;border-collapse:collapse;font-size:var(--ev-size-small)}
  .grid th{text-align:left;font-weight:500;color:var(--ev-text-muted);padding:6px 8px 6px 0;border-bottom:1px solid var(--ev-rule)}
  .grid td{padding:7px 8px 7px 0;border-bottom:1px solid var(--ev-rule);vertical-align:top}