/* =====================================================================
   SmartGrow — app.css
   ADDITIVE utilities only. Reuses the existing design tokens from
   interaction.html (:root variables, fonts, chips, cards). No redesign.
   ===================================================================== */

/* smooth animated updates on live elements (rings + growth track) */
.ring svg circle { transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); }
.track .fill     { transition: width .7s cubic-bezier(.4, 0, .2, 1); }

/* accessible focus ring for the new interactive controls */
button.sw:focus-visible,
.act-btn:focus-visible,
[data-device]:focus-visible,
.btn-danger:focus-visible { outline: 3px solid rgba(18, 184, 134, .5); outline-offset: 2px; }

/* screen-reader-only text */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* dashboard section spacing + titles reuse existing .sect/.card vocabulary */
.dash-sect { margin-bottom: 14px; }

/* ===== expanded metric rows (reuses .list / .row / .ric / .rv / .chip) ===== */
.rt2   { font-size: 13px; font-weight: 700; color: var(--ink); }
.rhint { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.row .rv.pull { margin-inline-start: auto; }

/* ===== native SVG charts ===== */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chart {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 11px 12px 7px; box-shadow: var(--shadow-sm);
}
.chart .ch-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.chart .ch-label { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.chart .ch-val { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.chart .ch-val small { font-size: 9px; font-weight: 600; color: var(--muted); }
.chart svg { display: block; width: 100%; height: 42px; overflow: visible; }
.chart .ch-line { fill: none; stroke: url(#ringGrad); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: d .6s ease; }
.chart .ch-area { fill: rgba(18, 184, 134, .10); stroke: none; transition: d .6s ease; }
.chart .ch-dot  { fill: var(--primary); }

/* ===== manual override controls ===== */
button.sw { padding: 0; border: none; font: inherit; cursor: pointer; display: inline-block; }

.act-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-top: 12px; }
.act-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); font-family: 'Cairo', sans-serif;
  font-weight: 700; font-size: 10.5px; cursor: pointer; transition: .2s;
}
.act-btn i { font-size: 15px; color: var(--primary-dd); }
.act-btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.act-btn:active { transform: scale(.97); }

.btn-danger { background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; box-shadow: 0 14px 30px -14px rgba(225, 29, 72, .6); }
.btn-danger:hover { filter: brightness(1.03); }

/* manual-mode paused banner (amber, matches --amber tokens) */
.ctrl-paused {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  background: var(--amber-bg); border: 1px solid #fcd9a1; color: #b45309;
  border-radius: 14px; padding: 11px 13px; font-size: 11.5px; font-weight: 700; line-height: 1.5;
}
.ctrl-paused i { font-size: 14px; flex-shrink: 0; }
.ctrl-paused[hidden] { display: none; }

/* ===== device-state explanation card (reuses .card) ===== */
.state-card { display: flex; gap: 12px; align-items: flex-start; }
.state-ico  { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; background: var(--surface-2); color: var(--primary-dd); }
.state-ico.warn { background: var(--amber-bg); color: #b45309; }
.state-ico.crit { background: var(--rose-bg); color: #be123c; }
.state-card .sc-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.state-card .sc-note  { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-top: 3px; line-height: 1.6; }
.state-card .sc-act   { font-size: 11px; color: var(--primary-dd); font-weight: 700; margin-top: 6px; line-height: 1.6; }
.state-card .sc-act i { margin-inline-end: 4px; }

/* ===== AI insight footer (confidence + expected harvest), inside .insight ===== */
.ai-foot { display: flex; gap: 8px; margin-top: 13px; }
.ai-foot .pill { flex: 1; background: rgba(255, 255, 255, .07); border: 1px solid rgba(198, 242, 78, .16); border-radius: 12px; padding: 8px 6px; text-align: center; }
.ai-foot .pill b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 15px; color: var(--accent); font-weight: 700; line-height: 1; }
.ai-foot .pill span { font-size: 9px; color: #9fcdb8; }

/* =====================================================================
   POLISH LAYER — tactile micro-interactions, depth & motion refinements.
   Purely additive; reuses existing tokens. No palette/typography/spacing
   redesign — just makes the existing UI feel more modern & responsive.
   ===================================================================== */

/* --- tactile press feedback on genuinely-interactive surfaces --- */
.ptile, .crop, [data-device], button.row, .nav-btn, .iconbtn, .fab {
  transition: transform .16s cubic-bezier(.34, 1.4, .64, 1), box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.ptile:active            { transform: translateY(-1px) scale(.975); }
.crop:active             { transform: scale(.97); }
[data-device]:active     { transform: scale(.985); }
button.row:active        { transform: scale(.99); background: var(--surface-2); }
.iconbtn:active          { transform: scale(.9); }
.fab:active              { transform: scale(.92); }

/* subtle hover depth on the home tower cards (desktop) */
[data-device]:hover { box-shadow: var(--shadow); border-color: var(--line-2); }

/* --- global keyboard focus ring (a11y) --- */
.ptile:focus-visible, .crop:focus-visible, [data-device]:focus-visible,
.row:focus-visible, .nav-btn:focus-visible, .iconbtn:focus-visible,
.btn:focus-visible, .fab:focus-visible, .sw:focus-visible {
  outline: 3px solid rgba(18, 184, 134, .5); outline-offset: 2px;
}

/* --- bottom-nav: active icon lift + pill pop-in --- */
.nav-btn i { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.nav-btn.active i { transform: translateY(-2px) scale(1.1); }
.nav-btn.active::before { animation: navpop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes navpop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* --- springier toggle knob + smooth color morphs --- */
.sw i  { transition: right .3s cubic-bezier(.5, 1.6, .55, 1), background .25s ease; }
.chip  { transition: background-color .35s ease, color .35s ease; }
.iconbtn { transition: transform .16s cubic-bezier(.34,1.4,.64,1), color .2s ease, box-shadow .22s ease; }

/* --- AI insight: slow breathing glow (feels alive, not busy) --- */
.insight::before { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }

/* --- chart live point: pulsing halo + soft vertical gradient fill --- */
.chart .ch-area { fill: url(#chArea); }
.chart .ch-halo {
  fill: var(--primary); opacity: .3;
  transform-box: fill-box; transform-origin: center;
  animation: chpulse 1.9s ease-out infinite;
}
@keyframes chpulse { 0% { transform: scale(1); opacity: .38; } 70%, 100% { transform: scale(3.4); opacity: 0; } }

/* --- FAB: soft idle glow breathing --- */
.fab { animation: fabglow 3.6s ease-in-out infinite; }
@keyframes fabglow {
  0%, 100% { box-shadow: 0 16px 30px -10px rgba(18, 184, 134, .7); }
  50%      { box-shadow: 0 18px 40px -8px rgba(18, 184, 134, .9); }
}

/* =====================================================================
   PLANT PHOTO SCAN — trigger card, bottom sheet, capture, AI-vision states.
   Reuses tokens/components; no palette or navigation change.
   ===================================================================== */
.scan-card { display: flex; align-items: center; gap: 13px; }
.scan-ic {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(145deg, #0f4635, #0a271e); color: var(--accent);
}
.scan-card .st h3 { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.scan-card .st p  { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.55; }

/* bottom sheet (clipped inside the phone frame) */
.sheet-wrap { position: absolute; inset: 0; z-index: 80; display: none; }
.sheet-wrap.show { display: block; }
.sheet-bd { position: absolute; inset: 0; background: rgba(6, 23, 15, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s ease; }
.sheet-wrap.show .sheet-bd { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 90%; display: flex; flex-direction: column;
  background: var(--bg-2); border-radius: 26px 26px 0 0; box-shadow: 0 -22px 50px -14px rgba(6, 23, 15, .55);
  transform: translateY(100%); transition: transform .36s cubic-bezier(.22, .61, .36, 1);
}
.sheet-wrap.show .sheet { transform: translateY(0); }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 10px auto 2px; }
.sheet-hd { display: flex; align-items: center; gap: 10px; padding: 6px 18px 12px; }
.sheet-hd h3 { flex: 1; font-size: 16px; font-weight: 800; color: var(--ink); }
.sheet-bdy { padding: 0 18px 22px; overflow-y: auto; }

/* capture dropzone */
.capture { border: 1.5px dashed var(--line-2); border-radius: 20px; padding: 26px 16px; text-align: center; background: rgba(255, 255, 255, .5); cursor: pointer; transition: .2s; }
.capture:hover { border-color: var(--primary); background: rgba(18, 184, 134, .05); }
.capture:focus-visible { outline: 3px solid rgba(18, 184, 134, .5); outline-offset: 2px; }
.capture .cam { width: 60px; height: 60px; border-radius: 20px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(145deg, #16c493, #0a6f52); color: #fff; box-shadow: var(--glow); }

/* captured image + AI scanning overlay */
.shot { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: #0b1611; box-shadow: var(--shadow-sm); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot.analyzing::after {
  content: ""; position: absolute; left: 0; right: 0; height: 36%; top: -36%;
  background: linear-gradient(180deg, transparent, rgba(198, 242, 78, .38), transparent);
  animation: scanline 1.5s ease-in-out infinite;
}
@keyframes scanline { 0% { top: -36%; } 100% { top: 100%; } }
.shot .grid-ov { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background-image: linear-gradient(rgba(198, 242, 78, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(198, 242, 78, .13) 1px, transparent 1px); background-size: 22px 22px; }
.shot.analyzing .grid-ov { opacity: 1; }

.an-status { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--primary-dd); }
.an-status .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(18, 184, 134, .25); border-top-color: var(--primary); animation: spin .8s linear infinite; }

/* result */
.res-badge { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 12px 13px; border-radius: 16px; }
.res-badge.healthy { background: rgba(18, 184, 134, .09); border: 1px solid rgba(18, 184, 134, .22); }
.res-badge.warn    { background: var(--amber-bg); border: 1px solid #fcd9a1; }
.res-badge.risk    { background: var(--rose-bg); border: 1px solid #fecdd3; }
.res-badge .rb-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; color: #fff; }
.res-badge.healthy .rb-ic { background: var(--primary); }
.res-badge.warn    .rb-ic { background: var(--amber); }
.res-badge.risk    .rb-ic { background: var(--rose); }
.res-badge h4 { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.res-badge .conf { font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }

.pill-stat { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 9px 6px; text-align: center; box-shadow: var(--shadow-sm); }
.pill-stat b { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: var(--primary-dd); }
.pill-stat span { font-size: 9px; color: var(--muted); }

.findings { list-style: none; margin: 0; }
.findings li { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--ink-2); line-height: 1.6; padding: 4px 0; }
.findings li i { color: var(--primary-dd); font-size: 11px; margin-top: 3px; flex-shrink: 0; }

/* =====================================================================
   NOTIFICATION CENTER
   ===================================================================== */
[data-notif-open].bell::after { display: none; }   /* replace static dot with a count badge */
.notif-badge {
  position: absolute; top: 4px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--rose); color: #fff; border: 2px solid var(--surface); border-radius: 20px;
  font-family: 'Space Grotesk', sans-serif; font-size: 9px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.notif-badge[hidden] { display: none; }

.notif-row {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: right; position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 13px; margin-bottom: 9px; cursor: pointer; font-family: 'Cairo', sans-serif; transition: .18s;
}
.notif-row:hover { background: var(--surface-2); }
.notif-row.unread { border-color: rgba(18, 184, 134, .3); }
.notif-row.unread::before { content: ""; position: absolute; top: 14px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.notif-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.notif-ic.em   { background: rgba(18, 184, 134, .12); color: var(--primary-dd); }
.notif-ic.am   { background: var(--amber-bg); color: #b45309; }
.notif-ic.ro   { background: var(--rose-bg); color: #be123c; }
.notif-ic.lime { background: var(--accent); color: #25391a; }
.notif-tx { flex: 1; min-width: 0; }
.nr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nr-title { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.nr-ago { font-size: 9.5px; color: var(--muted); flex-shrink: 0; }
.nr-body { font-size: 11px; color: var(--ink-2); line-height: 1.6; margin-top: 3px; }

/* =====================================================================
   MARKETPLACE — AI recommendation rail
   ===================================================================== */
.reco-rail { display: flex; gap: 11px; overflow-x: auto; padding-bottom: 4px; }
.reco-card {
  flex: 0 0 158px; text-align: right; cursor: pointer; font-family: 'Cairo', sans-serif; position: relative;
  background: linear-gradient(160deg, #ffffff, #f1f8f3); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 13px; box-shadow: var(--shadow-sm); transition: .2s;
}
.reco-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.reco-card:active { transform: scale(.98); }
.reco-emoji { font-size: 30px; }
.reco-name { font-size: 12px; font-weight: 800; color: var(--ink); margin-top: 8px; line-height: 1.4; min-height: 34px; }
.reco-why { font-size: 9.5px; color: var(--primary-dd); font-weight: 700; margin-top: 6px; line-height: 1.5; display: flex; gap: 4px; }
.reco-why i { margin-top: 2px; flex-shrink: 0; }
.reco-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

/* =====================================================================
   PLANT INTELLIGENCE — growth timeline
   ===================================================================== */
.timeline { display: flex; align-items: flex-start; }
.tl-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.tl-step::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 3px; background: var(--line); }
.tl-step:last-child::before { display: none; }
.tl-step.done::before { background: var(--primary); }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line-2); border: 2px solid var(--surface); z-index: 1; box-shadow: 0 0 0 1px var(--line-2); }
.tl-step.done .tl-dot { background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tl-step.cur .tl-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(198, 242, 78, .35); }
.tl-lbl { font-size: 9.5px; font-weight: 700; color: var(--muted); margin-top: 7px; text-align: center; }
.tl-step.done .tl-lbl { color: var(--ink-2); }
.tl-step.cur .tl-lbl { color: var(--primary-dd); }

/* =====================================================================
   OFFLINE — cached-data banner
   ===================================================================== */
.offline-banner {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, #fff1f2, #ffe4e6); border: 1px solid #fecdd3;
  border-radius: 18px; padding: 13px 14px; box-shadow: var(--shadow-sm);
}
.offline-banner .ob-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; background: var(--rose); color: #fff; }
.offline-banner .ob-title { font-size: 12.5px; font-weight: 800; color: #9f1239; }
.offline-banner .ob-sub { font-size: 10.5px; color: #be123c; margin-top: 2px; line-height: 1.5; }

/* respect reduced-motion for ALL added transitions/animations */
@media (prefers-reduced-motion: reduce) {
  .ring svg circle, .track .fill, .chart .ch-line, .chart .ch-area,
  .ptile, .crop, [data-device], button.row, .nav-btn, .iconbtn, .fab, .sw i, .chip,
  .sheet, .sheet-bd, .notif-row, .reco-card { transition: none; }
  .nav-btn.active::before, .insight::before, .chart .ch-halo, .fab,
  .shot.analyzing::after, .an-status .spin { animation: none; }
}