[hidden] {
  display:none!important
}
:root {
  --paper:#f7f5f0;
  --card:#fffefa;
  --ink:#292638;
  --muted:#706d7a;
  --purple:#70548c;
  --purple-dark:#51396d;
  --lavender:#eee7f4;
  --coral:#c97552;
  --line:#e4e0d8;
  --green:#53796c;
  --sidebar:#2b2637
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button,select {
  font:inherit
}
button,a,select,summary {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--coral);
  outline-offset:4px
}
button:disabled {
  cursor:default
}
.skip {
  position:fixed;
  top:-80px;
  left:20px;
  padding:10px;
  background:white;
  z-index:20
}
.skip:focus {
  top:10px
}
.sidebar {
  width:235px;
  position:fixed;
  inset:0 auto 0 0;
  background:var(--sidebar);
  color:#eee9f5;
  display:flex;
  flex-direction:column;
  padding:30px 22px;
  z-index:5
}
.identity {
  display:flex;
  gap:11px;
  align-items:center;
  font-size:13px;
  font-weight:600;
  line-height:1.4
}
.identity small {
  display:block;
  font-size:11px;
  font-weight:400;
  color:#b7adbf;
  margin-top:3px
}
.monogram {
  font:italic 29px Georgia,serif;
  color:#e5c6b5;
  border:1px solid #5f5069;
  border-radius:50%;
  width:43px;
  height:43px;
  text-align:center;
  line-height:36px
}
.project-name {
  margin:47px 6px 32px
}
.eyebrow {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.7px;
  font-weight:650
}
.project-name .eyebrow {
  color:#b8a6c8
}
.project-name strong {
  display:block;
  font:38px/1.06 Georgia,serif;
  letter-spacing:-1px;
  margin-top:14px
}
.project-name p {
  color:#b9b0c3;
  font-size:12px;
  line-height:1.7;
  margin-top:16px
}
nav {
  display:flex;
  flex-direction:column;
  gap:6px
}
nav a {
  padding:10px 11px;
  color:#c9c1d2;
  border-radius:7px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:12px
}
nav a>span {
  font-size:19px;
  width:20px;
  text-align:center;
  font-weight:400;
  color:#aa96be
}
nav a:hover {
  background:#393043
}
nav a.active {
  background:#f0eaf5;
  color:#3a2c4c;
  font-weight:650
}
nav a.active>span {
  color:#70548c
}
.sidebar-bottom {
  margin-top:auto;
  padding:30px 5px 0;
  font-size:10px;
  color:#b6aabd
}
.sidebar-bottom a {
  display:block;
  margin-top:11px;
  color:#e0d5e8
}
.small-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c3987d;
  margin-right:5px
}
.workspace {
  margin-left:235px
}
.topbar {
  height:62px;
  border-bottom:1px solid var(--line);
  padding:0 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  gap:15px
}
.topbar>span:first-child {
  font-weight:600;
  color:#595462
}
.top-separator {
  margin:0 13px;
  color:#b7aebf
}
.top-meta {
  font-size:10px;
  letter-spacing:.3px
}
main {
  max-width:1430px;
  margin:auto;
  padding:34px 42px 20px
}
.page-intro {
  position:relative;
  margin-bottom:25px;
  padding-right:200px
}
.source-badge {
  position:absolute;
  right:0;
  top:0;
  font-size:9px;
  letter-spacing:1px;
  font-weight:700;
  background:var(--lavender);
  color:var(--purple-dark);
  padding:7px 10px;
  border:1px solid #ddd2e7;
  border-radius:4px
}
.source-badge.real {
  background:#e6eee8;
  color:#426151;
  border-color:#d1dfd4
}
.source-badge.mixed {
  background:#eee9df;
  border-color:#e0d5c0;
  color:#776144
}
#chapter {
  display:block;
  color:var(--purple);
  margin-bottom:9px
}
h1 {
  font:normal 39px/1.17 Georgia,serif;
  letter-spacing:-1px;
  margin:0 0 12px;
  max-width:720px
}
.page-description {
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}
.filterbar {
  border:1px solid var(--line);
  border-radius:8px;
  background:#fdfcf8;
  display:flex;
  gap:23px;
  align-items:center;
  padding:12px 17px;
  margin-bottom:22px
}
.filterbar label {
  display:block;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:8px;
  color:var(--muted);
  font-weight:700;
  margin-bottom:3px
}
select {
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:12px;
  padding:2px 22px 2px 0;
  max-width:190px;
  cursor:pointer
}
.filter-end {
  margin-left:auto;
  text-align:right;
  font-size:10px;
  color:var(--muted)
}
.text-button {
  border:0;
  background:none;
  color:var(--purple-dark);
  font-size:10px;
  padding:3px 0;
  display:block;
  margin-left:auto;
  text-decoration:underline;
  text-underline-offset:3px
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin-bottom:22px
}
.metric {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 17px 14px;
  position:relative;
  min-width:0
}
.metric .label {
  font-size:11px;
  color:var(--muted);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:7px
}
.metric strong {
  display:block;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  font-size:31px;
  letter-spacing:-1px;
  margin:9px 0 7px;
  line-height:1.1
}
.metric .context {
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
  min-height:31px
}
.metric.accent {
  border-top:3px solid var(--purple);
  padding-top:14px
}
.metric .label button {
  border:1px solid #d2cadb;
  background:none;
  color:var(--purple);
  border-radius:50%;
  font:10px Georgia;
  width:15px;
  height:15px;
  padding:0;
  line-height:12px
}
.metric-note {
  background:var(--lavender);
  padding:10px 14px;
  font-size:11px;
  border-radius:6px;
  color:var(--purple-dark);
  margin:-8px 0 19px
}
.panel {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:22px 23px;
  margin-bottom:20px;
  min-width:0
}
.panel-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:15px
}
.panel h2 {
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  margin:0 0 5px
}
.panel .sub,.sub {
  font-size:11px;
  color:var(--muted);
  margin:0;
  line-height:1.7
}
.panel .eyebrow {
  font-size:8px;
  letter-spacing:1.3px;
  color:var(--muted)
}
.legend {
  display:flex;
  gap:16px;
  font-size:10px;
  color:var(--muted);
  flex-wrap:wrap;
  align-items:center
}
.legend span {
  display:inline-flex;
  align-items:center;
  gap:6px
}
.legend i {
  height:3px;
  width:15px;
  background:var(--purple);
  display:inline-block
}
.legend i.coral {
  background:var(--coral)
}
.chart {
  width:100%;
  height:auto;
  display:block;
  overflow:visible
}
.chart text {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:10px;
  fill:#817b8b
}
.chart .grid {
  stroke:#ece8e1;
  stroke-width:1
}
.chart .axis-label {
  font-size:10px
}
.chart .series {
  fill:none;
  stroke:var(--purple);
  stroke-width:2.5;
  stroke-linejoin:round
}
.chart .series.coral {
  stroke:var(--coral)
}
.chart-note {
  font-size:10px;
  color:var(--muted);
  margin:8px 0 0
}
.twocol {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:20px
}
.twocol.equal {
  grid-template-columns:1fr 1fr
}
.twocol>.panel {
  margin:0 0 20px
}
.insight {
  background:#efe9f3;
  border:1px solid #ded1e7;
  border-radius:8px;
  padding:22px 23px;
  margin-bottom:20px
}
.insight h2 {
  font:normal 23px/1.25 Georgia,serif;
  margin:9px 0 13px
}
.insight p {
  font-size:12px;
  line-height:1.8;
  color:#61546d;
  margin:8px 0
}
.insight a,.inline-link {
  font-size:11px;
  color:var(--purple-dark);
  text-decoration:underline;
  text-underline-offset:3px
}
.insight .eyebrow {
  color:var(--purple)
}
.mini-funnel {
  display:grid;
  gap:13px;
  margin:20px 0
}
.mini-stage {
  display:grid;
  grid-template-columns:110px 1fr 58px;
  gap:12px;
  align-items:center;
  font-size:11px
}
.bar-track {
  background:#f0ebf3;
  height:13px;
  border-radius:3px;
  overflow:hidden
}
.bar-track>div {
  height:100%;
  background:var(--purple);
  border-radius:3px;
  min-width:2px
}
.mini-stage:nth-child(2) .bar-track>div {
  background:#9279a7
}
.mini-stage:nth-child(3) .bar-track>div {
  background:var(--coral)
}
.mini-stage strong {
  text-align:right;
  font-size:11px;
  font-variant-numeric:tabular-nums
}
.chapter-line {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin:8px 0 13px
}
.chapter-line h2 {
  font:normal 23px Georgia,serif;
  margin:0
}
.analysis-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-bottom:25px
}
.analysis-item {
  border-top:1px solid #d7cbdc;
  padding-top:14px
}
.analysis-item .number {
  font:italic 18px Georgia;
  color:var(--coral)
}
.analysis-item h3 {
  font-size:12px;
  margin:7px 0 8px;
  font-weight:650
}
.analysis-item p {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  margin:0
}
.page-footer {
  border-top:1px solid var(--line);
  margin-top:18px;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  color:var(--muted)
}
.page-footer a {
  color:var(--purple)
}
.funnel-rows {
  margin:25px 0 10px
}
.funnel-row {
  display:grid;
  grid-template-columns:155px 1fr 93px;
  align-items:center;
  gap:18px;
  margin:15px 0
}
.funnel-row .stage-label {
  font-size:12px
}
.funnel-row .stage-label small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px
}
.funnel-fill {
  height:54px;
  background:#f0ebf3;
  position:relative;
  border-radius:5px;
  overflow:hidden
}
.funnel-fill>span {
  position:absolute;
  inset:0 auto 0 0;
  background:var(--purple);
  border-radius:5px
}
.funnel-row:nth-child(2) .funnel-fill>span {
  background:#9b82af
}
.funnel-row:nth-child(3) .funnel-fill>span {
  background:var(--coral)
}
.funnel-total {
  text-align:right
}
.funnel-total strong {
  font-size:25px;
  font-weight:500;
  font-variant-numeric:tabular-nums
}
.funnel-total small {
  display:block;
  font-size:10px;
  color:var(--muted)
}
.drop-label {
  font-size:10px;
  color:var(--muted);
  padding-left:173px;
  margin:0 0 3px
}
.table-wrap {
  overflow:auto
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  font-variant-numeric:tabular-nums
}
th {
  text-align:left;
  font-weight:600;
  color:var(--muted);
  font-size:10px;
  padding:10px 9px;
  border-bottom:1px solid var(--line);
  white-space:nowrap
}
td {
  padding:11px 9px;
  border-bottom:1px solid #efebe5
}
tbody tr:last-child td {
  border-bottom:0
}
.numeric {
  text-align:right
}
.small-pill {
  display:inline-block;
  background:var(--lavender);
  color:var(--purple-dark);
  font-size:9px;
  padding:4px 7px;
  border-radius:3px
}
.cohort-table {
  min-width:680px;
  border-collapse:separate;
  border-spacing:4px
}
.cohort-table th {
  border:0;
  text-align:center;
  padding:6px 4px
}
.cohort-table th:first-child {
  text-align:left;
  min-width:110px
}
.cohort-table th:nth-child(2) {
  min-width:50px
}
.cohort-table td {
  padding:0;
  border:0;
  text-align:center;
  height:35px
}
.cohort-table td.row-label {
  text-align:left;
  padding-left:4px;
  font-size:10px;
  color:var(--muted);
  white-space:nowrap
}
.cohort-table .cell {
  width:100%;
  min-width:43px;
  border:0;
  border-radius:3px;
  font-size:10px;
  height:33px;
  font-variant-numeric:tabular-nums
}
.cohort-table .cell.future {
  background:#f1efec;
  color:#aca7af;
  cursor:default
}
.cohort-table .cell.selected {
  outline:2px solid var(--coral);
  outline-offset:1px
}
.cohort-key {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:13px
}
.scale {
  display:inline-flex;
  gap:4px;
  align-items:center;
  font-size:9px;
  color:var(--muted)
}
.scale i {
  width:15px;
  height:12px;
  border-radius:2px;
  display:inline-block
}
.cohort-detail {
  font-size:11px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#faf8f4;
  margin-top:16px;
  color:var(--muted);
  min-height:43px
}
.scenario-toggle {
  display:flex;
  gap:3px;
  background:#eae4ee;
  padding:4px;
  border-radius:6px;
  width:fit-content;
  margin:0 0 20px
}
.scenario-toggle button {
  background:none;
  border:0;
  border-radius:4px;
  padding:8px 15px;
  font-size:11px;
  color:#776a81
}
.scenario-toggle button.active {
  background:var(--card);
  color:var(--purple-dark);
  box-shadow:0 1px 4px #34204212;
  font-weight:600
}
.decision {
  padding:16px 20px;
  border-left:3px solid var(--green);
  background:#eaf0e9;
  border-radius:0 6px 6px 0;
  font-size:12px;
  margin-bottom:20px
}
.decision.inconclusive {
  border-color:#b8874b;
  background:#f4eedf
}
.decision strong {
  display:block;
  margin-bottom:5px
}
.decision p {
  margin:0;
  color:#686c61;
  font-size:11px
}
.criteria-list {
  list-style:none;
  padding:0;
  margin:18px 0 0
}
.criteria-list li {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:11px
}
.criteria-list li:last-child {
  border:0
}
.pass {
  color:var(--green);
  font-weight:600
}
.review {
  color:#a57333;
  font-weight:600
}
.callout {
  background:#f1ece4;
  border-radius:6px;
  padding:14px 17px;
  font-size:11px;
  color:#766957;
  margin:15px 0;
  line-height:1.8
}
.catalogue-filters {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px;
  font-size:11px;
  color:var(--muted)
}
.catalogue-filters select {
  border:1px solid var(--line);
  border-radius:5px;
  padding:7px 25px 7px 10px;
  background:var(--card)
}
.empty-state {
  padding:40px 30px;
  border:1px dashed #cfc5d5;
  border-radius:8px;
  background:#faf8fc;
  max-width:800px
}
.empty-state h2 {
  font:25px Georgia;
  margin:0 0 15px
}
.empty-state p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}
code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  background:#eee8f2;
  padding:2px 5px;
  border-radius:3px
}
pre {
  padding:20px;
  background:#2e2839;
  color:#eee6f5;
  border-radius:6px;
  overflow:auto;
  font-size:11px;
  line-height:1.8;
  max-height:440px
}
pre code {
  background:none;
  color:inherit;
  padding:0;
  font-size:inherit
}
details {
  border-top:1px solid var(--line);
  padding:14px 0
}
summary {
  cursor:pointer;
  font-weight:600;
  font-size:12px
}
details p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted)
}
.method-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.method-grid>.panel {
  margin-bottom:0
}
.metric-tree {
  padding:20px 0 12px;
  display:flex;
  gap:10px;
  align-items:stretch
}
.metric-tree>div {
  border:1px solid #dcd1e3;
  border-radius:6px;
  padding:14px;
  flex:1;
  background:#f7f3fa;
  font-size:11px
}
.metric-tree strong {
  display:block;
  font-size:12px;
  margin-bottom:6px
}
.metric-tree small {
  color:var(--muted);
  line-height:1.7;
  display:block
}
.readable {
  max-width:850px
}
.readable p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted)
}
.loading {
  margin-top:40px
}
.error {
  color:#944b35
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
#metric-explainer {
  margin-top:-7px;
  margin-bottom:18px;
  padding:11px 14px;
  background:var(--lavender);
  border-radius:6px;
  font-size:11px;
  color:var(--purple-dark)
}
@media(min-width:1600px) {
  main {
    padding-top:40px
  }
  .panel {
    padding:25px 28px
  }
  h1 {
    font-size:44px
  }
  .page-intro {
    margin-bottom:30px
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:205px;
    padding:27px 16px
  }
  .workspace {
    margin-left:205px
  }
  .topbar {
    padding:0 25px
  }
  main {
    padding:28px 25px 20px
  }
  .page-intro {
    padding-right:0;
    padding-top:30px
  }
  .source-badge {
    left:0;
    right:auto;
    top:-3px;
    font-size:8px;
    padding:4px 8px
  }
  h1 {
    font-size:35px
  }
  .filterbar {
    gap:14px
  }
  .filter-end>span {
    display:none
  }
  .metric {
    padding:15px 12px
  }
  .metric strong {
    font-size:28px
  }
  .metric .label {
    font-size:10px
  }
  .top-meta {
    display:none
  }
}
@media(max-width:900px) {
  .sidebar {
    width:176px;
    padding:24px 12px
  }
  .workspace {
    margin-left:176px
  }
  .identity {
    font-size:11px;
    gap:8px
  }
  .monogram {
    width:35px;
    height:35px;
    font-size:25px;
    line-height:30px
  }
  .project-name {
    margin:33px 7px 25px
  }
  .project-name strong {
    font-size:32px
  }
  nav a {
    padding:9px 8px;
    font-size:11px;
    gap:7px
  }
  nav a>span {
    font-size:17px
  }
  .filterbar {
    flex-wrap:wrap;
    gap:10px 18px
  }
  .filter-end {
    margin-left:auto
  }
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .twocol,.twocol.equal,.method-grid {
    grid-template-columns:1fr
  }
  .analysis-list {
    gap:14px
  }
  .metric-tree {
    flex-wrap:wrap
  }
  .metric-tree>div {
    min-width:150px
  }
  .panel-heading {
    gap:10px;
    flex-wrap:wrap
  }
}
@media(max-width:620px) {
  .sidebar {
    position:static;
    width:100%;
    padding:17px 18px 0;
    display:block
  }
  .identity {
    font-size:12px
  }
  .identity small {
    display:none
  }
  .monogram {
    width:33px;
    height:33px;
    font-size:23px;
    line-height:28px
  }
  .project-name,.sidebar-bottom {
    display:none
  }
  nav {
    flex-direction:row;
    overflow-x:auto;
    gap:2px;
    margin-top:17px;
    padding-bottom:12px
  }
  nav a {
    white-space:nowrap;
    font-size:10px;
    padding:7px 10px
  }
  nav a>span {
    display:none
  }
  .workspace {
    margin-left:0
  }
  .topbar {
    height:43px;
    padding:0 19px;
    font-size:9px
  }
  main {
    padding:25px 18px 20px
  }
  .page-intro {
    padding-top:26px
  }
  h1 {
    font-size:31px;
    letter-spacing:-.7px
  }
  .page-description {
    font-size:12px
  }
  .metrics {
    gap:9px
  }
  .metric {
    padding:13px 12px
  }
  .metric strong {
    font-size:28px
  }
  .metric .context {
    font-size:9px
  }
  .filterbar {
    padding:11px 12px;
    gap:10px 15px
  }
  .filterbar>div {
    min-width:110px
  }
  select {
    font-size:11px;
    max-width:140px
  }
  .filterbar .filter-end {
    min-width:0;
    margin-left:auto
  }
  .filter-end button {
    font-size:9px
  }
  .panel,.insight {
    padding:18px 16px
  }
  .analysis-list {
    grid-template-columns:1fr;
    gap:15px
  }
  .analysis-item {
    display:grid;
    grid-template-columns:25px 1fr;
    column-gap:8px
  }
  .analysis-item p {
    grid-column:2
  }
  .analysis-item h3 {
    margin-top:0
  }
  .chapter-line h2 {
    font-size:22px
  }
  .funnel-row {
    grid-template-columns:95px 1fr 65px;
    gap:10px
  }
  .funnel-row .stage-label {
    font-size:10px
  }
  .funnel-total strong {
    font-size:21px
  }
  .funnel-fill {
    height:47px
  }
  .drop-label {
    padding-left:105px;
    font-size:9px
  }
  .funnel-row .stage-label small {
    font-size:9px
  }
  .mini-stage {
    grid-template-columns:90px 1fr 45px;
    gap:9px;
    font-size:10px
  }
  .page-footer {
    font-size:8px;
    flex-wrap:wrap;
    gap:8px
  }
  .scenario-toggle button {
    font-size:10px;
    padding:8px 10px
  }
  .metric-tree {
    display:block
  }
  .metric-tree>div {
    margin-bottom:10px
  }
  .chart text {
    font-size:11px
  }
  .cohort-key {
    flex-wrap:wrap
  }
  .readable p {
    font-size:12px
  }
}
@media(prefers-reduced-motion:no-preference) {
  .metric,.panel,.insight {
    animation:arrive .25s ease-out
  }
  @keyframes arrive {
    from {
      opacity:.5;
      transform:translateY(4px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
}
@media print {
  .sidebar,.topbar,.filterbar,.page-footer {
    display:none
  }
  .workspace {
    margin:0
  }
  main {
    padding:10px
  }
  .panel,.insight,.metric {
    break-inside:avoid
  }
  body {
    background:white
  }
  .page-intro {
    padding-right:0
  }
}

/* Knitting palette and compact product-report layout. */
:root {
  --paper: #f5f1e8;
  --card: #fffdf7;
  --ink: #303c32;
  --muted: #737669;
  --purple: #4d7059;
  --purple-dark: #30503d;
  --lavender: #e8eee3;
  --coral: #b56f4f;
  --line: #e2ddcf;
  --green: #4d7059;
  --sidebar: #293e35;
}
.sidebar { background: var(--sidebar); }
.project-name { margin: 23px 6px 26px; }
.project-name .eyebrow { color: #c5cdb7; font-size: 8px; }
.project-name strong { font-size: 43px; color: #f2e8d5; margin-top: 10px; }
.project-name p { font-size: 10px; color: #c7ceb9; line-height: 1.8; }
.yarn-mark { display: block; width: 140px; height: 96px; margin: -2px 0 15px; }
nav a { color: #d2d8c7; }
nav a>span { color: #aab9a0; }
nav a:hover { background: #364e40; }
nav a.active { background: #edeedc; color: #30503d; }
nav a.active>span { color: #4d7059; }
.sidebar-bottom { color: #b9c5af; }
.sidebar-bottom a { color: #e1e6d2; }
.monogram { color: #e3c4a4; border-color: #6c7a62; }
.page-intro { padding-bottom: 24px; margin-bottom: 20px; }
.page-intro::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  opacity: .8;
  background: url('needle.svg') no-repeat center / 100% 14px;
}
h1 { font-size: 37px; letter-spacing: -.7px; }
.primary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { border-radius: 5px; }
.primary-metrics .metric { padding: 19px 19px 15px; }
.primary-metrics .metric.accent { padding-top: 17px; }
.primary-metrics .metric strong { font-size: 35px; }
.primary-metrics .metric .label { font-size: 11px; }
.source-badge { border-color: #ccd8c4; }
.panel, .filterbar { border-radius: 5px; }
.insight { background: #e9eddc; border-color: #d7decb; }
.insight p { color: #5f6e58; }
.insight h2 { font-size: 22px; }
.bar-track { background: #e9ecdf; }
.mini-stage:nth-child(2) .bar-track>div { background: #90a183; }
.funnel-fill { background: #e9ecdf; }
.funnel-row:nth-child(2) .funnel-fill>span { background: #90a183; }
.metric-note, #metric-explainer { background: #e8eee3; color: #36513f; }
.scenario-toggle { background: #e4e9dc; }
.scenario-toggle button { color: #67715e; }
.report-summary { border-left: 3px solid var(--coral); padding: 2px 0 3px 21px; margin: 3px 0 28px; max-width: 950px; }
.report-summary .eyebrow { color: var(--coral); font-size: 9px; }
.report-summary h2 { font-size: 15px; font-weight: 600; margin: 8px 0 10px; line-height: 1.5; }
.report-summary p { font-size: 12px; color: #66705e; line-height: 1.85; margin: 7px 0; }
.support-table td { padding: 9px 0; font-size: 11px; }
.support-table td.numeric { font-weight: 600; }
.metric-tree>div { border-color: #d5ddcb; background: #f1f4e9; }
@media(max-width:900px) {
  .project-name strong { font-size: 35px; }
  .yarn-mark { width: 115px; height: 78px; }
  .project-name p { max-width: 130px; }
  .primary-metrics .metric { padding: 15px 12px; }
  .primary-metrics .metric strong { font-size: 28px; }
}
@media(max-width:620px) {
  .sidebar .identity::after { content: 'Count Your Stitches'; margin-left: auto; color: #e7d3b5; font: 24px Georgia, serif; }
  .primary-metrics { grid-template-columns: 1fr; }
  .primary-metrics .metric { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
  .primary-metrics .metric .label { grid-column: 1; grid-row: 1; }
  .primary-metrics .metric strong { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .primary-metrics .metric .context { grid-column: 1; min-height: 0; }
  h1 { font-size: 31px; }
  .report-summary { padding-left: 15px; }
}
/* Reports update immediately when a filter changes. */
.metric, .panel, .insight { animation: none; }

/* Visual-first metric views. */
.chart .funnel-stage-label { font-size: 14px; fill: var(--ink); font-weight: 500; }
.chart .funnel-stage-count { font-size: 23px; fill: var(--ink); font-weight: 600; }
.chart .funnel-stage-rate { font-size: 11px; fill: var(--muted); }
.chart .bar-value { font-size: 13px; fill: var(--ink); font-weight: 600; }
.start-path { padding: 32px 0 22px; }
.split-bar { display:flex; height:45px; border-radius:4px; overflow:hidden; background:var(--line); }
.path-labels { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:23px; }
.path-labels>div { position:relative; padding-left:16px; }
.path-labels i { position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:1px; }
.path-labels strong { display:block; font-size:27px; font-weight:500; line-height:1.3; }
.path-labels span { display:block; font-size:11px; margin-top:6px; }
.path-labels small { color:var(--muted); font-size:10px; }
.supporting-details { margin:0 0 25px; padding:9px 0; }
.supporting-details summary { font-size:11px; color:var(--muted); font-weight:500; }
.supporting-inline { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:17px 0 8px; font-size:10px; color:var(--muted); }
.supporting-inline strong { display:block; font-size:19px; color:var(--ink); font-weight:500; }
.supporting-inline small { display:block; font-size:9px; }
@media(max-width:620px) {
  .supporting-inline { grid-template-columns:1fr 1fr; }
  .chart .funnel-stage-label { font-size:16px; }
  .chart .funnel-stage-rate { font-size:13px; }
}

.project-name strong { font-size: 33px; line-height: 1.13; }
@media(max-width:900px) { .project-name strong { font-size: 27px; } }
@media(max-width:620px) { .sidebar .identity::after { font-size: 20px; max-width: 145px; line-height: 1.1; text-align: right; } }

.identity { min-height: 43px; }
.identity small { display: block; }
@media(max-width:620px) { .identity { min-height: 35px; } .identity small { font-size: 10px; } }

/* Secondary analysis and decision tools stay off the headline metric row. */
.comparison-list { margin: 15px 0; font-size: 11px; }
.comparison-list>div { display:flex; justify-content:space-between; align-items:baseline; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); }
.comparison-list dt { color:var(--muted); }
.comparison-list dd { margin:0; text-align:right; font-size:13px; font-weight:600; }
.attention-control, .decision-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:12px 0 20px; }
.attention-control label, .decision-controls label { font-size:10px; color:var(--muted); }
.attention-control select, .decision-controls select { border:1px solid var(--line); padding:7px 25px 7px 9px; background:var(--paper); border-radius:4px; max-width:240px; font-size:11px; }
.decision-controls label { display:block; margin-bottom:5px; }
.guardrail-status { padding:10px 13px; border-radius:4px; background:var(--paper); font-size:12px; font-weight:600; }
.attention-grid { margin-bottom:0; }
.secondary-action { display:inline-block; margin-left:20px; }
.criteria-list strong { text-align:right; font-size:10px; font-weight:500; max-width:60%; }
@media(max-height:800px) and (min-width:621px) { .yarn-mark { height:60px; margin-bottom:10px; } .project-name { margin-top:15px; margin-bottom:15px; } .sidebar-bottom { padding-top:15px; } nav { gap:3px; } }
@media(max-width:620px) { .secondary-action { margin:10px 0 0; display:block; } .attention-control { gap:8px; } .comparison-list dd { font-size:12px; } }