/* Components used only by "Why LEN seems wrong sometimes" (the Unicode workbench and diagrams). */

/* ---------- Check / act diagram ---------- */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 1.3rem 0; border: 1px solid var(--line-2); }
.lane { background: var(--surface); padding: 1rem 1.1rem; }
.lane + .lane { border-left: 1px solid var(--line-2); }
.lane h4 { margin: 0 0 .6rem; font-size: .98rem; font-weight: 600; }
.lane .step { font-family: var(--mono); font-size: .85rem; padding: .45rem .6rem; background: var(--surface-2); border: 1px solid var(--line); margin: .4rem 0; overflow-x: auto; white-space: nowrap; }
.lane .arrow { text-align: center; color: var(--muted); font-size: .85rem; line-height: 1.2; padding: .2rem 0; }
.lane .verdict { font-weight: 600; padding: .45rem .6rem; font-size: .92rem; border: 1px solid; }
.lane .verdict.ok { background: var(--ok-soft); color: var(--ok); }
.lane .verdict.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- Surrogate bit diagram ---------- */
.bits { font-family: var(--mono); font-size: .88rem; display: grid; gap: .45rem; }
.bits .row { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; align-items: center; }
.bits .row > span:first-child { color: var(--muted); font-size: .78rem; }
.bits .b { display: inline-block; padding: .12rem .3rem; letter-spacing: .06em; }
.bits .b.h { background: var(--hi-soft); color: var(--hi); }
.bits .b.l { background: var(--lo-soft); color: var(--lo); }
@media (max-width: 560px) { .bits .row { grid-template-columns: 1fr; gap: .15rem; } }

/* ---------- Joined cell strips (share gridlines instead of floating cards) ---------- */
.enc, .hexbox, .stats, .verdicts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.enc { grid-template-columns: repeat(3, 1fr); margin: 1rem 0 1.4rem; }
.enc div, .hexbox div { background: var(--surface); padding: .7rem .85rem; }
.enc b { display: block; font: 600 .88rem/1 var(--display); color: var(--fg-2); margin-bottom: .45rem; }
.enc .v { font-family: var(--mono); font-size: .92rem; }
.enc small { color: var(--muted); display: block; margin-top: .3rem; font-size: .78rem; }
.hexbox { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: .8rem 0 1rem; }
.hexbox div { font-family: var(--mono); font-size: .88rem; }
.hexbox div span { display: block; color: var(--muted); font-size: .74rem; margin-bottom: .2rem; font-family: var(--sans); }

/* ---------- Workbench ---------- */
.bench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.bench > .card, .cmp-inputs > div, .excelf { min-width: 0; }
.bench .card > h3 { margin: -1.1rem -1.1rem .9rem; padding: .55rem 1.1rem; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-size: 1rem; }
.bench .sub { color: var(--muted); font-size: .88rem; margin-bottom: .9rem; }
.field { display: flex; gap: .5rem; align-items: stretch; }
.input {
  width: 100%; min-width: 0; font: 1.35rem/1.3 var(--mono); color: var(--fg); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 0; padding: .55rem .75rem;
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.presets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 0; }
.preset { font: .82rem/1 var(--mono); padding: .4rem .55rem; border-radius: 2px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-2); cursor: pointer; }
.preset:hover { border-color: var(--accent); color: var(--accent); }

.stats { grid-template-columns: repeat(4, 1fr); margin: 1.1rem 0; }
.stat { background: var(--surface); padding: .7rem .8rem; }
.stat .v { font: 600 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.stat .k { font-size: .78rem; color: var(--muted); margin-top: .35rem; line-height: 1.35; }
.stat .k code { font-size: .74rem; }
.stat.g1 .v { color: var(--fg); }
.stat.g2 .v { color: var(--accent); }
.stat.g3 .v { color: var(--warn); }

.align { overflow-x: auto; margin: .4rem 0 1rem; padding-bottom: .3rem; }
.align .grid { display: grid; gap: 1px; min-width: max-content; }
.align .cell { padding: .35rem .3rem; text-align: center; font-family: var(--mono); font-size: .74rem; line-height: 1.2; white-space: nowrap; min-width: 3.1rem; overflow: hidden; }
.align .rowlabel { font: 600 .74rem/1.1 var(--sans); color: var(--muted); display: flex; align-items: center; padding-right: .5rem; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.align .cg { background: var(--surface-2); font-size: 1.3rem; padding: .4rem .3rem; }
.align .cc { background: var(--accent-soft); color: var(--accent); }
.align .cc.inv { background: var(--warn-soft); color: var(--warn); outline: 1px dashed var(--warn); outline-offset: -1px; }
.align .cu { background: var(--surface-2); color: var(--fg-2); }
.align .cu.h { background: var(--hi-soft); color: var(--hi); }
.align .cu.l { background: var(--lo-soft); color: var(--lo); }
.legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.legend i { display: inline-block; width: .75rem; height: .75rem; vertical-align: -1px; margin-right: .3rem; }

.glist { display: grid; border: 1px solid var(--line); }
.gitem { background: var(--surface); }
.gitem + .gitem { border-top: 1px solid var(--line); }
.gitem > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.4rem 3.4rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .5rem .8rem .5rem 0; }
.gitem > summary::-webkit-details-marker { display: none; }
.gitem > summary:hover { background: var(--surface-2); }
.gitem .idx { font: .72rem/1 var(--mono); color: var(--muted); align-self: stretch; display: grid; place-items: center; background: var(--surface-2); border-right: 1px solid var(--line); margin: -.5rem 0; }
.gitem[open] .idx { color: var(--accent); background: var(--accent-soft); }
.gitem .big { font-family: var(--mono); font-size: 1.9rem; line-height: 1.1; text-align: center; }
.gitem .meta { font: .76rem/1.35 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.gitem .flags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.flag { font: 600 .72rem/1 var(--sans); padding: .22rem .38rem; border-radius: 2px; background: var(--surface-2); color: var(--fg-2); }
.flag.w { background: var(--warn-soft); color: var(--warn); }
.flag.a { background: var(--accent-soft); color: var(--accent); }
.flag.b { background: var(--bad-soft); color: var(--bad); }
.gitem .detail { border-top: 1px solid var(--line); padding: 0; background: var(--surface); }
.gitem table { font-size: .84rem; }
.gitem td, .gitem th { padding: .42rem .7rem; white-space: nowrap; border-left: 0; border-right: 0; }
.gitem td.name { white-space: normal; min-width: 14rem; }
.gitem td.name .gcn { color: var(--muted); font-size: .78rem; display: block; }
.gitem td.gl { font-family: var(--mono); font-size: 1.35rem; text-align: center; }
.inv { display: inline-block; font: 600 .66rem/1 var(--mono); padding: .26rem .3rem; border: 1px dashed var(--warn); color: var(--warn); vertical-align: middle; letter-spacing: .02em; }
.excelf { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; }
.excelf pre { margin: 0; flex: 1; min-width: 0; font-size: .84rem; background: var(--surface-2); }
.empty { color: var(--muted); font-style: italic; padding: .6rem .8rem; }

.cmp-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; }
.cmp-inputs .lbl { font: 600 .8rem/1 var(--mono); color: var(--muted); margin-bottom: .35rem; display: block; }
.swap { align-self: end; margin-bottom: .35rem; }
.verdicts { grid-template-columns: repeat(4, 1fr); margin: 1.1rem 0; }
.vd { background: var(--surface); padding: .75rem .85rem; }
.vd .res { font: 700 1.25rem/1 var(--mono); }
.vd.yes { background: var(--ok-soft); }
.vd.yes .res { color: var(--ok); }
.vd.no { background: var(--bad-soft); }
.vd.no .res { color: var(--bad); }
.vd .name { font-weight: 600; font-size: .88rem; margin-top: .45rem; }
.vd .xl { font: .75rem/1.35 var(--mono); color: var(--muted); margin-top: .25rem; }
.diff { display: grid; gap: .5rem; font-size: .85rem; }
.diff .line { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; }
.diff .line > b { font-family: var(--mono); color: var(--muted); padding-top: .25rem; }
.chip.del { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.chip.add { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.chip.same { opacity: .75; }

/* ---------- Cheat sheet ---------- */
.cheat td:nth-child(1) { font-weight: 600; }
.cheat td { font-size: .9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .stats, .verdicts { grid-template-columns: 1fr 1fr; }
  .lanes { grid-template-columns: 1fr; }
  .lane + .lane { border-left: 0; border-top: 1px solid var(--line-2); }
  .enc { grid-template-columns: 1fr; }
  .cmp-inputs { grid-template-columns: 1fr; }
  .swap { justify-self: start; margin: 0; }
  .gitem > summary { grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding-left: .8rem; }
  .gitem .idx { display: none; }
  .gitem .meta { font-size: .72rem; }
}