/* ============================================================================ pgreader.css — PG Reader overhaul: Room 1 (Page) + Room 2 (Edition) + masthead. Spec: PG_READER_OVERHAUL_SPEC.md. Concatenate/link this AFTER pg.css and after prdl-system.css (build_site.py's CSS chain) so these rules win the cascade at equal specificity without needing !important — several rules here deliberately re-open breakpoints already set in pg.override.css (e.g. the ≤1100px facs-width rule) and rely on source order, not specificity, to take precedence. ROOM STATE CONTRACT: (default = pages when the attribute is absent). .pg-room1 shows unless data-room="edition"; .pg-room2 shows only when data-room="edition" — mirrors the existing .g-page/#pageView on/off pattern already used site-wide, so it composes with the same JS idiom. Assumes the reading-page template no longer wraps content in the old .app > .sidebar + .main frame — .pg-mast sits at the top of , followed directly by .pg-room1 or .pg-room2. The old .sidebar nav tree (by-volume/by- author browser) is superseded on THIS page by the masthead pills + Contents drawer per spec; it is not referenced here (still fine for index.html/search.html). ── KILL LIST — template surgery should STOP EMITTING these ── .layerseg / .layerseg button / #layFacs old Reading·Facsimile·Page pill row .display-controls / html.dc-compact old stacked sticky toolbar html.g-split #enLane (float/sticky pane) → replaced by .room1-grid (.ocr-col/.en-col) html.g-split, html.g-en root-class lane flips → replaced by html[data-room] + .pg-room1/.pg-room2 Everything else the recon flagged KEEP is reused UNCHANGED and not redefined below: .modeseg buttons (relocated inside .ocr-head, not restyled), .facs / .facs-head / .facs-stage / .facs-resizer / .facs-light (only repositioned — see Room 1 §facsimile), .pv-* (page view), .ct-* (ΚΛΕΙΣ Contents drawer), .en-* (English typography), .div-head / .division / .col-range / .foliomark, #contBtn / #facsBtn / .theme-fab / #szRange / .szb (recolored for the dark masthead bar only), .axis-tabs (landing page, untouched). ============================================================================ */ :root{--mast-h:48px;--facs-w:min(40vw,600px)} /* ── MASTHEAD — one calm row, both rooms ───────────────────────────────────── */ .pg-mast{position:sticky;top:0;z-index:150;display:flex;align-items:center;gap:.55rem; height:var(--mast-h);padding:0 .9rem;background:var(--masthead);color:var(--masthead-ink); font-family:var(--font-ui);font-size:.78rem;box-shadow:0 1px 0 rgba(0,0,0,.25);overflow:visible} .pg-mast a{color:inherit} .pg-mast>*{flex:0 0 auto} /* R35: .pg-mast>* (0,1,1) was beating .pg-title's flex:1 1 auto (0,1,0) — the title never shrank, so long work titles overflowed the bar instead of ellipsizing. */ .pg-mast>.pg-title{flex:1 1 auto;min-width:0} /* R84p (walkthrough): the title was the bar's ONLY shrinkable item — at 1440px it collapsed to "Me…". Floor it at a readable width above the drawer breakpoint and make the search field cede space first (it re-widens on focus anyway). */ @media (min-width:701px){ .pg-mast>.pg-title{min-width:9rem;flex-wrap:nowrap} /* the FLOOR lives on the wrapper — a floored input inside a 0-width wrapper overflows and paints over the view switch (caught: invisible English pill) */ .pg-mast .pg-search{flex:0 1 auto;min-width:5.5rem} .pg-mast .pg-search input{width:100%;max-width:11rem;min-width:0} /* (0,2,1) beats the base width:11rem below */ } .pg-logo{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.02em;opacity:.92;padding-right:.15rem} .pg-logo:hover{opacity:1;text-decoration:none} .pg-vol-pill{position:relative;border:1px solid color-mix(in oklab,var(--masthead-ink) 35%,transparent); border-radius:var(--radius-full);background:transparent;color:inherit;font:inherit;padding:.22rem .65rem; cursor:pointer;transition:background .14s,border-color .14s} .pg-vol-pill:hover{background:color-mix(in oklab,var(--masthead-ink) 12%,transparent);border-color:var(--masthead-ink)} .pg-author{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem} .pg-author:hover{opacity:1;text-decoration:underline} .pg-title{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:.4rem;overflow:hidden} .pg-title-en{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pg-title-la{opacity:.66;font-style:italic;font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* masthead search: typeahead over nav.json (authors + EN titles) */ .pg-search{position:relative} .pg-search input{width:11rem;border:1px solid color-mix(in oklab,var(--masthead-ink) 30%,transparent); border-radius:var(--radius-full);background:color-mix(in oklab,var(--masthead-ink) 10%,var(--masthead)); color:var(--masthead-ink);font:inherit;padding:.3rem .8rem;transition:width .18s var(--ease),background .14s,color .14s} .pg-search input::placeholder{color:color-mix(in oklab,var(--masthead-ink) 55%,transparent)} .pg-search input:focus{width:17rem;background:var(--card);color:var(--fg);outline:none} /* a11y: the rule above kills the focus ring for EVERY focus (mouse click included, by design — avoids a ring flash while the field widens); :focus-visible restores it for keyboard users, who otherwise had no visible indicator on this control at all. */ .pg-search input:focus-visible{outline:2px solid var(--accent,#8a6d3b);outline-offset:2px} .pg-search-menu,.pg-vol-menu{position:absolute;top:calc(100% + 7px);right:0;width:20rem;max-width:80vw; max-height:60vh;overflow-y:auto;background:var(--card);color:var(--fg);border:1px solid var(--border); border-radius:var(--radius-md);box-shadow:0 14px 40px -18px rgba(0,0,0,.5);z-index:5;display:none} .pg-search-menu.open,.pg-vol-menu.open{display:block} .pg-vol-menu{right:auto;left:0;width:16rem;padding:.4rem} .pg-search-item{display:block;padding:.4rem .8rem;text-decoration:none;color:var(--fg); border-bottom:1px solid var(--border);font-size:.85rem} .pg-search-item:last-child{border-bottom:0} .pg-search-item:hover,.pg-search-item.sel{background:var(--hl)} .pg-search-item b{color:var(--accent)} .pg-search-item .pg-si-meta{display:block;color:var(--muted);font-size:.78rem} .pg-goto{display:flex;gap:.4rem;align-items:center;padding:.4rem .5rem;border-top:1px solid var(--border);margin-top:.2rem} .pg-goto input{width:4.6rem;border:1px solid var(--border);border-radius:6px;padding:.22rem .45rem; font:inherit;background:var(--bg);color:var(--fg)} /* facsimile / size / theme / contents controls recolored for the dark masthead bar (mechanics untouched — #facsBtn/.theme-fab/.szb/#contBtn keep their existing JS) */ .pg-mast #facsBtn,.pg-mast .szb,.pg-mast .theme-fab,.pg-mast #contBtn{ border-color:color-mix(in oklab,var(--masthead-ink) 35%,transparent);background:transparent;color:var(--masthead-ink)} .pg-mast #facsBtn:hover:not(.active),.pg-mast .szb:hover,.pg-mast .theme-fab:hover,.pg-mast #contBtn:hover{ color:#fff;border-color:var(--masthead-ink);background:color-mix(in oklab,var(--masthead-ink) 12%,transparent)} .pg-mast #facsBtn.active{background:var(--accent);border-color:var(--accent);color:#fff} .pg-mast #szRange{accent-color:var(--accent)} /* overflow "⋯" menu — everything that isn't in the primary row lives here: View (English only · OCR only), print/export, related, keyboard help, etc. */ .pg-more{position:relative} .pg-more>button{border:1px solid color-mix(in oklab,var(--masthead-ink) 35%,transparent);background:transparent; color:var(--masthead-ink);border-radius:var(--radius-md);width:1.9rem;height:1.7rem;cursor:pointer; font:inherit;line-height:1;transition:background .14s,border-color .14s} .pg-more>button:hover{background:color-mix(in oklab,var(--masthead-ink) 12%,transparent);border-color:var(--masthead-ink)} .pg-more-menu{position:absolute;top:calc(100% + 7px);right:0;min-width:12rem;background:var(--card);color:var(--fg); border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 14px 40px -18px rgba(0,0,0,.5); padding:.3rem;display:none;z-index:5} .pg-more-menu.open{display:block} .pg-more-menu button,.pg-more-menu a{display:block;width:100%;text-align:left;border:0;background:none; color:var(--fg);font:inherit;font-size:.85rem;padding:.42rem .6rem;border-radius:6px;cursor:pointer;text-decoration:none} .pg-more-menu button:hover,.pg-more-menu a:hover{background:var(--hl);color:var(--accent)} .pg-more-menu hr{border:0;border-top:1px solid var(--border);margin:.3rem 0} @media(max-width:700px){ .pg-mast{gap:.35rem;padding:0 .6rem} .pg-author,.pg-vol-pill,.pg-search input,.pg-title-la{display:none} .pg-search-menu{right:-.6rem} /* R37 (mobile walkthrough): the work title must be ONE clipped line inside the bar — it was wrapping into fragments painting above/below the masthead. */ .pg-mast>.pg-title{display:block;min-width:0;max-height:var(--mast-h); line-height:var(--mast-h);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pg-title-en{display:inline;white-space:nowrap} /* R37: phone reading size — desktop 19px reads enormous on a 390px viewport */ html{--read-fs:16.5px} .pg-room1{padding:.9rem .85rem 3.5rem} } /* ============================================================================ ROOM 1 — THE PAGE: OCR ‖ English, paginated by column opening, facsimile slide-in panel. Default room; hidden only when data-room="edition". ============================================================================ */ .pg-room1{padding:1.6rem clamp(1rem,3vw,2.4rem) 4rem;max-width:1440px;margin:0 auto} /* NOTE: room state is driven by html.g-room-page / html.g-room-edition CLASSES (pgreader.js) over a single-copy DOM in which the Edition body lives INSIDE .pg-room1 — the template's state-bridge rules handle the show/hide. The old data-room attribute contract is retired; never reintroduce `html[data-room="edition"] .pg-room1{display:none}` — it would hide the Edition text itself. */ .room1-grid{display:grid;grid-template-columns:minmax(0,var(--ocr-w,1fr)) 7px minmax(0,var(--en-w,1fr));align-items:start} .ocr-col,.en-col{min-width:0} .ocr-col{padding-right:1.3rem} .en-col{padding-left:1.3rem} /* OCR column header: hosts the relocated sub-bar [Greek · Latin · Both · Page]. .en-head mirrors it (empty title/provenance chip) purely so both columns' sticky rows share one height/offset — the "one shared pagination rhythm". */ .ocr-head,.en-head{position:sticky;top:var(--mast-h);z-index:8;display:flex;align-items:center;gap:.5rem; min-height:2.2rem;padding:.35rem .1rem;margin-bottom:.7rem; background:var(--bg); border-bottom:1px solid var(--border);font:.7rem/1.2 var(--font-ui);letter-spacing:.05em; text-transform:uppercase;color:var(--muted)} .ocr-head .modeseg,.en-head .modeseg{margin-left:auto;text-transform:none;letter-spacing:0} .ocr-head .modeseg button,.en-head .modeseg button{padding:.14rem .5rem;font-size:.72rem} /* draggable splitter between the two columns (persisted --ocr-w/--en-w via JS) */ .splitter{position:relative;width:7px;align-self:stretch;background:var(--border);border-radius:4px; cursor:col-resize;transition:background .15s;touch-action:none} .splitter:hover,.splitter.drag{background:var(--accent)} .splitter::after{content:'⋮';position:sticky;top:50vh;display:block;text-align:center; color:var(--card);font-size:.7rem;line-height:1;pointer-events:none} @media(pointer:coarse){.splitter{width:11px}} /* opening separators — the shared "PG {vol}:{col}–{col}" rhythm, a quiet centered rule */ .opening-sep{display:flex;align-items:center;gap:.7rem;margin:2.1rem 0 1.1rem;color:var(--muted); scroll-margin-top:calc(var(--mast-h) + 3.4rem)} .opening-sep:first-child{margin-top:.2rem} .opening-sep::before,.opening-sep::after{content:'';flex:1;height:1px;background:var(--border)} .opening-sep b{font:600 .72rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase; white-space:nowrap;font-variant-numeric:tabular-nums} /* facsimile panel: same .facs/.facs-head/.facs-stage/.facs-resizer/.facs-light element and JS contract as before — only its top offset + default width change for Room 1's masthead. (.facs is exclusive to the reading-page slide-in panel; the standalone facsimile browser page uses .facs-pg for its images, so this is safe to set unconditionally.) */ .facs,.facs-resizer{top:var(--mast-h)} /* ============================================================================ ROOM 2 — THE EDITION: diplomatic clean text, own divisions, no page chrome. Shown only when data-room="edition"; entirely replaces Room 1's grid/facsimile. ============================================================================ */ /* (.pg-room2 wrapper retired — Edition markup lives inside .pg-room1; see note above) */ .edition{font-family:var(--font-body);line-height:1.78} /* centering lives in the state bridge */ .edition h1{font-family:var(--font-display);font-size:2rem;font-weight:400;color:var(--fg); text-wrap:balance;margin:.2rem 0 .3rem} /* division headings/list reuse .division/.div-head as-is; only the anchor offset changes */ .edition .division{scroll-margin-top:calc(var(--mast-h) + 3.6rem)} .edition-prov{display:flex;gap:.55rem;align-items:baseline;max-width:42rem;margin:0 auto 1.6rem; padding:.6rem .9rem;border:1px solid var(--border);border-radius:var(--radius-md); background:color-mix(in oklch,var(--accent) 8%,var(--bg));font:.82rem/1.5 var(--font-ui);color:var(--fg)} .edition-prov b{color:var(--accent2)} /* persistent affordance back to Room 1 — sticky so it survives scrolling a long division */ .edition-back{position:sticky;top:calc(var(--mast-h) + .6rem);z-index:4;display:inline-flex; max-width:42rem;margin:0 auto 1.2rem;left:0} .edition-back a{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted); border:1px solid var(--border);border-radius:var(--radius-full);background:var(--card); padding:.32rem .85rem;font:600 .82rem/1.3 var(--font-ui);transition:color .14s,border-color .14s,background .14s} .edition-back a:hover{color:var(--accent);border-color:var(--accent);background:var(--hl);text-decoration:none} /* ============================================================================ MOBILE (<880px) — English first, a bottom thumb bar, facsimile full-screen. TWO layers: (1) plain @media basics that pre-style before pgreader.js runs (no cramped two-column FOUC); (2) html.g-mobile rules — pgreader.js adds the class at the SAME 880px breakpoint (matchMedia), and their higher specificity (html.g-mobile.… ) beats the inline STATE BRIDGE, which loads after this file. 880px matches the .pv-spread.pv-two grid breakpoint, so the class and these @media rules flip together — no dead zone. ============================================================================ */ @media(max-width:880px){ .pg-room1{padding:1.1rem .9rem calc(64px + env(safe-area-inset-bottom))} .room1-grid{display:flex;flex-direction:column} .splitter{display:none} .en-col{order:1;padding-left:0;margin-bottom:1.7rem} .ocr-col{order:2;padding-right:0} .en-head{display:none} /* English has no sub-modes; its header row only existed for column-height parity */ /* OCR column becomes a native

— template renders it `open` by default so desktop (where .ocr-col summary is display:none, see below) always shows content; only here does the triangle/summary become visible and collapse actually engage. */ .ocr-col{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);overflow:hidden} .ocr-col summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none; padding:.7rem .9rem;font:600 .82rem/1.2 var(--font-ui);color:var(--muted)} .ocr-col summary::-webkit-details-marker{display:none} .ocr-col summary::before{content:'▸';transition:transform .15s;color:var(--accent)} .ocr-col[open] summary::before{transform:rotate(90deg)} .ocr-col .ocr-head{position:static;margin:0 .9rem .6rem;backdrop-filter:none} .ocr-col:not([open]) .ocr-head,.ocr-col:not([open])>*:not(summary){display:none} .edition-back{position:static} } @media(min-width:881px){.ocr-col summary{display:none}} /* ── html.g-mobile (pgreader.js, <880px) — beats the inline STATE BRIDGE ─────── */ /* view widths: English full-bleed with edge padding; + Greek stacks the two columns full-width (no grid, no splitter). Specificity html.g-mobile.g-view-* (0,3,1)/(0,3,0) overrides the bridge's html.g-view-* (0,2,1)/(0,2,0). */ html.g-mobile.g-view-en .en-col{max-width:100%;margin:0;padding:0 1.05rem} html.g-mobile.g-view-both .room1-grid{display:flex;flex-direction:column;max-width:none;margin:0} /* R84d: 'none' released the desktop cap but let vtx content size the lane to the VIEWPORT (392px in a 390px shell) — Both view scrolled sideways on every phone. 100% releases the px cap identically while staying container-true. */ html.g-mobile.g-view-both .en-col,html.g-mobile.g-view-both .ocr-col{max-width:100%} html.g-mobile .pg-shell{padding-bottom:calc(58px + env(safe-area-inset-bottom))} /* masthead slims to Π · title · #pgOpening · ⋯ — the rest stays in the DOM (reachable via the thumb bar / the ⋯ menu) but leaves the top bar. */ html.g-mobile .pg-vol-pill, html.g-mobile .pg-author, html.g-mobile #contBtn, html.g-mobile .pg-search, html.g-mobile #facsBtn, html.g-mobile #szDn, html.g-mobile #szRange, html.g-mobile #szUp, html.g-mobile #thBtn{display:none!important} html.g-mobile .pg-mast{gap:.4rem;padding:0 .6rem} html.g-mobile .pg-title-la{display:none} /* the ⋯-menu mobile-only block (Show page image / theme / size), injected by JS */ .pg-more-mob{display:none} html.g-mobile .pg-more-menu .pg-more-mob{display:block} .pg-more-mob .pmm-size{display:flex;align-items:center;gap:.4rem;padding:.42rem .6rem} .pg-more-mob .pmm-size .pmm-size-lb{color:var(--muted);font-size:.8rem;margin-right:auto} .pg-more-mob .pmm-size button{width:auto;display:inline-flex;align-items:center;justify-content:center; min-width:2.1rem;border:1px solid var(--border);border-radius:6px;padding:.2rem .5rem; color:var(--fg);font-variant-numeric:tabular-nums} /* floating buttons get out of the thumb bar's way; the notebook opener (top-right, z-600) would sit over the ⋯ button, so both recede on the phone (notebook stays reachable from the ⋯ menu, scroll-to-top by scrolling). */ html.g-mobile .nb-toggle,html.g-mobile .scroll-top{display:none} html.g-mobile .resume-chip{bottom:calc(66px + env(safe-area-inset-bottom))} /* ── bottom thumb bar (JS-injected on every width; shown only under g-mobile) ── */ .pg-thumb{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none; align-items:stretch;justify-content:space-around;font-family:var(--font-ui); background:color-mix(in oklch,var(--bg) 90%,var(--card));border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 26px -20px rgba(0,0,0,.5); -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)} html.g-mobile .pg-thumb{display:flex} html.g-mobile .pg-thumb.is-hidden{display:none} /* the facsimile overlay owns the screen */ .pg-thumb-b{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.16rem;min-height:52px;border:0;background:none;color:var(--muted);cursor:pointer; font:600 .62rem/1.05 var(--font-ui);padding:.4rem .15rem;-webkit-tap-highlight-color:transparent; transition:color .13s var(--ease-strong)} .pg-thumb-b .pg-thumb-ic{font-size:1.12rem;line-height:1;font-weight:400} .pg-thumb-b .pg-thumb-lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .pg-thumb-b.on{color:var(--accent)} .pg-thumb-b:active{transform:scale(.93)} .pg-thumb-b:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:8px} /* ── facsimile as a full-screen overlay on the phone (fixed inset 0, ✕ top-right) ── */ html.g-mobile .facs{left:0;width:100vw;--facs-w:100vw;border-left:0;z-index:200} /* above the masthead (150) */ html.g-mobile .facs-resizer{display:none} html.g-mobile .facs-head{flex-wrap:wrap;gap:.2rem;padding:.5rem .5rem;padding-right:2.8rem;position:relative} /* R67 mobile nit: at 390px the last lane button ("English") wrapped to a lonely second row — tighter buttons keep the whole strip on one line down to small phones */ html.g-mobile .facs-head button{padding:0 .45rem;font-size:.8rem;letter-spacing:0} html.g-mobile .facs-head .facs-nav button{padding:0 .3rem} html.g-mobile .facs-head #facsFol{font-size:.8rem} html.g-mobile .facs-close{display:flex;align-items:center;justify-content:center;position:absolute; top:.35rem;right:.4rem;margin:0;width:2.2rem;height:2.2rem;font-size:1.35rem;color:var(--fg); background:var(--card);border:1px solid var(--border);border-radius:9px;z-index:3} html.g-mobile .facs-foot{padding-bottom:calc(.6rem + env(safe-area-inset-bottom))} /* ============================================================================ DARK THEME — every rule above already resolves entirely through the shared tokens (--bg/--card/--fg/--border/--muted/--accent/--accent2/--sidebar/--hl/ --masthead/--masthead-ink), which prdl-system.css already re-tones under [data-theme="dark"] — so nothing above needs a dark override to stay correct. The masthead intentionally stays near-black in BOTH themes (--masthead barely changes light→dark by design); these two rules are the only genuine dark-only *adjustments* (not color substitutions), both still expressed via tokens only. ============================================================================ */ [data-theme="dark"] .pg-mast{box-shadow:0 1px 0 rgba(255,255,255,.07)} [data-theme="dark"] .splitter::after{color:var(--fg)} /* audit fixes — three spots used a var(--token, #hardcoded-light-mode-hex) fallback where --token (--ink / --muted-2) was never actually DEFINED anywhere, in any theme, so the light-mode fallback hex rendered unchanged even under [data-theme="dark"]: */ /* 5a: .en-h (pg.override.css) — near-black ink on the dark background (≈1.09:1) */ [data-theme="dark"] .en-h{color:var(--fg)} /* 5b: .vtx-col.vtx-la — the muted Latin body text (≈1.81:1); --muted is the dark palette's muted-LIGHT token (light gray on this theme's dark ground, ≥7:1 here) */ [data-theme="dark"] .vtx-col.vtx-la{color:var(--muted)} /* 5c: the masthead's Facsimile/Edition arms deliberately go "ink dark" instead of accent when active (.pg-vfacs.on/.pg-vedn.on{background:var(--fg,#2d2927)}) — in light mode --fg is near-black (readable white-on-dark); in dark mode --fg IS the near-white text color, so the chip rendered as a pale-cream-on-white blur. Invert to the dark background + light text so the "ink" chip still reads as its own distinct dark arm, consistent with the other active arms. */ [data-theme="dark"] .pg-viewseg .pg-vfacs.on, [data-theme="dark"] .pg-viewseg .pg-vedn.on{background:var(--bg);color:var(--fg)} /* ============================================================================ PRINT — Room 1 prints its two columns side by side; all chrome recedes. (Complements, does not duplicate, the existing @media print block in pg.theme.css.) ============================================================================ */ @media print{ .pg-mast,.splitter,.ocr-head,.en-head,.pg-more-menu,.pg-search-menu,.pg-thumb, .pg-vol-menu,.edition-back,#contBtn,.facs,.facs-resizer{display:none!important} .pg-room1{padding:0;max-width:100%} .room1-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 1.6rem} .ocr-col,.en-col{padding:0!important} .ocr-col{border:0;background:none} .opening-sep{margin:1.1rem 0 .6rem} .edition-prov{display:none} } /* ============================================================================ CRAFT POLISH — press feedback, easing, focus, motion discipline. Strong ease-out (cubic-bezier(.23,1,.32,1)) for entries; iOS drawer curve (cubic-bezier(.32,.72,0,1)) for the facsimile slide-in; exits faster than enters; everything gated for prefers-reduced-motion. ============================================================================ */ :root{--ease-strong:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1)} /* press feedback — every masthead / segmented control acknowledges the click */ .pg-mast button:active,.ocr-head .modeseg button:active,.pg-vol-pill:active,.edition-back a:active{ transform:scale(.96)} .pg-mast button,.ocr-head .modeseg button, .pg-vol-pill,.edition-back a{transition-property:background,border-color,color,opacity,transform; transition-duration:.14s;transition-timing-function:var(--ease-strong)} /* keyboard focus — visible ring on the dark masthead and the light body alike */ .pg-mast :focus-visible,.splitter:focus-visible,.edition-back a:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* facsimile panel: keep the legacy full off-canvas slide (translateX(101%) in pg.css), upgraded to the drawer curve; the exit is faster than the entry. */ .facs{transition:transform .34s var(--ease-drawer)} .app:not(.with-facs) .facs{transition-duration:.22s} /* opening indicator + pagination counters never shift layout */ #pgOpening,#facsPageNum,#colJump,.pg-goto input{font-variant-numeric:tabular-nums} /* reading comfort: balanced headings, no orphans in the English prose */ .edition .div-head,.en-work,.en-h{text-wrap:balance} .en-page p,.edition .blk{text-wrap:pretty} /* generous hit areas on the compact masthead icon buttons (40px minimum) */ .pg-mast .szb,.pg-more>button{position:relative} .pg-mast .szb::after,.pg-more>button::after{content:'';position:absolute;inset:-8px} /* summary caret + drawer transitions honor reduced motion */ @media (prefers-reduced-motion: reduce){ .facs{transition:none} .pg-mast button,.ocr-head .modeseg button, .pg-vol-pill,.edition-back a{transition:none} .pg-mast button:active,.ocr-head .modeseg button:active,.pg-vol-pill:active,.edition-back a:active{transform:none} .pg-search input{transition:none} } /* ── ΚΛΕΙΣ drawer legibility (user 2026-07-03) ────────────────────────────── One quiet explainer, a "col. N" citation chip per chapter, the Key's own section headings, and an English gloss (from our translation) under each Greek label. The list should read like a table of contents, not raw data. */ .ct-kleis-note{margin:.2rem .6rem .55rem;padding:.5rem .65rem;border:1px solid var(--border); border-radius:var(--radius-md);background:color-mix(in oklch,var(--accent) 7%,var(--bg)); font:.74rem/1.5 var(--font-ui);color:var(--muted)} .ct-kleis-note b{color:var(--accent2);font-weight:700} .ct-sec{margin:.85rem .6rem .3rem;font:600 .64rem/1.2 var(--font-ui);letter-spacing:.11em; text-transform:uppercase;color:color-mix(in srgb,var(--muted) 88%,transparent)} /* ── R68 TOC anatomy — one grammar for every contents row ──────────────────── ┌ label block (primary, 2-line clamp · gloss, 1-line · destination, 1-line) ┐ nnn The column is a bare right-hand numeral in tabular figures — the book's own page-number idiom — never a bordered chip repeated a hundred times. */ .ct-item{display:flex;align-items:flex-start;gap:.6rem;color:var(--fg)} .ct-item .ct-lab{display:block;flex:1 1 auto;min-width:0} .ct-item .ct-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;overflow-wrap:break-word} .ct-item .ct-gr,.ct-item .ct-la{display:block;margin-top:.08rem;font-size:.86em;line-height:1.35; color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ct-item .ct-la{font-style:italic} .ct-item .ct-gr{font-family:var(--font-ui)} .ct-item .ct-col{flex:0 0 auto;margin-left:auto;font:450 .72rem/1 var(--font-ui); color:color-mix(in srgb,var(--muted) 82%,transparent);font-variant-numeric:tabular-nums; white-space:nowrap;padding-top:.22rem;transition:color .14s var(--ease)} .ct-item.ct-cur .ct-col{color:var(--accent)} .ct-item.ct-kleis .ct-en{display:block;margin-top:.12rem;font:.76rem/1.4 var(--font-ui); color:var(--muted);font-style:normal} .ct-item.ct-kleis.ct-cur{background:var(--hl)} /* ============================================================================ SIDEBAR SHELL (v2, PG_READER_V2_SPEC) — the persistent orientation rail, like PLD: a TEXT radio group (room/view) + Contents + footer, sticky at the side ≥1100px. NOTE: every g-view-*/g-room-* MODE layout (grid swaps, centering, per-view widths) lives in the template's state-bridge