/* Measured keyboard space is separate from safe-area/browser chrome. */
:root { --keyboard-inset: 0px; --keyboard-visible-height: 100dvh; --keyboard-visible-top: 0px; }
.watch-price-update { display: grid; align-content: start; min-width: 0; gap: 4px; }
.watch-price-update .hint { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.keyboard-done {
  position: fixed; z-index: 130; right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--keyboard-inset) + 12px); min-width: 64px; min-height: 46px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: 16px;
  font-weight: 700; touch-action: manipulation;
}
.keyboard-done[hidden] { display: none; }
@media screen {
  html[data-keyboard-open="true"] { scroll-padding-top: calc(var(--keyboard-visible-top) + 12px); scroll-padding-bottom: calc(var(--keyboard-inset) + 80px); }
  html[data-keyboard-open="true"] body::after { content: ''; display: block; height: calc(var(--keyboard-inset) + 90px); pointer-events: none; }
  html[data-keyboard-open="true"] .topbar,
  html[data-keyboard-open="true"] #panel-guide > .toolbar,
  html[data-keyboard-open="true"] #guideBody > .guide-reading-surface > .guide-nav { position: static; }
  html[data-keyboard-open="true"] .market-movers { position: relative; top: auto; }
  html[data-keyboard-open="true"] body[data-view="sheet"] #watchSearchDock {
    /* Anchor to the visible viewport's bottom edge (top + height) rather than
       the computed inset: stable while iOS pans the page under the keyboard. */
    top: calc(var(--keyboard-visible-top) + var(--keyboard-visible-height) - 58px);
    bottom: auto;
    width: min(420px, calc(100vw - 158px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    z-index: 129;
  }
  html[data-keyboard-open="true"]:not([data-keyboard-target="watchNameSearch"]) .watch-search-dock { display: none; }
  html[data-keyboard-open="true"] body .theme-fab { bottom: calc(var(--keyboard-inset) + 12px); }
  html[data-keyboard-open="true"] body .community-chat-fab { display: none; }
  html[data-keyboard-open="true"] #panel-sheet .watch-stage-bar.has-items { position: static; top: auto; bottom: auto; margin-top: 16px; }
  html[data-keyboard-open="true"] #panel-guide .guide-source-results,
  html[data-keyboard-open="true"] #panel-guide .guide-card-search-results,
  html[data-keyboard-open="true"] #panel-sheet .watch-set-filter-list { max-height: min(232px, calc(var(--keyboard-visible-height) * .45)); }
  html[data-keyboard-open="true"] :is(input[type="search"], input[role="combobox"]) { scroll-margin-block: 12px 80px; font-size: max(16px, 1rem); }
  html[data-keyboard-open="true"] :is(#guideSourceFind, #guideFind) { scroll-margin-top: 12px; }
  html:is(.account-dialog-open, .admin-dialog-open, :has(dialog[open])) :is(#watchSearchDock, .keyboard-done) { display: none; }
}
@media screen and (max-width: 760px) {
  html[data-keyboard-open="true"] body[data-view="sheet"] #watchSearchDock { left: 12px; width: calc(100vw - 100px); }
  html[data-keyboard-open="true"] body .theme-fab { display: none; }
}
@media print { .keyboard-done { display: none !important; } }
@media screen and (any-pointer: coarse) {
  /* Keep Safari from auto-magnifying focused controls even on wide iPads.
     This affects text size only; native pinch/page zoom remains available. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  select, textarea { font-size: max(16px, 1rem) !important; }
}

/* Working surfaces. Keep card art prominent; progressively reveal controls.
   Scoped rules intentionally leave the landing page and printed sheets alone. */

/* One sync status; fixed action tracks keep header geometry stable. */
@media screen {
  /* Page length, account text and ownership counts must not redistribute the
     navigation. Rows are chosen by viewport, never by the active page/state. */
  html { scrollbar-gutter: stable; }
  .topbar {
    display: grid;
    --header-save-width: 110px;
    --header-account-width: 190px;
    grid-template-columns: max-content minmax(0, max-content) minmax(0, 1fr) 145px max-content;
    grid-template-areas: "brand tabs sync progress actions";
  }
  /* Sync status lives in the header row as a compact pill; it collapses to
     nothing when everything is acknowledged. */
  .topbar > .sync-bar {
    grid-area: sync; align-self: center; justify-self: start; max-width: 100%;
    min-height: 0; height: 40px; margin: 0 8px; padding: 0 10px; gap: 8px; flex-wrap: nowrap;
    border: 1px solid var(--line); border-bottom-width: 1px; border-radius: 10px; font-size: 12px;
  }
  .topbar > .sync-bar .sync-bar-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar > .sync-bar .sync-bar-action { min-height: 44px; padding-inline: 8px; font-size: 12px; }
  .topbar > .sync-bar:has(.sync-bar-action:not([hidden])) { height: auto; min-height: 46px; }
  .topbar > .brand { grid-area: brand; min-width: 0; }
  /* Keep the wordmark's footprint independent of restored header copy. */
  .topbar > .brand > div {
    display: flex; flex-direction: column; justify-content: center; flex: none;
    width: 96px; min-width: 0; height: 44px;
  }
  .topbar .brand h1 { margin: 0; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .brand .sub {
    margin: 0; height: 16px; line-height: 16px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .topbar #tabs {
    grid-area: tabs; display: flex; flex: none; width: 100%; min-width: 0;
    height: auto; min-height: 54px; margin: 0; padding: 4px;
  }
  .topbar #tabs .tab { flex: 1 1 auto; min-width: 0; height: auto; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  .topbar #tabs .tab > span { min-width: 0; }
  .topbar > .progress-block {
    grid-area: progress; display: flex; flex-direction: column; justify-content: center;
    width: 100%; min-width: 0; height: 44px; margin: 0; overflow: hidden;
  }
  .topbar .progress-nums { white-space: nowrap; font-variant-numeric: tabular-nums; }
  body[data-view="home"] .topbar > .progress-block { display: flex; visibility: hidden; }
  /* Fixed tracks also constrain min-content sizing while button labels or
     account markup change. Disabled/pressed states use the same footprint. */
  body .topbar > .top-actions {
    grid-area: actions; display: grid; margin: 0; height: 44px;
    grid-template-columns: var(--header-save-width) var(--header-account-width);
  }
  .topbar .btn:active { transform: none; }
  .topbar .account-button { width: 190px; min-width: 190px; height: 44px; }
  .topbar .account-button img { flex: none; }
  /* Update details stay in Settings, never occupying header/card space. */
  .app-update-settings .row { gap: 8px; flex-wrap: wrap; }
  .app-update-settings button { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .app-update-settings [hidden] { display: none; }
  .app-refresh-recovery { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; overflow: auto; padding: 20px; background: var(--bg); }
  .app-refresh-recovery > .card { display: grid; gap: 12px; width: min(100%, 520px); min-width: 0; overflow-wrap: anywhere; }
  .app-refresh-recovery h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
  .app-refresh-recovery p { margin: 0; line-height: 1.5; }
  .app-refresh-recovery button { justify-self: start; min-height: 44px; white-space: normal; }
  .topbar #saveSync { position: relative; }
  .topbar #saveSync[data-sync="pending"] { color: var(--warn); }
  .topbar #saveSync[data-sync="storage-error"] { color: var(--bad); }
  .topbar #saveSync:is([data-sync="error"], [data-sync="conflict"], [data-sync="storage-error"])::after {
    content: '!'; position: absolute; right: -3px; top: -3px; display: grid; place-items: center;
    width: 16px; height: 16px; border-radius: 50%; background: var(--bad); color: var(--bg);
    font-size: 12px; line-height: 1; font-weight: 800;
  }
  .topbar .save-sync-button { flex: 0 0 110px; width: 110px; min-width: 110px; height: 44px; }
  .topbar .save-sync-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar .save-sync-icon { flex: none; }
  /* The account dot previously appeared/disappeared as an in-flow flex item. */
  .account-button::after { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ink-3); }
  .account-button[data-sync="pending"]::after { background: var(--warn); }
}
@media screen and (max-width: 1600px) {
  .topbar { --header-save-width: 44px; --header-account-width: 44px; }
  .topbar .save-sync-button { flex-basis: 44px; width: 44px; min-width: 44px; }
  .topbar .save-sync-label { display: none; }
  .topbar .account-button { width: 44px; min-width: 44px; max-width: 44px; padding-inline: 6px; gap: 1px; }
  .topbar .account-button span:last-child { display: none; }
}
@media screen and (min-width: 761px) and (max-width: 1279px) {
  /* iPad: brand, navigation, sync status, ownership and actions on one row.
     Everything stays; the pieces get smaller instead of stacking. */
  .topbar {
    gap: 6px;
    grid-template-columns: max-content minmax(0, max-content) minmax(0, 1fr) 120px max-content;
    grid-template-areas: "brand tabs sync progress actions";
  }
  .topbar > .brand { gap: 6px; }
  .topbar > .brand > div { width: 84px; }
  .topbar .brand .sub { display: none; }
  .topbar .brand h1 { font-size: 17px; }
  .topbar #tabs { height: auto; min-height: 48px; padding: 3px; gap: 1px; }
  .topbar #tabs .tab { height: auto; min-height: 44px; padding: 4px 8px; font-size: 13px; }
  .topbar #tabs .tab .tab-icon { width: 18px; height: 18px; }
  .topbar > .progress-block { width: 120px; justify-self: end; }
  .topbar .progress-nums { font-size: 13px; }
  .topbar > .sync-bar { margin: 0 4px; padding: 0 8px; font-size: 11px; }
}
@media screen and (min-width: 761px) and (max-width: 1023px) {
  /* Portrait iPad: icon above a small label keeps all five tabs on the row. */
  .topbar #tabs .tab {
    display: grid; justify-items: center; align-content: center; gap: 1px;
    padding: 2px 6px; font-size: 11px; line-height: 1.1;
  }
  .topbar #tabs .tab .tab-icon { margin: 0; }
  /* No room beside five tabs in portrait: while a sync state is showing, it
     takes a slim second row instead of squeezing the navigation. */
  .topbar:has(> .sync-bar:not([hidden])) {
    grid-template-areas: "brand tabs . progress actions" "sync sync sync sync sync";
  }
  .topbar > .sync-bar { height: 30px; margin: 0; justify-self: stretch; }
}
@media screen and (max-width: 760px) {
  /* Use the same in-header navigation on every phone view. Switching to
     Watchlist no longer moves it from the bottom or changes its dimensions. */
  .topbar {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas: "brand progress actions" "tabs tabs tabs" "sync sync sync";
  }
  .topbar > .sync-bar { grid-area: sync; margin: 0; }
  .topbar > .progress-block { height: 44px; width: 100%; justify-self: end; align-items: center; }
  .topbar > .progress-block .bar { display: none; }
  .topbar #tabs {
    position: static; display: grid; width: 100%; min-width: 0;
    height: auto; min-height: 56px; padding: 5px; border-radius: 12px; box-shadow: none;
  }
  .topbar #tabs .tab { min-width: 0; }
  /* Keep the navigation row in flow while typing. Dismissing the keyboard
     to tap Sync must not insert a row and move the page underneath it. */
  html[data-keyboard-open="true"] .topbar #tabs { visibility: hidden; pointer-events: none; }
}
@media screen and (max-width: 420px) {
  .topbar > .brand > div { display: none; }
}

/* Search feedback is contextual, and never expands or clears saved filters. */
.watch-search-feedback {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin-top: 10px; padding: 10px 12px;
  border-left: 3px solid var(--accent); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
}
.watch-search-feedback > span { display: grid; gap: 3px; min-width: 0; flex: 1 1 210px; }
.watch-search-feedback strong { font-size: 14px; overflow-wrap: anywhere; }
.watch-search-feedback small { font-size: 14px; color: var(--ink-2); }
.watch-search-feedback > div { display: flex; flex-wrap: wrap; gap: 8px; }
.watch-search-feedback .btn { min-height: 44px; font-size: 14px; }
.watch-name-search-clear { font-size: 14px; }
#panel-sheet .watch-set-filter-row strong { font-size: 14px; }
#panel-sheet .watch-set-filter-row small { font-size: 12px; }
#panel-sheet .watch-set-filter-row strong,
#panel-sheet .watch-set-filter-row small { white-space: normal; overflow-wrap: anywhere; }
#panel-sheet .watch-set-filter-head .btn,
#panel-sheet .watch-set-filter-actions .btn { min-height: 44px; font-size: 14px; }
#panel-sheet .watch-set-filter-search > span,
#panel-sheet .watch-set-filter-summary { font-size: 12px; }
#guideSourceFind, #guideFind { scroll-margin-top: calc(var(--shell-header-height) + 16px); }
#panel-guide .guide-source-search-box > input,
#panel-guide .guide-card-search-box > input { min-height: 44px; font-size: 16px; }
#panel-guide .guide-source-search-box > button,
#panel-guide .guide-card-search-box > button { min-width: 44px; min-height: 44px; }
#panel-guide .guide-source-copy strong,
#panel-guide .guide-card-search-main strong { font-size: 14px; }
#panel-guide .guide-source-copy small,
#panel-guide .guide-card-search-results > button > small { font-size: 12px; }

/* Page-scoped ownership: one calm touch target, with immediate bounded undo. */
/* A permanent search panel overlays the book, never reflows the Guide rails. */
#panel-guide .guide-set-picker-host { width: 100%; min-width: 0; grid-column: 1 / -1; }
#panel-guide .guide-workspace-title h2 { font-size: 22px; line-height: 1.2; }
#panel-guide .guide-workspace-title p { display: none; }
#panel-guide #setPickerControl { display: block; width: 100%; min-width: 0; margin: 0; gap: 0; order: 0; }
#panel-guide #setSearchToggle { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-3); color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
#panel-guide #setSearchToggle svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; }
#setSearchCurrent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-guide #setSearchToggle[aria-expanded="true"] { border-color: var(--accent); }
#panel-guide #setSearchBackdrop { position: fixed; inset: 0; z-index: 110; background: rgb(0 0 0 / .12); }
#panel-guide #setSearchPanel { position: fixed; z-index: 111; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; width: min(600px, calc(100vw - 24px)); height: min(540px, calc(100dvh - 24px)); padding: 8px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--bg-2); color: var(--ink); box-shadow: 0 16px 50px rgb(0 0 0 / .4); }
#panel-guide #setSearchPanel[hidden], #panel-guide #setSearchBackdrop[hidden] { display: none; }
#panel-guide .set-search-panel-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 6px; }
#panel-guide .set-search-panel-head #setPickerLabel { margin: 0; font-size: 16px; color: var(--ink); }
#panel-guide #setSearchClose { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 24px; cursor: pointer; }
#panel-guide .set-search-panel-head > .set-combo { flex: 1 1 auto; }
@media (prefers-reduced-motion: no-preference) {
  #panel-guide #setSearchPanel:not([hidden]) { animation: guide-search-slide-in 180ms ease-out; }
  @keyframes guide-search-slide-in { from { opacity: .5; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
}
#panel-guide #setPickerLabel { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
#panel-guide .set-combo { display: block; position: relative; width: 100%; min-width: 0; }
#panel-guide .set-search-icon { position: absolute; top: 12px; left: 12px; width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; pointer-events: none; }
#panel-guide #setSearch { width: 100%; min-width: 0; max-width: none; min-height: 44px; padding: 8px 10px 8px 40px; font-size: 16px; text-overflow: ellipsis; }
/* Only results scroll; the focused input stays above the visible keyboard. */
#panel-guide #setDrop {
  position: static; inset: auto; width: 100%; max-width: 100%;
  flex: 1 1 auto; min-height: 0; max-height: none;
  margin-top: 0; padding: 0; box-sizing: border-box; border: 0; border-radius: 0;
  overflow-x: hidden; overflow-y: auto; box-shadow: none; overscroll-behavior: contain;
}
#panel-guide #setDrop[hidden] { display: none; }
#panel-guide #setDrop .row:has(.set-choice-copy),
#panel-guide #setDrop .set-choice-columns { display: grid; grid-template-columns: minmax(0, 1fr) 48px 72px 72px; align-items: center; gap: 2px; padding: 0 4px; }
#panel-guide #setDrop .row:has(.set-choice-copy) { min-height: 44px; border-radius: 5px; }
#panel-guide #setDrop .set-choice-columns { position: sticky; top: 0; z-index: 2; min-height: 28px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
#panel-guide #setDrop .set-choice-columns span { font-size: 14px; color: var(--ink-2); text-align: center; }
#panel-guide #setDrop .set-choice-columns span:first-child { text-align: left; }
#panel-guide #setDrop .set-choice-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; gap: 2px; }
#panel-guide #setDrop .set-choice-open { display: grid; align-content: center; gap: 2px; width: 100%; min-width: 0; min-height: 44px; padding: 3px 2px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
#panel-guide #setDrop .set-choice-copy .nm { white-space: normal; overflow-wrap: anywhere; word-break: normal; font-size: 14px; line-height: 1.25; }
#panel-guide #setDrop .set-choice-copy small { font-size: 12px; line-height: 1.25; }
#panel-guide #setDrop .set-choice-progress { min-height: 2.5em; white-space: pre-line; font-variant-numeric: tabular-nums; color: var(--ink-2); }
#panel-guide #setDrop .set-choice-na { display: block; text-align: center; color: var(--ink-3); }
#panel-guide #setDrop .set-choice-topup { width: 44px; min-height: 44px; padding: 0; font-size: 22px; text-align: center; border: 1px solid var(--line); border-radius: 5px; }
#panel-guide #setDrop .set-choice-check { flex-direction: row; flex-wrap: nowrap; width: 44px; min-height: 44px; gap: 0; justify-content: center; margin: 0 auto; }
#panel-guide #setDrop .set-choice-base input:disabled { opacity: 1; cursor: default; }
#panel-guide #setDrop .set-create-binder { grid-template-columns: 28px minmax(0, 1fr); min-height: 44px; gap: 7px; padding: 6px; }
#panel-guide #setDrop .set-create-binder-icon { width: 28px; height: 28px; }
#panel-guide #setDrop .set-create-binder-arrow { display: none; }
#panel-guide #setDrop .set-create-binder-copy strong { font-size: 14px; }
#panel-guide #setDrop .set-create-binder-copy small { display: none; }
#panel-guide #setDrop .set-create-binder { margin-top: 6px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
#panel-guide #setDrop .set-picker-help summary { min-height: 44px; padding: 10px 6px; box-sizing: border-box; font-size: 14px; color: var(--ink-2); cursor: pointer; }
#panel-guide #setDrop .era { position: static; padding: 3px 6px; margin-top: 2px; text-transform: none; letter-spacing: normal; }
#panel-guide #setDrop .set-choice-hint { margin: 6px; }
#panel-guide #setDrop :is(.set-choice-hint, .era, .none) { font-size: 12px; }
/* Names get their own line before controls become narrow. Keep readable labels
   beside all three checkboxes without growing rem-sized columns at large text. */
#panel-guide #setSearchPanel[data-stacked="true"] #setDrop .row:has(.set-choice-copy) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; padding: 2px 4px; border-bottom: 1px solid var(--line); }
#panel-guide #setSearchPanel[data-stacked="true"] #setDrop .set-choice-copy { grid-column: 1 / -1; }
#panel-guide #setSearchPanel[data-stacked="true"] #setDrop .set-choice-columns { grid-template-columns: minmax(0, 1fr); }
#panel-guide #setSearchPanel[data-stacked="true"] #setDrop .set-choice-columns > span:not(:first-child) { display: none; }
#panel-guide #setSearchPanel[data-stacked="true"] #setDrop .set-choice-check { width: 100%; justify-content: flex-start; gap: 4px; box-sizing: border-box; padding: 2px; }
#panel-guide #setSearchPanel[data-stacked="true"] #setDrop .set-choice-check .sr-only { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none; white-space: normal !important; font-size: 14px; }
#panel-guide #setSearchPanel[data-stacked="true"] #setDrop .set-choice-check { flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; }
#panel-guide #setSearchPanel[data-stacked="true"] #setDrop .set-choice-check .sr-only { font-size: 12px; overflow-wrap: anywhere; text-align: center; }
#panel-guide #energyMode[hidden], #guideLayoutChoose[hidden], #guideLayoutCompact[hidden] { display: none; }
#panel-guide .guide-layout-field { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
#panel-guide .guide-layout-choose { width: 100%; min-height: 44px; padding: 8px 10px; text-align: left; white-space: normal; font-size: 14px; }
#panel-guide .guide-layout-space { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-2); }
#panel-guide .guide-layout-space[data-warning="true"] { color: var(--warn); }
#panel-guide .guide-layout-compact { width: 100%; min-height: 44px; margin-top: 4px; color: var(--accent); font-size: 14px; }
.guide-layout-dialog { position: fixed; inset: auto; margin: 0; box-sizing: border-box; max-width: none; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.guide-layout-dialog::backdrop { background: rgba(4, 9, 19, .65); }
.guide-layout-dialog > header { display: flex; position: static; align-items: center; justify-content: space-between; gap: 8px; padding: 0; background: transparent; border: 0; }
.guide-layout-dialog h2 { margin: 0; font-size: 18px; }
.guide-layout-dialog [data-layout-close] { min-height: 44px; padding: 6px 10px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3); color: var(--ink); font-size: 14px; }
.guide-layout-context, .guide-layout-note { margin: 8px 0; font-size: 12px; color: var(--ink-2); }
.guide-layout-options { display: grid; gap: 6px; }
.guide-layout-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; }
.guide-layout-option strong { font-size: 14px; }
.guide-layout-option > span { min-width: 0; overflow-wrap: anywhere; }
.guide-layout-option small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.guide-layout-option.is-discouraged { background: var(--bg-3); color: var(--ink-2); border-style: dashed; }
.guide-layout-option[aria-pressed="true"] { border: 2px solid var(--accent); padding: 8px 9px; }
.guide-layout-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-layout-metric { text-align: right; font-variant-numeric: tabular-nums; }
.guide-layout-metric b { font-size: 14px; white-space: nowrap; }
.guide-layout-dialog[data-narrow="true"] .guide-layout-option { grid-template-columns: minmax(0, 1fr); }
.guide-layout-dialog[data-narrow="true"] .guide-layout-metric { text-align: left; }
/* Binder setup is a working surface, never a nested disclosure. Use the rail's
   actual width so phone/tablet controls align without squeezing desktop labels. */
@media screen {
  #panel-guide > .toolbar #guideTools {
    container: guide-controls / inline-size; width: 100%; min-width: 0;
    display: grid; gap: 8px; padding: 0; margin: 0; border: 0; background: none;
  }
  #panel-guide .guide-controls-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
  #panel-guide #guideTools .guide-controls-body { display: grid; gap: 8px; min-width: 0; }
  #panel-guide .guide-controls-grid > .field,
  #panel-guide .guide-opening-controls > .field { min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
  #panel-guide .guide-controls-grid > .field > label,
  #panel-guide .guide-opening-controls > .field > label { margin: 0; font-size: 14px; }
  #panel-guide .guide-controls-grid .guide-layout-field { grid-column: 1 / -1; }
  #panel-guide .guide-controls-grid .guide-binder-size { grid-column: 1 / -1; }
  #panel-guide .guide-display-controls {
    display: flex; flex-wrap: wrap; gap: 0 10px; border-block: 1px solid var(--line);
  }
  #panel-guide .guide-display-controls > .check {
    flex: 1 1 84px; min-width: 0; min-height: 44px; padding: 0; gap: 6px;
    font-size: 14px; line-height: 1.3; white-space: normal;
  }
  #panel-guide .guide-display-controls input { flex: none; width: 20px; height: 20px; margin: 0; }
  #panel-guide .guide-opening-controls { display: grid; gap: 6px; min-width: 0; }
  #panel-guide .guide-opening-controls > .guide-start-page-control { grid-column: 1 / -1; }
  #panel-guide .guide-opening-controls > .guide-opening-override { padding: 5px 7px; min-height: 44px; margin: 0; gap: 6px; font-size: 14px; }
  #panel-guide .guide-opening-override small { font-size: 12px; margin-top: 1px; }
  #panel-guide .guide-opening-controls .guide-opening-preset { display: grid; gap: 3px; }
  #panel-guide .guide-binder-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    border-top: 1px solid var(--line); padding-top: 8px;
  }
  #panel-guide #guideTools .btn {
    width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 6px 8px;
    font-size: 14px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
  }
  #panel-guide #guideTools .btn[hidden] { display: none; }
  #panel-guide #guideTools .guide-binder-actions .btn { background: transparent; border-color: var(--line); border-radius: 8px; }
  #panel-guide .guide-binder-actions .guide-complete { color: var(--ok); }
  #panel-guide #guideTools .guide-opening-preset small { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
  #panel-guide #guideTools .guide-layout-space { font-variant-numeric: tabular-nums; line-height: 1.35; }
  @container guide-controls (min-width: 300px) {
    #panel-guide .guide-opening-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 6px 8px; }
    #panel-guide .guide-opening-controls .guide-opening-preset { grid-column: auto; }
  }
  /* Native selects cannot wrap the selected option. Give Sort and Page layout
     enough text width before sharing a row, not two 146px fields on phones. */
  @container guide-controls (min-width: 30rem) {
    #panel-guide .guide-controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Wide rails use two aligned groups instead of four full-width bands. Rem
     thresholds return to stacked controls when text is enlarged. */
  @container guide-controls (min-width: 42rem) {
    #panel-guide #guideTools .guide-controls-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
    #panel-guide #guideTools .guide-controls-grid { grid-column: 1; grid-row: 1 / 4; grid-template-columns: minmax(0, 1fr); }
    #panel-guide #guideTools .guide-display-controls { grid-column: 2; grid-row: 1; border-top: 0; }
    #panel-guide #guideTools .guide-opening-controls { grid-column: 2; grid-row: 2; }
    #panel-guide #guideTools .guide-binder-actions { grid-column: 2; grid-row: 3; }
    #panel-guide #guideTools .guide-opening-preset { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 3px; }
  }
  @container guide-controls (min-width: 60rem) {
    #panel-guide #guideTools .guide-controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}
@media (max-width: 340px) { .guide-layout-option { grid-template-columns: minmax(0, 1fr); } .guide-layout-metric { text-align: left; } }
#panel-guide .guide-library { min-width: 0; width: 100%; grid-column: 1 / -1; }
#panel-guide .guide-library summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px; border-radius: 9px; cursor: pointer; list-style: none;
  color: var(--ink); font-size: 14px; line-height: 1.4; touch-action: manipulation;
}
#panel-guide .guide-library summary::-webkit-details-marker { display: none; }
#panel-guide .guide-library summary::before { content: none; }
#panel-guide .guide-library summary::after {
  content: '⌄'; flex: 0 0 auto; margin-left: auto; color: var(--ink-3);
}
#panel-guide .guide-library details[open] > summary::after,
#panel-guide .guide-library[open] > summary::after { transform: rotate(180deg); }
#panel-guide .guide-library > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid var(--line); background: var(--bg);
}
#panel-guide .guide-library-heading {
  display: grid; gap: 4px; min-width: 0; font-weight: 700; overflow-wrap: anywhere;
}
#panel-guide .guide-library-heading > small {
  display: block; overflow-wrap: anywhere; color: var(--ink-2); font-size: 12px; font-weight: 400;
}
#panel-guide .guide-library > summary::after { grid-column: 2; grid-row: 1; }
#panel-guide .guide-library summary::marker { content: ''; }
#panel-guide .guide-library-body { display: grid; gap: 10px; min-width: 0; padding-top: 12px; }
#panel-guide .guide-library-browse {
  max-height: min(400px, 46dvh); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; border: 1px solid var(--line); border-radius: 10px;
}
#panel-guide .guide-library-browse[hidden] { display: none; }
#panel-guide .guide-library-browse > details + details { border-top: 1px solid var(--line); }
#panel-guide .guide-library-browse > details > summary { font-weight: 700; }
#panel-guide .guide-library summary > small { color: var(--ink-2); font-size: 12px; padding: 2px 7px; border-radius: 20px; background: var(--bg-3); flex: none; }
#panel-guide .guide-library-eras { padding: 0 4px 6px 8px; }
#panel-guide .guide-library-eras summary { font-weight: 550; }
#panel-guide .guide-library-list { display: grid; gap: 4px; padding: 0 4px 6px; }
#panel-guide .guide-set-search { display: grid; gap: 6px; padding: 8px 10px 12px; min-width: 0; }
#panel-guide .guide-set-search > label { font-size: 14px; font-weight: 550; }
#panel-guide .guide-set-search > div { position: relative; min-width: 0; }
#panel-guide #guideSetFind { width: 100%; min-width: 0; min-height: 44px; padding: 9px 44px 9px 10px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
#panel-guide #guideSetClear { position: absolute; right: 0; top: 0; width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink-2); font-size: 22px; cursor: pointer; }
#panel-guide #guideSetFind::-webkit-search-cancel-button { display: none; }
#panel-guide #guideSetStatus { font-size: 12px; color: var(--ink-2); }
#panel-guide .guide-library [hidden] { display: none; }
#panel-guide .guide-library-row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px;
  padding: 8px; border: 1px solid transparent; border-radius: 8px;
  color: var(--ink); background: var(--bg); font: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
#panel-guide .guide-library-row > span:first-child { display: grid; gap: 3px; min-width: 0; flex: 1; }
#panel-guide .guide-library-row strong { font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
#panel-guide .guide-library-row small { font-size: 12px; color: var(--ink-3); }
#panel-guide .guide-library-row-mark { color: var(--ink-3); }
#panel-guide .guide-library-row[aria-current] {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
#panel-guide .guide-library-row[aria-current] .guide-library-row-mark { color: var(--ok); }
#panel-guide .guide-library-row:hover, #panel-guide .guide-library summary:hover { background: var(--bg-3); }
#panel-guide .guide-library :is(button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#panel-guide .guide-library-empty { padding: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
#panel-guide .guide-library .guide-source-controls { padding: 0; border: 0; }
#panel-guide .guide-library .guide-source-results {
  position: static; width: 100%; max-height: min(400px, 46dvh);
  margin-top: 8px; box-shadow: none;
}
#panel-guide .guide-library .guide-source-results > button { grid-template-columns: minmax(0, 1fr); }
#panel-guide .guide-library .guide-source-copy { grid-column: 1; grid-row: auto; padding: 0; }
#panel-guide .guide-library .guide-source-copy :is(strong, small) { white-space: normal; overflow-wrap: anywhere; }
#panel-guide .guide-library .guide-source-code { display: none; }
#panel-guide .guide-library .guide-source-current { grid-column: 1; grid-row: auto; font-size: 12px; }
#panel-guide .guide-library .guide-source-group { font-size: 12px; }
#panel-guide .guide-library .guide-source-empty { font-size: 14px; }

#guideBody .guide-page-head { flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; }
#guideBody .guide-page-info { display: grid; gap: 3px; min-width: 0; flex: 1 1 8em; }
#guideBody .guide-page-info > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#guideBody .guide-page-complete {
  /* Reserve the same text-relative space for Complete and Done so neither
     larger text nor checking off a page can resize its header. */
  flex: 0 0 max(104px, 7.5em); width: max(104px, 7.5em); max-width: 100%; min-height: 44px; margin: 0; padding: 6px 8px;
  font-size: 14px; white-space: nowrap; line-height: 1.3; touch-action: manipulation;
}
#guideBody .guide-page-complete[aria-disabled="true"] { color: var(--ok); cursor: default; }
/* Completion/Undo never adds a row above the book or moves the scroll anchor. */
#guidePageFeedback { position: fixed; z-index: 80; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: min(360px, calc(100vw - 32px)); }
#guidePageFeedback:empty { display: none; }
.guide-page-feedback {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 6px 10px; margin: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); color: var(--ink-2); font-size: 14px;
}
.guide-page-feedback .btn { min-height: 44px; font-size: 14px; }
@media print {
  /* Let existing print layouts place the book/checklist, not its screen rail. */
  #guideBody > .guide-reading-surface { display: contents; }
  .guide-page-complete, #guidePageFeedback { display: none !important; }
  #guideBody .guide-page-head { min-height: 0; }
  #guideBody .guide-page-info { display: contents; }
  #guideBody .guide-page-info > span { overflow: visible; white-space: normal; }
}

/* Binder Guide: controls left, a centered reading surface, details right.
   Narrow screens stack naturally. Search stays outside the rebuilt book. */
@media screen {
  #panel-guide.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  #panel-guide > .toolbar {
    position: static;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg-2);
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  /* A bounded scrolling rail must scroll its controls, never shrink them. */
  #panel-guide > .toolbar > * { flex: 0 0 auto; min-width: 0; max-width: 100%; }
  #panel-guide > .toolbar > .spacer { display: none; }
  #panel-guide .guide-workspace-title h2 {
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -0.035em;
  }
  #panel-guide .guide-workspace-title p {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 5px;
  }
  #panel-guide > .toolbar #guideView {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px;
    border-radius: 10px;
    background: var(--bg);
    height: auto;
    min-height: 54px;
    overflow: visible;
  }
  #panel-guide > .toolbar #guideView button {
    min-height: 44px;
    font-size: 14px;
    padding: 8px;
    box-shadow: none;
    text-align: center;
    white-space: normal;
  }
  #panel-guide .guide-card-search {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }
  #panel-guide .guide-card-search-box { min-width: 0; }
  #panel-guide .guide-card-search-box > input {
    box-sizing: border-box; min-width: 0; max-width: 100%; font-size: 16px;
  }
  #panel-guide .guide-card-search-box:has(> button[hidden]) > input { padding-right: 12px; }
  #panel-guide .guide-card-search > label,
  #panel-guide .guide-source-search > label {
    font-size: 12px;
    font-weight: 550;
    color: var(--ink-2);
  }
  #panel-guide > .toolbar .btn {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 10px;
    box-shadow: none;
  }
  #panel-guide .guide-tools > summary {
    display: grid;
    padding: 12px;
    background: var(--bg);
    font-size: 13px;
  }
  #panel-guide .guide-tools-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 16px;
  }
  #panel-guide .guide-source-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line);
  }
  #panel-guide .guide-source-controls .guide-source-search {
    margin: 0 0 6px;
  }
  #panel-guide > .toolbar .guide-primary-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  #panel-guide > .toolbar .field.inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    min-width: 0;
  }
  #panel-guide > .toolbar .field label {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
  }
  #panel-guide > .toolbar select,
  #panel-guide > .toolbar input[type="number"] {
    min-width: 0;
    min-height: 44px;
    width: 100%;
    padding: 9px 10px;
    font-size: 14px;
    border-radius: 10px;
    background: var(--bg);
  }
  #panel-guide .guide-binder-size > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 8px;
  }
  #panel-guide .guide-more {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
  }
  #panel-guide .guide-more > summary {
    padding: 12px;
    font-size: 13px;
  }
  #panel-guide .guide-more > summary small {
    font-size: 10px;
    color: var(--ink-3);
  }
  #panel-guide .guide-more-body {
    padding: 0 12px 12px;
    gap: 12px;
  }
  #panel-guide .guide-more-body > .check {
    border: 0;
    padding: 6px 0;
    border-radius: 0;
    background: none;
    font-size: 12px;
    line-height: 1.45;
  }
  #panel-guide .guide-more-body > .check input {
    width: 20px;
    height: 20px;
    flex: none;
  }
  #guideBody {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
  }
  #guideBody > .guide-reading-surface {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    order: 1;
  }
  #guideBody > .card,
  #guideBody > .guide-reading-surface > .card {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    box-shadow: none;
  }
  #guideBody > .guide-tally,
  #guideBody > .custom-binder-summary {
    order: 0;
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    width: 100%;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(145px, 0.7fr) minmax(0, 2fr);
    gap: 14px 24px;
    align-items: center;
    background: var(--bg-2);
    border-radius: 14px;
  }
  #guideBody > .card:has(.totals) {
    position: static;
    top: auto;
    grid-column: auto;
    grid-row: auto;
    max-height: none;
    overflow: visible;
  }
  #guideBody .guide-card-options {
    min-width: 0;
  }
  #guideBody .guide-card-options[open] {
    grid-column: 1/-1;
  }
  #guideBody .guide-card-options[open] + .guide-value-totals {
    grid-column: 1/-1;
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }
  #guideBody .guide-card-options > summary {
    font-size: 13px;
    min-height: 42px;
  }
  #guideBody > .guide-tally .guide-card-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 12px 0 0;
  }
  #guideBody > .guide-tally .guide-card-groups .check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 9px;
    align-content: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    background: var(--bg);
  }
  #guideBody > .guide-tally .guide-card-groups .check:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  }
  #guideBody > .guide-tally .guide-card-groups .check input {
    width: 20px;
    height: 20px;
  }
  #guideBody > .guide-tally .guide-card-groups .check em {
    grid-column: 2;
    margin: 0;
    font-size: 10px;
    font-style: normal;
  }
  #guideBody > .card:has(.totals) .totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-direction: row;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
    align-items: start;
  }
  #guideBody > .card:has(.totals) .totals:has(> div:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #guideBody > .card:has(.totals) .totals strong {
    font-size: clamp(17px, 1.8vw, 23px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  #guideBody > .card:has(.totals) .totals span {
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1.4;
    margin-top: 5px;
  }
  #guideBody .custom-summary-head .home-kicker {
    display: none;
  }
  #guideBody .custom-summary-head h2 {
    font-size: 15px;
  }
  #guideBody .custom-summary-head > span {
    color: var(--ink-3);
    font-size: 11px;
  }
  #guideBody .custom-summary-progress {
    display: none;
  }
  #guideBody .guide-promo-placement {
    grid-column: 1/-1;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  #guideBody > .guide-reading-surface > .guide-nav {
    order: 2;
    position: sticky;
    top: calc(var(--shell-header-height) + 8px);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(80px, 120px) 44px auto;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-2);
    box-shadow: 0 5px 16px #0002;
  }
  #guideBody > .guide-reading-surface > .guide-nav .nav-turn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    border-radius: 9px;
  }
  #guideBody > .guide-reading-surface > .guide-nav .nav-mid {
    min-width: 0;
  }
  #guideBody > .guide-reading-surface > .guide-nav .nav-mid strong {
    font-size: 14px;
  }
  #guideBody > .guide-reading-surface > .guide-nav .nav-mid span {
    font-size: 10px;
  }
  #guideBody > .guide-reading-surface > .guide-nav #navJump {
    min-width: 0;
    width: 100%;
    font-size: 13px;
    padding: 9px;
  }
  #guideBody > .guide-reading-surface > .guide-nav #guideWatchlist {
    min-height: 44px;
    min-width: 0;
    font-size: 13px;
    padding: 9px 14px;
    box-shadow: none;
  }
  #guideBody > .guide-reading-surface > .guide-layout-editor {
    order: 1;
  }
  #guideBody > .guide-reading-surface > .book,
  #guideBody > .guide-reading-surface > .guide-checklist {
    order: 3;
    margin: 0 auto;
    width: 100%;
  }
  #guideBody > .guide-reading-surface > .guide-checklist {
    overflow-x: auto;
  }
  #guideBody > .guide-reading-surface > .book {
    max-width: min(100%, var(--guide-book-max, 1300px));
  }
  #guideBody > .guide-reading-surface > details.planner {
    order: 4;
    grid-row: auto;
    width: 100%;
    margin: 0;
    border-radius: 12px;
    padding: 14px 16px;
  }
  #guideBody > .guide-reading-surface > .empty-state {
    order: 3;
    padding: 40px 20px;
  }
  #guideBody > .guide-reading-surface > .empty-state p {
    color: var(--ink-3);
    margin-top: 8px;
    font-size: 14px;
  }
}
@media screen and (min-width: 1180px) {
  #panel-guide.is-active {
    --guide-rail-width: clamp(212px, 16vw, 248px);
    grid-template-columns: var(--guide-rail-width) minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 20px;
  }
  #panel-guide > .toolbar {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--shell-header-height) + 14px);
    max-height: calc(100dvh - var(--shell-header-height) - 28px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  #guideBody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--guide-rail-width);
    align-items: start;
    gap: 20px;
    grid-column: 2;
    grid-row: 1;
  }
  #guideBody > .guide-reading-surface {
    grid-column: 1;
    grid-row: 1;
  }
  #guideBody > .card:has(.totals) {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    align-self: start;
    position: sticky;
    top: calc(var(--shell-header-height) + 14px);
    max-height: calc(100dvh - var(--shell-header-height) - 28px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    padding: 14px;
    gap: 14px;
  }
  #guideBody > .guide-tally .guide-card-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  #guideBody > .guide-tally .guide-card-groups .check {
    padding: 10px;
    min-height: 44px;
  }
  #guideBody > .card:has(.totals) .totals,
  #guideBody > .card:has(.totals) .totals:has(> div:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }
  #guideBody > .card:has(.totals) .totals strong {
    font-size: 22px;
  }
  #guideBody > .card:has(.totals) .totals span {
    font-size: 11px;
  }
  html[data-keyboard-open="true"] #guideBody > .card:has(.totals) {
    position: static;
    max-height: none;
    overflow: visible;
  }
  #panel-guide .guide-tools > summary {
    display: none;
  }
  #panel-guide .guide-tools-body {
    padding-top: 0;
  }
}
@media screen and (min-width: 701px) and (max-width: 1179px) {
  #panel-guide > .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }
  #panel-guide .guide-workspace-title {
    grid-column: 1;
    grid-row: 1;
  }
  #panel-guide > .toolbar #guideView {
    grid-column: 2;
    grid-row: 1;
  }
  #panel-guide .guide-set-picker-host {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  #panel-guide .guide-library {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  #panel-guide > .toolbar #guideCardSearch {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  #panel-guide > .toolbar #guideTools { grid-column: 1 / -1; grid-row: 4; }
  #panel-guide .guide-tools {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
  #panel-guide .guide-tools[open] {
    grid-column: 1/-1;
    grid-row: 4;
  }
  #panel-guide .guide-tools-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  #panel-guide > .toolbar .guide-primary-controls {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #panel-guide .guide-more {
    grid-column: 1/-1;
  }
  #panel-guide .guide-more-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media screen and (max-width: 700px) {
  #panel-guide > .toolbar {
    padding: 12px;
    gap: 10px;
  }
  #panel-guide .guide-workspace-title h2 {
    font-size: 21px;
  }
  #panel-guide .guide-workspace-title p {
    display: none;
  }
  #panel-guide .guide-card-search-box > input,
  #panel-guide .guide-source-search-box > input,
  #panel-guide > .toolbar select,
  #panel-guide > .toolbar input[type="number"] {
    font-size: 16px;
  }
  #guideBody > .guide-tally,
  #guideBody > .custom-binder-summary {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
    gap: 12px;
  }
  #guideBody .guide-card-options > summary {
    min-height: 38px;
  }
  #guideBody > .card:has(.totals) .totals {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    gap: 10px;
  }
  #guideBody > .card:has(.totals) .totals:has(> div:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #guideBody > .guide-tally .guide-card-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  #guideBody > .guide-tally .guide-card-groups .check {
    padding: 9px;
    font-size: 11px;
  }
  #guideBody > .guide-reading-surface > .guide-nav {
    grid-template-columns: 44px repeat(2, minmax(0, 1fr)) 44px;
    gap: 6px;
    padding: 6px;
  }
  #guideBody > .guide-reading-surface > .guide-nav .nav-mid {
    grid-column: 2/4;
    grid-row: 1;
  }
  #guideBody > .guide-reading-surface > .guide-nav [data-nav="prev"] {
    grid-column: 1;
    grid-row: 1;
  }
  #guideBody > .guide-reading-surface > .guide-nav [data-nav="next"] {
    grid-column: 4;
    grid-row: 1;
  }
  #guideBody > .guide-reading-surface > .guide-nav #navJump {
    grid-column: 1/3;
    grid-row: 2;
    min-height: 40px;
    font-size: 16px;
  }
  #guideBody > .guide-reading-surface > .guide-nav #guideWatchlist {
    grid-column: 3/5;
    grid-row: 2;
    font-size: 12px;
    padding: 9px;
  }
  #guideBody > .guide-reading-surface > .book {
    max-width: 100%;
  }
}

/* Watchlist keeps its card and print renderers, with quieter commands and
   one consistent filter surface. Never constrain the fixed search dock. */
@media screen {
  #panel-sheet .watch-controls {
    padding: 12px;
    background: var(--bg-2);
    border-radius: 10px;
    box-shadow: none;
  }
  #panel-sheet .watch-page-head-minimal {
    grid-area: title;
    padding: 0;
    margin: 0;
    border: 0;
  }
  #panel-sheet .watch-page-head-minimal h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.04em;
  }
  #panel-sheet .watch-page-head-minimal .hint {
    font-size: 14px;
    margin-top: 6px;
    color: var(--ink-3);
  }
  #panel-sheet .watch-command-bar {
    padding: 0;
    border: 0;
    background: none;
  }
  #panel-sheet .watch-command-row {
    display: grid;
    grid-template-columns: auto auto minmax(220px, 1fr) auto;
    grid-template-areas: 'title view sync add';
    align-items: center;
    gap: 6px 12px;
  }
  #panel-sheet .watch-view-switch {
    grid-area: view;
    width: auto;
    border-radius: 8px;
    padding: 0;
    border: 0;
    background: var(--bg);
  }
  #panel-sheet .watch-view-switch button {
    min-height: 44px;
    padding: 7px 12px;
    font-size: 14px;
    box-shadow: none;
  }
  #panel-sheet .watch-command-tools {
    grid-area: add;
    width: auto;
    gap: 8px;
  }
  #panel-sheet .watch-command-tools .btn {
    min-height: 44px;
    padding: 7px 12px;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: none;
  }
  #panel-sheet #watchAddToggle {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
  }
  #panel-sheet .watch-command-status {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    gap: 4px 12px;
    margin-top: 4px;
    padding-top: 0;
    font-size: 14px;
    color: var(--ink-3);
  }
  #panel-sheet .watch-command-panel {
    position: static;
    margin-top: 8px;
    padding: 12px;
    max-height: none;
    overflow: visible;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: none;
  }
  #panel-sheet .watch-command-panel-head {
    margin-bottom: 4px;
  }
  #panel-sheet .watch-command-panel-head strong {
    font-size: 14px;
  }
  #panel-sheet .watch-command-panel-head span {
    font-size: 12px;
  }
  #panel-sheet .watch-command-panel .btn {
    min-height: 44px;
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 10px;
    box-shadow: none;
  }
  #panel-sheet .watch-command-panel .watch-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    padding: 0;
    gap: 8px 12px;
    margin: 0;
    border: 0;
    background: none;
  }
  #panel-sheet .watch-filter-bar select {
    min-height: 44px;
    font-size: 16px;
    padding: 8px 10px;
    border-radius: 10px;
  }
  #panel-sheet .watch-filter-bar > label > span { font-size: 14px; }
  #panel-sheet .watch-group-filter {
    padding: 14px 0 0;
    margin-top: 14px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  #panel-sheet .watch-group-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  #panel-sheet .watch-group-grid label {
    padding: 7px 10px;
    min-height: 48px;
    border-radius: 10px;
  }
  #panel-sheet .watch-group-grid strong {
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #panel-sheet .watch-group-grid small { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  #panel-sheet .watch-group-grid label > span { gap: 2px; }
  #panel-sheet .watch-group-filter-head { margin-bottom: 4px; gap: 8px; }
  #panel-sheet .watch-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }
  #panel-sheet .watch-action-group { min-width: 0; padding-left: 12px; border-left: 1px solid var(--line); }
  #panel-sheet .watch-action-group:first-child { padding-left: 0; border-left: 0; }
  #panel-sheet .watch-action-group h3 { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
  #panel-sheet .watch-action-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); align-items: start; gap: 6px; }
  #panel-sheet .watch-action-buttons > :is(.btn, .check, .watch-price-update) { width: auto; min-width: 0; max-width: 100%; white-space: normal; text-align: left; }
  #panel-sheet .watch-action-buttons > .watch-price-update { grid-column: 1 / -1; }
  #panel-sheet .watch-action-buttons .btn { min-height: 44px; line-height: 1.3; overflow-wrap: anywhere; }
  #panel-sheet .watch-action-buttons .check { margin: 0; padding: 6px; justify-content: flex-start; gap: 8px; }
  #panel-sheet .watch-action-group #shShareOut { overflow-wrap: anywhere; }
  #panel-sheet .watch-inline-actions { padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  #panel-sheet .watch-actions-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 6px 0; font-size: .875rem; }
  #panel-sheet .watch-actions-heading > span { color: var(--ink-2); font-size: .75rem; }
  #panel-sheet .watch-inline-actions > .watch-actions-grid { padding: 4px 0 8px; }
  #panel-sheet .watch-share-hint { margin: 6px 0 0; font-size: 12px; }
  #panel-sheet .watch-inline-actions .watch-command-panel-head > div { max-width: none; }
  #panel-sheet .watch-inline-actions .btn,
  #panel-sheet .watch-inline-actions .check { min-height: 44px; font-size: 14px; }
  #panel-sheet .watch-stage-bar {
    border-radius: 14px;
    box-shadow: 0 6px 18px #0002;
  }
  #panel-sheet .watch-stage-copy strong {
    font-size: 14px;
  }
  #panel-sheet .watch-stage-review-tally {
    font-variant-numeric: tabular-nums;
  }
  #panel-sheet .watch-set-heading {
    margin-top: 16px;
    padding: 12px 4px;
  }
}
@media screen and (max-width: 1100px) {
  #panel-sheet .watch-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-sheet .watch-action-group:nth-child(odd) { padding-left: 0; border-left: 0; }
  #panel-sheet .watch-command-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'title sync add' 'view view view';
  }
  #panel-sheet .watch-command-row .watch-view-switch { justify-self: start; width: auto; }
}
@media screen and (max-width: 700px) {
  #panel-sheet .watch-controls {
    padding: 10px;
  }
  #panel-sheet .watch-page-head-minimal .hint {
    font-size: 12px;
  }
  #panel-sheet .watch-command-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'title add' 'view view' 'sync sync';
    gap: 6px 10px;
  }
  #panel-sheet .watch-command-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  #panel-sheet .watch-command-tools .btn {
    width: 100%;
    padding: 9px 7px;
    font-size: 14px;
  }
  #panel-sheet .watch-command-row .watch-view-switch {
    width: 100%;
  }
  #panel-sheet .watch-view-switch button {
    flex: 1;
    padding: 8px;
  }
  #panel-sheet .watch-command-status {
    gap: 6px 12px;
    font-size: 14px;
  }
  #panel-sheet .watch-command-panel {
    padding: 12px;
  }
  #panel-sheet .watch-command-panel .watch-filter-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  #panel-sheet .watch-filter-bar select {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
  #panel-sheet .watch-group-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #panel-sheet .watch-group-grid label {
    padding: 9px;
  }
  #panel-sheet .watch-actions-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #panel-sheet .watch-action-group { padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--line); }
  #panel-sheet .watch-action-group:last-child { border-bottom: 0; padding-bottom: 0; }
  #panel-sheet .watch-inline-actions { padding: 0; }
}
@media screen and (max-width: 380px) {
  #panel-sheet .watch-command-panel .watch-filter-bar,
  #panel-sheet .watch-group-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Secondary tools and account dialogs share the same spacing and touch scale.
   Community stays visibly parked; no backend functionality is removed. */
/* Compact multi-select: the choices overlay the filters without moving cards. */
#panel-sheet .watch-card-choice { display:grid; gap:4px; min-width:0; }
#panel-sheet .watch-card-choice-label { color:var(--ink); font-size:.875rem; font-weight:600; }
#panel-sheet #watchCardChoices { position:relative; min-width:0; border:0; padding:0; background:none; }
#panel-sheet #watchCardFilter { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; max-width:100%; box-sizing:border-box; min-width:0; min-height:44px; margin:0; padding:7px 10px; border:1px solid var(--control-line, var(--line)); border-radius:8px; background:var(--bg-2); color:var(--ink); font:inherit; font-size:1rem; cursor:pointer; list-style:none; }
#panel-sheet #watchCardFilter::before, #panel-sheet #watchCardFilter::marker { content:none; }
#panel-sheet #watchCardFilter::-webkit-details-marker { display:none; }
#panel-sheet #watchCardChoiceSummary { min-width:0; overflow-wrap:anywhere; }
#panel-sheet #watchCardChoiceSummary small { font-size:.75rem; color:var(--ink-2); }
#panel-sheet #watchCardFilter > span:last-child { flex:none; }
#panel-sheet #watchCardChoices[open] #watchCardFilter > span:last-child { transform:rotate(180deg); }
#panel-sheet #watchCardChoices:not([open]) > .watch-card-choice-panel { display:none; }
#panel-sheet .watch-card-choice-panel { position:absolute; z-index:35; top:calc(100% + 4px); inset-inline-start:0; inset-inline-end:auto; width:min(100%, 440px); box-sizing:border-box; max-height:min(420px, 55dvh); overflow:auto; overscroll-behavior:contain; padding:8px; border:1px solid var(--control-line, var(--line)); border-radius:8px; background:var(--bg-2); box-shadow:0 10px 24px #0005; }
#panel-sheet .watch-card-choice-tools { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
#panel-sheet #watchCardChoiceHint { flex:1; margin:0; color:var(--ink-2); font-size:.875rem; }
#panel-sheet .watch-card-choice-tools .btn { min-height:44px; padding:6px 10px; font-size:.875rem; }
#panel-sheet .watch-card-group { display:flex; align-items:center; gap:10px; min-height:44px; box-sizing:border-box; padding:5px 8px; margin:2px 0; border:1px solid transparent; border-radius:6px; cursor:pointer; }
#panel-sheet .watch-card-group:has(:checked) { border-color:var(--control-line, var(--line)); background:var(--bg-3, var(--bg)); }
#panel-sheet .watch-card-group input { flex:none; width:18px; height:18px; min-height:0; margin:0; accent-color:var(--accent); }
#panel-sheet .watch-card-group > span { display:grid; min-width:0; gap:2px; overflow-wrap:anywhere; }
#panel-sheet .watch-card-group strong { font-size:.875rem; font-weight:600; color:var(--ink); }
#panel-sheet .watch-card-group small { font-size:.75rem; color:var(--ink-2); }
#panel-sheet .watch-card-refinement { display:grid; gap:4px; margin-top:6px; padding-top:8px; border-top:1px solid var(--line); font-size:.875rem; color:var(--ink-2); }
#panel-sheet #watchCardRefinement { width:100%; min-width:0; min-height:44px; padding:6px 8px; font-size:1rem; }
#panel-sheet #watchCardFilter:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Native range retains touch/keyboard behavior; no replacement during dragging. */
#panel-sheet .watch-price-control { grid-column:span 2; display:grid; grid-template-columns:minmax(140px,1fr) minmax(210px,.8fr); align-items:start; min-width:0; gap:4px 10px; padding:0; background:none; border:0; }
#panel-sheet .watch-price-heading { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; min-height:24px; gap:8px; }
#panel-sheet .watch-price-track { min-width:0; }
#panel-sheet .watch-price-heading label { font-size:14px; color:var(--ink-2); }
#panel-sheet .watch-price-heading output { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent); }
#panel-sheet #watchPriceFilter { appearance:none; -webkit-appearance:none; display:block; width:100%; min-width:0; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:0; cursor:ew-resize; background:transparent; box-shadow:none; }
#panel-sheet #watchPriceFilter::-webkit-slider-runnable-track { height:6px; border-radius:99px; background:linear-gradient(to right,var(--accent) 0 var(--price-fill),var(--line) var(--price-fill) 100%); }
#panel-sheet #watchPriceFilter::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%; border:3px solid var(--bg-2); background:var(--accent); box-shadow:0 0 0 1px var(--accent),0 2px 8px #0004; }
#panel-sheet #watchPriceFilter::-moz-range-track { height:6px; border-radius:99px; background:var(--line); }
#panel-sheet #watchPriceFilter::-moz-range-progress { height:6px; background:var(--accent); border-radius:99px; }
#panel-sheet #watchPriceFilter::-moz-range-thumb { width:22px; height:22px; border-radius:50%; border:3px solid var(--bg-2); background:var(--accent); box-shadow:0 0 0 1px var(--accent); }
#panel-sheet #watchPriceFilter:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
#panel-sheet .watch-price-scale { display:grid; grid-template-columns:1fr auto 1fr; margin-top:-7px; color:var(--ink-3); font-size:12px; }
#panel-sheet .watch-price-scale > :last-child { text-align:right; }
#panel-sheet .watch-price-options { display:grid; grid-template-columns:minmax(0,1fr) 90px; gap:8px; margin-top:0; min-width:0; }
#panel-sheet .watch-price-options select { width:100%; min-width:0; min-height:44px; padding:9px 10px; font-size:16px; }
#panel-sheet .watch-price-amount { position:relative; min-width:0; }
#panel-sheet .watch-price-amount > span { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:14px; color:var(--ink-3); }
#panel-sheet #watchPriceAmount { width:100%; min-width:0; min-height:44px; padding:9px 8px 9px 25px; font-size:16px; border-radius:10px; }
#panel-sheet #watchPriceAmount:disabled { opacity:.5; }
@media screen and (max-width:700px) {
  #panel-sheet .watch-price-control { grid-column:1/-1; grid-template-columns:minmax(0,1fr); gap:6px; padding:0; }
  #panel-sheet .watch-price-options select { font-size:16px; }
}

/* Watchlist filters are always in document flow, never a modal or bottom sheet.
   Only long set inventories scroll; search, selection and price stay reachable. */
@media screen {
  #panel-sheet .watch-inline-filters {
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    scroll-margin-top: calc(var(--shell-header-height) + 16px);
  }
  #panel-sheet .watch-inline-filters .watch-filter-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    margin-top: 10px;
    padding-top: 0;
    border: 0;
    border-radius: 0;
  }
  #panel-sheet #watchFiltersPanel:focus { outline: none; }
  #panel-sheet #watchFiltersPanel:focus-visible { box-shadow: inset 3px 0 var(--focus, var(--accent)); }
  #panel-sheet .watch-filter-utilities { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; }
  #panel-sheet .watch-filter-utilities .watch-owned-option { flex-direction: row; justify-content: flex-start; min-height: 44px; margin: 0; padding: 0; gap: 8px; font-size: 14px; }
  #panel-sheet .watch-filter-utilities .watch-owned-option > span { font-size: 14px; }
  #panel-sheet .watch-set-field { display: grid; min-width: 0; gap: 4px; }
  #panel-sheet .watch-field-label { font-size: 14px; font-weight: 600; color: var(--ink); }
  #panel-sheet .watch-view-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
  #panel-sheet .watch-view-options:has(.watch-grid-select:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-sheet .watch-view-options > label { display: grid; align-content: start; min-width: 0; gap: 4px; }
  #panel-sheet .watch-view-options > label > span { min-height: 24px; font-size: 14px; }
  #panel-sheet .watch-view-options select { width: 100%; min-width: 0; }
  #panel-sheet .watch-view-options .watch-owned-option { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; min-height: 44px; margin: 0; padding: 0; gap: 8px; }
  #panel-sheet .watch-inline-filters .watch-price-control { grid-column: auto; }
  #panel-sheet .watch-filter-selection {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-top: 0;
  }
  #panel-sheet .watch-filter-details { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
  #panel-sheet .watch-filter-details > * { min-width: 0; }
  #panel-sheet .watch-filter-selection > * { min-width: 0; }
  #panel-sheet .watch-filter-selection .watch-group-filter {
    padding: 0;
    margin: 0;
    border: 0;
  }
  #panel-sheet .watch-group-filter-head > div { flex-wrap: wrap; gap: 4px 8px; }
  #panel-sheet .watch-set-filter-inline {
    position: relative;
    display: block;
    min-width: 0;
    border: 0;
    border-radius: 8px;
    background: var(--bg-2);
    align-self: start;
  }
  #panel-sheet .watch-set-filter-head {
    display: flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 6px 10px; margin: 0; cursor: pointer; list-style: none; touch-action: manipulation;
    border: 1px solid var(--control-line, var(--line)); border-radius: 8px;
  }
  #panel-sheet .watch-set-filter-head::before,
  #panel-sheet .watch-set-filter-head::marker { content: ''; }
  #panel-sheet .watch-set-filter-head::-webkit-details-marker { display: none; }
  #panel-sheet .watch-set-filter-head > span:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; flex: 1; }
  #panel-sheet .watch-set-filter-head strong { font-size: 14px; color: var(--ink); }
  #panel-sheet .watch-set-filter-head small { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
  #panel-sheet .watch-set-chevron { flex: none; color: var(--ink-2); }
  #panel-sheet .watch-set-filter-inline[open] .watch-set-chevron { transform: rotate(180deg); }
  #panel-sheet .watch-set-filter-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
  #panel-sheet .watch-set-filter-body {
    position: absolute; z-index: 35; top: calc(100% + 4px); inset-inline-start: 0;
    width: min(100%, 560px); box-sizing: border-box; min-width: 0; min-height: 0;
    display: grid; gap: 8px; padding: 8px;
    max-height: min(420px, 55dvh);
    overflow: auto; overscroll-behavior: contain;
    border: 1px solid var(--control-line, var(--line)); border-radius: 8px;
    background: var(--bg-2); box-shadow: 0 10px 24px #0005;
  }
  #panel-sheet .watch-set-filter-inline[open] > summary { margin-bottom: 0; border-radius: 8px; }
  html[data-keyboard-open="true"] #panel-sheet .watch-set-filter-body {
    max-height: min(420px, 55dvh, max(160px, calc(var(--keyboard-visible-height, 100dvh) - 80px)));
  }
  #panel-sheet .watch-set-filter-inline:not([open]) > .watch-set-filter-body { display: none; }
  #panel-sheet .watch-set-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
  }
  #panel-sheet .watch-set-filter-search { flex: 1 1 160px; min-width: 0; }
  #panel-sheet .watch-set-filter-actions { flex: 0 0 auto; }
  #panel-sheet .watch-set-filter-cleanup {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    border-top: 1px solid var(--line); padding-top: 8px;
  }
  #panel-sheet .watch-set-filter-cleanup p {
    flex: 1 1 180px; min-width: 0; margin: 0; color: var(--ink-2); font-size: .875rem;
  }
  #panel-sheet .watch-set-filter-cleanup .btn {
    min-height: 44px; max-width: 100%; padding: 6px 10px;
    font-size: .875rem; white-space: normal; overflow-wrap: anywhere;
  }
  #panel-sheet .watch-set-filter-inline .watch-set-filter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 232px;
    scrollbar-gutter: stable;
    scroll-padding-block: 6px;
    padding: 3px;
  }
  #panel-sheet .watch-set-filter-inline .watch-set-filter-list > :is(div, p) { grid-column: 1 / -1; }
  #panel-sheet .watch-set-filter-inline .watch-set-filter-row strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #panel-sheet .watch-refinement-choice { min-width: 0; font-size: 14px; padding: 7px 10px; }
  #panel-sheet .watch-filter-selection :is(button, input, select):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}
@media screen and (max-width: 900px) {
  #panel-sheet .watch-filter-selection { grid-template-columns: minmax(0, 1fr); }
  #panel-sheet .watch-inline-filters .watch-filter-bar { grid-template-columns: minmax(0, 1fr); }
  #panel-sheet .watch-inline-filters .watch-price-control { grid-column: 1 / -1; }
  #panel-sheet .watch-filter-details { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 480px) {
  #panel-sheet .watch-view-options:has(.watch-grid-select:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 380px) {
  #panel-sheet .watch-set-filter-inline .watch-set-filter-list { grid-template-columns: minmax(0, 1fr); }
}

html.account-dialog-open {
  overflow: hidden;
}
.account-overlay {
  --account-dialog-gap: 20px;
  padding: calc(var(--account-dialog-gap) + env(safe-area-inset-top, 0px))
    calc(var(--account-dialog-gap) + env(safe-area-inset-right, 0px))
    calc(var(--account-dialog-gap) + env(safe-area-inset-bottom, 0px))
    calc(var(--account-dialog-gap) + env(safe-area-inset-left, 0px));
}
.account-card {
  max-height: calc(100dvh - var(--account-dialog-gap, 20px) - var(--account-dialog-gap, 20px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.account-card .account-close {
  min-width: 44px;
  min-height: 44px;
}
.account-card .account-message {
  position: static;
  width: 100%;
  max-width: none;
  transform: none;
  translate: none;
  margin: 16px 0 0;
  padding: 12px;
  font-size: 13px;
}
.account-settings-links {
  gap: 10px;
}
.account-settings-links .btn {
  min-height: 44px;
  box-shadow: none;
}
@media screen {
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex) {
    max-width: 1440px;
    margin-inline: auto;
  }
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex)
    .card {
    border-radius: 14px;
    padding: 22px;
    box-shadow: none;
    background: var(--bg-2);
  }
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex) h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex) .btn {
    min-height: 44px;
    box-shadow: none;
    font-size: 13px;
  }
}
@media screen and (max-width: 700px) {
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex)
    .card {
    padding: 16px;
  }
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex)
    .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex)
    input:not([type="checkbox"]):not([type="range"]),
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex)
    select {
    min-height: 44px;
    font-size: 16px;
    max-width: 100%;
  }
  .account-overlay {
    --account-dialog-gap: 12px;
  }
  .account-card {
    padding: 24px 18px;
  }
}
.workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.workspace-heading h2 {
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.workspace-heading p {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 14px;
}
.workspace-search {
  display: block;
  min-width: 0;
}
.workspace-search input {
  width: 100%;
  min-width: 0;
}
.workspace-disclosure {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
}
.workspace-disclosure > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.workspace-disclosure > summary::-webkit-details-marker {
  display: none;
}
.workspace-disclosure > summary > span {
  font-weight: 700;
  font-size: 14px;
}
.workspace-disclosure > summary small {
  color: var(--ink-3);
  font-size: 12px;
}
.workspace-disclosure > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-3);
}
.workspace-disclosure[open] > summary::after {
  content: "−";
}
.workspace-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 12px;
}
.workspace-dialog {
  width: min(540px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 100px #0007;
}
.workspace-dialog::backdrop {
  background: #020611b8;
  backdrop-filter: blur(5px);
}
.workspace-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.workspace-dialog-head small {
  color: var(--ink-3);
}
.workspace-dialog-head h2 {
  font-size: 23px;
  margin-top: 3px;
}
.workspace-dialog-head > :not(.btn) { min-width: 0; overflow-wrap: anywhere; }
.workspace-dialog-head .btn {
  min-width: 44px;
  flex: none;
}
.holding-editor-fields {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}
.holding-editor-fields .field {
  display: grid;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-2);
}
.holding-editor-fields input {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
}
.workspace-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.workspace-dialog .danger {
  color: var(--bad);
}

#panel-collection {
  max-width: 1520px;
  margin-inline: auto;
  padding-bottom: 85px;
}
#collectionBody .collection-view-head {
  margin: 6px 0 24px;
}
#collectionBody .seg {
  padding: 4px;
  box-shadow: none;
  background: var(--bg);
  border: 1px solid var(--line);
}
#collectionBody .seg button {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}
#collectionBody .btn {
  min-height: 42px;
  padding: 9px 14px;
  font-size: 13px;
  box-shadow: none;
}
#collectionBody input[type="search"],
#collectionBody select {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
}
#collectionBody .collection-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  margin: 0 0 16px;
  overflow: hidden;
}
#collectionBody .collection-kpis article {
  border: 0;
  border-radius: 0;
  padding: 22px;
  background: none;
  box-shadow: none;
  min-width: 0;
}
#collectionBody .collection-kpis article + article {
  border-left: 1px solid var(--line);
}
#collectionBody .collection-kpis strong {
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 740;
  letter-spacing: -0.035em;
  margin: 9px 0 6px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#collectionBody .collection-kpis small {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
#collectionBody .collection-kpis span {
  font-size: 11px;
  white-space: normal;
  line-height: 1.5;
}
#collectionBody .collection-insights {
  margin-bottom: 22px;
}
#collectionBody .portfolio-overview-grid {
  padding: 0 18px 18px;
  margin: 0;
  gap: 16px;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
}
#collectionBody .portfolio-overview-grid .portfolio-card {
  box-shadow: none;
  border: 0;
  background: var(--bg);
  border-radius: 12px;
  padding: 18px;
}
#collectionBody .holdings-card {
  padding: 0;
  background: var(--bg-2);
  box-shadow: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
#collectionBody .holdings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 20px;
  margin: 0;
}
#collectionBody .holdings-toolbar h3 {
  font-size: 17px;
}
#collectionBody [data-collection-price-status] {
  margin: 0;
  padding: 0 16px 8px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#collectionBody .holdings-toolbar small {
  color: var(--ink-3);
  font-size: 12px;
}
#collectionBody .holdings-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#collectionBody .holdings-controls .workspace-search {
  flex: 1 1 200px;
  max-width: 290px;
}
#collectionBody .holdings-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 13px;
}
#collectionBody .holdings-table th {
  background: var(--bg);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 16px;
}
#collectionBody .holdings-table td {
  padding: 13px 16px;
}
#collectionBody .holdings-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
#collectionBody .holding-card-cell {
  display: table-cell;
  min-width: 0;
  width: 44%;
}
#collectionBody .holding-card-cell img {
  display: inline-block;
  width: 40px;
  margin-right: 12px;
  vertical-align: middle;
}
#collectionBody .holding-card-cell > span {
  display: inline-flex;
  max-width: calc(100% - 60px);
  vertical-align: middle;
}
#collectionBody .holding-card-cell strong {
  font-size: 13px;
}
#collectionBody .holding-card-cell small {
  font-size: 11px;
  margin-top: 3px;
}
#collectionBody .holding-edit-cell {
  text-align: right;
}
#collectionBody .holdings-more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
}
#collectionBody .collection-controls {
  background: var(--bg-2);
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow: none;
}
#collectionBody .collection-command-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
#collectionBody .collection-command-row .workspace-search {
  flex: 1 1 230px;
}
#collectionBody #collectionOptions {
  margin-top: 16px;
  background: var(--bg);
}
#collectionBody .collection-options-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 0 18px 18px;
}
#collectionBody .collection-set-controls,
#collectionBody .collection-finish-controls {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#collectionBody .collection-options-body label,
#collectionBody .collection-finish-controls > span {
  font-size: 12px;
  color: var(--ink-2);
}
#collectionBody #setChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
  padding: 3px;
}
#collectionBody .chip {
  min-height: 38px;
  padding: 7px 10px;
  white-space: normal;
  text-align: left;
  border-radius: 9px;
  font-size: 12px;
}
#collectionBody #variantSeg {
  display: flex;
  flex-wrap: wrap;
  border: 0;
  padding: 0;
  gap: 6px;
  background: none;
}
#collectionBody #variantSeg button {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 38px;
  font-size: 12px;
}
#collectionBody .collection-finish-controls .field {
  display: grid;
  gap: 6px;
}
#collectionBody .collection-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
#collectionBody .collection-bulk .btn {
  font-size: 12px;
}
#collectionBody .collection-results-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 12px;
}
#collectionBody .collection-results-summary b {
  color: var(--ink-2);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
#collectionBody .collection-card-group {
  padding: 16px;
  margin-top: 20px;
  box-shadow: none;
  background: var(--bg-2);
}
#collectionBody .collection-card-group .page-head {
  margin: 0 0 16px;
}
#collectionBody .ctiles {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 18px 14px;
}
#collectionBody .ctile .cart {
  padding: 0;
  width: 100%;
  display: block;
  border-radius: 9px;
  background: var(--bg);
}
#collectionBody .ctile .cart img {
  filter: none;
}
#collectionBody .ctile.done .cart {
  outline: 2px solid var(--ok);
  outline-offset: 2px;
}
#collectionBody .ctile .cart:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
#collectionBody .ctile .cname {
  font-size: 12px;
  margin-top: 9px;
}
#collectionBody .cchips {
  gap: 4px;
}
#collectionBody .vchip {
  min-height: 30px;
  font-size: 10px;
  padding: 4px 7px;
}
#collectionBody .vchip.on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 1000px) {
  #collectionBody .collection-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #collectionBody .collection-kpis article {
    padding: 18px;
  }
  #collectionBody .collection-kpis article:nth-child(3) {
    border-left: 0;
  }
  #collectionBody .collection-kpis article:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  #collectionBody .holdings-controls {
    width: 100%;
  }
  #collectionBody .holdings-controls .workspace-search {
    max-width: none;
  }
}
@media (max-width: 700px) {
  #collectionBody .workspace-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  #collectionBody .workspace-heading .seg {
    width: 100%;
  }
  #collectionBody .workspace-heading .seg button {
    flex: 1;
  }
  #collectionBody input[type="search"],
  #collectionBody select {
    font-size: 16px;
  }
  #collectionBody .portfolio-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #collectionBody .holdings-toolbar {
    padding: 16px;
  }
  #collectionBody .holdings-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #collectionBody .holdings-controls .workspace-search {
    grid-column: 1/-1;
  }
  #collectionBody .holdings-controls select {
    grid-column: 1/-1;
    width: 100%;
  }
  #collectionBody .holdings-controls .btn {
    padding-inline: 8px;
  }
  #collectionBody .holdings-table,
  #collectionBody .holdings-table tbody {
    display: block;
    width: 100%;
  }
  #collectionBody .holdings-table thead {
    display: none;
  }
  #collectionBody .holdings-table tr {
    display: grid;
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px;
    gap: 12px 8px;
    border-top: 1px solid var(--line);
  }
  #collectionBody .holdings-table td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
  }
  #collectionBody .holdings-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-3);
    font-size: 10px;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0;
  }
  #collectionBody .holding-card-cell {
    grid-column: 1/-1;
    padding: 0 64px 2px 0 !important;
  }
  #collectionBody .holding-card-cell img {
    width: 38px;
    margin-right: 8px;
  }
  #collectionBody .holding-card-cell > span {
    max-width: calc(100% - 48px);
  }
  #collectionBody .holding-card-cell small {
    white-space: normal;
    line-height: 1.4;
  }
  #collectionBody .holdings-table .holding-edit-cell {
    position: absolute;
    right: 16px;
    top: 18px;
    width: auto;
    margin: 0;
  }
  #collectionBody .holding-edit-cell .btn {
    min-width: 48px;
    min-height: 40px;
    padding: 8px;
  }
  #collectionBody .collection-command-row > * {
    flex: 1 1 100%;
    width: 100%;
  }
  #collectionBody .collection-command-row .seg button {
    flex: 1;
  }
  #collectionBody .collection-options-body {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 12px;
  }
  #collectionBody .collection-controls {
    padding: 12px;
  }
  #collectionBody .ctiles {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px 10px;
  }
  #collectionBody .vchip {
    min-height: 36px;
  }
  #collectionBody .collection-card-group {
    padding: 12px;
  }
  .workspace-disclosure > summary {
    padding: 14px 12px;
  }
  .workspace-disclosure > summary small {
    flex-basis: 100%;
    order: 3;
  }
  .workspace-dialog {
    padding: 20px 16px;
  }
  .workspace-dialog-actions > .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #collectionBody *,
  .workspace-dialog {
    scroll-behavior: auto;
    transition: none;
  }
}

/* Owner-only link controls reuse the Watchlist dialog and touch targets. */
.watch-set-discovery { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.watch-set-discovery > strong { font-size: 14px; }
.watch-set-discovery > p { color: var(--ink-2); font-size: 14px; line-height: 1.4; margin: 6px 0 10px; }
.watch-set-discover-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; margin-top: 6px; }
.watch-set-discover-row > span:first-child { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.watch-set-discover-row strong, .watch-set-discover-row small, .watch-set-discover-row > span:last-child { font-size: 14px; }
.watch-set-discover-row small { color: var(--ink-2); }
.watch-set-discover-row > span:last-child { color: var(--accent); flex-shrink: 0; }
.watch-set-discover-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 500px) { .watch-set-discover-row { align-items: flex-start; flex-direction: column; gap: 8px; } }

#watchSharedDialog { max-width: 720px; max-height: 85dvh; overflow-y: auto; }
.watch-shared-manager { padding: 20px; }
.watch-shared-manager header, .watch-shared-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.watch-shared-manager header { align-items: flex-start; }
.watch-shared-manager h3 { margin: 0 0 8px; }
.watch-shared-manager p { font-size: 14px; color: var(--ink-2); }
.watch-shared-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); padding: 12px 0; border-top: 1px solid var(--line); }
.watch-shared-toolbar, .watch-shared-confirm > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.watch-shared-toolbar span { color: var(--ink-2); font-size: 13px; }
.watch-shared-item-actions { justify-items: stretch; }
.watch-shared-confirm { grid-column: 1 / -1; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2, var(--panel)); }
.watch-shared-confirm p { margin: 0 0 10px; }
.watch-shared-item > div { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.watch-shared-item span, .watch-shared-item small, .watch-shared-item a { font-size: 14px; }
.watch-shared-item span, .watch-shared-item small { color: var(--ink-2); }
.watch-shared-item a { color: var(--accent); }
.watch-shared-manager .btn { min-height: 44px; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.watch-shared-manager header > h3 { min-width: 0; overflow-wrap: anywhere; }
.watch-shared-manager header > .btn { flex: none; }
@media (max-width: 700px) {
  .watch-shared-manager { padding: 16px; }
  .watch-shared-item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* Compact working screens: reduce surrounding space, not card art, header
   tracks, print dimensions, keyboard clearance or accessible hit areas. */
@media screen {
  body:not([data-view="home"]) main { padding-top: 12px; }
  #panel-guide > .toolbar { padding-block: 12px; gap: 8px; }
  #panel-guide > .toolbar #guideView { padding: 0; border: 0; min-height: 44px; }
  #panel-guide .guide-tools-body { gap: 10px; padding-top: 10px; }
  #panel-guide > .toolbar .guide-primary-controls { gap: 10px; }
  #panel-guide > .toolbar .field.inline { gap: 4px; }
  #panel-guide .guide-card-search > label,
  #panel-guide > .toolbar .field label { font-size: 14px; }
  #panel-guide > .toolbar .btn { min-height: 44px; padding-block: 6px; font-size: 14px; }
  #panel-guide > .toolbar select,
  #panel-guide > .toolbar input[type="number"] { min-height: 44px; padding-block: 7px; font-size: 16px; }
  #panel-guide .guide-tools > summary,
  #panel-guide .guide-more > summary { min-height: 44px; padding-block: 8px; font-size: 14px; }
  #panel-guide .guide-more > summary small { font-size: 12px; }
  #panel-guide .guide-more-body { row-gap: 8px; }
  .workspace-disclosure > summary { min-height: 44px; padding-block: 10px; }
  #collectionBody .collection-view-head { margin-bottom: 14px; }
  #collectionBody .collection-kpis article { padding-block: 14px; }
  #collectionBody .collection-kpis strong { margin-block: 4px; }
  #collectionBody .collection-kpis small { font-size: 14px; }
  #collectionBody .collection-kpis span { font-size: 12px; }
  #collectionBody .collection-insights { margin-bottom: 14px; }
  #collectionBody .holdings-toolbar { padding-block: 10px; row-gap: 8px; }
  #collectionBody .collection-controls { padding-block: 12px; }
  #collectionBody #collectionOptions { margin-top: 10px; }
  #collectionBody .collection-options-body { row-gap: 12px; padding-bottom: 12px; }
  #collectionBody .collection-options-body label,
  #collectionBody .collection-finish-controls > span { font-size: 14px; }
  #collectionBody .seg { padding: 0; }
  #collectionBody .seg button,
  #collectionBody .btn,
  #collectionBody #variantSeg button,
  #collectionBody .collection-bulk .btn,
  #collectionBody .holding-edit-cell .btn { min-height: 44px; padding-block: 6px; font-size: 14px; }
  #collectionBody input[type="search"],
  #collectionBody select { padding-block: 7px; font-size: 16px; }
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex) .card { padding-block: 14px; }
  :is(#panel-setup, #panel-scan, #panel-report, #panel-price, #panel-dex) .btn { min-height: 44px; padding-block: 6px; font-size: 14px; }
}

/* Binder → Watchlist handoff: one saved setting, with an optional review. */
#panel-sheet .watch-page-head-minimal { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.watch-binder-sync { grid-area:sync; justify-self:end; display:flex; align-items:center; gap:8px; min-height:44px; max-width:340px; cursor:pointer; padding-block:0; }
.watch-binder-sync input { flex:none; width:20px; height:20px; margin:3px 0 0; accent-color:var(--accent); }
.watch-binder-sync span { min-width:0; display:grid; gap:2px; }
.watch-binder-sync strong { color:var(--ink); font-size:14px; line-height:1.4; }
.watch-binder-sync small { color:var(--ink-2); font-size:12px; line-height:1.4; }
.binder-sync-dialog { box-sizing:border-box; width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); margin:auto; overflow:auto; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--bg-2); color:var(--ink); }
.binder-sync-dialog::backdrop { background:#050a16b8; }
.binder-sync-dialog header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.binder-sync-dialog header > div { min-width:0; overflow-wrap:anywhere; }
.binder-sync-dialog h2 { margin:0 0 6px; font-size:22px; }
.binder-sync-dialog p { font-size:16px; line-height:1.6; }
.binder-sync-dialog .binder-sync-hint { color:var(--ink-2); font-size:14px; }
.binder-sync-dialog footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.binder-sync-dialog .btn { min-height:44px; white-space:normal; }
.guide-list-watchlist { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-block:8px; font-size:14px; color:var(--ink-2); order:2; }
#guideBody > .guide-reading-surface > .guide-nav #guideWatchlist { white-space:normal; line-height:1.3; }
@media(max-width:600px) {
  #panel-sheet .watch-binder-sync { width:100%; max-width:none; justify-self:start; }
  .binder-sync-dialog { padding:18px; }
  .binder-sync-dialog footer .btn { flex:1 1 160px; }
  .guide-list-watchlist > * { flex:1 1 100%; }
}

/* Compact Watchlist controls. Desktop remains expanded; phones disclose options
   in place and overlay action menus without moving the card grid. */
@media screen {
  #panel-sheet .watch-mobile-filter-toggle,
  #panel-sheet .watch-mobile-action-toggle { display: none; }
  #panel-sheet .watch-controls { padding: 10px 12px; }
  #panel-sheet .watch-actions-grid { gap: 8px; }
  #panel-sheet .watch-action-group { padding-left: 8px; }
  #panel-sheet .watch-action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  #panel-sheet .watch-price-update { flex: 1 1 160px; }
  #panel-sheet .watch-action-buttons .btn { padding: 6px 9px; }
  #panel-sheet .watch-action-buttons .check { padding: 0; }
  #panel-sheet .watch-action-group .hint { margin: 4px 0 0; font-size: 12px; }
  #panel-sheet .watch-filter-utilities { gap: 4px 8px; }
  #panel-sheet .watch-inline-filters .watch-command-panel-head > div { max-width: none; }
  #panel-sheet .watch-actions-heading > span { line-height: 1.35; }
  #panel-sheet .watch-inline-actions > .watch-actions-grid { padding-bottom: 0; }
}
@media screen and (max-width: 700px) {
  #panel-sheet .watch-controls { padding: 8px; }
  #panel-sheet .watch-command-row { gap: 4px 8px; }
  #panel-sheet .watch-binder-sync { min-height: 44px; padding: 0; justify-self: start; }
  #panel-sheet .watch-binder-sync strong { font-size: 14px; }
  #panel-sheet .watch-binder-sync small,
  #panel-sheet .watch-share-hint,
  #panel-sheet #watchPriceStatus[data-active="false"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  #panel-sheet .watch-command-status { gap: 2px 10px; margin-top: 2px; font-size: 14px; }
  #panel-sheet .watch-command-panel { margin-top: 6px; }
  #panel-sheet .watch-mobile-filter-toggle,
  #panel-sheet .watch-mobile-action-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    width: 100%; min-width: 0; min-height: 44px; padding: 6px 10px;
    font-size: 14px; line-height: 1.3; text-align: left; white-space: normal;
  }
  #panel-sheet .watch-mobile-filter-toggle { border: 0; padding-inline: 0; background: none; }
  #panel-sheet .watch-mobile-filter-toggle > span { color: var(--ink-2); font-size: 13px; }
  #panel-sheet #watchFiltersPanel[data-mobile-expanded="false"] > #watchFilterFields { display: none; }
  #panel-sheet #watchFiltersPanel[data-mobile-expanded="true"] > .watch-mobile-filter-toggle > span > span { display: inline-block; transform: rotate(180deg); }
  #panel-sheet #watchFilterFields { padding-bottom: 6px; }
  #panel-sheet #watchFilterFields .watch-command-panel-head > div:first-child { display: none; }
  #panel-sheet #watchFilterFields .watch-filter-utilities { width: 100%; justify-content: space-between; }
  #panel-sheet .watch-inline-actions { position: relative; }
  #panel-sheet .watch-actions-heading { padding: 4px 0; }
  #panel-sheet .watch-actions-heading > span { font-size: 12px; }
  #panel-sheet .watch-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; }
  #panel-sheet .watch-action-group { padding: 0; border: 0; }
  #panel-sheet .watch-action-group > h3 { display: none; }
  #panel-sheet .watch-action-group > .watch-action-buttons > #watchSharedLists { width: 100%; min-height: 44px; }
  #panel-sheet .watch-mobile-action-body {
    position: absolute; z-index: 36; top: calc(100% + 4px); inset-inline: 0;
    padding: 8px; max-height: min(360px, 55dvh); overflow: auto; overscroll-behavior: contain;
    background: var(--bg-2); border: 1px solid var(--control-line, var(--line));
    border-radius: 8px; box-shadow: 0 10px 24px #0005;
  }
  #panel-sheet .watch-mobile-action-body[data-mobile-open="false"] { display: none; }
  #panel-sheet .watch-mobile-action-body .watch-action-buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
  #panel-sheet .watch-mobile-action-body .btn { width: 100%; min-height: 44px; }
  #panel-sheet #watchPriceStatus[data-active="true"] { display: block; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  #panel-sheet .watch-mobile-action-toggle[aria-expanded="true"] { border-color: var(--accent); }
}

/* Dense working toolbar: save rows rather than shrinking readable controls.
   Rem-based breakpoint returns to the roomy layout when text is enlarged. */
@media screen and (min-width: 75rem) {
  #panel-sheet .watch-controls { padding: 8px 10px; }
  #panel-sheet .watch-command-row { gap: 4px 10px; }
  #panel-sheet .watch-command-status { margin-top: 2px; gap: 2px 12px; }
  #panel-sheet .watch-command-panel { margin-top: 4px; }
  #panel-sheet #watchFilterFields {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr);
    align-items: start; gap: 4px 10px;
  }
  #panel-sheet #watchFilterFields > .watch-command-panel-head { grid-column: 1 / -1; margin: 0; }
  #panel-sheet #watchFilterFields > .watch-filter-selection,
  #panel-sheet #watchFilterFields > .watch-filter-bar { display: contents; }
  #panel-sheet .watch-set-field > .watch-field-label,
  #panel-sheet .watch-card-choice-label { min-height: 24px; margin: 0; }
  #panel-sheet .watch-inline-filters .watch-price-control {
    grid-template-columns: minmax(90px,1fr) minmax(180px,1.25fr); gap: 4px 8px;
  }
  #panel-sheet .watch-price-options { grid-template-columns: minmax(0,1fr) 76px; gap: 6px; }
  #panel-sheet .watch-inline-actions > .watch-actions-grid { padding: 2px 0 0; gap: 8px; }
  #panel-sheet .watch-actions-heading { padding: 3px 0; }
  #panel-sheet .watch-action-group { padding: 0; border: 0; }
  #panel-sheet .watch-action-group h3 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  #panel-sheet .watch-action-group .hint { margin-top: 2px; line-height: 1.3; }
  #panel-sheet .watch-action-buttons { gap: 4px; }
  #panel-sheet .watch-price-update { flex: 0 1 auto; }
  #panel-sheet .watch-price-update .btn { width: auto; }
  #panel-sheet .watch-action-buttons .btn { padding: 5px 8px; }
}
@media screen and (min-width: 75rem) and (pointer: fine) and (hover: hover) {
  #panel-sheet .watch-view-switch button,
  #panel-sheet .watch-command-tools .btn,
  #panel-sheet .watch-filter-utilities :is(.btn, .watch-owned-option),
  #panel-sheet .watch-inline-actions :is(.btn, .check) { min-height: 36px; }
}

/* Card suggestions share the set picker's overlay, not the rail's layout. */
#panel-guide #guideFindPanel {
  position: fixed; z-index: 111; display: flex; flex-direction: column;
  box-sizing: border-box; min-width: 0; min-height: 0; overflow: hidden;
  padding: 6px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 12px; background: var(--bg-2); color: var(--ink);
  box-shadow: 0 16px 50px rgb(0 0 0 / .4);
}
#panel-guide #guideFindPanel[hidden] { display: none; }
#panel-guide .guide-find-panel-head {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between;
  min-width: 0; gap: 8px; padding-left: 6px;
}
#panel-guide #guideFindCount { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
#panel-guide #guideFindClose {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font-size: 24px; cursor: pointer;
}
html #panel-guide #guideFindResults {
  position: static; inset: auto; display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-height: 0; width: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; overflow: auto; overscroll-behavior: contain;
}
html #panel-guide #guideFindResults[hidden] { display: none; }
#panel-guide #guideFindResults > button {
  flex: none; grid-template-areas: 'art main state' 'art meta meta';
  grid-template-columns: 42px minmax(0, 1fr) auto; gap: 3px 10px;
  min-height: 72px; padding: 6px; border-radius: 8px;
}
#panel-guide #guideFindResults .guide-search-art {
  grid-area: art; position: relative; display: grid; place-items: center;
  width: 42px; height: 58px; overflow: hidden; border-radius: 3px; background: var(--bg-3);
}
#panel-guide #guideFindResults .guide-search-art img { width: 100%; height: 100%; object-fit: contain; }
#panel-guide .guide-search-art-missing { padding: 2px; font-size: 12px; line-height: 1.1; text-align: center; color: var(--ink-2); }
#panel-guide .guide-search-art [hidden] { display: none; }
#panel-guide #guideFindResults .guide-card-search-main { display: flex; flex-wrap: wrap; gap: 3px 6px; }
#panel-guide #guideFindResults .guide-card-search-main strong {
  font-size: 14px; line-height: 1.3; white-space: normal; overflow: visible; overflow-wrap: anywhere;
}
#panel-guide #guideFindResults .guide-card-search-main em {
  flex: 0 1 auto; max-width: 100%; border-radius: 4px; font-size: 12px;
  line-height: 1.3; white-space: normal; overflow: visible; overflow-wrap: anywhere;
}
#panel-guide #guideFindResults > button > small {
  font-size: 12px; line-height: 1.4; color: var(--ink-2); white-space: normal; overflow: visible;
}
#panel-guide #guideFindResults .guide-card-search-state { font-size: 12px; line-height: 1.3; white-space: normal; text-align: right; }
#panel-guide #guideFindResults .guide-card-search-empty { font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  #panel-guide #guideFindPanel:not([hidden]) { animation: guide-search-slide-in 150ms ease-out; }
}
@media print { #guideFindPanel { display: none !important; } }

/* One non-overlapping printing checklist; no nested rarity/refinement menu. */
#panel-sheet .watch-card-group .watch-card-group-description { font-size: 12px; line-height: 1.35; }
#panel-sheet .watch-saved-card-filter {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 6px 12px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}
#panel-sheet .watch-saved-card-filter .btn { min-height: 44px; font-size: 14px; }

/* ------------------------------------------------------------ sync bar */
/* Offline-first status strip under the header. Hidden when everything is
   acknowledged; never a modal, never blocks editing. */
.sync-bar {
  position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 36px; padding: 6px 14px 8px; font-size: 13px; line-height: 1.3;
  background: var(--bg-2); border-bottom: 1px solid var(--line); overflow: hidden;
}
.sync-bar[hidden] { display: none; }
.sync-bar-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.sync-bar-text { flex: 1 1 240px; min-width: 0; }
.sync-bar-count { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sync-bar-action { min-height: 32px; padding-inline: 12px; flex: none; }
.sync-bar-action[hidden] { display: none; }
.device-save-repair { width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
.device-save-repair > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.device-save-repair h2 { margin: 0; }
.device-save-repair .btn { min-height: 44px; }
.device-save-repair [data-tool] { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.device-save-repair .progress-review-confirm { display: flex; align-items: start; gap: 10px; margin: 14px 0; }
.device-save-repair input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; }
.device-save-repair [data-status], .device-save-repair #repairResult { overflow-wrap: anywhere; }
.sync-bar-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.sync-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: var(--accent); opacity: 0; }
.sync-bar[data-state="offline"] .sync-bar-dot,
.sync-bar[data-state="pending"] .sync-bar-dot,
.sync-bar[data-state="unsigned"] .sync-bar-dot { background: var(--warn); }
.sync-bar[data-state="error"] .sync-bar-dot,
.sync-bar[data-state="storage-error"] .sync-bar-dot { background: var(--bad); }
.sync-bar[data-state="saved"] .sync-bar-dot { background: var(--ok); }
.sync-bar[data-state="saving"] .sync-bar-dot,
.sync-bar[data-state="saving-device"] .sync-bar-dot,
.sync-bar[data-state="reconnecting"] .sync-bar-dot { background: var(--accent); animation: account-pulse .9s infinite alternate; }
.sync-bar[data-state="saving"] .sync-bar-fill,
.sync-bar[data-state="saving-device"] .sync-bar-fill,
.sync-bar[data-state="reconnecting"] .sync-bar-fill { opacity: 1; animation: sync-bar-slide 1.4s ease-in-out infinite; }
.sync-bar[data-state="saved"] .sync-bar-fill { opacity: 1; width: 100%; background: var(--ok); }
.sync-bar[data-state="offline"] .sync-bar-fill,
.sync-bar[data-state="pending"] .sync-bar-fill,
.sync-bar[data-state="unsigned"] .sync-bar-fill { opacity: 1; width: 100%; background: var(--warn); }
.sync-bar[data-state="error"] .sync-bar-fill,
.sync-bar[data-state="storage-error"] .sync-bar-fill { opacity: 1; width: 100%; background: var(--bad); }
@keyframes sync-bar-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) {
  .sync-bar[data-state="saving"] .sync-bar-fill,
  .sync-bar[data-state="saving-device"] .sync-bar-fill,
  .sync-bar[data-state="reconnecting"] .sync-bar-fill { animation: none; width: 100%; }
  .sync-bar-dot { animation: none !important; }
}
@media screen and (max-width: 520px) {
  .sync-bar { padding-inline: 10px; font-size: 12px; }
  .sync-bar-text { flex-basis: 100%; }
}
@media screen { .topbar #saveSync[data-sync="offline"] { color: var(--warn); } .topbar #saveSync[data-sync="reconnecting"] { color: var(--accent); } }

/* Native shell: pulling past the top must not rubber-band a gap above the
   header. The web keeps browser overscroll so pull-to-refresh still works. */
html.native-app, html.native-app body { overscroll-behavior-y: none; }

/* Native pull-to-refresh: a round indicator follows the finger, its arrow turns
   and flips when armed, spins while refreshing, then shows a check. The page
   content eases down with the pull (margin, so fixed controls stay put). */
.pull-refresh {
  position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 60;
  transform: translate(-50%, calc(-72px + var(--pull-progress, 0) * 84px));
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none; transition: transform .18s ease-out;
}
html.is-pulling .pull-refresh { transition: none; }
.pull-refresh[hidden] { display: none; }
.pull-refresh[data-state="armed"], .pull-refresh[data-state="busy"], .pull-refresh[data-state="done"], .pull-refresh[data-state="error"] { transform: translate(-50%, 12px); }
.pull-refresh-icon { position: relative; width: 22px; height: 22px; }
.pull-refresh-arrow { position: absolute; inset: 0; width: 22px; height: 22px; fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(calc(var(--pull-progress, 0) * 180deg)); transition: transform .12s linear, opacity .12s; }
.pull-refresh[data-state="armed"] .pull-refresh-arrow { stroke: var(--accent); transform: rotate(180deg); }
.pull-refresh-spinner { position: absolute; inset: 0; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 34 22; opacity: 0; transform-origin: 50% 50%; }
.pull-refresh[data-state="busy"] .pull-refresh-arrow, .pull-refresh[data-state="done"] .pull-refresh-arrow, .pull-refresh[data-state="error"] .pull-refresh-arrow { opacity: 0; }
.pull-refresh[data-state="busy"] .pull-refresh-spinner { opacity: 1; animation: pull-spin .8s linear infinite; }
.pull-refresh-check { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; opacity: 0; }
.pull-refresh[data-state="done"] .pull-refresh-check { opacity: 1; color: var(--ok); }
.pull-refresh[data-state="error"] .pull-refresh-check { opacity: 1; color: var(--bad); }
.pull-refresh-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes pull-spin { to { transform: rotate(360deg); } }
html.native-app main { margin-top: var(--pull-offset, 0px); transition: margin-top .22s ease-out; }
html.native-app.is-pulling main { transition: none; }


/* Phone Watchlist header: every control kept, about half the height. The tab
   bar already names the view, so the heading hides below 700px. */
@media screen and (max-width: 700px) {
  #panel-sheet .watch-controls { padding: 6px 8px 8px; }
  #panel-sheet .watch-command-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'view add' 'sync sync'; gap: 4px 6px; align-items: center; }
  #panel-sheet .watch-command-row .watch-page-head-minimal { display: none; }
  #panel-sheet .watch-command-row .watch-view-switch { width: auto; min-width: 0; }
  #panel-sheet .watch-view-switch button { min-height: 32px; padding: 4px 5px; font-size: 12px; white-space: nowrap; }
  #panel-sheet .watch-command-tools { grid-area: add; display: block; width: auto; }
  #panel-sheet .watch-command-tools .btn { width: auto; min-height: 32px; padding: 4px 8px; font-size: 12px; border-radius: 8px; white-space: nowrap; }
  #panel-sheet .watch-binder-sync { grid-area: sync; min-height: 24px; margin: 0; padding: 0; gap: 6px; font-size: 13px; }
  #panel-sheet .watch-binder-sync strong { font-weight: 600; }
  #panel-sheet .watch-command-status { margin-top: 0; gap: 2px 8px; font-size: 12px; line-height: 1.25; }
  #panel-sheet .watch-command-panel { margin-top: 4px; padding: 3px 6px; border-radius: 9px; }
  #panel-sheet .watch-command-panel .watch-mobile-filter-toggle, #panel-sheet .watch-command-panel .watch-mobile-action-toggle { min-height: 34px; padding: 3px 8px; font-size: 12px; }
  #panel-sheet .watch-actions-heading { padding: 0 0 2px; font-size: 12px; gap: 2px 6px; }
  #panel-sheet .watch-actions-heading > span { display: none; }
  #panel-sheet .watch-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; padding: 0 0 2px; align-items: start; }
  #panel-sheet .watch-action-group > .btn, #panel-sheet .watch-action-buttons .btn, #panel-sheet .watch-mobile-action-toggle { height: auto; }
  #panel-sheet .watch-action-group { padding: 0; border: 0; }
  #panel-sheet .watch-action-buttons { display: grid; gap: 3px; }
  #panel-sheet .watch-command-panel .watch-action-buttons .btn { min-height: 34px; width: 100%; padding: 3px 6px; font-size: 12px; border-radius: 8px; }
  #panel-sheet .watch-inline-actions > .watch-actions-grid { padding: 0; }
  #panel-sheet #watchSharedLists, #panel-sheet #watchProposals, #panel-sheet #watchBinderAdd { min-height: 34px; }
}

/* Phone Watchlist header, round two: view switch + Add, a one-line status with
   a short Auto-sync toggle, then Filters and Actions side by side. Actions open
   as a bottom sheet with every group expanded (see sheets.css). */
.watch-mobile-actions-toggle, .watch-sync-short { display: none; }
@media screen and (max-width: 700px) {
  #panel-sheet .watch-command-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: start; }
  #panel-sheet .watch-command-bar > * { grid-column: 1 / -1; }
  #panel-sheet .watch-command-bar > #watchFiltersPanel { grid-column: 1; margin-top: 4px; }
  #panel-sheet .watch-command-bar > #watchActionsToggle { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; align-self: start; margin-top: 4px; min-height: 34px; padding: 3px 10px; font-size: 12px; white-space: nowrap; }
  #panel-sheet .watch-command-bar > #watchActionsToggle[aria-expanded="true"] > span { display: inline-block; transform: rotate(180deg); }
  #panel-sheet .watch-command-bar > #watchMorePanel:not([data-mobile-open="true"]) { display: none; }
  #panel-sheet .watch-binder-sync { min-height: 20px; font-size: 12px; }
  #panel-sheet .watch-binder-sync .watch-sync-long, #panel-sheet .watch-binder-sync #watchBinderSyncHint { display: none; }
  #panel-sheet .watch-binder-sync .watch-sync-short { display: inline; }
  #panel-sheet .watch-command-row { gap: 2px 6px; }
}

/* Before menu promotion, the fallback must still clear the fixed mobile
   purchase pile (z 120), not merely the desktop sticky pile (z 35). */
#panel-sheet .watch-card-choice-panel, #panel-sheet .watch-set-filter-body, #panel-sheet .watch-mobile-action-body { z-index: 140; }

/* Keep action text optically centered without centering disclosure labels or
   card data. Compact spacing must not shrink the phone's tappable controls. */
@media screen {
  #panel-sheet .watch-action-buttons .btn,
  #panel-sheet .watch-command-tools .btn,
  #panel-sheet .watch-stage-actions .btn,
  #panel-sheet .watch-set-dialog-actions .btn,
  #panel-sheet .watch-set-manager-actions .btn,
  #panel-sheet .watch-shared-toolbar .btn,
  #panel-sheet .watch-shared-item-actions .btn {
    justify-content: center;
    text-align: center;
    line-height: 1.35;
  }
  #panel-sheet .watch-binder-sync .watch-sync-short { display: none; }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  #panel-sheet .watch-filter-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The slider and amount need the row's width; the two set/category pickers
     do not. Keep the input labels aligned instead of squeezing the price. */
  #panel-sheet .watch-inline-filters .watch-filter-bar { grid-template-columns: minmax(0, 1fr); }
  #panel-sheet .watch-inline-filters .watch-price-control { grid-column: 1 / -1; }
}
@media screen and (max-width: 700px) {
  #panel-sheet .watch-view-switch button,
  #panel-sheet .watch-command-tools .btn,
  #panel-sheet .watch-binder-sync,
  #panel-sheet .watch-command-panel .watch-mobile-filter-toggle,
  #panel-sheet .watch-command-panel .watch-mobile-action-toggle,
  #panel-sheet .watch-command-panel .watch-action-buttons .btn,
  #panel-sheet .watch-command-bar > #watchActionsToggle,
  #panel-sheet #watchSharedLists,
  #panel-sheet #watchProposals,
  #panel-sheet #watchBinderAdd { min-height: 44px; }
  #panel-sheet .watch-view-switch button { text-align: center; }
  #panel-sheet .watch-binder-sync input { margin: 0; }
  #panel-sheet .watch-binder-sync .watch-sync-long { display: none; }
  #panel-sheet .watch-binder-sync .watch-sync-short { display: inline; }
  /* Expanded fields need the whole phone width, not the narrow Filters track.
     Keep the compact two-button row only while the fields are collapsed. */
  #panel-sheet .watch-command-bar > #watchFiltersPanel[data-mobile-expanded="true"] { grid-column: 1 / -1; }
  #panel-sheet .watch-command-bar > #watchFiltersPanel[data-mobile-expanded="true"] + #watchActionsToggle { grid-column: 1 / -1; justify-self: end; }
}

/* Device-local binder focus. Keep the permanent restore control and app save
   status; only presentation changes, not the mounted book or current page. */
@media screen {
  #panel-guide .guide-workspace-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  #panel-guide .guide-workspace-title h2 { margin: 0; }
  #panel-guide #guideFocusToggle { width: auto; min-height: 44px; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
  #panel-guide.is-active.is-binder-focused { display: flex; flex-direction: column; gap: 8px; }
  #panel-guide.is-binder-focused > .toolbar {
    display: block; position: sticky; top: calc(var(--shell-header-height) + 8px); z-index: 22;
    width: 100%; max-height: none;
    padding: 6px 10px; overflow: visible; margin: 0;
  }
  #panel-guide.is-binder-focused > .toolbar > :not(.guide-workspace-title),
  #panel-guide.is-binder-focused #guideBody > [aria-label="Binder details"] { display: none !important; }
  #panel-guide.is-binder-focused .guide-workspace-title { justify-content: space-between; }
  #panel-guide.is-binder-focused .guide-workspace-title h2 { font-size: 18px; }
  #panel-guide.is-binder-focused #guideBody {
    display: flex; flex-direction: column; grid-column: 1; grid-row: auto; width: 100%; gap: 8px;
  }
  #panel-guide.is-binder-focused #guideBody > .guide-reading-surface { width: 100%; gap: 8px; }
  #panel-guide.is-binder-focused #guideBody > .guide-reading-surface > .guide-nav { top: calc(var(--shell-header-height) + var(--guide-focus-toolbar-height, 58px) + 16px); }
  #panel-guide.is-binder-focused #guideBody > .guide-reading-surface > .book { max-width: 100%; }
}
@media screen and (max-width: 700px), screen and (any-pointer: coarse) {
  /* One sticky restore bar leaves more card space on touch screens. Separate
     sticky rows otherwise collide when the book reaches its lower boundary. */
  #panel-guide.is-binder-focused #guideBody > .guide-reading-surface > .guide-nav { position: static; z-index: auto; }
}

/* Landscape phones and short browser windows cannot fit the shell, a pinned
   purchase pile and a usable content strip at once. Let these rows scroll;
   keep the persistent search at its ordinary bottom edge, not above the pile. */
@media screen and (max-height: 500px) {
  html { scroll-padding-top: 12px; }
  .topbar,
  #panel-guide > .toolbar,
  #panel-guide.is-binder-focused > .toolbar,
  #guideBody > .guide-reading-surface > .guide-nav { position: static; }
  .market-movers { position: relative; top: auto; }
  #panel-sheet .watch-stage-bar.has-items {
    position: static; top: auto; bottom: auto; width: auto;
    max-height: none; overflow: visible; margin-block: 12px;
  }
  #panel-sheet:has(.watch-stage-bar.has-items) { padding-bottom: 80px; }
  html:not([data-keyboard-open="true"]) body[data-view="sheet"]:has(.watch-stage-bar.has-items) #watchSearchDock {
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  #guideSourceFind, #guideFind { scroll-margin-top: 12px; }
}