/* Side-panel compaction (owner 2026-10-10). Each panel is a size container; the rules below apply only while the panel is
 * narrow, so wide panels look exactly as before. Container widths are in the panel's own CSS px (Text Size excluded), so
 * the thresholds hold at every Text Size / UI Scale. Minimums: ui-scale.css (--osiris-sb-min 264, --osiris-rp-min 320).
 * panel-min-width.js adds the parts CSS cannot (fade edges, orphan-free grids, titles). */
@media (min-width: 901px) {
  html:not(#o) #sidebar { container: sb / inline-size; }
  html:not(#o) #right-panel { container: rp / inline-size; }
}

/* ── Right panel, compact: <= 340 px ─────────────────────────────────────────────────────────────────────────── */
@container rp (max-width: 340px) {
  /* Tab rows: ONE scrollable row each, fade edges (data-scroller + --pw-l / --pw-r from the js); the chosen tab is kept in view. */
  html:not(#o) #right-panel.rb-on :is(.rb-families, .rb-subs, .rb-variant-row) {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-block: 2px; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, currentcolor var(--pw-l, 0px), currentcolor calc(100% - var(--pw-r, 0px)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, currentcolor var(--pw-l, 0px), currentcolor calc(100% - var(--pw-r, 0px)), transparent 100%);
  }
  html:not(#o) #right-panel.rb-on :is(.rb-families, .rb-subs, .rb-variant-row)::-webkit-scrollbar { display: none; }
  html:not(#o) #right-panel.rb-on :is(.rb-families, .rb-subs, .rb-variant-row) > .o-tab { flex: none; white-space: nowrap; }
  /* Aspect / transit tables (pair-reports.css): tighter cells, no fixed column minimums, low-value columns dropped by the js. */
  html:not(#o) #right-panel .pr-table :is(td, th) { padding-inline: 2px !important; min-width: 0 !important; }
  html:not(#o) #right-panel .pr-table { font-size: var(--fs-caption); }
  html:not(#o) #right-panel .pr-table .pr-gl { width: 12px; padding-right: 0 !important; }
  html:not(#o) #right-panel .pr-table .pr-name { max-width: 54px; overflow: hidden; text-overflow: ellipsis; }
  html:not(#o) #right-panel .pr-table [data-pw-drop] { display: none !important; }
  html:not(#o) #right-panel .pr-table th[data-pw-abbr] { font-size: 0 !important; }
  html:not(#o) #right-panel .pr-table th[data-pw-abbr]::after { content: attr(data-pw-abbr); font-size: var(--fs-caption); }
  /* Transits: the "Export a whole month" box takes the full row instead of shrink-wrapping its summary. */
  html:not(#o) #right-panel .dmo-actions > .dmo-more { margin-left: 0; flex: 1 1 100%; min-width: 0; }
  html:not(#o) #right-panel .dmo-row > :is(button, .dmo-pill) { max-width: 100%; }
  /* Directions listing: four equal-ish header buttons on one line; a row is date | arc, the pair, then the mode chips. */
  html:not(#o) #right-panel .pl .pl-table thead tr { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr; width: 100%; }
  html:not(#o) #right-panel .pl .pl-table thead th { min-width: 0; }
  html:not(#o) #right-panel .pl button.pl-th.pl-th { padding: 4px 4px !important; font-size: 11px !important; gap: 2px; white-space: nowrap; justify-content: center; }
  html:not(#o) #right-panel .pl .pl-table tbody tr.pl-row { grid-template-areas: "date arc" "pair pair" "mode mode"; }
  html:not(#o) #right-panel .pl .pl-table td[data-col="mode"] { justify-self: start; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  html:not(#o) #right-panel .pl .pl-table td[data-col="date"] { min-width: 0; }
}

/* Midpoint Structures (dial-midpoints.js): a row is one line; the name ends in an ellipsis (the js puts the full text in the title). */
@media (min-width: 901px) {
  html:not(#o) #right-panel.rb-on :is(.dm-row, .dm-pair) { flex-wrap: nowrap; overflow: hidden; align-items: baseline; }
  html:not(#o) #right-panel.rb-on :is(.dm-row, .dm-pair) > * { flex: none; white-space: nowrap; }
  html:not(#o) #right-panel.rb-on :is(.dm-row, .dm-pair) > :is(.dm-name, .dm-flag) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html:not(#o) #right-panel.rb-on :is(.dm-row, .dm-pair) > .dm-name { flex: 1 1 0; }
}

/* ── Left panel, compact: <= 280 px (default 300 and wider are untouched) ─────────────────────────────────────────── */
@container sb (max-width: 280px) {
  /* Ring cards: the name keeps the room; the Base / Focus / Pinned / Auto chips shrink to their icon (full text stays in the title). */
  html:not(#o) #sidebar .wc-head { gap: 4px; }
  html:not(#o) #sidebar .wc-tag[data-ic] { font-size: 0; padding: 0 5px; min-width: 18px; text-align: center; }
  html:not(#o) #sidebar .wc-tag[data-ic]::before { content: attr(data-ic); font-size: var(--fs-caption); line-height: 15px; }
  /* Fields: a placeholder or value that does not fit ends in an ellipsis, never a hard cut. */
  html:not(#o) #sidebar :is(input, select)::placeholder { text-overflow: ellipsis; }
  html:not(#o) #sidebar :is(input[type=text], input[type=search], input:not([type])) { text-overflow: ellipsis; }
  /* Library: names and folder labels stay on one line and end in an ellipsis (the js puts the full text in the title). */
  html:not(#o) #sidebar :is(.lc-name, .lr-name, .lf-label) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(#o) #sidebar .lf-label { flex: 1 1 auto; }
}