/* الحكم العطائية — reader. Same as tuhfa.css (renamed .th → .hk), with prose hikam instead of صدر/عجز. Loaded after qudoori.css. Tokens only, both themes. */

/* entry card */
.hk-entry{border-inline-start-color:var(--accent)}

/* overlay */
body.hk-lock{overflow:hidden}
.hk-text{width:100%;font-size:var(--rsize, 28px)}
.hk-aya{color:var(--accent)}
.hk-mark{color:var(--muted);font-size:.6em;margin-inline-start:.15em;cursor:help}

/* ---------- the verse ---------- */
.hk-verse{position:relative;display:flex;flex-direction:column;gap:.05em;padding:.35em .5em .4em;border-radius:10px;
  font-family:var(--font-display);font-size:1em;line-height:2;color:var(--text);max-width:32em;margin-inline:auto}
/* a hikma is prose: one justified paragraph, never split like a verse */
.hk-nathr{margin:0;min-width:0;text-align:justify;text-align-last:start;overflow-wrap:break-word}
.hk-card-preview .hk-nathr{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hk-sadr,.hk-ajuz{display:block;min-width:0;overflow-wrap:break-word}
/* printed stacked verse: the صدر starts at the right, the عجز ends at the left */
.hk-verse .hk-sadr{text-align:start;padding-inline-end:10%}
.hk-verse .hk-ajuz{text-align:end;padding-inline-start:10%}
.hk-num{display:inline-flex;align-self:center;align-items:center;justify-content:center;min-width:1.8em;height:1.8em;padding:0 .3em;margin-bottom:.1em;
  font-family:var(--font-display);font-size:.55em;font-weight:700;line-height:1;color:var(--brass);border:1px solid var(--brass);border-radius:999px;
  background:var(--surface);box-shadow:0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--brass) 40%, transparent)}
.hk-verse.is-tap{cursor:pointer}
.hk-verse.is-tap:hover{background:color-mix(in srgb, var(--surface-2) 70%, transparent)}
.hk-verse.is-tap:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hk-bayt.open > .hk-verse{background:var(--surface-2)}
.hk-pill{position:absolute;top:.5rem;inset-inline-end:.4rem;float:none;font-size:11px;height:auto;line-height:1.5;margin:0}
.hk-bayt.open .hk-pill{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* the Norwegian line: folded until the bayt is tapped, or «عرض الترجمة كلها» */
.hk-no{display:none;direction:ltr;text-align:left;font-family:var(--font-body);font-size:max(15px, .58em);line-height:1.6;color:var(--muted);
  border-left:3px solid var(--accent);padding:.15em .8em;margin:.25em auto .4em;max-width:40rem}
.hk-no span{display:block}
.hk-bayt.open > .hk-no,.hk-text.m-all .hk-no{display:block}
.hk-text.m-all .hk-verse.is-tap{cursor:default}

/* one bayt in cards and slides */
.hk-bayt{padding:14px 0 12px;border-bottom:1px solid var(--border)}
.hk-bayt:last-child{border-bottom:0}
.hk-slide .hk-bayt{border-bottom:0;padding-top:4px}
.hk-slide .hk-verse-big{font-size:1.28em;line-height:2.1;padding-block:.5em}

/* ---------- folds under the bayt: examples and sharh ---------- */
.hk-folds{display:flex;flex-wrap:wrap;gap:8px;margin:.35em auto 0;max-width:44rem}
.hk-folds:empty{display:none}
.hk-fold{flex:1 1 100%;min-width:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-family:var(--font-body);font-size:1rem}
.hk-fold > summary{list-style:none;cursor:pointer;padding:8px 12px;display:flex;align-items:center;gap:8px;color:var(--brass);font-weight:600;font-size:.92rem}
.hk-fold > summary::-webkit-details-marker{display:none}
.hk-fold > summary::after{content:"+";margin-inline-start:auto;font-size:1.1rem;line-height:1;color:var(--muted)}
.hk-fold[open] > summary::after{content:"\2212"}
.hk-fold[open] > summary{border-bottom:1px solid var(--border)}
.hk-fold > summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.hk-fold-c,.hk-sh-lv{font-size:.76rem;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--surface-2)}
.hk-sh-lv{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.hk-fold-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px}

/* level switch «مبتدئ / متوسط / عالٍ» */
.hk-level-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hk-level-l{font-size:.82rem;color:var(--muted)}
.hk-level button{padding:4px 12px}
.hk-level button[disabled]{opacity:.45;cursor:default}
.hk-sh-text{display:flex;flex-direction:column;gap:8px}
.hk-sh-range{font-size:.82rem;color:var(--muted)}
.hk-sh-h{margin:.2em 0 0;font-family:var(--font-display);font-size:1.15rem;font-weight:700;line-height:1.6;color:var(--accent)}
.hk-p{margin:0;font-family:var(--font-display);font-size:max(17px, .66em);line-height:2;color:var(--text);text-align:justify;overflow-wrap:break-word}
.hk-src{display:inline-block;max-width:100%;font-family:var(--font-body);font-size:.72em;color:var(--muted)}
.hk-sh-none{margin:0}

/* Qur'anic examples in tajweed colours */
.hk-ex-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hk-ex-item{padding:4px 2px 8px;border-bottom:1px dashed var(--border)}
.hk-ex-item:last-child{border-bottom:0;padding-bottom:0}
.hk-ex-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.hk-ex-q{font-family:var(--font-display);font-size:max(20px, .8em);line-height:2.1;color:var(--text);min-width:0;overflow-wrap:anywhere}
.hk-ex-ref{font-size:.8rem;color:var(--muted);white-space:nowrap}
.hk-ex-note{font-family:var(--font-display);font-size:1rem;line-height:1.9;color:var(--muted)}
.hk-ex-no{direction:ltr;text-align:left;font-size:.88rem;line-height:1.55;color:var(--muted)}
/* colour only: no padding or background on the marked letters, so the Arabic letters stay joined */
.hk-tj{color:var(--tc);font-weight:inherit}
.hk-tj-unknown{color:var(--muted);text-decoration:underline dotted;text-underline-offset:.4em}
.hk-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:8px;border-top:1px solid var(--border);font-size:.82rem;color:var(--muted)}
.hk-lg{display:inline-flex;align-items:center;gap:6px}
.hk-sw{flex:none;width:.95em;height:.95em;border-radius:3px;background:var(--tc);border:1px solid color-mix(in srgb, var(--text) 15%, transparent)}
.hk-sw.hk-tj-unknown{background:transparent;border-style:dashed}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hk-tj{color:var(--tcd)}
  :root:not([data-theme="light"]) .hk-sw{background:var(--tcd)}
}
:root[data-theme="dark"] .hk-tj{color:var(--tcd)}
:root[data-theme="dark"] .hk-sw{background:var(--tcd)}
:root[data-theme="dark"] .hk-sw.hk-tj-unknown,:root:not([data-theme="light"]) .hk-sw.hk-tj-unknown{background:transparent}

/* ---------- contents: مقدّمة, then باب → فصل → بيت ---------- */
.hk-book-title{font-size:clamp(1.7rem, 6.2vw, 2.5rem)}
.hk-intro-entry .qd-kitab-c{font-size:.85rem}
.hk-intro-inner{padding:12px 16px 14px}
.hk-fusul{display:flex;flex-direction:column;gap:6px;width:100%}
.hk-fasl{border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.hk-fasl > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 12px}
.hk-fasl > summary::-webkit-details-marker{display:none}
.hk-fasl > summary:hover{background:var(--surface-2)}
.hk-fasl > summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.hk-fasl[open] > summary{border-bottom:1px solid var(--border)}
.hk-fasl[open] > summary .qd-fasl-t{color:var(--accent)}
.hk-bayt-list{list-style:none;margin:0;padding:4px;display:flex;flex-direction:column;gap:2px;width:100%}
.hk-fusul > .hk-bayt-list{padding:0}
.hk-bayt-btn{appearance:none;width:100%;display:flex;align-items:baseline;gap:10px;text-align:start;padding:5px 10px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;cursor:pointer}
.hk-bayt-btn:hover{background:var(--accent-soft)}
.hk-bayt-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.hk-bayt-btn-n{flex:none;min-width:1.9em;font-size:.8rem;font-weight:600;color:var(--brass);text-align:center}
.hk-bayt-btn-t{flex:1;min-width:0;font-family:var(--font-display);font-size:1.05rem;line-height:1.7;overflow-wrap:anywhere}
.hk-intro-entry.is-cur > summary .qd-kitab-t{color:var(--accent)}

/* cards */
.hk-card-preview{display:flex;flex-direction:column;font-size:1.02rem;line-height:1.9}
.hk-card-preview .hk-sadr{text-align:start}
.hk-card-preview .hk-ajuz{text-align:end}
.hk-card .ap-card-count{display:flex;flex-wrap:wrap;align-items:center;gap:4px}

/* ---------- «كتاب»: the poem set like a printed manzuma ---------- */
.hk-bk-page{container-type:inline-size;container-name:hkpage}
.hk-poem{display:flex;flex-direction:column;gap:.1em;margin:0 auto}
.hk-bk-b{padding:0;border:0;scroll-margin-top:12px}
.hk-bk-b > .hk-verse.hk-bk-v{display:grid;max-width:none;margin:0;padding:.1em .3em;gap:0 .45em;line-height:2.15;font-size:.84em;
  grid-template-columns:1.7em minmax(0,1fr);grid-template-areas:"num nathr"}
.hk-bk-v .hk-num{grid-area:num;align-self:start;margin-top:.55em;justify-self:center}
.hk-bk-v .hk-nathr{grid-area:nathr}
.hk-bk-v .hk-pill{display:none}
.hk-bk-page .hk-bayt.open > .hk-verse{background:var(--surface-2)}
.hk-bk-page .hk-no{margin:.1em 2.4em .35em .4em}
.hk-bk-folds{margin:.05em 0 .4em;padding-inline-start:2.35em;max-width:none}
.hk-bk-folds .hk-fold:not([open]){flex:0 0 auto;border-radius:999px}
.hk-bk-folds .hk-fold:not([open]) > summary{padding:2px 10px;font-size:.8rem}
.hk-bk-folds .hk-fold:not([open]) > summary::after{font-size:.95rem}
.hk-bk-fasl{scroll-margin-top:12px}
/* wide page: صدر and عجز side by side, a clear white gap between them, each justified across its half, like the printed abyat */
/* the widest hemistich of the matn is 11.1em of Amiri: at .84em the two 11.2em halves and a 3.2em gap fit a 24em page.
 * (em in the query = the page's font size, so A+/A− move the breakpoint with the text) */
@container hkpage (min-width: 24em){
  .hk-bk-b > .hk-verse.hk-bk-v{font-size:.84em;grid-template-columns:1.9em minmax(0,11.2em) minmax(0,11.2em);grid-template-areas:"num sadr ajuz";
    justify-content:center;column-gap:3.2em;padding-block:.05em}
  .hk-bk-v .hk-num{margin-top:.6em}
  .hk-bk-v .hk-sadr,.hk-bk-v .hk-ajuz{padding:0;text-align:justify;text-align-last:justify}
  .hk-bk-page .hk-no{max-width:34rem;margin-inline:auto}
  .hk-bk-folds{justify-content:center;padding-inline-start:0}
}
/* the opening of the book */
.hk-sec{scroll-margin-top:12px}
.hk-sec:focus{outline:none}
.hk-intro-page .hk-p{font-size:.74em;line-height:2.1;margin:.2em 0 .55em}
.hk-intro-page .hk-src{font-size:.7em}
.hk-sub{margin:.2em 0 .4em}
.hk-sub .hk-sh-h{font-size:.8em}

/* LTR shell (Norwegian UI): the book text itself stays RTL */
.hk[dir="ltr"] .hk-text,.hk[dir="ltr"] .hk-sh-body,.hk[dir="ltr"] .hk-ex-list{direction:rtl}
.hk[dir="ltr"] .hk-text .hk-no,.hk[dir="ltr"] .hk-ex-no,.hk[dir="ltr"] .hk-level-row{direction:ltr}

@media (max-width:600px){
  .hk-verse{padding-inline:.2em}
  .hk-verse .hk-sadr{padding-inline-end:6%}
  .hk-verse .hk-ajuz{padding-inline-start:6%}
  /* the widest hemistich (11.1em) stays on one line on a 390px phone at the default size; A+/A− still scale it */
  .hk-verse{font-size:min(1em, calc(6.9vw + var(--rsize, 28px) - 28px))}
  .hk-slide .hk-verse-big{font-size:min(1.12em, calc(6.9vw + var(--rsize, 28px) - 28px))}
  .hk-fold-body{padding:8px 10px 10px}
  .hk-bk-folds{padding-inline-start:0}
  .hk-bk-b > .hk-verse.hk-bk-v{font-size:min(.84em, calc(5.6vw + var(--rsize, 28px) - 28px));grid-template-columns:1.45em minmax(0,1fr);column-gap:.3em;padding-inline:.15em}
  .hk-bk-page .hk-no{margin-inline:.2em}
  .hk-intro-inner{padding:10px 12px 12px}
}
@media print{
  .hk-folds .hk-fold:not([open]),.hk-pill{display:none !important}
}

.hk-srcd{display:block;margin-top:2px}.hk-srcd>summary{display:inline-block;cursor:pointer;font-family:var(--font-body);font-size:.68em;color:var(--muted);list-style:none;padding:0 6px;border:1px solid var(--border);border-radius:999px}.hk-srcd>summary::-webkit-details-marker{display:none}.hk-srcd[open]>summary{color:var(--accent)}.hk-srcd .hk-src{display:block;margin-top:2px}
.hk-sh-text[dir="ltr"] .hk-p{font-family:var(--font-body);line-height:1.7}

/* ---------- hikam: prose lines, not hemistichs ---------- */
.hk-verse{max-width:30em}
.hk-verse .hk-sadr,.hk-verse .hk-ajuz{padding-inline:0}
.hk-intro-page .hk-p{text-align:justify}
.hk-grp{margin:1.2em 0 .2em;text-align:center;color:var(--accent)}
.hk-card-preview .hk-sadr,.hk-card-preview .hk-ajuz{text-align:start}
.hk-bk-b > .hk-verse.hk-bk-v{grid-template-columns:1.7em minmax(0,1fr);grid-template-areas:none}
.hk-bk-v .hk-num{grid-column:1;grid-row:1}
.hk-bk-v .hk-sadr,.hk-bk-v .hk-ajuz{grid-area:auto;grid-column:2;text-align:start}
@container hkpage (min-width: 24em){
  .hk-bk-b > .hk-verse.hk-bk-v{grid-template-columns:1.9em minmax(0,26em);grid-template-areas:none;column-gap:.8em}
  .hk-bk-v .hk-sadr,.hk-bk-v .hk-ajuz{grid-area:auto;grid-column:2;text-align:start;text-align-last:start}
}
@media (max-width:600px){
  .hk-verse{font-size:min(.95em, calc(6.2vw + var(--rsize, 28px) - 28px))}
  .hk-bk-b > .hk-verse.hk-bk-v{font-size:min(.8em, calc(5.4vw + var(--rsize, 28px) - 28px));grid-template-columns:1.45em minmax(0,1fr)}
  .hk-slide .hk-verse-big{font-size:min(1.05em, calc(6.2vw + var(--rsize, 28px) - 28px))}
}