/* Writer income dashboard — layout on top of the Organic design system.
   Colors, radii, shadows and spacing come from the tokens in
   _ds/organic-.../styles.css; only this app's own composition lives here.
   The Thai type pair overrides the system's Latin display/body faces. */

:root {
  --font-heading: 'Kanit', 'Caprasimo', system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: 'Noto Sans Thai Looped', 'Figtree', system-ui, sans-serif;
  --muted: color-mix(in srgb, var(--color-text) 60%, transparent);
  --muted-soft: color-mix(in srgb, var(--color-text) 55%, transparent);
}

body { margin: 0; min-height: 100vh; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-700); text-decoration: underline; }
input[type=number]::-webkit-inner-spin-button { opacity: 0.6; }

/* — header — */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--color-bg); }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-bg); font-size: 15px;
}
.back-link { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text); }

/* — page frame — */
.page { max-width: 1120px; margin: 0 auto; padding: 32px 24px 96px; }
.page-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
}
.page-title { margin: 0; font-size: 32px; }
.new-story { display: flex; gap: 8px; align-items: center; }
.new-story .input { width: 220px; }

/* — figure rows — */
.stats { display: grid; gap: 24px; }
.stats-4 { grid-template-columns: repeat(4, 1fr); padding: 28px 0 8px; }
.stats-3 { grid-template-columns: repeat(3, 1fr); padding: 16px 0 32px; }
.stat-value { font-family: var(--font-heading); font-weight: 700; font-size: 34px; margin: 0; }
.stats-3 .stat-value { font-size: 28px; }
.stat-label {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 6px 0 0;
}
.is-income, .is-net { color: var(--color-accent); }
.is-expense { color: var(--color-accent-2-700); }

/* — story cards — */
.story-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; margin-top: 12px;
}
.story-card { cursor: pointer; }
.story-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.story-card-figures { display: flex; gap: 20px; margin-top: 4px; font-size: 13px; }
.story-card .card-meta { margin-top: 6px; }
.btn-trash { color: var(--muted-soft); }
.story-card .btn-trash { width: 26px; height: 26px; }
.table .btn-trash { width: 24px; height: 24px; }
.empty { padding: 48px 0; text-align: center; color: var(--muted-soft); }

/* — story view — */
.story-title-input {
  font-family: var(--font-heading); font-weight: 700; font-size: 28px;
  border: none; background: transparent; padding: 4px 0 4px 14px;
  margin-bottom: 4px; width: 100%;
}
.story-title-input:hover { border-color: transparent; }

.ledgers { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ledger h3 { margin: 0 0 12px; }
.ledger-form { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.ledger-total { text-align: right; margin-top: 8px; font-size: 13px; }
.num { text-align: right; }
.detail { font-size: 13px; }
.w-190 { max-width: 190px; }
.w-150 { max-width: 150px; }
.w-140 { max-width: 140px; }
.w-120 { max-width: 120px; }
.w-110 { max-width: 110px; }
.w-90  { max-width: 90px; }

/* — price calculator — */
.calc-head { margin: 40px 0 4px; }
.calc-note { font-size: 13px; color: var(--muted); margin: 0 0 16px; max-width: 70ch; }
.calc-card { padding: 24px; }
.calc-inputs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.calc-results {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-divider);
}
.calc-promo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-divider);
}
.calc-label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px;
}
.calc-label-accent { color: var(--color-accent-700); }
.calc-value { font-family: var(--font-heading); font-weight: 800; font-size: 20px; margin: 0; }
.calc-promo .calc-value { font-size: 22px; }
.calc-value-lead { font-size: 24px; color: var(--color-accent); }
.calc-value-accent { color: var(--color-accent); }

/* — responsive — */
@media (max-width: 900px) {
  .ledgers { grid-template-columns: 1fr; gap: 28px; }
  .calc-inputs, .calc-results { grid-template-columns: repeat(2, 1fr); }
  .stats-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .page { padding: 24px 16px 72px; }
  .page-title { font-size: 26px; }
  .stats-3 { grid-template-columns: 1fr; }
  .calc-inputs, .calc-results, .calc-promo { grid-template-columns: 1fr; }
  .new-story { width: 100%; }
  .new-story .input { width: auto; flex: 1; }
  .calc-card { padding: 18px; }
}

/* — auth screen — */
.auth-page { display: flex; justify-content: center; padding-top: 96px; }
.auth-card { width: min(380px, 100%); padding: 32px; text-align: left; }
.auth-card .field { margin-bottom: 14px; }
.auth-error {
  font-size: 13px; color: var(--color-accent-2-800);
  background: var(--color-accent-2-100); border-radius: var(--radius-sm);
  padding: 8px 12px; margin: 4px 0 14px;
}
.auth-notice {
  font-size: 13px; color: var(--color-accent-700);
  background: var(--color-accent-100); border-radius: var(--radius-sm);
  padding: 8px 12px; margin: 4px 0 14px;
}
.auth-switch { font-size: 13px; text-align: center; margin: 16px 0 0; color: var(--muted); }
.user-chip { font-size: 13px; color: var(--muted); margin-right: 4px; }

@media (max-width: 560px) {
  .auth-page { padding-top: 48px; }
  .auth-card { padding: 24px; }
}