/* /hukamnama reader: date tabs, previous/next, pick-a-date calendar.
   The reading itself reuses .hukam-card / .hukam-today from theme.css and
   pages.css; the calendar reuses the archive's .hcal-* rules. */

.hukam-reader{ scroll-margin-top:84px; }
.hukam-nav{ margin-bottom:28px; }
.hukam-nav-caption{
  display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; text-align:center;
}
.hukam-nav-title{ font-family:'Jost',sans-serif; font-size:20px; font-weight:600; color:var(--text); }

/* Horizontal strip of date tabs. The markup lists today first and then older
   dates; direction:rtl lays that out oldest -> today left to right (so
   Previous is on the left like a timeline) and starts the scroll at today
   even without JavaScript. The auto margins centre a short strip. */
.hukam-tabs{
  direction:rtl; position:relative; display:flex; gap:10px; overflow-x:auto; padding:6px 4px 12px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.hukam-tab{
  flex:0 0 auto; scroll-snap-align:center; min-width:96px; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:9px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--text-soft); text-decoration:none; text-align:center; direction:ltr;
  transition:background .2s, border-color .2s, transform .18s, box-shadow .18s;
}
.hukam-tab:first-child{ margin-right:auto; }
.hukam-tab:last-child{ margin-left:auto; }
.hukam-tab:hover{ border-color:var(--gold-2); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.hukam-tab-top{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-text); }
.hukam-tab-day{ font-size:16px; font-weight:600; color:var(--text); white-space:nowrap; }
.hukam-tab-ang{ font-size:11.5px; opacity:.85; white-space:nowrap; }
.hukam-tab.is-today{ border-color:rgba(201,162,39,.55); background:linear-gradient(160deg,rgba(240,215,123,.3),rgba(201,162,39,.12)); }
.hukam-tab.is-active{ background:var(--blue-1); border-color:var(--blue-1); color:#fff; box-shadow:var(--shadow-card); }
.hukam-tab.is-active .hukam-tab-top,
.hukam-tab.is-active .hukam-tab-ang{ color:var(--gold-1); }
.hukam-tab.is-active .hukam-tab-day{ color:#fff; }

/* Previous / pick / next */
.hukam-pager{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
.hukam-pager .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.hukam-step small{ opacity:.75; font-size:12px; }
.hukam-step.is-off{ opacity:.4; pointer-events:none; }

/* Calendar opens under the buttons as a compact card */
.hukam-cal{ max-width:460px; margin:16px auto 0; }
.hukam-cal[hidden]{ display:none; }
.hukam-cal .hcal{ position:static; }
.hukam-cal.is-loading .hcal{ opacity:.55; }

/* The reading */
.hukam-panel{ outline:none; transition:opacity .15s; }
.hukam-panel.is-loading{ opacity:.45; }
.hukam-notice{
  max-width:860px; margin:0 auto 18px; padding:12px 16px; border-radius:var(--radius-sm);
  border:1px solid rgba(201,162,39,.5); background:rgba(240,215,123,.18); color:var(--text);
}
.hukam-archive-link{ margin-top:22px; text-align:center; }

@media (max-width:520px){
  .hukam-tab{ min-width:84px; padding:8px 10px; }
  .hukam-pager{ gap:8px; }
  .hukam-pager .hukam-pick{ order:-1; flex:1 0 100%; }
  .hukam-pager .hukam-step{ flex:1 1 0; padding-left:8px; padding-right:8px; }
}
@media (prefers-reduced-motion:reduce){
  .hukam-tab, .hukam-panel{ transition:none; }
  .hukam-tab:hover{ transform:none; }
}