/* =====================================================================
   Ahlena theme — a separate layer on top of the original look.
   Everything here is scoped to html.ahl. Remove that class (Settings -> Appearance -> Classic)
   and none of these rules apply: the original look is exactly as it was.
   Palette from the Ahlena logo: charcoal, gold, warm cream. Status colours (paid / unpaid / partial)
   keep their meaning and are NOT changed.
   ===================================================================== */

/* ---------- the website (light) ---------- */
html.ahl{
  --ink:#2B2A29; --ink-soft:#55524F; --paper:#F7F4EF; --muted:#7A746B;
  --line:#E3DDD3; --line-soft:#EDE8DF;
  --ahl-gold:#AE9876; --ahl-gold-deep:#8C7650; --ahl-charcoal:#3A3938; --ahl-cream:#FAF8F4;
}
html.ahl .btn.primary{ background:linear-gradient(180deg,#4A4744,#2F2D2B); border-color:#2F2D2B; box-shadow:0 2px 6px rgba(47,45,43,.22) }
html.ahl .btn.primary:hover{ background:linear-gradient(180deg,#55514D,#363432) }
/* in the iPhone app the primary button takes its colours from the theme tokens: charcoal with white text in light mode, gold with dark text in dark mode
   (the charcoal gradient above made it dark-on-dark in dark mode, which looked disabled) */
html.ahl.native-ios .btn.primary, html.ahl.native-ios .btn.primary:hover{ background:var(--pbg); border-color:var(--pbg); color:var(--pfg); box-shadow:none }
html.ahl .rail{ background:linear-gradient(180deg,#363432 0%,#232220 100%) }
html.ahl .gate{ background:radial-gradient(120% 90% at 100% 0%,#5C5243 0%,rgba(92,82,67,0) 60%), linear-gradient(160deg,#3B3937,#1B1A19) }
html.ahl .ledger{ background:radial-gradient(120% 140% at 100% 0%,#6E6049 0%,rgba(110,96,73,0) 55%), linear-gradient(160deg,#403D3A 0%,#2D2B29 55%,#1F1E1C 100%) }
html.ahl .ledger .fxsel option{ color:#2B2A29 }
html.ahl .toast{ background:#2B2A29; box-shadow:0 12px 30px rgba(30,28,26,.3) }
html.ahl .morerow svg{ color:var(--ahl-gold-deep) }
html.ahl .brand p{ color:#B9B1A4 }

/* ---------- the iPhone app, light ---------- */
html.ahl.native-ios{
  --bg:#F5F2EC; --paper:var(--bg); --card:#FFFFFF; --fill:#EEE9E0; --fill-2:#E5DFD3;
  --ink:#2B2A29; --ink-soft:#4E4B47; --muted:#7A746B;
  --line:rgba(72,66,56,.16); --line-soft:rgba(72,66,56,.09);
  --brass:#9C8456; --brass-tint:#F3ECDD; --gold:#AE9876;
  --pbg:#3A3938; --pfg:#FFFFFF;
  --bar:rgba(245,242,236,.78);
  --focus:0 0 0 3px rgba(174,152,118,.35);
}
html.ahl.native-ios .morerow svg{ color:var(--ahl-gold-deep) }

/* ---------- the iPhone app, dark: warm charcoal, cream text, gold accents ---------- */
@media (prefers-color-scheme: dark){
  html.ahl.native-ios{
    --bg:#141312; --paper:var(--bg); --card:#201F1D; --fill:#2B2927; --fill-2:#383532;
    --ink:#F4EFE7; --ink-soft:#D2CBBF; --muted:#9E978C;
    --line:rgba(235,225,205,.20); --line-soft:rgba(235,225,205,.11);
    --brass:#D9BF8A; --brass-tint:#352E1E; --gold:#D9BF8A;
    --pbg:#B79F72; --pfg:#1C1B1A;
    --bar:rgba(20,19,18,.72);
    --glass:rgba(52,48,43,.50); --glass-strong:rgba(36,34,31,.80); --glass-tint:rgba(255,245,225,.07);
    --glass-edge:rgba(255,245,225,.20); --glass-shadow:0 10px 32px rgba(0,0,0,.55);
    --focus:0 0 0 3px rgba(217,191,138,.35);
  }
  html.ahl.native-ios .morerow svg{ color:var(--gold) }
}

/* ---------- Overview widgets: clickable cards (31.43) ---------- */
[data-go]{ cursor:pointer; -webkit-tap-highlight-color:transparent }
.stat[data-go]{ position:relative; transition:transform .12s ease, box-shadow .12s ease }
.stat[data-go]:active, .wrow:active, .cfwidget:active{ transform:scale(.985) }
.stat[data-go]::after{ content:"\203A"; position:absolute; bottom:10px; inset-inline-end:14px; font-size:16px; line-height:1; color:var(--muted); opacity:.7 }
html[dir="rtl"] .stat[data-go]::after{ content:"\2039" }
.ledger .bar [data-go]{ cursor:pointer }
.wlist{ padding:2px 0 }
.wrow{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-top:1px solid var(--line-soft); cursor:pointer }
.wrow:first-child{ border-top:0 }
.wmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.wmain b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wmain .muted{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wside{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto }
html[dir="rtl"] .wside{ align-items:flex-start }
.wfoot{ padding:8px 16px 12px; border-top:1px solid var(--line-soft) }

/* collection breakdown under the big band (31.44) */
.herodetail[hidden]{ display:none }
.hrow{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-top:1px solid var(--line-soft); cursor:pointer }
.hrow:first-child{ border-top:0 }
.hrow > i{ width:10px; height:10px; border-radius:50%; flex:0 0 auto }
.hmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.hside{ display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto }
html[dir="rtl"] .hside{ align-items:flex-start }
.hside b{ font-size:16px }
.hsum{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--line-soft); font-size:13.5px }
.hhead{ margin:0; padding:12px 16px 4px; font-size:13px; color:var(--muted); font-weight:600; border-top:1px solid var(--line-soft) }
.hbar{ display:grid; grid-template-columns:78px 1fr 52px auto; align-items:center; gap:8px; padding:5px 16px; font-size:13px }
.hbar .minibar{ height:7px }
@media (max-width:480px){ .hbar{ grid-template-columns:70px 1fr 48px; } .hbar .muted{ grid-column:2 / 4; font-size:12px } }

.ledger[data-go]{ cursor:pointer; position:relative; -webkit-tap-highlight-color:transparent; transition:transform .12s ease }
.ledger[data-go]:active{ transform:scale(.99) }
.ledger[data-go]::after{ content:"\203A"; position:absolute; bottom:12px; inset-inline-end:18px; font-size:24px; line-height:1; color:#fff; opacity:.8 }
html[dir="rtl"] .ledger[data-go]::after{ content:"\2039" }
.hero-pct{ display:flex; align-items:baseline; gap:10px; margin:2px 4px 14px }
.hero-pct b{ font-size:44px; letter-spacing:-.02em }
.hero-pct span{ color:var(--muted); font-size:14px }

/* the thing a notification opened is highlighted for a moment */
.hl{ animation:hlpulse 3.5s ease-out 1; }
@keyframes hlpulse{ 0%,60%{ box-shadow:0 0 0 3px var(--brass, #B08D57), 0 6px 22px rgba(176,141,87,.35); } 100%{ box-shadow:0 0 0 0 transparent; } }

/* big screens (the website on a desktop): use the whole width instead of a 1200px column */
@media(min-width:1280px){
  html .content{ max-width:none; padding:26px 34px }
  html .stats{ grid-template-columns:repeat(auto-fill,minmax(205px,1fr)) }
  html .grid2{ grid-template-columns:repeat(auto-fit,minmax(480px,1fr)) }
}
@media(min-width:1600px){
  html .topgrid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:0 26px; align-items:start }
  html .cursecs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; align-items:start }
  html .ucards{ grid-template-columns:repeat(auto-fill,minmax(310px,1fr)) }
}
@media(min-width:2200px){
  html .cursecs{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}