/* ============================================================================
   /four-doors - framework + interactive door×industry matrix.
   Data-driven: weight_levels + industries[].weights in index-2026.json.
   ============================================================================ */

/* ---- definitions plate ---------------------------------------------------- */
.defs { background: var(--color-surface-default); padding-block: var(--bdri-space-8); }
@media (min-width: 760px) { .defs { padding-block: var(--bdri-space-9); } }
.def-plate { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bdri-space-4); }
.def { display: block; }
.def__link {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bdri-space-4);
  align-items: start; height: 100%; background: var(--color-surface-subtle);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card); padding: var(--bdri-space-5);
  text-decoration: none; color: var(--color-text-default);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out;
}
/* gold = "act here": clickable definition card gets a gold top edge + border + lift. */
.def__link:hover { transform: translateY(-2px); border-color: var(--bdri-color-gold); box-shadow: inset 0 var(--bw-accent) 0 0 var(--bdri-color-gold), var(--bdri-shadow-card); }
.def__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-accent-graphic); color: var(--color-text-default); font-family: var(--bdri-font-mono); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold); }
.def__name { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); margin-bottom: var(--bdri-space-2); }
.def__text { color: var(--color-text-subtle); line-height: var(--bdri-lh-loose); max-width: 52ch; }
.def__cta { display: inline-block; margin-top: var(--bdri-space-3); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold); color: var(--color-text-link); }
.def__link:hover .def__cta { text-decoration: underline; }
@media (min-width: 760px) { .def-plate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bdri-space-5); } .def__link { padding: var(--bdri-space-6); } }

/* ---- the principle (dark) ------------------------------------------------- */
.principle {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 8% 100%, color-mix(in srgb, var(--color-accent-primary) 16%, transparent) 0%, transparent 60%),
    var(--color-surface-default);
  border-block: var(--bw-accent) solid var(--color-accent-primary);
}
.principle__inner { max-width: var(--measure); padding-block: var(--bdri-space-8); }
.principle__title { font-family: var(--bdri-text-h2-family); font-size: var(--bdri-text-h2-size); font-weight: var(--bdri-text-h2-weight); line-height: var(--bdri-text-h2-lh); letter-spacing: var(--bdri-text-h2-tracking); margin-block: var(--bdri-space-3) var(--bdri-space-4); text-wrap: balance; }
.principle__body { color: var(--color-text-subtle); font-size: var(--bdri-size-body-lg); line-height: var(--bdri-lh-loose); }
@media (min-width: 760px) { .principle__inner { padding-block: var(--bdri-space-9); } }

/* ---- matrix --------------------------------------------------------------- */
.matrix { background: var(--color-surface-subtle); border-block: var(--bw-divider) solid var(--color-border-subtle); padding-block: var(--bdri-space-8); }
@media (min-width: 760px) { .matrix { padding-block: var(--bdri-space-9); } }

.matrix-picker { display: flex; flex-wrap: wrap; gap: var(--bdri-space-2); margin-bottom: var(--bdri-space-6); }
.matrix-picker__btn {
  min-height: 44px; padding-inline: var(--bdri-space-4);
  border: var(--bw-divider) solid var(--color-border-default);
  border-radius: var(--radius-pill); background: var(--color-surface-default);
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold);
  color: var(--color-text-subtle); cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
/* gold = "act here": picker pills get a gold border + subtle gold wash on hover.
   The active pill keeps the solid aquamarine selection state. */
.matrix-picker__btn:hover:not(.is-active) { border-color: var(--bdri-color-gold); color: var(--color-text-default); background: color-mix(in srgb, var(--bdri-color-gold) 12%, var(--color-surface-default)); }
.matrix-picker__btn.is-active { background: var(--color-accent-primary); color: var(--color-text-inverted); border-color: var(--color-accent-primary); }

.matrix-doors { background: var(--color-surface-default); border: var(--bw-divider) solid var(--color-border-subtle); border-radius: var(--radius-modal); padding: var(--bdri-space-6); }
.matrix-doors__scope { font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--bdri-space-5); }
.matrix-doors__scope span { color: var(--color-accent-primary); font-weight: var(--bdri-weight-semibold); }
.matrix-door-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bdri-space-4); }
.mdoor {
  display: grid; gap: var(--bdri-space-2); align-content: start;
  background: var(--color-surface-subtle);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card); padding: var(--bdri-space-5);
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
/* IMPORTANCE ramp (NOT the door-state vocabulary): on this matrix the weight is
   how much a door MATTERS. Required = gold (the strongest signal), Recommended =
   aquamarine, Optional = steel. Gold stays a fill/border accent here, never text
   (Required text below uses ink). The most important door reads strongest. */
.mdoor[data-level='required']    { border-left: var(--bw-accent) solid var(--bdri-color-gold); background: color-mix(in srgb, var(--bdri-color-gold) 12%, var(--color-surface-subtle)); }
.mdoor[data-level='recommended'] { border-left: var(--bw-accent) solid var(--bdri-color-aquamarine); }
.mdoor[data-level='optional']    { border-left: var(--bw-accent) solid var(--bdri-color-steel); }
.mdoor__name { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-body-lg); font-weight: var(--bdri-weight-semibold); }
.mdoor__level { display: inline-flex; align-items: center; gap: var(--bdri-space-2); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold); color: var(--color-text-default); }
.mdoor__why { font-size: var(--bdri-size-small); color: var(--color-text-subtle); line-height: var(--bdri-lh-relaxed); }
@media (min-width: 720px) { .matrix-door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .matrix-door-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.matrix-key { display: flex; flex-wrap: wrap; gap: var(--bdri-space-3) var(--bdri-space-5); margin-top: var(--bdri-space-5); padding: var(--bdri-space-4) var(--bdri-space-5); background: var(--color-surface-default); border: var(--bw-divider) solid var(--color-border-subtle); border-radius: var(--radius-card); font-size: var(--bdri-size-small); color: var(--color-text-subtle); }
.matrix-key span { display: inline-flex; align-items: center; gap: var(--bdri-space-2); }

/* ---- static crawlable matrix table ---------------------------------------- */
.matrix-table-wrap { margin-top: var(--bdri-space-6); }
.matrix-table-summary {
  cursor: pointer; font-family: var(--bdri-font-body); font-weight: var(--bdri-weight-semibold);
  color: var(--color-text-default); padding: var(--bdri-space-3) 0; list-style-position: inside;
}
.matrix-table-summary:hover { color: var(--color-accent-primary); }
.matrix-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--bdri-space-3); }
.matrix-table {
  width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0;
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle); border-radius: var(--radius-card); overflow: hidden;
}
.matrix-table th[scope='col'] {
  text-align: left; padding: var(--bdri-space-4);
  font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption);
  font-weight: var(--bdri-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: var(--bw-input-focus) solid var(--color-border-subtle);
}
.matrix-table th[scope='row'] {
  text-align: left; padding: var(--bdri-space-4); white-space: nowrap;
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold);
  border-bottom: var(--bw-divider) solid var(--color-border-subtle);
}
.matrix-table th[scope='row'] a { color: var(--color-text-default); text-decoration: none; }
.matrix-table th[scope='row'] a:hover { color: var(--color-accent-primary); text-decoration: underline; }
.matrix-table td {
  padding: var(--bdri-space-4); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold);
  border-bottom: var(--bw-divider) solid var(--color-border-subtle);
}
/* cell tint keys IMPORTANCE (the text label is always present too). Required =
   the most saturated cell, a gold fill so it dominates; its TEXT is ink, never
   gold (gold fails contrast as text). Recommended = a lighter aquamarine tint
   with aquamarine-deep text, reading clearly secondary. Optional = palest/steel.
   The most important door reads strongest. */
.matrix-table td[data-lvl='required']    { background: color-mix(in srgb, var(--bdri-color-gold) 30%, var(--color-surface-default)); color: var(--bdri-color-ink); font-weight: var(--bdri-weight-bold); }
.matrix-table td[data-lvl='recommended'] { background: color-mix(in srgb, var(--bdri-color-aquamarine) 11%, var(--color-surface-default)); color: var(--bdri-color-aquamarine-deep); }
.matrix-table td[data-lvl='optional']    { background: var(--color-surface-muted); color: var(--color-text-muted); }

@media (max-width: 640px) {
  .section-title, .principle__title { font-size: var(--bdri-size-h3); }
}

/* ============================================================================
   MATRIX IMPORTANCE RAMP - dot re-encoding (scoped to .matrix only)
   On this page the picker JS maps required->dot--strong, recommended->dot--developing,
   optional->dot--gap. Site-wide those dots mean the door-STATE vocabulary
   (aquamarine / gold / steel), which is correct everywhere else. Here they encode
   IMPORTANCE: Required = gold (the strongest signal), Recommended = aquamarine,
   Optional = steel. This override is scoped to .matrix and never touches the
   door-state dots elsewhere (the home hero plate dots stay the door-state vocab).
   ============================================================================ */
.matrix .dot--strong     { background: var(--bdri-color-gold); }
.matrix .dot--developing { background: var(--bdri-color-aquamarine); }
.matrix .dot--gap        { background: var(--bdri-color-steel); }

/* matrix-table row links read as text links -> gold underline on hover (text
   stays ink/aqua; gold is never text). Defined here because the route stylesheet
   loads after shared.css at equal specificity. */
.matrix-table th[scope='row'] a:hover {
  color: var(--color-text-default);
  text-decoration: underline;
  text-decoration-color: var(--bdri-color-gold);
  text-decoration-thickness: var(--bw-input-focus);
  text-underline-offset: 0.2em;
}