/* Apple-style layer (2026-10-14), loaded last, on top of tokens.css / components.css / app.css.
   Following Apple's Human Interface Guidelines as described in the apple-design skill notes:
   - glass ("materials") for things that float over the drawing: islands, menus, popovers, toasts;
     heavier, solid material for structural areas (side panels);
   - rounded corners, soft edges instead of hard 1px lines where chrome floats over content;
   - instant press feedback on buttons, menus and dialogs that grow from where they come from;
   - the Mac's accessibility settings respected: Reduce motion, Reduce transparency, Increase contrast.
   Colours, corner sizes and timing come from tokens (replica/design/tokens.json). Nothing here changes what
   the app does. To go back to the earlier look: git checkout before-apple-design (or remove this file's <link>). */

:root {
  --mat-island: rgba(255, 255, 255, .80);   /* glass over the drawing (solid enough to read over busy sheets) */
  --mat-menu: rgba(250, 250, 252, .86);     /* menus and popovers: a little more solid, for reading */
  --mat-edge: rgba(0, 0, 0, .10);           /* hairline edge around glass */
  --mat-fill: rgba(0, 0, 0, .045);          /* a group inside glass */
  --mat-blur: saturate(180%) blur(20px);
  --shadow-island: 0 0 0 .5px var(--mat-edge), 0 6px 20px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-pill: 0 0 0 .5px var(--mat-edge), 0 1px 2px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .07); /* small things: a softer, tighter shadow */
  --spring: cubic-bezier(.32, .72, 0, 1);   /* fast start, gentle settle, no overshoot */
  --tool-on: #e08600;                        /* a selected toolbar icon: amber, a shade deeper so thin lines show on light grey */
  --mat-panel: color-mix(in srgb, var(--c-canvas) 64%, transparent); /* the Sheets panel's glass */
  --seg-on: var(--c-bg);                     /* the chosen part of a segmented control */
  --panel-blur: 10px; /* how soft the drawing looks behind it (was 24px: too smeared to recognise) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mat-island: rgba(36, 36, 38, .86);
    --mat-menu: rgba(36, 36, 38, .90);
    --mat-edge: rgba(255, 255, 255, .12);
    --mat-fill: rgba(255, 255, 255, .06);
    --tool-on: var(--c-accent);
    --seg-on: #4a4a4e;
    --shadow-island: 0 0 0 .5px var(--mat-edge), 0 8px 24px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-pill: 0 0 0 .5px var(--mat-edge), 0 1px 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .3);
    --mat-panel: color-mix(in srgb, var(--c-canvas) 76%, transparent); /* a bit more solid: light sheets behind dark glass */
  }
}
:root[data-theme="dark"] {
  --mat-island: rgba(36, 36, 38, .86);
  --mat-menu: rgba(36, 36, 38, .90);
  --mat-edge: rgba(255, 255, 255, .12);
  --mat-fill: rgba(255, 255, 255, .06);
  --tool-on: var(--c-accent);
  --seg-on: #4a4a4e;
  --shadow-island: 0 0 0 .5px var(--mat-edge), 0 8px 24px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-pill: 0 0 0 .5px var(--mat-edge), 0 1px 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .3);
  --mat-panel: color-mix(in srgb, var(--c-canvas) 76%, transparent);
}

/* ---------- Text: Apple's font, tracking by size ---------- */
body { -webkit-font-smoothing: antialiased; letter-spacing: .005em; }       /* small UI text: a hair open */
.dialog header { letter-spacing: -.01em; }                                    /* larger text: a hair tighter */

/* ---------- Window chrome: menu bar + toolbar read as one unified bar ---------- */
.menubar { border-bottom-color: transparent; }
.toolbar { gap: 3px; }
/* Toolbar icons stand on their own: no square behind them, ever. Selected / switched on = the icon turns amber. */
.tool, .tool:hover, .tool[aria-pressed="true"], .tool.locked { background: transparent; box-shadow: none; }
.tool { border-radius: 6px; color: color-mix(in srgb, var(--c-text) 78%, transparent);
  transition: color .12s ease, transform .1s ease-out; }
.tool:hover { color: var(--c-text); }
.tool:active { transform: scale(.88); }                                       /* press feedback, on pointer-down */
.tool[aria-pressed="true"], .tool.locked { color: var(--tool-on); }
.tool[aria-pressed="true"]::after { content: none; }

/* Tool groups fold into the » menu on narrow windows (panels/toolbar-fold.js), so nothing is cut off. */
.toolbar { overflow: hidden; }
.tb-group { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.tb-group[hidden], #toolOverflow[hidden] { display: none; }
#toolOverflow.holds-on { color: var(--tool-on); }
/* The page number: a little pill */
.page-nav { display: inline-flex; align-items: center; gap: 0; height: 26px; padding: 0 2px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--c-text) 6%, transparent); font-size: var(--fs-sm); color: var(--c-text-muted); }
.page-nav .tool { width: 22px; height: 22px; }
.page-nav .input { width: 34px; height: 20px; padding: 0 2px; text-align: center; border: 0; border-radius: 999px; background: transparent; }
.page-nav .input:focus-visible { background: var(--c-bg); }
.page-nav #pageCount { margin: 0 4px 0 3px; }

/* ---------- Buttons and fields ---------- */
.btn { border-radius: 6px; transition: transform .1s ease-out, background-color .12s ease, filter .12s ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.input, .select { border-radius: 6px; }
.menubar button, .statusbar button { border-radius: 6px; }

/* Focus: Apple's soft halo instead of a hard line */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--c-focus) 45%, transparent); outline-offset: 1px; }
.input:focus-visible, .select:focus-visible { outline: 3px solid color-mix(in srgb, var(--c-focus) 45%, transparent); outline-offset: 0; border-color: var(--c-focus); }

/* ---------- Status bar: two glass tabs rising from the bottom edge ---------- */
/* Like the PDF tab hanging from the toolbar, upside down: rounded top corners, curved flares into the bottom
   edge (::before / ::after, the same glass, shaped with a mask). Between the tabs the bar is see-through and lets
   clicks through, so with the Markups List hidden the drawing runs to the bottom edge there and shows blurred
   behind the tabs. With the list showing, the row is the drawing-background colour and the tabs blend into it. */
.statusbar { --sb-r: 10px; position: relative; z-index: 8; border-top: 0; padding: 0;
  background: var(--c-canvas); pointer-events: none; }
.statusbar { background: transparent; }
.sb-tab { position: relative; display: flex; align-items: center; gap: var(--sp-2); height: 100%; padding: 0 10px;
  pointer-events: auto; border-radius: var(--sb-r) var(--sb-r) 0 0; background: var(--mat-panel);
  -webkit-backdrop-filter: saturate(160%) blur(var(--panel-blur)); backdrop-filter: saturate(160%) blur(var(--panel-blur)); }
.sb-tab::before, .sb-tab::after { content: ""; position: absolute; bottom: 0; width: var(--sb-r); height: var(--sb-r); pointer-events: none;
  background: var(--mat-panel); -webkit-backdrop-filter: saturate(160%) blur(var(--panel-blur)); backdrop-filter: saturate(160%) blur(var(--panel-blur)); }
.sb-tab::before { left: calc(-1 * var(--sb-r));
  -webkit-mask: radial-gradient(circle at 0 0, transparent calc(var(--sb-r) - .5px), #000 var(--sb-r)); mask: radial-gradient(circle at 0 0, transparent calc(var(--sb-r) - .5px), #000 var(--sb-r)); }
.sb-tab::after { right: calc(-1 * var(--sb-r));
  -webkit-mask: radial-gradient(circle at 100% 0, transparent calc(var(--sb-r) - .5px), #000 var(--sb-r)); mask: radial-gradient(circle at 100% 0, transparent calc(var(--sb-r) - .5px), #000 var(--sb-r)); }
/* Each tab runs to its edge of the window: rounded corner and curve only on the side facing the drawing. */
.sb-tab:first-child { border-top-left-radius: 0; padding-left: 12px; }
.sb-tab:first-child::before { content: none; }
.sb-tab:last-child { border-top-right-radius: 0; padding-right: 12px; }
.sb-tab:last-child::after { content: none; }

/* ---------- Side panels ---------- */
/* Sheets panel: glass over the drawing area, tinted like the drawing background, so it looks like that
   background until a sheet slides under it (zoomed or panned), which then shows through blurred. */
.panel.left { position: relative; z-index: 8; background: var(--mat-panel); border-right: 0; /* no line: reads as one surface with the drawing */
  -webkit-backdrop-filter: saturate(160%) blur(var(--panel-blur)); backdrop-filter: saturate(160%) blur(var(--panel-blur)); }
/* The right panel (Markups / Tool Chest / Details): the same glass as the Sheets panel, mirrored. */
.panel.right { position: relative; z-index: 8; background: var(--mat-panel); border-left: 0;
  -webkit-backdrop-filter: saturate(160%) blur(var(--panel-blur)); backdrop-filter: saturate(160%) blur(var(--panel-blur)); }
/* Its tabs: an Apple segmented control */
.panel-tabs.seg { display: flex; gap: 2px; margin: 8px 10px; padding: 2px; border: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.panel-tabs.seg button { flex: 1; text-align: center; padding: 3px 6px; border: 0; border-radius: 6px; font-size: var(--fs-sm);
  color: var(--c-text-muted); white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.panel-tabs.seg button[aria-selected="true"] { color: var(--c-text); background: var(--seg-on); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); }
.seg-count { color: var(--c-text-muted); font-weight: 400; font-size: var(--fs-xs); }
.panel-header { background: transparent; }
.sheet-item { border-radius: 8px; }
.sheet-item:hover { background: var(--c-surface-2); }
.sheet-item.current { background: var(--c-surface-2); }
/* No orange lines around a selected thumbnail (the owner's choice): the light box behind it shows the selection. */
.sheet-item .thumb-box, .sheet-item.current .thumb-box, .sheet-item.picked .thumb-box { outline-color: transparent; }
.sheet-item:focus-visible { outline: none; }
/* Thumbnails as cards: rounded corners, a fine edge and a soft shadow */
.thumb-box { border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .10); }

/* ---------- Glass: the islands over the drawing ---------- */
.island {
  border: 0; border-radius: 10px; box-shadow: var(--shadow-island);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
}
.propbar.island, .overlay-bar.island { background: var(--mat-island); }
/* Groups inside the glass: a soft tinted shape, no boxes-in-boxes */
.pb-group { border: 0; border-radius: 7px; background: var(--mat-fill); }
.pb-group-title { background: transparent; border-right: 0; }
/* Text on glass: a step more contrast than on solid panels (Apple's rule for translucent surfaces) */
.island .pb-group-title, .island .pb-unit, .overlay-bar .ob-key { color: color-mix(in srgb, var(--c-text) 70%, transparent); }
/* The settings island grows in (scale + fade together, like a material appearing) */
.propbar.island { transform: translateY(-4px) scale(.98); transform-origin: top left;
  transition: opacity .2s var(--spring), transform .2s var(--spring); }
.propbar.island.shown { transform: none; }

/* Tabs are styled in app.css: the selected one hangs from the toolbar, the others are glass pills */
.tabstrip .tab:active { transform: scale(.97); }

/* ---------- Menus, popovers, toasts: glass, growing from where they open ---------- */
.menu, .pb-pop {
  border: 0; border-radius: 10px; background: var(--mat-menu); box-shadow: var(--shadow-island);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  transform-origin: top left; animation: rr-pop-in .16s var(--spring);
}
.pb-pop.up { transform-origin: bottom left; } /* opened upward from the settings bar */
.menu { padding: 5px; }
.menu button { border-radius: 6px; }
.zoom-float { border: 0; border-radius: 10px; background: var(--mat-island); box-shadow: var(--shadow-island);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
/* Messages and the busy indicator: glass bubbles like the menus (they used to be dark blocks) */
.toast { border-radius: 10px; padding: 6px 12px; animation: rr-fade-up .2s var(--spring);
  background: var(--mat-menu); color: var(--c-text); box-shadow: var(--shadow-island);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
.toast .btn { color: var(--c-accent-strong); }
.bottom-islands .busy { position: static; transform: none; }
/* "Romby Reader 1.1.0 is ready · Update and restart ✕" (js/updates.js) */
.update-note { gap: 10px; padding: 5px 6px 5px 12px; }
.update-note .update-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); flex: none; }
.update-note .btn { font-weight: 600; }
.update-note .update-x { width: 22px; height: 22px; }
.update-note .update-x .icon { width: 12px; height: 12px; }
/* Studio (in the works, toolbar beside the panel buttons): the people icon and a small "Soon" tag. */
.studio-btn { display: inline-flex; align-items: center; gap: 4px; width: auto !important; padding: 0 6px !important; }
.studio-btn .soon { font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; padding: 1px 5px; border-radius: 999px; color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 16%, transparent); }
.theme-btn { display: grid; place-items: center; padding: 3px 6px !important; color: color-mix(in srgb, var(--c-text) 78%, transparent); }
.theme-btn:hover, .theme-btn[aria-expanded="true"] { color: var(--c-text); }
.night-btn[aria-pressed="true"] { color: var(--tool-on, #d97706); } /* night mode on: amber, like a switched-on tool */
.tooltip { border-radius: 6px; }
@keyframes rr-pop-in { from { opacity: 0; transform: scale(.96); } }
@keyframes rr-fade-up { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Tooltips (panels/tooltips.js): a small glass bubble, shortcut in a key chip ---------- */
.tip { position: fixed; z-index: 200; max-width: 280px; padding: 5px 9px 6px; border-radius: 8px; pointer-events: none;
  background: var(--mat-menu); box-shadow: var(--shadow-pill); color: var(--c-text); font-size: var(--fs-sm); line-height: 1.35;
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  transform-origin: top center; animation: rr-tip-in .12s ease-out; }
.tip.up { transform-origin: bottom center; }
.tip[hidden] { display: none; }
.tip-row { display: flex; align-items: center; gap: 8px; }
.tip-name { font-weight: 600; }
.tip-key { margin-left: auto; padding: 0 5px; border-radius: 4px; font: inherit; font-size: var(--fs-xs); line-height: 16px;
  color: var(--c-text-muted); background: color-mix(in srgb, var(--c-text) 8%, transparent); white-space: nowrap; }
.tip-note { margin-top: 2px; color: var(--c-text-muted); }
@keyframes rr-tip-in { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .tip { animation: rr-fade .12s ease; } }
@media (prefers-reduced-transparency: reduce) { .tip { background: var(--c-bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Dialogs: a sheet over a dimmed window ---------- */
.dialog { border: 0; border-radius: 12px; box-shadow: 0 0 0 .5px var(--mat-edge), 0 20px 50px rgba(0, 0, 0, .28); }
/* Apple sheet layout: no grey band behind the buttons, more room at the edges, a slightly larger title */
.dialog header { padding: 18px 20px 0; font-size: 14px; letter-spacing: -.01em; }
.dialog .body { padding: 12px 20px 14px; }
.dialog footer { padding: 2px 20px 18px; gap: 8px; background: transparent; border-top: 0; border-radius: 0 0 12px 12px; }
.dialog footer .btn { white-space: nowrap; }
.dialog footer .btn.primary { min-width: 72px; }
#scaleDialog { width: 420px; } /* four buttons in its footer */
dialog.dialog[open] { animation: rr-sheet-in .22s var(--spring); }
dialog.dialog::backdrop { background: rgba(0, 0, 0, .28); animation: rr-dim-in .22s ease; }
@keyframes rr-sheet-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes rr-dim-in { from { opacity: 0; } }

/* ---------- The Mac's accessibility settings ---------- */
@media (prefers-reduced-motion: reduce) {
  /* No slides or growing: short cross-fades only */
  .tool:active, .btn:active:not(:disabled) { transform: none; }
  .propbar.island, .propbar.island.shown { transform: none; transition: opacity .2s ease; }
  .menu, .pb-pop, .toast, dialog.dialog[open] { animation: rr-fade .2s ease; }
  @keyframes rr-fade { from { opacity: 0; } }
}
@media (prefers-reduced-transparency: reduce) {
  /* Glass becomes solid */
  .panel.left, .sb-tab, .sb-tab::before, .sb-tab::after { background: var(--c-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .island, .menu, .pb-pop, .zoom-float, .tabstrip .tab { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabstrip .tab:not([aria-selected="true"]) { background: var(--c-bg); }
  .propbar.island, .overlay-bar.island, .zoom-float { background: var(--c-bg); }
  .menu, .pb-pop, .toast { background: var(--c-bg); }
  .toast { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  /* Solid backgrounds and a clear edge */
  .island, .menu, .pb-pop, .zoom-float, .dialog { border: 1px solid var(--c-text-muted); background: var(--c-bg); }
  .island, .menu, .pb-pop, .zoom-float { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* The desktop app (Tauri, "Overlay" title bar): no title bar of its own. The menu bar is the Mac's standard 28 px
   title-bar height, so the red / yellow / green buttons sit centred in it, and leaves room for them on the left.
   The menu bar drags the window (data-tauri-drag-region). */
.desktop-app { --size-menubar: 28px; }
.desktop-app .menubar { padding-left: 80px; -webkit-user-select: none; user-select: none; }
.desktop-app .menubar .brand * { pointer-events: none; } /* clicks on the logo go to the drag area */