/* Givvy — Wave 3 (signed-in shells) styles, Territory C, "The Quiet Bank"
   (Elysia, Design Direction v1, 2026-11-11, sections 1, 4, 5, 7).
   Linked ONLY by the Wave 3 pages (/home, /wallet, /rewards, /account).
   Every rule consumes ONLY the new tokens from assets/tokens.css.
   Paper ground, ink text, hairline rules. Rectangles only: no rounded
   corners, no elevation, no gradients, no fills except the one filled
   block per page (defined in assets/styles.css). Figures are Mono.
   Barcode SVGs are drawn by wave3.js in ink on paper. */

/* Room for the fixed bottom app bar, so content is never covered. */
body { padding-bottom: 84px; }

/* ---------- Signed-in sub-navigation: hairline-ruled text links ---------- */
.w3-subnav { border-bottom: 1px solid var(--color-ink-40); background: var(--color-paper); }
.w3-subnav .container { display: flex; gap: var(--space-5); align-items: center; overflow-x: auto; scrollbar-width: none; }
.w3-subnav .container::-webkit-scrollbar { display: none; }
.w3-subnav a {
  color: var(--color-ink-80); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; white-space: nowrap;
}
.w3-subnav a:hover { color: var(--color-ink); }
.w3-subnav a[aria-current="page"] { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Shell structure ---------- */
.w3-shell-head { padding: var(--space-7) 0 var(--space-5); }
.w3-shell-head h1 { margin-bottom: var(--space-2); }
.w3-block { margin-bottom: var(--space-8); }
.w3-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.w3-block-head h2 { margin: 0; }
.w3-block-note { flex: none; }

/* Stage banners on the shells carry prose strongs, not stamp titles. */
.stage-note strong { font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--color-ink); margin-right: 0; }
.stage-note p { margin: 0; }

/* ---------- Text-style submit (every shell action except the filled block) ---------- */
.w3-text-submit {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 500; font-size: 1rem; color: var(--color-ink);
  text-decoration: underline; text-decoration-color: var(--color-ink-40); text-underline-offset: 4px;
}
.w3-text-submit:hover { text-decoration-color: var(--color-ink); }
.w3-text-submit:disabled { color: var(--color-ink-80); cursor: not-allowed; }

/* ---------- Next action (signed-in home) ---------- */
.w3-next-action { border-top: 2px solid var(--color-ink); padding-top: var(--space-5); }
.w3-next-action .eyebrow { margin-bottom: var(--space-2); }
.w3-next-action h2 { margin-bottom: var(--space-2); }
.w3-next-action p { max-width: 40rem; }
.w3-next-action .w3-next-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0; }

/* ---------- Balances: three hairline rows (label left, Mono figure right) ---------- */
.w3-balances { border-top: 1px solid var(--color-ink-20); }
.w3-balance { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); flex-wrap: wrap; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-ink-20); }
.w3-balance-label { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500; color: var(--color-ink); margin: 0; }
.w3-balance-note { display: block; width: 100%; font-size: var(--text-caption); color: var(--color-ink-80); margin: 0; }
.w3-balance-value { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-worked-figure); line-height: 1.1; color: var(--color-ink); margin: 0; white-space: nowrap; }
/* The rewards Expiring figure is the page's one rust (Direction §1.2/§5);
   this rule must outrank the ink above or the class alone renders ink. */
.w3-balance-value.rust { color: var(--color-rust); }

/* ---------- Value-so-far line (single Mono line, ink) ---------- */
.w3-value-line { font-family: var(--font-mono); font-size: var(--text-figure); line-height: 1.5; color: var(--color-ink); border-bottom: 1px solid var(--color-ink-20); padding: var(--space-4) 0; margin: 0; }
.w3-value-line .w3-value-note { color: var(--color-ink-80); font-size: var(--text-mono-note); }

/* ---------- Offer lines (saved offers, rewards spend) ---------- */
.w3-offer-line { border-top: 1px solid var(--color-ink-20); padding: var(--space-4) 0; display: flex; gap: var(--space-5); align-items: flex-start; justify-content: space-between; }
.w3-offer-line .body { flex: 1; min-width: 0; }
.w3-offer-line p { margin: 0 0 var(--space-2); }
.w3-offer-line p:last-child { margin-bottom: 0; }
.w3-flag-soon { font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4; color: var(--color-ink); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Wallet items: hairline rectangles on paper ---------- */
.w3-item {
  display: flex; gap: var(--space-6); align-items: flex-start;
  background: var(--color-paper); border: 1px solid var(--color-ink-40);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4);
}
.w3-item-body { flex: 1; min-width: 0; }
.w3-item-body h3 { margin: 0 0 var(--space-3); }
.w3-item-body p { margin: 0 0 var(--space-2); }
.w3-item-body p:last-child { margin-bottom: 0; }
.w3-item-meta { font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.5; color: var(--color-ink-80); }
.w3-barcode { flex: none; padding-top: 4px; }
.w3-barcode svg { display: block; }
.w3-barcode-num { display: block; font-family: var(--font-mono); font-size: var(--text-mono-note); letter-spacing: 0.22em; color: var(--color-ink-80); margin-top: 6px; }
.w3-added-note { font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4; color: var(--color-ink-80); }

/* ---------- Favorite stores (signed-in home) ---------- */
.w3-store-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.w3-store-card { border: 1px solid var(--color-ink-40); background: var(--color-paper); padding: var(--space-5); }
.w3-store-card .w3-store-cat { font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4; color: var(--color-ink-80); margin: 0 0 var(--space-3); }
.w3-store-card h3 { margin: 0 0 var(--space-2); }
.w3-store-card h3 a { color: var(--color-ink); text-decoration: none; }
.w3-store-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.w3-store-card p { color: var(--color-ink-80); font-size: 0.875rem; margin: 0 0 var(--space-2); }
.w3-store-card p:last-child { margin-bottom: 0; }

/* ---------- Rewards history ---------- */
.w3-history { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink-20); }
.w3-history li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-ink-20); }
.w3-hist-body { flex: 1; min-width: 0; }
.w3-hist-body p { margin: 0; font-weight: 500; }
.w3-hist-date { font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4; color: var(--color-ink-80); white-space: nowrap; }
.w3-hist-body .w3-hist-date { display: block; margin-top: 2px; white-space: normal; }
.w3-hist-amt { font-family: var(--font-mono); font-weight: 500; font-size: 1.0625rem; white-space: nowrap; color: var(--color-ink); }

/* ---------- Add / save forms ---------- */
.w3-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.w3-action-card { border: 1px solid var(--color-ink-40); background: var(--color-paper); padding: var(--space-5); }
.w3-action-card > p { font-size: 0.875rem; color: var(--color-ink-80); }
.w3-form label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; margin: var(--space-4) 0 var(--space-2); }
.w3-form input, .w3-form select {
  width: 100%; min-height: var(--layout-touch); padding: 0 var(--space-4);
  border: 1px solid var(--color-ink-40); border-radius: 0;
  background: var(--color-paper); font: inherit; font-size: var(--text-body); color: var(--color-ink);
}
.w3-form input:focus, .w3-form select:focus { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.w3-form .filled-block { margin-top: var(--space-5); width: 100%; }
.w3-form .w3-text-submit { margin-top: var(--space-4); }
.w3-form .w3-form-note { margin: var(--space-3) 0 0; }

/* ---------- Account rows, panels, toggles, tables ---------- */
.w3-rows { border-top: 1px solid var(--color-ink-20); }
.w3-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-ink-20); flex-wrap: wrap; }
.w3-row-body { flex: 1; min-width: 260px; }
.w3-row-body h3 { margin: 0 0 var(--space-2); }
.w3-row-body p { font-size: 0.875rem; color: var(--color-ink-80); margin: 0 0 var(--space-2); }
.w3-row-body p:last-child { margin-bottom: 0; }
.w3-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.w3-panel { border: 1px solid var(--color-ink-40); background: var(--color-paper); padding: var(--space-5); }
.w3-panel h3 { margin: 0 0 var(--space-2); }
.w3-panel p { font-size: 0.875rem; color: var(--color-ink-80); margin: 0; }
.w3-toggle {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-ink-40); border-radius: 0; background: var(--color-paper);
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--color-ink); cursor: pointer;
}
.w3-toggle input { width: 18px; height: 18px; accent-color: var(--color-ink); cursor: pointer; }
.w3-table-wrap { overflow-x: auto; border: 1px solid var(--color-ink-40); background: var(--color-paper); }
.w3-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.w3-table th { font-family: var(--font-mono); font-size: var(--text-mono-note); font-weight: 500; color: var(--color-ink-80); text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-ink-40); }
.w3-table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-ink-20); vertical-align: top; }
.w3-table tr:last-child td { border-bottom: 0; }
.w3-empty-cell { color: var(--color-ink-80); font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.5; }

/* ---------- Bottom app bar (all four shells) ---------- */
.w3-appbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--color-paper); border-top: 1px solid var(--color-ink-40);
  padding: var(--space-2) var(--layout-gutter);
}
.w3-appbar a {
  font-family: var(--font-mono); font-size: var(--text-mono-note); line-height: 1.4; color: var(--color-ink);
  text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px;
}
.w3-appbar a:hover { text-decoration: underline; text-underline-offset: 4px; }
.w3-appbar a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .w3-balances, .w3-actions, .w3-store-row, .w3-trio { grid-template-columns: 1fr; }
  .w3-item { flex-direction: column; gap: var(--space-4); }
  .w3-table { min-width: 0; table-layout: fixed; }
  .w3-appbar { padding: var(--space-2) var(--layout-gutter); }
}

/* ---------- Reduced-motion guard (Direction section 0: stillness is the
   brand; this guard is declared so no later motion can slip in unreviewed) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}