/* Addon pages (/addons/<slug>/) and the chooser on /addons/.
   Sits on top of addons-showcase.css (tier colours, .addon, .roster-card, .shot-frame, .pill) and info-blocks.css (.ib-* cards). */

/* ---- top of an addon page ---- */
.ap-top{ padding:56px 0 34px; }
.ap-top h1{ font-size:clamp(34px,5vw,58px); line-height:1.06; margin:0 0 16px; text-shadow:0 0 40px color-mix(in srgb,var(--t) 35%,transparent); }
.ap-h1-sub{ display:block; margin-top:8px; font-size:.44em; line-height:1.25; letter-spacing:.02em; color:var(--tb); font-family:'Chakra Petch',sans-serif; font-weight:600; text-shadow:none; }
.ap-top .addon-shot{ display:block; width:100%; height:auto; max-height:440px; object-fit:contain; border-radius:5px; }
.ap-facts{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:34px 0 0; }
.ap-facts div{ padding:12px 16px; border:1px solid color-mix(in srgb,var(--t) 30%,#2a231c); border-radius:10px; background:rgba(255,255,255,.025); }
.ap-facts dt{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tb); }
.ap-facts dd{ margin:3px 0 0; font-size:15px; font-weight:600; color:#f4eadc; }

/* ---- text blocks ---- */
.ap-sections, .ap-hub{ padding:28px 0 70px; }
.ap-sections .ib-block{ --ib:var(--tb); }
.ap-card p{ margin:0 0 14px; }
.ib .ap-h3{ margin:26px 0 8px; font:700 20px/1.25 'Chakra Petch',sans-serif; color:#f7f0e7; }
.ib .ap-h3:first-child{ margin-top:0; }
.ap-fig{ margin:18px 0 24px; padding:12px; border:1px solid #33291f; border-radius:12px; background:rgba(255,255,255,.02); max-width:100%; }
.ap-fig img{ display:block; max-width:100%; height:auto; border-radius:6px; margin:0 auto; }
.ap-fig figcaption{ margin-top:10px; font-size:13.5px; line-height:1.5; color:#a89a8b; text-align:center; }
.ap-note{ padding:12px 16px; border-left:3px solid var(--tb,#ffc857); border-radius:0 10px 10px 0; background:rgba(255,255,255,.03); }
.ap-list{ margin:6px 0 0; padding-left:22px; }
.ap-list li{ margin:0 0 10px; font-size:16px; line-height:1.7; color:#d6cabc; }
.ap-list li b{ color:#f4eadc; }
.ap-card code{ padding:1px 7px; border-radius:5px; background:rgba(255,255,255,.07); color:#ffd9a8; font-size:.92em; }

/* numbered install steps */
.ap-steps{ list-style:none; margin:4px 0 16px; padding:0; counter-reset:ap; display:grid; gap:12px; }
.ap-steps li{ counter-increment:ap; position:relative; padding:14px 16px 14px 62px; border:1px solid #33291f; border-radius:12px; background:rgba(255,255,255,.025); }
.ap-steps li::before{ content:counter(ap); position:absolute; left:16px; top:14px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb,var(--tb,#ffc857) 60%,transparent); background:color-mix(in srgb,var(--tb,#ffc857) 14%,transparent); color:var(--tb,#ffc857); font:700 16px 'Chakra Petch',sans-serif; }
.ap-steps b{ display:block; margin-bottom:3px; font-size:17px; color:#f7f0e7; }
.ap-steps span{ display:block; font-size:15.5px; line-height:1.65; color:#d6cabc; }

/* tables */
.ap-scroll{ overflow-x:auto; margin:8px 0 14px; border:1px solid #33291f; border-radius:10px; }
.ap-table{ width:100%; min-width:520px; border-collapse:collapse; font-size:15px; line-height:1.55; }
.ap-table th, .ap-table td{ padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid #2c241b; color:#d6cabc; }
.ap-table th{ font:600 12px/1.2 'Chakra Petch',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:#a89a8b; background:rgba(255,255,255,.03); white-space:nowrap; }
.ap-table tbody tr:last-child td{ border-bottom:0; }
.ap-table td:first-child{ white-space:nowrap; }
.ap-hub .ap-table td:first-child{ white-space:normal; }
.ap-table a{ color:var(--tb,#ffc857); }

/* inline buttons and links inside a block */
.ap-inline-btn{ display:inline-block; margin:4px 12px 4px 0; padding:11px 20px; border-radius:8px; background:var(--tb); color:#0c0907 !important; font-weight:700; text-decoration:none !important; }
.ap-inline-link{ display:inline-block; margin:4px 0; font-weight:600; }

/* download panel */
.ap-dl{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.ap-dl-txt{ flex:1 1 320px; min-width:0; }
.ap-dl-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* other addons */
.ap-others{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ap-others .roster-card{ min-height:0; }
.ib .ib-note a, .ib .ap-note a{ color:var(--tb,#ffc857); }

@media (max-width:1100px){ .ap-others{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .ap-top{ padding:34px 0 24px; }
  .ap-top .addon-index{ display:none; }
  .ap-others{ grid-template-columns:1fr; }
  .ap-steps li{ padding:14px 14px 14px 56px; }
  .ap-table{ min-width:0; font-size:14px; }
  .ap-table th, .ap-table td{ padding:9px 10px; }
  .ap-table td:first-child{ white-space:normal; }
  .ap-dl{ display:block; }
  .ap-dl-btns{ margin-top:14px; }
}