/* =====================================================================
   Best AI Apps page — color + "get it" buttons · 2026-10-18
   Each app card carries its own color (set inline as --app, --app-soft,
   --app-ink). Illustrations: img/illos/apps/*.svg (Spark Doodles family,
   original drawings, no app logos). Loaded BEFORE v8-access.css, so the
   accessibility color modes still win; the few rules they would erase
   are restated at the bottom.
   ===================================================================== */
.app-grid{gap:1.4rem}
.app-card.app-color{
  background:linear-gradient(180deg,var(--app-soft) 0,var(--app-soft) 120px,#fff 260px);
  border-top:8px solid var(--app);
  border-radius:var(--radius-lg,22px);
  box-shadow:0 2px 0 rgba(36,26,58,.08),0 10px 24px -14px rgba(36,26,58,.35);
  padding:1.4rem 1.45rem 1.5rem}
.section-paper .app-card.app-color{background:linear-gradient(180deg,var(--app-soft) 0,var(--app-soft) 120px,#fff 260px)}
.app-card .app-art{display:block;width:112px;height:112px;margin:0 0 .8rem;
  filter:drop-shadow(5px 5px 0 rgba(36,26,58,.10));transition:transform .25s ease}
.app-card:hover .app-art{transform:rotate(-4deg) scale(1.04)}
@media (prefers-reduced-motion:reduce){.app-card:hover .app-art{transform:none}}
.app-card.app-color h3{font-size:1.3rem}
.app-card.app-color .app-for{color:var(--app-ink);font-size:.95rem;font-weight:700}
.app-card.app-color p{font-size:1rem}

/* note above the grids */
.links-note{display:flex;gap:1rem;align-items:flex-start;background:#E9F6EC;border:2px solid #1E7B3C;
  border-radius:16px;padding:1rem 1.2rem;margin:0 0 1.6rem;max-width:62rem}
.links-note img{flex:0 0 auto}
.links-note p{margin:0;color:var(--ink,#241A3A)}

/* get-it buttons */
.get-it{margin-top:auto;padding-top:.9rem}
.get-it-label{font-weight:700;font-size:.95rem;margin:0 0 .5rem;color:var(--ink,#241A3A)}
.get-it ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.get-it li{margin:0}
.get-btn{display:flex;align-items:center;gap:.7rem;min-height:3.1rem;padding:.5rem .9rem;
  background:#fff;color:#241A3A;text-decoration:none;font-weight:700;
  border:2px solid var(--app);border-left-width:8px;border-radius:12px;line-height:1.2;
  transition:background-color .15s ease,transform .15s ease}
.get-btn svg{flex:0 0 auto;color:var(--app-ink)}
.get-btn .gb-text{display:flex;flex-direction:column}
.get-btn .gb-main{font-size:1rem}
.get-btn .gb-sub{font-size:.85rem;font-weight:400;color:#4A3F5C}
.get-btn::after{content:"\2197";margin-left:auto;font-size:1.1rem;color:var(--app-ink)}
.get-btn:hover{background:var(--app-soft);color:#241A3A;transform:translateX(2px)}
.get-btn:hover .gb-main{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.get-btn:hover{transform:none}}
.app-coming .card-link{margin-top:.4rem}

/* ---------- color modes (restated so v8-access doesn't erase them) ---------- */
html[data-theme="dark"] body .app-card.app-color{border-top-color:var(--app)}
html[data-theme="dark"] .app-card.app-color .app-for{color:var(--app-soft)}
html[data-theme="dark"] .get-btn{background:#17112A;color:#F7F4FB}
html[data-theme="dark"] .get-btn svg,html[data-theme="dark"] .get-btn::after{color:var(--app-soft)}
html[data-theme="dark"] .get-btn .gb-sub{color:#C9BEDB}
html[data-theme="dark"] .get-btn:hover{background:#2A2142;color:#fff}
html[data-theme="dark"] .links-note{background:#1E2A22;border-color:#7FD39A}
html[data-theme="dark"] .links-note p,html[data-theme="dark"] .get-it-label{color:#EEE9F5}
@media (prefers-color-scheme:dark){
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) body .app-card.app-color{border-top-color:var(--app)}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .app-card.app-color .app-for{color:var(--app-soft)}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .get-btn{background:#17112A;color:#F7F4FB}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .get-btn svg,
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .get-btn::after{color:var(--app-soft)}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .get-btn .gb-sub{color:#C9BEDB}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .get-btn:hover{background:#2A2142;color:#fff}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .links-note{background:#1E2A22;border-color:#7FD39A}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) :is(.links-note p,.get-it-label){color:#EEE9F5}
}
html[data-theme="contrast"] .app-card.app-color .app-for,
html[data-theme="contrast"] :is(.get-btn,.get-btn .gb-sub,.get-btn svg,.get-btn::after,.links-note p,.get-it-label){color:#000}
html[data-theme="contrast"] .get-btn{background:#fff;border-color:#000}
html[data-theme="contrast"] .links-note{background:#fff;border-color:#000}
@media (prefers-contrast:more) and (prefers-color-scheme:light){
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .app-card.app-color .app-for,
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) :is(.get-btn,.get-btn .gb-sub,.get-btn svg,.get-btn::after,.links-note p,.get-it-label){color:#000}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .get-btn{background:#fff;border-color:#000}
}
@media (forced-colors:active){.get-btn{border:2px solid LinkText}.app-card.app-color{border-top:8px solid CanvasText}}
@media print{.get-it ul{display:block}.get-btn{border:0;padding:0;min-height:0}.get-btn::after{content:" (" attr(href) ")";font-size:.8rem}}
.app-card.app-color .fact-row dt{flex:0 0 auto;white-space:nowrap}

/* "Show me how" step-by-step panels (2026-10-19) */
.how-to{margin:.9rem 0 0;border:2px solid var(--app);border-radius:12px;background:#fff}
.how-to summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;min-height:3rem;
  padding:.5rem .9rem;font-weight:700;color:var(--app-ink);border-radius:10px}
.how-to summary::-webkit-details-marker{display:none}
.how-to summary::before{content:"+";display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--app);color:#fff;font-size:1.2rem;line-height:1;flex:0 0 auto}
.how-to[open] summary::before{content:"\2212"}
.how-to summary:hover{background:var(--app-soft)}
.how-to-body{padding:.2rem 1rem 1rem}
.how-to-body h4{font-size:1.02rem;margin:.6rem 0 .35rem}
.how-to-body ol{margin:0;padding-left:1.3rem}
.how-to-body li{margin:.45rem 0;font-size:1rem;line-height:1.5}
.how-to-body p{font-size:1rem;margin:.3rem 0 0}
html[data-theme="dark"] .how-to{background:#17112A}
html[data-theme="dark"] .how-to summary{color:var(--app-soft)}
html[data-theme="dark"] .how-to summary:hover{background:#2A2142}
html[data-theme="dark"] .how-to summary::before{color:#17112A;background:var(--app-soft)}
@media (prefers-color-scheme:dark){
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .how-to{background:#17112A}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .how-to summary{color:var(--app-soft)}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .how-to summary:hover{background:#2A2142}
 html:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="contrast"]) .how-to summary::before{color:#17112A;background:var(--app-soft)}
}
html[data-theme="contrast"] .how-to{border-color:#000;background:#fff}
html[data-theme="contrast"] .how-to summary{color:#000}
html[data-theme="contrast"] .how-to summary::before{background:#000;color:#fff}
@media print{.how-to-body{display:block}}
/* an open "Show me how" widens its card to the full row, so the steps read comfortably */
@media (min-width:641px){
 .app-grid>.app-card:has(.how-to[open]){grid-column:1/-1}
 .app-card:has(.how-to[open]) .how-to-body ol:has(li:nth-child(6)){columns:2 22rem;column-gap:2.4rem}
 .app-card:has(.how-to[open]) .how-to-body li{break-inside:avoid}
 .app-card:has(.how-to[open])>p{max-width:62rem}
 .app-card:has(.how-to[open]) :is(.app-facts,.get-it ul){max-width:34rem}
}