/* Shalawam · Quiet flame interface refinement.
   Web: ENTRY-01, TODAY-01/02, READ-01/02/03, LEARN, EXPLORE, STUDY,
   LIBRARY and existing utility screens. Presentation only: corpus and local stores stay owned
   by their existing modules. Colors, typography and artwork use the approved brand assets. */
:root {
  --ui-space: clamp(var(--s5), 3vw, var(--s7));
  --ui-context: 276px;
  --ui-context-gap: var(--s6);
  --ui-reading: 40rem;
  --ui-control-radius: var(--r-sm);
}

/* One calm canvas. Existing morning/evening content supplies the change in rhythm. */
body[data-mode] { background: var(--night); }
.horizon { background: var(--line); opacity: 1; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { touch-action: manipulation; }
:where(button, a, summary) { scroll-margin-block: var(--s6); }
:where(input, select, textarea) { max-width: 100%; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, dd, .obj-copy, .tile) { overflow-wrap: break-word; }
:where(button, summary, select) { min-height: var(--tap); }
:where(.btn-primary, .btn-quiet, .hero-cta) { justify-content: center; }
:where(a, button, summary):focus-visible { outline-color: var(--bone); outline-offset: 4px; }

/* Application chrome: full labels on wide screens, established rail and phone tabs below. */
.side { gap: var(--s6); background: var(--sink); padding: var(--s6) var(--s4) var(--s5); }
.lockup { padding-inline: var(--s2); }
#nav { gap: var(--s2); }
#nav a, .side-set, .side-nb { border-radius: var(--r-sm); min-height: 48px; }
#nav a { gap: var(--s3); }
#nav a.on { background: var(--surface); color: var(--bone); box-shadow: inset 2px 0 var(--ember); }
.side-tag { line-height: 1.7; }
.toolbar { background: var(--night); padding-inline: var(--ui-space); gap: var(--s4); }
.tools { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.crumb { min-width: 0; line-height: 1.5; }
.search-open { background: var(--surface); border-radius: var(--ui-control-radius); min-height: var(--tap); }
.search-open:hover { border-color: var(--muted); }
.gear { flex-shrink: 0; }
.subnav { padding-inline: var(--ui-space); gap: var(--s5); }
.subnav a { padding-inline: var(--s1); }
.work main { padding: var(--s7) var(--ui-space) var(--s8); }
.view { gap: var(--s5); }
.view.with-context.on { grid-template-columns: minmax(0, 1fr) var(--ui-context); gap: var(--ui-context-gap); }
.col-main { gap: var(--s5); }
.greet { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -.02em; }
.eyebrow { font-size: .75rem; line-height: 1.5; }
.lede { line-height: 1.7; }
.context { padding: var(--s5); border-radius: var(--r-md); box-shadow: none; }
.context .place-h { font-family: var(--serif); font-size: 1.5rem; line-height: 1.35; }
.context .obj-row { gap: var(--s3); padding-block: var(--s4); }
.context .obj-copy b { font-size: .95rem; line-height: 1.5; }
.context .obj-copy small { font-size: .8125rem; line-height: 1.6; }
.place-foot { line-height: 1.6; }
.obj-copy { gap: var(--s1); }
.obj-copy small { line-height: 1.65; }
.obj-row { padding-block: var(--s4); }
.obj-row:hover { background: var(--raise); }
.obj-row:hover .obj-copy b { color: var(--bone); text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: .25em; }

/* Today: a real prayer invitation, an honest inquiry and the reader's actual continuation. */
#v-today .datewrap { padding-block: var(--s2); }
#v-today .datewrap > .eyebrow { margin-bottom: var(--s3); }
#v-today .greet { font-size: clamp(2rem, 2.8vw, 2.75rem); line-height: 1.25; }
#v-today .datewrap > p:not(.eyebrow) { flex-wrap: wrap; row-gap: var(--s2); line-height: 1.65; margin-top: var(--s3); }
#v-today .parsha-line { border-left: 2px solid var(--ember); padding: var(--s2) var(--s3); margin: 0; background: var(--raise); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.today-rhythm { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.mode { padding: var(--s1); gap: var(--s1); border-radius: var(--r-pill); }
.mode button { min-height: var(--tap); padding: var(--s2) var(--s4); border-radius: var(--r-pill); }
.mode button.on { color: var(--night); font-weight: 500; }
.chip { font-size: .8125rem; line-height: 1.6; padding: var(--s2) var(--s3); max-width: 100%; flex-wrap: wrap; }
#v-today .invite { max-width: none; margin: var(--s2) 0 0; padding: var(--s6); background: var(--surface); border: var(--hairline); border-radius: var(--r-md); box-shadow: none; }
.invite-lead { font-size: clamp(1.75rem, 2.5vw, 2.125rem); line-height: 1.45; max-width: 24ch; }
.invite .lede { font-size: var(--t-ui); max-width: 40ch; margin-top: var(--s3); }
.invite .nf-acts { margin-top: var(--s5); gap: var(--s3); }
#v-today .inquiry { border: 0; margin-top: var(--s3); padding: var(--s3) 0 0; }
.inquiry .eyebrow { margin-bottom: var(--s2); }
.inquiry h2 { font-size: var(--t-title); line-height: 1.35; }
.inquiry .lede { margin-top: var(--s2); font-size: .9375rem; }
.iq-list { background: var(--surface); border: var(--hairline); border-radius: var(--r-md); overflow: hidden; margin-top: var(--s5); }
.iq-list .obj-row { padding: var(--s5); gap: var(--s4); min-height: 96px; }
.iq-row > .ic:first-child { box-sizing: content-box; padding: var(--s3); background: var(--sink); border-radius: var(--r-sm); }
.iq-row > .ic:last-child { width: 16px; height: 16px; }
.iq-k { font-size: .6875rem; line-height: 1.5; margin-bottom: var(--s1); }
.iq-row .obj-copy b { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.45; }
.iq-row .obj-copy small { font-size: .8125rem; line-height: 1.65; }
.continue { margin-top: var(--s5); }
.continue .obj-list { border-top: var(--hairline); margin-top: var(--s3); }
#v-today > .context { margin-top: var(--s2); }

/* Read: a deliberate reading measure, no decorative container around the scripture. */
body[data-view="read"] .work main { width: 100%; max-width: 56rem; margin-inline: auto; }
.readbar { gap: var(--s4); margin-bottom: var(--s5); padding-bottom: var(--s5); border-bottom: var(--hairline); }
.passage { min-width: 0; gap: var(--s2); }
.passage select { min-height: var(--tap); border-radius: var(--ui-control-radius); }
.passage button { min-width: var(--tap); border-radius: var(--ui-control-radius); }
.layers { padding: var(--s1); border-radius: var(--r-sm); gap: var(--s1); }
.layers .hebtoggle { min-height: var(--tap); border-radius: var(--r-sm); }
#read-eyebrow, #read-title { max-width: var(--ui-reading); margin-inline: auto; width: 100%; }
#read-eyebrow { line-height: 1.6; }
#read-title { font-size: var(--t-display); margin-bottom: var(--s4); }
.reader, #read-cite, #read-attrib, #read-canon, #read-warn { width: 100%; max-width: var(--ui-reading); margin-inline: auto; }
.reader { padding-top: var(--s3); }
.reader .v { margin-bottom: var(--s5); font-size: 1.375rem; line-height: 1.95; padding-block: var(--s1); }
.reader .vn { min-height: 0; font-size: .75rem; line-height: 1.5; padding: var(--s1); margin-inline-end: var(--s2); }
.reader .v.sel { background: var(--raise); padding: var(--s3) var(--s4); }
.reader .v.sel .vacts { gap: var(--s2); margin-top: var(--s3); }
.reader .v.sel .vacts button { min-height: var(--tap); font-size: .8125rem; }
.reader .heb { margin-block: var(--s3); line-height: 1.95; }
.reader .hw { border-radius: var(--r-sm); }
.parsebar { border-radius: var(--r-md); padding: var(--s5); box-shadow: var(--shadow-lifted); }
.pb-top { padding-bottom: var(--s3); border-bottom: var(--hairline); margin-bottom: var(--s5); }
.pb-x { width: var(--tap); height: var(--tap); flex-shrink: 0; }
.pb-word { line-height: 1.5; }
.pb-def { font-family: var(--serif); font-size: 1.125rem; line-height: 1.7; margin-block: var(--s3); }
.pb-usage { font-size: .8125rem; line-height: 1.7; }
.pb-dl { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--s3); line-height: 1.65; }
.pb-dl dd { text-align: end; }
.pb-save { min-height: var(--tap); }
.pb-src { line-height: 1.6; }

/* Evidence: class, state, attribution and open questions retain their separate reading order. */
.card { border-radius: var(--r-md); box-shadow: none; padding: var(--s5); }
.ev { padding-inline-start: var(--s5); margin-bottom: var(--s6); }
.ev-stmt { font-size: 1.1875rem; line-height: 1.8; }
.ev-line { gap: var(--s2) var(--s3); line-height: 1.7; }
.tier, .state { white-space: normal; overflow-wrap: anywhere; max-width: 100%; line-height: 1.6; }
.ev-more > summary { padding-block: var(--s3); font-size: .875rem; }
.ev-body { gap: var(--s5); padding-top: var(--s5); }
.ev-sec > h4 { color: var(--muted); font-weight: 500; font-size: .75rem; line-height: 1.6; }
.ev-sup { padding: var(--s4); border-radius: var(--r-sm); }
.ev-cite, .ev-note { font-size: .875rem; line-height: 1.75; }
.ev-list { gap: var(--s3); }
.ev-list li { padding-inline-start: var(--s4); }
.ev-count { opacity: 1; }
.method { box-shadow: none; }
.method p, .method li { line-height: 1.8; }
.artcard { border-radius: var(--r-md); box-shadow: none; }
.artcard > summary { min-height: 72px; padding: var(--s5); }
.artcard[open] > summary { border-bottom: var(--hairline); }

/* Explore / appointed times: the actual reckoning lives beside the actual observance. */
.tiles { gap: var(--s5); }
.tile { min-height: 176px; padding: var(--s5); box-shadow: none; gap: var(--s3); }
.tile h2 { font-size: 1.625rem; line-height: 1.3; }
.tile p { font-size: .9375rem; line-height: 1.7; }
.tile > .ic { margin-bottom: var(--s2); }
.reckon-panel { padding: var(--s5); }
.reckon-panel .reckon { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
.reckon label { min-width: 0; line-height: 1.7; }
.reckon select { width: 100%; max-width: 100%; min-height: 48px; margin-top: var(--s2); border-radius: var(--r-sm); }
.reckon-panel .note { font-size: .875rem; line-height: 1.8; padding-top: var(--s4); border-top: var(--hairline); }
.feast-list { border-top: var(--hairline); }
.feast { box-shadow: none; }
.feast > summary { padding-block: var(--s5); gap: var(--s4); }
.feast .fbadge { border-radius: var(--r-sm); flex-shrink: 0; }
.feast .fl { min-width: 0; }
.feast .fl h3 { line-height: 1.4; }
.feast .dt { line-height: 1.6; }
.feastbody { padding: var(--s4) var(--s5) var(--s5); }
.lt-focus { padding: var(--s6); border-radius: var(--r-md); box-shadow: none; }
.lgrid { gap: var(--s3); }
.lgrid button { min-height: var(--tap); }
.shema { background: var(--surface); }
.shema .he { text-shadow: none; }
.maphost, .place-panel { border-radius: var(--r-md); box-shadow: none; }

/* Personal work and utility screens: useful empty states remain supplied by the real stores. */
.pin-card { border-radius: var(--r-md); box-shadow: none; padding: var(--s5); }
.lib-bar { margin-block: var(--s5) var(--s3); }
.seg { border-radius: var(--r-sm); flex-wrap: wrap; }
.seg button { min-height: var(--tap); border-radius: var(--r-sm); }
.saved-note, .nb-desc, .nb-note-text { line-height: 1.8; }
.nb-title { font-family: var(--serif); line-height: 1.3; }
.nb-desc, textarea { line-height: 1.75; }
.nb-row { padding-block: var(--s5); }
.nb-note { border-radius: var(--r-sm); box-shadow: none; }
.dl-row, .bk-preview { padding: var(--s5); border-radius: var(--r-md); box-shadow: none; }
.dl-row .note, .bk-preview .note { line-height: 1.8; }
#v-backup .note, #v-downloads .note, #v-sources .note { line-height: 1.8; }
.search-dlg { border-radius: var(--r-md); box-shadow: var(--shadow-lifted); }
.search-field { padding: var(--s3) var(--s5); }
.search-field input { font-size: 1.125rem; }
.search-row { padding: var(--s3) var(--s4); min-height: 64px; gap: var(--s1); }
.search-row small { line-height: 1.65; }
dialog { max-height: calc(100svh - var(--s7)); }
dialog :where(select, input:not([type="checkbox"]), textarea) { min-height: 48px; }
dialog :where(label, .note, p) { line-height: 1.7; }

/* Welcome keeps its exact lockup and voice; the reading choices share a consistent measure. */
body[data-view="welcome"] .hero { padding-block: var(--s8) var(--s7); }
.hero-lockup { margin-bottom: var(--s6); }
.hero-tag { line-height: 1.25; }
.hero-sub { font-size: 1.125rem; line-height: 1.75; max-width: 36rem; }
.hero-premise { line-height: 1.8; }
.hero-acts { gap: var(--s5); margin-block: var(--s6); }
.hero-cta { border-radius: var(--r-sm); min-height: 48px; padding: var(--s3) var(--s5); }
.hero-verse { font-size: 1.0625rem; line-height: 1.8; }
.intent, .demo { margin-top: var(--s7); }
.intent-list a { padding-block: var(--s5); gap: var(--s2); }
.i-q { font-size: 1.5rem; line-height: 1.45; }
.i-a { font-size: .9375rem; line-height: 1.75; }
.demo > #demo-evidence { padding: var(--s6); box-shadow: none; }

@media (min-width: 1021px) {
  .parsebar { top: calc(65px + var(--s5)); right: var(--ui-space); width: var(--ui-context); bottom: auto; max-height: calc(100svh - 65px - var(--s7)); }
  body.inspecting[data-view="read"] .work main { width: calc(100% - var(--ui-context) - var(--ui-context-gap)); max-width: none; margin-inline: 0 calc(var(--ui-context) + var(--ui-context-gap)); }
}
@media (min-width: 768px) and (max-width: 1020px) {
  .side { padding: var(--s5) var(--s2); }
  .lockup { padding: 0; }
  #nav a, .side-set { padding-inline: 0; }
}
@media (max-width: 1020px) {
  .view.with-context.on { grid-template-columns: 1fr; gap: var(--s6); }
  .context { position: static; max-width: none; }
  #v-today > .context { margin-top: 0; }
  .context .obj-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 var(--s5); }
  .reckon-panel { order: -1; }
  #v-feasts > .col-main { order: 0; }
  .reckon-panel .reckon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reckon .tog { grid-column: 1 / -1; }
  .parsebar { max-height: min(60svh, 40rem); overflow: auto; }
}
@media (max-width: 767px) {
  .toolbar { min-height: 60px; height: auto; padding: var(--s2) var(--s4); gap: var(--s2); border-bottom: var(--hairline); }
  .tools { gap: var(--s2); }
  .crumb { font-size: .9375rem; }
  .work main { padding: var(--s5) var(--s4) calc(var(--tap) + var(--s7) + var(--s6) + env(safe-area-inset-bottom, 0px)); }
  .subnav { padding-inline: var(--s4); }
  #mnav { background: var(--night); padding: var(--s2) var(--s1) calc(var(--s2) + env(safe-area-inset-bottom, 0px)); }
  #mnav a { min-height: 48px; font-size: .75rem; gap: var(--s1); }
  #mnav a.on { color: var(--bone); }
  #mnav a.on .ic { color: var(--ember); }
  #mnav a.on::before { content: ""; display: block; position: absolute; width: 24px; height: 2px; top: 0; background: var(--ember); }
  #mnav a { position: relative; }
  #v-today .greet { font-size: 2rem; }
  #v-today .invite { padding: var(--s5); }
  .invite-lead { font-size: 1.75rem; }
  .invite .nf-acts { display: grid; grid-template-columns: 1fr; }
  .invite .nf-acts a { width: 100%; }
  .today-rhythm { gap: var(--s3); }
  .mode button { padding-inline: var(--s4); }
  .inquiry h2 { font-size: 1.625rem; }
  .iq-list .obj-row { padding: var(--s4); gap: var(--s3); min-height: 100px; }
  .iq-row > .ic:first-child { padding: var(--s2); width: 18px; height: 18px; }
  .iq-row .obj-copy b { font-size: 1.125rem; }
  .iq-row .obj-copy small { font-size: .8125rem; }
  .iq-row > .ic:last-child { display: none; }
  .context { padding: var(--s5); }
  .context .obj-list { display: flex; }
  .tiles { grid-template-columns: 1fr; gap: var(--s4); }
  .tile { min-height: 148px; }
  .readbar { gap: var(--s3); }
  .passage { width: 100%; gap: var(--s1); }
  .passage select { font-size: 1rem; padding-inline: var(--s2); }
  .layers { max-width: 100%; flex-wrap: wrap; }
  .layers .hebtoggle { padding-inline: var(--s4); }
  .reader .v { font-size: 1.25rem; line-height: 1.9; }
  .reader .v.sel { padding-inline: var(--s3); }
  .parsebar { top: auto; left: var(--s3); right: var(--s3); width: auto; bottom: calc(64px + var(--s3) + env(safe-area-inset-bottom, 0px)); max-height: min(56svh, 34rem); border-radius: var(--r-lg); }
  .pb-word { font-size: 2.75rem; }
  .pb-dl { font-size: .875rem; }
  .reckon-panel .reckon { grid-template-columns: 1fr; gap: var(--s4); }
  .feast > summary { gap: var(--s3); flex-wrap: wrap; padding-block: var(--s5); }
  .feast .dt { margin-inline-start: auto; font-size: .9375rem; }
  .feastbody { padding-inline: var(--s3); }
  .card { padding: var(--s5); }
  .ev { padding-inline-start: var(--s4); }
  .ev-stmt { font-size: 1.125rem; }
  .ev-line { align-items: flex-start; }
  .ev-sup { padding: var(--s3); }
  .artcard > summary { padding: var(--s4); }
  .prayer-text { padding-inline: 0; }
  .prayer-body p, .pr-sec .verse { font-size: 1.25rem; line-height: 1.85; }
  .search-dlg { border-radius: 0; max-height: 100svh; }
  .search-field { padding-inline: var(--s4); }
  .search-field input, dialog :where(select, input:not([type="checkbox"]), textarea), .nb-title, .nb-desc { font-size: max(1rem, 16px); }
  body[data-view="welcome"] .hero { padding: var(--s6) 0 var(--s5); }
  .hero-lockup { margin-bottom: var(--s5); }
  .hero-tag { font-size: 1.75rem; }
  .hero-sub { font-size: 1rem; }
  .hero-premise { font-size: .9375rem; }
  .hero-acts { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .hero-cta { text-align: center; }
  .intent, .demo { padding-inline: 0; }
  .i-q { font-size: 1.25rem; }
  .i-a { font-size: .875rem; }
  .demo > #demo-evidence { padding: var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition-duration: 0ms; animation-duration: 0ms; }
}
@media (forced-colors: active) {
  #nav a.on, #mnav a.on { outline: 2px solid currentColor; outline-offset: -2px; }
  .iq-row > .ic:first-child { border: 1px solid currentColor; }
}
/* The page identity precedes the form and list at every width. */
.feasts-heading { grid-column: 1 / -1; display: grid; gap: var(--s3); }
@media (max-width: 1020px) {
  .feasts-heading { order: -2; }
}