/* Chrono Bank — light + dark themes via CSS variables. */

:root {
  --brand-navy:  #19227A;
  --brand-green: #1F7E4D;
  --brand-gold:  #C19725;

  /* Light theme (default) */
  --bg:          #FAF7F2;       /* warm off-white */
  --bg-elev:    #FFFFFF;
  --bg-sunken: #F0EBE2;
  --fg:         #16182A;        /* near-black with navy hint */
  --fg-muted:   #6A6E80;
  --border:     #E2DCD0;

  --primary:        var(--brand-navy);
  --primary-hover:  #2531A0;
  --primary-fg:     #FFFFFF;
  --success:        var(--brand-green);
  --accent:         var(--brand-gold);

  --danger:         #B43E2A;

  --shadow: 0 1px 2px rgba(20, 22, 40, .04), 0 4px 12px rgba(20, 22, 40, .06);

  --radius: 10px;
  --radius-sm: 6px;

  --font:        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
}

[data-theme="dark"] {
  --bg:          #0E1426;
  --bg-elev:     #161D34;
  --bg-sunken:   #0A0F1F;
  --fg:          #F0E8DA;
  --fg-muted:    #9598AA;
  --border:      #2A2E45;

  --primary:        #5B65C2;
  --primary-hover:  #6E78D2;
  --primary-fg:     #FFFFFF;
  --success:        #2D9263;
  --accent:         #D4AB3E;

  --danger:         #D6614C;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--fg); margin: 0 0 .5em; line-height: 1.25; }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.25rem; }
.page-title { margin-bottom: 1rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.muted { color: var(--fg-muted); }
.small { font-size: .875rem; }
.mono { font-family: var(--font-mono); font-size: .9em; }
.selectable { user-select: all; }
.error { color: var(--danger); font-size: .9rem; }

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  color: var(--fg);
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, var(--brand-gold) 0 22%, transparent 23%),
    radial-gradient(circle at 70% 65%, var(--brand-green) 0 32%, transparent 33%),
    var(--brand-navy);
}
.app-nav { display: flex; align-items: center; gap: 1rem; }
.app-nav a {
  color: var(--fg);
  font-weight: 500;
  font-size: .95rem;
  padding: .4rem .25rem;
  border-bottom: 2px solid transparent;
}
.app-nav a:hover { text-decoration: none; border-bottom-color: var(--border); }
.app-nav a.active { border-bottom-color: var(--accent); }
.theme-toggle, .logout-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: .35rem .7rem;
  cursor: pointer;
  font: inherit;
}
.theme-toggle:hover, .logout-btn:hover { background: var(--bg-sunken); }
.logout-form { display: inline; margin: 0; }

/* Main */
.app-main {
  max-width: 880px;
  margin: 1.5rem auto 3rem;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Card */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}
.card.narrow { max-width: 480px; margin: 0 auto; width: 100%; }
.card-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-muted);
  margin-bottom: .35rem;
}

/* Buttons */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: .55rem 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-sunken); text-decoration: none; }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-small { padding: .3rem .6rem; font-size: .85rem; }

/* Form */
form.stack { display: flex; flex-direction: column; gap: .9rem; }
form.stack label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--fg-muted); }
form.stack input, form.stack select {
  font: inherit;
  font-size: 1rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--fg);
}
form.stack input:focus, form.stack select:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 1px;
  border-color: var(--primary);
}
.hint { font-size: .8rem; color: var(--fg-muted); }
.hint a { color: var(--accent); }

/* Landing */
.landing { max-width: 640px; margin: 4rem auto 2rem; text-align: center; padding: 0 1.25rem; }
.landing h1 { font-size: 2.25rem; }
.landing .lede { font-size: 1.1rem; color: var(--fg-muted); margin-bottom: 1.5rem; }

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.25rem;
}
/* Defaults for balance figure (used in other cards and on the account page) */
.balance-figure {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  margin: .3rem 0 .2rem;
  font-feature-settings: "tnum";
  color: var(--fg);
}
.balance-frac { color: var(--fg-muted); font-size: .55em; font-weight: 400; }

/* Balance card: gradient background — light text wins over .card defaults */
.balance-card {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 80%, var(--brand-green)));
}
.balance-card .card-label    { color: rgba(255,255,255,.78); }
.balance-card .balance-figure { color: var(--primary-fg); }
.balance-card .balance-frac   { color: rgba(255,255,255,.6); }
.figure {
  font-size: 1.5rem;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.actions-row { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Lists */
.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.list-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
}
.list-row .grow { flex: 1; }

/* Badges */
.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: white;
}
.badge-blue  { background: var(--primary); }
.badge-green { background: var(--success); }
.badge-gold  { background: var(--accent); color: #2a1f04; }

/* Banner */
.banner {
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: .9rem;
}
.banner-warn { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); border-left: 3px solid var(--accent); }
.banner-beta { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--fg); border-left: 3px solid var(--accent); text-align: left; }

/* Modal */
dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); color: var(--fg); padding: 1.5rem; max-width: 32rem; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.4); }

/* Account ID card spacing */
.card-actions { margin-top: .6rem; }

/* QR code display */
.qr-image { max-width: 100%; display: block; margin: 1rem auto; image-rendering: pixelated; }
.qr-id { text-align: center; word-break: break-all; }

.actions-row-right { justify-content: flex-end; }

/* Checkbox rows: lay the box beside its label. The extra `form.stack`
   qualifier beats `form.stack label { flex-direction: column }`. */
.checkbox-row,
form.stack label.checkbox-row { flex-direction: row; align-items: flex-start; gap: .65rem; }
.checkbox-row input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; margin-top: .15rem;
  flex: none; padding: 0;
}

/* Collapsible cards (<details class="card">) */
details.card > summary {
  cursor: pointer;
  list-style: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { display: inline-block; margin: 0; }
details.card > summary::before {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  margin-right: .5rem;
  color: var(--fg-muted);
  transition: transform .15s ease;
}
details.card[open] > summary::before { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: .75rem; }

/* Landing feature points */
.landing-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  text-align: left;
}
.landing-points > div {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.landing-cta { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Long-form content pages (about / privacy / terms) */
.prose { max-width: 68ch; margin: 0 auto; line-height: 1.6; }
.prose h1 { margin-bottom: .25rem; }
.prose h2 { margin-top: 1.75rem; margin-bottom: .4rem; font-size: 1.15rem; }
.prose h3 { margin-top: 1.2rem; margin-bottom: .25rem; font-size: 1rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin: .3rem 0; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.75rem 0; }
.prose pre { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; overflow-x: auto; font-family: var(--font-mono); font-size: .82rem; line-height: 1.45; }
.prose code { font-family: var(--font-mono); font-size: .85em; background: var(--bg-sunken); padding: .05rem .3rem; border-radius: 4px; }
.prose pre code { background: none; padding: 0; font-size: 1em; }

/* Documentation layout: a sticky section nav (Wikipedia-style TOC) + article.
   Used by the About and Developers pages. */
html { scroll-behavior: smooth; }
.doc-layout { display: flex; gap: 2rem; align-items: flex-start; }
.doc-layout .prose { margin: 0; flex: 1; min-width: 0; max-width: none; }
.toc { position: sticky; top: 4.5rem; flex: 0 0 190px; }
.toc-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); margin: 0 0 .4rem .75rem; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.toc li { margin: 0; }
.toc a { display: block; padding: .35rem .75rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--fg-muted); font-size: .9rem; }
.toc a:hover { color: var(--fg); border-left-color: var(--fg-muted); text-decoration: none; }
.toc-mobile { display: none; }
.doc-layout h2[id], .doc-layout h3[id] { scroll-margin-top: 5rem; }

/* Footer */
.app-footer {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
}
.app-footer a { color: var(--fg-muted); margin: 0 .55rem; }
.app-footer a:hover { color: var(--fg); }

/* Mobile */
@media (max-width: 720px) {
  .app-header { padding: .75rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .brand { font-size: 1rem; }
  .app-nav { gap: .6rem; font-size: .9rem; }
  .app-nav a { padding: .3rem .15rem; }
  .theme-toggle, .logout-btn { padding: .3rem .5rem; font-size: .85rem; }
  .app-main { margin: 1rem auto 2rem; padding: 0 .75rem; gap: 1rem; }
  .card { padding: 1rem 1.1rem; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .balance-figure { font-size: 2rem; }
  .landing h1 { font-size: 1.65rem; }
  .landing { margin-top: 2rem; }

  /* Section nav: sidebar hidden, a sticky scrollable strip under the header. */
  .doc-layout { display: block; }
  .toc { display: none; }
  .toc-mobile {
    display: block; position: sticky; top: 3.25rem; z-index: 5;
    background: var(--bg); border-bottom: 1px solid var(--border);
    margin: 0 -.75rem .75rem; padding: .4rem .75rem;
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  }
  .toc-mobile a { display: inline-block; padding: .3rem .55rem; color: var(--fg-muted); font-size: .85rem; }
  .doc-layout h2[id], .doc-layout h3[id] { scroll-margin-top: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  html { scroll-behavior: auto; }
}