/* ==========================================================================
   Darb Al-Zahra — Visual Design System "Quiet Manuscript" (Phase 1B)
   Loaded AFTER styles.css and ux-phase1.css. Identity kept: emerald / ivory / gold, Tajawal, calm spiritual tone.
   What changes is HOW those are used:
     • one flat ivory "paper" surface instead of translucent tinted glass on every block
     • hairlines + whitespace instead of borders, shadows and nested boxes
     • one solid emerald action per screen; secondary = paper + hairline; tertiary = quiet text
     • gold only as a thin accent (overlines, current-state marker, focus ring)
     • an Arabic-first type scale (no negative letter-spacing, generous line-height, tabular numerals)
   Everything is expressed as tokens (--ds-*) so light and dark share the same structure.
   ========================================================================== */

/* -------- 1. TOKENS ------------------------------------------------------ */
:root{
  /* colour — light */
  --ds-canvas:#f5f1e8; --ds-canvas-2:#f0eee4;
  --ds-paper:#fffdf8; --ds-paper-2:#faf6ec; --ds-paper-3:#f4efe2;
  --ds-ink:#14261f; --ds-ink-2:#3c4f46; --ds-muted:#5b695f;
  --ds-line:rgba(20,38,31,.09); --ds-line-2:rgba(20,38,31,.16);
  --ds-emerald:#0f5f45; --ds-emerald-deep:#0a4231; --ds-emerald-wash:rgba(15,95,69,.075); --ds-emerald-line:rgba(15,95,69,.26);
  --ds-gold:#86631a; --ds-gold-bright:#c99a3e; --ds-gold-wash:rgba(201,154,62,.13);
  --ds-danger:#9d3f3f; --ds-danger-wash:rgba(157,63,63,.09);
  --ds-on-primary:#fff;
  /* shape */
  --ds-r-xs:8px; --ds-r-sm:12px; --ds-r-md:16px; --ds-r-lg:22px; --ds-r-pill:999px;
  /* elevation: e1 resting, e2 raised/hover, e3 floating (menus, modals) */
  --ds-e1:0 1px 2px rgba(20,38,31,.05),0 0 0 1px var(--ds-line);
  --ds-e2:0 12px 30px -16px rgba(20,38,31,.22),0 0 0 1px var(--ds-line);
  --ds-e3:0 28px 64px -22px rgba(20,38,31,.36),0 0 0 1px var(--ds-line-2);
  /* space (4pt) */
  --ds-s1:4px; --ds-s2:8px; --ds-s3:12px; --ds-s4:16px; --ds-s5:24px; --ds-s6:32px; --ds-s7:48px; --ds-s8:64px;
  /* type */
  --ds-fs-caption:13px; --ds-fs-small:14px; --ds-fs-body:16px; --ds-fs-lead:17px; --ds-fs-t3:18px; --ds-fs-t2:22px; --ds-fs-t1:30px; --ds-fs-display:44px;
  --ds-lh-body:1.85; --ds-lh-tight:1.35;
  --ds-ctl:44px; /* minimum control height */

  /* map the legacy tokens so every untouched component inherits the new system */
  --bg:var(--ds-canvas); --bg2:var(--ds-canvas-2);
  --surface:var(--ds-paper); --card:var(--ds-paper); --card-solid:var(--ds-paper);
  --text:var(--ds-ink); --muted:var(--ds-muted); --line:var(--ds-line);
  --primary:var(--ds-emerald); --primary2:var(--ds-emerald-deep); --primary-soft:var(--ds-emerald-wash);
  --gold:var(--ds-gold); --danger:var(--ds-danger); --danger-soft:var(--ds-danger-wash);
  --radius:var(--ds-r-lg);
  --shadow:var(--ds-e2); --shadow-soft:var(--ds-e1);
  --input-bg:#fff; --premium-border:var(--ds-line); --premium-wash:none; --btn-radius:var(--ds-r-sm);
}
[data-theme="dark"]{
  --ds-canvas:#09140f; --ds-canvas-2:#0c1a14;
  --ds-paper:#10211a; --ds-paper-2:#0d1c16; --ds-paper-3:#14281f;
  --ds-ink:#f2ecdd; --ds-ink-2:#cfd8cf; --ds-muted:#a3b3a9;
  --ds-line:rgba(238,226,180,.095); --ds-line-2:rgba(238,226,180,.18);
  --ds-emerald:#5bd19a; --ds-emerald-deep:#3fbf86; --ds-emerald-wash:rgba(91,209,154,.11); --ds-emerald-line:rgba(91,209,154,.32);
  --ds-gold:#dcb665; --ds-gold-bright:#e7bf63; --ds-gold-wash:rgba(231,191,99,.12);
  --ds-danger:#ef8e8e; --ds-danger-wash:rgba(239,142,142,.11);
  --ds-on-primary:#062016;
  --ds-e1:0 1px 2px rgba(0,0,0,.32),0 0 0 1px var(--ds-line);
  --ds-e2:0 14px 34px -16px rgba(0,0,0,.6),0 0 0 1px var(--ds-line);
  --ds-e3:0 30px 70px -20px rgba(0,0,0,.75),0 0 0 1px var(--ds-line-2);
  --input-bg:#0d1c16;
}

/* -------- 2. BASE: canvas, type, forms ----------------------------------- */
body{
  background:radial-gradient(1200px 520px at 85% -8%,color-mix(in srgb,var(--ds-gold-bright) 10%,transparent),transparent 62%),var(--ds-canvas)!important;
  color:var(--ds-ink);font-size:var(--ds-fs-body);line-height:var(--ds-lh-body);-webkit-font-smoothing:antialiased;
}
body:before{display:none!important}
.app-shell{width:min(1160px,calc(100% - 32px));padding:14px 0 var(--ds-s7)}
h1,h2,h3,h4{letter-spacing:0!important;line-height:var(--ds-lh-tight);color:var(--ds-ink)}
h2{font-size:var(--ds-fs-t2);font-weight:800}
h3{font-size:var(--ds-fs-t3);font-weight:800}
p{line-height:var(--ds-lh-body)}
strong,b{font-weight:800}
small{font-size:var(--ds-fs-caption)}
.num,.tnum,td,th,.stat strong,.mini-stats strong{font-variant-numeric:tabular-nums}
::selection{background:var(--ds-emerald-wash)}
label{font-weight:700;font-size:var(--ds-fs-small);color:var(--ds-ink-2);margin:var(--ds-s3) 0 0}
input,select,textarea{
  border-radius:var(--ds-r-sm)!important;border:1px solid var(--ds-line-2)!important;background:var(--input-bg)!important;color:var(--ds-ink)!important;
  min-height:var(--ds-ctl);padding:10px 14px;font-size:var(--ds-fs-body);box-shadow:none!important;margin-top:6px;
}
textarea{line-height:1.9}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ds-emerald) 40%,var(--ds-line-2))!important}
input:focus,select:focus,textarea:focus{border-color:var(--ds-emerald)!important;box-shadow:0 0 0 3px var(--ds-emerald-wash)!important}
input::placeholder,textarea::placeholder{color:var(--ds-muted);opacity:.85}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ds-gold-bright);outline-offset:2px}

/* -------- 3. SHELL: top bar, page head ----------------------------------- */
.glass{background:var(--ds-paper)!important;border:0!important;box-shadow:var(--ds-e1)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.topbar{top:10px;border-radius:var(--ds-r-md)!important;padding:8px 14px!important;gap:12px}
.brand-mark{width:40px!important;height:40px!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px rgba(231,191,99,.3)!important}
.brand strong{font-size:17px;font-weight:800}
.brand small{font-size:12px;font-weight:600;color:var(--ds-muted)}
.nav{gap:2px}
.nav a,.nav .nav-link{padding:9px 14px;border-radius:var(--ds-r-sm);font-weight:700;font-size:15px;color:var(--ds-ink-2);transition:background .15s,color .15s}
.nav a:hover{background:var(--ds-emerald-wash);color:var(--ds-ink);box-shadow:none}
.nav a[aria-current="page"],.nav a.active{color:var(--ds-emerald);background:var(--ds-emerald-wash)}
.theme-toggle{width:40px!important;height:40px!important;border-radius:var(--ds-r-sm)!important;background:var(--ds-paper-2)!important;color:var(--ds-ink)!important;border:1px solid var(--ds-line-2)!important;box-shadow:none!important;display:inline-grid;place-items:center;padding:0;font-size:0!important}
.theme-toggle svg{width:19px;height:19px;display:block}
.theme-toggle:hover{background:var(--ds-emerald-wash)!important;border-color:var(--ds-emerald-line)!important}
.user-pill-btn{border-radius:var(--ds-r-sm)!important;background:var(--ds-paper-2)!important;border:1px solid var(--ds-line-2)!important;box-shadow:none!important;color:var(--ds-ink)!important;font-weight:700}

.page-head{padding:var(--ds-s6) 0 var(--ds-s4)!important;max-width:none}
.page-head .eyebrow,.hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:none!important;border:0!important;padding:0!important;border-radius:0;
  color:var(--ds-gold)!important;font-size:var(--ds-fs-caption)!important;font-weight:800;letter-spacing:.02em
}
.page-head .eyebrow::before,.hero .eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--ds-gold-bright);opacity:.9}
.page-head h1{font-size:var(--ds-fs-t1)!important;font-weight:800;line-height:1.3!important;margin:var(--ds-s2) 0 var(--ds-s1)!important;color:var(--ds-ink)}
.page-head p{font-size:var(--ds-fs-body)!important;color:var(--ds-muted)!important;line-height:1.8;margin:var(--ds-s1) 0 0;max-width:68ch}
.page-head .status-line,.page-head .hero-actions{display:flex;flex-wrap:wrap;gap:var(--ds-s2);margin-top:var(--ds-s4)}

/* -------- 4. BUTTONS: Primary / Secondary / Tertiary -------------------- */
.btn{
  min-height:var(--ds-ctl);padding:10px 20px!important;border-radius:var(--ds-r-sm)!important;font-size:var(--ds-fs-small)!important;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.3;text-align:center;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.btn:hover{transform:none}
.btn:active{transform:translateY(1px)}
/* primary — one per screen */
.btn.primary{background:var(--ds-emerald)!important;color:var(--ds-on-primary)!important;border:0!important;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 16px -8px color-mix(in srgb,var(--ds-emerald) 70%,transparent)!important}
.btn.primary:hover{background:var(--ds-emerald-deep)!important}
[data-theme="dark"] .btn.primary:hover{background:#7adcae!important}
/* secondary — paper + hairline */
.btn.ghost{background:var(--ds-paper)!important;border:1px solid var(--ds-line-2)!important;color:var(--ds-ink)!important;box-shadow:none!important}
.btn.ghost:hover{background:var(--ds-emerald-wash)!important;border-color:var(--ds-emerald-line)!important;color:var(--ds-emerald)!important}
/* tertiary — quiet text action (compact ghost) */
.btn.ghost.compact-btn,.btn.compact-btn.ghost{min-height:38px;padding:6px 12px!important;border-color:transparent!important;background:transparent!important;color:var(--ds-emerald)!important;font-weight:700}
.btn.ghost.compact-btn:hover{background:var(--ds-emerald-wash)!important}
.btn.primary.compact-btn{min-height:38px;padding:6px 16px!important}
@media (pointer:coarse){.btn.ghost.compact-btn{min-height:42px}}
.btn.danger-btn,.danger-btn{color:var(--ds-danger)!important;border-color:color-mix(in srgb,var(--ds-danger) 32%,transparent)!important;background:transparent!important}
.btn.danger-btn:hover,.danger-btn:hover{background:var(--ds-danger-wash)!important}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.mini-icon-btn,.icon-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:6px 12px;border-radius:var(--ds-r-sm);border:1px solid var(--ds-line-2);background:var(--ds-paper);color:var(--ds-ink);font-weight:700;font-size:var(--ds-fs-small);cursor:pointer;box-shadow:none}
.mini-icon-btn.primary{background:var(--ds-emerald);border-color:transparent;color:var(--ds-on-primary)}
.mini-icon-btn:hover,.icon-action:hover{background:var(--ds-emerald-wash);border-color:var(--ds-emerald-line)}
.mini-icon-btn.primary:hover{background:var(--ds-emerald-deep)}
.more-menu-list{border-radius:var(--ds-r-md)!important;box-shadow:var(--ds-e3)!important;border:0!important;background:var(--ds-paper)!important}
.more-menu-item{border-radius:var(--ds-r-xs)!important;font-weight:700}
.more-menu-item small{font-weight:500}

/* -------- 5. SURFACES: one paper layer, no gold glows, no nested boxes -- */
.hero-card:before,.form-card:before,.zakat-card:before,.khatma-detail:before,.dev-card:before{display:none!important}
.form-card,.zakat-card,.khatma-detail,.hero-card,.feature-card,.khatma-card,.countdown-card,.admin-panel{
  background:var(--ds-paper)!important;border:0!important;box-shadow:var(--ds-e1)!important;border-radius:var(--ds-r-lg)!important;backdrop-filter:none!important
}
.form-card,.zakat-card,.khatma-detail{padding:var(--ds-s5)!important;margin-top:var(--ds-s4)}
.feature-card,.khatma-card{padding:var(--ds-s5)}
.feature-card:hover,.khatma-card:hover{transform:none;box-shadow:var(--ds-e2)!important}
/* a block that sits inside another surface is a quiet inset, not another raised card */
.form-card .feature-card,.khatma-detail .feature-card,.form-card .khatma-card,.khatma-detail .form-card{background:var(--ds-paper-2)!important;box-shadow:none!important}
.sheet-head,.khatma-section-hdr{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-s3);margin:0 0 var(--ds-s4)}
.sheet-head h3,.khatma-section-hdr h2,.sheet-head h2{margin:0;font-size:var(--ds-fs-t3);font-weight:800}
.sheet-head span,.soft-badge{font-size:var(--ds-fs-caption);font-weight:700;color:var(--ds-muted);background:none;border:0;padding:0}
.badge{display:inline-flex;align-items:center;gap:6px;border:0!important;border-radius:var(--ds-r-pill);padding:3px 11px!important;font-size:var(--ds-fs-caption);font-weight:700;background:var(--ds-emerald-wash)!important;color:var(--ds-emerald)!important}
.badge.done{background:var(--ds-emerald-wash)!important;color:var(--ds-emerald)!important}
.badge.in-progress{background:var(--ds-gold-wash)!important;color:var(--ds-gold)!important}
.empty-state{text-align:center;padding:var(--ds-s6)!important;color:var(--ds-muted)}

/* -------- 6. STATS: numbers on the page, not in boxes -------------------- */
.mini-stats,.result-boxes{gap:0!important;margin-top:var(--ds-s4)!important;border-block:1px solid var(--ds-line);padding-block:var(--ds-s3);grid-template-columns:repeat(auto-fit,minmax(110px,1fr))!important}
.mini-stats div,.result-boxes div{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:var(--ds-s2) var(--ds-s4)!important;text-align:start}
.mini-stats div+div,.result-boxes div+div{border-inline-start:1px solid var(--ds-line)!important}
.mini-stats strong,.result-boxes strong{font-size:var(--ds-fs-t1)!important;font-weight:800;line-height:1.2;color:var(--ds-ink)}
.mini-stats span,.result-boxes span{font-size:var(--ds-fs-caption);font-weight:600;color:var(--ds-muted)}
.progress-ring{box-shadow:none!important;background:conic-gradient(var(--ds-emerald) var(--pct,0%),var(--ds-paper-3) 0)!important}
.progress-ring:after{border:0!important;background:var(--ds-paper)!important}
.progress-ring span{color:var(--ds-emerald);font-size:34px}

/* -------- 7. HOME --------------------------------------------------------- */
.hero{padding:var(--ds-s7) 0 var(--ds-s5)!important}
.hero h1{font-size:clamp(32px,4.2vw,var(--ds-fs-display))!important;line-height:1.3!important;font-weight:800;margin:var(--ds-s3) 0 var(--ds-s4)!important}
.hero p{font-size:var(--ds-fs-lead)!important;line-height:1.95;max-width:56ch;color:var(--ds-muted)!important}
.hero .grid-2{gap:var(--ds-s7);align-items:center}
.hero-card{padding:var(--ds-s6)!important;box-shadow:var(--ds-e2)!important}
.hero-actions{margin-top:var(--ds-s5)}
.features{gap:var(--ds-s4)!important;margin-top:var(--ds-s5)!important}
.feature-card span{color:var(--ds-gold)!important;font-size:var(--ds-fs-caption)!important;font-weight:800;letter-spacing:.06em}
.feature-card h3{font-size:var(--ds-fs-t3);margin:var(--ds-s2) 0}
.feature-card p{font-size:var(--ds-fs-small);line-height:1.85;margin:0}
.dev-card{box-shadow:none!important;background:transparent!important;border:0!important;border-top:1px solid var(--ds-line)!important;border-radius:0!important;padding:var(--ds-s5) 0!important;margin-top:var(--ds-s7)}
.dev-orb{width:44px!important;height:44px!important;border-radius:var(--ds-r-sm)!important;background:var(--ds-emerald-wash)!important;color:var(--ds-emerald)!important;box-shadow:none!important;font-size:0!important}
.dev-orb svg{width:20px;height:20px}
.dev-card p{font-weight:600;font-size:var(--ds-fs-caption)}
.dev-card h3{font-size:var(--ds-fs-t3);margin:2px 0}
.dev-card span{font-weight:700;font-size:var(--ds-fs-small)}
.signature{font-weight:600;font-size:var(--ds-fs-caption)}

/* -------- 8. KHATMA: unit ledger ----------------------------------------- */
.units-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 var(--ds-s6)!important;margin-top:var(--ds-s4)!important;
  background:var(--ds-paper);border-radius:var(--ds-r-lg);box-shadow:var(--ds-e1);padding:var(--ds-s2) var(--ds-s5)
}
.units-grid>.unit,.unit{
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:var(--ds-s3) 0!important;
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px var(--ds-s3);align-items:start;text-align:start;border-bottom:1px solid var(--ds-line)!important;cursor:default;position:relative
}
.units-grid>.unit:nth-last-child(-n+2){border-bottom:0!important}
.unit:hover{transform:none}
.unit>strong{grid-column:1;grid-row:1/span 6;display:inline-grid;place-items:center;align-self:start;min-height:34px;padding:0 10px;border-radius:var(--ds-r-xs);background:var(--ds-paper-3);color:var(--ds-ink);font-size:var(--ds-fs-small);font-weight:800;white-space:nowrap}
.unit.completed>strong{background:var(--ds-emerald-wash);color:var(--ds-emerald)}
.unit.reading>strong{background:var(--ds-gold-wash);color:var(--ds-gold)}
.unit>small{grid-column:2;margin:0;line-height:1.5}
.unit>small .status-dot{display:inline-flex;gap:6px;padding:0;border:0;background:none;font-size:var(--ds-fs-caption);font-weight:700;color:var(--ds-muted);border-radius:0;text-align:start;justify-content:flex-start}
.unit.completed>small .status-dot{color:var(--ds-emerald)}
.unit.reading>small .status-dot{color:var(--ds-gold)}
.unit>*:not(strong):not(small){grid-column:2}
.unit.available>small:last-child{color:var(--ds-muted);font-size:var(--ds-fs-caption)}
.unit .unit-actions{margin-top:var(--ds-s2)}
.unit .btn{min-height:38px;padding:6px 14px!important}
.managed-unit-reader-row{display:flex;align-items:center;gap:var(--ds-s1);min-height:40px;border-radius:var(--ds-r-xs)}
.managed-unit-reader-row>span:first-child{flex:1;min-width:0;font-weight:700;font-size:var(--ds-fs-small);overflow-wrap:anywhere}
.managed-reader-action{min-width:38px!important;min-height:38px!important;border-radius:var(--ds-r-xs)!important;padding:0!important}
.managed-reader-action.ghost{border-color:transparent!important;color:var(--ds-muted)!important}
.managed-reader-action.ghost:hover{color:var(--ds-emerald)!important}
.managed-reader-action.primary{box-shadow:none!important}
.st-dot{width:8px;height:8px;margin-inline-end:8px}
.st-dot.st-assigned{background:var(--ds-line-2);opacity:1;box-shadow:inset 0 0 0 1.5px var(--ds-muted);background:transparent}
.st-dot.st-reading{background:var(--ds-gold-bright)}
.st-dot.st-completed{background:var(--ds-emerald)}

/* collapsible sections (khatma admin) — one calm list, hairline separated */
.ux-section{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;border-top:1px solid var(--ds-line)!important;padding:0!important;margin:0!important}
.ux-section:first-of-type{border-top:0!important}
.ux-section>summary{min-height:56px;padding:var(--ds-s3) 0;display:flex;align-items:center;gap:var(--ds-s3);cursor:pointer;list-style:none;font-weight:800;font-size:var(--ds-fs-t3)}
.ux-section>summary::-webkit-details-marker{display:none}
.ux-section>summary h3,.ux-section>summary h4{margin:0;font-size:var(--ds-fs-t3);font-weight:800;flex:1 1 auto}
.ux-section>summary>span{font-size:var(--ds-fs-caption);font-weight:600;color:var(--ds-muted);background:none;padding:0}
.ux-section>summary .ux-chevron{font-size:0;width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;flex-shrink:0;color:var(--ds-muted);transition:background .15s}
.ux-section>summary .ux-chevron::before{content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg);margin-block-start:-3px;transition:transform .2s}
.ux-section[open]>summary .ux-chevron::before{transform:rotate(-135deg);margin-block-start:3px}
.ux-section>summary:hover .ux-chevron{background:var(--ds-emerald-wash);color:var(--ds-emerald)}
.ux-section-body{padding:0 0 var(--ds-s5)!important;border:0!important}
.khatma-detail .countdown-card{background:var(--ds-paper-2)!important;box-shadow:none!important;border-radius:var(--ds-r-md)!important;padding:var(--ds-s4) var(--ds-s5)!important}

/* -------- 9. TABLES: flat ledgers ---------------------------------------- */
.report-table,.reader-audit-table,table.rt-cards,.khatma-table,.owner-table,.sheet table{border-collapse:collapse;width:100%}
.report-table-wrap,.table-wrap{border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;overflow-x:auto}
.report-table thead th,.sheet table thead th,.owner-table thead th{
  background:transparent!important;color:var(--ds-muted)!important;font-size:var(--ds-fs-caption);font-weight:700;text-align:start;padding:10px 12px;border:0!important;border-bottom:1px solid var(--ds-line-2)!important;white-space:nowrap
}
.report-table td,.sheet table td,.owner-table td{padding:12px;border:0!important;border-bottom:1px solid var(--ds-line)!important;font-size:var(--ds-fs-small);color:var(--ds-ink);text-align:start!important}
.report-table tbody tr:last-child td,.sheet table tbody tr:last-child td{border-bottom:0!important}
.report-table tbody tr:hover td,.sheet table tbody tr:hover td{background:var(--ds-paper-2)}
.report-section{background:var(--ds-paper)!important}
.reports-grid{gap:var(--ds-s4)}

/* -------- 10. LISTS: rows are lines, not boxes --------------------------- */
.owner-row,.khatma-row-item,.khatma-list-item,.rd-group-row{
  background:none!important;border:0!important;border-bottom:1px solid var(--ds-line)!important;border-radius:0!important;box-shadow:none!important;padding:var(--ds-s3) 0!important
}
.owner-row:last-child,.khatma-row-item:last-child,.khatma-list-item:last-child,.rd-group-row:last-child{border-bottom:0!important}
.owner-row:hover,.khatma-row-item:hover,.khatma-list-item:hover{background:var(--ds-paper-2)!important}
.owner-row-title{font-weight:800;font-size:var(--ds-fs-body)}
.owner-row-meta{font-size:var(--ds-fs-caption)!important;color:var(--ds-muted)}
.reader-row .owner-row-meta{font-size:var(--ds-fs-caption)}
.rd-chip{padding:2px 10px;font-size:var(--ds-fs-caption);font-weight:700}
.rd-chip-btn{border-radius:var(--ds-r-pill);border:1px solid var(--ds-line-2);background:var(--ds-paper);font-size:var(--ds-fs-small);font-weight:700;padding:6px 14px}
.rd-chip-btn.active{background:var(--ds-emerald);border-color:var(--ds-emerald);color:var(--ds-on-primary)}
.rd-chip-btn.active b{color:inherit;opacity:.85}
.audit-chip{border-radius:var(--ds-r-pill);font-size:var(--ds-fs-caption)}
.audit-num{background:var(--ds-paper-3);color:var(--ds-ink)}

/* -------- 11. ROTATION MATRIX -------------------------------------------- */
.rot-matrix-wrap{border:0!important;border-radius:var(--ds-r-md)!important;background:var(--ds-paper-2)!important}
.rot-matrix{font-size:var(--ds-fs-small)}
.rot-matrix th,.rot-matrix td{border-bottom:1px solid var(--ds-line)!important;padding:11px 14px}
.rot-matrix thead th{background:var(--ds-paper-2)!important;color:var(--ds-ink);font-weight:800}
.rot-matrix .rot-name{background:var(--ds-paper-2)!important;box-shadow:none!important}
.rot-matrix .is-current{background:var(--ds-emerald-wash)!important}
.rot-matrix thead th em{color:var(--ds-gold)}

/* -------- 12. ICON SYSTEM (mask icons, inherit currentColor) ------------- */
.ico{display:inline-block;width:1.15em;height:1.15em;flex-shrink:0;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ico-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.ico-save{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v5h7V4M8 20v-6h8v6'/%3E%3C/svg%3E")}
.ico-trash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E")}
.ico-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E")}
.ico-warn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 20h18z'/%3E%3Cpath d='M12 10v4M12 17.2v.1'/%3E%3C/svg%3E")}
.ico-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.ico-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E")}
.ico-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-4.5-4.5L12 15l4.5-4.5M5 20h14'/%3E%3C/svg%3E")}
.ico-gear{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 13.5a7.7 7.7 0 0 0 0-3l2-1.5-2-3.4-2.3.9a7.6 7.6 0 0 0-2.6-1.5L14 2.5h-4l-.5 2.5a7.6 7.6 0 0 0-2.6 1.5l-2.3-.9-2 3.4 2 1.5a7.7 7.7 0 0 0 0 3l-2 1.5 2 3.4 2.3-.9a7.6 7.6 0 0 0 2.6 1.5l.5 2.5h4l.5-2.5a7.6 7.6 0 0 0 2.6-1.5l2.3.9 2-3.4z'/%3E%3C/svg%3E")}
.ico-open{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E")}
.ico-play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E")}
.ico-book{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5C5.5 4 8.5 4 12 6c3.5-2 6.5-2 9-.5V19c-2.5-1.5-5.5-1.5-9 .5-3.5-2-6.5-2-9-.5z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E")}
.ico-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}
.ico-done{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.4 2.7 2.7L16 9.6'/%3E%3C/svg%3E")}
.ico-hourglass{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10M7 21h10M8 3c0 5 8 5 8 9s-8 4-8 9M16 3c0 5-8 5-8 9s8 4 8 9'/%3E%3C/svg%3E")}
.ico-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z'/%3E%3C/svg%3E")}
.ico-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4'/%3E%3C/svg%3E")}
.ico-spark{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2c.6 4.7 2.3 7.4 6 8.5-3.7 1-5.4 3.8-6 9.5-.6-5.7-2.3-8.5-6-9.5C9.700 9.400 11.400 6.700 12 2z'/%3E%3C/svg%3E")}
.ico-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.ico-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 3 3H7l3-3zM12 13v7'/%3E%3C/svg%3E")}
.ico-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.700l1-1'/%3E%3C/svg%3E")}
.ico-ban{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
.btn .ico,.badge .ico{width:1.1em;height:1.1em;vertical-align:-.15em}
/* stat icons on the dashboard */
.stat-icon{width:40px;height:40px;border-radius:var(--ds-r-sm);display:inline-grid;place-items:center;background:var(--ds-emerald-wash);color:var(--ds-emerald);font-size:0}
.stat-icon .ico{width:20px;height:20px}
/* leaderboard rank: numerals, gold/silver/bronze as a quiet ring */
.top-reader-rank{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:50%;font-size:var(--ds-fs-small);font-weight:800;background:var(--ds-paper-3);color:var(--ds-ink-2)}
.top-reader-rank.r1{background:var(--ds-gold-wash);color:var(--ds-gold);box-shadow:inset 0 0 0 1.5px var(--ds-gold-bright)}
.top-reader-rank.r2{box-shadow:inset 0 0 0 1.5px var(--ds-line-2)}
.top-reader-rank.r3{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ds-gold) 40%,var(--ds-line-2))}

/* -------- 13. fixes + components (round 2) ------------------------------- */
.theme-toggle .ico{width:19px;height:19px}
.dev-orb .ico{width:20px;height:20px}
.icon-action.v32,.mini-icon-btn.v32{background:var(--ds-paper)!important;border:1px solid var(--ds-line-2)!important;color:var(--ds-ink)!important;box-shadow:none!important;border-radius:var(--ds-r-sm)!important;min-height:38px}
.mini-icon-btn.primary.v32{background:var(--ds-emerald)!important;border-color:transparent!important;color:var(--ds-on-primary)!important}
.icon-action.v32:hover,.mini-icon-btn.v32:hover{background:var(--ds-emerald-wash)!important;border-color:var(--ds-emerald-line)!important}
.mini-icon-btn.primary.v32:hover{background:var(--ds-emerald-deep)!important;color:var(--ds-on-primary)!important}

/* status chip (tables, lists): icon-less, colour + weight carry meaning, text always present */
.st-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--ds-r-pill);font-size:var(--ds-fs-caption);font-weight:700;background:var(--ds-paper-3);color:var(--ds-ink-2);white-space:nowrap}
.st-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ds-muted)}
.st-chip-completed{background:var(--ds-emerald-wash);color:var(--ds-emerald)}.st-chip-completed::before{background:var(--ds-emerald)}
.st-chip-reading{background:var(--ds-gold-wash);color:var(--ds-gold)}.st-chip-reading::before{background:var(--ds-gold-bright)}
.rt-context{display:flex;flex-wrap:wrap;gap:6px var(--ds-s5);margin:0 0 var(--ds-s2);padding:var(--ds-s2) 0 var(--ds-s3);border-bottom:1px solid var(--ds-line);font-weight:700;font-size:var(--ds-fs-small)}
.rt-context small{color:var(--ds-muted);font-weight:600;margin-inline-end:4px}

/* readers directory */
.rd-toolbar{margin-bottom:var(--ds-s5);gap:var(--ds-s3)}
.rd-search input{background-image:none}
.rd-section{margin-top:var(--ds-s6)}
.rd-section>h3,.rd-section .sheet-head h3{font-size:var(--ds-fs-t3)}
.rd-groups{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--ds-s3)}
.rd-group-row{background:var(--ds-paper-2)!important;border:0!important;border-radius:var(--ds-r-md)!important;padding:var(--ds-s4)!important;flex-wrap:wrap;align-items:flex-start;transition:box-shadow .15s}
.rd-group-row:hover{background:var(--ds-paper-2)!important;box-shadow:var(--ds-e2)!important}
.rd-group-main strong{font-size:var(--ds-fs-body)}
.rd-group-actions{width:100%;justify-content:flex-start;gap:var(--ds-s2)}
.rd-group-actions .btn.primary{background:transparent!important;color:var(--ds-emerald)!important;box-shadow:none!important;border:1px solid var(--ds-emerald-line)!important;min-height:36px;padding:4px 14px!important}
.rd-group-actions .btn.primary:hover{background:var(--ds-emerald-wash)!important}
.rd-list,.rd-readers,#readersList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--ds-s6)}
.reader-row{display:flex!important;align-items:center;gap:var(--ds-s3)!important;padding:var(--ds-s3) 0!important}
.reader-row .owner-row-main{flex:1;min-width:0;display:grid;gap:2px}
.rd-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;background:var(--ds-emerald-wash);color:var(--ds-emerald);font-weight:800;font-size:var(--ds-fs-body)}
.reader-row.is-off .rd-avatar{background:var(--ds-paper-3);color:var(--ds-muted)}
.reader-row .owner-row-title{font-size:var(--ds-fs-body)}
.reader-row .owner-row-meta{font-size:var(--ds-fs-caption);gap:0}
.reader-row .rd-group{color:var(--ds-emerald);font-weight:700}
.row-more>summary{font-size:0!important;width:38px;min-width:38px;padding:0!important;color:var(--ds-muted)!important}
.row-more>summary::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:860px){.rd-list,.rd-readers,#readersList{grid-template-columns:1fr}}
#readersList>.reader-row,.rd-list>.reader-row{grid-column:auto!important}
#readersList>.empty-state,#readersList>.feature-card{grid-column:1/-1}
table.is-folded .rt-fold-row{display:none!important}
.rt-fold-btn{display:flex;margin:var(--ds-s3) auto 0}

/* -------- 14. dashboard / owner centre / logs ----------------------------- */
.dash-stat-card.glass{padding:var(--ds-s5)!important;border-radius:var(--ds-r-lg)!important;display:grid;gap:2px;align-content:start;text-align:start}
.dash-stat-card .stat-icon{margin-bottom:var(--ds-s3)}
.dash-stat-card .stat-value{font-size:var(--ds-fs-t1);font-weight:800;line-height:1.2;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.dash-stat-card .stat-label{font-size:var(--ds-fs-small);font-weight:700;color:var(--ds-ink-2)}
.dash-stat-card .stat-sub{font-size:var(--ds-fs-caption);color:var(--ds-muted);font-weight:500}
.dash-summary-grid{gap:var(--ds-s3)!important}
.dash-summary-grid .dash-stat-card.glass{background:var(--ds-paper-2)!important;box-shadow:none!important}
.dash-charts-row{gap:var(--ds-s4)}
.dash-donut-wrap{gap:var(--ds-s5)}
.dash-legend-item{font-size:var(--ds-fs-small);color:var(--ds-ink-2)}
.dash-legend-val{font-weight:800;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.top-readers-list{display:grid;gap:var(--ds-s1)}
.top-reader-row{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:var(--ds-s3);padding:var(--ds-s2) 0}
.top-reader-name{font-weight:700;font-size:var(--ds-fs-small)}
.top-reader-bar-wrap{height:6px!important;border-radius:var(--ds-r-pill);background:var(--ds-paper-3)!important;overflow:hidden;margin-top:6px}
.top-reader-bar{height:100%!important;border-radius:inherit;background:linear-gradient(90deg,var(--ds-emerald),color-mix(in srgb,var(--ds-emerald) 70%,var(--ds-gold-bright)))!important}
.top-reader-count{font-weight:800;font-size:var(--ds-fs-small);color:var(--ds-ink);white-space:nowrap}
.top-reader-count span{font-weight:500;color:var(--ds-muted);font-size:var(--ds-fs-caption)}
.dash-search-box{display:grid;gap:var(--ds-s3)}
.dash-search-input{min-height:48px}
.search-type-btn{border-radius:var(--ds-r-pill)!important;border:1px solid var(--ds-line-2)!important;background:var(--ds-paper)!important;color:var(--ds-ink-2)!important;font-weight:700;font-size:var(--ds-fs-small);padding:6px 16px;min-height:36px;cursor:pointer;box-shadow:none!important}
.search-type-btn.active{background:var(--ds-emerald)!important;border-color:var(--ds-emerald)!important;color:var(--ds-on-primary)!important}
.data-table{width:100%;border-collapse:collapse}
.data-table thead th{background:transparent!important;color:var(--ds-muted)!important;font-size:var(--ds-fs-caption);font-weight:700;text-align:start;padding:10px 12px;border:0!important;border-bottom:1px solid var(--ds-line-2)!important}
.data-table td{padding:11px 12px;border:0!important;border-bottom:1px solid var(--ds-line)!important;font-size:var(--ds-fs-small);text-align:start}
.data-table tbody tr:hover td{background:var(--ds-paper-2)}
.chart-bar-wrap{border-radius:var(--ds-r-md)}

/* owner centre tabs → quiet underline tabs */
.owner-tabs{display:flex;flex-wrap:wrap;gap:var(--ds-s1);border-bottom:1px solid var(--ds-line);margin:var(--ds-s4) 0}
.owner-tabs .btn{min-height:44px;border-radius:var(--ds-r-sm) var(--ds-r-sm) 0 0!important;border:0!important;border-bottom:2px solid transparent!important;background:transparent!important;color:var(--ds-muted)!important;font-weight:700;box-shadow:none!important;padding:8px 16px!important}
.owner-tabs .btn:hover{color:var(--ds-ink)!important;background:var(--ds-emerald-wash)!important}
.owner-tabs .btn.primary{color:var(--ds-emerald)!important;border-bottom-color:var(--ds-emerald)!important;background:transparent!important}
.owner-tabs .btn.primary:hover{background:var(--ds-emerald-wash)!important}
.cards-grid{gap:var(--ds-s3)!important}
.btn.search-type-btn{border:1px solid var(--ds-line-2)!important;background:var(--ds-paper)!important;color:var(--ds-ink-2)!important}
.btn.search-type-btn.active{background:var(--ds-emerald)!important;border-color:var(--ds-emerald)!important;color:var(--ds-on-primary)!important}
.page-head p:empty{display:none}

/* -------- 15. MOBILE (≤640px) --------------------------------------------- */
@media (max-width:640px){
  .app-shell{width:calc(100% - 24px)}
  .page-head{padding:var(--ds-s5) 0 var(--ds-s3)!important}
  .page-head h1{font-size:26px!important}
  .form-card,.zakat-card,.khatma-detail{padding:var(--ds-s4)!important;border-radius:var(--ds-r-md)!important}
  .mini-stats,.result-boxes{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-block:0!important}
  .mini-stats div,.result-boxes div{padding:var(--ds-s3) var(--ds-s2)!important}
  .mini-stats div+div,.result-boxes div+div{border-inline-start:0!important}
  .mini-stats div:nth-child(even),.result-boxes div:nth-child(even){border-inline-start:1px solid var(--ds-line)!important}
  .mini-stats div:nth-child(n+3),.result-boxes div:nth-child(n+3){border-top:1px solid var(--ds-line)}
  .mini-stats strong,.result-boxes strong{font-size:24px!important}
  /* unit ledger: one column */
  .units-grid{grid-template-columns:minmax(0,1fr)!important;padding:var(--ds-s1) var(--ds-s4)!important;border-radius:var(--ds-r-md)}
  .units-grid>.unit{grid-template-columns:60px minmax(0,1fr)!important;gap:2px var(--ds-s2)}
  .units-grid>.unit:nth-last-child(2){border-bottom:1px solid var(--ds-line)!important}
  .unit>strong{padding:0 6px;min-height:32px;font-size:13px}
  .managed-unit-reader-row{flex-wrap:nowrap}
  .hero{padding:var(--ds-s6) 0 var(--ds-s4)!important}
  .hero h1{font-size:30px!important}
  .hero-actions .btn{width:100%}
  .features{gap:var(--ds-s3)!important}
  .feature-card,.khatma-card{padding:var(--ds-s4)}
  .topbar{padding:6px 10px!important}
  .rd-group-actions{width:auto}
  .rd-groups{grid-template-columns:1fr 1fr;gap:var(--ds-s2)}
  .owner-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .owner-tabs::-webkit-scrollbar{display:none}
  .owner-tabs .btn{flex:0 0 auto}
  .sheet-head{flex-wrap:wrap}
  .top-reader-row{grid-template-columns:30px minmax(0,1fr) auto}
}
/* one status per reader, inline — the per-unit summary line is redundant when reader rows exist */
.unit:has(.managed-unit-reader-row)>small{display:none}
.rd-state{font-style:normal;font-weight:600;font-size:var(--ds-fs-caption);color:var(--ds-muted);margin-inline-start:var(--ds-s2)}
.rd-state-completed{color:var(--ds-emerald)}
.rd-state-reading{color:var(--ds-gold)}
.unit:has(.managed-unit-reader-row)>strong{grid-row:1/span 8}

/* mobile ledgers: table rows become hairline-separated rows, not boxed cards */
@media (max-width:760px){
  table.rt-cards tbody{gap:0!important}
  table.rt-cards tr{border:0!important;border-radius:0!important;background:none!important;padding:var(--ds-s3) 0!important;border-bottom:1px solid var(--ds-line)!important;gap:var(--ds-s2) var(--ds-s4)!important}
  table.rt-cards tbody tr:last-child{border-bottom:0!important}
  table.rt-cards td{border:0!important}
  table.rt-cards td:first-child{border-bottom:0!important;padding-bottom:2px!important;font-size:var(--ds-fs-body)}
  table.rt-cards td::before{font-weight:600;color:var(--ds-muted)}
  table.rt-cards td:not(:first-child){font-size:var(--ds-fs-small);font-weight:700}
  .report-section .btn.primary{width:100%}
}
@media (max-width:640px){
  .sheet-head{flex-wrap:nowrap!important;justify-content:space-between;text-align:start}
  .rd-section .sheet-head{text-align:start}
  .reader-row .owner-row-actions{display:flex!important;flex-direction:row;grid-template-columns:none!important;gap:0;justify-content:flex-end;flex-wrap:nowrap}
  .reader-row .owner-row-actions .btn{min-width:44px}
  .reader-row .rd-avatar{width:36px;height:36px}
}
@media (max-width:760px){.report-table.rt-cards,table.rt-cards{min-width:0!important}}
@media (max-width:700px){.sheet-head{flex-direction:row!important;align-items:center!important;text-align:start!important}.sheet-head h3,.sheet-head h4{text-align:start}}
@media (max-width:640px){
  .dash-donut-wrap{flex-direction:row!important;align-items:center!important;gap:var(--ds-s4);padding:var(--ds-s2) 0 0}
  .dash-donut-wrap svg{width:116px;height:116px;flex:0 0 auto}
  .dash-charts-row{gap:var(--ds-s3)}
  .dash-stat-card.glass{padding:var(--ds-s4)!important}
  .dash-stat-card .stat-value{font-size:26px}
}
body[data-route="managed-khatmas"] .khatma-row-badges .badge:first-child{display:none}
.khatma-list-progress,.khatma-row-progress{border:0!important;background:none!important;box-shadow:none!important}

/* round 3 fixes */
.ux-section>summary .ux-chevron::before{border-inline-end:0;border-block-end:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.btn.ghost.compact-btn.danger-btn,.btn.danger-btn.compact-btn,.btn.ghost.danger-btn{color:var(--ds-danger)!important;border-color:color-mix(in srgb,var(--ds-danger) 34%,transparent)!important;background:transparent!important}
.btn.ghost.compact-btn.danger-btn:hover,.btn.danger-btn.compact-btn:hover,.btn.ghost.danger-btn:hover{background:var(--ds-danger-wash)!important;color:var(--ds-danger)!important}
.more-menu>summary b{font-size:0!important;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-block-start:-3px;opacity:.7;display:inline-block}
.more-menu[open]>summary b{transform:rotate(-135deg);margin-block-start:3px}
.units-grid>.unit,.unit{row-gap:0!important}
.unit>strong{grid-row:1/span 6}
.unit:has(.managed-unit-reader-row)>strong{grid-row:1/span 6}
.unit .managed-unit-reader-row{margin-block:1px}
.row-more>summary b{display:none!important}
.sheet-head .compact-actions,.compact-actions{display:flex;flex-wrap:wrap;gap:var(--ds-s1);align-items:center}
.sheet-head>.compact-actions{margin-inline-start:auto}
#addReaderBtn.btn.ghost.compact-btn{border:1px solid var(--ds-emerald-line)!important}

/* touch comfort + minimum text size (final pass) */
.btn.ghost.compact-btn,.btn.compact-btn.ghost,.btn.primary.compact-btn,.btn.ghost.danger-btn,.icon-action.v32,.mini-icon-btn.v32{min-height:40px!important}
.managed-reader-action{min-width:40px!important;min-height:40px!important}
.audit-chip{min-height:40px;min-width:40px;padding:4px 12px}
.rd-chip-btn{min-height:40px}
@media (pointer:coarse){.btn.ghost.compact-btn,.btn.primary.compact-btn,.icon-action.v32,.mini-icon-btn.v32,.managed-reader-action,.audit-chip{min-height:44px!important}.managed-reader-action{min-width:44px!important}}
.reader-audit-status,.audit-multi,.rd-state,.rot-matrix thead th small,.rot-matrix thead th em{font-size:12.5px!important}
small,.rd-chip,.st-chip,.badge{font-size:max(12.5px,var(--ds-fs-caption))}
.audit-chip{font-size:var(--ds-fs-small)}
.row-more>summary{display:inline-flex!important;align-items:center;justify-content:center}
.row-more>summary::before{display:block;flex:0 0 18px}
.row-more>summary>span{display:none}
.khatma-list-progress.v32 span{font-size:12.5px}