/* Iqra E-Library — built on the Iqra Brand Guidelines.
   Flame #EB4F29 headings · Blue (Crayola) #2879FF secondary · Light Cyan #E3FEFF background
   · Eerie Black #191919 body. Deep variants are darkened brand colours, used only where the
   pure colour would fail contrast (small text, white-on-colour). */

:root{
  /* brand, exactly as specified */
  --flame:#EB4F29;
  --blue:#2879FF;
  --cyan:#E3FEFF;
  --ink:#191919;

  /* darkened for accessibility — see the brand note */
  --flame-deep:#B0330F;
  --blue-deep:#0F4BB8;

  /* tints and surfaces derived from the four */
  --cyan-deep:#C9F6F9;
  --flame-wash:#FDEBE6;
  --blue-wash:#E6EFFF;
  --surface:#FFFFFF;
  --ink-soft:#5B6166;
  --ink-faint:#8A9196;
  --hairline:rgba(25,25,25,.10);
  --hairline-soft:rgba(25,25,25,.06);

  --r-sm:10px; --r:16px; --r-lg:24px;

  /* layered shadows, tinted blue so depth reads warm against the cyan page */
  --lift-1:0 1px 2px rgba(15,75,184,.06), 0 2px 8px rgba(15,75,184,.05);
  --lift-2:0 2px 4px rgba(15,75,184,.07), 0 12px 28px rgba(15,75,184,.09);
  --lift-3:0 8px 16px rgba(15,75,184,.10), 0 28px 60px rgba(15,75,184,.14);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:var(--cyan);
  font:16px/1.65 Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  /* spatial backdrop: two soft colour fields floating over the brand background */
  background-image:
    radial-gradient(900px 600px at 12% -5%, rgba(40,121,255,.16), transparent 60%),
    radial-gradient(760px 520px at 92% 0%, rgba(235,79,41,.11), transparent 62%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

h1,h2,h3{font-weight:700;color:var(--flame);line-height:1.15;margin:0 0 .5rem;letter-spacing:-.015em}
h1{font-size:2.1rem}
h2{font-size:1.4rem}
h3{font-size:1.05rem}
p{margin:0 0 .9rem}
a{color:var(--blue-deep);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--flame-deep)}
hr{border:0;border-top:1px solid var(--hairline);margin:1.25rem 0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.page{padding-top:2rem;padding-bottom:4.5rem;min-height:60vh}
.narrow{max-width:470px;margin:2.5rem auto}
.muted{color:var(--ink-soft)}
.sm{font-size:.86rem}
.nowrap{white-space:nowrap}
.inline{display:inline}

/* ---------------------------------------------------------- masthead */

.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--hairline-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 6px 24px rgba(15,75,184,.06);
}
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.brand img{display:block;height:48px;width:auto}
.mark{ /* fallback if the logo image is ever missing */
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  border:2px solid var(--flame);border-radius:50%;color:var(--flame);font-weight:700;font-size:.85rem;
}
.brand-text{display:none}

.nav{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap}
.nav a{
  color:var(--ink);text-decoration:none;font-size:.93rem;font-weight:500;
  padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--blue-deep)}
.nav a.on{color:var(--flame-deep);border-bottom-color:var(--flame)}
.nav .who{font-size:.82rem;color:var(--ink-faint)}
.nav .btn,.nav .btn:hover{border-bottom:0}

/* ---------------------------------------------------------- buttons */

.btn{
  display:inline-block;background:var(--flame-deep);color:#fff;border:1px solid var(--flame-deep);
  padding:.65rem 1.25rem;border-radius:999px;font:inherit;font-size:.92rem;font-weight:600;
  text-decoration:none;cursor:pointer;box-shadow:var(--lift-1);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover{background:#97290a;border-color:#97290a;color:#fff;transform:translateY(-1px);box-shadow:var(--lift-2)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--blue-deep);border-color:rgba(15,75,184,.3);box-shadow:none}
.btn.ghost:hover{background:var(--blue-wash);border-color:var(--blue);color:var(--blue-deep)}
.btn.sm{padding:.4rem .85rem;font-size:.82rem}

/* ---------------------------------------------------------- bento grid */

.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  margin-bottom:2.5rem;
}
.bento > *{min-width:0}
.b-1{grid-column:span 1}
.b-2{grid-column:span 2}
.b-3{grid-column:span 3}
.b-4{grid-column:span 4}
.b-5{grid-column:span 5}
.b-6{grid-column:span 6}
.b-tall{grid-row:span 2}

/* a bento cell: a raised plane above the page */
.cell{
  position:relative;
  background:var(--surface);
  border:1px solid var(--hairline-soft);
  border-radius:var(--r);
  padding:1.3rem;
  box-shadow:var(--lift-1);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow:hidden;
}
a.cell{text-decoration:none;color:inherit;display:block}
a.cell:hover,.cell.hover:hover{
  transform:translateY(-3px);
  box-shadow:var(--lift-3);
  border-color:rgba(40,121,255,.28);
}

/* the dark hero plane — white on Eerie Black is 17.6:1 */
.cell.dark{
  background:
    radial-gradient(520px 320px at 85% -10%, rgba(235,79,41,.40), transparent 65%),
    radial-gradient(460px 300px at 0% 110%, rgba(40,121,255,.42), transparent 62%),
    #191919;
  border-color:rgba(255,255,255,.10);
  color:#fff;
  box-shadow:var(--lift-3);
  display:flex;flex-direction:column;justify-content:center;
  padding:2.2rem;
}
.cell.dark h1,.cell.dark h2{color:#fff}
.cell.dark .accent{color:var(--flame)}
.cell.dark p{color:rgba(255,255,255,.82)}
.cell.dark .eyebrow{color:#7FAEFF}
.cell.dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.cell.dark .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* a tinted plane, for stats */
.cell.tint{background:linear-gradient(160deg,var(--blue-wash),var(--surface) 70%)}
.cell.tint-flame{background:linear-gradient(160deg,var(--flame-wash),var(--surface) 70%)}
.cell.alert{background:linear-gradient(160deg,var(--flame-wash),var(--surface) 70%);border-color:rgba(176,51,15,.25)}

.eyebrow{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--blue-deep);margin-bottom:.5rem;
}
.hero-title{font-size:2.5rem;margin-bottom:.6rem}
.lede{font-size:1.04rem;color:var(--ink-soft);max-width:60ch}
.cell.dark .lede{color:rgba(255,255,255,.82)}
.hero-actions{margin-top:1.3rem;display:flex;gap:.6rem;flex-wrap:wrap}

/* a stat plane centres its figure, so a tall cell reads as deliberate rather than empty.
   Browsers without :has() simply top-align it, which is still fine. */
.cell:has(> .num){display:flex;flex-direction:column;justify-content:center}

.num{display:block;font-size:2.3rem;font-weight:700;color:var(--flame);line-height:1;letter-spacing:-.02em}
.cap{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.35rem}
.cell.tint .num{color:var(--blue-deep)}

.tile-n{display:block;font-size:1.7rem;font-weight:700;color:var(--blue-deep);line-height:1}
.tile-t{display:block;font-weight:600;font-size:.97rem;color:var(--ink);margin-top:.2rem}
.tile-s{display:block;font-size:.81rem;color:var(--ink-soft);margin-top:.25rem}

.rule{
  margin:2.4rem 0 1.1rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--hairline-soft);
}

/* legacy helpers still used by a few pages */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:2rem}
.stat{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r);padding:1.2rem;box-shadow:var(--lift-1)}
.stat.alert{background:linear-gradient(160deg,var(--flame-wash),var(--surface) 70%);border-color:rgba(176,51,15,.25)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:2rem}
.tile{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r);padding:1.2rem;
      text-decoration:none;color:var(--ink);box-shadow:var(--lift-1);transition:transform .16s,box-shadow .16s,border-color .16s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--lift-3);border-color:rgba(40,121,255,.28);color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r);padding:1.2rem;box-shadow:var(--lift-1)}
.card h3{margin:.5rem 0 .25rem;font-size:1rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--flame-deep)}

/* ---------------------------------------------------------- catalogue rows */

.list{margin-bottom:1.5rem}
.row{
  display:flex;gap:1.2rem;align-items:flex-start;justify-content:space-between;
  background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r);
  padding:1.1rem 1.25rem;margin-bottom:.65rem;box-shadow:var(--lift-1);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.row:hover{transform:translateY(-2px);box-shadow:var(--lift-2);border-color:rgba(40,121,255,.26)}
.row h3{margin:0 0 .2rem;font-size:1.02rem}
.row h3 a{color:var(--ink);text-decoration:none}
.row h3 a:hover{color:var(--flame-deep)}
.row-main{min-width:0}
.row-main p{margin:.15rem 0}
.row-side{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}

.chip{
  display:inline-block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:.25rem .6rem;border-radius:999px;background:var(--blue-wash);color:var(--blue-deep);
  border:1px solid rgba(40,121,255,.22);
}
.chip.tier-A{background:var(--blue-wash);color:var(--blue-deep);border-color:rgba(40,121,255,.3)}
.chip.tier-B{background:#F1F3F4;color:var(--ink-soft);border-color:var(--hairline)}
.chip.tier-C{background:var(--flame-wash);color:var(--flame-deep);border-color:rgba(176,51,15,.28)}

.avail{font-size:.79rem;color:var(--blue-deep);font-weight:500}
.avail.none{color:var(--flame-deep)}
.avail-big{font-size:1rem;font-weight:600;color:var(--blue-deep)}
.avail-big strong{font-size:1.4rem;color:var(--flame)}
.avail-big.none strong{color:var(--flame-deep)}

.tag{display:inline-block;font-size:.67rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
     background:var(--blue-wash);color:var(--blue-deep);border-radius:5px;padding:.12rem .4rem}
.tag.bad{background:var(--flame-wash);color:var(--flame-deep)}

/* ---------------------------------------------------------- detail page */

.crumb{font-size:.82rem;color:var(--ink-soft);margin-bottom:.6rem}
.detail{display:grid;grid-template-columns:1fr 300px;gap:1.8rem;align-items:start}
.detail-main{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-lg);
             padding:1.8rem;box-shadow:var(--lift-1)}
.detail h1{margin:.6rem 0 .3rem;font-size:1.85rem}
.detail .by{color:var(--ink-soft);margin-bottom:1rem}
.detail-side{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-lg);
             padding:1.4rem;box-shadow:var(--lift-2);position:sticky;top:94px}
.detail-side .btn{width:100%;text-align:center;margin-bottom:.55rem}
.meta{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:.9rem;margin-top:1.6rem;
      border-top:1px solid var(--hairline-soft);padding-top:1.1rem}
.meta dt{color:var(--ink-faint)}
.meta dd{margin:0}

/* ---------------------------------------------------------- forms */

.panel{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-lg);
       padding:1.6rem;box-shadow:var(--lift-2);margin-bottom:1.5rem}
.wide-form{max-width:700px}
label{display:block;margin-bottom:1rem;font-size:.86rem;font-weight:600;color:var(--ink)}
input,select,textarea{
  display:block;width:100%;margin-top:.35rem;padding:.65rem .8rem;
  border:1px solid rgba(25,25,25,.16);border-radius:var(--r-sm);background:#fff;
  font:inherit;font-size:.95rem;font-weight:400;color:var(--ink);
  transition:border-color .14s, box-shadow .14s;
}
input:hover,select:hover,textarea:hover{border-color:rgba(40,121,255,.4)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,121,255,.18);
}
input[type=file]{padding:.5rem}
textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.hint{font-size:.82rem;color:var(--ink-soft);margin:-.55rem 0 1rem}

.filters{
  display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-bottom:1.6rem;
  background:rgba(255,255,255,.7);border:1px solid var(--hairline-soft);border-radius:999px;
  padding:.6rem .8rem;box-shadow:var(--lift-1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.filters input,.filters select{width:auto;margin:0;min-width:150px;border-radius:999px}
.filters input[name=q]{flex:1 1 230px}
.inline-label{margin:0;display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ink-soft);font-weight:500}
.inline-label input{margin:0}

.head-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}

/* ---------------------------------------------------------- notes */

.note{background:var(--blue-wash);border:1px solid rgba(40,121,255,.2);border-left:4px solid var(--blue);
      border-radius:var(--r-sm);padding:.85rem 1.1rem;margin-bottom:1rem;font-size:.92rem}
.note.ok{background:#E8F7EC;border-color:#BFE3C9;border-left-color:#1E7A3C}
.note.warn{background:#FFF6E2;border-color:#F0DCAE;border-left-color:#9A6B00}
.note.bad{background:var(--flame-wash);border-color:rgba(176,51,15,.26);border-left-color:var(--flame-deep)}

/* ---------------------------------------------------------- tables */

.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
       border:1px solid var(--hairline-soft);border-radius:var(--r);overflow:hidden;
       margin-bottom:1.5rem;font-size:.92rem;box-shadow:var(--lift-1)}
.table th{background:var(--ink);color:#fff;text-align:left;font-weight:600;font-size:.74rem;
          letter-spacing:.07em;text-transform:uppercase;padding:.7rem}
.table td{padding:.7rem;border-top:1px solid var(--hairline-soft);vertical-align:top}
.table tbody tr:nth-child(even){background:#FAFCFD}
.table tbody tr:hover{background:var(--blue-wash)}
.table tr.overdue td{background:var(--flame-wash)}
.table .inline{display:inline-block;margin:0 .15rem 0 0}

.check{width:100%;border-collapse:collapse;margin-bottom:1.3rem;font-size:.9rem}
.check td{padding:.45rem .5rem;border-bottom:1px solid var(--hairline-soft)}
.yes{color:#1E7A3C;font-weight:700}
.no{color:var(--flame-deep);font-weight:700}

/* ---------------------------------------------------------- setup page */

body.plain{background:var(--cyan)}
.setup{max-width:580px;margin:3rem auto;background:var(--surface);border:1px solid var(--hairline-soft);
       border-radius:var(--r-lg);padding:2.2rem;box-shadow:var(--lift-3)}
.setup .brand{display:block;text-align:center;border-bottom:1px solid var(--hairline-soft);
              padding-bottom:1.1rem;margin-bottom:1.6rem}
.setup .brand img{height:56px;width:auto;margin:0 auto .6rem}
.setup .brand h1{font-size:1.45rem;margin:0}
.setup .brand .sub{color:var(--blue-deep);font-size:.9rem;margin:0}
.setup code{background:var(--blue-wash);color:var(--blue-deep);padding:.12rem .35rem;border-radius:5px;font-size:.88em}

/* ---------------------------------------------------------- footer */

.foot{border-top:1px solid var(--hairline-soft);background:rgba(255,255,255,.6);
      padding:1.8rem 0;font-size:.85rem;color:var(--ink-soft)}
.foot p{margin:0 0 .25rem}

/* ---------------------------------------------------------- print */

.print-head,.print-sign{display:none}

@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff !important;background-image:none !important;font-size:10pt;color:#000}
  /* .note covers the on-screen flash messages, which must never appear on a printed register */
  .masthead,.foot,.no-print,.filters,.btn,.note,.crumb{display:none !important}
  .page{padding:0;min-height:0}
  .wrap{max-width:none;padding:0}
  .print-head{display:block;text-align:center;border-bottom:1.5pt solid #0F4BB8;padding-bottom:6pt;margin-bottom:10pt}
  .print-head h2{font-size:16pt;margin:0;color:#B0330F}
  .print-head h3{font-size:12pt;margin:6pt 0 2pt;color:#191919}
  .print-head p{font-size:9pt;margin:0;color:#444}
  .table{border:1px solid #999;font-size:8.5pt;box-shadow:none;border-radius:0}
  .table th{background:#0F4BB8 !important;color:#fff !important;padding:4pt;
            -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .table td{padding:3.5pt 4pt;border-top:1px solid #ccc}
  .table tbody tr:nth-child(even){background:#F2F6FA !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .table tbody tr:hover{background:transparent !important}
  .table tr.overdue td{background:#FDEBE6 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-sign{display:flex;justify-content:space-between;margin-top:28pt;font-size:9pt}
  .print-sign>div{width:45%;text-align:center}
  .sig-line{display:block;border-top:1px solid #333;margin-bottom:4pt}
}

/* ---------------------------------------------------------- responsive */

@media (max-width:980px){
  .detail{grid-template-columns:1fr}
  .detail-side{position:static}
  .b-4,.b-5{grid-column:span 6}
  .b-1,.b-2{grid-column:span 3}
  .b-3{grid-column:span 3}
}

@media (max-width:720px){
  .wrap{padding:0 16px}
  .bento{gap:12px}
  .b-1,.b-2,.b-3,.b-4,.b-5,.b-6{grid-column:span 6}
  .b-tall{grid-row:span 1}
  .hero-title{font-size:1.9rem}
  h1{font-size:1.7rem}
  .cell.dark{padding:1.6rem}
  .two{grid-template-columns:1fr}
  .row{flex-direction:column}
  .row-side{flex-direction:row;align-items:center;text-align:left}
  .mast-inner{min-height:0;padding:.7rem 0}
  .brand img{height:34px}
  .nav{gap:.85rem;font-size:.9rem}
  .filters{border-radius:var(--r);padding:.7rem}
  .filters input,.filters select{min-width:0;flex:1 1 140px}
  .table{display:block;overflow-x:auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
  a.cell:hover,.row:hover,.btn:hover{transform:none}
}