/* Display density pass (2026-10-08). Loaded last and unlayered on purpose: it overrides the layered skin/component rules without touching them.
   Targets the measured audits in evidence/display-density/{ps2d,ps3d,gb}: lists first, help on demand, nothing visible below 10px.
   Scopes: PS = html[data-skin="ps1"] (2D and 3D share it), GB = html[data-skin="gb"]. The title screen and the hand drawer ([data-hand="1"]) are left alone.
   No global scaling: only spacing, row heights and (GB) the UI glyph size inside the product-flow overlay and the sidebar menu. */

/* ---------- 0. hand: meta text is never below 10px ---------- */
html body #actionSidebar[data-hand="1"] .ui-detail__actions .ui-btn__meta,
html body #actionSidebar[data-hand="1"] .ui-detail__actions .ui-btn .ui-btn__meta { font-size: 10px; }

/* ================================================================================================================================
   1. Product-flow overlay (menus, dungeons, warehouse, settings, codex). Tokens first, then components.
   ================================================================================================================================ */
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) {
  --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 8px; --sp-6: 10px; --lay-hit-min: 40px; --lay-pad: 6px;
}
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel { padding: 8px 10px; }

/* GB: the flow overlay runs on a 1px dot (10px glyph = PixelMplus10 at its native size). Everything in skin-gb.css is written in --gb-dot, so rows,
   cursors, arrows and borders follow; the window frame (--gb-win-bw) keeps its size. Touch pointers keep a 36px row. */
html[data-skin="gb"] body .product-flow-overlay:not([data-flow-mode="title"]) {
  --gb-dot: 1px; --gb-glyph: 10px; --gb-edge: 2px;
  --fs-h1: 20px; --fs-h2: 10px; --fs-body: 10px; --fs-note: 10px; --fs-num: 10px; --fs-badge: 10px; --fs-floor: 10px; --fs-title: 10px; --fs-title-ja: 10px;
  --sp-1: 1px; --sp-2: 2px; --sp-3: 3px; --sp-4: 5px; --sp-6: 8px; --sp-8: 11px;
  --bw-1: 1px; --bw-2: 2px; --bw-panel: 2px; --sym-size: 8px;
  --fl-row: 20px;
}
@media (pointer: coarse) {
  html[data-skin="gb"] body .product-flow-overlay:not([data-flow-mode="title"]) { --fl-row: 36px; }
}
html[data-skin="gb"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel:not(.product-flow-title-panel) { padding: 3px; }
html[data-skin="gb"] body .product-flow-overlay:not([data-flow-mode="title"]) :is(.flow-list, .flow-info) { padding: 3px 4px; }
html[data-skin="gb"] body .product-flow-overlay:not([data-flow-mode="title"]) .flow-head { padding-inline: 4px; }
/* the system menu is short: the window is as high as its commands, not a full-screen shell */
html[data-skin="gb"] body .product-flow-overlay[data-flow-mode="game-menu"] .product-flow-panel { height: auto; max-height: 100%; width: min(100%, 560px); }

/* headings, kicker, lead: one compact block */
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel h2 { margin-block: 0 4px; }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel h2 { font-size: min(var(--fs-h2), 18px); }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-kicker { font-size: var(--fs-note); line-height: 1.2; letter-spacing: 0.12em; }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel p { margin-block: 4px; }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-lead { font-size: var(--fs-note); line-height: 1.35; margin-block: 2px 6px; }
html body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-help { margin: 0 0 4px; font-size: max(10px, var(--fs-note)); line-height: 1.35; color: var(--c-ink-2); }
html body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-help summary { cursor: pointer; min-height: 20px; }
html[data-skin="gb"] body .product-flow-overlay .flow-list .product-flow-help { color: var(--gb-3); }

/* lists of actions / rows: tight gaps, 40px rows, one-line captions */
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) :is(.product-flow-actions, .result-bank, .conduct-list, .product-settings-list) { gap: 3px; margin-block: 4px; }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel button:not(.set-opt):not(.cx-row) { padding: 4px 8px; }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel :is(.product-flow-actions, .dungeon-select-card) small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; line-height: 1.25;
}
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel .product-flow-back { min-height: 36px; margin-top: 4px; padding-block: 2px; }
html body .product-flow-overlay:not([data-flow-mode="title"]) .expedition-section-head { margin: 4px 0 2px; }
@media (min-width: 560px) {
  html body .product-flow-overlay .product-flow-game-menu-panel .product-flow-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- dungeon / expedition cards: one or two lines, number + name + state ---------- */
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .dungeon-select-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 3px; margin-block: 4px; }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .dungeon-select-list { gap: 3px; }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .product-flow-panel .dungeon-select-card {
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 44px; padding: 3px 8px;
}
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .dungeon-select-card > strong { grid-column: auto; }
html[data-skin="ps1"] body .product-flow-overlay:not([data-flow-mode="title"]) .dungeon-select-number { min-width: 28px; }
html[data-skin="ps1"] body .product-flow-overlay .product-flow-expedition-panel .dungeon-select-card small + small { display: none; }   /* the state caption repeats the right-hand label */

/* ---------- variant gates (52): many rows at a glance ---------- */
html body .product-flow-overlay .product-flow-variant-panel { height: min(96dvh, 900px); }
html body .product-flow-overlay .product-flow-variant-panel > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
html body .product-flow-overlay .product-flow-variant-panel > header .product-flow-lead { flex: 1 0 100%; margin: 0 0 2px; }
html body .product-flow-overlay .variant-picker-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 3px; padding: 2px; }
html body .product-flow-overlay .product-flow-panel .variant-picker-card { min-height: 44px; padding: 3px 8px; gap: 6px; }
html body .product-flow-overlay .variant-picker-copy b { font-size: var(--fs-body); line-height: 1.25; }
html body .product-flow-overlay .variant-picker-copy small { font-size: max(10px, var(--fs-note)); line-height: 1.25; }

/* ---------- warehouse: name left, actions right, on one row ---------- */
html body .product-flow-overlay .warehouse-list { gap: 0; margin-block: 4px; }
html[data-skin="ps1"] body .product-flow-overlay .warehouse-row,
html[data-skin="gb"] body .product-flow-overlay .flow-list .warehouse-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 6px; padding: 2px 0;
}
html body .product-flow-overlay .warehouse-row > span { min-width: 0; flex: none; line-height: 1.3; }
html body .product-flow-overlay .warehouse-row > span small { font-size: max(10px, var(--fs-note)); line-height: 1.25; }
html[data-skin="ps1"] body .product-flow-overlay .warehouse-row button { min-height: 38px; padding: 2px 8px; white-space: nowrap; }
html[data-skin="gb"] body .product-flow-overlay .flow-list .warehouse-row > span small { display: block; color: var(--gb-2); }
html[data-skin="gb"] body .product-flow-overlay .flow-list .warehouse-row > span { line-height: 1.3; }
html[data-skin="gb"] body .product-flow-overlay .flow-list .warehouse-row button { height: var(--fl-row); }

/* ================================================================================================================================
   2. Settings: the selected section only, a one-line category rail, controls beside their labels.
   ================================================================================================================================ */
html body .settings-page .set-layout[data-single] .set-sec:not([data-active]) { display: none; }
html body .settings-page .product-flow-lead { display: none; }   /* the rail itself says what to do; the text stays in the DOM */
html[data-skin="ps1"] body .settings-page > .product-flow-kicker { display: inline-block; margin-right: 8px; }
html[data-skin="ps1"] body .settings-page > h2 { display: inline-block; margin: 0 0 4px; }
html[data-skin="ps1"] body .settings-page .set-layout { gap: 4px; }
html body .settings-page .set-sec { margin-block: 4px; }
html body .settings-page .set-sec > h3 { margin: 0 0 2px; padding-bottom: 2px; font-size: var(--fs-body); letter-spacing: 0.06em; }
html body .settings-page .set-item { gap: 2px; padding: 3px 0; }
html body .settings-page .set-name small { font-size: max(10px, var(--fs-note)); line-height: 1.3; color: var(--c-ink-2); }
html body .settings-page .set-note { margin: 0 0 3px; font-size: max(10px, var(--fs-note)); line-height: 1.3; }
html[data-skin="ps1"] body .settings-page .set-seg { gap: 3px; }
html[data-skin="ps1"] body .settings-page .set-opt { min-height: 34px; padding: 0 8px; }
html[data-skin="ps1"] body .settings-page .set-range input { min-height: 32px; }
@media (min-width: 480px) {
  html[data-skin="ps1"] body .settings-page .set-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
  html[data-skin="ps1"] body .settings-page .set-item > :not(.set-name):not(.set-seg) { grid-column: 1 / -1; }
  html[data-skin="ps1"] body .settings-page .set-seg { justify-content: flex-end; max-width: 60vw; }
  html[data-skin="ps1"] body .settings-page .set-item.set-range { grid-template-columns: minmax(0, 1fr) auto; }
}
/* narrow: a single horizontally scrolling rail that stays on top while the section scrolls */
@media (max-width: 719px) {
  html body .settings-page .set-toc {
    display: flex; flex-wrap: nowrap; gap: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    position: sticky; top: 0; z-index: 2; padding-bottom: 2px; background: var(--nb-paper-2, var(--c-surface));
  }
  html body .settings-page .set-toc::-webkit-scrollbar { display: none; }
  html[data-skin="ps1"] body .settings-page .set-toc .set-opt { flex: 0 0 auto; min-height: 34px; padding: 0 10px; white-space: nowrap; }
  html[data-skin="gb"] body .product-flow-overlay .flow-list .set-toc { background: var(--gb-0); }
  html[data-skin="gb"] body .product-flow-overlay .flow-list .set-toc > button { flex: 0 0 auto; width: auto; padding: 0 calc(var(--gb-dot) * 4); }
  html[data-skin="gb"] body .product-flow-overlay .flow-list .set-toc > button[data-on="1"] { background: var(--gb-3); color: var(--gb-0); }
  html[data-skin="gb"] body .product-flow-overlay .flow-list .set-toc > button::before { display: none !important; }
}
/* short landscape: nothing above the controls except the rail */
@media (orientation: landscape) and (max-height: 520px) {
  html[data-skin="ps1"] body .settings-page > .product-flow-kicker { display: none; }
  html[data-skin="ps1"] body .settings-page > h2 { font-size: var(--fs-body); }
  html[data-skin="gb"] body .product-flow-overlay[data-flow-mode="settings"] .flow-head > .product-flow-kicker { display: none; }
}

/* ================================================================================================================================
   3. Codex: reaction cards fold like the enemy rows; enemy rows are tighter.
   ================================================================================================================================ */
html body .product-flow-overlay .cx-page { gap: 6px; margin-block: 4px; }
html body .product-flow-overlay .cx-group { gap: 3px; }
html body .product-flow-overlay .cx-group__title { padding-bottom: 2px; font-size: var(--fs-body); }
html body .product-flow-overlay .cx-list { gap: 3px; }
html body .product-flow-overlay .cx-list--rows { gap: 0; }
html body .product-flow-overlay .cx-card--fold { padding: 0; gap: 0; }
html body .product-flow-panel .cx-row { min-height: 38px; padding: 2px 6px; gap: 6px; }
html body .product-flow-panel .cx-icon { width: 30px; height: 30px; }
html body .product-flow-overlay .cx-enemy__detail { padding: 3px 8px 6px calc(30px + 12px); gap: 3px; }
html body .product-flow-overlay .cx-reaction__detail,
html body .product-flow-overlay .cx-terms--fold .cx-enemy__detail { padding: 3px 8px 6px; }
html body .product-flow-overlay .cx-card__state,
html body .product-flow-overlay .cx-card__combo,
html body .product-flow-overlay .cx-facts h4 { font-size: max(10px, var(--fs-note)); }
html body .product-flow-overlay .cx-facts li, html body .product-flow-overlay .cx-facts p, html body .product-flow-overlay .cx-note,
html body .product-flow-overlay .cx-terms p, html body .product-flow-overlay .cx-terms dd { line-height: 1.4; }
html body .product-flow-panel .cx-row.cx-row--reaction {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mark name state chev" ". sum sum sum";
  align-items: center; column-gap: 6px; row-gap: 0;
}
html body .product-flow-panel .cx-row--reaction > .cx-mark { grid-area: mark; }
html body .product-flow-panel .cx-row--reaction > .cx-card__name { grid-area: name; }
html body .product-flow-panel .cx-row--reaction > .cx-card__state { grid-area: state; }
html body .product-flow-panel .cx-row--reaction > .cx-row__chev { grid-area: chev; }
html body .product-flow-panel .cx-row--reaction > .cx-card__sum {
  grid-area: sum; min-width: 0; font-size: max(10px, var(--fs-note)); line-height: 1.25; color: var(--c-ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
html[data-skin="gb"] body .product-flow-panel .cx-row--reaction > .cx-card__sum { color: var(--gb-2); }
html[data-skin="gb"] body .product-flow-panel .cx-row.cx-row--reaction { height: auto; min-height: var(--fl-row); overflow: visible; white-space: normal; padding-block: 1px; }
html body .product-flow-panel .cx-row.cx-row--help { min-height: 34px; }
html body .product-flow-overlay .cx-terms--fold { display: block; }

/* ================================================================================================================================
   4. Sidebar menu (items, spells, shop, equipment, enemies in the field menu, card pack). Hand drawer excluded.
   ================================================================================================================================ */
/* GB: UI glyph at the native 10px, spacing untouched (the frame, cursors and icons stay on the 2px dot) */
html[data-skin="gb"] body #actionSidebar:not([data-hand="1"]) {
  --gb-glyph: 10px; --fs-h1: 20px; --fs-h2: 10px; --fs-body: 10px; --fs-note: 10px; --fs-num: 10px; --fs-badge: 10px; --fs-floor: 10px; --fs-title: 10px; --fs-title-ja: 10px;
}
html[data-skin="ps1"] body #actionSidebar:not([data-hand="1"]) { --lay-row-h: 38px; --m-ctl-h: 28px; }
html body #actionSidebar:not([data-hand="1"]) :is(#menuTitleEn, .ui-title__sep) { display: none; }   /* the tab bar already shows EN / JA */
html body #actionSidebar:not([data-hand="1"]) > .ui-menu__head { padding-block: 1px; min-height: 0; }
html body #actionSidebar:not([data-hand="1"]) .ui-detail__en { display: none; }

/* rows: one line, name truncates, value stays */
html[data-skin="ps1"] body #actionSidebar:not([data-hand="1"]) .ui-row { flex-wrap: nowrap; padding: 0 6px; gap: 6px; }
html[data-skin="ps1"] body #actionSidebar:not([data-hand="1"]) .ui-list__rows { gap: 2px; }
html body #actionSidebar:not([data-hand="1"]) .ui-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body #actionSidebar:not([data-hand="1"]) .ui-row__meta { flex: 0 0 auto; margin-left: auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: max(10px, var(--fs-note)); }

/* detail: compact padding and gaps, actions on a thin bar */
html[data-skin="ps1"] body #actionSidebar:not([data-hand="1"]) .ui-detail { padding: 6px 8px; gap: 4px; }
html[data-skin="ps1"] body #actionSidebar:not([data-hand="1"]) .ui-detail__content { gap: 6px; }
html body #actionSidebar:not([data-hand="1"]) .ui-detail__text { line-height: 1.4; }
html[data-skin="ps1"] body #actionSidebar:not([data-hand="1"]) .ui-detail__actions { gap: 4px; padding-block: 2px; }
html[data-skin="ps1"] body #actionSidebar:not([data-hand="1"]) .ui-detail__actions .ui-btn { min-height: 36px; padding: 2px 12px; }
/* captions stay inside the drawn border: the label may wrap, never spill; a lone button in the 2-up landscape grid takes the full width */
html body #actionSidebar:not([data-hand="1"]) .ui-detail__actions .ui-btn { min-width: 0; white-space: normal; overflow-wrap: anywhere; letter-spacing: 0.02em; }
html body #actionSidebar:not([data-hand="1"]) .ui-detail__actions .ui-btn > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
html body #actionSidebar:not([data-hand="1"]) .ui-detail__actions > .ui-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
html body #actionSidebar:not([data-hand="1"]) .ui-detail__hint { font-size: max(10px, var(--fs-note)); line-height: 1.3; }

/* spell / shop toolbar: chips on top, filters + sort + search on one or two compact lines */
/* Narrow list column (default): chips / filters / search + sort. The filters own a full row so their captions keep their intrinsic width. */
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chips chips" "filters filters" "search sorts"; gap: 2px 4px; margin-bottom: 3px;
}
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-filters { overflow-x: auto; scrollbar-width: none; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-filters::-webkit-scrollbar { display: none; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-filters .ui-segbtn { flex: 1 0 auto; min-width: max-content; padding-inline: 8px; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-sorts { flex-wrap: nowrap; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-sorts > * { flex: none; min-width: max-content; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-search__k { display: none; }   /* keyboard hint; the box keeps its room for text */
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"][hidden] { display: none; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-chips { grid-area: chips; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-filters { grid-area: filters; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-search { display: contents; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-search__box { grid-area: search; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] .ui-sorts { grid-area: sorts; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] :is(.ui-chipbtn, .ui-segbtn, .ui-search__box) { min-height: 26px; }
html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] :is(.ui-chipbtn, .ui-segbtn, .ui-search__input, .ui-search__k, .ui-sortbtn) { font-size: max(10px, var(--fs-note)); }
/* Wide list column (the toolbar is outside .ui-list--dense, so this follows the sidebar width): everything but the chips on one line. */
@media (min-width: 900px) {
  html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chips chips chips" "filters search sorts"; }
}
@media (orientation: landscape) and (max-height: 520px) {
  html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] { gap: 1px 3px; margin-bottom: 2px; }
  html body #actionSidebar:not([data-hand="1"]) .ui-subtabs[data-kind="spell"] :is(.ui-chipbtn, .ui-segbtn, .ui-search__box) { min-height: 24px; }
}

/* The detail text region must never size to zero: components.css gives .ui-detail__content `flex: 1 1 0`, which collapses to 0px
   whenever the detail sits in an auto-height grid row (sheet folded, or a plain note with no actions). Basis auto = its content height,
   still shrinkable and scrollable inside a fixed row. */
html body #actionSidebar:not([data-hand="1"]) .ui-detail { min-height: 0; display: flex; flex-direction: column; }
html body #actionSidebar:not([data-hand="1"]) .ui-detail__content { flex: 1 1 auto; min-height: 3.2em; }

/* short landscape, plain note on the right: the list gets the width the note does not need */
@media (orientation: landscape) and (max-height: 520px) {
  html body #actionSidebar:not([data-hand="1"]) .ui-menu__body:not(:has(.ui-detail__actions)):not(:has(.card-draft-host)) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); }
}

@media (orientation: portrait) {
  /* explicit areas for every state; the detail row is a real height (dvh, not a % of an indefinite box), so list + detail always both exist */
  html body #actionSidebar:not([data-hand="1"]) {
    --lay-tab-h: 34px; --lay-desc-h: 0px; gap: 3px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tabs" "head" "list" "detail" "desc";
    grid-template-rows: var(--lay-tab-h) auto minmax(72px, 1fr) minmax(128px, 38dvh) var(--lay-desc-h);
  }
  html body #actionSidebar:not([data-hand="1"]) > .ui-tabs { grid-area: tabs; }
  html body #actionSidebar:not([data-hand="1"]) > .ui-menu__head { grid-area: head; }
  html body #actionSidebar:not([data-hand="1"]) > .ui-desc { grid-area: desc; }
  html body #actionSidebar:not([data-hand="1"]) .ui-menu__body > .ui-list { grid-area: list; align-self: stretch; min-height: 0; }
  html body #actionSidebar:not([data-hand="1"]) .ui-menu__body > .ui-detail { grid-area: detail; align-self: stretch; max-height: none; }
  /* nothing to act on (empty list, plain note): the detail takes only what its text needs, capped */
  html body #actionSidebar:not([data-hand="1"]):not(:has(.ui-detail__actions)) { grid-template-rows: var(--lay-tab-h) auto minmax(72px, 1fr) auto var(--lay-desc-h); }
  html body #actionSidebar:not([data-hand="1"]):not(:has(.ui-detail__actions)) .ui-detail { max-height: 24dvh; }
  html body #actionSidebar:not([data-hand="1"])[data-sheet="min"] { grid-template-rows: var(--lay-tab-h) auto minmax(0, 1fr) auto var(--lay-desc-h); }
  html body #actionSidebar:not([data-hand="1"]) > .ui-desc { min-height: 0; padding-block: 0; border-width: 0; overflow: hidden; }
}
@media (orientation: landscape) and (max-height: 520px) {
  html body #actionSidebar:not([data-hand="1"]) { --lay-tab-h: 28px; --lay-desc-h: 22px; gap: 2px; }
}

/* ---------- card pack: three short choices on top, the selected card gets the room ---------- */
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .ui-detail :is(.ui-detail__hint, .ui-detail__en) { display: none; }
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-face:not([data-selected="true"]) { display: none; }   /* the list already offers the other two */
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-draft { margin: 0; gap: 0; }
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-draft__lead { margin: 0 0 3px; font-size: max(10px, var(--fs-note)); line-height: 1.3; }
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-face__fx { line-height: 1.35; }
/* No floating button: header / meta / effect / choose are one flex column filling the detail. The effect text is the only part that scrolls
   (min 3 lines), the choose button is a normal last item, so nothing is ever drawn under it. If the pane is shorter than that minimum the
   detail scroller (fallback) moves the whole face instead. */
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .ui-detail__content { min-height: 96px; overflow-x: hidden; overflow-y: auto; }
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) :is(.ui-detail__cols, .ui-detail__main, .card-draft-host, .card-draft) {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0;
}
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-draft__lead { flex: none; }
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-face[data-selected="true"] { flex: 1 1 auto; min-height: 0; gap: 3px; padding: 4px 6px; }
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-face__fx { flex: 1 1 auto; min-height: 4.05em; overflow-y: auto; overscroll-behavior: contain; }
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-face :is(.card-face__head, .card-face__meta) { flex: none; }
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-face__choose {
  position: static; flex: none; margin-top: 2px; min-height: 40px; padding: 2px 8px; flex-direction: row; flex-wrap: wrap; gap: 0 8px;
}
html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-face__free { font-size: max(10px, var(--fs-note)); }
@media (orientation: landscape) and (max-height: 520px) {
  html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .card-draft__lead { display: none; }   /* the tab and list already say it is a pack */
}
@media (orientation: portrait) {
  html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) { grid-template-rows: var(--lay-tab-h) auto auto minmax(160px, 1fr) var(--lay-desc-h); }
  html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .ui-list { align-self: start; }
  html body #actionSidebar:not([data-hand="1"]):has(.card-draft-host) .ui-detail { max-height: none; }
}
/* GB: names and costs of the three choices fit the rail instead of running past it */
html[data-skin="gb"] #sidebarList .ui-row[data-kind="cardChoice"] { min-width: 0; overflow: hidden; flex-wrap: nowrap; }
html[data-skin="gb"] #sidebarList .ui-row[data-kind="cardChoice"] .ui-row__name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="gb"] #sidebarList .ui-row[data-kind="cardChoice"] .ui-row__meta { flex: 0 1 auto; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }