/* standalone page chrome: full-bleed width, sans back-link */
.back-link {
  margin: 10px 14px 14px;
  font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-light);
}
.back-link a { color: var(--text-light); text-decoration: none !important; border-bottom: none !important; }
.back-link a:hover { color: var(--text); }
figure:has(> .slice-stack) { margin: 8px 14px; }

.slice-stack {
  --row-h: 16px;
  --chart-h: 104px;
  /* no card chrome and no dividers — cards separated by generous white space */
  display: flex; flex-direction: column; gap: 72px;
  width: 100%; margin: 0 auto;
  font-family: var(--font-sans);
  /* fluid layout — fitMount must not measure with width:fit-content (the
     flex children would balloon to ~1900px intrinsic and it'd scale to 0.7). */
  container-type: inline-size;

  .scard {
    box-sizing: border-box; min-width: 0;
    display: flex; flex-direction: column; gap: 14px;
    background: #fff;
  }

  /* header: title top-left, then prompt (left half) · pinned chips + help (right half) */
  .stitle { font-size: var(--fs-body); font-weight: 600; }
  /* mobile-first: prompt stacks above the chips/help; ≥768px the prompt sits
     snug at ~a third of the width with the chips + help in the next column */
  .shead { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 0 0 auto; }
  .sprompt {
    flex: 0 1 auto; min-width: 0; max-width: 100%; box-sizing: border-box;
    font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6;
    white-space: pre-wrap; word-break: break-word; color: var(--gray-600);
    background: var(--tok-bg); border: 1px solid var(--tok-border);
    border-radius: 3px; padding: 4px 8px;
  }
  .sprompt .ptok { padding: 0 1px; cursor: pointer; outline: 1px solid transparent; border-radius: 2px; }
  .sprompt .ptok:hover { outline-color: var(--text-light); }
  .sprompt .ptok.wrap-hidden { display: none; }
  /* lens-read position: shared .tok-hit treatment must beat the base .ptok outline */
  .sprompt .ptok.tok-hit { outline: 1px solid var(--tok-hit-outline); outline-offset: -1px; background: #fff; }
  .sside { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .shelp { font-size: var(--fs-small); color: var(--text-light); }

  .pinned-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 22px; }
  .pinned-chip {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-family: var(--font-mono); font-size: var(--fs-label);
    padding: 1px 8px; border: 2px solid; border-radius: 3px; cursor: default; background: #fff;
    position: relative;
  }
  .pinned-chip.active, .pinned-chip:hover { background: #f0f0f0; }
  /* the unpin × only appears as an overlay on hover */
  .pinned-chip .unpin {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.85); color: var(--text); cursor: pointer;
    opacity: 0; border-radius: 1px;
  }
  .pinned-chip:hover .unpin { opacity: 1; }

  /* three columns: argmax grid · by-layer readout · by-pos readout.
     Stacked by default (mobile); side-by-side ≥768px. */
  .srow { display: flex; flex-direction: column; gap: 32px; flex: 1; min-height: 0; }
  .scol {
    flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0;
    background: #fff;
  }
  .scol-grid { flex: 1.25; }
  .col-title { margin-bottom: 4px; flex-shrink: 0; }

  .scol-grid {
    .grid-wrap { overflow: auto; flex: 0 1 auto; min-height: 0; contain: layout style paint; }
    table.argmax { border-collapse: collapse; table-layout: fixed; font-family: var(--font-mono); }
    table.argmax tbody tr { height: var(--row-h); }
    table.argmax td.cell {
      font-size: var(--fs-label); width: 7ch; max-width: 7ch;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      padding: 0 2px; border: 1px solid var(--rule); cursor: pointer; box-sizing: border-box;
      line-height: calc(var(--row-h) - 2px); vertical-align: middle;
    }
    table.argmax td.cell:hover { outline: 1px solid var(--text-light); outline-offset: -1px; }
    table.argmax td.cell.sel { outline: 1px solid var(--text); outline-offset: -1px; }
    table.argmax td.layer-label {
      position: sticky; left: 0; background: #fff; font-size: var(--fs-label);
      color: var(--text-light); text-align: right; padding: 0 4px;
      font-variant-numeric: tabular-nums; width: 3ch; z-index: 1; vertical-align: middle;
    }
    table.argmax tfoot td.ctx-tok {
      font-size: var(--fs-label); color: var(--text-light); text-align: center;
      width: 7ch; max-width: 7ch; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; padding: 1px 2px; cursor: pointer;
      font-variant-numeric: tabular-nums;
    }
    table.argmax tfoot td.sel { outline: 1px solid var(--text); outline-offset: -1px; }

    .grid-bottom { display: flex; flex-direction: column; margin-top: auto; }
  }

  /* rank heatmap: one tight legend line (pill · label · 1 ▒▒ 1k+) flush with the
     heatmap's right edge, with breathing room above it from the argmax table */
  .rank-heatmap { flex-shrink: 0; margin-top: 12px; }
  .hm-head {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px;
    margin: 0 8px 2px 28px;
    font-size: var(--fs-label); color: var(--text-light);
  }
  .hm-head .hm-pill { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hm-head .hm-lab { margin: 0 4px 0 6px; }
  .hm-head .hm-grad { width: 110px; height: 7px; border-radius: 1px; }
  .hm-head .hm-end { font-variant-numeric: tabular-nums; }

  .scol-layer, .scol-pos {
    .rows-wrap { flex: 0 1 auto; min-height: 0; overflow-y: auto; contain: layout style paint; }
    .lyr-row, .pos-row {
      display: flex; gap: 5px; align-items: center;
      height: var(--row-h); box-sizing: border-box;
      border-bottom: 1px solid var(--rule); cursor: pointer;
      white-space: nowrap; overflow: hidden;
      outline: 1px solid transparent; outline-offset: -1px;
      contain: layout style paint;
    }
    .lyr-row:hover, .pos-row:hover { background: var(--bg-soft); }
    .lyr-row.sel, .pos-row.sel { outline: 1px solid var(--text); }
    .row-label {
      font-size: var(--fs-label); color: var(--text-light);
      width: var(--label-ch, 3ch); min-width: var(--label-ch, 3ch); text-align: right; flex-shrink: 0;
      font-variant-numeric: tabular-nums; font-family: var(--font-mono);
    }
    .row-ctx {
      font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-light);
      width: 5ch; min-width: 5ch; flex-shrink: 0;
      overflow: hidden; text-overflow: ellipsis;
    }
    .lens-topk { flex: 1; min-width: 0; align-items: center; }
    .lens-topk .lenstk { font-size: var(--fs-label); padding: 0 3px; line-height: calc(var(--row-h) - 4px); height: calc(var(--row-h) - 4px);
      flex: 0 0 auto; max-width: 12ch; text-overflow: ellipsis; }
  }

  /* by-pos list shows the same number of rows as the by-layer column */
  .scol-pos .rows-wrap { max-height: calc(var(--row-h) * var(--vis-rows, 11)); }

  .rank-chart { height: var(--chart-h); flex-shrink: 0; margin-top: auto; }
}

@container (min-width: 768px) {
  .slice-stack {
    /* .shead columns mirror .srow's 1.5:1:1 flex so the prompt box lines up
       with the argmax column below it. .sprompt gets the same padding+border
       as .scol so the box edges align, not just the column tracks. */
    .shead { display: grid; grid-template-columns: 1.25fr 2fr; gap: 32px; }
    .sprompt { width: auto; max-width: none; }
    .srow { flex-direction: row; }
  }
}

.tooltip.ss-tip {
  font-size: var(--fs-small); line-height: 1.3;
  .tt-hdr { font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; font-family: var(--font-mono); }
  table { border-collapse: collapse; font-family: var(--font-mono); }
  tr { height: 16px; }
  td { padding: 0 6px 0 0; line-height: 16px; }
  td.r { color: var(--text-light); text-align: right; width: 2ch; }
  td.t { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  td.p { color: var(--text-light); text-align: right; width: 5ch; font-variant-numeric: tabular-nums; }
}