/* SIPSIK locked front-page and quiet reader chrome, 2026-09-06 */

/* Front page: the approved layout authority sits beside Golden Visual Standard v1.
   Production cover.png must be a direct non-generative derivative of the raw cover photo. */
.home{padding:calc(14px + var(--safe-top)) 18px calc(22px + var(--safe-bottom));}
.home-shell{width:min(100%,520px);}
.home-cover-wrap{height:clamp(330px,48dvh,500px);padding:0 6px 18px;overflow:visible;}
.home-cover-wrap::before{display:none;}
.cover-art{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;box-shadow:none;}
.home-panel{padding:0;}
.door-stack{gap:10px;}
.cover-door{position:relative;min-height:76px;padding:14px 46px 14px 17px;border-radius:20px;background:rgba(255,255,255,.32);box-shadow:none;}
.cover-door::after{content:'›';position:absolute;right:18px;top:50%;transform:translateY(-52%);font:300 31px/1 Georgia,"Times New Roman",serif;color:var(--muted);}
.door-title{font-size:clamp(24px,7vw,30px);line-height:1.05;font-weight:600;}
.door-copy{font:400 15px/1.35 ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.home-language{margin:15px 0 0;padding:14px 4px 0;justify-content:space-between;border-top:1px solid var(--line);font:700 16px/1 ui-sans-serif,system-ui,sans-serif;color:var(--ink);}
.home-language select{min-width:126px;padding:11px 34px 11px 15px;border-radius:18px;background:rgba(255,255,255,.28);font:400 16px/1 ui-sans-serif,system-ui,sans-serif;color:var(--ink);}

/* Reader: one continuous scroll. Each picture is sticky inside its own story
   section, so the next picture pushes it away at the locked handoff. */
.reader{position:relative;display:block;}
.reader-footer{display:none!important;}
.story-scroller{height:100dvh;overflow-y:auto;overscroll-behavior-y:contain;background:var(--surface);}
.story{width:100%;max-width:none;margin:0;padding:0;}
.story-segment{position:relative;width:100%;}
.segment-art{position:sticky;top:0;z-index:2;height:clamp(255px,42dvh,430px);margin:0;display:flex;align-items:center;justify-content:center;padding:calc(8px + var(--safe-top)) 14px 8px;background:var(--surface);overflow:hidden;}
.segment-art-surface{position:relative;width:min(100%,760px);height:100%;display:flex;align-items:center;justify-content:center;isolation:isolate;}
.segment-art-surface::before{content:'';position:absolute;z-index:-1;inset:7% 5%;border-radius:34%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--art-wash) 38%,transparent) 0 48%,transparent 78%);filter:blur(18px);}
.segment-art-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none;}
.segment-copy{position:relative;z-index:1;width:min(100%,700px);margin:0 auto;padding:20px 26px 46px;background:var(--surface);}
.segment-copy .chapter-heading{margin-top:4px;}
.art-stage{display:none!important;}
.listen-visual{position:relative;isolation:isolate;overflow:hidden;}
.listen-visual::before{content:'';position:absolute;z-index:-1;inset:7% 5%;border-radius:34%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--art-wash,#c7bda8) 38%,transparent) 0 48%,transparent 78%);filter:blur(18px);}
.listen-art{object-fit:contain;}

/* Invisible corner discovery zones. On touch, first contact reveals the control;
   on pointer devices, hovering the corner reveals it. */
.segment-art{cursor:pointer;}
.segment-art:focus-visible{outline:2px solid var(--ink);outline-offset:-3px;}
.reader-corner-zone{position:absolute;top:0;z-index:25;width:78px;height:78px;padding-top:calc(10px + var(--safe-top));display:flex;align-items:flex-start;pointer-events:auto;}
.reader-corner-zone-left{left:0;padding-left:12px;justify-content:flex-start;}
.reader-corner-zone-right{right:0;padding-right:12px;justify-content:flex-end;}
.reader-corner-button{width:42px;height:42px;border:0;border-radius:50%;background:rgba(247,244,238,.90);color:#6d665f;display:grid;place-items:center;opacity:0;transform:scale(.94);pointer-events:none;transition:opacity .15s ease,transform .15s ease,background .15s ease;box-shadow:0 1px 8px rgba(42,35,31,.035);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.reader-corner-zone.is-visible .reader-corner-button,.reader-corner-button:focus-visible{opacity:1;transform:scale(1);pointer-events:auto;}
.reader-back-button{font:300 38px/.8 Georgia,"Times New Roman",serif;padding:0 2px 5px 0;}
.reader-more-button{font:700 15px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:2px;padding:0 0 8px 2px;}

.reader-quick-menu,.reader-quick-submenu{position:absolute;z-index:28;right:14px;top:calc(60px + var(--safe-top));border:1px solid var(--line);background:var(--menu-surface);box-shadow:0 12px 34px rgba(43,36,32,.10);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);}
.reader-quick-menu{display:grid;grid-template-columns:repeat(4,48px);gap:4px;padding:6px;border-radius:22px;}
.quick-icon-button{width:48px;height:48px;border:0;border-radius:16px;background:transparent;display:grid;place-items:center;font:600 19px/1 Georgia,"Times New Roman",serif;color:var(--ink);}
.quick-icon-button:active,.quick-icon-button[aria-pressed="true"]{background:rgba(70,58,49,.07);}
.quick-icon-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.quick-progress-button{grid-column:1/-1;min-height:43px;border:0;border-top:1px solid var(--line);background:transparent;padding:9px 8px 3px;display:grid;gap:7px;text-align:left;color:var(--muted);font:650 11px/1.2 ui-sans-serif,system-ui,sans-serif;}
.quick-progress-track{display:block;height:3px;border-radius:99px;background:var(--line);overflow:hidden;}
.quick-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--ink);transition:width .18s ease;}

.reader-quick-submenu{top:calc(120px + var(--safe-top));min-height:54px;border-radius:19px;padding:6px;}
.reader-text-submenu{display:grid;grid-template-columns:48px 62px 48px;align-items:center;}
.reader-text-submenu button{height:42px;border:0;border-radius:13px;background:transparent;font:600 16px/1 ui-sans-serif,system-ui,sans-serif;}
.reader-text-submenu output{text-align:center;font:600 11px/1 ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.reader-background-submenu{display:flex;align-items:center;gap:7px;padding:9px;}
.reader-language-submenu{display:block;min-width:190px;}
.reader-language-submenu select{width:100%;min-height:42px;border:0;border-radius:13px;background:transparent;padding:0 34px 0 12px;font:650 13px/1 ui-sans-serif,system-ui,sans-serif;}
.quick-language-status{padding:2px 12px 9px;color:var(--muted);font:600 10px/1.3 ui-sans-serif,system-ui,sans-serif;}
.quick-theme-dot{width:34px;height:34px;border-radius:50%;border:1px solid rgba(47,42,39,.16);position:relative;}
.quick-theme-dot[data-quick-theme="white"]{background:#fff;}
.quick-theme-dot[data-quick-theme="ivory"]{background:#fbfaf5;}
.quick-theme-dot[data-quick-theme="paper"]{background:#f7f1e5;}
.quick-theme-dot[data-quick-theme="gray"]{background:#f3f1ee;}
.quick-theme-dot[data-quick-theme="dark"]{background:#201e1c;}
.quick-theme-auto{display:grid;place-items:center;background:linear-gradient(135deg,#fff 0 49%,#201e1c 51% 100%);color:#6d625b;text-shadow:0 1px 1px #fff;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;}
.quick-theme-dot[aria-checked="true"]::after{content:'';position:absolute;inset:5px;border:1.5px solid #544840;border-radius:50%;}
.quick-theme-dot[data-quick-theme="dark"][aria-checked="true"]::after{border-color:#f4eee8;}
.reader-audio-submenu{width:min(270px,calc(100vw - 28px));display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:8px;}
.quick-listen-button{min-height:44px;border:0;border-radius:13px;background:var(--ink);color:var(--surface);padding:0 14px;font:700 12px/1.2 ui-sans-serif,system-ui,sans-serif;}
.quick-rate-controls{display:grid;grid-template-columns:38px 46px 38px;align-items:center;}
.quick-rate-controls button{width:38px;height:40px;border:0;border-radius:12px;background:transparent;font:700 18px/1 ui-sans-serif,system-ui,sans-serif;}
.quick-rate-controls output{text-align:center;color:var(--ink);font:700 11px/1 ui-sans-serif,system-ui,sans-serif;}
.reader-contents-submenu{width:min(290px,calc(100vw - 28px));max-height:min(58dvh,430px);overflow:auto;padding:8px;}
.quick-submenu-title{padding:8px 10px 9px;color:var(--muted);font:700 10px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;}
#quickChapterList{display:grid;gap:3px;}
.quick-chapter-button{width:100%;min-height:44px;border:0;border-radius:13px;background:transparent;padding:8px 10px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px;text-align:left;color:var(--ink);font:650 12px/1.25 ui-sans-serif,system-ui,sans-serif;}
.quick-chapter-button[aria-current="true"]{background:color-mix(in srgb,var(--ink) 8%,transparent);}
.quick-chapter-number{color:var(--muted);font-size:10px;}

@media(max-height:700px){
  .home-cover-wrap{height:clamp(270px,43dvh,350px);padding-bottom:12px;}
  .cover-door{min-height:66px;padding-top:11px;padding-bottom:11px;}
  .door-title{font-size:clamp(21px,6vw,27px);}
  .door-copy{font-size:13px;}
  .home-language{margin-top:10px;padding-top:10px;}
  .segment-art{height:clamp(220px,38dvh,300px);}
}

@media(min-width:760px){
  .home-shell{width:min(62vw,590px);}
  .home-cover-wrap{height:min(54dvh,530px);}
  .reader-corner-zone{width:92px;height:92px;}
  .segment-art{height:clamp(300px,45dvh,470px);padding-left:36px;padding-right:36px;}
  .segment-copy{padding:28px 42px 54px;}
}

@media(prefers-reduced-motion:reduce){
  .reader-corner-button{transition:none;}
}
/* Dzongkha needs Tibetan shaping and generous vertical room for stacked letters. */
.story:lang(dz),.listen-chapter:lang(dz){font-family:'Noto Serif Tibetan','Kailasa','Microsoft Himalaya',serif;line-height:1.95;word-break:normal;overflow-wrap:anywhere;}
.story:lang(dz) .story-paragraph{line-height:1.95;}
.story:lang(dz) h2{line-height:1.8;}
.reader-audio-submenu .voice-label,.reader-audio-submenu select,.reader-audio-submenu .voice-status{grid-column:1/-1;}
.reader-audio-submenu select,.listen-voice select{width:100%;max-width:100%;min-height:42px;border:1px solid var(--line);border-radius:8px;padding:7px;background:var(--surface);color:var(--ink);font:14px/1.3 system-ui,sans-serif;}
.voice-label,.listen-voice label{font:12px/1.5 system-ui,sans-serif;color:var(--muted);}
.voice-status{margin:2px 0 6px;font:12px/1.5 system-ui,sans-serif;color:var(--muted);overflow-wrap:anywhere;}
.listen-stage{grid-template-rows:auto minmax(0,1fr) auto auto auto;}
.listen-voice{width:min(100%,520px);margin:auto;padding:0 18px;box-sizing:border-box;}
button:disabled{opacity:.5;cursor:not-allowed;}