/* ============================================================
   BLUFRAIM WORKSPACE

   The public site is the blueprint. This is the instrument the
   blueprint produced, so usability leads and branding follows:
   the identity here is the wordmark, the navy, thin lines and
   small mono metadata — nothing else. The drafting backdrop,
   the drawing references and the display face are deliberately
   left on the marketing sheet.

   Colour tokens come from styles.css. The only thing added is a
   highly legible UI face for everything the user has to read to
   make the current decision.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

body.ws{
  /* the reading face: questions, evidence, answers, results */
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --paper:#f7f6f3;
  --card:#ffffff;
  --alert:#7a2318;
  min-height:100vh;
  background:var(--paper);
  font-family:var(--ui);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
body.ws .ws-boot{ padding:180px 0; text-align:center; color:var(--faint);
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase }

/* ============ THE BAR ============
   Orientation only. Three operating steps — Board is a role, not
   a step, so it lives on the Position screen instead.            */
.ws-bar{ position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px;
  padding:0 clamp(22px,4vw,52px); height:76px;
  background:rgba(247,246,243,.94); backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line) }
.ws-brand{ display:grid; gap:3px; align-content:center }
.ws-brand .brand-word{ font-size:19px; letter-spacing:.16em }
.ws-tag{ font-family:var(--ui); font-size:11.5px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--faint) }

.ws-journey{ display:flex; justify-content:center; gap:clamp(16px,3vw,44px) }
.ws-journey button{ display:grid; gap:2px; padding:0 0 7px; background:none;
  border:0; border-bottom:2px solid transparent; text-align:left; cursor:pointer;
  transition:border-color .2s ease }
.ws-journey b{ font-family:var(--ui); font-weight:600; font-size:13.5px; letter-spacing:.02em;
  color:var(--text); transition:color .2s ease }
.ws-journey span{ font-family:var(--ui); font-size:11.5px; color:var(--faint) }
.ws-journey button:hover b{ color:var(--navy) }
.ws-journey button[aria-current="step"]{ border-bottom-color:var(--navy) }
.ws-journey button[aria-current="step"] b{ color:var(--navy) }
.ws-journey button[disabled]{ cursor:default; opacity:.36 }
.ws-journey button[disabled]:hover b{ color:var(--text) }

.ws-save{ margin:0; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); opacity:0; transition:opacity .4s ease; white-space:nowrap }
.ws-save.on{ opacity:.75 }

/* ============ STAGE ============ */
.ws-main{ max-width:780px; margin:0 auto; padding:112px clamp(22px,4vw,32px) 130px }
.ws-stage{ animation:wsIn .38s cubic-bezier(.22,.61,.36,1) both }
@keyframes wsIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* small mono step label — secondary metadata, never the decision */
.ws-step{ display:flex; align-items:baseline; gap:16px; margin:0 0 22px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint) }
.ws-step .ws-count{ letter-spacing:.14em }
.ws-rule{ height:1px; flex:1; background:var(--line) }

/* ============ WHERE AM I — the area header ============
   The user works through areas, not through a queue of 245.     */
.ws-where{ margin:0 0 28px }
.ws-area{ margin:0; font-family:var(--ui); font-weight:600; font-size:15px;
  letter-spacing:.01em; color:var(--navy) }
.ws-of{ margin:3px 0 0; font-family:var(--ui); font-size:13.5px; color:var(--faint) }
.ws-prog{ height:3px; margin-top:12px; background:var(--line); border-radius:2px; overflow:hidden }
.ws-prog i{ display:block; height:100%; background:var(--navy); transition:width .3s ease }

/* ============ THE QUESTION ============ */
h1.ws-ask{ margin:0 0 18px; font-family:var(--ui); font-weight:600;
  font-size:clamp(26px,3.4vw,34px); line-height:1.28; letter-spacing:-.012em; color:var(--text); max-width:24ch }
h1.ws-ask.long{ font-size:clamp(22px,2.6vw,27px); line-height:1.36; max-width:34ch }
.ws-say{ margin:0 0 34px; color:var(--muted); font-size:16.5px; line-height:1.62; max-width:60ch }
.ws-say.tight{ margin-bottom:20px }

/* ============ CHOICES ============ */
.ws-choices{ display:grid; gap:10px; max-width:520px; margin:0 0 36px }
.ws-choice{ display:flex; align-items:center; width:100%; min-height:66px; padding:0 24px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  font-family:var(--ui); font-weight:500; font-size:17px; color:var(--text);
  text-align:left; transition:border-color .18s ease,background .18s ease,color .18s ease }
.ws-choice:hover{ border-color:var(--navy) }
.ws-choice[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff }

/* ============ FORM FIELDS ============ */
.ws-fields{ display:grid; gap:22px; max-width:520px; margin:0 0 38px }
.ws-fields label{ display:grid; gap:8px; font-family:var(--ui); font-weight:500; font-size:14px; color:var(--muted) }
.ws-fields input,.ws-fields select{ width:100%; height:52px; padding:0 15px;
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  font-family:var(--ui); font-size:16px; color:var(--text) }
.ws-fields input:focus,.ws-fields select:focus{ border-color:var(--navy); outline:none }

/* ============ MOVEMENT ============ */
.ws-move{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:42px; padding-top:24px; border-top:1px solid var(--line) }
.ws-back{ background:none; border:0; padding:8px 0; cursor:pointer;
  font-family:var(--ui); font-weight:500; font-size:14px; color:var(--faint) }
.ws-back:hover{ color:var(--navy) }
.ws-back[hidden]{ display:none }
.ws-next{ min-height:50px; padding:0 26px; cursor:pointer;
  background:var(--navy); border:1px solid var(--navy); border-radius:4px; color:#fff;
  font-family:var(--ui); font-weight:600; font-size:15px; letter-spacing:.01em;
  transition:background .18s ease,border-color .18s ease }
.ws-next:hover{ background:var(--blue-ink); border-color:var(--blue-ink) }
.ws-next[disabled]{ background:transparent; color:var(--faint); border-color:var(--line); cursor:default }
.ws-quiet{ background:none; border:0; padding:8px 0; cursor:pointer;
  font-family:var(--ui); font-weight:500; font-size:14px; color:var(--navy);
  border-bottom:1px solid var(--blue-soft) }
.ws-quiet:hover{ color:var(--blue-ink) }

/* ============ ASSESS ============
   Evidence needed · Where to find it. The two things an assessor
   must know to answer, and nothing else on the surface.          */
.ws-brief{ display:grid; gap:18px; margin:0 0 14px }
.ws-brief > div{ background:var(--card); border:1px solid var(--line); border-radius:4px; padding:22px 24px }
.ws-brief h2{ margin:0 0 9px; font-family:var(--ui); font-weight:600; font-size:13px;
  letter-spacing:.01em; color:var(--navy) }
.ws-brief p{ margin:0 0 9px; color:var(--muted); font-size:16px; line-height:1.58 }
.ws-brief p:last-child{ margin-bottom:0 }
.ws-brief p b{ color:var(--text); font-weight:600 }

.ws-label{ margin:0 0 13px; font-family:var(--ui); font-weight:600; font-size:15px; color:var(--text) }
.ws-label.sub{ font-size:13.5px; color:var(--muted) }

/* the 0–4 scale, verbatim from the workbook */
.ws-scale{ display:grid; gap:8px; margin:0 }
.ws-scale button{ display:grid; grid-template-columns:44px 1fr; align-items:center; gap:16px;
  width:100%; min-height:58px; padding:12px 20px 12px 14px; cursor:pointer; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  transition:border-color .18s ease,background .18s ease }
.ws-scale button:hover{ border-color:var(--navy) }
.ws-scale i{ font-family:var(--ui); font-style:normal; font-weight:600; font-size:22px;
  line-height:1; color:var(--navy); text-align:center }
.ws-scale span{ font-family:var(--ui); font-size:15.5px; line-height:1.4; color:var(--text) }
.ws-scale button[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy) }
.ws-scale button[aria-pressed="true"] i,
.ws-scale button[aria-pressed="true"] span{ color:#fff }

/* everything that only becomes relevant once a score exists */
.ws-after{ margin-top:38px; padding-top:30px; border-top:1px solid var(--line);
  animation:wsIn .35s cubic-bezier(.22,.61,.36,1) both }
.ws-pair{ display:grid; gap:32px }
.ws-pills{ display:flex; flex-wrap:wrap; gap:8px }
.ws-pills button{ min-height:44px; padding:0 16px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  font-family:var(--ui); font-weight:500; font-size:14.5px; color:var(--muted);
  transition:border-color .18s ease,background .18s ease,color .18s ease }
.ws-pills button:hover{ border-color:var(--navy); color:var(--navy) }
.ws-pills button[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff }
.ws-pills button[aria-pressed="true"].flag{ background:var(--alert); border-color:var(--alert) }

/* the critical condition is recorded separately from the score */
.ws-crit-box{ padding:22px 24px; background:var(--card);
  border:1px solid var(--line); border-left:3px solid var(--blue-soft); border-radius:4px }

/* progressive disclosure — one quiet line, never an open panel */
.ws-more{ margin-top:14px }
.ws-more summary{ list-style:none; cursor:pointer; padding:8px 0;
  font-family:var(--ui); font-weight:500; font-size:14px; color:var(--navy) }
.ws-more summary::-webkit-details-marker{ display:none }
.ws-more summary:before{ content:"+ " }
.ws-more[open] summary:before{ content:"− " }
.ws-more p{ margin:8px 0 4px; color:var(--muted); font-size:15px; line-height:1.62 }
.ws-more.quiet{ margin:0 0 34px; padding-top:4px }

/* mono is reserved for secondary metadata: check id, area, function */
.ws-check-meta{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:14px 0 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint) }
.ws-check-meta b{ color:var(--navy); font-weight:500 }

/* ============ AREA COMPLETE ============ */
.ws-done{ display:grid; gap:10px; margin:0 0 34px }
.ws-done .tick{ font-family:var(--ui); font-weight:600; font-size:clamp(24px,3vw,30px);
  color:var(--navy); margin:0 }
.ws-done .next{ margin:0; font-size:16.5px; color:var(--muted) }
.ws-done .next b{ color:var(--text); font-weight:600 }

/* ============ POSITION ============
   Answer first. The conclusion is the largest thing on screen;
   the figures behind it are one quiet supporting line.           */
.ws-roles{ display:flex; gap:6px; margin:0 0 30px; padding:4px;
  background:rgba(28,58,94,.05); border-radius:5px; width:fit-content }
.ws-roles button{ padding:8px 14px; background:none; border:0; border-radius:4px; cursor:pointer;
  font-family:var(--ui); font-weight:500; font-size:12.5px; color:var(--faint);
  transition:background .18s ease,color .18s ease }
.ws-roles button:hover{ color:var(--navy) }
.ws-roles button[aria-pressed="true"]{ background:var(--card); color:var(--navy); font-weight:600;
  box-shadow:0 1px 2px rgba(23,27,33,.07) }

.ws-position{ margin:0 0 16px; font-family:var(--ui); font-weight:600;
  font-size:clamp(26px,3.5vw,35px); line-height:1.26; letter-spacing:-.014em; color:var(--text); max-width:24ch }
.ws-position.flag{ color:var(--alert) }
.ws-support{ margin:0 0 8px; color:var(--muted); font-size:16px; line-height:1.62; max-width:60ch }
.ws-support b{ color:var(--text); font-weight:600 }

.ws-block{ margin:0 0 52px }
.ws-block > h2{ margin:0 0 18px; font-family:var(--ui); font-weight:600; font-size:14px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--faint) }

/* an issue is one line until it is opened */
.ws-issues{ display:grid; gap:8px }
.ws-issue{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  width:100%; padding:20px 22px; cursor:pointer; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  transition:border-color .18s ease }
.ws-issue:hover{ border-color:var(--navy) }
.ws-issue .ws-mark{ width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:4px;
  font-family:var(--ui); font-weight:600; font-size:14px; color:var(--navy) }
.ws-issue .ws-mark.sev{ border-color:var(--alert); color:var(--alert) }
.ws-issue h3{ margin:0; font-family:var(--ui); font-weight:500; font-size:16px; line-height:1.42; color:var(--text) }
.ws-issue p{ margin:5px 0 0; font-family:var(--ui); font-size:13.5px; color:var(--faint) }
.ws-issue .ws-open{ font-size:15px; color:var(--blue-soft) }
.ws-issue .ws-crit{ color:var(--alert) }

.ws-lines{ list-style:none; margin:0; padding:0; display:grid; gap:18px; max-width:70ch }
.ws-lines li{ color:var(--muted); font-size:16px; line-height:1.6 }
.ws-lines li b{ display:block; margin-bottom:3px; color:var(--text); font-weight:600; font-size:15px }

.ws-open-note{ margin:0; color:var(--muted); font-size:16px; line-height:1.66; max-width:64ch }
.ws-open-note b{ color:var(--text); font-weight:600 }

.ws-foot{ margin:64px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; line-height:2;
  text-transform:uppercase; color:var(--faint) }
.ws-foot a{ color:var(--navy); border-bottom:1px solid var(--blue-soft) }

/* ============ ISSUE DETAIL — the overlay sheet ============ */
/* The overlay is closed with the `hidden` attribute, so the hidden
   rule has to beat the display rule below — otherwise the empty
   sheet sits over the page and swallows every click. */
.ws-sheet[hidden]{ display:none }
.ws-sheet{ position:fixed; inset:0; z-index:200; background:rgba(23,27,33,.28);
  display:flex; justify-content:flex-end }
.ws-sheet-inner{ width:min(660px,100%); height:100%; overflow-y:auto;
  background:var(--card); border-left:1px solid var(--line);
  padding:46px clamp(24px,4vw,50px) 90px;
  animation:wsSlide .36s cubic-bezier(.22,.61,.36,1) both }
@keyframes wsSlide{ from{ transform:translateX(28px); opacity:0 } to{ transform:none; opacity:1 } }
.ws-sheet-inner h2{ margin:0 0 28px; font-family:var(--ui); font-weight:600;
  font-size:clamp(21px,2.6vw,26px); line-height:1.32; letter-spacing:-.01em; color:var(--text) }
.ws-close{ float:right; margin:-6px -6px 0 20px; padding:8px; background:none; border:0; cursor:pointer;
  font-family:var(--ui); font-weight:500; font-size:14px; color:var(--faint) }
.ws-close:hover{ color:var(--navy) }
.ws-detail{ margin:0 0 26px }
.ws-detail h3{ margin:0 0 8px; font-family:var(--ui); font-weight:600; font-size:13px;
  letter-spacing:.02em; color:var(--navy) }
.ws-detail p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.62 }
.ws-detail p + p{ margin-top:9px }
.ws-detail.alert h3{ color:var(--alert) }
.ws-refer{ margin-top:32px; padding-top:24px; border-top:1px solid var(--line) }
.ws-note{ margin:12px 0 0; color:var(--faint); font-size:13.5px; line-height:1.6 }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .ws-stage,.ws-after,.ws-sheet-inner{ animation:none }
  .ws-prog i{ transition:none }
}

/* ============ WIDER SCREENS ============
   Evidence and Where to find it sit side by side once there is
   room for both to stay readable.                                */
@media (min-width:900px){
  .ws-brief{ grid-template-columns:1fr 1fr }
  .ws-pair{ grid-template-columns:1fr 1fr; align-items:start }
}

/* ============ SMALL SCREENS ============ */
@media (max-width:820px){
  .ws-bar{ grid-template-columns:1fr auto; height:auto; padding:14px clamp(16px,5vw,24px); gap:10px }
  .ws-tag{ display:none }
  .ws-journey{ grid-column:1/-1; order:3; justify-content:flex-start; gap:22px; overflow-x:auto }
  .ws-journey span{ display:none }
  .ws-main{ padding-top:146px }
  .ws-issue{ grid-template-columns:auto 1fr; gap:14px }
  .ws-issue .ws-open{ display:none }
  .ws-sheet-inner{ padding-top:36px }
}