/* ============================================================
   FlexMobileApp — interactive prototype stylesheet
   Direction: BOLD SIGNAL (moodboard territory 4)
   Farmer-first, Flex brand-native. Shared by home/energy/savings.
   Fonts: Inter (Söhne fallback) + JetBrains Mono (Söhne Mono).
   ============================================================ */

:root{
  --ink:#000; --paper:#fff;
  --bg:#000; --surface:#000; --line:#1f1f1f; --line2:#2a2a2a;
  --stone:#c8c8b7; --stonedk:#8f8f80;
  --solar:#faca6c;   /* Hay Yellow — solar / value */
  --red:#eb5d44;     /* Barn Red — grid import / attention */
  --blue:#8296d1;    /* Steel Blue — export / good status */
  --solar-d:#3a3320; --blue-d:#23283a; --red-d:#3a241f;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --margin:22px; --tap:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:#1a1a1a;color:#fff;padding:32px 12px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* phone shell */
.app-frame{width:390px;max-width:100vw;min-height:844px;margin:0 auto;background:#000;position:relative;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 0 10px #111,0 24px 60px rgba(0,0,0,.5)}
.app-scroll{flex:1;overflow-y:auto;padding-bottom:88px;background:#000}
.caption{max-width:390px;margin:18px auto 0;font-family:var(--sans);font-size:12px;color:#999;text-align:center}

/* top bar */
.sig-bar{display:flex;align-items:center;justify-content:space-between;padding:18px var(--margin) 14px}
.sig-bar .brand{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700}
.sig-bar .brand-logo{height:40px;width:auto;display:block}
.sig-bar .site{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:#cfcabb;cursor:pointer}
.sig-bar.detail{border-bottom:1px solid var(--line)}
.back{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:#fff;cursor:pointer}
.back .x{font-size:20px;line-height:1}
.sig-bar .ttl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stonedk);font-weight:700}

/* eyebrows / kicks */
.eyebrow,.kick{font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--stonedk)}

/* status strip */
.status-strip{display:flex;align-items:center;gap:10px;margin:6px var(--margin) 0;padding:12px 14px;background:var(--blue-d);border-left:6px solid var(--blue)}
.status-strip.watch{background:var(--solar-d);border-color:var(--solar)}
.status-strip.problem{background:var(--red-d);border-color:var(--red)}
.status-strip .dot{width:10px;height:10px;background:var(--blue);flex:0 0 10px}
.status-strip.watch .dot{background:var(--solar)}
.status-strip.problem .dot{background:var(--red)}
.status-strip .txt b{font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.status-strip .txt span{display:block;font-size:13px;color:#bdbdb2;margin-top:2px}

/* hero number */
.hero{padding:30px var(--margin) 26px}
.hero .num{font-family:var(--mono);font-weight:700;font-size:74px;line-height:.9;letter-spacing:-.03em;color:var(--solar);margin-top:8px}
.hero .sub{font-size:16px;color:#d9d9cf;margin-top:14px;max-width:30ch;line-height:1.4}

/* generic block */
.block{padding:26px var(--margin);border-top:1px solid var(--line)}
.block .lead{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-top:6px;line-height:1.15}
.block .lead .pc{color:var(--solar)}
.block .note{font-size:14px;color:var(--stonedk);margin-top:10px;line-height:1.45}

/* vertical bars (the Flex motif) */
.bars{display:flex;align-items:flex-end;gap:5px;height:120px;margin-top:20px}
.bcol{flex:1;height:100%;display:flex;align-items:flex-end;position:relative}
.ghost{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,.10)}
.fill{position:relative;width:100%;background:var(--solar)}
.fill.use{background:#fff}
.fill.gap{background:repeating-linear-gradient(45deg,#333,#333 3px,#000 3px,#000 6px)}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:#777;margin-top:8px}
.legend{display:flex;gap:16px;margin-top:14px;font-size:13px;color:#cfcabb}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;display:inline-block}

/* stat grid */
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats.two{grid-template-columns:1fr 1fr}
.stat{background:#000;padding:18px 16px}
.stat .v{font-family:var(--mono);font-weight:700;font-size:26px}
.stat .v .u{font-size:13px;color:var(--stonedk);font-weight:500}
.stat .l{font-size:12px;color:var(--stonedk);margin-top:6px}
.stat.solar{border-top:4px solid var(--solar)}
.stat.use{border-top:4px solid #fff}
.stat.batt,.stat.export{border-top:4px solid var(--blue)}
.stat.import{border-top:4px solid var(--red)}

/* live dot */
.live-dot{width:9px;height:9px;border-radius:999px;background:var(--solar);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(250,202,108,.6)}70%{box-shadow:0 0 0 8px rgba(250,202,108,0)}100%{box-shadow:0 0 0 0 rgba(250,202,108,0)}}

/* horizontal stacked "where it came from" bar */
.stack{display:flex;height:54px;margin-top:18px;border:1px solid var(--line)}
.stack i{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;color:#000}
.stack i.solar{background:var(--solar)}
.stack i.batt{background:var(--blue);color:#fff}
.stack i.grid{background:#2a2a2a;color:#cfcabb}
.stack-key{display:flex;gap:16px;margin-top:12px;font-size:13px;color:#cfcabb}
.stack-key span{display:inline-flex;align-items:center;gap:7px}
.stack-key i{width:11px;height:11px}

/* breakdown rows (savings) */
.brk{border-top:1px solid var(--line)}
.brk .item{display:flex;align-items:center;justify-content:space-between;padding:16px var(--margin);border-bottom:1px solid var(--line)}
.brk .item .lab{display:flex;align-items:center;gap:12px}
.brk .item .sq{width:12px;height:12px}
.brk .item .lab b{font-weight:600;font-size:15px}
.brk .item .lab span{display:block;font-size:12px;color:var(--stonedk);margin-top:2px}
.brk .item .amt{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--solar)}

/* battery SoC mini */
.soc{display:flex;align-items:flex-end;gap:4px;height:64px;margin-top:16px}
.soc i{flex:1;background:var(--blue);opacity:.85}

/* solid signal block (cumulative) */
.savings-row{display:flex}
.sav{flex:1;padding:22px}
.sav.bigblock{background:var(--solar);color:#000}
.sav .l{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.sav .v{font-family:var(--mono);font-weight:700;font-size:30px;margin-top:6px}

/* monthly trend bars */
.trend{display:flex;align-items:flex-end;gap:6px;height:110px;margin-top:18px}
.trend .tb{flex:1;background:var(--solar);position:relative;display:flex;align-items:flex-end;justify-content:center}
.trend .tb.now{outline:2px solid #fff;outline-offset:-2px}
.trend .tb .m{position:absolute;bottom:-22px;font-family:var(--mono);font-size:10px;color:#777}

/* row link */
.row-link{display:flex;align-items:center;justify-content:space-between;padding:18px var(--margin);background:#000;border-bottom:1px solid var(--line);cursor:pointer;min-height:var(--tap)}
.row-link .r-lab{color:#fff;font-weight:600;font-size:16px}
.row-link .r-sub{color:var(--stonedk);font-size:13px;margin-top:2px}
.row-link .chev{color:var(--stonedk)}

/* period chips */
.chips{display:flex;gap:6px;padding:14px var(--margin);border-bottom:1px solid var(--line)}
.chip{flex:1;text-align:center;padding:10px 0;font-size:13px;font-weight:600;background:#161616;color:#cfcabb;cursor:pointer;border:1px solid transparent}
.chip.on{background:#fff;color:#000}

/* tab bar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:72px;background:#000;border-top:1px solid var(--line);display:flex}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--stonedk);font-weight:600;cursor:pointer}
.tab-mark{width:16px;height:16px;background:var(--stonedk)}
.tab.on{color:#fff}
.tab.on .tab-mark{background:var(--solar)}
.muted{color:var(--stonedk)}

/* ---------- segmented control (schedule mode override) ---------- */
.seg{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:14px}
.seg button{flex:1;background:#000;color:#cfcabb;border:0;padding:14px 4px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer}
.seg button.on{background:#fff;color:#000}
.seg button.on.charge{background:var(--solar);color:#000}
.seg button.on.discharge{background:var(--blue);color:#fff}
.seg button.on.idle{background:var(--stonedk);color:#000}

/* ---------- 24h mode timeline ---------- */
.timeline{display:flex;height:46px;margin-top:16px;border:1px solid var(--line)}
.timeline i{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:#000;overflow:hidden}
.timeline i.charge{background:var(--solar);color:#000}
.timeline i.discharge{background:var(--blue);color:#fff}
.timeline i.idle{background:#262626;color:#8f8f80}
.tl-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:#777;margin-top:6px}

/* ---------- mode badge + schedule rows ---------- */
.mode-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px}
.mode-badge.charge{background:var(--solar);color:#000}
.mode-badge.discharge{background:var(--blue);color:#fff}
.mode-badge.idle{background:#262626;color:#cfcabb}
.sched-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--margin);border-bottom:1px solid var(--line);cursor:pointer}
.sched-item .tm{font-family:var(--mono);font-weight:700;font-size:15px}
.sched-item .why{font-size:13px;color:var(--stonedk);margin-top:3px}

/* ---------- menu list (More) ---------- */
.menu-row{display:flex;align-items:center;gap:16px;padding:18px var(--margin);background:#000;border-bottom:1px solid var(--line);cursor:pointer;min-height:var(--tap)}
.menu-row .mi{width:16px;height:16px;flex:0 0 16px}
.menu-row .ml b{font-weight:600;font-size:16px;display:block;color:#fff}
.menu-row .ml span{font-size:13px;color:var(--stonedk);margin-top:2px;display:block}
.menu-row .chev{margin-left:auto;color:var(--stonedk)}

/* ---------- ranked list (submetering) ---------- */
.rank{border-top:1px solid var(--line)}
.rank-item{padding:15px var(--margin);border-bottom:1px solid var(--line)}
.rank-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rank-top .nm{font-weight:600;font-size:15px}
.rank-top .kwh{font-family:var(--mono);font-weight:700;font-size:15px}
.rank-bar{height:8px;background:#1a1a1a;margin-top:9px;position:relative}
.rank-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--solar)}
.rank-sub{display:flex;justify-content:space-between;font-size:12px;color:var(--stonedk);margin-top:7px;font-family:var(--mono)}

/* ---------- fit indicators (Assure) ---------- */
.fit{display:flex;align-items:center;gap:12px;padding:14px var(--margin);border-bottom:1px solid var(--line)}
.fit .dot{width:12px;height:12px;flex:0 0 12px}
.fit .dot.ok{background:var(--blue)} .fit .dot.ahead{background:var(--solar)} .fit .dot.below{background:var(--red)}
.fit .fl{flex:1}
.fit .fl b{font-weight:600;font-size:15px}
.fit .fl span{display:block;font-size:13px;color:var(--stonedk);margin-top:2px}
.fit .fv{font-family:var(--mono);font-weight:700;font-size:16px}

/* generic primary action button (reused on feature screens) */
.cta{display:flex;align-items:center;justify-content:center;width:100%;height:54px;background:var(--solar);color:#000;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;border:0}
.cta.sec{background:transparent;color:#fff;border:1px solid var(--line2);margin-top:10px;font-weight:700}

/* ============================================================
   Responsive — on a real phone the app fills the screen.
   Desktop keeps the centred phone mockup above.
   ============================================================ */
@media (max-width:480px){
  body{padding:0;background:#000}
  .app-frame{
    width:100%;max-width:100%;
    min-height:100vh;min-height:100dvh;
    height:100vh;height:100dvh;
    box-shadow:none;
  }
  .caption{display:none}
  /* respect the iOS notch / home indicator */
  .sig-bar{padding-top:max(18px,env(safe-area-inset-top))}
  .tabbar{height:calc(72px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .app-scroll{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}