/* Readable text over the 3D house (readability-plan.md): lighter indigo glass
   behind tabs and room text, a type-size floor, and phone layout fixes.
   Applies when <html data-text-style> is set (index.html sets it). */

html[data-text-style]{--ts-bg:#102a3b73;--ts-fg:#fbf3e3;--ts-muted:#f1e7d3;--ts-border:#d7aa7247;--ts-accent:#ecc48f;--ts-blur:blur(14px) saturate(1.05);--ts-shadow:0 4px 18px #0f1d2614}

/* Shared backing: tab bar, room placards and footer chips. */
html[data-text-style] .site-header .room-navigation,
html[data-text-style] #motion-toggle,
html[data-text-style] #table-view .intro,
html[data-text-style] .table-footer .edition-label,
html[data-text-style] .table-footer .table-hint,
html[data-text-style] .about-story,
html[data-text-style] .library-intro,
html[data-text-style] .house-footer #house-room-label,
html[data-text-style] .house-footer #house-scroll-hint{
 background:var(--ts-bg);color:var(--ts-fg);border:1px solid var(--ts-border);
 -webkit-backdrop-filter:var(--ts-blur);backdrop-filter:var(--ts-blur);text-shadow:none;box-shadow:var(--ts-shadow)}
/* The light tint relies on blur plus a soft text shadow for contrast. */
html[data-text-style] :is(.room-navigation,#motion-toggle,#table-view .intro,.table-hint,.about-story,.library-intro,#house-scroll-hint){text-shadow:0 1px 8px #0b161f73}

/* Tabs: full opacity, readable size, brass marker for the current room. */
html[data-text-style] .site-header .room-navigation{border-radius:999px;padding:0 20px;gap:20px}
html[data-text-style] .room-navigation button{font-size:13px;letter-spacing:.3px;opacity:1;padding:11px 2px 9px;border-bottom:2px solid transparent}
html[data-text-style] .room-navigation button[aria-current=true]{font-weight:600;border-color:var(--ts-accent)}
@media(hover:hover){html[data-text-style] .room-navigation button:hover{border-color:var(--ts-accent)}}

/* The About passage is the longest read on the scene, so it keeps a deeper tint of the same blue. */
html[data-text-style] .about-story[data-stage="story"]{background:#102a3bc2}

/* The Workshop card joins the same lighter glass. */
html[data-text-style] .workshop-card{background:var(--ts-bg);border-color:var(--ts-border);box-shadow:var(--ts-shadow);-webkit-backdrop-filter:var(--ts-blur);backdrop-filter:var(--ts-blur);text-shadow:0 1px 8px #0b161f73}
html[data-text-style] #motion-toggle{font-size:13px;border-radius:999px;padding:9px 16px;text-decoration:none}
html[data-text-style] .scene-reading .site-header .room-navigation{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit}

/* Type floor. */
html[data-text-style] .eyebrow{font-size:11px;letter-spacing:1.4px}
html[data-text-style] .intro-note{font-size:15px;max-width:none;color:var(--ts-muted)}
html[data-text-style] .table-footer{font-size:12px}
html[data-text-style] .table-hint{font-size:13px;color:var(--ts-fg)}
html[data-text-style] .hotspot,html[data-text-style] #hotspots .hotspot{font-size:11px;letter-spacing:.6px}
html[data-text-style] .house-footer{font-size:12px}
html[data-text-style] #house-scroll-hint{font-size:13px}
html[data-text-style] .library-intro>p:last-child{font-size:15px}
html[data-text-style] .library-controls button{font-size:14px}
html[data-text-style] .library-controls button span{font-size:12px}
html[data-text-style] .workshop-card>p:not(.eyebrow){font-size:15px}
html[data-text-style] .workshop-models button,html[data-text-style] .workshop-continue{font-size:13px}
html[data-text-style] .workshop-card .workshop-hint{font-size:13px!important}

/* Placard shapes. */
html[data-text-style] #table-view .intro{border-radius:16px;padding:20px 24px;max-width:400px}
html[data-text-style] .table-footer .edition-label,
html[data-text-style] .table-footer .table-hint,
html[data-text-style] .house-footer #house-room-label,
html[data-text-style] .house-footer #house-scroll-hint{border-radius:999px;padding:7px 14px}
html[data-text-style] .library-intro{border-radius:16px;padding:18px 24px;max-width:640px}
html[data-text-style] .library-intro .eyebrow{color:var(--ts-accent)}
html[data-text-style] .about-story{border-radius:16px}
html[data-text-style] .about-story .eyebrow{color:var(--ts-accent);font-size:11px}
html[data-text-style] .about-story-position{font-size:11px;color:var(--ts-muted)}
html[data-text-style] .about-story[data-stage="welcome"]{height:auto;width:auto;max-width:min(480px,calc(100% - 48px));padding:18px 24px}
html[data-text-style] .about-story[data-stage="welcome"] .about-story-position{display:none}
html[data-text-style] .about-story[data-stage="welcome"] #about-story-text{font-size:15px}

/* Cream type on the Table, where the default intro ink is dark. */
html[data-text-style] #table-view .intro h1{color:var(--ts-fg)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-text-style]{--ts-bg:#102a3bd9}
}

@media(max-width:560px){
 html[data-text-style] .nav-article{display:none}
 html[data-text-style] .site-header .room-navigation{padding:0 14px;gap:14px}
 html[data-text-style] .room-navigation button{font-size:14px;min-height:44px;padding:0 2px}
 html[data-text-style] #motion-toggle{font-size:12px;padding:8px 12px}
 html[data-text-style] #table-view .intro{top:132px;left:16px;right:16px;max-width:none;padding:14px 18px}
 html[data-text-style] #table-view .intro h1{font-size:34px}
 html[data-text-style] .about-story[data-stage="welcome"]{top:128px;left:16px;right:16px;max-width:none;padding:14px 18px}
 html[data-text-style] .about-story[data-stage="welcome"] #about-story-text{font-size:15px;max-width:none}
 html[data-text-style] .library-intro{top:128px;left:16px;right:16px;padding:14px 18px}
 html[data-text-style] .library-intro>p:last-child{font-size:14px}
 html[data-text-style] .library-controls button{font-size:13px}
 html[data-text-style] .library-controls button span{font-size:11px}
 html[data-text-style] .workshop-card>p:not(.eyebrow){font-size:14px}
 html[data-text-style] .workshop-card{bottom:104px}
 html[data-text-style] .workshop-models button{font-size:12px;padding:8px}
 html[data-text-style] #hotspots .hotspot{font-size:11px}
 /* The room name is already in the tab bar; keep one hint chip so the footer clears the buttons above it. */
 html[data-text-style] .house-footer #house-room-label,
 html[data-text-style] .table-footer .edition-label{display:none}
 html[data-text-style] #house-scroll-hint{font-size:13px}
 html[data-text-style] .table-footer .table-hint{display:inline-block;max-width:none;font-size:13px;padding:7px 14px}

 /* Recognition and education buttons match the Library's book buttons:
    navy field, cream name, small brass label underneath. */
 html[data-text-style] #credential-controls{gap:5px;bottom:92px}
 html[data-text-style] #credential-controls:before{display:none}
 html[data-text-style] #living-hotspots #credential-controls .frame-control{min-height:49px;padding:6px 9px;border:1px solid #e8cca4b0;border-radius:0;background:#142f3ed9;color:#fff0d5;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:3px;box-shadow:0 8px 25px #0b1b2880}
 html[data-text-style] #living-hotspots #credential-controls .frame-control:hover,
 html[data-text-style] #living-hotspots #credential-controls .frame-control:focus-visible{background:#284c60}
 html[data-text-style] #credential-controls .frame-control span{font:13px/1.3 'DM Sans',sans-serif;color:#fff0d5;text-wrap:pretty}
 html[data-text-style] #credential-controls .frame-control::before{content:none;order:2;font:11px/1.2 'DM Sans',sans-serif;letter-spacing:.6px;color:#e8bf8d}
}

/* Phase 4: detail panels and readers. Labels at least 11px, notes and links 13px, reading copy 14-16px. */
html[data-text-style] :is(.reader-toolbar,.course-toolbar,.model-toolbar){font-size:11px;letter-spacing:1.2px}
html[data-text-style] :is(.reader-toolbar,.course-toolbar,.model-toolbar)>span{font-size:11px;letter-spacing:1px}
html[data-text-style] :is(.back-control,.course-toolbar button,.model-toolbar button){font-size:13px}
html[data-text-style] :is(.paper-masthead,.reader-paper>.paper-masthead,.inside-eyebrow,.inside-folio,.page-foot){font-size:11px;letter-spacing:1px}
html[data-text-style] :is(.paper-section .eyebrow,.press-publication,.press-row .press-publication,#course-content .eyebrow,#model-content .eyebrow,.living-panel-scroll .eyebrow){font-size:11px;letter-spacing:1.2px}
html[data-text-style] :is(.image-caption,.inside-caption,.reader-paper>.image-caption){font-size:12px}
html[data-text-style] :is(.source-note,.continue-hint,.report-original p,.report-original .paper-link,.course-continuation>p:last-child,.model-continuation p:last-child){font-size:13px}
html[data-text-style] .press-row p{font-size:14px}
html[data-text-style] .paper-section p{font-size:16px}
html[data-text-style] .living-panel-paper>header{font-size:11px;letter-spacing:1.2px}
html[data-text-style] .living-panel-paper>header button{font-size:13px}
html[data-text-style] .living-panel-paper>footer{font-size:11px;letter-spacing:.6px;gap:16px;white-space:nowrap}
html[data-text-style] #living-panel-body>p:not(.living-lead){font-size:15px}
html[data-text-style] .living-link{font-size:13px}
html[data-text-style] .scene-reading .room-navigation button{font-size:13px}
html[data-text-style] #loading{font-size:12px}
html[data-text-style] :is(#model-content p:not(.model-line,.eyebrow),#model-content li,#course-content p:not(.course-deck,.eyebrow),#course-content li){font-size:16px}
html[data-text-style] .course-note{font-size:14px}
html[data-text-style] .course-return{font-size:13px}
html[data-text-style] .model-continuation p:last-child{font-size:13px!important}

@media(max-width:560px){
 html[data-text-style] .scene-reading .room-navigation{gap:12px}
 html[data-text-style] .scene-reading .room-navigation button{font-size:13px;padding:7px 0}
 html[data-text-style] .paper-section p{font-size:15px}
 html[data-text-style] :is(#model-content p:not(.model-line,.eyebrow),#model-content li,#course-content p:not(.course-deck,.eyebrow),#course-content li){font-size:15px}
 html[data-text-style] #living-panel-body>p:not(.living-lead){font-size:15px}
 /* The reader title is already in the toolbar; keep the footer instruction on one line. */
 html[data-text-style] .page-foot #page-foot-title{display:none}
 html[data-text-style] .living-panel-paper>footer span{display:none}
 html[data-text-style] .page-foot{justify-content:flex-end;white-space:nowrap}
}

/* Phone text boxes (readability-plan.md, options 1 and 2): headline-only room cards,
   since the bottom hint already says what to do, and a slimmer Workshop card. */
@media(max-width:560px){
 html[data-text-style] #table-view .intro .intro-note,
 html[data-text-style] .library-intro>p:last-child,
 html[data-text-style] .about-story[data-stage="welcome"] #about-story-text{display:none}
 html[data-text-style] #table-view .intro,
 html[data-text-style] .library-intro,
 html[data-text-style] .about-story[data-stage="welcome"]{padding:11px 16px 12px}
 html[data-text-style] :is(#table-view .intro,.library-intro) .eyebrow{margin-bottom:6px}
 html[data-text-style] #table-view .intro h1,
 html[data-text-style] .library-intro h1{font-size:28px;margin:0}
 html[data-text-style] .about-story[data-stage="welcome"] h1{margin:0}
 html[data-text-style] .workshop-card{padding:12px 14px 13px}
 html[data-text-style] .workshop-card .eyebrow{margin-bottom:6px}
 html[data-text-style] .workshop-card h1{font-size:26px;margin:0}
 html[data-text-style] .workshop-card>#workshop-description,
 html[data-text-style] .workshop-card .workshop-continue{display:none}
 html[data-text-style] .workshop-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:10px 0 0}
 html[data-text-style] .workshop-models button{font-size:12px;padding:7px 8px;text-align:left;min-height:44px}
}

/* Wordmark on the same glass as the tabs, so it reads in every room (the Table used dark ink with no backing). */
html[data-text-style] body:not(.scene-reading) .site-header .wordmark{color:var(--ts-fg);background:var(--ts-bg);border:1px solid var(--ts-border);border-radius:999px;padding:3px 16px 6px;flex-shrink:0;box-shadow:var(--ts-shadow);-webkit-backdrop-filter:var(--ts-blur);backdrop-filter:var(--ts-blur);text-shadow:0 1px 8px #0b161f73}
html[data-text-style] body:not(.scene-reading) .site-header .wordmark span{color:var(--ts-accent)}
/* Between phone and desktop, shorter tab names keep the tab bar clear of the wordmark. */
@media(min-width:561px) and (max-width:960px){html[data-text-style] .nav-article{display:none}}
@media(max-width:560px){html[data-text-style] body:not(.scene-reading) .site-header .wordmark{padding:3px 13px 6px}}
/* Phones: the room runs the full screen height, so the header drops its cream fade; the logo and tabs keep their own glass. */
@media(max-width:560px){html[data-text-style] body:not(.scene-reading) .site-header{background:none}}

/* About wall (build-plan 19.1): the story scrolls up the open wall to the right of the shelves;
   on phones and tablets it sits below them. Room buttons step aside while the wall is in view. */
html[data-about-wall] #living-hotspots{opacity:0;pointer-events:none;visibility:hidden}
#living-hotspots{transition:opacity .4s}
html[data-text-style][data-about-wall] .about-story[data-stage="story"]{left:auto;right:max(24px,5vw);top:150px;bottom:110px;width:min(430px,36vw);max-width:none;height:auto;padding:20px 26px 34px}
html[data-text-style][data-about-wall] .about-story[data-stage="story"] #about-story-text{font-size:20px;line-height:1.45}
@media(max-width:900px){
 html[data-text-style][data-about-wall] .about-story[data-stage="story"]{left:24px;right:24px;top:auto;bottom:100px;width:auto;height:min(40vh,340px)}
}
@media(max-width:560px){
 html[data-text-style][data-about-wall] .about-story[data-stage="story"]{left:16px;right:16px;bottom:96px;height:min(38vh,320px);padding:14px 18px 30px}
 html[data-text-style][data-about-wall] .about-story[data-stage="story"] #about-story-text{font-size:17px;line-height:1.4}
}