/* ============================================================================
room-librarians-desk.css — the interior of the Stories Room.
furnishing-vessel-interiors S1 (DT authoring). Presentation only.
Spec: docs/room-specs/03-stories.md — committed before this file.
── WHY A FILE, NOT A BLOCK IN room-windows.css ────────────────────────────
Same reason as room-intake-manifest.css and room-curators-rail.css: rollback.
room-windows.css is the shared chassis; this is ONE Room's interior. The
single-step revert is `git checkout` on this file plus its one .
── THE SEAM ───────────────────────────────────────────────────────────────
buildWindow() stamps `.ffrw-shell.ffrw-vessel.ffrw-stories`; the view-room
factory reparents `#view-stories` into `.ffrw-body` with `.ffrw-hosted`. So
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted
reaches every hosted node with zero JavaScript, is scoped to this Room by
construction, and leaves the flat App-Panel view and mobile untouched.
── WHAT THIS FILE MAY NOT DO ──────────────────────────────────────────────
No handler, no label, no route, no truthful string, no `!important`, no
second scroll owner (`#view-stories` is the one). The chrome layer
(.ffvl-chromed-header) keeps custody of the header band's background, bottom
rule and text colour — nothing here touches those three on .view-header.
The mode buttons' ORDER is data-driven (applyStoryProfileCategoryOrder);
nothing here reorders anything.
WITHHELD (spec §6): the Fergi aperture (fleet dependency), the inline-styled
featured "Start Here" block, bio tint layers, the focus banner and drag
handle, the lock toggle's own logic. They render exactly as today.
============================================================================ */
/* ── The well ─────────────────────────────────────────────────────────────
#view-stories is the scroll owner. Gutters + scroll padding so the first
and last rows are reachable, not merely painted (D1 §1.3, §8.2).
Palette is the room's own admitted token block (launcher-visual.css),
re-expressed as this file's working vocabulary. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted {
--ld-gutter: 20px;
--ld-ink: var(--ffvr-ink, #F2FFF9);
--ld-ink-muted: var(--ffvr-ink-muted, #BBC9C3);
--ld-rule: color-mix(in srgb, var(--ffvr-rule, #4CC9A4) 32%, transparent);
--ld-rule-strong: color-mix(in srgb, var(--ffvr-rule, #4CC9A4) 58%, transparent);
--ld-plane: var(--ffvr-surface-raised, #1F302E);
--ld-plane-hover: color-mix(in srgb, var(--ffvr-surface-raised, #1F302E) 90%, var(--ffvr-ink, #F2FFF9) 10%);
--ld-accent: var(--ffvr-accent, #E0A84A);
scroll-padding-block-start: 16px;
scroll-padding-block-end: 24px;
color: var(--ld-ink);
}
/* ── One hierarchy: the chassis title is the title ─────────────────────────
The vessel header already says `Stories / LIBRARIAN'S DESK`. The hosted
view repeats it as `
📖 Ferguson Family Stories
` — the duplicate.
VISUALLY RETIRED, NOT REMOVED (D1 §2.2 outcome 2): the H2 is the heading
root of this view's outline, so only the pixels go; name, order and
H2→H3 nesting survive for AT. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-title-section h2 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ── The operational rail (D1 §2.3) ───────────────────────────────────────
The legacy header carried controls, so its controls become the rail in
place: Add Story at the left slot, the category tabs in the center. The
chrome layer keeps background/rule/colour custody; this is spacing only. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .view-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
margin: 0;
padding: 8px var(--ld-gutter);
min-height: 52px;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-title-section {
gap: 0;
}
/* ── The primary action wears the desk's brass, not a stranger's indigo ────
Base paints #667eea→#764ba2, a palette from no part of this vessel. The
Room's accent is #E0A84A with black on-accent ink (9.4:1). Handler, label
and tier gate untouched. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .add-story-btn {
background: var(--ld-accent);
color: #000000;
border-radius: 8px;
box-shadow: none;
padding: 8px 14px;
min-height: 36px;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .add-story-btn:hover {
transform: none;
background: color-mix(in srgb, var(--ld-accent) 86%, #FFFFFF 14%);
box-shadow: none;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .add-story-btn:focus-visible {
outline: 3px solid #FFFFFF;
outline-offset: 2px;
box-shadow: 0 0 0 1px #000000;
}
/* ── The category tabs as the Room's pill pair (D1 §3.7, §4.4) ─────────────
Order is data-driven and untouched; only the dress changes. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-view-mode-btn {
min-height: 36px;
padding: 6px 12px;
border: 1px solid var(--ld-rule);
border-radius: 999px;
background: transparent;
color: var(--ld-ink-muted);
font-weight: 600;
transition: background 150ms, color 150ms, border-color 150ms;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-view-mode-btn:hover {
color: var(--ld-ink);
background: color-mix(in srgb, var(--ld-plane) 60%, transparent);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-view-mode-btn.active {
border-color: var(--ld-accent);
background: color-mix(in srgb, var(--ld-accent) 16%, transparent);
color: var(--ld-ink);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-view-mode-btn:focus-visible {
outline: 3px solid #FFFFFF;
outline-offset: 2px;
box-shadow: 0 0 0 1px #000000;
}
/* ── The index: sections stop being boxes (D1 §1.4) ───────────────────────
Base draws each section as a light --color-bg panel with border, radius
and shadow — a complete perimeter around "a header plus all content below
it", which §1.4 forbids. On the desk, a section is a shelf heading and a
rule; the rows beneath it sit directly on the Room ground. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted #storiesContainer {
padding: 16px var(--ld-gutter) 24px;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-section,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-arc-group {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-section + .stories-section,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-arc-group + .story-arc-group {
margin-top: 32px;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-section-header,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-arc-header {
background: none;
padding: 0 0 8px;
border-bottom: 1px solid var(--ld-rule);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-section-header h3,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-arc-title {
font-family: "Playfair Display", Georgia, serif;
font-size: 18px;
line-height: 24px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ld-ink);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-section-subtitle {
margin: 2px 0 0;
font-size: 11px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ld-ink-muted);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-section-cards {
padding: 12px 0 0;
gap: 8px;
}
/* ── Story rows as dockets on the shelf (D1 §5.3) ─────────────────────────
Elevation 0, no perimeter; the row answers hover with the Room's own
raised plane, not a lift. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-card {
background: transparent;
border: 0;
border-bottom: 1px solid var(--ld-rule);
border-radius: 8px 8px 0 0;
transition: background 150ms, border-color 150ms;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-card:hover {
background: color-mix(in srgb, var(--ld-plane) 55%, transparent);
border-color: var(--ld-rule-strong);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-card-title {
color: var(--ld-ink);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-card-subtitle,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-card-meta {
color: var(--ld-ink-muted);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-card:focus-visible {
outline: 3px solid #FFFFFF;
outline-offset: 2px;
box-shadow: 0 0 0 1px #000000;
}
/* ── Bio rows ─────────────────────────────────────────────────────────────
.bio-card already reads the Room's --ffvr-* roles (styles.css:45105), so
in-room it wears this palette by construction. Only the border weight is
softened to the divider mix so eighteen rows do not read as eighteen
boxes; radius 12 (ordinary card) stands. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .bio-card {
border-color: var(--ld-rule);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .bio-card:hover {
border-color: var(--ld-rule-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 6px 18px rgba(0, 0, 0, .24);
}
/* ── The other surfaces of the same Room ──────────────────────────────────
Loading, empty and welcome keep their behaviour and copy; they are given
the Room's ink and gutters so they do not sit against the wall. The
welcome's navy gradient is a foreign panel; on the desk it is the ground
itself with a rule around the invitation. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-loading,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-empty {
color: var(--ld-ink-muted);
padding: 44px var(--ld-gutter);
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-welcome {
background: transparent;
border: 1px dashed var(--ld-rule-strong);
border-radius: 12px;
color: var(--ld-ink);
}
/* ── Reduced motion (pilot pattern: the floor plus the list) ──────────────
`*` is (0,3,1) and loses to single-class rules elsewhere, so the floor
catches unenumerated markup and the list catches the rest — measured on
the pilots, not predicted. */
@media (prefers-reduced-motion: reduce) {
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted * {
transition: none;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-card,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .bio-card,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .add-story-btn,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-view-mode-btn {
transition: none;
}
}
/* ── Forced colours ───────────────────────────────────────────────────────
The UA discards every background and border above; restore system borders
so rows and controls keep their shapes, give the active tab and primary
action the system's own selected pairing, and never let an opacity wash
out essential text (the pilots' masthead trap). */
@media (forced-colors: active) {
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .story-card,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .bio-card,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-view-mode-btn,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .add-story-btn {
border: 1px solid ButtonBorder;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-view-mode-btn.active,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .add-story-btn {
border: 2px solid Highlight;
}
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-section-subtitle {
opacity: 1;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
THE v14 LIBRARIAN'S DESK — porting-perimeter-souls S1.
Everything below this line is reached ONLY through `html.ffv-modal-fleet-v14`,
the reflection FFAFlags writes for `ffa_modal_fleet_v14`. With the flag off
not one selector here matches, and the room renders exactly as the 303 lines
above render it.
WHY THE REFLECTION AND NOT A JS BRANCH. The LINEWORK half gates itself
inside layers(): flag-off never emits a `.ffvc-v14-*` element, so those rules
could not match anyway and are belt-and-braces. The SHELL half cannot work
that way. This room's v14 chassis needs its own weights on `.ffvc-rim-glow`,
`.ffvc-body` and `.ffvc-lip` — three classes room-windows.css draws in BOTH
flag states. An unconditioned override would reach the flag-off room and
break the byte-identity that makes this flag a rollback path. CSS cannot call
isOn(); a class on is the narrowest honest form of the condition.
── THE APERTURE IS UNCHANGED, AND THAT IS THE POINT ─────────────────────
Nothing here touches `.ffrw-header`'s or `.ffrw-body`'s insets. The Family
Navigator port had to override them because the pilot carried a
praise-protected 7.5% horizontal fit; this room's accepted working width IS
full width, and IMPLEMENTATION_MATRIX.md is explicit that a port starts from
the room's currently working width and scroll ownership. The only geometry
this port moves is vertical, it moves it through the theme's own derived
keep-outs (139 / 103, up from 134 / 96), and `#view-stories` remains the one
scroll owner.
── STROKE WIDTHS ARE THE ONE JUDGEMENT ──────────────────────────────────
Colours and opacities carry over from the lab unchanged — they are unitless
and a coordinate change cannot touch them. Widths cannot: the lab draws in
1600x1000 and this fleet in 1000x700, both stretched to their container, so
a horizontal stroke wants 0.625 and a vertical one 0.7, and one number
cannot be both. Every width below is the lab's times the GEOMETRIC MEAN,
sqrt(0.625 * 0.7) = 0.6614, which preserves stroke area and splits the
residual evenly (+5.9% on one axis, -5.5% on the other; under a pixel at
every width the lab uses). Each is written as `lab x 0.6614` so the
arithmetic is checkable rather than trusted.
`.ffvc-v14-*` names appear nowhere else in the vault, so these rules cannot
reach another room's chassis even if a selector were mis-scoped. They are
scoped to `.ffrw-stories` regardless.
═══════════════════════════════════════════════════════════════════════════ */
html.ffv-modal-fleet-v14 .ffrw-stories {
--v14-emerald: #48c79b; /* the lab's --room-a */
--v14-brass: #e0a94f; /* the lab's --room-b */
--v14-orchid: #ef3fa5; /* the lab's --room-c */
--v14-metal: #55b8ff; /* the lab's --room-metal */
}
/* The shell: the lab's heavy aura, its solid rim and its pale inner lip. These
three override the fleet-wide widths in room-windows.css, which is why they
carry the room class as well as the flag class. */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-rim-glow { stroke-width: 6.61; opacity: .24; } /* lab 10 x 0.6614 */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-body { stroke-width: 2.65; } /* lab 4 x 0.6614 */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-lip { stroke: rgba(220, 246, 255, .45); stroke-width: .99; opacity: 1; } /* lab 1.5 x 0.6614 */
/* the room's furniture, all of it in the margins the working panel leaves */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-library path,
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-shelfwork path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* the head: the book arch across the crown band and the hanging bookmark */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-book-arch { stroke: var(--v14-metal); stroke-width: 1.98; } /* lab 3 x 0.6614 */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-bookmark {
fill: color-mix(in srgb, var(--v14-orchid) 70%, #301125);
stroke: #ffd08a;
stroke-width: 1.32; /* lab 2 x 0.6614 */
}
/* the open-volume hero, mounted on the centre line of the crown */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-hero-ring { fill: rgba(4, 15, 26, .96); stroke-width: 1.46; } /* lab 2.2 x 0.6614 */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-hero-line {
stroke: color-mix(in srgb, var(--v14-emerald) 78%, #ffffff 8%);
stroke-width: 1.32; /* lab 2 x 0.6614 */
}
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-filigree-metal {
stroke: color-mix(in srgb, var(--v14-metal) 70%, transparent);
stroke-width: 1.12; /* lab 1.7 x 0.6614 */
}
/* the foot: two shelf rails, and the family's stories at rest on the upper one.
The spine group is the CLAMPED one — see the theme's judgement #3 — so its
rects are shorter than the lab's by a single measured factor, 0.5275, and
their variation is intact. */
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-shelf {
stroke: color-mix(in srgb, var(--v14-metal) 72%, #6c421d);
stroke-width: 3.97; /* lab 6 x 0.6614 */
}
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-spines rect {
fill: color-mix(in srgb, var(--v14-emerald) 18%, #17241e);
stroke: var(--v14-metal);
stroke-width: .99; /* lab 1.5 x 0.6614 */
}
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-spines rect:nth-child(2n) {
fill: color-mix(in srgb, var(--v14-orchid) 20%, #201418);
}
/* ── motion: THERE IS NONE, AND THAT IS THE LAB'S OWN DECISION ─────────────
Codex's stylesheet animates ten rooms inside `prefers-reduced-motion:
no-preference` — the Mind Console's signals, the Wardrobe's marquee bulbs,
the Light Table's scan line, the Intake dock's conveyor, and so on. The
Librarian's Desk is deliberately not among them: a reading room holds still.
So this port declares no animation, the `.hero-motion` class the lab stamps
on the hero group is inert here, and there is nothing for a reduced-motion
block to collapse. Stated rather than left as an absence, because "no motion
rules" and "motion rules someone forgot to guard" look identical in a diff.
── narrow shells: no stand-down either ───────────────────────────────────
The chassis marks its layer `.ffvc-compact` below 700px of shell width, and
room-windows.css stands down the fleet's FLANK flourishes there because they
have no margin left to live in. Every element this port draws is head or
foot furniture, and the head and foot bands are present at every width the
room supports (its minSize is 560x420). Nothing is stood down, and nothing
needs to be.
═══════════════════════════════════════════════════════════════════════════ */
/* ── forced colours ────────────────────────────────────────────────────────
The UA discards the fills and strokes above. The chassis is decoration and
is allowed to disappear — what may NOT happen is the shelf and spines
surviving as unstyled black-on-black shapes over the room's foot. Hand them
the system's own pairing so they either read or vanish cleanly. */
@media (forced-colors: active) {
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-spines rect {
fill: Canvas;
stroke: CanvasText;
}
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-shelf,
html.ffv-modal-fleet-v14 .ffrw-stories .ffvc-v14-book-arch {
stroke: CanvasText;
}
}
/* Touch floor for the Stories room's own buttons on the desktop shell (the iPad), Greg 2026-10-01.
Same selectors as the 36px rules above (id + 4 classes; a shorter selector in room-windows.css
lost to them, measured), placed after them so the touch case wins. Mouse desktops untouched. */
@media (pointer: coarse) and (min-width: 768px) { /* 768, not 769: the iPad Mini is exactly 768 wide and gets the DESKTOP shell (mobile-detect.js: max-width 767). Greg G-058. */
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .add-story-btn,
.ffrw-stories .ffrw-body > #view-stories.ffrw-hosted .stories-view-mode-btn { min-height: 44px; }
}