/* ==========================================================================
   windows.html only — kept out of style.css so the other 63 pages don't
   download a desktop-app mockup they never render.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. APP WINDOW MOCKUP
   The desktop app sets WDA_EXCLUDEFROMCAPTURE, so it cannot be screenshotted
   at all — by design. This is a CSS re-creation, labelled as an illustration
   rather than passed off as a screenshot.
   -------------------------------------------------------------------------- */
.win {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 40px 80px -32px rgba(11, 61, 44, 0.34), 0 14px 28px -14px rgba(36, 28, 26, 0.18);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.win-title { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink-2); }
.win-ctrls { margin-left: auto; display: flex; gap: 14px; color: var(--ink-3); }
.win-ctrls span { width: 11px; height: 11px; display: grid; place-items: center; font-size: 10px; }

.win-body { display: grid; grid-template-columns: 148px minmax(0, 1fr); min-height: 300px; }

.win-side {
  padding: 10px 8px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 2px;
  align-content: start;
}
.win-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: 12px;
}
.win-nav.on { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
html.dark .win-nav.on { color: var(--brand); }
.win-nav i {
  width: 6px; height: 6px; border-radius: 2px;
  background: currentColor; opacity: 0.55; flex: none;
}

.win-main { padding: 14px; display: grid; gap: 12px; align-content: start; }

/* The net-worth card, same colour as the phone's dashboard hero */
.win-card {
  border-radius: 12px;
  padding: 14px 16px;
  background: linear-gradient(140deg, var(--green-mid), var(--green-deep));
  color: #fff;
}
.win-card-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.win-amount {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  margin-top: 2px;
}
.win-delta {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border-radius: var(--r-pill); background: rgba(61, 220, 151, 0.2);
  color: var(--mint); font-size: 11px; font-weight: 600; vertical-align: middle;
}
.win-spark { display: block; width: 100%; height: 46px; margin-top: 8px; }

.win-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.win-tile {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 10px;
  background: var(--ground);
}
.win-tile-label { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.win-tile-value {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 1px;
}

.win-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.win-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 11px;
  background: var(--surface);
  font-size: 12px;
}
.win-row b { font-weight: 600; color: var(--ink); }
.win-row span { color: var(--ink-3); font-size: 11px; display: block; }
.win-row em {
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

.win-note {
  margin-top: 12px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-3);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   2. PRICING
   -------------------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
  max-width: 860px;
  margin-inline: auto;
  /* stretch, not start — pricing cards of unequal height read as unfinished */
  align-items: stretch;
}
.plan {
  display: grid;
  gap: 1rem;
  /* push the button to the bottom edge of every card */
  grid-template-rows: auto auto auto 1fr auto;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.plan.featured { border-color: var(--brand); box-shadow: var(--sh-2); }
.plan-name {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--brand);
}
.plan-price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* The rupee glyph's crossbar reads as a strikethrough when it is small and
   pale, so give the secondary price real size and weight. */
.plan-alt {
  margin-left: 8px;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
  white-space: nowrap;
}
.plan-sub { font-size: 0.92rem; color: var(--ink-2); }
.plan-list { display: grid; gap: 9px; list-style: none; }
.plan-list li { display: flex; gap: 10px; font-size: 0.93rem; color: var(--ink-2); }
.plan-list li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.55em;
  border-radius: 50%; background: var(--brand);
}
.plan .btn { width: 100%; }

/* --------------------------------------------------------------------------
   3. "WHAT IT DOESN'T DO" — the honesty block
   -------------------------------------------------------------------------- */
.limits {
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface-2);
}
.limits h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.limits > p { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 1.4rem; }
.limits dl { display: grid; gap: 1rem; }
.limits dt { font-weight: 600; color: var(--ink); font-size: 0.96rem; }
.limits dd { color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; text-wrap: pretty; }
.limits-spec {
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .win-body { grid-template-columns: 1fr; }
  /* The sidebar becomes a scrollable strip rather than a tall stack */
  .win-side {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .win-nav { flex: none; white-space: nowrap; }
  .win-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   STATUS NOTE
   The .alert-box in pages.css is keyed to that sheet's token set
   (--color-bg-secondary etc.) and the Windows pages don't load it. Same look,
   built from the shared style.css tokens, so it themes with everything else.
   -------------------------------------------------------------------------- */
.alert-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-block: 24px;
}
.alert-box p { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.7; }
.alert-box strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   SCREEN SLIDER
   Reuses the hero slider already in app.js (#hero-slides / .hero-slide /
   .hero-dot) rather than shipping a second one. Its slides are app windows,
   not phone screenshots, so the phone aspect ratio and frame are undone here.
   desktop.css loads only on the Windows pages, so this needs no extra scoping.

   Stacked in ONE grid cell instead of absolutely positioned: the stack then
   sizes to the tallest screen and every slide fills it, so the window border
   holds still as they cross-fade instead of jumping on each change.
   -------------------------------------------------------------------------- */
.hero-slides {
  display: grid;
  width: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.hero-slide { position: static; grid-area: 1 / 1; width: 100%; height: 100%; }
.hero-slide .win { height: 100%; display: flex; flex-direction: column; }
.hero-slide .win-body { flex: 1; }
/* A cross-fade leaves both slides painted for 0.6s; without this the hidden
   one still eats clicks and tab stops. */
.hero-slide:not(.on) { pointer-events: none; }
.hero-dots { justify-content: center; margin-top: 16px; }

/* --------------------------------------------------------------------------
   SCREEN PRIMITIVES
   Section headings, tables and bars, so the other five screens are built from
   the same parts as the dashboard rather than one-off markup each.
   -------------------------------------------------------------------------- */
.win-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.win-search {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--ground);
  color: var(--ink-2);
  font-size: 11px;
}

.win-tbl { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.win-tr {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 7px 11px;
  background: var(--surface);
  font-size: 11.5px;
  color: var(--ink-2);
}
.win-tr.head {
  background: var(--surface-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.win-tr b { font-weight: 600; color: var(--ink); }
.win-tr em {
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink); text-align: right;
}
.win-tr em.out { color: var(--danger, #B3261E); }
/* --green-mid is a SURFACE colour (it fills the net-worth card), not a text
   colour: on the dark theme it is #0F4230 against a #1A1717 row, about
   1.5:1 and unreadable. Positive money follows the convention already set
   by .success-badge - deep green on light, mint on dark. */
.win-tr em.in { color: var(--green-deep); }
html.dark .win-tr em.in { color: var(--mint); }
/* Four columns on the ledger, three on the shorter tables. Set per table so a
   new screen does not have to restate the whole grid. */
.win-tbl.c4 .win-tr { grid-template-columns: 46px minmax(0, 1fr) 74px 66px; }
.win-tbl.c3 .win-tr { grid-template-columns: minmax(0, 1fr) 60px 66px; }
.win-tbl.c5 .win-tr { grid-template-columns: 14px minmax(0, 1fr) 42px 66px; }

.win-chip {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
}
.win-chip.ok { background: var(--brand-soft); color: var(--brand-strong); }
html.dark .win-chip.ok { color: var(--brand); }
.win-chip.wait { background: var(--surface-2); color: var(--ink-3); }

.win-bars { display: grid; gap: 9px; }
/* 84px clipped "Emergency fund" to "Emergency f..." — sized to the longest
   label the mockups actually use. */
.win-bar-row { display: grid; grid-template-columns: 106px minmax(0, 1fr) 58px; gap: 10px; align-items: center; font-size: 11.5px; }
.win-bar-row span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-bar-track { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.win-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--brand); }
.win-bar-row em {
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; font-size: 12px;
}

.win-score { display: flex; align-items: baseline; gap: 8px; }
.win-score b {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.win-score span { font-size: 11px; color: var(--ink-3); }

@media (max-width: 560px) {
  /* The ledger's date and account columns are the first to become unreadable;
     dropping them keeps the description and the amount, which are the point. */
  .win-tbl.c4 .win-tr { grid-template-columns: minmax(0, 1fr) 66px; }
  .win-tbl.c4 .win-tr > :nth-child(1),
  .win-tbl.c4 .win-tr > :nth-child(3) { display: none; }
}

/* --------------------------------------------------------------------------
   "COMING SOON" STATE
   A <span>, not a link: there is nothing to click until release day. It keeps
   the shape and the space of the button that will replace it, but is flat,
   dashed and cursor-default so it never reads as a broken control.
   -------------------------------------------------------------------------- */
.btn.coming,
.btn.coming:hover {
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px dashed var(--line-strong);
  box-shadow: none;
  cursor: default;
  transform: none;
}