/* ============================================================================
   THE TRUST-BOUNDARY PLATE (ledger P3-1)
   base audit §5.4/§5.5 · Addendum C Part B — the waterline IS the boundary
   ----------------------------------------------------------------------------
   The argument is spatial, so the layout carries it: sparse above the line,
   dense and filled below it. --current fills a box only where student data is
   actually present, which is what makes the empty network region an argument
   rather than a gap. Container queries use `plate` (ledger C16) — no diagram
   declares its own container name.
   ========================================================================= */

.privacy-plate { position: relative; }

.tb-region { color: var(--star-dim); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 .75rem; }

.tb-row { display: grid; gap: 1px; background: color-mix(in srgb, var(--star) 12%, transparent); }
@container plate (min-width: 700px)  { .tb-row { grid-template-columns: repeat(2, 1fr); } }
@container plate (min-width: 1040px) { .tb-sea .tb-row { grid-template-columns: repeat(4, 1fr); }
                                       .tb-sky .tb-row { grid-template-columns: repeat(2, 1fr); } }

/* 🪤 THE LEGEND MUST DESCRIBE WHAT IS ACTUALLY DRAWN. This shipped with
   `border-left: transparent` on the no-student boxes while the legend said
   "outlined — no student data". Nothing was outlined; the middle state had no
   visual form at all, so the three-state encoding was really two. On a privacy
   plate that is the subtle-wrongness base audit Part Nine names — a diagram that
   reads as verified while saying something the picture does not show. */
.tb-box {
  background: var(--deep); padding: .9rem 1rem;
  display: grid; gap: .35rem; align-content: start;
  border-left: var(--hair-strong) solid color-mix(in srgb, var(--star) 26%, transparent);
}
.tb-label  { font-family: var(--f-display); font-size: var(--d5); color: var(--star); }
.tb-holds  { color: var(--star-dim); letter-spacing: .05em; text-transform: uppercase; }
.tb-detail { color: color-mix(in srgb, var(--star) 62%, transparent); line-height: 1.5; }

/* ⛔ --current means STUDENT DATA IS PRESENT and nothing else. The fill is the
   argument: count the filled boxes above the line. */
.tb-box.has-student { border-left-color: var(--current); background:
  linear-gradient(90deg, color-mix(in srgb, var(--current) 9%, transparent), transparent 55%), var(--deep); }
.tb-box.has-student .tb-holds { color: var(--current); }
/* Dashed = optional, district-owned, absent by default. */
.tb-box.is-dormant { border: var(--hair) dashed color-mix(in srgb, var(--star) 30%, transparent); opacity: .72; }
.tb-box.is-crossing { border-left-style: dashed; }

.tb-sky { padding-bottom: 1.25rem; }
.tb-absent { color: var(--star-dim); margin: .9rem 0 0; max-width: 74ch; }

/* THE LINE. One horizon on the plate, same gold, same weight as everywhere. */
.tb-line { position: relative; margin: .25rem 0 1.1rem; }
.tb-line .waterline { margin: 0; }
.tb-line-l { position: absolute; right: 0; top: .3rem; color: var(--waterline); letter-spacing: .06em; text-transform: uppercase; }

/* The four tiers as four depths of surfacing. */
.tb-tiers { display: grid; gap: 1px; background: color-mix(in srgb, var(--star) 12%, transparent); margin-bottom: .9rem; }
@container plate (min-width: 640px) { .tb-tiers { grid-template-columns: repeat(4, 1fr); } }
.tb-tier { background: var(--deep); padding: .7rem .9rem; display: grid; gap: .2rem; }
.tb-tier-n { color: color-mix(in srgb, var(--star-dim) 70%, transparent); }
.tb-tier-l { color: var(--star); font-size: var(--m-small); }
.tb-tier-s { color: var(--star-dim); letter-spacing: .05em; text-transform: uppercase; }
.tb-tier.is-default { box-shadow: inset 0 2px 0 var(--waterline); }
.tb-tier.is-default .tb-tier-s { color: var(--waterline); }
.tb-tier.is-gated .tb-tier-l { color: var(--star-dim); }

.tb-gate { color: var(--star-dim); margin: 0 0 1.4rem; max-width: 78ch; }
.tb-fw   { color: var(--star-dim); margin: 1.25rem 0 0; max-width: 80ch; }
.tb-fw-k { color: var(--wake); letter-spacing: .06em; text-transform: uppercase; margin-right: .4rem; }
.tb-fw em { color: color-mix(in srgb, var(--star) 70%, transparent); font-style: italic; }

/* Legend keys mirror the box treatments exactly, so the legend teaches itself. */
/* Keys mirror the box treatments EXACTLY — same left-border weight, same fill,
   same dash — so the legend cannot drift from the plate again. */
.tb-key { display: inline-block; width: 1.6rem; height: .9rem; vertical-align: -.1rem;
          background: var(--deep);
          border-left: var(--hair-strong) solid color-mix(in srgb, var(--star) 26%, transparent); }
.tb-key.has-student { border-left-color: var(--current);
                      background: linear-gradient(90deg, color-mix(in srgb, var(--current) 22%, transparent), transparent 70%), var(--deep); }
.tb-key.is-dormant  { border: var(--hair) dashed color-mix(in srgb, var(--star) 30%, transparent); opacity: .72; }

@media print {
  .privacy-plate { background: #fff; color: #000; }
  .tb-box { background: #fff; border: 1px solid #999; }
  .tb-label, .tb-detail, .tb-holds { color: #000; }
}