:root[data-theme="dark"] { color-scheme: dark; --h-bg: #121614; --h-surface: #1a201d; --h-ink: #e8e4da; --h-ink2: #a9a596; --h-gold: #d4af37; --h-onGold: #1a1608; --h-trunk: #5f6b63; --h-hair: rgba(212,175,55,.32); --h-fruitHi: #2e3a33; --h-fruitLo: #1c2420; }
:root[data-theme="light"] { color-scheme: light; --h-bg: #fdfbf7; --h-surface: #ffffff; --h-ink: #1d1a16; --h-ink2: #5a5246; --h-gold: #8a6c12; --h-onGold: #ffffff; --h-trunk: #7a877e; --h-hair: rgba(138,108,18,.30); --h-fruitHi: #fbf6e8; --h-fruitLo: #efe6cf; }

/* every box includes its padding and border: also the elements outside .sg-root (the name sheet, the install bar) */
*, *::before, *::after { box-sizing: border-box; }

/* from the design */
body{margin:0}
a{color:inherit}a:hover{opacity:.85}
.sg-root{container-type:inline-size}
.sg-root *{box-sizing:border-box}
.sg-root a:focus-visible,.sg-root button:focus-visible,.sg-root input:focus-visible{outline:2px solid #d4af37;outline-offset:3px}
.sg-h1{font-size:clamp(40px,7cqi,84px)}
.sg-h2{font-size:clamp(28px,4.2cqi,44px)}
.sg-lede{font-size:clamp(17px,1.9cqi,21px)}
@container (max-width:700px){.sg-hide-sm{display:none}.sg-pad{padding-inline:20px}}
@media (prefers-reduced-motion:no-preference){.sg-thread-draw{animation:sgdraw 1.6s ease-out .2s both}}
@keyframes sgdraw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- additions the design leaves to the page ---------- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--h-bg); }
[hidden] { display: none !important; }
.sg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sg-root :is(h1, h2, h3, h4, p, a, li, dt, dd, button, label, figcaption, span) { unicode-bidi: plaintext; }
.sg-root select:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; }
.sg-lang { appearance: none; -webkit-appearance: none; }
.sg-lang option { color: #1d1a16; background: #fff; }
.sg-bead:hover { border-color: var(--h-gold) !important; }
.sg-bead { display: inline-flex; flex-direction: column; align-items: center; }
.sg-bead-date { display: block; margin-top: -2px; font-family: 'Noto Kufi Arabic', sans-serif; font-size: 11px; line-height: 1.5; color: var(--h-ink2); unicode-bidi: plaintext; white-space: nowrap; }

/* the section menu. Wide screens: a row of links (the icons are for phones). */
/* the footer's line about the site's languages (touch.js builds it); a language's name is a link that switches to it */
.sg-langs { margin: 0; max-width: 46em; font-size: 12.5px; line-height: 1.9; color: var(--h-ink2); }
.sg-langlink { color: var(--h-gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the preview of the evidence tree: tree.js draws into the svg (styles in tree/draw.css); the hint sits under it */
.sg-preview { cursor: pointer; direction: rtl; }
.sg-preview-stage { height: 476px; }   /* tree.js sets the height the tree needs once it is drawn */
.sg-preview #ft-tree { display: block; width: 100%; height: 100%; }
/* phones: the box uses most of the card's width, so the names are large enough to read and to tap */
@media (max-width: 720px) { .sg-preview-box { flex: none !important; width: calc(100% + 56px); max-width: none !important; margin-inline: -28px; min-height: 0 !important; } }
.sg-preview-hint { margin: 0; padding: 0 12px; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; line-height: 1.5; color: var(--h-ink2); }
.sg-nav-ic { display: none; fill: none; stroke: var(--h-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sg-nav a[aria-current] { color: var(--h-ink) !important; }
/* Phones: every section is in view — eight tiles, four across and two down, each an icon above its label.
   The same on /, /tree/ and /more/ (one markup, taken from the home page). */
@media (max-width: 760px) {
  .sg-nav { flex: 1 1 100%; order: 3; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px !important; width: 100%; }
  .sg-nav a { min-width: 0; min-height: 64px; padding: 8px 3px; border-radius: 12px; border: 1px solid var(--h-hair); background: var(--h-surface); color: var(--h-ink) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
  .sg-nav-ic { display: block; }
  .sg-nav a span { max-width: 100%; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Latin labels are longer («Método de investigación», «Referencias»): a little smaller, up to three lines, and a word that
     still does not fit is hyphenated rather than cut anywhere or ended with «…» */
  html:not([lang="ar"]) .sg-nav a span { font-size: 12px; line-height: 1.35; -webkit-line-clamp: 3; hyphens: auto; -webkit-hyphens: auto; }
  .sg-nav a[aria-current] { border-color: var(--h-gold); color: var(--h-gold) !important; }
}

/* the small sheet a stage-1 name opens: its source and its story */
.sg-sheet { position: fixed; z-index: 50; inset-inline: 16px; bottom: 16px; margin-inline: auto; width: min(520px, calc(100% - 32px)); max-height: 70vh; overflow: auto; background: var(--h-surface); color: var(--h-ink); border: 1px solid var(--h-gold); border-radius: 16px; padding: 20px 22px; font-family: 'Noto Kufi Arabic', sans-serif; line-height: 1.75; box-shadow: 0 12px 40px rgb(0 0 0 / .35); }
.sg-sheet h3 { margin: 0 0 6px; padding-inline-end: 44px; font-family: 'Amiri', serif; font-size: 26px; line-height: 1.4; color: var(--h-gold); }
.sg-sheet p { margin: 0; font-size: 15px; }
.sg-sheet .sg-sheet-src { margin-bottom: 10px; font-size: 13px; color: var(--h-ink2); }
.sg-sheet-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--h-hair); background: transparent; color: var(--h-ink); cursor: pointer; display: grid; place-items: center; }

/* footer appeal: tree_credits, in the design's two paragraph styles */
.sg-appeal { display: flex; flex-direction: column; gap: 18px; }
.sg-appeal p { margin: 0; font-family: 'Amiri', serif; font-size: 22px; line-height: 1.9; color: var(--h-ink); }
.sg-appeal p + p { font-size: 20px; line-height: 1.75; color: var(--h-gold); }

/* «بيوت الأسرة»: the five existing cards, kept as they were, in the new surfaces */
.sg-houses .tree-section-title { margin: 0 0 6px; font-family: 'Amiri', serif; font-size: 24px; font-weight: 700; line-height: 1.6; color: var(--h-ink); }
.sg-houses .fadl-node { margin-bottom: 24px; color: var(--h-ink2); font-size: 15px; }
.sg-houses .branches-wrapper { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.sg-houses .branch-card { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--h-hair); border-top: 4px solid; border-radius: 16px; background: var(--h-surface); overflow: hidden; }
.sg-houses .branch-header { padding: 12px 20px; color: #fff; }
.sg-houses .branch-header h4 { margin: 0; font-family: 'Amiri', serif; font-size: 20px; line-height: 1.5; }
.sg-houses .branch-header span { font-size: 13px; }
.sg-houses .branch-header span:empty { display: none; }
.sg-houses .branch-body { flex: 1; padding: 14px 20px 6px; font-size: 15px; color: var(--h-ink); }
.sg-houses .branch-body h4 { margin: 10px 0 4px; font-family: 'Amiri', serif; font-size: 18px; color: var(--h-ink); }
.sg-houses .branch-body p { margin: 0 0 4px; }
.sg-houses .branch-body ul { margin: 0; padding-inline-start: 20px; color: var(--h-ink2); }
.sg-houses .branch-body [style*="color"] { color: var(--h-gold) !important; }
.sg-houses .branch-evidence-link { align-self: flex-start; margin: 4px 20px 16px; min-height: 44px; display: inline-flex; align-items: center; color: var(--h-gold); font-size: 14px; }
.sg-houses .modern-era { margin-top: 24px; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--h-hair); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.sg-houses .modern-era-title { font-family: 'Amiri', serif; font-size: 20px; color: var(--h-ink); }
.sg-houses .modern-era a { color: var(--h-gold); min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- /more/: its four sections, in the home page's surfaces (the same tokens, borders and heading sizes) ---------- */
.sg-sec { max-width: 1240px; margin: 0 auto; padding: 56px 48px 40px; scroll-margin-top: 8px; }
.sg-sec + .sg-sec { border-top: 1px solid var(--h-hair); }
.sg-sec > h2 { margin: 0 0 16px; font-family: 'Amiri', serif; font-weight: 700; line-height: 1.3; color: var(--h-gold); }
.sg-sec-lede { margin: 0 0 28px; max-width: 46em; color: var(--h-ink2); }
.sg-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.sg-grid > * { flex: 1 1 320px; min-width: 0; }
.sg-card { display: block; padding: 28px; border-radius: 20px; border: 1px solid var(--h-hair); background: var(--h-surface); color: var(--h-ink); text-decoration: none; }
.sg-card h3 { margin: 0 0 8px; font-family: 'Amiri', serif; font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--h-ink); }
.sg-card p { margin: 0 0 8px; font-size: 15px; color: var(--h-ink2); }
.sg-card strong { color: var(--h-ink); }
.sg-tag { display: inline-block; margin-bottom: 10px; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--h-hair); font-size: 13px; color: var(--h-gold); }
.sg-card .sg-meta { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--h-hair); font-size: 13px; }
.sg-card .sg-quote { font-family: 'Amiri', serif; font-size: 19px; line-height: 1.9; color: var(--h-ink); }
.sg-shot { display: block; width: 100%; height: 260px; margin-top: 12px; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--h-hair); }
.sg-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--h-ink2); }
.sg-titles { margin: 4px 0 12px; font-family: 'Amiri', serif; font-size: 20px; color: var(--h-ink); gap: 2px; }
.sg-open-q { color: var(--h-ink); font-size: 16px; }
.sg-open-q a { color: var(--h-gold); }
.sg-titles .en { display: block; direction: ltr; unicode-bidi: isolate; font-size: .8em; color: var(--h-ink2); text-align: right; }
.sg-book { text-align: center; }
.sg-book img { width: 192px; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--h-hair); }
.sg-book .sg-meta-top { margin: 16px 0 4px; font-size: 13px; }
.sg-doc img { display: block; width: 100%; height: 220px; margin-bottom: 16px; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--h-hair); }
.sg-doc:hover { border-color: var(--h-gold); opacity: 1; }
.sg-poem { text-align: center; }
.sg-poem h3 { margin: 28px 0 12px; font-size: 26px; color: var(--h-gold); }
.sg-poem h3:first-child { margin-top: 0; }
.sg-poem .poem-line { margin: 0 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; font-family: 'Amiri', serif; font-size: 22px; line-height: 2; color: var(--h-ink); }
.sg-poem .verse-part:first-child { text-align: end; }
.sg-poem .verse-part:last-child { text-align: start; }
/* phones: the second half of a verse goes on its own line, indented */
@container (max-width:700px) {
  .sg-poem { text-align: start; }
  .sg-poem h3 { text-align: center; }
  .sg-poem .poem-line { display: block; margin-bottom: 12px; font-size: 20px; }
  .sg-poem .verse-part { display: block; text-align: start !important; }
  .sg-poem .verse-part:last-child { padding-inline-start: 2.4em; }
}
.sg-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--h-gold); color: var(--h-onGold); display: grid; place-items: center; }
/* the nasheed card: dark, gold frame, the title and a large play button; after the click the player takes its place */
.sg-nasheed-box { max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid var(--h-gold); background: var(--h-bg); overflow: hidden; }
.sg-nasheed-box iframe { display: block; width: 100%; height: 100%; border: 0; }
.sg-nasheed { position: relative; width: 100%; height: 100%; padding: 16px; border: 0; background: radial-gradient(circle at 50% 42%, var(--h-surface), var(--h-bg)); color: var(--h-gold); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.sg-nasheed-title { font-family: 'Amiri', serif; font-size: clamp(20px, 4.4cqi, 34px); font-weight: 700; line-height: 1.5; text-align: center; }
.sg-nasheed .sg-play { position: static; margin: 0; flex: none; width: 84px; height: 84px; }
/* the playlist card sits in a narrower column: smaller pieces, and never shorter than its content */
.sg-playlist-box { min-height: 184px; }
.sg-nasheed-logo { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.sg-playlist { gap: 8px; padding: 12px; }
.sg-nasheed.sg-playlist .sg-play { width: 54px; height: 54px; }
.sg-playlist .sg-play svg { width: 26px; height: 26px; }
.sg-playlist .sg-nasheed-title { font-size: clamp(15px, 3.4cqi, 22px); line-height: 1.5; }
.sg-root .sg-nasheed-link { max-width: 880px; margin: 10px auto 28px; font-size: 14px; line-height: 2.2; unicode-bidi: normal; }   /* follows the page's direction */
.sg-nasheed-link a { color: var(--h-gold); }
.sg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.sg-btn { min-height: 48px; padding: 0 24px; border-radius: 12px; border: 1px solid var(--h-gold); background: var(--h-gold); color: var(--h-onGold); font: inherit; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.sg-btn-line { background: transparent; color: var(--h-gold); }
.sg-contact form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.sg-contact label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--h-ink2); }
.sg-contact input, .sg-contact textarea { min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--h-hair); background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: 16px; }
.sg-contact button { align-self: flex-start; }
.sg-ok { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--h-gold); color: var(--h-ink); }

/* «منهج البحث»: six cards; a card is a <details>, closed on phones (title and first line), open on wide screens */
.sg-methods { display: flex; flex-direction: column; gap: 20px; }
.sg-method summary { display: block; cursor: pointer; list-style: none; }
.sg-method summary::-webkit-details-marker { display: none; }
.sg-method summary h3 { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sg-method summary h3::after { content: "▾"; flex: none; font-size: 16px; color: var(--h-gold); }
.sg-method[open] summary h3::after { content: "▴"; }
.sg-teaser { display: block; margin-top: 6px; font-size: 15px; color: var(--h-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-method[open] .sg-teaser { display: none; }
.sg-method-body { margin-top: 12px; max-width: 52em; }
.sg-method-body p, .sg-method-body li { font-size: 16px; line-height: 1.9; color: var(--h-ink); }
.sg-method-body h4 { margin: 18px 0 6px; font-family: 'Amiri', serif; font-size: 20px; color: var(--h-gold); }
.sg-rank { margin: 0 0 12px; padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.sg-links { gap: 8px; }
.sg-links li { font-size: 14px; }
.sg-links a { color: var(--h-gold); overflow-wrap: anywhere; }

/* «الأنصار في ليبيا»: regions, cards with their evidence, and the page reader */
.sg-chips { display: none; }
.sg-region { margin-top: 36px; scroll-margin-top: 12px; }
.sg-region-h { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--h-hair); font-family: 'Amiri', serif; font-size: 26px; font-weight: 700; line-height: 1.5; color: var(--h-gold); }
.sg-fig { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sg-fig h3, .sg-fig p { margin: 0; }
.sg-fig .sg-where { font-size: 14px; }
.sg-fig .sg-claim { font-size: 16px; color: var(--h-ink); }
.sg-fig .sg-note { font-size: 13px; }
.sg-ev { align-self: stretch; margin-top: 4px; border-top: 1px solid var(--h-hair); }
.sg-ev summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--h-gold); list-style: none; }
.sg-ev summary::-webkit-details-marker { display: none; }
.sg-ev summary::after { content: "▾"; }
.sg-ev[open] summary::after { content: "▴"; }
.sg-ev ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.sg-ev li { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--h-hair); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sg-card .sg-src { margin: 0; font-size: 13px; color: var(--h-ink2); }
.sg-thumb { margin-top: 6px; padding: 3px; border-radius: 8px; border: 1px solid var(--h-hair); background: #fff; cursor: zoom-in; line-height: 0; }
.sg-thumb img { width: 96px; height: 128px; object-fit: cover; object-position: top; border-radius: 5px; }
.sg-thumb:hover { border-color: var(--h-gold); }
.sg-reader { width: min(960px, 100vw - 24px); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--h-gold); border-radius: 16px; background: var(--h-surface); color: var(--h-ink); overflow: hidden; }
.sg-reader[open] { display: flex; flex-direction: column; }
.sg-reader::backdrop { background: rgba(0, 0, 0, .7); }
.sg-reader header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--h-hair); }
.sg-reader h2 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--h-ink2); }
.sg-reader header button { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--h-hair); background: transparent; color: var(--h-ink); cursor: pointer; display: grid; place-items: center; }
.sg-reader-img { flex: 1 1 auto; min-height: 0; overflow: auto; background: #0b0d0c; text-align: center; }
.sg-reader-img img { display: block; margin: 0 auto; max-width: 100%; height: auto; cursor: zoom-in; }
.sg-reader.zoom .sg-reader-img img { max-width: none; width: 200%; cursor: zoom-out; }
.sg-reader-text { flex: none; max-height: 32vh; overflow: auto; padding: 12px 16px 16px; }
.sg-reader-text p { margin: 0 0 6px; }
.sg-reader-text .sg-quote { font-family: 'Amiri', serif; font-size: 19px; line-height: 1.9; }
.sg-reader-text .sg-src { font-size: 13px; color: var(--h-ink2); }
@container (max-width:700px) {
  .sg-chips { display: flex; gap: 8px; margin: 0 0 4px; padding-block: 4px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .sg-chips::-webkit-scrollbar { display: none; }
  .sg-chips a { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--h-hair); color: var(--h-ink); font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; }
}

/* the references number is a link to the list: the whole tile is the target */
.sg-stat-link { position: relative; }
.sg-stat-link a { color: inherit; text-decoration: none; }
.sg-stat-link a::after { content: ""; position: absolute; inset: 0; }

/* a text field in a flex row is as wide as its text wants by default, and that grows with the phone's font size:
   it may shrink, and it fills its row (M4.21) */
#sg-search, .sg-contact input, .sg-contact textarea { min-width: 0; width: 100%; }
.sg-gapcard :is(a, button) { max-width: 100%; }

/* phones: a 16px gutter, and nothing with a fixed width may hold a flex row wider than the screen */
@media (max-width: 600px) {
  .sg-pad { padding-inline: 16px !important; }   /* the design's paddings are inline styles */
  .sg-gapcard { padding: 18px 16px !important; }   /* the research card keeps its width for the text on a phone */
  /* the three numbers: one row of three equal tiles, as on /tree/ — the number first, its label under it, no divider lines */
  .sg-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; }
  .sg-stats > div { margin: 0 !important; padding: 10px 6px !important; border: 1px solid var(--h-hair) !important; border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .sg-stats dd { order: -1; font-size: 26px !important; white-space: nowrap; }
  .sg-stats dt { font-size: 12.5px !important; line-height: 1.5; }
  .sg-stats-note { margin-top: 0 !important; font-size: 13px !important; }
  .sg-root :is(section, figure, article, form, dl, ol, ul, div) { min-width: 0; max-width: 100%; }
}

/* safety net (the page already fits without it): clip, not hidden, so position: sticky keeps working */
html, body { overflow-x: clip; }

/* ---------- app-like touch: no text selection or long-press pop-up anywhere on the page ---------- */
body { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
/* the only exception: form fields stay editable. Copying is done with the «نسخ» buttons below. */
input, textarea, [contenteditable], [contenteditable] * {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* a name or heading drawn with no text node (data-t): the browser finds no word under the finger */
[data-t]::before { content: attr(data-t); }

/* the copy button: a small icon with a 44px tap area; «نُسخ ✓» shows beside it for a moment after copying */
.cp { position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--h-gold, #d4af37); cursor: pointer; vertical-align: middle; }
.cp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.cp[data-done]::after { content: attr(data-done); position: absolute; top: 50%; inset-inline-start: 100%; translate: 0 -50%; z-index: 3; padding: 3px 10px; border-radius: 999px; background: var(--h-gold, #d4af37); color: var(--h-onGold, #1a1608); font: 600 12px/1.6 'Noto Kufi Arabic', sans-serif; white-space: nowrap; }