:root{
  --paper:#fefefd;
  --ink:#161616;
  --muted:#767676;
  --muted-soft:#a8a8a8;
  --rule:#dcdad6;
  --grid-line:#c7c4bf;
  --maroon:#8c1f28;
  --maroon-dark:#6c161e;
  --slate:#595959;
  --fog:#9a9a9a;
  --amber:#9a6b1a;
  --font-display:'Space Grotesk', 'Arial Black', sans-serif;
  --font-body:'Inter', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
}

.page{max-width:1560px; margin:0 auto; padding:44px 32px 40px;}

button{font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;}
.hidden{display:none !important;}

/* ---- language switch (sits on the hero's line) ---- */
.lang-switch{
  display:flex;
  gap:2px;
}
.lang-btn{
  padding:7px 14px;
  border:none;
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  transition:background .15s ease;
}
.lang-btn:hover{background:var(--maroon);}
.lang-btn.active{background:var(--maroon);}
.lang-btn:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

.hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
  margin-bottom:28px;
}
.hero-text{flex:1; min-width:0;}
.hero .lang-switch{flex:0 0 auto; margin-top:6px;}
h1{
  margin:0 0 18px;
}
.home-link{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(16px,2.6vw,32px);
  line-height:1.14;
  max-width:100%;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  display:block;
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:var(--ink);
  text-align:left;
  letter-spacing:normal;
  cursor:pointer;
}
.home-link:hover{color:var(--maroon);}
.home-link:focus-visible{outline:2px solid var(--maroon); outline-offset:3px;}

.hero p.subtitle{
  font-size:17px;
  color:var(--muted);
  margin:0;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
}

/* Three states, because the two columns want different splits:
   - default: nothing picked yet, the quadrant is the hero.
   - browsing: searching and filtering cases, so the selector takes the
     larger share and the quadrant shrinks out of the way.
   - studying: a case is open, so the selector folds to a rail.
   Deliberately not transitioned: grid-template-columns cannot
   interpolate minmax() to a fixed length, and the half-applied
   transition leaves the column stuck at its old width. */
.layout{
  display:grid;
  grid-template-columns:minmax(360px,500px) 1fr;
  gap:40px;
  align-items:start;
}
.layout.browsing{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:32px;
}
.layout.studying{
  grid-template-columns:44px 1fr;
  gap:20px;
}
/* Grid items default to min-width:auto, which would stop the collapsed
   column from shrinking below the width of its own content. */
.quiz-panel, .diagram-panel{min-width:0;}

.panel-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.panel-head .intro-line{flex:1; min-width:0;}
.panel-collapse{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--muted);
  cursor:pointer;
  font-size:15px;
  line-height:1;
  transition:border-color .15s ease, color .15s ease;
}
.panel-collapse:hover{border-color:var(--maroon); color:var(--maroon);}
.panel-collapse:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

.panel-rail{
  display:none;
  position:sticky;
  top:20px;
  width:100%;
  min-height:190px;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border:none;
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  transition:background .15s ease;
}
.panel-rail:hover{background:var(--maroon);}
.panel-rail:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.panel-rail-icon{font-size:16px; line-height:1;}
.panel-rail-label{
  writing-mode:vertical-rl;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.quiz-panel.collapsed .card{display:none;}
.quiz-panel.collapsed .panel-rail{display:flex;}

.card{
  background:#fff;
  border:1px solid var(--rule);
  padding:40px;
  position:relative;
}
.card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--maroon);
}

.has-tooltip{
  cursor:help;
  text-decoration:underline dotted var(--muted-soft);
  text-underline-offset:3px;
}

.intro-line{
  font-size:15px;
  color:var(--ink);
  line-height:1.55;
  max-width:48ch;
  margin:0 0 28px;
}

/* ---- section headings ---- */
.step-heading{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:0 0 6px;
}
.step-hint{
  font-size:13.5px;
  color:var(--muted);
  margin:0 0 12px;
  line-height:1.5;
}

/* ================================================================
   LEFT COLUMN — perspective choice, then a contextual selection list
   ================================================================ */
.select-block{margin-bottom:28px;}
.select-block:last-of-type{margin-bottom:0;}

.select-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.select-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
}
.select-back{
  flex:0 0 auto;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:normal;
  color:var(--maroon);
}
.select-back:hover{text-decoration:underline;}
.select-back:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

.perspective-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.perspective-btn{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--rule);
  border-left:3px solid var(--rule);
  padding:14px 16px;
  cursor:pointer;
  font-family:var(--font-body);
  letter-spacing:normal;
  transition:border-color .15s ease, background .15s ease;
}
.perspective-btn:hover{border-color:var(--slate); border-left-color:var(--slate);}
.perspective-btn:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.perspective-btn.active{
  border-color:var(--maroon);
  border-left-color:var(--maroon);
  background:#fbf3f3;
}
.perspective-label{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.perspective-hint{
  font-size:12.5px;
  color:var(--muted);
}

.scenario-search{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--rule);
  background:#fff;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink);
  margin-bottom:12px;
}
.scenario-search:focus-visible{outline:2px solid var(--maroon); outline-offset:1px;}

/* ---- breach filters (industry / country / year) ---- */
#selectionFilters{margin-bottom:14px;}
.toolbar-btn{
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:normal;
  color:var(--ink);
  transition:color .15s ease;
}
.toolbar-btn:hover{color:var(--maroon);}
.toolbar-btn:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.toolbar-icon{width:14px; height:14px; flex:0 0 auto;}
.toolbar-chevron{
  font-size:10px;
  color:var(--muted-soft);
  transition:transform .15s ease;
}
.toolbar-btn.open .toolbar-chevron{transform:rotate(180deg);}
.filter-badge{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  color:#fff;
  background:var(--maroon);
  border-radius:999px;
  padding:1px 7px;
}

.filter-panel{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--rule);
  background:#fbfaf9;
}
.filter-panel.collapsed{display:none;}
.filter-group{margin-bottom:16px;}
.filter-group-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 6px;
  padding-bottom:6px;
  border-bottom:1px solid var(--rule);
}
.filter-check-list{
  display:flex;
  flex-direction:column;
  max-height:170px;
  overflow-y:auto;
}
.filter-check-list-tall{max-height:220px;}
.filter-check-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 2px;
  cursor:pointer;
}
.filter-check-row:hover{background:#f3f1ee;}
.filter-checkbox{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.filter-check-box{
  width:15px;
  height:15px;
  flex:0 0 auto;
  border:1.5px solid var(--rule);
  background:#fff;
  position:relative;
  transition:border-color .15s ease, background .15s ease;
}
.filter-checkbox:checked + .filter-check-box{
  background:var(--ink);
  border-color:var(--ink);
}
.filter-checkbox:checked + .filter-check-box::after{
  content:'';
  position:absolute;
  left:4px;
  top:1px;
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.filter-checkbox:focus-visible + .filter-check-box{outline:2px solid var(--maroon); outline-offset:2px;}
.filter-check-label{
  flex:1;
  min-width:0;
  font-size:12.5px;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.filter-check-count{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted-soft);
}
.filter-clear{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:normal;
  color:var(--maroon);
}
.filter-clear:hover{text-decoration:underline;}
.filter-clear:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

.year-slider{padding:4px 3px 0;}
.year-slider-track-wrap{
  position:relative;
  height:20px;
  display:flex;
  align-items:center;
}
.year-slider-track{
  position:absolute;
  left:0; right:0;
  height:3px;
  background:var(--rule);
  border-radius:2px;
}
.year-slider-range{
  position:absolute;
  height:3px;
  background:var(--maroon);
  border-radius:2px;
}
.year-range{
  position:absolute;
  left:0; right:0;
  width:100%;
  margin:0;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  pointer-events:none;
}
.year-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  pointer-events:auto;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--rule);
  cursor:pointer;
}
.year-range::-moz-range-thumb{
  pointer-events:auto;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--rule);
  cursor:pointer;
}
.year-range::-webkit-slider-runnable-track{background:transparent;}
.year-range::-moz-range-track{background:transparent;}
.year-range:first-of-type{z-index:1;}
.year-range:last-of-type{z-index:2;}
.year-slider-labels{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--muted);
}

.selection-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:520px;
  overflow-y:auto;
}
.selection-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--rule);
  padding:11px 13px;
  cursor:pointer;
  font-family:var(--font-body);
  letter-spacing:normal;
  transition:border-color .15s ease, background .15s ease;
}
.selection-row:hover{border-color:var(--slate); background:#fbf9f8;}
.selection-row:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.selection-row.selected{
  border-color:var(--maroon);
  background:#fbf3f3;
}
.selection-row-name{
  font-size:14px;
  color:var(--ink);
  font-weight:500;
}
.selection-row-meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--muted);
}
/* Separated from the marker/DV meta by a bullet, since it is a different
   kind of fact: usage, not classification. */
.selection-row-count::before{
  content:"·";
  margin:0 6px;
  color:var(--grid-line);
}
/* A row of zeroes should read as background, not as a hundred facts. */
.selection-row-count.empty{opacity:.55;}
.selection-empty{
  font-size:14px;
  color:var(--muted);
  margin:0;
}

.sort-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.sort-label{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.sort-row .scenario-sort-select{
  flex:1;
  min-width:0;
  border:1px solid var(--rule);
  background-color:#fff;
  padding:7px 28px 7px 10px;
  font-size:13px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23767676' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:11px;
}
.sort-row .scenario-sort-select:hover{border-color:var(--slate);}

/* ---- own cases ---- */
.add-case-btn{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin-top:10px;
  padding:11px 13px;
  background:#fff;
  border:1px dashed var(--rule);
  cursor:pointer;
  font-family:var(--font-body);
  font-size:13.5px;
  letter-spacing:normal;
  color:var(--muted);
  transition:border-color .15s ease, color .15s ease;
}
.add-case-btn:hover{border-color:var(--maroon); color:var(--maroon);}
.add-case-btn:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.add-case-plus{
  font-size:16px;
  line-height:1;
  font-family:var(--font-mono);
}

.own-tag{
  display:inline-block;
  margin-left:7px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--amber);
  color:#fff;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  vertical-align:middle;
}

/* One colour per origin, used by both the list tag and the banner. */
.own-tag.origin-draft{background:var(--amber);}
.own-tag.origin-submitted{background:var(--ink);}
.own-tag.origin-contributed{background:var(--slate);}

.own-case-banner.origin-draft{border-left-color:var(--amber); background:#faf6ee;}
.own-case-banner.origin-submitted{border-left-color:var(--ink); background:#f4f3f1;}
.own-case-banner.origin-contributed{border-left-color:var(--slate); background:#f4f3f1;}

.caseform-actions-note{
  max-width:70ch;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.55;
  margin:20px 0 0;
}

.caseform-submit{
  padding:11px 20px;
  border:1px solid var(--ink);
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.caseform-submit:hover:not(:disabled){background:var(--ink); color:#fff;}
.caseform-submit:disabled{opacity:.55; cursor:progress;}
.caseform-submit:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

.admin-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--rule);
}
.admin-toolbar .scenario-sort-select{
  border:1px solid var(--rule);
  padding:7px 10px;
  font-size:13px;
}
.admin-json{
  font-family:var(--font-mono);
  font-size:12px;
  margin-top:10px;
}

.admin-editor{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--rule);
}
.admin-tabs{
  display:flex;
  gap:2px;
  margin-bottom:4px;
}
.admin-tab{
  padding:7px 16px;
  border:none;
  background:var(--rule);
  color:var(--slate);
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background .15s ease, color .15s ease;
}
.admin-tab:hover{background:var(--slate); color:#fff;}
.admin-tab.active{background:var(--ink); color:#fff;}
.admin-tab:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.admin-pane{
  border:1px solid var(--rule);
  padding:16px 18px;
}
.admin-pane .caseform-section:first-child{
  margin-top:0;
  padding-top:0;
  border-top:none;
}
/* Collapsed by default: the queue is a list to scan, not a stack of
   open editors to scroll past. */
.submission-summary{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:4px 0;
  cursor:pointer;
  font:inherit;
  color:inherit;
}
.submission-summary:hover .learn-card-label{color:var(--maroon);}
.submission-summary:focus-visible{outline:2px solid var(--maroon); outline-offset:4px;}
.submission-summary .learn-card-def{margin:6px 0 0;}
/* The header is a flex row with its own gap, so no margin here. */
.submission-chevron{
  flex:0 0 auto;
  color:var(--muted);
  font-size:11px;
  transition:transform .12s ease;
}
.submission-summary.open .submission-chevron{transform:rotate(90deg);}

.submission-body{margin-top:20px;}
.submission-body.collapsed{display:none;}

/* Submission and proposal side by side. Collapses to one column below
   the point where two editors stop being readable. */
.review-panes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
.review-pane{min-width:0;}
.review-pane-ai{
  border-left:1px solid var(--rule);
  padding-left:24px;
}
.review-pane-head{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:0 0 12px;
}
@media (max-width:1100px){
  .review-panes{grid-template-columns:1fr;}
  .review-pane-ai{
    border-left:none;
    padding-left:0;
    border-top:1px solid var(--rule);
    padding-top:24px;
  }
}

/* The chips carry margin-left:auto from .action-chip, which would push
   them apart in a row of their own. */
.ai-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.ai-chips .action-chip{margin-left:0;}
.ai-conf-level{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}
.ai-warning{
  border-left:3px solid var(--maroon);
  background:#faf4f4;
  padding:10px 12px;
  margin:0 0 14px;
  font-size:13px;
  line-height:1.5;
}
/* The whole page until someone starts. Not an overlay: it replaces the
   layout, so there is nothing behind it to read past. */
.splash{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58vh;
  padding:40px 0 60px;
}
/* Wide enough that each of the two lines stays one line. The sizes
   scale with the viewport rather than wrapping: shrinking the type on a
   narrow screen keeps the shape, breaking the line loses it. */
.splash-inner{max-width:820px;}
.splash-title{
  font-family:var(--font-display);
  font-size:clamp(24px, 4.4vw, 38px);
  line-height:1.15;
  font-weight:600;
  margin:0;
  color:var(--ink);
}
.splash-sub{
  font-size:clamp(14px, 2.1vw, 19px);
  line-height:1.5;
  color:var(--muted);
  margin:16px 0 0;
}
.splash-link{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:var(--maroon);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.splash-link:hover{color:var(--ink);}
.splash-start{
  margin-top:28px;
  padding:13px 34px;
  border:none;
  background:var(--ink);
  color:#fff;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.splash-start:hover{background:var(--maroon);}
.splash-start:focus-visible{outline:2px solid var(--maroon); outline-offset:3px;}

/* A static copy of the model, inside the DV type block of a case. */
/* Capped: it is a reference figure beside the text, not a second
   diagram competing with the interactive one above it. */
.understand-quadrant{margin:6px 0 18px; max-width:340px;}
.mini-quadrant{width:100%; height:auto; display:block; overflow:visible;}
.mini-axis{
  font-family:var(--font-mono);
  font-size:9px;
  fill:var(--muted);
  letter-spacing:.04em;
  dominant-baseline:middle;
}

.bloom-note{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--muted);
  margin:0 0 10px;
}
.bloom-note a{color:var(--maroon); margin-left:6px;}

.lens-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:14px 0 18px;
  border-bottom:1px solid var(--rule);
  margin-bottom:20px;
}
.lens-note{
  flex:1 1 100%;
  font-size:12.5px;
  color:var(--muted);
  margin:0;
}
.reflection-block .commit-textarea{width:100%; margin-top:8px;}

.research-block{
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--rule);
}
.research-block .scenario-search{margin-top:14px;}
.research-block .selection-list{max-height:none;}
.correction-output{
  white-space:pre;
  overflow-x:auto;
  margin-top:16px;
}

.understand-markers-pending{
  border-left:2px solid var(--amber);
  padding-left:12px;
  margin:4px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

/* Quiet, but present on every corrected case. */
.understand-corrected{
  border-left:2px solid var(--amber);
  padding-left:10px;
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
}
.ai-detail{margin-top:14px;}
.ai-detail.collapsed{display:none;}
.ai-finding{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:8px 0 8px 10px;
  border-left:2px solid var(--muted-soft);
  margin-bottom:6px;
}
.ai-finding-blocking{border-left-color:var(--maroon);}
.ai-finding-important{border-left-color:var(--amber);}
.ai-finding-field{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}
.ai-finding-issue{font-size:13px; line-height:1.5;}

/* The one irreversible button in the console, so it does not look like
   the reversible ones sitting next to it. */
.admin-destroy{
  margin-left:0;
  color:var(--maroon);
  font-weight:500;
}

.own-case-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  padding:11px 14px;
  border-left:3px solid var(--amber);
  background:#faf6ee;
  font-size:13px;
  color:var(--slate);
}
.own-case-edit{
  flex:0 0 auto;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:normal;
  color:var(--maroon);
}
.own-case-edit:hover{text-decoration:underline;}
.own-case-edit:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

.caseform{max-width:70ch;}
.caseform-note{
  max-width:70ch;
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
  margin:0 0 8px;
  padding-left:11px;
  border-left:3px solid var(--amber);
}
.caseform-warning{
  max-width:70ch;
  font-size:13px;
  color:var(--maroon);
  margin:0 0 8px;
}
.caseform-section{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--rule);
}
.caseform-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.caseform-row > .caseform-field{flex:1 1 200px;}
.caseform-field select.commit-input{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23767676' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
  padding-right:32px;
}
.caseform-error{
  margin:16px 0 0;
  font-size:13px;
  color:var(--maroon);
}
.caseform-buttons{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--rule);
}
.caseform-save{
  padding:11px 22px;
  border:none;
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background .15s ease;
}
.caseform-save:hover{background:var(--maroon);}
.caseform-save:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.caseform-delete{
  margin-left:auto;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:normal;
  color:var(--muted);
}
.caseform-delete:hover{color:var(--maroon); text-decoration:underline;}
.caseform-delete:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

.dataset-link{
  margin-top:28px;
  padding-top:20px;
  border:none;
  border-top:1px solid var(--rule);
  background:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .15s ease;
}
.dataset-link:hover{color:var(--maroon);}
.dataset-link:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

/* ================================================================
   RIGHT COLUMN — quadrant / explainer / marker / study stages
   ================================================================ */
.diagram-panel .card{padding:36px 36px 28px;}
.quadrant-wrap{width:100%;}
#quadrantSvg{width:100%; height:auto; display:block;}

.diagram-hint{margin:0 0 20px;}
.diagram-hint .step-hint{margin-bottom:0;}

.axis-label-primary{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  fill:var(--ink);
}
.axis-label-primary.has-tooltip{text-underline-offset:4px;}
.axis-label-secondary{
  font-family:var(--font-body);
  font-style:italic;
  font-size:19px;
  fill:var(--muted-soft);
}

.diagram-label{
  font-family:var(--font-mono);
  font-size:17px;
  fill:var(--ink);
  paint-order:stroke;
  stroke:var(--paper);
  stroke-width:7px;
  stroke-linejoin:round;
  text-anchor:middle;
}
.diagram-label-legend{
  font-size:15px;
}

.legend-hit{
  cursor:pointer;
  transition:opacity .25s ease;
}
.legend-hit:focus-visible{
  outline:2px solid var(--maroon);
  outline-offset:3px;
}

.result-tag{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  margin:22px 0 0;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--ink);
  opacity:0;
  transition:opacity .5s ease;
}
.result-tag.visible{opacity:1;}
.result-tag .swatch{
  width:11px; height:11px;
  display:inline-block;
  flex:0 0 11px;
}

.result-type-block{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--rule);
  text-align:left;
}
.result-title{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:600;
  margin:0 0 16px;
}
.result-text{
  font-size:15.5px;
  color:#3a3a3a;
  margin:0 0 28px;
}

/* ---- about DV / about the data ---- */
.about-content{max-width:64ch;}
.about-content .about-heading{margin-top:0;}
.about-heading{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  margin:0 0 14px;
}
.about-subheading{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:24px 0 8px;
}
.about-text{
  font-size:14.5px;
  color:#3a3a3a;
  line-height:1.6;
  margin:0;
}
.about-text + .case-source-link{
  display:inline-block;
  margin-top:10px;
}
.case-source-link{
  font-size:13.5px;
  color:var(--maroon);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.case-source-link:hover{border-bottom-color:var(--maroon);}
.case-source-link:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

/* ---- a single risk marker, opened from the marker perspective ---- */
.marker-block-title{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  margin:0 0 12px;
}
.marker-dv-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--rule);
}
.marker-dv-row:last-child{border-bottom:none;}
.marker-dv-swatch{
  width:10px; height:10px;
  flex:0 0 10px;
}
.marker-dv-label{flex:1; font-size:14px; color:var(--ink);}
.marker-dv-count{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}

/* ================================================================
   STUDY STAGES — Understand / Learn / Extract
   ================================================================ */
.stage-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.stage-case-name{
  flex:1;
  min-width:0;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  margin:0;
}
.share-btn{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  padding:6px 12px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:normal;
  transition:border-color .15s ease, color .15s ease;
}
.share-btn:hover{border-color:var(--maroon); color:var(--maroon);}
.share-btn:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
/* ---- Bloom stepper: shows position and navigates ---- */
.bloom-steps{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:26px;
}
.bloom-step{
  flex:1;
  min-width:150px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  text-align:left;
  padding:11px 13px;
  background:#fff;
  border:1px solid var(--rule);
  border-top:3px solid var(--rule);
  cursor:pointer;
  font-family:var(--font-body);
  letter-spacing:normal;
  transition:border-color .15s ease, background .15s ease;
}
.bloom-step:hover{border-color:var(--slate); border-top-color:var(--slate);}
.bloom-step:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.bloom-step.done{border-top-color:var(--slate);}
.bloom-step.active{
  border-color:var(--maroon);
  border-top-color:var(--maroon);
  background:#fbf3f3;
}
.bloom-step-marker{
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:11px;
  background:var(--rule);
  color:var(--slate);
  transition:background .15s ease, color .15s ease;
}
.bloom-step.done .bloom-step-marker{background:var(--slate); color:#fff;}
.bloom-step.active .bloom-step-marker{background:var(--maroon); color:#fff;}
.bloom-step-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.bloom-step-name{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.bloom-step-bloom{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
.stage-hint{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 10px;
  max-width:62ch;
}
.stage-empty{
  font-size:14px;
  color:var(--muted);
  margin:0;
  max-width:60ch;
}

/* ---- Understand ---- */
/* DV type carries rationale and caveat prose, so it gets the wider column. */
.understand-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:18px;
  margin-top:18px;
}
@media (max-width:1150px){
  .understand-grid{grid-template-columns:1fr;}
}
.understand-panel{
  border:1px solid var(--rule);
  padding:18px 20px;
}
.understand-context{margin-top:0;}
.understand-panel-heading{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:0 0 12px;
}
.understand-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  margin-bottom:14px;
}
.understand-fact{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.understand-fact-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.understand-fact-value{
  font-size:14.5px;
  color:var(--ink);
  font-weight:500;
}
.understand-text{
  font-size:14px;
  color:#3a3a3a;
  line-height:1.6;
  margin:0;
}
.understand-subblock{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.understand-sources{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--rule);
}
.understand-source-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:10px;
}
.understand-source-list.collapsed{display:none;}
.understand-dv-title{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  margin:0 0 10px;
}
.understand-marker{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--rule);
  padding:10px 12px;
  margin-bottom:8px;
  cursor:pointer;
  font-family:var(--font-body);
  letter-spacing:normal;
  transition:border-color .15s ease, background .15s ease;
}
.understand-marker:last-child{margin-bottom:0;}
.understand-marker:hover{border-color:var(--slate); background:#fbf9f8;}
.understand-marker:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
.understand-marker.primary{border-color:var(--maroon);}
.understand-marker-code{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  color:var(--maroon);
  padding-top:2px;
}
.understand-marker-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.understand-marker-label{font-size:13.5px; font-weight:500; color:var(--ink);}
.understand-marker-def{font-size:12.5px; color:var(--muted); line-height:1.45;}

/* ---- Learn ---- */
.learn-progress{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:0 0 18px;
}
.learn-card{
  border:1px solid var(--rule);
  border-left:3px solid var(--rule);
  padding:18px 20px;
  margin-bottom:14px;
  transition:border-color .15s ease;
}
.learn-card.complete{border-left-color:var(--maroon);}
.learn-card-header{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:6px;
}
.learn-card-code{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--maroon);
}
.learn-card-label{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.learn-card-def{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 4px;
}
.learn-card-legend{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted-soft);
  margin:0 0 14px;
}
.learn-block{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--rule);
}
.learn-block-heading{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.learn-field{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-bottom:10px;
}
.learn-field:last-child{margin-bottom:0;}
.learn-field-label{
  flex:1 1 220px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:13.5px;
  color:#3a3a3a;
  line-height:1.45;
}
.learn-field-axis{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-soft);
}
.learn-scale{
  flex:0 0 auto;
  display:flex;
  gap:5px;
}
.learn-scale-btn{
  width:32px;
  height:32px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.learn-scale-btn:hover{border-color:var(--slate);}
.learn-scale-btn.selected{
  background:var(--maroon);
  border-color:var(--maroon);
  color:#fff;
}
.learn-scale-btn:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

/* ---- Assess: the action grid ---- */
.assess-grid-wrap{margin-bottom:30px;}
.assess-grid{
  width:100%;
  max-width:460px;
  height:auto;
  display:block;
  margin:4px 0 6px;
}
.assess-cell-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.assess-axes{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-width:460px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:16px;
}

.action-legend{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.action-legend-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 0;
  border-top:1px solid var(--rule);
}
.action-legend-row.empty{opacity:.45;}
.action-swatch{
  flex:0 0 10px;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:4px;
}
.action-legend-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.action-legend-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
}
.action-legend-count{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  color:var(--muted);
}
.action-legend-hint{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.45;
}
.action-legend-codes{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--slate);
}

.action-chip{
  margin-left:auto;
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  border-radius:999px;
  padding:2px 9px;
}

.assess-scoring{margin-bottom:26px;}
.assess-chart-wrap{margin-top:6px;}

/* ---- Commit: the user's own output ---- */
.commit-card{
  border:1px solid var(--rule);
  border-left:3px solid var(--rule);
  padding:16px 18px;
  margin-bottom:14px;
  transition:border-color .15s ease;
}
.commit-card.complete{border-left-color:var(--maroon);}
.commit-why{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.45;
  margin:0 0 12px;
}
.commit-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:12px;
}
.commit-field-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.commit-textarea,
.commit-input{
  width:100%;
  border:1px solid var(--rule);
  background:#fff;
  padding:9px 11px;
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--ink);
  resize:vertical;
}
.commit-textarea:focus-visible,
.commit-input:focus-visible{outline:2px solid var(--maroon); outline-offset:1px;}
.commit-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.commit-field-inline{flex:1 1 140px; margin-bottom:0;}

.commit-report-wrap{margin-top:28px;}
.commit-report{
  border:1px solid var(--rule);
  border-top:3px solid var(--maroon);
  padding:22px 24px;
  background:#fbfaf9;
}
.commit-report-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  margin:0 0 6px;
}
.commit-report-lead{
  font-size:13px;
  color:var(--muted);
  margin:0 0 18px;
}
/* The report restates the case, so it stands on its own when shared. */
.commit-report-section{
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--rule);
}
.commit-report-section-heading{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:0 0 12px;
}
.commit-report-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin-bottom:12px;
}
.commit-report-fact{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.commit-report-fact-value{
  font-size:13.5px;
  color:var(--ink);
  font-weight:500;
}
.commit-report-summary{
  font-size:13.5px;
  color:#3a3a3a;
  line-height:1.6;
  margin:0 0 12px;
}
.commit-report-dv{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
  margin-top:14px;
}
@media (max-width:1000px){
  .commit-report-dv{grid-template-columns:1fr;}
}
.commit-report-dv-title{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  margin:0 0 8px;
}
.commit-report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.commit-report-figure{background:#fff; border:1px solid var(--rule); padding:10px;}
.commit-report-caption{
  font-size:11.5px;
  color:var(--muted);
  margin:6px 0 0;
  text-align:center;
}
.mini-quadrant{width:100%; height:auto; display:block;}
.commit-report-figure .action-grid{width:100%; height:auto; display:block;}

.commit-marker-row{
  padding:11px 0;
  border-top:1px solid var(--rule);
}
.commit-marker-row:first-of-type{border-top:none;}
.commit-marker-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:7px;
}
.commit-marker-name{
  flex:1;
  min-width:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
}

.commit-report-entry{
  padding:14px 0;
  border-top:1px solid var(--rule);
}
.commit-report-marker{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 6px;
}
.commit-report-action{
  font-size:14px;
  color:#3a3a3a;
  line-height:1.55;
  margin:0;
  white-space:pre-wrap;
}
.commit-report-meta{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
  margin:8px 0 0;
}
.commit-parked{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--rule);
}
.commit-parked-heading{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.commit-parked-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  color:var(--slate);
  margin:0 0 6px;
}
.commit-parked-action{
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  color:var(--muted-soft);
}

/* ---- Extract ---- */
.extract-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
  margin-top:18px;
}
.extract-column{min-width:0;}
.extract-partial{
  font-size:13px;
  color:var(--maroon);
  margin:0 0 16px;
}
.extract-hint{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 16px;
}
.extract-lesson{
  border-top:1px solid var(--rule);
  padding:14px 0;
}
.extract-lesson-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:6px;
}
.extract-lesson-rank{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  color:#fff;
  background:var(--ink);
  border-radius:999px;
  padding:1px 8px;
}
.extract-lesson-label{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.extract-lesson-body{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 10px;
}
.extract-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin-bottom:10px;
}
.extract-metric{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.extract-metric-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.extract-metric-value{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink);
}
.extract-priority-track{
  height:6px;
  background:var(--rule);
  position:relative;
}
.extract-priority-fill{
  position:absolute;
  top:0; left:0; height:100%;
}

.extract-chart{
  width:100%;
  height:auto;
  display:block;
  margin-bottom:10px;
}
.extract-bubble-label{
  font-family:var(--font-mono);
  font-size:11px;
  fill:var(--ink);
}
.extract-axis-tick{
  font-family:var(--font-mono);
  font-size:11px;
  fill:var(--muted-soft);
}
.extract-axis-label{
  font-size:12px;
  color:var(--muted);
  margin:0 0 4px;
}

/* ---- relevance gauge (Extract stage) ---- */
.relevance-gauge-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:24px;
}
.relevance-gauge{
  width:100%;
  max-width:260px;
  height:auto;
  display:block;
}
.relevance-gauge-label{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  color:var(--ink);
  margin:6px 0 0;
}

/* ---- footer ---- */
footer.footnote{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.footnote-text{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-soft);
  letter-spacing:.03em;
}
.footer-logos{
  display:flex;
  align-items:center;
  gap:30px;
}
.partner-logo{
  height:40px;
  width:auto;
  display:block;
  object-fit:contain;
}
.partner-logo-wide{height:34px;}

@media (max-width:860px){
  /* One column on small screens, so splitting or collapsing would only
     cramp things. Every layout mode falls back to the same stack. */
  .layout, .layout.browsing, .layout.studying{grid-template-columns:1fr; gap:24px;}
  .quiz-panel.collapsed .card{display:block;}
  .panel-rail, .panel-collapse{display:none !important;}
  .card{padding:28px;}
  .page{padding:40px 20px 32px;}
  .hero{flex-wrap:wrap;}
  .hero p.subtitle{font-size:13.5px;}
  .home-link{font-size:15px;}
  .bloom-step{min-width:100%;}
  footer.footnote{flex-direction:column; align-items:flex-start;}
  .footer-logos{gap:20px; flex-wrap:wrap;}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
}

/* ---- print: the report is the document ----
   Downloading is just printing, so everything that is app chrome or
   an input control is stripped and only the assembled report remains. */
@media print{
  .hero,
  .quiz-panel,
  .bloom-steps,
  .stage-head,
  .stage-hint,
  .learn-progress,
  .commit-card,
  .report-print-btn,
  footer.footnote{
    display:none !important;
  }

  .layout, .layout.browsing, .layout.studying{display:block !important;}
  .page{max-width:none; padding:0;}
  .card{border:none; padding:0;}
  .card::before{display:none;}

  .commit-report-wrap{margin-top:0;}
  .commit-report{
    border:none;
    background:#fff;
    padding:0;
  }
  /* Keep a section from being split across two sheets. */
  .commit-report-section,
  .commit-report-entry,
  .commit-marker-row,
  .commit-report-figure{
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .commit-report-dv{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}
  .case-source-link, a{color:inherit; text-decoration:none;}
}