/* The Reading Room: see docs/DESIGN.md. Tokens first, then base, shell, components, pages, motion. */
:root {
  --bg: #F6EFE2; --bg-raised: #FFFBF2; --bg-sunken: #EFE5D2; --ink: #2B2118; --ink-muted: #6B5A48; --line: #E0D3BC; --line-strong: #8C7C68;
  --brand: #7A4A28; --accent: #A85A0A; --on-accent: #FFFFFF; --on-brand: #FFFFFF; --danger: #8F2D2D; --on-danger: #FFFFFF; --ok: #3F6B3A; --warn: #8A5F00;
  --shelf-a: #8A5A34; --shelf-b: #5E3A1E; --ring: #A85A0A; --shadow: 0 1px 2px rgb(60 40 20 / .10), 0 8px 24px rgb(60 40 20 / .10);
  --backdrop: rgb(30 20 10 / .45);
  --cloth-0: #7A2E2E; --cloth-1: #2F4F4F; --cloth-2: #2E3F5C; --cloth-3: #6B4E2E; --cloth-4: #4F3B5C; --cloth-5: #5A5F2E; --cloth-6: #8A4B2B; --cloth-7: #3E4A4F;
  --font-display: 'Cormorant Garamond', Georgia, serif; --font-read: 'Crimson Pro', Georgia, serif; --font-ui: Inter, system-ui, sans-serif;
  --r-input: 8px; --r-card: 12px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1511; --bg-raised: #241D17; --bg-sunken: #15110D; --ink: #EDE3D0; --ink-muted: #B5A58E; --line: #3A2F25; --line-strong: #80705D;
    --brand: #C98F5B; --accent: #E2A04A; --on-accent: #1A1511; --on-brand: #1A1511; --danger: #E58A7A; --on-danger: #1A1511; --ok: #8FBF86; --warn: #E6C06A;
    --shelf-a: #6B4527; --shelf-b: #3F2713; --ring: #E2A04A; --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 8px 24px rgb(0 0 0 / .45);
    --backdrop: rgb(10 6 2 / .62); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #1A1511; --bg-raised: #241D17; --bg-sunken: #15110D; --ink: #EDE3D0; --ink-muted: #B5A58E; --line: #3A2F25; --line-strong: #80705D;
    --brand: #C98F5B; --accent: #E2A04A; --on-accent: #1A1511; --on-brand: #1A1511; --danger: #E58A7A; --on-danger: #1A1511; --ok: #8FBF86; --warn: #E6C06A;
    --shelf-a: #6B4527; --shelf-b: #3F2713; --ring: #E2A04A; --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 8px 24px rgb(0 0 0 / .45);
    --backdrop: rgb(10 6 2 / .62); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font-ui); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
h1 { font-size: 40px; line-height: 1.1; }
h2 { font-size: 22px; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--brand); }
img { max-width: 100%; }
.rb-muted { color: var(--ink-muted); }
.rb-small { font-size: 13px; }
.rb-right { text-align: right; }
.rb-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-grow { flex: 1; min-width: 0; }
.rb-mt { margin-top: 12px; }
.rb-pad { padding: 16px; }
.rb-row { display: flex; gap: 8px; align-items: center; }
.rb-wrapflex { flex-wrap: wrap; }
.rb-visually { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rb-icon { flex: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* ---- shell: left rail on desktop, top bar below 1100px */
.rb-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); background: linear-gradient(90deg, var(--bg-raised) 0 239px, var(--line) 239px 240px, var(--bg) 240px); }
.rb-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px; padding: 24px 16px; }
.rb-brand { display: flex; align-items: center; gap: 8px; padding: 0 8px; text-decoration: none; color: var(--brand); font: italic 500 32px/1 var(--font-display); }
.rb-brand .rb-mark { width: 30px; height: 30px; flex: none; }
.rb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.rb-navgroup { margin: 16px 12px 4px; font: 600 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.rb-navlink { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; font: 500 15px/1 var(--font-ui); color: var(--ink-muted); text-decoration: none; text-align: left; position: relative; transition: background-color .15s ease-out, color .15s ease-out; }
.rb-navlink:hover { background: var(--bg-sunken); color: var(--ink); }
.rb-navlink[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, var(--bg-raised)); color: var(--ink); font-weight: 600; }
.rb-navlink[aria-current="page"] .rb-icon { color: var(--accent); }
.rb-navlink[aria-current="page"]::before { content: ''; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.rb-railfoot { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.rb-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); font: 500 14px/1 var(--font-ui); cursor: pointer; }
.rb-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-user:hover { border-color: var(--accent); }
.rb-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
.rb-iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.rb-content { min-width: 0; }
.rb-main { max-width: 1180px; margin: 0 auto; padding: 32px; outline: none; }
@media (max-width: 1099px) {
  .rb-shell { display: block; background: var(--bg); }
  .rb-rail { position: sticky; top: 0; z-index: 5; height: auto; background: var(--bg-raised); flex-direction: row; align-items: center; gap: 12px; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rb-brand { font-size: 26px; }
  .rb-navgroup { display: none; }
  .rb-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 2px; scrollbar-width: none; }
  .rb-navlink { flex: none; min-height: 36px; padding: 0 10px; white-space: nowrap; }
  .rb-navlink[aria-current="page"]::before { display: none; }
  .rb-railfoot { border: 0; padding: 0; flex: none; }
  .rb-user span { display: none; }
  .rb-user { flex: none; width: 36px; padding: 0; justify-content: center; }
  .rb-main { padding: 24px 16px; }
}
@media (max-width: 700px) { h1 { font-size: 30px; } }

/* ---- page header and toolbars */
.rb-head { display: flex; align-items: flex-end; gap: 8px 12px; margin-bottom: 24px; flex-wrap: wrap; }
.rb-titleblock { flex: 1 1 280px; min-width: 0; }
.rb-sub { color: var(--ink-muted); margin-top: 4px; }
.rb-toolbar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 20px; }
.rb-searchbox { position: relative; display: block; flex: 1 1 200px; max-width: 320px; }
.rb-searchbox .rb-icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--ink-muted); pointer-events: none; }
.rb-searchbox input { padding-left: 38px; }
.rb-section { margin-top: 32px; }
.rb-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* ---- buttons and pills */
.rb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink); font: 600 13.5px/1 var(--font-ui); cursor: pointer; white-space: nowrap; position: relative; transition: transform .15s ease-out, background-color .15s ease-out, border-color .15s ease-out; }
.rb-btn .rb-icon { width: 16px; height: 16px; }
.rb-btn:hover { border-color: var(--accent); color: var(--accent); }
.rb-btn:active { transform: translateY(1px); }
.rb-btn.rb-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rb-btn.rb-primary:hover { filter: brightness(1.08); color: var(--on-accent); }
.rb-btn.rb-danger-solid { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.rb-btn.rb-danger-solid:hover { filter: brightness(1.08); color: var(--on-danger); }
dialog.rb-dialog.rb-ask-dialog { width: min(460px, calc(100vw - 24px)); }
.rb-ask-text { margin: 0; font-family: var(--font-read); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.rb-btn.rb-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.rb-btn.rb-danger:hover { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--bg-raised)); }
.rb-btn:disabled { opacity: .55; cursor: default; }
.rb-btn.rb-busy::after { content: ''; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rb-spin .7s linear infinite; }
.rb-btn.rb-wide { width: 100%; min-height: 44px; font-size: 15px; }
.rb-btn[aria-pressed="true"]:not(.rb-primary) { background: color-mix(in srgb, var(--brand) 16%, var(--bg-raised)); border-color: var(--brand); color: var(--ink); }
.rb-chip { min-height: 32px; font-weight: 500; }
.rb-chip.rb-primary { font-weight: 600; }
.rb-chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
@media (max-width: 700px) { .rb-btn, .rb-iconbtn { min-height: 44px; } .rb-iconbtn { width: 44px; height: 44px; } .rb-chip { min-height: 40px; } }

/* ---- forms */
input, select, textarea { font: 400 15px/1.4 var(--font-ui); color: var(--ink); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-input); padding: 8px 12px; width: 100%; min-height: 40px; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: .8; }
input:focus, select:focus, textarea:focus { border-color: var(--ring); }
textarea { min-height: 80px; resize: vertical; }
.rb-tall { min-height: 130px; }
select { cursor: pointer; }
.rb-filter { width: auto; max-width: 220px; min-width: 0; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--accent); }
.rb-field { display: flex; flex-direction: column; gap: 6px; }
.rb-field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); letter-spacing: .02em; }
.rb-error { color: var(--danger); font-size: 13.5px; }
.rb-notice { padding: 8px 4px; }

/* ---- badges, chips */
.rb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; min-height: 22px; border-radius: 999px; font: 600 12px/1.3 var(--font-ui); background: color-mix(in srgb, var(--brand) 13%, var(--bg-raised)); color: var(--brand); white-space: nowrap; }
.rb-badge .rb-icon { width: 13px; height: 13px; }
.rb-badge.rb-good { background: color-mix(in srgb, var(--ok) 14%, var(--bg-raised)); color: var(--ok); }
.rb-badge.rb-late { background: color-mix(in srgb, var(--warn) 16%, var(--bg-raised)); color: var(--warn); }
.rb-badge.rb-plain, .rb-badge.rb-genre { background: var(--bg-sunken); color: var(--ink-muted); }
.rb-badge .rb-dot, .rb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.rb-read-unread { background: var(--bg-sunken); color: var(--ink-muted); }
.rb-read-reading { background: color-mix(in srgb, var(--accent) 16%, var(--bg-raised)); color: var(--brand); }
.rb-read-read { background: color-mix(in srgb, var(--ok) 14%, var(--bg-raised)); color: var(--ok); }
.rb-read-abandoned { background: color-mix(in srgb, var(--danger) 10%, var(--bg-raised)); color: var(--danger); }
.rb-verdict-recommend { background: color-mix(in srgb, var(--ok) 14%, var(--bg-raised)); color: var(--ok); }
.rb-verdict-maybe { background: color-mix(in srgb, var(--warn) 16%, var(--bg-raised)); color: var(--warn); }
.rb-verdict-dont { background: color-mix(in srgb, var(--danger) 10%, var(--bg-raised)); color: var(--danger); }
.rb-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-stars { display: inline-flex; gap: 1px; color: color-mix(in srgb, var(--ink-muted) 55%, transparent); }
.rb-stars .rb-icon { width: 14px; height: 14px; }
.rb-stars .rb-on { color: var(--accent); }
.rb-stars .rb-on .rb-icon { fill: currentColor; }
.rb-starinput { display: flex; gap: 2px; }
.rb-star { display: inline-flex; background: none; border: 0; padding: 4px; cursor: pointer; color: color-mix(in srgb, var(--ink-muted) 55%, transparent); border-radius: 6px; transition: transform .15s ease-out; }
.rb-star .rb-icon { width: 28px; height: 28px; }
.rb-star:hover { transform: scale(1.08); color: var(--accent); }
.rb-star.rb-on { color: var(--accent); }
.rb-star.rb-on .rb-icon { fill: currentColor; }
.rb-chipbox { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; padding: 2px; }
.rb-chipbtn { min-height: 30px; padding: 0 12px; font-weight: 500; }
.rb-chipbtn .rb-icon { width: 12px; height: 12px; opacity: .7; }
.rb-chipbtn.rb-selected { background: color-mix(in srgb, var(--brand) 20%, var(--bg-raised)); border-color: var(--brand); color: var(--ink); font-weight: 600; }
.rb-series-label { font-weight: 600; color: var(--brand); display: block; }

/* ---- cards, tiles, tables */
.rb-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.rb-card > h2 { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 8px; }
.rb-tile { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow); }
.rb-tile-label { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-weight: 500; }
.rb-tile-label .rb-icon { width: 18px; height: 18px; color: var(--brand); }
.rb-tile .rb-big { font: 600 56px/1.05 var(--font-display); margin: 8px 0 4px; font-variant-numeric: lining-nums; }
.rb-tile.rb-alert { border-color: var(--warn); }
.rb-tile.rb-alert .rb-big { color: var(--warn); }
.rb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; align-items: start; }
@media (max-width: 900px) { .rb-cols { grid-template-columns: 1fr; } }
.rb-empty { padding: 32px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-muted); }
.rb-empty-img { width: 220px; height: 220px; object-fit: contain; border-radius: var(--r-card); }
.rb-empty-title { font: 600 26px/1.2 var(--font-display); color: var(--ink); }
.rb-empty .rb-btn { margin-top: 8px; }
.rb-wrap { overflow-x: auto; }
table.rb-table { width: 100%; border-collapse: collapse; }
.rb-table th, .rb-table td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.rb-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); font-weight: 600; }
.rb-table tr:last-child td { border-bottom: 0; }
.rb-table .rb-actions { text-align: right; white-space: nowrap; }
.rb-table .rb-actions .rb-btn { margin-left: 6px; }
.rb-rowtitle { font: 600 17px/1.3 var(--font-read); }
.rb-title { font: 600 16px/1.3 var(--font-read); }
.rb-attn { list-style: none; margin: 0; padding: 0; }
.rb-attn li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.rb-attn li:last-child { border-bottom: 0; }
.rb-attn li > .rb-icon { color: var(--ink-muted); }
.rb-attn li.rb-urgent > .rb-icon { color: var(--warn); }
.rb-prose { font: 400 18px/1.6 var(--font-read); max-width: 70ch; margin-bottom: 24px; }
.rb-orders { display: flex; flex-direction: column; gap: 20px; }
.rb-order { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.rb-orderhead { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 16px 20px; background: color-mix(in srgb, var(--brand) 6%, var(--bg-raised)); border-bottom: 1px solid var(--line); }
.rb-orderhead .rb-grow { flex: 1 1 220px; }
.rb-line td:first-child { padding-left: 28px; }

/* ---- shelves and covers */
.rb-shelfwrap { padding: 8px 0; }
.rb-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 40px 20px; padding: 16px 12px 8px; align-items: start; }
.rb-shelf-sm { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.rb-book { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; }
div.rb-book { cursor: default; }
.rb-book > .rb-title, .rb-book > .rb-author, .rb-book > .rb-slot, .rb-book > .rb-series-label { display: block; }
.rb-book > .rb-badges { display: flex; }
.rb-book > .rb-stars { display: inline-flex; }
.rb-book .rb-title { margin-top: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-book .rb-author { font-size: 13px; color: var(--ink-muted); }
.rb-book .rb-badges { margin-top: 2px; }
.rb-book .rb-btn { align-self: flex-start; margin-top: 4px; }
.rb-slot { position: relative; }
.rb-slot::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: -14px; height: 18px; z-index: 0; border-radius: 1px; background: linear-gradient(var(--shelf-a), var(--shelf-b)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 8px 10px -6px rgb(0 0 0 / .4); }
.rb-cover { position: relative; z-index: 1; container-type: inline-size; width: 100%; aspect-ratio: 2 / 3; border-radius: 3px 6px 6px 3px; overflow: hidden; background: var(--bg-sunken); box-shadow: 0 2px 3px rgb(30 20 10 / .25), 0 6px 14px rgb(30 20 10 / .22); transition: transform .18s ease-out; }
.rb-cover::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 7%; background: linear-gradient(90deg, rgb(0 0 0 / .22), rgb(255 255 255 / .10) 55%, transparent); pointer-events: none; }
.rb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.rb-book:hover .rb-cover { transform: translateY(-3px); }
.rb-cloth { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14% 12% 12%; text-align: center; background: var(--cloth-0); color: #F6EFE2; }
.rb-cloth::before { content: ''; position: absolute; inset: 7%; border: 1px solid rgb(246 239 226 / .38); pointer-events: none; }
.rb-cloth[data-tone="1"] { background: var(--cloth-1); } .rb-cloth[data-tone="2"] { background: var(--cloth-2); } .rb-cloth[data-tone="3"] { background: var(--cloth-3); }
.rb-cloth[data-tone="4"] { background: var(--cloth-4); } .rb-cloth[data-tone="5"] { background: var(--cloth-5); } .rb-cloth[data-tone="6"] { background: var(--cloth-6); } .rb-cloth[data-tone="7"] { background: var(--cloth-7); }
.rb-cloth-title { font: 600 clamp(12px, 11cqw, 26px)/1.1 var(--font-display); text-wrap: balance; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rb-cloth-author { position: absolute; left: 12%; right: 12%; bottom: 10%; font: 500 clamp(9px, 6.5cqw, 13px)/1.2 var(--font-ui); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-pos { position: absolute; z-index: 2; top: 6px; left: 6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--on-brand); font: 700 12px/1 var(--font-ui); box-shadow: 0 1px 3px rgb(0 0 0 / .35); }
.rb-pos::before { content: '#'; opacity: .75; }
.rb-cover-sm { width: 40px; border-radius: 2px 4px 4px 2px; }
.rb-cover-sm .rb-cloth { padding: 4px; } .rb-cover-sm .rb-cloth::before, .rb-cover-sm .rb-cloth-author { display: none; } .rb-cover-sm .rb-cloth-title { font-size: 9px; -webkit-line-clamp: 4; }
.rb-cover-md { width: 110px; flex: none; }
.rb-cover-lg { width: 170px; flex: none; }
.rb-cover-missing { background: transparent; border: 2px dashed var(--line); box-shadow: none; display: flex; align-items: center; justify-content: center; }
.rb-cover-missing::after { display: none; }
.rb-missing-n { font: 600 34px/1 var(--font-display); color: var(--ink-muted); }
.rb-missing .rb-slot::after { opacity: .55; }
.rb-scanned .rb-btn { margin-top: 6px; }
.rb-skeleton .rb-cover { background: var(--bg-sunken); box-shadow: none; animation: rb-pulse 1.4s ease-in-out infinite; }
.rb-boot { padding: 48px 32px; max-width: 1180px; margin: 0 auto; }
.rb-coverrow { display: flex; gap: 20px; align-items: flex-start; }
.rb-coveractions { display: flex; flex-direction: column; gap: 8px; }
.rb-coveractions .rb-row { flex-wrap: wrap; }
.rb-big2 { font-size: 22px; }

/* ---- dialogs */
dialog.rb-dialog { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-raised) var(--grain); color: var(--ink); padding: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: var(--shadow); }
dialog.rb-dialog::backdrop { background: var(--backdrop); }
dialog.rb-dialog[open] { animation: rb-rise .2s ease-out; }
.rb-form { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.rb-form > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.rb-form > header h2 { font-size: 28px; }
.rb-form > .rb-body { padding: 20px 24px; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rb-form > footer { padding: 14px 24px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rb-body > .rb-full, .rb-field.rb-full { grid-column: 1 / -1; }
.rb-body td select { min-width: 190px; }
.rb-picker { max-height: 190px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-input); padding: 4px 10px; background: var(--bg-sunken); }
.rb-picker label { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; cursor: pointer; }
.rb-choices { display: flex; flex-direction: column; gap: 10px; }
.rb-radio { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.rb-genrelist { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.rb-genrerow { display: flex; gap: 8px; align-items: center; }
.rb-genrerow input { flex: 1; }
.rb-genrename { display: flex; align-items: center; gap: 8px; }
.rb-genrename .rb-icon { width: 15px; height: 15px; color: var(--ink-muted); }
.rb-linklist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rb-linkrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rb-video { width: 100%; max-height: 50vh; background: #000; border-radius: var(--r-input); }
@media (max-width: 560px) { .rb-form > .rb-body { grid-template-columns: minmax(0, 1fr); padding: 16px; } .rb-form > header, .rb-form > footer { padding-left: 16px; padding-right: 16px; } }

/* ---- toasts */
.rb-toasts { position: fixed; bottom: 20px; left: 50%; translate: -50% 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.rb-toast { background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow); animation: rb-toast .2s ease-out; }

/* ---- receive */
.rb-scanpanel { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.rb-scanhero { position: relative; display: block; }
.rb-scanhero .rb-scanicon { position: absolute; left: 22px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; color: var(--accent); pointer-events: none; }
.rb-scan { font: 500 30px/1.2 var(--font-ui); letter-spacing: .06em; padding: 0 20px 0 74px; min-height: 76px; border: 2px solid var(--accent); border-radius: var(--r-card); font-variant-numeric: tabular-nums; }
.rb-scan::placeholder { letter-spacing: 0; font-size: 20px; }
.rb-boxrow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.rb-boxfield { flex: 1 1 260px; min-width: 0; }
.rb-boxsel { width: 100%; }
.rb-result { margin: 24px 0 0; }
.rb-result:empty { margin: 0; }
.rb-resultcard { display: flex; gap: 28px; padding: 24px; align-items: flex-start; animation: rb-rise .2s ease-out; }
.rb-resultcard.rb-warnc, .rb-resultcard.rb-bad { border-color: var(--warn); }
.rb-resultcard.rb-bad { color: var(--danger); border-color: var(--danger); align-items: center; }
.rb-resultbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rb-resulttitle { font-size: 34px; line-height: 1.1; margin-top: 4px; }
@media (max-width: 560px) { .rb-resultcard { flex-direction: column; } .rb-scan { font-size: 22px; } }

/* ---- login */
.rb-login { position: relative; min-height: 100vh; display: flex; background: var(--bg); }
.rb-login-hero { position: absolute; inset: 0; background: var(--bg) url("img/hero-library.webp") center / cover no-repeat; }
.rb-login-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 90%, transparent) 0, color-mix(in srgb, var(--bg) 70%, transparent) 38%, transparent 62%); }
:root[data-theme="dark"] .rb-login-hero::after { background: linear-gradient(90deg, rgb(20 14 9 / .95) 0, rgb(20 14 9 / .82) 40%, rgb(20 14 9 / .35) 75%), rgb(20 14 9 / .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rb-login-hero::after { background: linear-gradient(90deg, rgb(20 14 9 / .95) 0, rgb(20 14 9 / .82) 40%, rgb(20 14 9 / .35) 75%), rgb(20 14 9 / .35); } }
.rb-login-panel { position: relative; width: min(460px, 100%); margin-left: 6vw; padding: 48px 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.rb-login-brand { display: flex; align-items: center; gap: 12px; color: var(--brand); }
.rb-login-brand .rb-mark { width: 44px; height: 44px; flex: none; }
.rb-login-panda { display: block; width: 144px; height: 144px; margin: 0 0 8px -6px; }
.rb-login-brand h1 { font-style: italic; font-weight: 500; font-size: 64px; color: var(--brand); }
.rb-tagline { font: italic 500 26px/1.2 var(--font-display); color: var(--ink); margin-bottom: 8px; }
.rb-logincard { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.rb-login-foot { display: flex; }
@media (max-width: 900px) {
  .rb-login { flex-direction: column; }
  .rb-login-hero { position: relative; inset: auto; height: 160px; flex: none; }
  .rb-login-hero::after { background: linear-gradient(transparent 55%, var(--bg)); }
  .rb-login-panel { margin: 0 auto; padding: 16px 16px 32px; }
  .rb-login-brand h1 { font-size: 48px; }
  .rb-login-panda { display: none; }
}

/* ---- motion */
.rb-enter { animation: rb-fade .12s ease-out; }
@keyframes rb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rb-toast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rb-spin { to { transform: rotate(360deg); } }
@keyframes rb-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
:root[data-theme="dark"] .rb-empty-img { filter: brightness(.82) contrast(1.05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rb-empty-img { filter: brightness(.82) contrast(1.05); } }

.rb-logincard > h2.rb-plainh { padding: 0; border: 0; font-size: 28px; }

.rb-pad > h2 { padding: 0 0 4px; border: 0; }
@media (max-width: 700px) {
  .rb-simple tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .rb-simple td { padding: 0; border: 0; }
  .rb-simple td:first-child { flex: 1 1 100%; }
  .rb-simple td:nth-child(2) { flex: 1; }
  .rb-attn li { flex-wrap: wrap; padding: 12px 16px; }
  .rb-attn li .rb-grow { flex: 1 1 60%; }
}

/* cover block in the edit dialog */
.rb-coverstatus { display: flex; flex-direction: column; gap: 2px; }
.rb-coverstatus strong { font-weight: 600; }
.rb-fetchbox { flex-wrap: wrap; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--bg-sunken); }
.rb-fetchbox[hidden] { display: none; }
.rb-fetchbox select { width: auto; min-width: 160px; flex: 1; }
.rb-guessed { width: 12px !important; height: 12px !important; color: var(--accent); opacity: 1 !important; }

/* descriptions */
.rb-descblock { display: flex; flex-direction: column; gap: 8px; }
.rb-desc-input { min-height: 140px; font-family: var(--font-read); font-size: 17px; line-height: 1.55; }
.rb-descsrc a { color: var(--brand); font-weight: 600; }
.rb-langnote { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-muted); font-size: 12px; font-weight: 600; }
.rb-desc { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rb-desc-text { font: 400 17px/1.6 var(--font-read); max-width: 68ch; }
.rb-desc-text p + p { margin-top: 10px; }
.rb-desc-text.rb-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rb-desc-text.rb-clamped p { display: inline; }
.rb-small-btn { min-height: 30px; font-weight: 500; }
.rb-subhead { font-size: 20px; margin-bottom: 6px; }
.rb-resultdesc { font: 400 16px/1.55 var(--font-read); color: var(--ink); max-width: 62ch; margin-top: 4px; }

/* Browser autofill must not paint its own yellow/olive over the theme */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill,
input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--bg-sunken) inset;
  transition: background-color 9999s ease-out 0s;
}
input:autofill { background-color: var(--bg-sunken); color: var(--ink); }

/* boxes, select mode */
.rb-boxcontrol { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.rb-boxcontrol .rb-field { flex: 1 1 260px; }
.rb-checkcell { width: 56px; text-align: center; }
.rb-checkcell input { width: 18px; height: 18px; }
.rb-pickerlist { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--bg-sunken); }
.rb-selectbar { position: sticky; bottom: 16px; z-index: 6; display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 10px 16px; border-radius: var(--r-card); background: var(--bg-raised); border: 1px solid var(--accent); box-shadow: var(--shadow); animation: rb-rise .2s ease-out; }
.rb-selectbar[hidden] { display: none; }
.rb-selmark { position: absolute; z-index: 3; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--bg-raised); color: transparent; border: 2px solid var(--ink-muted); }
.rb-selmark .rb-icon { width: 16px; height: 16px; }
.rb-selectable .rb-selmark { display: inline-flex; }
.rb-selectable.rb-picked .rb-selmark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rb-selectable.rb-picked .rb-cover { outline: 3px solid var(--accent); outline-offset: 2px; }
.rb-publine { flex-basis: 100%; }
.rb-form > .rb-body { grid-auto-rows: max-content; align-content: start; }

/* translated descriptions */
.rb-translated { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 4px; }
.rb-translated-line { display: flex; align-items: center; gap: 6px; }
.rb-translated-line .rb-icon { width: 15px; height: 15px; color: var(--accent); }
.rb-original > summary { list-style: none; cursor: pointer; display: inline-flex; }
.rb-original > summary::-webkit-details-marker { display: none; }
.rb-original[open] > summary { margin-bottom: 8px; }
.rb-original-text { padding: 10px 14px; border-left: 3px solid var(--line); background: var(--bg-sunken); border-radius: 0 var(--r-input) var(--r-input) 0; font-size: 16px; }
.rb-desc-text.rb-clamped p::after { content: ' '; }

/* ---- accounts: sign-in tabs, auth forms, account dialog, admin */
.rb-logincard { gap: 14px; }
.rb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-sunken); }
.rb-tab { min-height: 36px; border: 0; border-radius: 999px; background: none; color: var(--ink-muted); font: 600 14px/1 var(--font-ui); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.rb-tab[aria-selected="true"] { background: var(--bg-raised); color: var(--ink); box-shadow: 0 1px 2px rgb(60 40 20 / .15); }
.rb-tab:hover { color: var(--ink); }
.rb-authform { display: flex; flex-direction: column; gap: 14px; }
.rb-authform h2 { font-size: 28px; }
.rb-google { text-decoration: none; }
.rb-gmark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 700 12px/1 var(--font-ui); }
.rb-or { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 13px; }
.rb-or::before, .rb-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.rb-forgot { align-self: flex-start; border: 0; background: none; color: var(--brand); padding: 0 4px; }
.rb-notice-ok { padding: 10px 12px; border-radius: var(--r-input); background: color-mix(in srgb, var(--ok) 14%, var(--bg-raised)); color: var(--ok); font-weight: 500; }
.rb-notice-line { padding: 10px 12px; border-radius: var(--r-input); background: var(--bg-sunken); color: var(--ink); }
.rb-login-foot { align-items: center; gap: 16px; }
.rb-footlink { color: var(--ink-muted); font-size: 13px; }
.rb-acctsec { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rb-acctsec:last-child { border-bottom: 0; }
.rb-acctline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-rolebadge { font: 700 10px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-style: normal; }
.rb-user { gap: 8px; }
.rb-menuwrap { position: relative; display: inline-block; text-align: left; }
.rb-menu { position: fixed; left: var(--menu-left, 0); top: var(--menu-top, 0); z-index: 40; min-width: 210px; padding: 6px; border-radius: var(--r-card); background: var(--bg-raised); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: rb-rise .15s ease-out; }
.rb-menu[hidden] { display: none; }
.rb-menuitem { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px/1 var(--font-ui); cursor: pointer; text-align: left; white-space: nowrap; }
.rb-menuitem .rb-icon { width: 16px; height: 16px; color: var(--ink-muted); }
.rb-menuitem:hover, .rb-menuitem:focus-visible { background: var(--bg-sunken); }
.rb-menudanger, .rb-menudanger .rb-icon { color: var(--danger); }
.rb-switch { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-sunken); cursor: pointer; padding: 0; transition: background-color .15s ease-out; }
.rb-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-muted); transition: transform .15s ease-out, background-color .15s ease-out; }
.rb-switch[aria-checked="true"] { background: color-mix(in srgb, var(--ok) 30%, var(--bg-raised)); border-color: var(--ok); }
.rb-switch[aria-checked="true"] .rb-switch-knob { transform: translateX(20px); background: var(--ok); }
.rb-signupcard { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.rb-usertable td { vertical-align: middle; }
.rb-usertable .rb-actions { overflow: visible; }
.rb-gicon, .rb-okmark { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--ink-muted); }
.rb-gicon .rb-icon, .rb-okmark .rb-icon { width: 14px; height: 14px; }
.rb-okmark { color: var(--ok); }
.rb-audit { margin-top: 24px; }
.rb-audit > summary { list-style: none; cursor: pointer; padding: 14px 20px; display: flex; align-items: center; }
.rb-audit > summary::-webkit-details-marker { display: none; }
.rb-audit > summary::after { content: '+'; margin-left: auto; color: var(--ink-muted); font-size: 22px; }
.rb-audit[open] > summary::after { content: '–'; }
.rb-audit h2 { padding: 0; border: 0; }
.rb-tile .rb-small { min-height: 2.6em; }

/* ---- legal pages */
.rb-legal { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
.rb-legal h1 { margin: 8px 0 4px; }
.rb-legal h2 { margin: 36px 0 8px; }
.rb-legal p, .rb-legal li { font: 400 18px/1.65 var(--font-read); margin: 8px 0; }
.rb-legal ul { padding-left: 22px; }
.rb-legal .rb-brand { padding: 0; }
.rb-legal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.rb-legal-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }

.rb-railfoot { flex-wrap: wrap; }
.rb-railfoot .rb-user { flex: 1 1 100%; }
@media (max-width: 1099px) { .rb-railfoot { flex-wrap: nowrap; } .rb-railfoot .rb-user { flex: none; } .rb-rolebadge { display: none; } }
.rb-user .rb-rolebadge { margin-left: auto; }

/* control edges: 3:1 against the page and the raised card (--line stays for dividers and card borders) */
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .rb-btn, .rb-iconbtn, .rb-user, .rb-switch { border-color: var(--line-strong); }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus, .rb-btn:hover, .rb-iconbtn:hover, .rb-user:hover { border-color: var(--ring); }
.rb-skip { position: absolute; left: 8px; top: -60px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--font-ui); text-decoration: none; }
.rb-skip:focus { top: 8px; }
.rb-pdflink { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; }
.rb-pos-pre::before { content: none; }
h1[tabindex="-1"]:focus { outline: none; }
.rb-toast { pointer-events: auto; }

/* ---- batch B: scan list, box chip, undo toast */
.rb-scanrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rb-scanrow { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 12px 16px; border-radius: var(--r-card); background: var(--bg-raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rb-scanrow .rb-cover-sm { width: 48px; flex: none; }
.rb-scanbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rb-scanrow.rb-warnc { border-color: var(--warn); }
.rb-scanrow.rb-failed { border-color: var(--danger); }
.rb-scanrow.rb-failed > .rb-icon { color: var(--danger); }
.rb-scanrow.rb-skipped { background: var(--bg-sunken); box-shadow: none; }
.rb-scanrow.rb-skipped > .rb-icon { color: var(--ink-muted); }
.rb-scanrow.rb-pending { opacity: .9; }
.rb-spinner { flex: none; width: 24px; height: 24px; margin: 0 12px; border-radius: 50%; border: 3px solid var(--line-strong); border-right-color: transparent; animation: rb-spin .8s linear infinite; }
.rb-boxchip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, var(--bg-raised)); border: 1px solid var(--line-strong); }
.rb-boxchip > .rb-icon { color: var(--brand); }
.rb-boxchip.rb-nobox { background: var(--bg-sunken); }
.rb-boxchip-text { font-weight: 600; flex: 1 1 auto; }
.rb-scannote { min-height: 20px; }
.rb-toast { display: flex; align-items: center; gap: 12px; }
.rb-toast-undo { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 55%, transparent); }
.rb-toast-undo:hover { color: var(--bg); border-color: var(--bg); background: color-mix(in srgb, var(--bg) 18%, transparent); }
.rb-toast-undo:focus-visible { outline-color: var(--bg); }
@media (max-width: 560px) { .rb-scanrow { flex-wrap: wrap; } }
.rb-actions .rb-menuwrap { margin-left: 6px; vertical-align: middle; } .rb-orderhead .rb-menuwrap { margin-left: 0; }

/* ---- batch C: edit dialog sections, genre typeahead, collection More menu */
.rb-editform { display: flex; flex-direction: column; gap: 20px; grid-column: 1 / -1; }
.rb-editsec { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.rb-editsec:last-child { border-bottom: 0; padding-bottom: 0; }
.rb-editsec > .rb-subhead { font-size: 20px; margin: 0; }
.rb-secgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rb-secgrid > .rb-full { grid-column: 1 / -1; }
.rb-bookhead { display: flex; gap: 20px; align-items: flex-start; }
.rb-bookhead .rb-coverrow { flex: 1 1 52%; min-width: 0; }
.rb-bookfields { flex: 1 1 48%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rb-moredetails > summary { cursor: pointer; list-style: none; display: flex; align-items: center; font: 600 20px/1.2 var(--font-display); }
.rb-moredetails > summary::-webkit-details-marker { display: none; }
.rb-moredetails > summary::after { content: '+'; margin-left: auto; color: var(--ink-muted); font-size: 22px; }
.rb-moredetails[open] > summary::after { content: '–'; }
.rb-moredetails[open] > summary { margin-bottom: 10px; }
.rb-genreblock { display: flex; flex-direction: column; gap: 8px; }
.rb-chosen { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.rb-gchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 18%, var(--bg-raised)); border: 1px solid var(--brand); font: 600 13px/1.3 var(--font-ui); }
.rb-gchip .rb-icon { width: 12px; height: 12px; }
.rb-gchip-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); cursor: pointer; }
.rb-gchip-x:hover { background: var(--bg-sunken); color: var(--danger); }
.rb-gchip-x .rb-icon { width: 14px; height: 14px; }
.rb-listbox { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-input); background: var(--bg-raised); }
.rb-listbox[hidden] { display: none; }
.rb-option { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 6px; cursor: pointer; }
.rb-option .rb-icon { width: 14px; height: 14px; color: var(--ink-muted); }
.rb-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--bg-raised)); }
.rb-menuhead { padding: 6px 10px 4px; font: 600 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.rb-jobstatus { align-self: center; }
@media (max-width: 560px) { .rb-secgrid { grid-template-columns: minmax(0, 1fr); } .rb-bookhead { flex-direction: column; } }

/* ---- reading journal list */
.rb-readrows { list-style: none; margin: 0; padding: 0; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.rb-readrow { display: grid; grid-template-columns: 48px minmax(180px, 1fr) auto auto auto; gap: 8px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rb-readrow:last-child { border-bottom: 0; }
.rb-readrow .rb-cover-sm { width: 48px; }
.rb-readmain { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rb-readtitle { border: 0; background: none; padding: 0; text-align: left; color: var(--ink); cursor: pointer; border-radius: 4px; }
.rb-readtitle:hover .rb-rowtitle { color: var(--brand); text-decoration: underline; }
.rb-readreview { font: italic 400 15px/1.4 var(--font-read); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--bg-raised); }
.rb-seg-btn { min-height: 32px; padding: 0 12px; border: 0; background: none; color: var(--ink-muted); font: 600 13px/1 var(--font-ui); cursor: pointer; }
.rb-seg-btn + .rb-seg-btn { border-left: 1px solid var(--line); }
.rb-seg-btn:hover { color: var(--ink); background: var(--bg-sunken); }
.rb-seg-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, var(--bg-raised)); color: var(--ink); }
.rb-readrow .rb-star { padding: 3px; } .rb-readrow .rb-star .rb-icon { width: 20px; height: 20px; }
.rb-verdictbtns { display: inline-flex; gap: 4px; }
.rb-vbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--ink-muted); cursor: pointer; }
.rb-vbtn .rb-icon { width: 16px; height: 16px; }
.rb-vbtn[aria-pressed="true"].rb-verdict-recommend { background: color-mix(in srgb, var(--ok) 20%, var(--bg-raised)); color: var(--ok); border-color: var(--ok); }
.rb-vbtn[aria-pressed="true"].rb-verdict-maybe { background: color-mix(in srgb, var(--warn) 20%, var(--bg-raised)); color: var(--warn); border-color: var(--warn); }
.rb-vbtn[aria-pressed="true"].rb-verdict-dont { background: color-mix(in srgb, var(--danger) 16%, var(--bg-raised)); color: var(--danger); border-color: var(--danger); }
.rb-readtop { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; }
.rb-readblock { display: flex; flex-direction: column; gap: 6px; }
.rb-fieldlabel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); letter-spacing: .02em; }
.rb-fieldlabel .rb-btn { min-height: 24px; padding: 0 8px; font-size: 12px; }
.rb-readtop .rb-seg-btn { min-height: 38px; padding: 0 16px; }
@media (max-width: 1100px) { .rb-readrow { grid-template-columns: 48px minmax(0, 1fr); } .rb-readrow > .rb-seg, .rb-readrow > .rb-starinput, .rb-readrow > .rb-verdictbtns { grid-column: 2; justify-self: start; } }
.rb-bookhead .rb-coverrow { flex: 0 0 auto; max-width: 340px; }

/* ---- batch D: import start and review, account sections, expired links */
.rb-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px; padding: 24px; border: 2px dashed var(--line-strong); border-radius: var(--r-card); background: var(--bg-sunken); text-align: center; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out; }
.rb-drop .rb-icon { width: 32px; height: 32px; color: var(--brand); }
.rb-droptitle { font: 600 22px/1.2 var(--font-display); }
.rb-drop:hover, .rb-drop-over, .rb-drop:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-sunken)); }
.rb-drop:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.rb-drop-busy { opacity: .6; cursor: default; }
.rb-dropinput { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; }
.rb-dropinput:disabled { cursor: default; }
.rb-progress { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; border: 1px solid var(--line); }
.rb-progress[hidden] { display: none; }
.rb-progress > i { display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--accent); animation: rb-slide 1.2s ease-in-out infinite; }
@keyframes rb-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.rb-importsummary { font: 600 20px/1.3 var(--font-display); }
.rb-warntext { color: var(--warn); font-weight: 500; }
.rb-checkrow { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.rb-boxhint { display: block; margin-top: 2px; font: 400 12px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink-muted); white-space: normal; max-width: 130px; }
.rb-boxhint[hidden] { display: none; }
.rb-acctsub { display: flex; flex-direction: column; gap: 10px; }
.rb-acctsubhead { margin: 0; font: 600 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.rb-dangerzone { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rb-spinner-sm { width: 18px; height: 18px; margin: 0; border-width: 2px; }
.rb-boxth { min-width: 150px; white-space: nowrap; } .rb-boxth .rb-boxhint { max-width: none; }
.rb-notice-ok:empty { display: none; }
input[readonly] { opacity: .85; cursor: default; background: var(--bg); }

/* admin v2 (public/admin.mjs): layered cards, accent edges, sparklines, detail drawer. Tokens only; no inline styles. */
.rb-badge.rb-bad { background: color-mix(in srgb, var(--danger) 13%, var(--bg-raised)); color: var(--danger); }
.rb-admin-tabs { display: flex; gap: 4px; margin: -8px 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rb-admin-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px 10px 0 0; color: var(--ink-muted); font: 500 15px/1 var(--font-ui); text-decoration: none; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out; }
.rb-admin-tab:hover { background: var(--bg-sunken); color: var(--ink); }
.rb-admin-tab[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--bg-raised); box-shadow: inset 0 -3px 0 var(--accent); }
.rb-admin-tab[aria-current="page"] .rb-icon { color: var(--accent); }
.rb-admin-count { min-width: 20px; padding: 3px 6px; border-radius: 999px; background: var(--danger); color: var(--on-danger); font: 700 11px/1 var(--font-ui); text-align: center; }
.rb-admin-card { position: relative; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 20px; }
.rb-admin-card > h2 { padding: 0 0 12px; border: 0; }
.rb-admin-keyed::before, .rb-admin-stat::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.rb-admin-stat-b::before { background: var(--brand); } .rb-admin-stat-c::before { background: var(--ok); } .rb-admin-stat-d::before { background: var(--ink-muted); } .rb-admin-stat-bad::before { background: var(--danger); }
.rb-admin-overview, .rb-admin-col { display: flex; flex-direction: column; gap: 16px; }
.rb-admin-hero { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 24px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, var(--bg-raised)), var(--bg-raised) 65%); }
.rb-admin-hero h2 { font-size: 30px; padding: 0 0 4px; }
.rb-admin-big { min-height: 48px; padding: 0 24px; font-size: 15px; }
.rb-admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.rb-admin-cards3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 16px; }
.rb-admin-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.rb-admin-stat { display: flex; flex-direction: column; gap: 4px; padding-left: 22px; }
.rb-admin-statlabel { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font-weight: 500; }
.rb-admin-statlabel .rb-badge { margin-left: auto; }
.rb-admin-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, var(--bg-raised)); color: var(--brand); }
.rb-admin-ico .rb-icon { width: 16px; height: 16px; }
.rb-admin-bignum { font: 600 52px/1.05 var(--font-display); font-variant-numeric: lining-nums; margin: 4px 0 0; }
.rb-admin-stat > .rb-admin-sparkbox, .rb-admin-stat > .rb-admin-meter, .rb-admin-stat > .rb-admin-stackwrap { margin-top: auto; }
.rb-admin-stat > p { margin-bottom: 10px; }
.rb-admin-spark { display: block; width: 100%; height: 48px; overflow: visible; }
.rb-admin-spark-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rb-admin-spark-area { fill: color-mix(in srgb, var(--brand) 14%, transparent); stroke: none; }
.rb-admin-spark-dot { fill: var(--accent); stroke: var(--bg-raised); stroke-width: 1.5; }
.rb-admin-stat-b .rb-admin-spark-line { stroke: var(--accent); } .rb-admin-stat-b .rb-admin-spark-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.rb-admin-sparkcap { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--ink-muted); }
.rb-admin-sparkcap b { color: var(--ink); font-weight: 600; white-space: nowrap; } .rb-admin-sparkcap span { white-space: nowrap; }
.rb-admin-meter { height: 10px; border-radius: 999px; background: var(--bg-sunken); border: 1px solid var(--line-strong); overflow: hidden; }
.rb-admin-meter > i { display: block; height: 100%; width: var(--w, 0%); background: var(--ok); border-radius: 999px; }
.rb-admin-cardlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 600 13px/1 var(--font-ui); text-decoration: none; padding: 6px 0; }
.rb-admin-cardlink .rb-icon { width: 14px; height: 14px; }
.rb-admin-cardlink:hover { text-decoration: underline; }
.rb-admin-attn, .rb-admin-sys { list-style: none; margin: 0; padding: 0; }
.rb-admin-attn li { border-top: 1px solid var(--line); }
.rb-admin-attnbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: 400 15px/1.35 var(--font-ui); cursor: pointer; transition: background-color .15s ease-out; }
.rb-admin-attnbtn:hover { background: var(--bg-sunken); }
.rb-admin-attnbtn .rb-grow { display: flex; flex-direction: column; }
.rb-admin-attnbtn > .rb-icon:first-child { color: var(--warn); }
.rb-admin-attnbtn > .rb-icon:last-child { color: var(--ink-muted); width: 16px; height: 16px; }
.rb-admin-urgent > .rb-icon:first-child { color: var(--danger); }
.rb-admin-more { padding: 10px; border-top: 1px solid var(--line); }
.rb-admin-quiet { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 10px; background: color-mix(in srgb, var(--ok) 10%, var(--bg-raised)); }
.rb-admin-quiet > .rb-icon { width: 28px; height: 28px; color: var(--ok); }
.rb-admin-sys li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); }
.rb-admin-sys li:first-child { border-top: 0; }
.rb-admin-toolbar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rb-admin-toolbar .rb-searchbox { flex: 1 1 220px; max-width: 320px; }
.rb-admin-sort { width: auto; }
.rb-admin-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-admin-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--ink); font: 500 14px/1 var(--font-ui); cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out; }
.rb-admin-chip b { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-muted); font: 600 12px/1.2 var(--font-ui); text-align: center; }
.rb-admin-chip:hover { border-color: var(--accent); }
.rb-admin-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, var(--bg-raised)); border-color: var(--accent); font-weight: 600; }
.rb-admin-chip[aria-pressed="true"] b { background: var(--accent); color: var(--on-accent); }
.rb-admin-rows { padding: 0; overflow: hidden; }
.rb-admin-rows ul { list-style: none; margin: 0; padding: 0; }
.rb-admin-rowhead, .rb-admin-row { display: grid; grid-template-columns: minmax(200px, 2.4fr) 80px 120px minmax(80px, 1fr) minmax(110px, 1fr) 76px 20px; gap: 12px; align-items: center; padding: 0 20px; }
.rb-admin-rowhead { min-height: 40px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.rb-admin-row { width: 100%; min-height: 64px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: 400 15px/1.35 var(--font-ui); cursor: pointer; transition: background-color .15s ease-out; }
.rb-admin-rows li:last-child .rb-admin-row { border-bottom: 0; }
.rb-admin-row:hover { background: color-mix(in srgb, var(--accent) 7%, var(--bg-raised)); }
.rb-admin-row:focus-visible { outline-offset: -2px; background: color-mix(in srgb, var(--accent) 7%, var(--bg-raised)); }
.rb-admin-row > .rb-icon:last-child { width: 16px; height: 16px; color: var(--ink-muted); transition: transform .15s ease-out; }
.rb-admin-row:hover > .rb-icon:last-child { transform: translateX(3px); color: var(--accent); }
.rb-admin-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rb-admin-name { display: flex; flex-direction: column; min-width: 0; }
.rb-admin-name > strong { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rb-admin-mail { display: flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-admin-cell { min-width: 0; }
.rb-admin-books { display: flex; align-items: center; gap: 8px; }
.rb-admin-books b { min-width: 28px; font-weight: 600; }
.rb-admin-bar { flex: 1; height: 6px; max-width: 70px; border-radius: 999px; background: var(--bg-sunken); border: 1px solid var(--line); overflow: hidden; }
.rb-admin-bar > i { display: block; height: 100%; width: var(--w, 0%); background: var(--brand); }
.rb-admin-av { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--cloth-0); color: #F6EFE2; font: 600 15px/1 var(--font-display); letter-spacing: .02em; box-shadow: inset 0 0 0 2px rgb(246 239 226 / .22); }
.rb-admin-av-lg { width: 60px; height: 60px; font-size: 24px; }
.rb-admin-av[data-tone="1"] { background: var(--cloth-1); } .rb-admin-av[data-tone="2"] { background: var(--cloth-2); } .rb-admin-av[data-tone="3"] { background: var(--cloth-3); }
.rb-admin-av[data-tone="4"] { background: var(--cloth-4); } .rb-admin-av[data-tone="5"] { background: var(--cloth-5); } .rb-admin-av[data-tone="6"] { background: var(--cloth-6); } .rb-admin-av[data-tone="7"] { background: var(--cloth-7); }
.rb-admin-g { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid var(--ink-muted); color: var(--ink-muted); font: 700 10px/1 var(--font-ui); }
.rb-admin-stack { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg-sunken); }
.rb-admin-seg { display: block; flex: var(--w, 1) 1 0; min-width: 6px; }
.rb-admin-seg-empty { background: var(--line-strong); opacity: .5; }
.rb-admin-seg-ordered { background: var(--ink-muted); } .rb-admin-seg-shipped { background: var(--brand); } .rb-admin-seg-received { background: var(--ok); }
.rb-admin-seg-cancelled { background: var(--line-strong); } .rb-admin-seg-returned { background: var(--danger); }
.rb-admin-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: 13px; }
.rb-admin-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rb-admin-legend b { font-weight: 600; margin-left: 2px; }
.rb-admin-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rb-admin-signup { display: flex; align-items: flex-start; gap: 20px; padding-left: 26px; margin-bottom: 16px; }
.rb-admin-signup h2 { padding: 0 0 4px; }
.rb-admin-signup .rb-switch { margin-top: 4px; }
.rb-admin-signup:not(.rb-admin-open)::before { background: var(--ink-muted); }
.rb-admin-status { display: flex; flex-direction: column; gap: 10px; }
.rb-admin-status.rb-admin-on::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 12px 12px 0 0; background: var(--ok); }
.rb-admin-sec { margin: 24px 0 12px; }
.rb-admin-mailcard { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.rb-admin-mailcard .rb-admin-bignum { margin: 0; font-size: 40px; }
.rb-admin-mail-failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.rb-admin-maillog { box-shadow: var(--shadow); }
.rb-admin-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.rb-admin-ev { display: flex; align-items: center; gap: 14px; padding: 12px 8px 12px 0; position: relative; }
.rb-admin-ev + .rb-admin-ev { border-top: 1px solid var(--line); }
.rb-admin-evico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, var(--bg-raised)); color: var(--brand); }
.rb-admin-evico .rb-icon { width: 16px; height: 16px; }
.rb-admin-ev-delete .rb-admin-evico { background: color-mix(in srgb, var(--danger) 14%, var(--bg-raised)); color: var(--danger); }
.rb-admin-ev-signup .rb-admin-evico { background: color-mix(in srgb, var(--warn) 16%, var(--bg-raised)); color: var(--warn); }
.rb-admin-tl-sm .rb-admin-ev { padding: 8px 0; font-size: 14px; }
.rb-admin-tl-sm .rb-admin-evico { width: 26px; height: 26px; }
.rb-admin-tl-sm .rb-admin-ev { flex-wrap: wrap; }
.rb-admin-morewrap { display: flex; justify-content: center; padding: 12px 0 0; border-top: 1px solid var(--line); }
.rb-admin-filter { display: flex; align-items: center; gap: 8px; }
.rb-admin-filter select { width: auto; max-width: 240px; }
.rb-admin-error { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.rb-admin-error > .rb-icon { color: var(--danger); width: 24px; height: 24px; }
.rb-admin-skelcard { height: 150px; } .rb-admin-skelbig { height: 220px; }
.rb-admin-skelcard, .rb-admin-skelbig { animation: rb-pulse 1.4s ease-in-out infinite; background: var(--bg-sunken); box-shadow: none; }
.rb-admin-skel .rb-admin-cards { margin-bottom: 16px; }
.rb-admin-skel .rb-admin-grid { grid-template-columns: 1fr 1fr; }
/* drawer */
dialog.rb-admin-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(520px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--bg-raised) var(--grain); color: var(--ink); box-shadow: -12px 0 40px rgb(30 20 10 / .25); overflow-y: auto; }
dialog.rb-admin-drawer::backdrop { background: var(--backdrop); }
dialog.rb-admin-drawer[open] { animation: rb-slidein .2s ease-out; }
@keyframes rb-slidein { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
.rb-admin-dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 16px; padding: 24px 24px 16px; background: var(--bg-raised); border-bottom: 1px solid var(--line); border-top: 3px solid var(--accent); }
.rb-admin-dhead h2 { font-size: 30px; padding: 0; overflow-wrap: anywhere; }
.rb-admin-dhead .rb-badges { margin-top: 8px; }
.rb-admin-dpad { display: flex; flex-direction: column; gap: 20px; padding: 20px 24px 40px; }
.rb-admin-dsec { display: flex; flex-direction: column; gap: 10px; }
.rb-admin-dsec h3 { font: 600 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rb-admin-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.rb-admin-dl dt { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.rb-admin-dl dd { margin: 2px 0 0; }
.rb-admin-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 4px; }
.rb-admin-mini { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; background: var(--bg-sunken); border: 1px solid var(--line); }
.rb-admin-mini b { font: 600 22px/1.1 var(--font-display); font-variant-numeric: lining-nums; }
.rb-admin-sign { list-style: none; margin: 0; padding: 0; }
.rb-admin-sign li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--line); }
.rb-admin-sign li:last-child { border-bottom: 0; }
.rb-admin-sign .rb-icon { width: 16px; height: 16px; color: var(--ink-muted); }
.rb-admin-act { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.rb-admin-act .rb-btn { min-width: 168px; justify-content: flex-start; }
.rb-admin-act p { flex: 1 1 180px; }
.rb-admin-danger { padding: 14px 16px 16px; border: 1px solid var(--danger); border-radius: var(--r-card); background: color-mix(in srgb, var(--danger) 6%, var(--bg-raised)); }
.rb-admin-danger h3 { color: var(--danger); border-bottom-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.rb-error:empty { display: none; }
@media (max-width: 1099px) { .rb-admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .rb-admin-rowhead { display: none; }
  .rb-admin-row { grid-template-columns: auto auto minmax(0, 1fr) 16px; grid-template-areas: "who who who go" "role status seen go"; gap: 8px 10px; padding: 12px 16px; }
  .rb-admin-row > .rb-admin-who { grid-area: who; } .rb-admin-c-role { grid-area: role; } .rb-admin-c-status { grid-area: status; } .rb-admin-c-seen { grid-area: seen; text-align: right; }
  .rb-admin-c-books, .rb-admin-c-store { display: none; }
  .rb-admin-row > .rb-icon:last-child { grid-area: go; }
}
@media (max-width: 700px) {
  .rb-admin-cards { grid-template-columns: 1fr 1fr; gap: 12px; } .rb-admin-bignum { font-size: 40px; }
  .rb-admin-hero { padding: 16px; } .rb-admin-hero h2 { font-size: 24px; } .rb-admin-hero .rb-btn { width: 100%; }
  .rb-admin-signup { flex-wrap: wrap; } .rb-admin-dl { grid-template-columns: 1fr; }
  .rb-admin-act .rb-btn { min-width: 0; width: 100%; }
}
@media (max-width: 480px) { .rb-admin-cards { grid-template-columns: 1fr; } }

/* camera dialog */
.rb-camwrap { position: relative; overflow: hidden; border-radius: var(--r-input); background: #000; }
.rb-camwrap .rb-video { display: block; width: 100%; max-height: 55vh; object-fit: contain; }
.rb-camframe { position: absolute; inset: 22% 8%; border: 3px solid rgb(255 255 255 / .9); border-radius: 12px; box-shadow: 0 0 0 999px rgb(0 0 0 / .28); pointer-events: none; }
.rb-camstatus { font-weight: 600; }
.rb-camstatus.rb-error { color: var(--danger); }
.rb-camlast { min-height: 1.4em; }
.rb-camzoom { display: flex; align-items: center; gap: 8px; }
.rb-camzoom input { width: 140px; min-height: 0; padding: 0; }
.rb-camzoom[hidden], .rb-camwrap + [hidden] { display: none; }
@media (max-width: 560px) { .rb-camframe { inset: 28% 6%; } }

/* receive: staged rows */
.rb-stagedhead { flex-wrap: wrap; gap: 8px 12px; }
.rb-scanactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rb-staged .rb-badges { margin: 2px 0; }
.rb-navbadge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 12px/1 var(--font-ui); }
@media (max-width: 1099px) { .rb-navbadge { margin-left: 4px; min-width: 18px; height: 18px; font-size: 11px; } }

/* ---- admin: Usage tab */
.rb-usage-range { margin-bottom: 16px; }
.rb-usage { display: flex; flex-direction: column; gap: 16px; }
.rb-usage-chart { outline-offset: 4px; border-radius: 8px; }
.rb-usage-svg { display: block; width: 100%; height: auto; }
.rb-usage-grid { stroke: var(--line); stroke-width: 1; }
.rb-usage-axis { fill: var(--ink-muted); font: 500 11px var(--font-ui); }
.rb-usage-bar { transition: opacity .15s ease-out; }
.rb-usage-tok { fill: var(--accent); }
.rb-usage-ai { fill: var(--accent); }
.rb-usage-api { fill: var(--ink-muted); }
.rb-usage-hit { fill: transparent; }
.rb-usage-day.rb-usage-on .rb-usage-hit { fill: color-mix(in srgb, var(--ink) 9%, transparent); }
.rb-usage-readout { min-height: 1.4em; margin-top: 6px; }
.rb-usage-legend { margin-top: 6px; }
.rb-usage-sw-ai { background: var(--accent); }
.rb-usage-sw-api { background: var(--ink-muted); }
.rb-usage-table td, .rb-usage-table th { padding: 10px 14px; }
.rb-usage-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.rb-usage-sort { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.rb-usage-sort:hover { color: var(--accent); }
.rb-usage-bad { color: var(--danger); font-weight: 600; }
.rb-usage-un { margin: 12px 0 0; }
.rb-usage-note { margin-top: 4px; }
.rb-usage-breakdown { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rb-usage .rb-admin-card { min-width: 0; }
@media (max-width: 1099px) { .rb-usage-breakdown, .rb-usage-charts { grid-template-columns: minmax(0, 1fr); } }
.rb-usage-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1099px) { .rb-usage-charts { grid-template-columns: minmax(0, 1fr); } }
.rb-leftline { align-items: center; margin-top: 4px; }
dialog.rb-dialog.rb-ask-dialog.rb-ask-wide { width: min(580px, calc(100vw - 24px)); }

/* ==== phones and touch (docs/MOBILE-REVIEW.md): bottom tab bar + More sheet, cards instead of tables, 44px targets, safe areas ==== */
:root { --tabbar-h: 0px; }
.rb-tabbar { display: none; }
.rb-checkhit { display: contents; }
.rb-misswrap { display: contents; }
.rb-filterbtn, .rb-missrun { display: none; }
.rb-btn[hidden] { display: none; }
.rb-fcount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 12px/20px var(--font-ui); text-align: center; }
.rb-fcount[hidden] { display: none; }
.rb-toasts { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
dialog.rb-dialog { max-height: calc(100dvh - 24px); }
.rb-form { max-height: calc(100dvh - 24px); }
.rb-form > footer { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
.rb-menuhead { font-size: 12px; }
@media (max-width: 1099px) {
  .rb-rail { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .rb-main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .rb-nav { gap: 8px; }
  .rb-navlink, .rb-user, .rb-brand { min-height: 44px; }
  .rb-user, .rb-railfoot .rb-user { width: 44px; }
  .rb-navbadge { font-size: 12px; }
}
/* landscape phones: no sticky bar, tighter dialog chrome */
@media (max-height: 500px) and (max-width: 1099px) {
  .rb-rail { position: static; }
  .rb-form > header, .rb-form > footer { padding-top: 8px; padding-bottom: 8px; }
  .rb-form > header h2 { font-size: 22px; }
  .rb-form > .rb-body { padding-top: 12px; padding-bottom: 12px; }
}

/* touch sizes: every phone, and any touch screen (landscape, tablets) */
@media (max-width: 899px), (pointer: coarse) {
  input, select, textarea { font-size: 16px; min-height: 44px; }
  textarea { min-height: 80px; }
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-height: 0; }
  .rb-checkhit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
  .rb-btn, .rb-iconbtn, .rb-chip, .rb-chipbtn, .rb-small-btn, .rb-fieldlabel .rb-btn, .rb-seg-btn, .rb-readtop .rb-seg-btn, .rb-tab { min-height: 44px; }
  .rb-iconbtn { width: 44px; height: 44px; }
  .rb-menuitem, .rb-option { min-height: 44px; }
  .rb-checkrow, .rb-radio, .rb-picker label { min-height: 44px; }
  .rb-picker label { align-items: center; }
  .rb-camzoom input { min-height: 44px; }
  .rb-tabs { gap: 8px; }
  .rb-star, .rb-readrow .rb-star { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  .rb-starinput { gap: 8px; }
  .rb-readblock { gap: 8px; }
  /* segmented control: separate pills (8px apart) that wrap, never wider than the card */
  .rb-seg { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; border: 0; border-radius: 0; overflow: visible; background: none; }
  .rb-seg-btn, .rb-seg-btn + .rb-seg-btn { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 14px; }
  .rb-readrow .rb-star .rb-icon { width: 24px; height: 24px; }
  .rb-vbtn { width: 44px; height: 44px; }
  .rb-verdictbtns { gap: 8px; }
  .rb-gchip { min-height: 44px; padding: 2px 2px 2px 12px; }
  .rb-gchip-x { width: 44px; height: 44px; }
  .rb-readtitle { min-height: 44px; display: flex; align-items: center; }
  .rb-footlink, .rb-pdflink, .rb-legal-nav a, .rb-legal-top a:not(.rb-btn) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
  .rb-legal-top a.rb-brand { padding-inline: 0; }
  .rb-moredetails > summary, .rb-audit > summary { min-height: 44px; }
  .rb-table .rb-actions .rb-btn, .rb-actions .rb-menuwrap { margin-left: 8px; }
  .rb-toast { padding: 4px 8px 4px 18px; }
  .rb-menu { min-width: 220px; gap: 8px; }
  .rb-descblock { gap: 12px; }
  /* text of at least 12px */
  .rb-cloth-author { font-size: clamp(12px, 6.5cqw, 13px); }
  .rb-cover-sm .rb-cloth-title { display: none; }
}

/* phones: one bottom bar instead of the top strip */
@media (max-width: 899px) {
  :root { --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .rb-rail { position: static; padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; min-height: 52px; }
  .rb-rail .rb-nav, .rb-railfoot { display: none; }
  .rb-brand { min-height: 44px; font-size: 30px; }
  .rb-main { padding-top: 16px; padding-bottom: calc(var(--tabbar-h) + 24px); overflow-wrap: anywhere; }
  .rb-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--tabbar-h); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--bg-raised); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgb(60 40 20 / .10); }
  .rb-tabitem { position: relative; flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; border: 0; background: none; color: var(--ink-muted); font: 500 12px/1.1 var(--font-ui); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .rb-tabitem span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-tabitem[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .rb-tabitem[aria-current="page"] .rb-icon { color: var(--accent); }
  .rb-tabitem[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .rb-tabitem .rb-navbadge { position: absolute; top: 5px; left: calc(50% + 6px); margin: 0; }
  .rb-toasts { bottom: calc(var(--tabbar-h) + 12px); }
  .rb-selectbar { bottom: calc(var(--tabbar-h) + 8px); }

  /* the More sheet */
  dialog.rb-sheet, dialog.rb-bsheet { margin: auto auto 0; width: min(100%, 640px); max-width: 100%; max-height: min(88dvh, 680px); border-radius: 16px 16px 0 0; border-bottom: 0; }
  dialog.rb-sheet[open], dialog.rb-bsheet[open] { animation: rb-sheetup .2s ease-out; }
  .rb-sheet footer { display: none; }
  .rb-sheet .rb-form > .rb-body { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .rb-sheetlist { display: flex; flex-direction: column; gap: 8px; }
  .rb-sheetlist .rb-menuitem { width: 100%; min-height: 48px; font-size: 16px; text-decoration: none; }
  .rb-sheetlist .rb-menuitem[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, var(--bg-raised)); font-weight: 600; }
  .rb-sheetlist .rb-menuitem[aria-current="page"] .rb-icon { color: var(--accent); }
  .rb-sheetsep { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--line); }

  /* tables become cards: title first, facts as "label: value", the main action at the bottom */
  .rb-stack, .rb-stack tbody { display: block; }
  .rb-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rb-stack thead tr { display: block; padding: 0; border: 0; }
  .rb-stack tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .rb-stack tbody tr:last-child { border-bottom: 0; }
  .rb-stack td { display: block; min-width: 0; padding: 0; border: 0; }
  .rb-stack .rb-line td:first-child { padding-left: 0; }
  .rb-stack td[data-empty] { display: none; }
  .rb-stack td[data-label] { grid-column: 1 / -1; font-size: 14px; }
  .rb-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-muted); font-size: 13px; }
  .rb-stack td.rb-c-main { grid-column: 1; }
  .rb-stack td.rb-c-price { justify-self: end; font-weight: 600; }
  .rb-stack .rb-actions { display: contents; text-align: left; }
  .rb-stack .rb-actions > .rb-btn { grid-column: 1 / -1; margin: 8px 0 0; width: 100%; justify-content: center; }
  .rb-stack .rb-actions > .rb-menuwrap { grid-column: 2; grid-row: 1; justify-self: end; margin: -6px -6px 0 0; }
  .rb-stack .rb-actions > .rb-menuwrap:only-child { margin-top: -6px; }
  .rb-stack .rb-menu { white-space: nowrap; }
  .rb-stack .rb-selrow { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .rb-stack .rb-selrow .rb-checkcell { grid-column: 1; grid-row: 1 / span 2; width: auto; align-self: start; margin: -8px 0 0 -10px; }
  .rb-stack .rb-selrow td:not(.rb-checkcell) { grid-column: 2; }
  .rb-stack .rb-selrow td.rb-c-price { grid-column: 3; }
  .rb-stack .rb-selrow td[data-label] { grid-column: 2 / -1; }
  .rb-stack .rb-selrow .rb-actions { display: none; }
  /* invoices */
  .rb-stack-inv td:nth-child(1) { order: 1; grid-column: 1; }
  .rb-stack-inv td:nth-child(2) { order: 2; grid-column: 1 / -1; color: var(--ink-muted); }
  .rb-stack-inv td:nth-child(7) { order: 3; grid-column: 1; }
  .rb-stack-inv td:nth-child(5) { order: 4; grid-column: 2; justify-self: end; font-weight: 600; }
  .rb-stack-inv td:nth-child(3) { order: 5; grid-column: 1; }
  .rb-stack-inv td:nth-child(4) { order: 6; grid-column: 2; }
  .rb-stack-inv td:nth-child(6) { order: 7; grid-column: 1; }
  .rb-stack-inv td:nth-child(8) { order: 8; grid-column: 2; justify-self: end; }
  .rb-stack-inv .rb-actions > .rb-btn { order: 9; }
  .rb-stack-ser td.rb-c-main { grid-column: 1 / -1; }
  /* import review */
  .rb-stack-imp td, .rb-stack-imp td[data-label] { grid-column: 1 / -1; }
  .rb-stack-imp td select { min-width: 0; width: 100%; }
  .rb-stack-imp td.rb-checkcell { width: auto; text-align: left; display: flex; align-items: center; gap: 4px; }
  .rb-stack-imp td.rb-checkcell::before { order: 0; }

  /* Receive: compact scan card, full-width result cards */
  .rb-head-receive .rb-sub { display: none; }
  .rb-scanpanel { padding: 12px; gap: 8px; }
  .rb-scanhero .rb-scanicon { left: 14px; width: 26px; height: 26px; }
  .rb-scan { font-size: 22px; letter-spacing: .04em; padding: 0 12px 0 52px; min-height: 56px; }
  .rb-scan::placeholder { font-size: 17px; }
  .rb-scannote:empty { display: none; }
  .rb-boxchip { border-radius: var(--r-card); }
  .rb-scanrow { padding: 12px; gap: 12px; }
  .rb-scanrow.rb-staged { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 12px; align-items: start; min-height: 0; }
  .rb-scanrow.rb-staged .rb-cover-sm { width: 56px; }
  .rb-scanrow.rb-staged .rb-scanactions { grid-column: 1 / -1; flex-wrap: nowrap; justify-content: stretch; }
  .rb-scanrow.rb-staged .rb-scanactions .rb-btn:not(.rb-iconbtn) { flex: 1 1 auto; }
  .rb-stagedhead .rb-btn { flex: 1 1 auto; }
  .rb-stagedhead h2, .rb-stagedhead .rb-grow { flex: 1 1 100%; }
  .rb-head-receive { margin-bottom: 12px; }
  .rb-scanlist.rb-section { margin-top: 16px; }

  /* select-mode bar: label + Cancel on top, the two actions below */
  .rb-selectbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px 12px; }
  .rb-selectbar .rb-grow { display: none; }
  .rb-selcount { grid-row: 1; grid-column: 1; }
  .rb-selcancel { grid-row: 1; grid-column: 2; justify-self: end; }
  .rb-selectbar .rb-selact { grid-row: 2; }
  .rb-selectbar > strong:only-child { grid-column: 1 / -1; }

  /* Journal: rows stack, the status control wraps as separate pills */
  .rb-readrow { grid-template-columns: 56px minmax(0, 1fr); padding: 12px; gap: 8px 12px; }
  .rb-readrow .rb-cover-sm { width: 56px; }
  .rb-readrow > .rb-seg, .rb-readrow > .rb-starinput, .rb-readrow > .rb-verdictbtns { grid-column: 1 / -1; justify-self: start; }
  .rb-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .rb-readblock { min-width: 0; max-width: 100%; }
  .rb-readtop { gap: 16px; }
  .rb-readreview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* filters fold behind one button */
  .rb-fcollapse .rb-filterbtn { display: inline-flex; order: 2; }
  .rb-fcollapse .rb-filterbtn[aria-expanded="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, var(--bg-raised)); }
  .rb-fcollapse:not(.rb-fopen) .rb-filt { display: none; }
  .rb-fcollapse .rb-searchbox { order: 1; flex: 1 1 140px; max-width: none; }
  .rb-fcollapse .rb-menuwrap { order: 3; }
  .rb-fcollapse .rb-filt { order: 4; flex: 1 1 100%; max-width: none; }
  .rb-fcollapse .rb-jobstatus { order: 5; flex: 1 1 100%; }
  .rb-fcollapse .rb-chips { margin-bottom: 20px; }

  /* series: runs of missing numbers fold into one row */
  .rb-shelf > .rb-missrun { display: flex; grid-column: 1 / -1; justify-content: flex-start; gap: 10px; width: 100%; min-height: 48px; border-style: dashed; color: var(--ink); }
  .rb-missrun .rb-missact { margin-left: auto; color: var(--brand); font-weight: 600; }
  .rb-misswrap { display: none; }
  .rb-misswrap.rb-open { display: contents; }

  .rb-shelf { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 36px 16px; padding-left: 8px; padding-right: 8px; }
  /* Overview: two stat cards per row */
  .rb-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .rb-tile { padding: 14px; }
  .rb-tile .rb-big { font-size: 40px; }

  .rb-genrerow { flex-wrap: wrap; }
  .rb-genrerow input { flex: 1 1 100%; }
}
@keyframes rb-sheetup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* camera: freeze and confirm */
.rb-camfreeze { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.rb-camfreeze[hidden], .rb-camframe[hidden], .rb-campanel[hidden] { display: none; }
.rb-campanel { display: flex; flex-direction: column; gap: 12px; }
.rb-camrow { display: flex; align-items: center; gap: 14px; }
.rb-camrow .rb-cover-sm { width: 56px; flex: none; }
.rb-camtext { min-width: 0; }
.rb-camtitle { font: 600 24px/1.15 var(--font-display); margin: 0; overflow-wrap: anywhere; }
.rb-camq { margin: 0; font-weight: 600; }
.rb-camactions { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-camactions .rb-btn { min-height: 44px; flex: 1 1 140px; justify-content: center; }
.rb-camdone { color: var(--ok); }
.rb-camdone .rb-icon { width: 24px; height: 24px; flex: none; }
.rb-cam-frozen .rb-camhide { display: none; }
.rb-cam-frozen .rb-camwrap .rb-video, .rb-cam-frozen .rb-camfreeze { max-height: 30vh; }
.rb-cam-frozen .rb-camlast { display: none; }
.rb-cam-frozen .rb-camstatus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* still announced, not shown twice */

/* ---- second phone pass: book sheet, pinned Receive bar, folded order details, tablet bar */
.rb-phone-only, .rb-sumline, .rb-pinbar { display: none; }
.rb-pinbar[hidden] { display: none; }
.rb-booksheet { display: flex; flex-direction: column; gap: 14px; }
.rb-sheetmeta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rb-desc-sheet .rb-desc-text.rb-clamped { -webkit-line-clamp: 4; }
@media (max-width: 899px) {
  .rb-phone-only { display: flex; }
  .rb-desk-only { display: none; }
  .rb-moredetails > summary { flex-wrap: wrap; }
  .rb-moredetails:not([open]) .rb-sumline { display: block; flex: 1 1 100%; order: 5; margin-top: 2px; font: 400 13px/1.4 var(--font-ui); overflow-wrap: anywhere; }
  .rb-bsheet .rb-form > header h2 { font-size: 24px; overflow-wrap: anywhere; }
  .rb-bsheet .rb-form > footer { flex-wrap: nowrap; }
  .rb-bsheet footer .rb-btn:not(.rb-iconbtn) { flex: 1 1 auto; }
  .rb-pinbar:not([hidden]) { display: flex; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 19; padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); background: var(--bg-raised); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgb(60 40 20 / .10); }
  .rb-pincount { white-space: nowrap; }
  body:has(.rb-pinbar:not([hidden])) .rb-main { padding-bottom: calc(var(--tabbar-h) + 96px); }
  body:has(.rb-pinbar:not([hidden])) .rb-toasts { bottom: calc(var(--tabbar-h) + 68px); }
  .rb-scanrow { scroll-margin: 12px 0 calc(var(--tabbar-h) + 84px); }
}
/* landscape phones: a slimmer bar, icon beside the label */
@media (max-width: 899px) and (max-height: 500px) {
  :root { --tabbar-h: calc(48px + env(safe-area-inset-bottom, 0px)); }
  .rb-tabitem { flex-direction: row; gap: 8px; min-height: 48px; }
  .rb-tabitem .rb-navbadge { position: static; }
}
/* 900-1099px: the top bar fits without sideways scrolling: only the current page keeps its label */
@media (min-width: 900px) and (max-width: 1099px) {
  .rb-nav .rb-navlink:not([aria-current="page"]) { padding: 0 12px; }
  .rb-nav .rb-navlink:not([aria-current="page"]) > span:not(.rb-navbadge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 899px), (pointer: coarse) {
  .rb-legal p a, .rb-legal li a, .rb-descsrc a, .rb-prose a { padding-block: 12px; } /* inline links: a 44px tap area, the text keeps its place */
}