/* Derived directly from src/theme.css and src/reader-controls.css. */
@font-face { font-family:'Quiet Plex'; src:url('fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'Quiet Plex'; src:url('fonts/IBMPlexSans-Medium.ttf') format('truetype'); font-style:normal; font-weight:500; font-display:swap; }
#specimen-nav-overlay, .app-specimen-popover {
  color-scheme:dark;
  --font-ui:'Quiet Plex','Segoe UI',sans-serif;
  --font-editorial:'Quiet Editorial',Georgia,serif;
  --ui-bg:#191a18;
  --ui-panel:#1c1e19;
  --ui-raised:#292c23;
  --ui-hover:#363a2e;
  --ui-input:#12140f;
  --ui-ink:#e9e6de;
  --ui-muted:#aaa79f;
  --ui-line:#3b3d33;
  --ui-border:#4b4f40;
  --ui-border-hover:#858875;
  --ui-paper:#e8e3d6;
  --ui-on-paper:#25271f;
  --ui-paper-hover:#fff9eb;
  --ui-accent:#dd916d;
  --ui-danger:#e8aa90;
  --ui-track:#45463e;
  --ui-progress:#b3b3a7;
  --ui-shadow-soft:#0004;
  --ui-shadow-panel:#0009;
  --ui-backdrop:#000b;
  --ui-backdrop-deep:#000e;
  --radius-small:6px;
  --radius-button:7px;
  --radius-panel:12px;
  --text-button-padding-block:6px;
  --text-button-padding-inline:8px;
  --control-height:40px;
  --control-height-compact:32px;
  --control-icon-size:34px;
  --control-padding-inline:14px;
  --menu-padding:6px;
  --focus-width:2px;
  /* Keep the complete focus ring inside controls, including at scroll edges. */
  --focus-offset:calc(-1 * var(--focus-width));
}
#specimen-nav-overlay { max-width:100%; padding:7px; pointer-events:auto; border:1px solid var(--ui-border); border-radius:11px; color:var(--ui-ink); background:var(--ui-panel); box-shadow:0 4px 16px var(--ui-shadow-soft); font-family:var(--font-ui); }
#specimen-nav-overlay .page-navigation { display:flex; align-items:center; justify-content:center; gap:8px; margin:0; }
#specimen-nav-overlay .icon-button { display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border:0; border-radius:var(--radius-small); background:none; color:var(--ui-ink); }
#specimen-nav-overlay .icon-button svg { width:19px; height:19px; }
#specimen-nav-overlay .icon-button:hover:not(:disabled) { background:var(--ui-hover); }
#specimen-nav-overlay .control-page-field { display:flex; align-items:center; gap:9px; min-width:0; padding:0 8px; }
#specimen-nav-overlay .page-navigation span { margin:0; color:var(--ui-muted); font-size:12px; white-space:nowrap; }
#specimen-nav-overlay .page-navigation input { width:62px; height:36px; padding:0 6px; color:var(--ui-ink); background:var(--ui-input); border:1px solid var(--ui-border); border-radius:var(--radius-small); font:14px var(--font-ui); font-variant-numeric:tabular-nums; text-align:center; appearance:textfield; }
#specimen-nav-overlay input::-webkit-inner-spin-button,#specimen-nav-overlay input::-webkit-outer-spin-button { appearance:none; margin:0; }
#specimen-nav-overlay #specimen-page-total { min-width:44px; }
#specimen-nav-overlay #specimen-settings { margin-left:4px; min-height:36px; padding:0 14px; border:1px solid var(--ui-border); border-radius:var(--radius-small); background:var(--ui-raised); color:var(--ui-ink); font:12px var(--font-ui); }
#specimen-nav-overlay #specimen-settings:hover:not(:disabled),#specimen-nav-overlay #specimen-settings[aria-expanded="true"] { border-color:var(--ui-border-hover); background:var(--ui-hover); }
#specimen-nav-overlay button:focus-visible,#specimen-nav-overlay input:focus-visible { outline:2px solid var(--ui-accent); outline-offset:var(--focus-offset); }
@media(max-width:480px) { #reader-view { --reader-nav-space:76px; } #specimen-nav-overlay .control-page-label { display:none; } #specimen-nav-overlay .page-navigation { gap:3px; } #specimen-nav-overlay .control-page-field { gap:6px; padding:0 5px; } #specimen-nav-overlay .page-navigation input { width:52px; } #specimen-nav-overlay #specimen-settings { padding:0 10px; } }
/* Place the unaltered app toolbar in the specimen's permanent navigation slot. */
.specimen-navigation-slot { position: relative; height: 80px; padding: 0; }
#tab-demo-card #specimen-nav-overlay { position: static; inset: auto; padding: 7px; transform: translateY(5px); }
#tab-demo-card.is-revealed #specimen-nav-overlay { transform: none; }
#tab-demo-card:not(.is-revealed) #specimen-nav-overlay { pointer-events: none; visibility: hidden; }
#controls-specimen-body .specimen-passage { font-size: var(--specimen-font-size, 16.5px); }
.app-specimen-popover { position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 30; max-width: 100%; width: 260px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-panel); color: var(--ui-ink); font: 12px/1.5 var(--font-ui); box-shadow: 0 8px 30px #0007; }
.app-specimen-popover[hidden] { display: none; }
.app-specimen-popover p { margin: 0 0 12px; }
.app-specimen-popover span { color: var(--ui-muted); }
.specimen-size-options { display: flex; gap: 6px; }
.specimen-size-options button { flex: 1; padding: 7px; border: 1px solid var(--ui-border); border-radius: 6px; color: var(--ui-ink); background: var(--ui-raised); font: inherit; }
.specimen-size-options [aria-pressed="true"] { color: var(--ui-on-paper); background: var(--ui-paper); }
@media (max-width: 380px) {
  #specimen-nav-overlay .icon-button { width: 28px; height: 32px; }
  #specimen-nav-overlay .page-navigation input { width: 36px; height: 32px; }
  #specimen-nav-overlay #specimen-page-total { min-width: 26px; }
  #specimen-nav-overlay .control-page-field { gap: 4px; padding: 0 4px; }
  #specimen-nav-overlay #specimen-settings { padding: 0 8px; min-height: 32px; margin-left: 0; }
}
@media (max-width: 380px) { #specimen-nav-overlay .page-navigation { gap: 2px; } }