/* Open DJ, TWO DECKS: documentation components (.doc-*).
   Structure taken from the internal doc style. Color and type stay on the locked
   direction tokens: ink, muted, line, panel, body, mono. No new hues or faces.
   These classes are for document-like sub pages only. Put the block inside .ink
   so it inverts on both decks. Do not nest .ink. Do not put transform, opacity,
   filter, isolation or z-index on a wrapper of ink. */

.doc-eyebrow{
  font:400 12px/1.4 var(--font-mono);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0 0 0.6rem;
}

.doc-lede{
  color:var(--ink-muted);
  font-size:1.05rem;
  line-height:1.5;
  margin:0 0 1.5rem;
  max-width:62ch;
  text-wrap:pretty;
}

.doc-verdict{
  background:var(--panel);
  border:1px solid var(--ink-line);
  border-top:3px solid var(--ink);
  border-radius:2px;
  padding:1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin:0 0 1.5rem;
  min-width:0;
}
.doc-verdict .doc-call{
  font-weight:600;
  font-size:1.08rem;
  line-height:1.4;
  margin:0;
  color:var(--ink);
}
.doc-verdict p{ margin:0; max-width:68ch; }

dl.doc-facts{
  display:grid;
  grid-template-columns:fit-content(9rem) minmax(0,1fr);
  gap:0.4rem 1.2rem;
  margin:0 0 1.5rem;
  padding:1rem 1.2rem;
  background:var(--panel);
  border:1px solid var(--ink-line);
  border-radius:2px;
  min-width:0;
}
dl.doc-facts dt{
  color:var(--ink-muted);
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-family:var(--font-mono);
}
dl.doc-facts dd{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
}

/* Status pills: shape, border and a text glyph. Hue cannot carry meaning on
   difference-blended ink, so each variant's visible mark is different. */
.doc-pill{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font:700 0.7rem/1 var(--font-mono);
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.15rem 0.45rem;
  border-radius:3px;
  white-space:nowrap;
  vertical-align:middle;
  border:1px solid var(--ink-line);
  color:var(--ink);
  background:var(--panel);
}
.doc-pill::before{
  font-weight:700;
  letter-spacing:0.04em;
}
.doc-pill.ok{
  border-style:solid;
  border-width:1px;
  background:var(--ink);
  color:var(--knock);
}
.doc-pill.ok::before{ content:"OK"; }
.doc-pill.warn{
  border-style:dashed;
  border-width:1px;
  color:var(--ink);
  background:transparent;
}
.doc-pill.warn::before{ content:"!"; }
.doc-pill.bad{
  border-style:double;
  border-width:3px;
  color:var(--ink);
  background:transparent;
}
.doc-pill.bad::before{ content:"X"; }
.doc-pill.neutral{
  border-style:dotted;
  border-width:1px;
  color:var(--ink-muted);
  background:transparent;
}
.doc-pill.neutral::before{ content:"·"; }

ul.doc-tasks{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--ink-line);
}
ul.doc-tasks li{
  display:grid;
  grid-template-columns:5.2rem minmax(0,1fr);
  gap:0.2rem 1rem;
  padding:0.7rem 0;
  border-bottom:1px solid var(--ink-line);
  min-width:0;
}
ul.doc-tasks li .doc-pill{
  justify-self:start;
  align-self:start;
  margin-top:0.15rem;
}
ul.doc-tasks p{ margin:0; max-width:68ch; }

h2.doc-h, h2:has(> .doc-sid){
  font-size:1rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:2.4rem 0 0.7rem;
  text-wrap:balance;
  display:flex;
  gap:0.6rem;
  align-items:baseline;
  flex-wrap:wrap;
}
.doc-sid{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--ink);
  letter-spacing:0.04em;
  font-weight:500;
}

.doc-src{
  font-family:var(--font-mono);
  font-size:0.74rem;
  color:var(--ink-muted);
  overflow-wrap:anywhere;
  margin:0.15rem 0 0;
}

.doc-note{
  color:var(--ink-muted);
  border-left:2px solid var(--ink);
  padding-left:0.8rem;
  margin:0 0 1rem;
  max-width:68ch;
}

.doc-tbl{
  overflow-x:auto;
  border:1px solid var(--ink-line);
  border-radius:2px;
  margin:0 0 1rem;
  min-width:0;
  max-width:100%;
}
.doc-tbl table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;
  font-size:0.92rem;
}
.doc-tbl th, .doc-tbl td{
  text-align:left;
  vertical-align:top;
  padding:0.55rem 0.8rem;
  border-bottom:1px solid var(--ink-line);
}
.doc-tbl tr:last-child td{ border-bottom:0; }
.doc-tbl th{
  font-size:0.72rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--ink-muted);
  background:var(--panel);
  font-weight:600;
  font-family:var(--font-mono);
}
.doc-tbl td.num, .doc-tbl .num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

ol.doc-steps{
  margin:0 0 1rem;
  padding-left:1.3rem;
}
ol.doc-steps li{
  margin-bottom:0.8rem;
  max-width:68ch;
}
ol.doc-steps li::marker{
  color:var(--ink-muted);
  font-variant-numeric:tabular-nums;
}

details.doc-tested{
  margin-top:2.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--ink-line);
  color:var(--ink-muted);
  font-size:0.9rem;
}
details.doc-tested summary{
  cursor:pointer;
  color:var(--ink);
}
details.doc-tested ul{
  margin:0.8rem 0 0;
  padding-left:1.1rem;
}

@media (max-width:520px){
  ul.doc-tasks li{ grid-template-columns:1fr; }
  dl.doc-facts{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .doc-eyebrow, .doc-lede, .doc-verdict, dl.doc-facts, .doc-pill,
  ul.doc-tasks, .doc-sid, .doc-src, .doc-note, .doc-tbl, ol.doc-steps,
  details.doc-tested{
    transition:none !important;
    animation:none !important;
  }
}