/* Lobby, Reader, Reference Library, POS · yuyu container style.
   Same rules as planner-v12/yuyu.css; all values from tokens-v2.css.
   components/app/ux/flows.css stay as the prototype's base; this layer sets the approved look. */

/* ---------- Base ---------- */
:root { --color-bg: var(--surface-page); }
body, body[data-workspace=reader], body[data-workspace=reader][data-reading=false] { background: var(--surface-page); }
body { margin: 0; color: var(--text); font-family: var(--font-ui); font-size: var(--type-body-size); line-height: var(--type-body-leading); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: var(--border-strong) solid var(--focus-ring); outline-offset: var(--border-strong); }
body .muted, body .secondary { color: var(--text-secondary); }
body .secondary { font-size: var(--type-meta-size); line-height: var(--type-meta-leading); }
body .caption { font-size: var(--type-small-size); line-height: var(--type-small-leading); color: var(--text-secondary); }
body .icon { background: currentColor; color: inherit; width: var(--icon-size); height: var(--icon-size); flex: none; }
body .empty { padding: var(--space-inner); border-radius: var(--radius-row); background: var(--surface-container); color: var(--text-secondary); font-size: var(--type-meta-size); }

/* ---------- Buttons ---------- */
body .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-row); min-height: var(--target); padding: 0 var(--space-block); border: 0; border-radius: var(--radius-pill); background: var(--surface-container); color: var(--text); font-weight: var(--type-weight-semibold); box-shadow: none; transition: background-color var(--motion-fast), transform var(--motion-fast); }
body .btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
body .btn:active:not(:disabled) { transform: scale(var(--press-scale)); }
body .btn:disabled { background: var(--surface-hover); color: var(--text-secondary); cursor: not-allowed; }
body .btn.primary { background: var(--primary); color: var(--text-on-primary); padding-inline: calc(var(--space-block) + var(--space-hairline)); }
body .btn.primary:hover:not(:disabled) { background: var(--primary-hover); color: var(--text-on-primary); }
body .btn.primary:disabled { background: var(--surface-hover); color: var(--text-secondary); }
body .btn.primary .icon { display: none; }
body .btn.quiet { background: transparent; }
body .btn.quiet:hover:not(:disabled) { background: var(--surface-container); }
body .btn.danger { background: var(--danger-bg); color: var(--danger-text); }
body .btn.wide { width: 100%; }
body .card .btn:not(.primary):not(.danger), body .group .btn:not(.primary):not(.danger) { background: var(--surface-raised); }
body .icon-btn { display: inline-grid; place-items: center; width: var(--target); min-width: var(--target); height: var(--target); padding: 0; border: 0; border-radius: var(--radius-round); background: var(--surface-container); color: var(--text); }
body .icon-btn:hover { background: var(--surface-hover); }
body .card .icon-btn { background: var(--surface-raised); }

/* ---------- Containers and rows ---------- */
body .card { display: grid; gap: var(--space-inner); padding: var(--space-block); border: 0; border-radius: var(--radius-container); background: var(--surface-container); box-shadow: none; }
body .group { display: grid; gap: var(--space-row); margin-top: 0; padding: var(--space-row); border: 0; border-radius: var(--radius-container); background: var(--surface-container); box-shadow: none; overflow: visible; }
body .row { display: flex; align-items: center; gap: var(--space-inner); min-height: calc(var(--target) + var(--space-inner)); padding: var(--space-row) var(--space-row-inset); border: 0; border-radius: var(--radius-row); background: var(--surface-raised); text-align: start; transition: background-color var(--motion-fast); }
body button.row:hover, body a.row:hover { background: color-mix(in srgb, var(--surface-raised) 55%, var(--surface-hover)); }
body .stack { gap: var(--space-inner); }
body .section-space { margin-top: var(--space-inner); }
body .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-row); margin-bottom: var(--space-inner); }
body #main h2 { font-size: var(--type-section-size); line-height: var(--type-section-leading); font-weight: var(--type-weight-bold); letter-spacing: var(--type-tracking-tight); }
body #main h3 { font-size: var(--type-subhead-size); line-height: var(--type-subhead-leading); font-weight: var(--type-weight-semibold); }
body .badge { padding: var(--space-hairline) var(--space-row); border: 0; border-radius: var(--radius-pill); background: var(--surface-container); color: var(--text); font-size: var(--type-small-size); line-height: var(--type-small-leading); font-weight: var(--type-weight-semibold); }
body .card .badge, body .row .badge { background: var(--surface-raised); }
body .badge.pink { background: var(--accent-selected); color: var(--accent-text); }
body .badge.warning { color: #8A5A00; }
body .badge.success { color: #1D6B3E; }
body .badge .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
body .chip { border-radius: var(--radius-pill); }

/* Fields */
body .search, body .field input, body .field select, body .field textarea, body #dialog input:not([type=checkbox]):not([type=radio]):not([type=range]), body #dialog select, body #dialog textarea {
  min-height: var(--target); border: var(--border-hairline) solid var(--control-border); border-radius: var(--radius-control); background: var(--surface-container); color: var(--text); box-shadow: none;
}
body .search { display: flex; align-items: center; gap: var(--space-row); padding-inline: var(--space-inner); }
body .search input { border: 0; background: transparent; min-height: calc(var(--target) - 2px); flex: 1; }
body .field { display: grid; gap: var(--space-hairline); font-size: var(--type-meta-size); font-weight: var(--type-weight-semibold); }
body .field input, body .field select, body .field textarea { padding: var(--space-row) var(--space-row-inset); font-weight: var(--type-weight-regular); font-size: var(--type-body-size); }

/* Segmented tabs (workspace views, Planner prototype views) */
body .segments { display: inline-grid; grid-auto-flow: column; gap: var(--space-hairline); padding: var(--space-hairline); border-radius: var(--radius-pill); background: var(--surface-container); }
body .segment { min-height: var(--target); padding: 0 var(--space-block); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font-weight: var(--type-weight-semibold); }
body .segment[aria-pressed=true] { background: var(--primary); color: var(--text-on-primary); }

/* ---------- Page heading ---------- */
body:not([data-workspace=lobby]) .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-inner); margin-bottom: var(--space-block); }
body:not([data-workspace=lobby]) .page-head h1, body[data-workspace=pos] .pos-event-context strong { margin: 0; font-size: var(--type-display-size); line-height: var(--type-display-leading); letter-spacing: var(--type-tracking-tight); font-weight: var(--type-weight-bold); overflow-wrap: anywhere; }
body[data-workspace=pos] .pos-event-context { display: grid; gap: var(--space-hairline); margin-bottom: var(--space-block); }
body[data-workspace=pos] .pos-event-context strong { display: block; }

/* ---------- Shell ---------- */
body:not([data-workspace=lobby]) #main { display: block; padding: var(--space-block) var(--space-block) calc(var(--target-fab) + var(--space-block) * 3); max-width: none; margin: 0; }
body .topbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: var(--space-row); min-height: calc(var(--target) + var(--space-block)); max-width: none; margin: 0; padding: max(var(--space-row), env(safe-area-inset-top)) var(--space-block) var(--space-row); border: 0; background: var(--surface-page); }
body .topbar .lobby-back { display: inline-grid; place-items: center; width: var(--target); height: var(--target); border-radius: var(--radius-round); background: var(--surface-container); color: var(--text); font-size: 0; }
body .topbar .lobby-back .icon { width: var(--icon-size); height: var(--icon-size); }
body .topbar .ink-bar-end { display: flex; align-items: center; gap: var(--space-row); margin-inline-start: auto; }
body .ws-switch-button { min-height: var(--target); padding-inline: var(--space-block); border-radius: var(--radius-pill); background: var(--surface-container); font-weight: var(--type-weight-semibold); }
body .ws-switch-button:hover { background: var(--surface-hover); }
body .workspace-tabs { position: static; display: flex; gap: var(--space-hairline); margin: 0 var(--space-block); padding: var(--space-hairline); border: 0; border-radius: var(--radius-pill); background: var(--surface-container); }
body .workspace-tabs > button { flex: 1; min-height: var(--target); padding: 0 var(--space-inner); border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font-weight: var(--type-weight-semibold); }
body .workspace-tabs > button[aria-current=page] { background: var(--primary); color: var(--text-on-primary); }
body .workspace-tabs .icon { display: none; }

/* Sidebar (desktop) */
body .sidebar { gap: var(--space-hairline); padding: var(--space-block); border: 0; border-radius: var(--radius-container); background: var(--surface-container); }
body .sidebar .brand.lobby { display: flex; align-items: center; gap: var(--space-inner); min-height: var(--target); margin-bottom: var(--space-inner); color: var(--text); font-size: var(--type-subhead-size); font-weight: var(--type-weight-bold); text-decoration: none; }
body .sidebar .brand .brand-mark { display: none; }
body .sidebar .icon-disc { display: inline-grid; place-items: center; width: var(--target); height: var(--target); border-radius: var(--radius-round); background: var(--surface-raised); }
body .sidebar .identity { display: none; }
body #workspace-nav { display: grid; gap: 2px; }
body #workspace-nav::before { padding: 0 var(--space-inner) var(--space-hairline); color: var(--text-secondary); font: var(--type-weight-semibold) var(--type-small-size)/var(--type-small-leading) var(--font-ui); }
body .sidebar .nav-item { display: flex; align-items: center; gap: var(--space-inner); min-height: var(--target); padding: 0 var(--space-inner); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font-weight: var(--type-weight-medium); }
body .sidebar .nav-item .icon { display: inline-block; }
body .sidebar .nav-item:hover { background: var(--surface-hover); }
body .sidebar .nav-item[aria-current=page] { background: var(--accent-selected); color: var(--accent-text); font-weight: var(--type-weight-semibold); }
body .sidebar-bottom { margin-top: auto; padding-top: 0; border: 0; }

@media (min-width: 1000px) {
  body:not([data-workspace=lobby]) .shell { display: grid !important; grid-template-columns: var(--layout-sidebar) minmax(0, 1fr); grid-template-areas: "side bar" "side main"; grid-template-rows: auto 1fr; gap: 0 var(--space-block); width: auto; max-width: var(--layout-max); margin: 0 auto; padding: var(--space-block); min-height: 100dvh; }
  body:not([data-workspace=lobby]) .stage { display: contents; }
  body:not([data-workspace=lobby]) .sidebar { display: flex !important; flex-direction: column; grid-area: side; position: sticky; top: var(--space-block); align-self: start; height: calc(100dvh - var(--space-block) * 2); }
  body:not([data-workspace=lobby]) .topbar { grid-area: bar; position: static; padding: 0 0 var(--space-block); min-height: var(--target); }
  body:not([data-workspace=lobby]) .topbar .lobby-back { display: none; }
  body:not([data-workspace=lobby]) #main { grid-area: main; padding: 0 0 var(--space-12, 48px); }
  body .workspace-tabs { display: none !important; }
}

/* Floating bars (Reader dock, POS checkout dock) */
body .reading-dock, body .checkout-dock { left: 50%; right: auto; bottom: max(var(--space-block), env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - var(--space-block) * 2)); min-height: 0; padding: var(--space-hairline) var(--space-row); border: 0; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: var(--elevation-float); }
body .checkout-dock { justify-content: space-between; padding: var(--space-hairline) var(--space-hairline) var(--space-hairline) var(--space-block); }
body .reading-dock .btn, body .dock-action { background: transparent; }

/* ---------- Dialog ---------- */
body #dialog { padding: calc(var(--space-block) + var(--space-hairline)); border: 0; border-radius: var(--radius-container); background: var(--surface-page); box-shadow: var(--elevation-float); }
body #dialog::backdrop { background: rgb(28 28 30 / .25); }
body .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-row); margin-bottom: var(--space-block); }
body .dialog-head h2 { font-size: var(--type-section-size); line-height: var(--type-section-leading); font-weight: var(--type-weight-bold); }
body .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-row); margin-top: var(--space-block); }
body .menu-list { display: grid; gap: var(--space-row); }
body .menu-row { display: flex; align-items: center; gap: var(--space-inner); min-height: calc(var(--target) + var(--space-hairline)); padding: 0 var(--space-row-inset); border: 0; border-radius: var(--radius-row); background: var(--surface-container); color: var(--text); text-align: start; font-weight: var(--type-weight-medium); }
body .menu-row:hover { background: var(--surface-hover); }
body .menu-section { margin-top: var(--space-block); }
@media (max-width: 680px) {
  body #dialog { inset: auto 0 0; width: 100%; max-width: 100%; margin: 0; border-radius: var(--radius-container) var(--radius-container) 0 0; padding-bottom: max(var(--space-block), env(safe-area-inset-bottom)); }
}

/* ---------- Lobby ---------- */
body[data-workspace=lobby] { background: var(--surface-page); }
body[data-workspace=lobby] .topbar { position: static; padding-inline: var(--space-block); }
body[data-workspace=lobby] .shell-wordmark { visibility: hidden; }
body[data-workspace=lobby] #main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-block); max-width: var(--layout-phone-max); margin: 0 auto; padding: var(--space-block); }
body[data-workspace=lobby] .lobby-intro { margin: 0; padding: var(--space-inner) var(--space-hairline) 0; }
body[data-workspace=lobby] .lobby-intro h1 { margin: 0; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -.04em; font-weight: var(--type-weight-bold); }
body[data-workspace=lobby] .lobby-intro h1 span { color: var(--accent-text); }
body[data-workspace=lobby] .lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-row); padding: var(--space-row); border: 0; border-radius: var(--radius-container); background: var(--surface-container); }
body[data-workspace=lobby] .lobby-card { display: grid; grid-template-columns: var(--target) minmax(0, 1fr) auto; align-items: center; gap: var(--space-inner); min-height: calc(var(--target) + var(--space-block) + var(--space-hairline)); padding: var(--space-row) var(--space-row-inset) var(--space-row) var(--space-row); border: 0; border-radius: var(--radius-row); background: var(--surface-raised); color: var(--text); box-shadow: none; text-decoration: none; transition: background-color var(--motion-fast); }
body[data-workspace=lobby] .lobby-card:hover { background: color-mix(in srgb, var(--surface-raised) 55%, var(--surface-hover)); }
body[data-workspace=lobby] .lobby-card:active { background: var(--surface-hover); }
body[data-workspace=lobby] .lobby-card h2 { margin: 0; font-size: var(--type-section-size); line-height: var(--type-section-leading); font-weight: var(--type-weight-semibold); letter-spacing: var(--type-tracking-tight); }
body[data-workspace=lobby] .workspace-symbol { display: grid; place-items: center; width: var(--target); height: var(--target); border-radius: var(--radius-round); background: var(--surface-container); color: var(--text); }
body[data-workspace=lobby] .lobby-card > .icon { color: var(--text-secondary); }
@media (min-width: 1000px) {
  body[data-workspace=lobby] #main { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--space-12, 48px); max-width: 880px; padding-block: clamp(36px, 10vh, 96px); }
}

/* ---------- Reader ---------- */
body .continue-reading { display: grid; grid-template-columns: var(--target) minmax(0, 1fr) auto; align-items: center; gap: var(--space-inner); width: 100%; text-align: start; }
body .continue-symbol { display: grid; place-items: center; width: var(--target); height: var(--target); border-radius: var(--radius-round); background: var(--surface-raised) !important; color: var(--text) !important; }
body .literature-search, body .reference-search-row { margin-bottom: var(--space-block); }
body .reader-aside .card, body .reader-tools { background: var(--surface-container); }
body .reading-paper { background: var(--surface-page); }
body .selected-quote, body .note-block { padding: var(--space-inner) var(--space-row-inset); border-radius: var(--radius-row); background: var(--surface-container); border: 0; }

/* ---------- Reference Library ---------- */
body .reference-grid { gap: var(--space-row); }
body .reference-card { border: 0 !important; border-radius: var(--radius-row); overflow: hidden; background: var(--surface-container); box-shadow: none !important; }
body .reference-card[aria-pressed=true] { outline: var(--border-strong) solid var(--accent-fill); outline-offset: var(--border-strong); }
body .boards-list { gap: var(--space-block); }
body .board-card { border: 0; border-radius: var(--radius-container); background: var(--surface-container); box-shadow: none; }
body .board-miniature { border-radius: var(--radius-row); background: var(--surface-raised); }
body .canvas-surface { border-radius: var(--radius-container); background: var(--surface-container); }
body .material-drawer { border: 0; border-radius: var(--radius-container); background: var(--surface-container); }
body .canvas-controls, body .canvas-selection-toolbar { border: 0; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: var(--elevation-float); }

/* ---------- POS ---------- */
body .status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-row); margin-bottom: var(--space-block); }
body .connection { display: inline-flex; align-items: center; gap: var(--space-hairline); padding: var(--space-hairline) var(--space-row); border-radius: var(--radius-pill); background: var(--surface-container); font-size: var(--type-small-size); font-weight: var(--type-weight-semibold); }
body .product-grid { gap: var(--space-row); }
body .product { display: grid; gap: var(--space-row); padding: var(--space-row) !important; border: 0 !important; border-radius: var(--radius-row); background: var(--surface-container) !important; box-shadow: none !important; text-align: start; }
body .product img { border-radius: var(--radius-control); background: var(--surface-raised); }
body .product:hover { background: var(--surface-hover) !important; }
body .product-qty { background: var(--accent-fill); color: var(--text-on-primary); }
body .cart { border: 0; border-radius: var(--radius-container); background: var(--surface-container); box-shadow: none; }
body .cart-line { padding: var(--space-row) var(--space-row-inset); border-radius: var(--radius-row); background: var(--surface-raised); }
body .total h2, body .price { font-variant-numeric: tabular-nums; }
body .mobile-cart-bar { border-radius: var(--radius-pill); background: var(--primary); color: var(--text-on-primary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Sidebar group labels (moved from the Editorial layer) */
body[data-workspace=reader] #workspace-nav::before { content: "Reading"; }
body[data-workspace=reference] #workspace-nav::before { content: "Library"; }
body[data-workspace=pos] #workspace-nav::before { content: "Point of sale"; }

/* POS ledger: exhibition and currency pickers, settle actions, payment method */
body[data-workspace=pos] .pos-pickers { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-row); }
body[data-workspace=pos] .pos-pickers select { width: 100%; min-height: var(--target); }
body[data-workspace=pos] .status-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-row); }
body[data-workspace=pos] .pos-strip-actions { display: flex; flex-wrap: wrap; gap: var(--space-row); }
.pos-methods { display: flex; flex-wrap: wrap; gap: var(--space-row); margin: 0; padding: 0; border: 0; }
.pos-methods legend { margin-bottom: var(--space-hairline); font-size: var(--type-meta-size); font-weight: var(--type-weight-semibold); }
.pos-method { display: inline-flex; align-items: center; gap: var(--space-hairline); min-height: var(--target); padding: 0 var(--space-inner); border-radius: var(--radius-pill); background: var(--surface-container); cursor: pointer; }
.pos-method:has(input:checked) { background: var(--accent-selected); color: var(--accent-text); font-weight: var(--type-weight-semibold); }
.pos-method input { accent-color: var(--accent-text); }

/* POS merge from references (2026-11-14): product tiles with steppers, cash help, sale cards. Existing tokens only. */
.pos-keypad { display: none; }
@media (min-width: 700px) {
  /* Keypad beside the amount so the dialog fits a landscape iPad without scrolling. */
  #pos-cash:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--space-block); align-items: start; }
  #pos-cash > * { grid-column: 1; }
  .pos-keypad { display: grid; grid-column: 2 !important; grid-row: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-row); }
  .pos-key { display: grid; place-items: center; min-height: calc(var(--target) + var(--space-row)); border: 0; border-radius: var(--radius-control); background: var(--surface-container); color: var(--text); font: inherit; font-size: var(--type-section-size); font-weight: var(--type-weight-semibold); font-variant-numeric: tabular-nums; cursor: pointer; }
  .pos-key:hover { background: var(--surface-hover); }
}
.pos-key:active { transform: scale(.96); }
.pos-filter { display: flex; gap: var(--space-hairline); padding: var(--space-hairline); border-radius: var(--radius-pill); background: var(--surface-container); }
.pos-filter button { flex: 1; min-height: var(--target); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font: inherit; font-weight: var(--type-weight-semibold); cursor: pointer; }
.pos-filter button[aria-pressed=true] { background: var(--surface-raised); color: var(--text); }
.pos-filter-count { font-weight: var(--type-weight-regular, 400); font-variant-numeric: tabular-nums; }
.pos-sales { display: grid; gap: var(--space-row); }
.pos-sale { display: grid; gap: var(--space-hairline); padding: var(--space-row-inset); border-radius: var(--radius-row); background: var(--surface-container); }
.pos-sale-head { display: flex; align-items: center; gap: var(--space-row); min-height: var(--target); }
.pos-sale-head .pos-refund { margin-inline-start: auto; background: var(--surface-raised); }
.pos-sale-head h3 { margin: 0; font-size: var(--type-subhead-size); line-height: var(--type-subhead-leading); }
.pos-sale-lines { display: grid; gap: var(--space-hairline); margin: var(--space-row) 0 0; padding: var(--space-row) 0 0; border-top: 1px solid var(--surface-hover); list-style: none; font-size: var(--type-meta-size); }
.pos-sale-lines li { display: flex; justify-content: space-between; gap: var(--space-row); }
.pos-sale-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-row); min-height: var(--target); }
.pos-sale.is-refunded .pos-sale-lines, .pos-sale.is-refunded .pos-sale-foot strong { color: var(--text-secondary); text-decoration: line-through; }

/* Payment dialog and cart alignment (2026-11-14): one left edge, amounts right-aligned, currency inside the field. */
.ink-checkout-items { display: grid; gap: var(--space-hairline); margin: 0; padding: 0; list-style: none; }
.ink-checkout-items li { display: flex; justify-content: space-between; gap: var(--space-row); }
.pos-methods legend { padding: 0; }
#pos-cash label { display: block; margin-bottom: var(--space-hairline); }
.pos-amount { position: relative; }
.pos-amount input { width: 100%; padding-inline-end: calc(var(--space-row-inset) + 4ch); -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.pos-amount input::-webkit-outer-spin-button, .pos-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-amount-currency { position: absolute; inset-inline-end: var(--space-row-inset); top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-weight: var(--type-weight-semibold); pointer-events: none; }
#ink-change[hidden] { display: none; }
body .quantity { gap: var(--space-row); }
body .quantity .icon-btn { border: 0; padding: 0; background: var(--surface-container); }
body .quantity > span:not(.icon) { min-width: 2ch; text-align: center; font-weight: var(--type-weight-semibold); font-variant-numeric: tabular-nums; }

/* POS pages: Checkout · Sales · Setup (2026-11-14) */
body[data-workspace=pos] .pos-section { display: grid; gap: var(--space-inner); margin-bottom: var(--space-block); padding: var(--space-block); border-radius: var(--radius-container); background: var(--surface-container); }
body[data-workspace=pos] .pos-section h2 { margin: 0; font-size: var(--type-section-size); line-height: var(--type-section-leading); }
body[data-workspace=pos] .pos-section > p { margin: 0; }
.pos-summary-row { display: flex; justify-content: space-between; gap: var(--space-row); }
body[data-workspace=pos] .pos-filter { margin-bottom: var(--space-block); }
body[data-workspace=pos] .pos-sales { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-block); }
@media (min-width: 700px) { body[data-workspace=pos] .pos-sales { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1800px) { body[data-workspace=pos] .pos-sales { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body[data-workspace=pos] .pos-sale { padding: var(--space-block); }
.pos-sale-foot strong { font-size: var(--type-subhead-size); }
.pos-item-list { display: grid; gap: var(--space-row); margin: 0; padding: 0; list-style: none; }
.pos-item-row { display: flex; align-items: center; gap: var(--space-row); min-height: calc(var(--target) + var(--space-row)); padding: var(--space-hairline) var(--space-hairline) var(--space-hairline) var(--space-row-inset); border-radius: var(--radius-row); background: var(--surface-raised); }
.pos-item-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: var(--type-weight-semibold); }
.pos-item-row .icon-btn { background: var(--surface-container); }
.pos-item-form { display: grid; gap: var(--space-row); }
.pos-item-form .field { display: grid; gap: var(--space-hairline); }
.pos-item-form input { width: 100%; }
@media (min-width: 700px) {
  .pos-item-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; }
  .pos-item-form .field-error { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { body[data-workspace=pos] .pos-summary, body[data-workspace=pos] .pos-filter, body[data-workspace=pos] .pos-section { max-width: 760px; } }
/* Below desktop the floating cart bar is the cart; the inline Cart card was a duplicate (removed at the user's request, 2026-11-14). */
@media (max-width: 999px) { body[data-workspace=pos] #pos-cart { display: none !important; } }

/* POS photo grid (2026-11-14): photos only, 3 / 4 / 5 / 6 across; count badge; variant sheet */
body[data-workspace=pos] .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--space-row); }
@media (min-width: 600px) { body[data-workspace=pos] .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) { body[data-workspace=pos] .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (min-width: 1800px) { body[data-workspace=pos] .product-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } }
body[data-workspace=pos] .pos-photo-tile { position: relative; display: block; min-width: 0; min-height: var(--target); padding: 0; border: 0; border-radius: var(--radius-row); background: var(--surface-container); color: var(--text); font: inherit; cursor: pointer; overflow: hidden; }
body[data-workspace=pos] .pos-photo-tile[hidden] { display: none; }
body[data-workspace=pos] .pos-photo-tile:hover .pos-photo { filter: brightness(.95); }
body[data-workspace=pos] .pos-photo-tile:active { transform: scale(.96); }
body[data-workspace=pos] .pos-photo-tile.is-in-cart { box-shadow: inset 0 0 0 3px var(--accent-text); }
.pos-photo { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; padding: var(--space-row); background: var(--surface-container); }
.pos-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pos-photo img:not([src]) { display: none; }
.pos-photo-name { font-size: var(--type-meta-size); line-height: var(--type-meta-leading); font-weight: var(--type-weight-semibold); text-align: center; overflow-wrap: anywhere; }
.pos-photo.has-photo .pos-photo-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pos-count { position: absolute; top: var(--space-hairline); right: var(--space-hairline); display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 var(--space-row); border-radius: var(--radius-pill); background: var(--accent-selected); color: var(--accent-text); font-size: var(--type-meta-size); font-weight: var(--type-weight-bold); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface-raised); }
.pos-variant-sheet { display: grid; gap: var(--space-inner); }
.pos-variant-photo { width: 96px; border-radius: var(--radius-row); overflow: hidden; }
.pos-variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-row); }
.pos-variant { display: grid; gap: var(--space-hairline); justify-items: start; min-height: calc(var(--target) + var(--space-inner)); padding: var(--space-row) var(--space-row-inset); border: 0; border-radius: var(--radius-row); background: var(--surface-container); color: var(--text); font: inherit; font-weight: var(--type-weight-semibold); text-align: start; cursor: pointer; }
.pos-variant:hover { background: var(--surface-hover); }
.pos-variant-price { color: var(--text-secondary); font-size: var(--type-meta-size); font-weight: var(--type-weight-regular); font-variant-numeric: tabular-nums; }

/* ---------- Smooth motion (2026-11-14): tokens in tokens-v2.css; reduced motion removes all of it ---------- */
@keyframes ink-arrive { from { opacity: 0; transform: translateY(8px); } }
@keyframes ink-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes ink-sheet-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes ink-fade-in { from { opacity: 0; } }
#main.ink-arrive { animation: ink-arrive var(--motion-base) var(--motion-ease); }
body #dialog[open] { animation: ink-dialog-in var(--motion-base) var(--motion-ease-emphasis); }
body #dialog[open]::backdrop { animation: ink-fade-in var(--motion-base) var(--motion-ease); }
@media (max-width: 680px) { body #dialog[open] { animation: ink-sheet-in var(--motion-slow) var(--motion-ease-emphasis); } }
body .btn, body .icon-btn, body .pos-photo-tile, body .pos-variant, body .menu-row, body .lobby-card, body .workspace-tabs button, body .nav-item, .pos-filter button, .pos-key, .pos-method {
  transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}

/* Tidy header (2026-11-14): back arrow centred, page tools as icons beside the main action */
body .lobby-back > span:not(.icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body .lobby-back .icon { margin: 0; }
.page-head-tools { display: flex; align-items: center; gap: var(--space-row); flex: none; }
.page-head-tools .icon-btn[aria-pressed=true] { background: var(--accent-selected); color: var(--accent-text); }
body[data-workspace=pos] .pos-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-row); min-width: 0; }
body[data-workspace=pos] .pos-title-row strong { min-width: 0; }
.pos-sync { display: inline-flex; flex: none; align-items: center; gap: var(--space-hairline); min-height: 32px; padding: 0 var(--space-inner); border-radius: var(--radius-pill); background: var(--surface-container); color: var(--text-secondary); font-size: var(--type-meta-size); font-weight: var(--type-weight-semibold); white-space: nowrap; }
.pos-sync.is-waiting { background: var(--accent-selected); color: var(--accent-text); }

/* Reader Notes page (2026-11-14) */
body[data-workspace=reader] .notes-filter { margin: 0 0 var(--space-block); }
body[data-workspace=reader] .notes-doc { display: grid; gap: var(--space-inner); margin-bottom: var(--space-block); padding: var(--space-block); border-radius: var(--radius-container); background: var(--surface-container); }
body[data-workspace=reader] .notes-doc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-row); }
body[data-workspace=reader] .notes-doc-head h2 { margin: 0; min-width: 0; font-size: var(--type-section-size); line-height: var(--type-section-leading); overflow-wrap: anywhere; }
body[data-workspace=reader] .notes-doc-head .icon-btn { background: var(--surface-raised); flex: none; }
body[data-workspace=reader] .notes-list { display: grid; gap: var(--space-row); }
body[data-workspace=reader] .reader-note-row { display: grid; gap: var(--space-row); align-items: start; padding: var(--space-row) var(--space-row-inset); border-radius: var(--radius-row); background: var(--surface-raised); }
body[data-workspace=reader] .reader-note-row blockquote { margin: 0; padding-inline-start: var(--space-inner); border-inline-start: 3px solid var(--accent-selected); color: var(--text-secondary); }
body[data-workspace=reader] .reader-note-row p { margin: 0; }