/* Darb Al-Zahra — Phase 2: progressive disclosure (khatma editor) + paginated reader directory.
   Information architecture only: it re-uses the Phase 1B tokens and adds no new colours, fonts or component families. */

/* ---- chevron icon (mask, inherits text colour) --------------------------------------------------- */
.ico-chev{--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' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")}
.ico-chev.flip{transform:scaleX(-1)}

/* ---- 1. Khatma editor: collapsible sections ------------------------------------------------------- */
/* the form is a grid item of .admin-layout: without this its min-content (nowrap headers) widened the panel past the viewport */
.update-khatma-form{min-width:0}
.update-khatma-form .ed-section{border-top:1px solid var(--ds-line);margin:0}
.update-khatma-form .ed-section:first-of-type{border-top:0}
.ed-h{margin:0;font-size:inherit;font-weight:inherit}
.ed-head{width:100%;display:flex;align-items:center;gap:var(--ds-s3);min-height:56px;padding:var(--ds-s3) 0!important;margin:0;background:none!important;border:0!important;box-shadow:none!important;border-radius:var(--ds-r-sm);color:var(--ds-ink)!important;font:inherit;font-weight:800;font-size:var(--ds-fs-t3);text-align:start;cursor:pointer}
.ed-head:hover{background:none!important}
.ed-head:focus-visible{outline:2px solid var(--ds-gold-bright);outline-offset:2px}
.ed-head .ico{width:20px;height:20px;color:var(--ds-emerald)}
.ed-title{flex:0 0 auto}
.ed-meta{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ds-s2);font-weight:600;font-size:var(--ds-fs-caption);color:var(--ds-muted);overflow:hidden;white-space:nowrap}
.ed-note{overflow:hidden;text-overflow:ellipsis}
.ed-note:empty{display:none}
.ed-count{min-width:26px;height:24px;padding:0 8px;border-radius:var(--ds-r-pill);display:inline-grid;place-items:center;background:var(--ds-emerald-wash);color:var(--ds-emerald);font-size:var(--ds-fs-caption);font-weight:800}
.ed-warn{display:inline-flex;align-items:center;gap:4px;color:var(--ds-danger);font-weight:700}
.ed-warn .ico{width:15px;height:15px}
.ed-chev{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;flex-shrink:0;color:var(--ds-muted);transition:background .15s}
.ed-chev::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-block-start:-3px;transition:transform .2s}
.ed-section.is-open .ed-chev::before{transform:rotate(-135deg);margin-block-start:3px}
.ed-head:hover .ed-chev{background:var(--ds-emerald-wash);color:var(--ds-emerald)}
/* grid-rows trick: height animates 0 -> auto; hidden content leaves the tab order and the accessibility tree */
.ed-collapse{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .22s cubic-bezier(.2,.7,.2,1),visibility 0s linear .22s}
.ed-section.is-open>.ed-collapse{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.ed-inner{min-height:0;min-width:0;overflow:hidden}
.ed-section.is-open.is-settled .ed-inner{overflow:visible} /* lets reader pickers and focus rings extend past the box */
.ed-pad{padding:0 0 var(--ds-s5)}
.ed-section.no-anim>.ed-collapse,.ed-section.no-anim .ed-chev::before{transition:none}
@media (prefers-reduced-motion:reduce){.ed-collapse,.ed-chev::before{transition:none!important}}
/* inside a section the rows are lines, not nested cards */
.ed-pad>.managed-table{margin-bottom:var(--ds-s3)}
.ed-actions{position:sticky;bottom:0;z-index:5;margin-top:var(--ds-s4);padding:var(--ds-s3) 0;background:var(--ds-paper);border-top:1px solid var(--ds-line)}
.update-khatma-form [aria-invalid="true"]{border-color:var(--ds-danger)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-danger) 18%,transparent)!important}
@media (max-width:520px){.ed-meta{font-size:12.5px}.ed-head{gap:var(--ds-s2)}}

/* ---- 2. Reader directory: pagination ------------------------------------------------------------- */
#readersHead{scroll-margin-top:84px}
.rd-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-s3) var(--ds-s4);margin-top:var(--ds-s4);padding-top:var(--ds-s4);border-top:1px solid var(--ds-line)}
.rd-pager[hidden]{display:none}
.rd-pg-info{margin:0;font-size:var(--ds-fs-small);color:var(--ds-muted);font-weight:600}
.rd-pg-controls{display:flex;align-items:center;gap:var(--ds-s1);flex-wrap:wrap;justify-content:center}
.rd-pg-btn{min-height:40px;gap:var(--ds-s1)}
.rd-pg-btn .ico{width:16px;height:16px}
.rd-pg-btn:disabled{opacity:.45;cursor:not-allowed}
.rd-pg-nums{display:inline-flex;align-items:center;gap:2px}
.rd-pg-num{min-width:40px;height:40px;padding:0 6px;border-radius:var(--ds-r-sm);border:1px solid transparent;background:none;color:var(--ds-ink-2);font:inherit;font-weight:700;font-size:var(--ds-fs-small);cursor:pointer;transition:background .15s,color .15s}
.rd-pg-num:hover{background:var(--ds-paper-3)}
.rd-pg-num.active{background:var(--ds-emerald-wash);border-color:var(--ds-emerald-line);color:var(--ds-emerald);font-weight:800}
.rd-pg-gap{min-width:24px;text-align:center;color:var(--ds-muted)}
.rd-pg-cur{display:none;font-size:var(--ds-fs-small);font-weight:700;color:var(--ds-ink-2);padding:0 var(--ds-s2)}
.rd-pg-size{display:inline-flex;align-items:center;gap:var(--ds-s2);margin:0;font-size:var(--ds-fs-small);font-weight:600;color:var(--ds-muted)}
.rd-pg-size select{min-height:40px;width:auto;padding:0 var(--ds-s3);border-radius:var(--ds-r-sm)}
@media (max-width:640px){
  .rd-pager{flex-direction:column;align-items:stretch}
  .rd-pg-controls{flex-wrap:nowrap;order:1}
  .rd-pg-nums{display:none}
  .rd-pg-cur{display:inline;flex:1;text-align:center}
  .rd-pg-btn{flex:0 0 auto;min-width:96px;justify-content:center}
  .rd-pg-info{order:2;text-align:center}
  .rd-pg-size{order:3;justify-content:center}
}