/* styles/head-start.css — Head start (modules/tools/head-start.js, v1642). One window: the muṣḥaf page(s) of the piece, Flow's
   card at the foot, the ⋯ sheet with the 10-page map. Tokens only (styles/ql/tokens.css); the muṣḥaf lines keep one size per
   page (each line on its own row, never wrapped). */
.hs-win { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--q-page); color: var(--q-ink); font-family: var(--q-ui); font-size: var(--q-t-min); }
.hs-top { display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.hs-top b { font-size: var(--q-t-head); }
.hs-rng { flex: 1; color: var(--q-ink3); font-variant-numeric: tabular-nums; }
.hs-round { width: 44px; height: 44px; border-radius: var(--q-r-circle); border: 0; background: var(--q-fill); color: var(--q-ink2); display: grid; place-items: center; cursor: pointer; }
.hs-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px max(16px, env(safe-area-inset-right, 0px)) 320px max(16px, env(safe-area-inset-left, 0px)); }
.hs-pages { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.hs-load { padding: 48px 16px; text-align: center; color: var(--q-ink2); }
.hs-page { background: var(--q-group); border-radius: var(--q-r-group); box-shadow: var(--q-sh-card); padding: 16px; display: flex; flex-direction: column; }
.hs-ln { font-family: var(--k-ar); direction: rtl; white-space: nowrap; overflow: hidden; text-align: justify; text-align-last: justify; font-size: var(--hs-fs, var(--q-ar-20)); line-height: 2; padding: 0 4px; border-radius: var(--q-r-icon); transition: opacity var(--q-d-250) var(--q-ease), background var(--q-d-250) var(--q-ease); }
.hs-page.c .hs-ln { text-align: center; text-align-last: center; }
.hs-ln.hdr { text-align: center; text-align-last: center; box-shadow: inset 0 0 0 1px var(--q-hair); opacity: .5; margin: 2px 0; }
.hs-ln.dim { opacity: .35; }
.hs-ln.bk { background: var(--q-fill); }
.hs-ln.pc { background: var(--q-acc-soft); cursor: pointer; }
.hs-ln.pc.bk { background: var(--q-fill); }
.hs-w { border-radius: var(--q-r-icon); transition: filter var(--q-d-200) var(--q-ease), color var(--q-d-200) var(--q-ease); }
.hs-w.hid { filter: blur(6px); opacity: .6; }
.hs-w.new { color: var(--q-acc); font-weight: 700; }
.hs-pno { text-align: center; color: var(--q-ink3); padding-top: 4px; }
.hs-mz { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; font-family: var(--k-ar); font-size: var(--q-ar-20); }

.hs-dock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none; padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.hs-card { pointer-events: auto; width: 100%; max-width: 520px; box-sizing: border-box; background: var(--q-glass); -webkit-backdrop-filter: var(--q-blur); backdrop-filter: var(--q-blur); box-shadow: var(--q-sh-glass), var(--q-glass-edge); border-radius: var(--q-r-group); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hs-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hs-row.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.hs-where { flex: 1; font-weight: 600; min-width: 0; }
.hs-hint { flex: 1; color: var(--q-ink2); }
.hs-chip { border: 0; border-radius: var(--q-r-cap); background: var(--q-fill); color: var(--q-ink2); padding: 4px 12px; font: inherit; white-space: nowrap; }
button.hs-chip { min-height: 44px; cursor: pointer; }
.hs-seen.new { background: var(--q-acc-soft); color: var(--q-acc); }
.hs-lbl { color: var(--q-ink2); min-width: 64px; line-height: 1.2; }
.hs-seg { flex: 1; display: flex; background: var(--q-fill); border-radius: var(--q-r-ctl); padding: 2px; }
.hs-seg button { flex: 1; min-height: 44px; border: 0; background: none; color: var(--q-ink); font: inherit; border-radius: var(--q-r-ctl); cursor: pointer; }
.hs-seg button[aria-pressed="true"] { background: var(--q-group); color: var(--q-acc); font-weight: 600; box-shadow: var(--q-sh-thumb); }
.hs-seg button:disabled { opacity: .4; cursor: default; }
.hs-go { min-height: 44px; border: 0; border-radius: var(--q-r-cap); background: var(--q-strong); color: var(--q-strong-ink); padding: 0 24px; font: inherit; font-weight: 600; cursor: pointer; }
.hs-go.alt { background: var(--q-fill); color: var(--q-ink); }
.hs-lnk { min-height: 44px; border: 0; background: none; color: var(--q-acc); font: inherit; padding: 0 8px; cursor: pointer; }
.hs-lnk.danger { color: var(--q-danger); align-self: flex-start; }
.hs-sum { flex: 1; color: var(--q-ink2); font-variant-numeric: tabular-nums; }
.hs-bar, .hs-u { height: 8px; background: var(--q-fill); border-radius: var(--q-r-cap); overflow: hidden; }
.hs-u { height: 3px; }
.hs-bar i, .hs-u i { display: block; height: 100%; background: var(--q-acc); border-radius: var(--q-r-cap); transition: width var(--q-d-300) var(--q-ease); }

.hs-scrim { position: absolute; inset: 0; background: var(--q-scrim); display: flex; align-items: flex-end; justify-content: center; }
.hs-sheet { width: 100%; max-width: 560px; max-height: 88%; overflow-y: auto; box-sizing: border-box; background: var(--q-group); border-radius: var(--q-r-sheet) var(--q-r-sheet) 0 0; box-shadow: var(--q-sh-sheet); padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 12px; }
.hs-sh-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hs-sh-h b { font-size: var(--q-t-head); }
.hs-body { display: flex; flex-direction: column; gap: 12px; }
.hs-grp { background: var(--q-fill); border-radius: var(--q-r-group); padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.hs-grp .hs-seg { background: var(--q-page); }
.hs-note { color: var(--q-ink2); }
.hs-stp { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-variant-numeric: tabular-nums; }
.hs-stp button { width: 44px; height: 44px; border-radius: var(--q-r-circle); border: 0; background: var(--q-page); color: var(--q-ink); font: inherit; font-size: var(--q-t-head); cursor: pointer; }
.hs-num { width: 72px; min-height: 44px; box-sizing: border-box; border: 0; border-radius: var(--q-r-ctl); background: var(--q-page); color: var(--q-ink); font: inherit; font-size: var(--q-t-min); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.hs-num::-webkit-inner-spin-button, .hs-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hs-grp > .hs-seg { flex: none; }
.hs-map { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; direction: rtl; }
.hs-mpg { display: flex; flex-direction: column; gap: 3px; }
.hs-mpg span { text-align: center; color: var(--q-ink3); font-variant-numeric: tabular-nums; }
.hs-c { display: block; height: 12px; min-height: 0; padding: 0; border: 0; border-radius: var(--q-r-cap); background: var(--q-page); cursor: pointer; }
.hs-c.none { background: none; box-shadow: inset 0 0 0 1px var(--q-hair); cursor: default; }
.hs-c.d1 { background: var(--q-acc-soft); }
.hs-c.d2 { background: color-mix(in srgb, var(--q-acc) 55%, var(--q-page)); }
.hs-c.d3 { background: var(--q-acc); }
.hs-c.on { box-shadow: 0 0 0 2px var(--q-ink); }
.hs-c.bk { box-shadow: 0 0 0 2px var(--q-ink3); }
.hs-key { display: flex; flex-wrap: wrap; gap: 12px; color: var(--q-ink2); align-items: center; }
.hs-key span { display: inline-flex; align-items: center; gap: 4px; }
.hs-key .hs-c { width: 16px; display: inline-block; cursor: default; }
.hs-win button:focus-visible { outline: 2px solid var(--q-acc); outline-offset: 2px; }
@media (max-width: 520px) { .hs-map { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 12px; } }
@media (min-width: 700px) { .hs-ln { line-height: 2.1; } .hs-page { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .hs-ln, .hs-w, .hs-bar i, .hs-u i { transition: none; } }