/* v0.8.2 "lively": Home, My home and Settings were white boxes with line icons. Three changes, all on the existing
   tokens (style.css, redesign.css), no new colours:
   1. Pictures, not icons: saved things show their kind's 3D picture (public/img/kinds) when there's no photo.
   2. A coloured hero on every main page: Home shows a fanned stack of your things; My home and Settings get the
      dark aurora band (.band.mini) with the key numbers or your account on it.
   3. Colour-coded tiles and grouped rows: each stat tile is washed in its own tone; My home's tools are a grid of
      coloured tiles; Settings is grouped, with solid colour squircle icons as in the phone's own Settings app. */

/* ---------- 1. pictures, not icons ---------- */
.thumb .kimg, .ipic .kimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--tone, #000) 22%, transparent)); }
.thumb .kimg { padding: 4px; }
.ipic .kimg { padding: 8% 14%; transition: transform .5s var(--spring); }
.icard:hover .ipic .kimg { transform: translateY(-3px) scale(1.03); }
.thumb:has(.kimg) > svg, .ipic:has(.kimg) > svg { display: none; }
.li .thumb:has(.kimg) { background: radial-gradient(90% 90% at 30% 15%, color-mix(in srgb, var(--tone) 30%, transparent), transparent 70%), var(--tone-soft); }

/* ---------- 2. coloured heroes ---------- */
/* Home: your things fanned out on the band. */
.pile { display: flex; align-items: center; text-decoration: none; color: var(--on-band); padding-left: 10px; }
.pile .thumb { position: relative; width: 52px; height: 52px; border-radius: 16px; margin-left: -10px; flex: none; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 2.5px #12393a, 0 8px 18px rgba(0,0,0,.28); transition: transform .4s var(--spring-fast); }
.pile .thumb:nth-child(odd) { transform: rotate(-5deg); } .pile .thumb:nth-child(even) { transform: rotate(4deg) translateY(-2px); }
.pile:hover .thumb { transform: none; }
.pile .thumb svg { width: 24px; height: 24px; }
.pile .thumb img:not(.kimg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.pile .thumb.more { background: rgba(255,255,255,.12); color: var(--on-band); font-weight: 800; font-size: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pile .go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-weight: 700; color: var(--mint); }
.pile .go svg { width: 16px; height: 16px; }

/* My home and Settings: a shorter band. */
.band.mini { gap: 14px; padding-bottom: 22px; }
.band.mini .eyebrow { color: var(--on-band-2); }
.band.mini h1 { font-size: clamp(1.75rem, 7.6vw, 2.2rem); color: var(--on-band); }
.btn.glassy { background: rgba(255,255,255,.1); color: var(--on-band); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis > div { display: grid; gap: 1px; padding: 11px 12px; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.08); }
.kpis .k { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--on-band-2); }
.kpis b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; color: var(--on-band); font-variant-numeric: tabular-nums; }
.kpis .s { font-size: 11.5px; color: var(--on-band-2); line-height: 1.3; }
.bsearch { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--on-band-2); }
.bsearch svg { width: 20px; height: 20px; flex: none; }
.bsearch input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--on-band); }
.bsearch input::placeholder { color: var(--on-band-2); }
.bsearch:focus-within { box-shadow: inset 0 0 0 2px var(--mint); }

.me { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--on-band); }
.me .av { width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: #04211d;
  background: linear-gradient(135deg, #7ff0de, #5fe3cf 55%, #e8be74); box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 10px 24px rgba(95,227,207,.25); }
.me .av svg { width: 28px; height: 28px; }
.me b { display: block; font-size: 1.35rem; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.me .grow > span { display: block; font-size: var(--t-sm); color: var(--on-band-2); line-height: 1.35; }
.me > svg { width: 20px; height: 20px; color: var(--on-band-2); flex: none; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--on-band);
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pills svg { width: 14px; height: 14px; color: var(--mint); }

/* A back-button title over the dark band reads light, and darkens with the glass bar (as the logo does on Home). */
@media (max-width: 719px) {
  body:has(#main > .band:first-child) header.bar h2 { color: var(--on-band); }
  body:has(#main > .band:first-child) header.bar .iconbtn { color: var(--ink); }
}
@supports (animation-timeline: scroll()) { @media (max-width: 719px) {
  body:has(#main > .band:first-child) header.bar h2 { animation: brand-ink linear both; animation-timeline: scroll(root); animation-range: 120px 220px; }
} }

/* ---------- 3. colour-coded tiles and grouped rows ---------- */
/* Home stat tiles: washed in their own colour, a solid icon, the number in the tone's ink. */
.tiles.four .tile[class*="tone-"] { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 65%), linear-gradient(160deg, var(--tone-soft), var(--surface) 90%); }
.tiles.four .tile[class*="tone-"]::after { background: radial-gradient(circle, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%); }
.tile[class*="tone-"] .ti { background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 82%, #fff), var(--tone)); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--tone) 30%, transparent); }
.tile[class*="tone-"] .v { color: var(--tone-ink); }
.tile[class*="tone-"] .l { color: var(--ink-2); }
.tile.bad[class*="tone-"] .ti { background: var(--bad); }

/* Solid colour squircle icons. */
.sq { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 80%, #fff), var(--tone)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px color-mix(in srgb, var(--tone) 28%, transparent); }
.sq svg { width: 22px; height: 22px; }
.li > .sq { width: 46px; height: 46px; border-radius: 14px; }
.li.tip-gold { background: linear-gradient(100deg, color-mix(in srgb, #b38a12 12%, var(--surface)), var(--surface) 70%); }

/* My home tools. */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool { position: relative; overflow: hidden; display: grid; gap: 2px; align-content: start; padding: 14px; border-radius: var(--r); border: 0; text-align: left; font: inherit; cursor: pointer; text-decoration: none; color: var(--ink);
  background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 65%), var(--surface); box-shadow: var(--shadow-1); transition: transform .35s var(--spring-fast), border-radius .35s var(--spring); }
.tool:active { transform: scale(.96); border-radius: 28px; }
.tool .sq { margin-bottom: 10px; }
.tool b { font-size: 15px; letter-spacing: -.01em; line-height: 1.25; }
.tool > span:last-child { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

/* Settings: section headings and grouped lists. */
.sgroup { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sgroup .sq { width: 30px; height: 30px; border-radius: 9px; }
.sgroup .sq svg { width: 17px; height: 17px; }
.sgroup h2 { font-size: 1.15rem; }
.glist { display: grid; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; }
.glist .li { border-radius: 0; box-shadow: none; background: transparent; border: 0; min-height: 68px; }
.glist .li + .li { box-shadow: inset 0 1px 0 var(--line); }
.glist .li .s { line-height: 1.4; }
.glist .stack-li { align-items: flex-start; }
.glist .stack-li .btns { margin-top: 10px; }
.glist .li .switch { align-self: center; }

@media (min-width: 960px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
  .band.mini { grid-template-columns: 1fr; }
}
@media (prefers-reduced-transparency: reduce) {
  .bsearch, .kpis > div, .pills span, .btn.glassy, .pile .thumb.more { backdrop-filter: none; background: #1b4547; }
}
@media (forced-colors: active) {
  .tool, .glist, .kpis > div { border: 1px solid CanvasText; }
}
/* With less motion the top bar is always glass, so the light title and logo over the band would vanish into it. */
@media (prefers-reduced-motion: reduce) and (max-width: 719px) {
  body:has(#main > .band:first-child) header.bar .brand, body:has(#main > .band:first-child) header.bar h2 { color: var(--ink); }
  body:has(#main > .band:first-child) header.bar .brand b { color: var(--accent-text); }
}

/* The passport's hero: with no product photo, the kind's 3D picture sits on a soft plate instead of a bare icon. */
.hero .plate:has(.kimg) { width: 176px; height: 176px; border-radius: 40px; background: radial-gradient(90% 90% at 30% 15%, color-mix(in srgb, var(--tone) 28%, #fff), #fff 75%); box-shadow: 0 14px 34px color-mix(in srgb, var(--tone) 22%, transparent); }
:root[data-theme="dark"] .hero .plate:has(.kimg) { background: radial-gradient(90% 90% at 30% 15%, color-mix(in srgb, var(--tone) 40%, var(--surface)), var(--surface-2) 75%); }
.hero .plate .kimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; z-index: 1; }
.hero .plate:has(.kimg) > svg { display: none; }