/* ==========================================================================
   TafsirKurd 2.0 — the reader's مصحف view (tk3-mushaf.js). Paper pages in the Madani
   layout: 15 justified lines, the surah frame, the page number. Each page's glyph font
   is loaded only when the page nears the screen. Static: no animation on scroll.
   ========================================================================== */
body.tkr-mushaf .tkr-ayahs, body.tkr-mushaf .tkr-head, body.tkr-mushaf #rTafsirToggle { display: none !important; }
.tkm-toggle[aria-pressed="true"] { background: var(--green); color: var(--on-green); border-color: var(--green); }

.tkm { display: grid; gap: var(--s5); justify-items: center; padding: var(--s4) 0 var(--s7); }
.tkm-page { --pw: min(100%, 580px); position: relative; width: var(--pw); aspect-ratio: 580 / 900; container-type: inline-size;
  padding: 6cqi 5cqi 5cqi; border-radius: 10px 4px 4px 10px; background: #FDF9EE; color: #1b1b1b;
  box-shadow: 0 0 0 1px rgba(150, 128, 88, .28), 0 0 0 7px #FDF9EE, 0 0 0 8px rgba(198, 160, 82, .55), 0 26px 50px -30px rgba(15, 58, 37, .45); }
:root[data-theme="sakina"] .tkm-page { background: #16241B; color: #EDE3C8;
  box-shadow: 0 0 0 1px rgba(213, 196, 162, .16), 0 0 0 7px #16241B, 0 0 0 8px rgba(198, 160, 82, .35), 0 26px 50px -30px rgba(0, 0, 0, .7); }
.tkm-ph { position: absolute; inset: 12cqi 7cqi; border-radius: 6px;
  background: repeating-linear-gradient(180deg, var(--wash) 0 3.2cqi, transparent 3.2cqi 6.4cqi); opacity: .8; }
.tkm-head { display: flex; justify-content: space-between; align-items: baseline; margin: -2cqi 0 2cqi; padding-bottom: 1.2cqi;
  border-bottom: 1px solid rgba(198, 160, 82, .45); font: 600 max(11px, 2.6cqi)/1.2 var(--f-ui); color: var(--green); }
.tkm-body { direction: rtl; display: grid; grid-template-rows: repeat(15, 1fr); height: calc(100% - 7cqi); font-size: 5.35cqi; line-height: 1; }
.tkm-body--open { grid-template-rows: repeat(8, auto); align-content: center; gap: 3.4cqi; }
.tkm-line { display: flex; justify-content: space-between; align-items: center; white-space: nowrap; font-feature-settings: normal; }
.tkm-body--open .tkm-line { justify-content: center; gap: .18em; }
.tkm-line .w { cursor: pointer; border-radius: 4px; transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease); }
.tkm-line .w:hover { color: var(--green); }
.tkm-line .w.is-sel { background: color-mix(in srgb, #C6A052 28%, transparent); }
.tkm-line .w.is-playing { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green-ink); }
:root[data-theme="sakina"] .tkm-line .w.is-playing { color: #B7DCC6; }
.tkm-bism { display: grid; place-items: center; font: 400 .92em/1 var(--f-quran); color: inherit; }
.tkm-err { position: absolute; inset: 40% 8% auto; margin: 0; text-align: center; color: var(--ink-2); font: 400 var(--t-sm)/1.8 var(--f-ui); }

/* the selected-ayah bar */
.tkm-bar { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 20px 40px -16px rgba(15, 58, 37, .45); transform: translate(-50%, 16px); opacity: 0; transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
[dir="rtl"] .tkm-bar { padding: 8px 16px 8px 8px; }
.tkm-bar.is-in { opacity: 1; transform: translate(-50%, 0); }
.tkm-bar__where { font-size: var(--t-sm); color: var(--green-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-inline-end: 4px; }
.tkm-bar .tk-btn .tk-icon { width: 16px; height: 16px; }
body.tkr-listening .tkm-bar { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  .tkm-bar { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); }
  body.tkr-listening .tkm-bar { bottom: calc(var(--tab-h) + 96px + env(safe-area-inset-bottom)); }
  .tkm { gap: var(--s4); }
}
.tkm-sheet__ar { margin: var(--s3) 0 0; font: 400 1.6rem/2.1 var(--f-quran); color: var(--ink); text-align: right; }
.tkm-sheet__tf { margin: var(--s3) 0 0; padding: var(--s3) var(--s4); border-radius: 16px; background: var(--surface-2); color: var(--ink-2); font: 400 1.05rem/1.95 var(--f-ui); white-space: pre-line; max-height: 50vh; overflow: auto; }
@media (max-width: 600px) { .tkm-toggle span { display: none; } .tkm-toggle { padding-inline: 10px; } }
/* phones: the toolbar gained a button — the goal chip steps aside (goals are one tap away in the menu) */
@media (max-width: 600px) { .tkr-bar .tkr-goal { display: none !important; } }

/* surah frame (cartouche): gold plaque with pointed ends + double rules out to a star at each edge.
   Shared look between the website مصحف and the app مصحف. Sizes in em — set font-size on .tk-cart. */
.tk-cart { --cg: #C6A052; --cf1: #FBF3DC; --cf2: #F1E3BE; --cn: #1A5C3A;
  display: flex; align-items: center; gap: .35em; direction: rtl; }
.tk-cart__end { flex: 1; position: relative; height: .32em; min-width: 1.2em;
  background: linear-gradient(var(--cg), var(--cg)) top / 100% 1px no-repeat, linear-gradient(var(--cg), var(--cg)) bottom / 100% 1px no-repeat; opacity: .9; }
.tk-cart__end::after { content: ''; position: absolute; top: 50%; width: .9em; height: .9em; margin-top: -.45em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23C6A052'%3E%3Crect x='-7' y='-7' width='14' height='14'/%3E%3Crect x='-7' y='-7' width='14' height='14' transform='rotate(45)'/%3E%3C/g%3E%3Ccircle r='3.2' fill='%23FBF3DC'/%3E%3C/svg%3E") center / contain no-repeat; }
.tk-cart__end:first-child::after { right: -.2em; }
.tk-cart__end:last-child::after { left: -.2em; }
.tk-cart__plaque { position: relative; display: grid; place-items: center; min-width: 5.2em; padding: .14em 1.35em .2em;
  clip-path: polygon(.8em 0, calc(100% - .8em) 0, 100% 50%, calc(100% - .8em) 100%, .8em 100%, 0 50%); background: var(--cg); }
.tk-cart__plaque::before { content: ''; position: absolute; inset: 2px;
  clip-path: polygon(.75em 0, calc(100% - .75em) 0, 100% 50%, calc(100% - .75em) 100%, .75em 100%, 0 50%);
  background: linear-gradient(180deg, var(--cf1), var(--cf2)); }
.tk-cart__plaque::after { content: ''; position: absolute; inset: 5px 1.1em; border-block: 1px solid color-mix(in srgb, var(--cg) 55%, transparent); pointer-events: none; }
.tk-cart__name { position: relative; z-index: 1; color: var(--cn); line-height: 1.15; white-space: nowrap; -webkit-text-fill-color: var(--cn); }
:root[data-theme="sakina"] .tk-cart, :root[data-theme="dark"] .tk-cart, [data-theme="dark"] .tk-cart, [data-theme="sakina"] .tk-cart { --cf1: #22362A; --cf2: #182A20; --cn: #E9CD8A; }
.tkm-sura { display: grid; align-items: center; height: 100%; font-size: 6.2cqi; }
.tkm-sura .tk-cart__name { font-family: var(--f-surah); font-size: 1em; }