.matrix-head {
  display:flex;
  align-items:baseline;
  gap:24px
}
.matrix-head h1 {
  margin:0 0 8px
}
.matrix-legend {
  font-size:var(--small)
}
.matrix-wrap {
  max-height:calc(100vh - 160px);
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius)
}
.matrix {
  border-collapse:collapse;
  font-size:var(--small);
  width:100%
}
.matrix th,.matrix td {
  border-bottom:1px solid var(--border);
  padding:4px 6px
}
.matrix thead th {
  position:sticky;
  top:0;
  z-index:2;
  background:var(--text);
  color:var(--bg);
  white-space:nowrap
}
.matrix .opt-col {
  min-width:340px;
  text-align:start
}
.matrix .sec th {
  background:var(--brand-yellow);
  text-align:start
}
.matrix .grp th {
  background:var(--panel);
  text-align:start
}
.mx {
  text-align:center;
  width:56px
}
.mx.d {
  background:#fff7a8;
  font-weight:700
}
.mx.u {
  color:#b0b0b0
}
.mx.logic {
  outline:2px dashed #8a8a8a;
  outline-offset:-3px
}
.matrix-legend .mx {
  display:inline-block;
  width:28px
}
.mlist-bar {
  position:sticky;
  top:0;
  z-index:5;
  background:var(--bg);
  padding:6px 0;
  border-bottom:1px solid var(--border);
  font-size:var(--small)
}
.mlist-bar p {
  margin:4px 0
}
.msec h2 {
  font-size:var(--body);
  margin:20px 0 6px;
  border-inline-start:4px solid var(--brand-yellow);
  padding-inline-start:10px
}
.mgroup-head {
  display:flex;
  align-items:baseline;
  gap:12px
}
.mgroup h3 {
  font-size:var(--small);
  margin:10px 0 2px
}
.mrow {
  display:grid;
  grid-template-columns:minmax(240px,.9fr) minmax(0,2.6fr) 120px;
  gap:4px 12px;
  align-items:center;
  padding:6px 4px;
  border-bottom:1px solid var(--border)
}
.mrow.approved {
  background:#f3fbef
}
.only-open .mrow.approved {
  display:none
}
.mtitle {
  font-size:.9375rem;
  color:var(--black)
}
.mchips {
  display:flex;
  flex-wrap:wrap;
  gap:4px
}
.chip {
  min-height:28px;
  padding:2px 8px;
  border-radius:6px;
  font-size:.8125rem;
  font-weight:600;
  border:1px solid var(--input-border);
  background:var(--bg)
}
.chip.a {
  background:var(--text);
  color:var(--bg);
  border-color:var(--text)
}
.chip.d {
  background:var(--brand-yellow);
  border-color:var(--text)
}
.chip.u {
  color:#a8a8a8;
  border-color:var(--border);
  font-weight:400
}
.chip.logic {
  outline:2px dashed #8a8a8a;
  outline-offset:1px
}
.mact .approve {
  min-height:32px;
  padding:4px 12px;
  font-size:var(--small);
  background:var(--panel);
  border:1px solid var(--input-border)
}
.approved .approve {
  background:#d9f2cf
}
@media(max-width:900px) {
  .mrow {
    grid-template-columns:minmax(0,1fr)
  }
}
.mact {
  display:flex;
  flex-direction:column;
  gap:4px
}
.mact .default-all {
  min-height:28px;
  padding:2px 10px;
  font-size:.8125rem;
  background:var(--brand-yellow);
  border:1px solid var(--text)
}
.mprice {
  display:block;
  margin-top:2px;
  font-size:var(--small);
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.msub {
  font-weight:400;
  color:var(--muted)
}
.mbase {
  font-size:var(--small);
  color:var(--muted)
}
.mbase b {
  color:var(--text)
}