/* v8: clear page flow, visible choices, native swipe browsing. */
:root { --browse-line: #ccd9cb; --browse-muted: #58675a; }
.hero-sub { max-width: 40ch; }
#builds, #ai, .more-tools, #sites, #analytics { padding-block:clamp(64px,7vw,104px); }
#builds .sec-head, .more-tools .sec-head, #sites .sec-head { margin-bottom:32px; }
.sec-intro { text-wrap:pretty; }
.more-tools { background:var(--paper); --accent:var(--green-deep); }
.browse-tabs { display:grid; gap:10px; margin:0 0 28px; padding:0; }
.browse-tabs button { position:relative; appearance:none; text-align:left; font-family:var(--font-body); color:var(--ink); border:1px solid var(--browse-line); background:transparent; cursor:pointer; transition:background var(--dur-feedback) ease,border-color var(--dur-feedback) ease,color var(--dur-feedback) ease; }
.app-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
.app-tabs button { min-height:94px; border-radius:14px; padding:19px 35px 17px 18px; }
.app-tabs button > span { display:block; font-weight:650; font-size:16px; line-height:1.3; letter-spacing:-.02em; }
.app-tabs small { display:block; margin-top:7px; font-size:13px; color:var(--browse-muted); }
.app-tabs i { position:absolute; top:18px; right:14px; font-style:normal; color:var(--green-deep); }
.browse-tabs button[aria-selected="true"] { background:var(--green-deep); color:#fff; border-color:var(--green-deep); }
.app-tabs button[aria-selected="true"] small, .app-tabs button[aria-selected="true"] i { color:#d1edc8; }
.browse-tabs button:not([aria-selected="true"]):hover { background:#e5eddc; border-color:#769875; }
.browse-tabs button:focus-visible, .rail-tools button:focus-visible, .browse-rail:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.tabs-ready [data-tab-panel][hidden] { display:none !important; }
[data-tab-panel] { scroll-margin-top:110px; }
[data-tab-panel]:focus { outline:none; }
/* Animate the arriving view only: rapid switches always reveal the latest selection. */
.tabs-ready [data-tab-panel]:not([hidden]) {
  animation:browse-panel-in var(--dur-base) var(--ease-standard);
}
@keyframes browse-panel-in {
  from { opacity:0; transform:translate3d(0,12px,0); }
  to { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  .tabs-ready [data-tab-panel]:not([hidden]) { animation:none; }
}
.app-browser { min-width:0; }
.app-browser .product-story { display:block; padding:28px 0 0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.app-browser .product-story + .product-story { margin-top:40px; border-top:1px solid var(--browse-line); }
.app-browser.tabs-ready .product-story { margin-top:0; border-top:0; }
.app-browser .story-head { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:18px 50px; margin:0 0 26px; }
.app-browser .story-head h3 { font-size:clamp(30px,3.5vw,44px); line-height:1.08; letter-spacing:-.045em; max-width:20ch; margin:12px 0 0; }
.app-browser .story-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0; }
.app-browser .story-kicker .bld-name { font-size:13px; font-family:var(--font-mono); font-weight:500; color:var(--green-deep); }
.app-browser .story-kicker .bld-tag { display:none; }
.app-browser .story-head .bld-desc { font-size:16px; line-height:1.65; max-width:44ch; margin:4px 0 12px; }
.app-browser .story-link { display:inline-flex; gap:8px; font-size:14px; padding-block:8px; margin:0; }
.app-browser .story-source { margin:14px 0 0; font:12px/1.6 var(--font-body); color:var(--browse-muted); }
/* All scrolling is native. Controls enhance it; they do not replace touch or keyboard. */
.rail-shell { min-width:0; position:relative; }
.rail-tools { display:none; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 15px; }
.rail-ready > .rail-tools { display:flex; }
.rail-hint { margin-right:auto; font:500 11px var(--font-mono); text-transform:uppercase; letter-spacing:.09em; color:var(--browse-muted); }
.rail-status { font:12px var(--font-mono); color:var(--browse-muted); margin-right:10px; font-variant-numeric:tabular-nums; }
.rail-tools button { display:grid; place-items:center; border:1px solid var(--browse-line); border-radius:50%; background:transparent; color:var(--green-deep); width:44px; height:44px; font:20px var(--font-body); cursor:pointer; flex-shrink:0; }
.rail-tools button:hover:enabled { background:var(--green-deep); color:#fff; border-color:var(--green-deep); }
.rail-tools button:disabled { opacity:.3; cursor:default; }
.browse-rail { display:flex; gap:20px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#9bae93 transparent; padding:4px 0 14px; min-width:0; align-items:stretch; }
.browse-rail > .browse-item { flex:0 0 calc((100% - 40px)/3); min-width:0; scroll-snap-align:start; scroll-snap-stop:normal; margin:0; }
.app-browser .screen-card { display:flex; flex-direction:column; align-self:stretch; gap:0; border-radius:16px; overflow:hidden; border:1px solid #d2ddcc; background:#eaf0e3; }
.app-browser .screen-card figcaption { padding:20px 20px 18px; text-align:left; }
.app-browser .screen-card h4 { font-size:20px; font-weight:650; line-height:1.2; letter-spacing:-.025em; margin:8px 0; color:var(--ink); }
.app-browser .screen-card p { font-size:14px; line-height:1.55; color:var(--browse-muted); margin:0; }
.app-browser .story-number { font-size:10px; letter-spacing:.065em; color:var(--green-deep); }
.app-browser .screen-card .capture-detail { margin-top:8px; font-size:12px; }
.app-browser .capture-frame { display:flex; align-items:flex-start; justify-content:center; padding:4px 16px 20px; margin-top:auto; min-width:0; }
.app-browser .capture-frame :is(img, video) { display:block; position:static; width:100%; height:auto; max-height:440px; object-fit:contain; object-position:top center; border-radius:9px; box-shadow:0 8px 18px -12px #18391f55; }
.story-sarah .browse-rail > .browse-item { flex-basis:calc((100% - 60px)/3.4); }
.story-winbase .browse-rail > .browse-item { flex-basis:calc((100% - 20px)/2); }
.story-winbase .screen-card { background:#e7ebdd; }
.story-winbase .capture-frame :is(img, video) { max-height:none; }
/* Single wide card (one recording): Dharma and InVision. */
.app-browser :is(.story-dharma, .story-invision) .story-head { display:block; max-width:720px; }
.app-browser :is(.story-dharma, .story-invision) .story-head h3 { max-width:none; }
.app-browser :is(.story-dharma, .story-invision) .bld-desc { max-width:55ch; margin-top:14px; }
:is(.story-dharma, .story-invision) .browse-rail > .browse-item { flex-basis:100%; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; }
:is(.story-dharma, .story-invision) .screen-card figcaption { padding:30px; }
:is(.story-dharma, .story-invision) .screen-card h4 { font-size:clamp(24px,3vw,34px); max-width:20ch; }
:is(.story-dharma, .story-invision) .capture-frame { margin:0; padding:22px; }
:is(.story-dharma, .story-invision) .capture-frame :is(img, video) { max-height:480px; }
:is(.story-dharma, .story-invision) .rail-tools { display:none; }
/* InVision's recording is landscape (Dharma's is portrait), so its frame takes the wider column. */
.story-invision .browse-rail > .browse-item { grid-template-columns:1.25fr .75fr; }
/* Each AI capability has a scene and a concrete example, without repeating the app tour. */
.ai-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.ai-tabs button { border-radius:9px; padding:15px 12px; min-height:52px; font-size:14px; font-weight:550; text-align:center; }
.ai-browser .aimap-row { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:40px; padding:24px 0 0; border:0; }
.ai-browser .aimap-row + .aimap-row { margin-top:35px; }
.ai-browser.tabs-ready .aimap-row { margin-top:0; }
.ai-browser .aimap-text h3 { font-size:clamp(28px,3vw,38px); margin:0 0 14px; }
.ai-browser .aimap-text > .num { display:none; }
.ai-browser .aimap-description { font-size:16px; line-height:1.65; }
.ai-browser .proof-diagram { margin-top:24px; }
.ai-browser .proof-projects { display:flex; flex-wrap:wrap; gap:12px 24px; padding:0; }
.ai-browser .proof-projects li { flex:1 1 180px; padding:0; border:0; background:transparent; }
.ai-browser .proof-projects h4 { font-size:14px; margin:0 0 5px; }
.ai-browser .proof-projects p { font-size:13px; line-height:1.55; margin:0; }
.ai-browser .proof-projects a { display:inline-block; padding:8px 0; font-size:13px; margin:0; }
.ai-browser .proof-examples { margin-top:18px; }
/* The specialist projects retain their custom SVGs and clear outcomes. */
.tools-shell .bld { display:flex; flex-direction:column; border:1px solid var(--browse-line); border-radius:14px; box-shadow:none; background:#fff; transform:none; }
.tools-shell .bld-viz { height:185px; min-height:185px; aspect-ratio:auto; }
.tools-shell .bld-viz.is-mech { background:#eef3e8; }
.tools-shell .bld-viz .fp-mech { width:100%; height:100%; }
.tools-shell .bld-body { padding:20px; gap:10px; }
.tools-shell .bld-name { font-size:21px; }
.tools-shell .bld-desc { font-size:14px; line-height:1.6; }
.tools-shell .bld-more { margin:0; padding:0 20px 20px; border:0; }
.tools-shell .bld-more-in > p { font-size:12px; line-height:1.55; color:var(--browse-muted); margin:0; }
.tools-shell .bld-foot { margin-top:auto; padding:12px 20px; }
.websites-shell .web-card { flex-basis:calc((100% - 40px)/3); border-radius:14px; }
.websites-shell .web-shot { height:270px; aspect-ratio:auto; }
.websites-shell .web-meta { padding:18px 16px; }
.websites-shell .w-name { font-size:17px; }
.websites-shell .web-card.is-cta { min-height:350px; }
/* Keep the background useful, with detailed models available in one row. */
#analytics .analyst-grid { gap:40px; }
#analytics .quote-block blockquote { font-size:clamp(25px,2.6vw,36px); }
#analytics .quote-block > p { font-size:15px; line-height:1.7; }
#analytics .sheet-more { margin-top:40px; }
#analytics .sheet-more > h3 { font-size:23px; }
#analytics .sm-note { font:12px/1.6 var(--font-body); margin:10px 0 20px; }
.models-shell .browse-item { flex-basis:calc((100% - 20px)/2); }
.models-shell .sheet { overflow-x:auto; }
.models-shell .sheet-caption { font-size:13px; }
#analytics .receipts { margin-top:35px; }
.approach { padding-block:70px; }
.approach .sec-title { font-size:clamp(32px,4vw,52px); }
.approach .rule-viz { height:72px; width:72px; margin-bottom:12px; }
.approach .rule-viz .fp-mech { height:72px; width:72px; }
.approach .principle { padding:22px; }
.approach .principle p { font-size:15px; line-height:1.65; }
@media (max-width:1000px) {
 .app-tabs button { padding:16px 28px 15px 14px; }
 .app-tabs button > span { font-size:14px; }
 .app-tabs small { font-size:12px; }
 .browse-rail > .browse-item, .story-sarah .browse-rail > .browse-item { flex-basis:calc((100% - 30px)/2.3); }
 .story-winbase .browse-rail > .browse-item { flex-basis:74%; }
 :is(.story-dharma, .story-invision) .browse-rail > .browse-item { flex-basis:100%; }
 .websites-shell .web-card { flex-basis:calc((100% - 30px)/2.3); }
 .ai-browser .aimap-row { gap:28px; }
}
@media (max-width:720px) {
 .hero-sub { font-size:17px; }
 .app-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:22px; }
 .app-tabs button { min-height:84px; border-radius:11px; }
 .app-tabs button > span { font-size:14px; }
 .app-tabs small { margin-top:6px; font-size:12px; }
 .app-browser .product-story { padding-top:12px; }
 .app-browser .story-head { display:block; margin-bottom:18px; }
 .app-browser .story-head h3 { font-size:32px; margin:10px 0 12px; max-width:19ch; }
 .app-browser .story-head .bld-desc { font-size:15px; margin:0 0 6px; }
 .rail-tools { margin-bottom:10px; }
 .rail-status { margin-right:4px; font-size:11px; }
 .browse-rail { gap:14px; padding-bottom:12px; }
 .browse-rail > .browse-item, .story-sarah .browse-rail > .browse-item, .story-winbase .browse-rail > .browse-item, .websites-shell .web-card, .models-shell .browse-item { flex-basis:87%; }
 .app-browser .screen-card figcaption { padding:18px 16px 15px; }
 .app-browser .screen-card h4 { font-size:20px; }
 .app-browser .capture-frame { padding:0 12px 16px; }
 .app-browser .capture-frame :is(img, video) { max-height:420px; }
 .story-winbase .capture-frame :is(img, video) { max-height:none; }
 :is(.story-dharma, .story-invision) .browse-rail > .browse-item { display:block; flex-basis:100%; }
 :is(.story-dharma, .story-invision) .screen-card h4 { font-size:25px; max-width:none; }
 :is(.story-dharma, .story-invision) .capture-frame :is(img, video) { max-height:480px; }
 .ai-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
 .ai-tabs button { flex:1 1 calc(33.33% - 8px); min-height:48px; padding:10px; font-size:12px; }
 .ai-tabs button:nth-child(n+4) { flex-basis:calc(50% - 8px); }
 .ai-browser .aimap-row { grid-template-columns:1fr; gap:24px; padding-top:14px; }
 .ai-browser .aimap-text h3 { font-size:29px; max-width:22ch; }
 .ai-browser .aimap-description { font-size:15px; }
 .ai-browser .proof-diagram { margin-top:18px; }
 .ai-browser .proof-projects { gap:12px; }
 .ai-browser .proof-projects li { flex-basis:100%; }
 .tools-shell .bld-viz { height:165px; min-height:165px; }
 .websites-shell .web-shot { height:255px; }
 #analytics .analyst-grid { gap:24px; }
 #analytics .sheet-more > h3 { font-size:21px; }
 .approach .principles { gap:12px; }
 .approach .principle { display:grid; grid-template-columns:58px 1fr; column-gap:16px; padding:18px 0; }
 .approach .rule-viz { grid-row:1 / 4; height:58px; width:58px; margin:0; }
 .approach .rule-viz .fp-mech { width:58px; height:58px; }
 .approach .principle > .num { display:none; }
 .approach .principle h3 { margin:0 0 8px; font-size:20px; }
 .approach .principle p { margin:0; }
}
@media (prefers-reduced-motion:reduce) { .browse-tabs button { transition:none; } .browse-rail { scroll-behavior:auto; } }
/* Neutral panel surface; color belongs to the screenshots and selected tab. */
.app-browser .product-story { background:transparent !important; }
.browse-rail > a:focus-visible { outline:3px solid var(--green-deep); outline-offset:-3px; }
.models-shell .sheet-label { display:block; font:500 11px/1.5 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--green-deep); margin-bottom:9px; }
.models-shell .sheet { overflow:hidden; }
.models-shell .sheet table { min-width:0; width:100%; table-layout:fixed; }
.models-shell .sheet th, .models-shell .sheet td { padding:7px 5px; white-space:normal; overflow-wrap:anywhere; font-size:10px; }
.models-shell .sheet th { width:19px; }
.models-shell .sheet-tabs { flex-wrap:wrap; }
.models-shell .sheet-tabs span { padding:4px 6px; font-size:10px; }
@media(max-width:720px) { .models-shell .sheet th, .models-shell .sheet td { padding:6px 3px; font-size:9px; } }
/* Keep mobile UI at the card's full width rather than shrinking tall screens. */
.app-browser .story-sarah .capture-frame :is(img, video), .app-browser .story-voice .capture-frame :is(img, video) { max-height:none; }
/* Shorter screenshots keep their natural card height; no empty stretched panels. */
.app-browser .screen-card { align-self:flex-start; }
.app-browser .capture-frame { margin-top:0; }
.app-browser .screen-card figcaption { min-height:120px; }
.cursor-dot, .cursor-ring { display:none; }
/* Websites form a real, fully visible gallery. No horizontal browsing needed. */
.website-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.website-gallery .web-card { min-width:0; border-radius:14px; }
.website-gallery .web-shot { height:260px; aspect-ratio:auto; }
.website-gallery .web-meta { display:flex; flex-wrap:wrap; gap:6px 12px; padding:17px 16px; }
.website-gallery .w-name { font-size:18px; }
.website-gallery .web-card.is-cta { min-height:310px; }
@media(max-width:1000px) {
 .website-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
}
@media(max-width:720px) {
 .app-tabs button { padding:13px 14px; }
 .ai-tabs button { padding:11px 12px; font-size:12px; }
 .rail-tools { flex-wrap:wrap; gap:7px; }
 .rail-tools .rail-hint { flex-basis:100%; margin-bottom:2px; font-size:10px; }
 .rail-tools .rail-status { margin-right:auto; }
 .website-gallery { gap:18px 12px; }
 .website-gallery .web-shot { height:180px; }
 .website-gallery .web-chrome { height:24px; padding:0 8px; }
 .website-gallery .web-url { font-size:8px; }
 .website-gallery .web-meta { display:block; padding:12px 10px; }
 .website-gallery .w-name { display:block; font-size:15px; line-height:1.25; padding-right:8px; }
 .website-gallery .w-tag { display:block; margin-top:5px; font-size:10px; line-height:1.3; }
 .website-gallery .w-arrow { font-size:13px; right:8px; }
 .website-gallery .web-card.is-cta { min-height:260px; }
 .website-gallery .w-plus { padding:18px 12px; }
 .website-gallery .w-plus b { font-size:20px; }
}
.website-gallery .web-url { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* One selector above the work. Screenshot navigation stays with the screenshots. */
.browse-navigation { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--browse-line); margin:0 0 24px; }
.browse-navigation .browse-tabs { display:grid; flex:1; min-width:0; gap:4px; margin:0; }
.browse-navigation .app-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
.browse-navigation .ai-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
.browse-navigation .browse-tabs button { position:relative; min-height:66px; min-width:0; padding:12px 10px; border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; color:var(--browse-muted); }
.browse-navigation .browse-tabs button::after { content:''; position:absolute; inset:auto 8px -1px; height:3px; border-radius:3px 3px 0 0; background:transparent; }
.browse-navigation .browse-tabs button[aria-selected="true"] { background:transparent; color:var(--green-deep); }
.browse-navigation .browse-tabs button[aria-selected="true"]::after { background:var(--green-deep); }
.browse-navigation .browse-tabs button:hover { background:#edf2e7; }
.browse-navigation .app-tabs button > span { font-size:15px; font-weight:650; letter-spacing:-.025em; }
.browse-navigation .app-tabs small { color:var(--browse-muted); font-size:12px; margin-top:5px; }
.browse-navigation .app-tabs button[aria-selected="true"] small { color:var(--green-deep); }
.view-switcher { display:none; align-self:center; flex:0 0 44px; }
.tabs-ready .view-switcher { display:block; }
.view-rotation { position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--browse-line); border-radius:50%; background:transparent; color:var(--green-deep); font:18px var(--font-body); cursor:pointer; overflow:hidden; }
.view-rotation::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--green); transform:scaleX(0); transform-origin:left; }
.tour-running .view-rotation::after { animation:tour-progress var(--tour-duration) linear forwards; }
@keyframes tour-progress { to { transform:scaleX(1); } }
.view-rotation:focus-visible, .rail-dots button:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.app-browser .story-head { margin-bottom:20px; }
.app-browser .story-head h3 { margin-top:0; }
.app-browser .story-kicker { display:none; }
.app-browser .story-head .bld-desc { margin:0; }
.app-browser .screen-card figcaption { min-height:0; padding:16px 18px 18px; }
.app-browser .screen-card .story-number { display:none; }
.app-browser .screen-card h4 { margin:0 0 7px; }
.app-browser .capture-frame { padding:12px 12px 0; }
.app-browser .story-footer { display:flex; justify-content:space-between; align-items:center; gap:12px 24px; margin-top:12px; }
.app-browser .story-footer .story-source { margin:0; }
.app-browser .story-footer .story-link { flex-shrink:0; }
.screens-shell .rail-tools { justify-content:center; flex-wrap:nowrap; gap:16px; margin:8px 0 0; }
.screens-shell .rail-status { display:none; }
.screens-shell .rail-tools button { width:44px; min-width:44px; height:44px; border-radius:50%; padding:0; font:18px var(--font-body); background:transparent; color:var(--green-deep); }
.screens-shell .rail-tools button:disabled { visibility:hidden; }
.screens-shell.rail-ready:not(.has-overflow) > .rail-tools { display:none; }
.rail-dots { display:flex; justify-content:center; gap:0; }
.screens-shell .rail-dots button { display:grid; place-items:center; width:30px; min-width:30px; height:44px; border:0; background:transparent; }
.rail-dots button::after { content:''; display:block; width:6px; height:6px; border-radius:8px; background:#adbea6; }
.rail-dots button[aria-current="true"]::after { width:20px; background:var(--green-deep); }
@media(max-width:720px) {
 .browse-navigation { gap:3px; margin-bottom:22px; }
 .browse-navigation .browse-tabs { gap:0; }
 .browse-navigation .browse-tabs button { padding:10px 3px; min-height:62px; }
 .browse-navigation .app-tabs button > span { font-size:12px; white-space:nowrap; }
 .browse-navigation .app-tabs small { font-size:10px; margin-top:5px; }
 .browse-navigation .ai-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
 .browse-navigation .ai-tabs button { min-height:48px; padding:10px 2px; font-size:12px; border-radius:0; line-height:1.3; white-space:nowrap; }
 .browse-navigation .ai-tabs button[aria-selected="true"] { background:transparent; font-weight:650; }
 .browse-navigation .ai-tabs button::after { display:block; }
 .ai-browser .browse-navigation { align-items:center; padding-bottom:0; }
 .ai-browser .view-switcher { align-self:center; }
 .app-browser .story-head h3 { font-size:29px; margin-bottom:10px; }
 .app-browser .story-footer { align-items:flex-start; flex-direction:column-reverse; gap:6px; }
 .app-browser .screen-card h4 { font-size:18px; }
 .app-browser .screen-card figcaption p { font-size:13px; }
 .app-browser :is(.story-dharma, .story-invision) .screen-card { display:flex; }
}
@media(prefers-reduced-motion:reduce) { .tour-running .view-rotation::after { animation:none; } }
/* Five app tabs clip their names in one row on a phone ("Voice Brain" needs ~81px, a fifth of the track is ~54px).
   Phones get the AI selector's layout (v12 upgrade.css section 10): three per row, the pause button in the empty
   sixth cell. Insets match the track: 4px padding (v10 refine.css) + 1px border, 3px gaps (v9 tabs.css). */
@media(max-width:720px) {
 .app-browser .browse-navigation { position:relative; display:block; }
 .app-browser .browse-navigation .app-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .app-browser.tabs-ready .browse-navigation .view-switcher { position:absolute; right:5px; bottom:5px; width:calc((100% - 16px) / 3); height:54px; display:flex; align-items:center; justify-content:center; margin:0; }
}

/* Final rhythm pass: one navigation row and one carousel position indicator. */
.screens-shell .browse-rail { scrollbar-width:none; padding-bottom:0; }
.screens-shell .browse-rail::-webkit-scrollbar { display:none; }
.screens-shell .rail-tools { margin-top:8px; gap:12px; }
.app-browser .story-footer { margin-top:8px; }
.app-browser .story-source { font-size:11px; line-height:1.55; max-width:58ch; }
.app-browser .story-footer .story-link { min-height:44px; font-size:13px; gap:6px; padding-block:8px; }
.ai-browser .aimap-row { padding-top:8px; }
.browse-navigation .browse-tabs button[aria-selected="true"] { font-weight:650; }
@media(max-width:720px) {
 .app-browser .story-footer { gap:2px; }
 .ai-browser .browse-navigation { margin-bottom:22px; }
 .ai-browser .aimap-row { padding-top:4px; }
 .screens-shell .rail-tools { gap:10px; }
 .app-browser .story-source { font-size:11px; }
}
@media(max-width:360px) {
 .browse-navigation .ai-tabs button { font-size:10px; }
 .browse-navigation .app-tabs button > span { font-size:11px; }
}
/* The active tab owns its countdown; no second timer on the pause button. */
.view-rotation::after { display:none; }
.browse-navigation .browse-tabs button[aria-selected="true"]::after { height:4px; background:#c5d9bc; }
.browse-navigation .browse-tabs button > .tab-timer { display:none; position:absolute; z-index:1; left:8px; right:8px; bottom:-1px; height:4px; margin:0; border-radius:4px; background:var(--green-deep); transform:scaleX(var(--tab-progress,0)); transform-origin:left; pointer-events:none; }
.browse-navigation .browse-tabs button[aria-selected="true"] > .tab-timer { display:block; }
/* Arrow-only controls: fixed hit areas, no wrapping text, stable alignment. */
.rail-shell .rail-tools > button[data-rail-prev],
.rail-shell .rail-tools > button[data-rail-next] { display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; max-width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--browse-line); border-radius:50%; background:transparent; color:var(--green-deep); line-height:1; overflow:hidden; }
.rail-shell .rail-tools > button:hover:enabled { background:var(--green-deep); color:white; border-color:var(--green-deep); }
.rail-tools .rail-chevron { display:block; width:20px; height:20px; flex:none; pointer-events:none; }
.tools-shell .rail-tools, .models-shell .rail-tools { flex-wrap:nowrap; gap:8px; min-height:44px; }
.tools-shell .rail-hint, .models-shell .rail-hint { display:none; }
.tools-shell .rail-status, .models-shell .rail-status { margin:0 auto 0 0; font-size:12px; }

/* ---------- hover-only transforms (Task 2 gate: touch devices fire false
   hovers on tap, so any hover rule that moves something only applies where
   a real hover input exists) ---------- */
@media (hover: hover) {
  .tools-shell .bld:hover { transform:none; }
  .websites-shell .web-card:hover { transform:none; }
}