/* ---------- Visual layer: icon language, per-area accents, SVG watermarks, skeletons, micro-interactions ----------
   Everything here is decoration on top of the working UI. Colours come from tokens.css, so light and dark follow
   automatically; motion is switched off by the reduced-motion rules in base.css and effects.css. */

/* ---- Icons (replace emoji at render time, see js/core/icons.js) ---- */
.ico, .has-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.16em; line-height: 1; }
.ico-svg { width: 1em; height: 1em; display: block; flex: none; overflow: visible; }
.ico-line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-tint { fill: currentColor; fill-opacity: .17; stroke: none; }
.ico-lead { margin-inline-end: .1em; }
.ico-text { display: inline; }

/* Slot icons carry the brand colour; status icons carry their meaning colour. */
.has-ico, .ico-lead { color: var(--plum); }
.has-ico.t-danger, .ico-lead.t-danger { color: var(--danger); }
.has-ico.t-caution, .ico-lead.t-caution { color: var(--caution); }
.has-ico.t-good, .ico-lead.t-good { color: var(--good); }
.ico-dot .ico-line { fill: currentColor; fill-opacity: .92; }
.ico-dot .ico-tint { display: none; }

.banner.info .banner-ico { color: var(--plum); }
.banner.good .banner-ico { color: var(--good); }
.banner.caution .banner-ico { color: var(--caution); }
.banner.danger .banner-ico { color: var(--danger); }
.banner .banner-ico.has-ico { width: 1.4rem; height: 1.4rem; font-size: 1.4rem; margin-top: .05rem; }

/* Buttons and chips: the icon takes the label colour so primary/danger buttons stay legible. */
.btn .ico-lead, .btn .has-ico, .chip .ico-lead, button .ico-lead, summary .ico-lead { color: currentColor; }
.btn .ico-lead { font-size: 1.1em; }

/* Navigation: sized to sit in the existing 1.5rem slot. */
.nav .nav-ico.has-ico, .bottombar .nav-ico.has-ico { color: currentColor; }
.nav .nav-ico.has-ico { width: 1.5rem; height: 1.5rem; }
.bottombar .nav-ico.has-ico { width: 1.5rem; height: 1.5rem; }
.bottombar a[aria-current="page"] .nav-ico.has-ico { color: var(--plum); }
.nav a[aria-current="page"] .ico-tint, .bottombar a[aria-current="page"] .ico-tint { fill-opacity: .32; }

/* Header controls and the greeting. */
.icon-btn.has-ico { font-size: 1.4rem; color: var(--ink-soft); }
.icon-btn.has-ico:hover { color: var(--plum-deep); }
.em-ico.has-ico { color: currentColor; font-size: 1.15em; }
.today-hero.has-ico { display: flex; width: 4rem; height: 4rem; font-size: 4rem; margin: 0 auto; }
.home-greet .ico-lead { font-size: 1.25em; margin-inline-end: .35em; vertical-align: -0.2em; }

/* Tool tiles and cards: an icon plate gives each tile a calm focal point. */
.tile .tile-ico.has-ico, .home-card-ico.has-ico, .today-option-ico.has-ico, .guide-chap-ico.has-ico, .me-ref-ico.has-ico, .me-tl-ico.has-ico, .navbar-ico.has-ico {
  width: 2.1em; height: 2.1em; border-radius: 14px; background: color-mix(in srgb, var(--plum) 9%, transparent);
}
.tile .tile-ico.has-ico .ico-svg, .home-card-ico.has-ico .ico-svg, .today-option-ico.has-ico .ico-svg, .guide-chap-ico.has-ico .ico-svg,
.me-ref-ico.has-ico .ico-svg, .me-tl-ico.has-ico .ico-svg, .navbar-ico.has-ico .ico-svg { width: 62%; height: 62%; }
.today-big-ico.has-ico, .life-ring-icon.has-ico { width: 1.2em; height: 1.2em; }

/* ---- Per-area accent: decorative only (watermark, empty-state scenes, heading mark). Text colours never use it. ---- */
html { --area: var(--plum); }
html[data-area="care"] { --area: var(--blossom); }
html[data-area="lifestyle"] { --area: var(--sage); }
html[data-area="diet"] { --area: var(--gold); }
html[data-area="mindful"] { --area: var(--lavender); }
html[data-area="me"] { --area: var(--plum-deep); }
html[data-area="guide"] { --area: var(--gold-deep); }
html[data-area="settings"] { --area: var(--ink-soft); }
html { --area-soft: color-mix(in srgb, var(--area) 15%, var(--card)); }

/* ---- Page-header watermark: SVG art (assets/art/wm-*.svg, from tools/gen_art.mjs) used as a mask and tinted with the
   area accent. Sits behind the heading at low opacity; the drift animation is in effects.css.
   The box exists only where an area has art (content: "" is set in the per-area rules): a page with no area, such as emergency
   or search, would otherwise draw the unmasked tint as a solid square. ---- */
.page-head::before {
  content: none; position: absolute; inset-inline-end: -8px; top: -26px; width: 8.5rem; height: 8.5rem;
  background: var(--area); opacity: .13; pointer-events: none; z-index: -1;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
html[data-area="home"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-home.svg); mask-image: url(../assets/art/wm-home.svg); }
html[data-area="health"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-health.svg); mask-image: url(../assets/art/wm-health.svg); }
html[data-area="care"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-care.svg); mask-image: url(../assets/art/wm-care.svg); }
html[data-area="lifestyle"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-lifestyle.svg); mask-image: url(../assets/art/wm-lifestyle.svg); }
html[data-area="diet"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-diet.svg); mask-image: url(../assets/art/wm-diet.svg); }
html[data-area="mindful"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-mindful.svg); mask-image: url(../assets/art/wm-mindful.svg); }
html[data-area="ai"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-ai.svg); mask-image: url(../assets/art/wm-ai.svg); }
html[data-area="me"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-me.svg); mask-image: url(../assets/art/wm-me.svg); }
html[data-area="guide"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-guide.svg); mask-image: url(../assets/art/wm-guide.svg); }
html[data-area="settings"] .page-head::before { content: ""; -webkit-mask-image: url(../assets/art/wm-settings.svg); mask-image: url(../assets/art/wm-settings.svg); }
/* Dark surfaces need a little more to read as a mark. */
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .page-head::before { opacity: .18; } }
:root[data-mode="dark"] .page-head::before { opacity: .18; }
@media print { .page-head::before { display: none; } }

/* A short accent under page titles ties the heading to its area colour. */
.page-head h1::after { content: ""; display: block; width: 2.2rem; height: 3px; margin-top: .4rem; border-radius: 3px; background: var(--area); opacity: .75; }

/* ---- Empty-state scene (js/core/art.js) ---- */
.empty .empty-hero.scene { width: 9.5rem; height: auto; opacity: 1; margin: 0 auto var(--space-3); color: var(--area); overflow: visible; }
.empty .empty-ico { display: none; }
.scene .sc-blob { fill: currentColor; fill-opacity: .13; }
.scene .sc-ring { fill: none; stroke: currentColor; stroke-opacity: .4; stroke-width: 1.2; stroke-dasharray: 2 7; stroke-linecap: round; }
.scene .sc-dot { fill: currentColor; fill-opacity: .4; }
.scene .sc-plate { fill: var(--card); stroke: currentColor; stroke-opacity: .28; stroke-width: 1.2; }
.scene .sc-sprig { color: var(--sage); }
.scene .sc-sprig .ico-line { stroke-width: 1.6; }
.scene .sc-sprig .ico-tint { fill-opacity: .25; }
.scene .sc-hero .ico-line { stroke-width: 1.35; }
.scene .sc-hero .ico-tint { fill-opacity: .2; }
html[data-contrast="high"] .scene .sc-blob, html[data-contrast="high"] .scene .sc-ring, html[data-contrast="high"] .scene .sc-dot { display: none; }

/* ---- Loading skeleton (ui.skeleton, shown by core/dispatch.js only when a page is slow to load) ---- */
@keyframes hbm-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel {
  display: block; border-radius: var(--radius-s); background-color: var(--outline-soft);
  background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--card) 70%, transparent) 50%, transparent 100%);
  background-size: 200% 100%; background-repeat: no-repeat; animation: hbm-shimmer 1.5s ease-in-out infinite;
}
.skel-title { height: 1.9rem; width: 52%; margin-bottom: var(--space-3); }
.skel-line { height: .9rem; width: 100%; margin-bottom: var(--space-2); }
.skel-line.w-85 { width: 85%; } .skel-line.w-70 { width: 70%; } .skel-line.w-55 { width: 55%; } .skel-line.w-40 { width: 40%; }
.skel-block { height: 5.5rem; width: 100%; }
.skel-card { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius); background: var(--card); border: 1px solid var(--outline-soft); box-shadow: var(--shadow-1); }

/* ---- Micro-interactions: press feedback and staggered card entrance. Reduced-motion rules in base.css neutralise all of it. ---- */
.btn, .icon-btn, .chip { transition: transform .12s ease, background-color .15s ease, filter .15s ease, box-shadow .15s ease; }
.btn:active:not(:disabled), .icon-btn:active, button.chip:active { transform: scale(.96); }
.tile:active, a.home-card:active { transform: scale(.985); }
.home-cards > .home-card { animation: hbm-tile-in .34s ease-out backwards; }
.home-cards > .home-card:nth-child(2) { animation-delay: 45ms; } .home-cards > .home-card:nth-child(3) { animation-delay: 90ms; }
.home-cards > .home-card:nth-child(4) { animation-delay: 135ms; } .home-cards > .home-card:nth-child(n+5) { animation-delay: 180ms; }