/* ==========================================================================
   เงินงอก office shell (NGERNNGOK-REDESIGN-PLAN.md phase 4, step 1).

   Loaded after css/office.css. Where office.css is the self-contained kit
   (--g- tokens, g- parts), this file is the bridge: it repaints the existing
   app in the office palette so no screen is left in the old leaf green
   while the screens move over one by one.

   Light only for now (owner, 2026-10-16). Both the old dark and light themes
   resolve to paper here; the theme switch is hidden until the night-shift
   "กะดึก" theme exists. The theme code and its stored preference are left as
   they are, so that theme can return without migrating anyone.

   Specificity: style.css and redesign.css set their light tokens on
   body.light-theme (0,1,1). body:is(.light-theme, :not(.light-theme)) has the
   same weight and loads later, so it wins in both themes.
   ========================================================================== */
body:is(.light-theme, :not(.light-theme)) {
  color-scheme: light;

  /* style.css tokens */
  --bg-primary: #f3f0e8;
  --bg-secondary: #ece8df;
  --bg-card: #ffffff;
  --border-color: #ddd7c9;
  --border-glow: rgba(29, 36, 51, 0.25);
  --text-main: #1d2433;
  --text-muted: #5b6170;
  --switch-off: #8a8f9a;
  --text-dark: #ffffff;
  --surface-raised: #ffffff;
  --danger: #c2261f;
  --danger-soft: rgba(194, 38, 31, 0.09);
  --btn-outline: #1d2433;
  --btn-outline-bg: #ffffff;
  --btn-outline-hover: #1d2433;
  --btn-outline-bg-hover: #f3f0e8;
  --glass-bg: #ffffff;
  --glass-border: #ddd7c9;
  --sidebar-solid: #ffffff;
  --nav-active: #1d2433;
  --nav-border: #8a8f9a;
  --shadow-color: rgba(29, 36, 51, 0.08);
  /* Green stays the colour of money; actions are ink, like the kit's .g-btn. */
  --green-forest: #1d2433;
  --green-matcha: #17723a;
  --green-matcha-strong: #1d2433;
  --green-sage: #5b6170;
  --green-mint: #b6f08c;
  --card-gradient-1: linear-gradient(135deg, #2c3650 0%, #1d2433 100%);
  --card-gradient-2: linear-gradient(135deg, #1e8e46 0%, #17723a 100%);
  --card-gradient-3: linear-gradient(135deg, #a8771b 0%, #8a5f0f 100%);

  /* redesign.css tokens */
  --m-app-bg: #f3f0e8;
  --m-surface: #ffffff;
  --m-surface-2: #ece8df;
  --m-line: #ddd7c9;
  --m-fg: #1d2433;
  --m-muted: #5b6170;
  --m-brand: #17723a;
  --m-brand-strong: #1d2433;
  --m-brand-soft: rgba(30, 142, 70, 0.12);
  --m-on-brand: #ffffff;
  --m-in: #17723a;
  --m-out: #c2261f;
  --m-move: #2246d8;
  --m-bill: #8a5f0f;
  --m-budget: #6b4fa0;
  --m-gold: #8a5f0f;
  --m-gold-line: #c9a24a;
  --m-scrim: rgba(29, 36, 51, 0.45);
  --m-shadow: 0 3px 0 #1d2433;
  --m-tile-shadow: 0 2px 0 rgba(29, 36, 51, 0.85);
  --m-font-display: var(--g-font-display);

  background-color: var(--g-paper);
  background-image:
    linear-gradient(var(--g-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-grid) 1px, transparent 1px);
  background-size: var(--g-grid-size) var(--g-grid-size);
  background-attachment: fixed;
}

/* Headings in Kanit, the office's display face. */
body :is(h1, h2, h3, h4, .font-title) {
  font-family: var(--g-font-display);
}

/* The theme switch waits for the night-shift theme. */
.theme-switch-row {
  display: none;
}

/* ---- Wordmark: green เงิน, ink งอก --------------------------------------- */
.g-wordmark {
  font-family: var(--g-font-display);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--g-ink);
}

.g-wordmark__ngern {
  color: var(--g-money-text);
}

/* ---- Bottom bar: a white strip ruled in ink, the red + to log ------------ */
.bottom-nav::before {
  background: var(--g-card);
  border-top: 1.5px solid var(--g-ink);
  box-shadow: none;
}

.bottom-nav .nav-link {
  color: var(--g-ink-muted);
  font-family: var(--g-font-display);
  font-weight: 500;
  letter-spacing: 0;
}

.bottom-nav .nav-link.active {
  color: var(--g-ink);
  font-weight: 600;
}

/* The active tab gets a highlighter stroke, not a coloured dot. */
.bottom-nav .nav-link.active::before {
  top: auto;
  bottom: 4px;
  width: 34px;
  height: 7px;
  border-radius: 3px 8px 4px 9px / 6px 3px 7px 4px;
  background: var(--g-note-yellow);
  z-index: -1;
}

.bottom-nav-fab {
  background: var(--g-pen-red);
  border: 3px solid var(--g-ink);
  box-shadow: 0 3px 0 var(--g-ink);
}

.bottom-nav-fab:hover,
.bottom-nav-fab:focus-visible {
  box-shadow: 0 4px 0 var(--g-ink);
}

/* ==========================================================================
   Phase 4, step 2: ภาพรวม as office paper.
   ========================================================================== */

/* ---- Date chip and sub-tabs ---------------------------------------------- */
.date-badge,
body.light-theme .date-badge {
  color: var(--g-ink);
  font-family: var(--g-font-display);
  font-weight: 600;
  letter-spacing: 0;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  padding: 5px 10px;
  box-shadow: 0 2px 0 var(--g-ink);
}

/* The date row sits straight on the paper, not in a card of its own. */
.time-travel-widget {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-inline: 0;
}

.time-travel-btn,
.time-travel-btn.current-date-btn {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  color: var(--g-ink);
  font-family: var(--g-font-display);
  box-shadow: 0 2px 0 var(--g-ink);
}

.time-travel-btn:hover,
.time-travel-btn.current-date-btn:hover {
  background: var(--g-note-yellow);
  color: var(--g-ink);
  border-color: var(--g-ink);
  box-shadow: 0 2px 0 var(--g-ink);
}

.time-travel-btn:focus-visible {
  outline: 2px solid var(--g-pen-blue);
  outline-offset: 2px;
}

.subtabs {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  box-shadow: 0 2px 0 var(--g-ink);
}

.subtab-indicator {
  background: var(--g-note-yellow);
  border: 0;
  border-radius: 6px;
}

.subtab {
  font-family: var(--g-font-display);
  color: var(--g-ink-muted);
}

.subtab[aria-selected="true"] {
  color: var(--g-ink);
}

/* ---- The summary sheet ใบสรุปยอด ----------------------------------------- */
.mo-hero {
  position: relative;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
  padding: 14px 16px 16px;
}

.mo-sheet-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  /* Leaves room for the arrange and eye buttons that sit on this corner. */
  padding-right: 88px;
  border-bottom: 1.5px dashed var(--g-line);
  font: 700 15px/1.2 var(--g-font-display);
  color: var(--g-ink);
}

.mo-sheet-title span {
  font-weight: 500;
  font-size: 13px;
  color: var(--g-ink-muted);
}

#pane-dashboard .mo-head-tools {
  top: 6px;
  right: 8px;
}

.mo-big {
  font: 800 42px/1.05 var(--g-font-display);
  letter-spacing: 0;
}

/* The meter is a highlighter stroke; today is a red pen tick. */
.mo-meter {
  height: 12px;
  border-radius: 3px 8px 4px 9px / 6px 3px 7px 4px;
  background: var(--g-paper);
  outline: 1px solid var(--g-line);
}

.mo-meter-fill {
  border-radius: inherit;
}

.mo-today {
  top: -5px;
  width: 3px;
  height: 22px;
  background: var(--g-pen-red);
  transform: translateX(-1px) rotate(8deg);
}

/* ---- บัตรตอกเวลา: this week punched ---------------------------------------- */
.mo-timecard {
  margin-top: 14px;
  padding: 10px 12px 12px;
  background: var(--g-note-yellow);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
}

.mo-timecard-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font: 600 13px/1.2 var(--g-font-display);
  color: var(--g-ink);
}

.mo-timecard-head b {
  font-family: var(--g-font-hand);
  font-weight: 400;
  font-size: 15px;
  color: var(--g-red-text);
}

.mo-punches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mo-punch {
  display: grid;
  justify-items: center;
  gap: 4px;
  font: 500 11px/1 var(--g-font-display);
  color: var(--g-ink-muted);
}

.mo-punch-hole {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px dashed var(--g-ink-muted);
  background: var(--g-card);
}

.mo-punch.is-punched .mo-punch-hole {
  border: 1.5px solid var(--g-ink);
  background: var(--g-ink);
  box-shadow: inset 0 0 0 4px var(--g-note-yellow);
}

.mo-punch.is-today {
  color: var(--g-ink);
  font-weight: 700;
}

.mo-punch.is-today .mo-punch-hole {
  outline: 2px solid var(--g-pen-red);
  outline-offset: 2px;
}

.mo-punch.is-future .mo-punch-hole {
  opacity: 0.45;
}

/* ---- Tiles are sheets of paper ------------------------------------------- */
.mo-tile {
  border-radius: var(--g-radius);
}

.mo-box,
.mo-tint-bill,
.mo-tint-budget {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  box-shadow: 0 3px 0 var(--g-ink);
}

.mo-tint-bill {
  background: color-mix(in srgb, var(--g-note-yellow) 45%, var(--g-card));
}

.mo-tint-budget {
  background: color-mix(in srgb, var(--g-note-pink) 40%, var(--g-card));
}

.mo-open {
  border-block-color: var(--g-line);
}

.mo-eyebrow {
  font-family: var(--g-font-display);
  letter-spacing: 0.02em;
  color: var(--g-ink-muted);
}

.mo-t-big,
.mo-t-mid,
.mo-t-huge,
.mo-t-date {
  font-family: var(--g-font-display);
}

.mo-t-big {
  font-weight: 700;
}

/* ---- What Midori noticed: sticky notes, colour by kind -------------------- */
.mo-ins {
  --g-note: var(--g-note-yellow);
  background: var(--g-note);
  border: 0;
  border-radius: 3px 3px 14px 3px;
  box-shadow: var(--g-note-shadow);
  color: var(--g-ink);
  transform: rotate(-1deg);
}

.mo-grid .mo-ins:nth-child(2) {
  transform: rotate(1.2deg);
}

.mo-ins:active,
.mo-grid .mo-ins:nth-child(2):active {
  transform: scale(0.985);
}

.mo-ins[data-arg="budget"],
.mo-ins[data-arg="price"],
.mo-ins[data-arg="unusual"] {
  --g-note: var(--g-note-pink);
}

.mo-ins[data-arg="twice"],
.mo-ins[data-arg="recurring"] {
  --g-note: var(--g-note-blue);
}

.mo-ins[data-arg="ready"],
.mo-ins[data-arg="lessons"] {
  --g-note: var(--g-note-green);
}

.mo-ins .mo-ins-eyebrow {
  color: var(--g-ink);
  font-family: var(--g-font-display);
  letter-spacing: 0.02em;
}

.mo-ins .mo-sub {
  color: var(--g-ink-muted);
}

.mo-ins .mo-count {
  background: rgba(255, 255, 255, 0.7);
  color: var(--g-ink);
}

@media (prefers-reduced-motion: reduce) {
  .mo-ins,
  .mo-grid .mo-ins:nth-child(2) {
    transform: none;
  }
}

/* ==========================================================================
   Phase 4, step 3: กระเป๋าเงิน. Each wallet is an office ID card.
   ========================================================================== */
.add-btn {
  background: var(--g-ink);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  font-family: var(--g-font-display);
  box-shadow: 0 3px 0 var(--g-pen-red);
}

.add-btn:hover {
  background: var(--g-ink);
  transform: none;
  box-shadow: 0 4px 0 var(--g-pen-red);
}

.wallets-carousel {
  gap: 16px;
}

.wallet-card {
  --wallet-color: var(--g-pen-green);
  height: auto;
  min-height: 0;
  gap: 10px;
  justify-content: flex-start;
  padding: 0 16px 14px;
  color: var(--g-ink);
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
  overflow: hidden;
  cursor: default;
}

.wallet-card::before,
.wallet-card::after {
  content: none;
}

.wallet-card:hover {
  transform: none;
  box-shadow: 0 3px 0 var(--g-ink);
}

/* The band: the wallet's own colour, with the lanyard slot punched in it. */
.wallet-card-band {
  margin: 0 -16px;
  padding: 18px 16px 6px;
  background: var(--wallet-color);
  border-bottom: 1.5px solid var(--g-ink);
  font: 600 11px/1.2 var(--g-font-display);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(29, 36, 51, 0.35);
}

.wallet-card-slot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 40px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: var(--g-paper);
  border: 1.5px solid var(--g-ink);
}

.wallet-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.wallet-card-photo {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 56px;
  border: 1.5px solid var(--g-ink);
  border-radius: 6px;
  background: color-mix(in srgb, var(--wallet-color) 16%, var(--g-card));
  color: var(--g-ink);
}

.wallet-card-photo .ic {
  width: 24px;
  height: 24px;
}

.wallet-card-who {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wallet-name-label {
  font: 700 17px/1.2 var(--g-font-display);
  opacity: 1;
  color: var(--g-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-type-badge {
  justify-self: start;
  font: 500 12px/1 var(--g-font-display);
  letter-spacing: 0;
  color: var(--g-ink);
  background: var(--g-note-yellow);
  border-radius: 3px 8px 4px 9px / 6px 3px 7px 4px;
  padding: 4px 8px;
}

.wallet-balance-display {
  font: 800 28px/1.1 var(--g-font-display);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--g-ink);
  padding-top: 8px;
  border-top: 1.5px dashed var(--g-line);
}

.wallet-card .goal-card-bar {
  height: 8px;
  margin-top: 0;
  background: var(--g-paper);
  outline: 1px solid var(--g-line);
}

.wallet-card .goal-card-bar span {
  background: var(--wallet-color);
}

.wallet-card-footer {
  opacity: 1;
  color: var(--g-ink-muted);
  font-size: 12px;
}

.wallet-card-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wallet-edit-btn,
.wallet-delete-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--g-ink-muted);
  cursor: pointer;
}

.wallet-edit-btn .ic,
.wallet-delete-btn .ic {
  width: 17px;
  height: 17px;
}

.wallet-edit-btn:hover {
  color: var(--g-ink);
  background: var(--g-paper);
}

.wallet-delete-btn:hover {
  color: var(--g-pen-red);
  background: var(--g-paper);
}

.wallet-edit-btn:focus-visible,
.wallet-delete-btn:focus-visible {
  outline: 2px solid var(--g-pen-blue);
  outline-offset: 0;
}

/* ---- People: visitor passes ---------------------------------------------- */
.people-row {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  box-shadow: 0 2px 0 var(--g-ink);
}

.people-avatar {
  background: var(--g-note-blue);
  color: var(--g-ink);
  border: 1.5px solid var(--g-ink);
  font-family: var(--g-font-display);
}

.people-name {
  font-family: var(--g-font-display);
}

/* ==========================================================================
   Phase 4, step 4: รายการ. The ledger is a filing folder; the periods are
   its tabs. #filterPeriod stays in the page as the source of truth, but the
   tabs are how it is set, so the select is not shown twice.
   ========================================================================== */
#tab-ledger {
  --ledger-folder: #f1dc9a;
}

#filterPeriod {
  display: none;
}

.ledger-filter-bar {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 2px 0 var(--g-ink);
}

.ledger-filter-selects #filterType {
  grid-column: span 2;
}

@media (min-width: 769px) {
  .ledger-filter-selects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ledger-filter-selects #filterType {
    grid-column: auto;
  }
}

.ledger-filter-bar .form-control {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
}

.ledger-folder-tabs {
  display: flex;
  gap: 2px;
  margin: 14px 0 0;
  padding: 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}

.ledger-folder-tabs::-webkit-scrollbar {
  display: none;
}

.ledger-folder-tab {
  /* Six share the width at phone size; the strip scrolls only past that. */
  flex: 1 0 auto;
  min-width: 46px;
  min-height: 38px;
  padding: 8px 8px 6px;
  white-space: nowrap;
  border: 1.5px solid var(--g-ink);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--ledger-folder) 45%, var(--g-paper));
  color: var(--g-ink-muted);
  font: 600 13px/1.2 var(--g-font-display);
  cursor: pointer;
  /* Each tab sits a little lower, the way the back tabs of a folder do. */
  transform: translateY(3px);
}

.ledger-folder-tab.is-active {
  background: var(--ledger-folder);
  color: var(--g-ink);
  transform: none;
  /* Covers the folder's top rule so the tab and folder read as one piece. */
  margin-bottom: -1.5px;
  padding-bottom: 7.5px;
}

.ledger-folder-tab:focus-visible {
  outline: 2px solid var(--g-pen-blue);
  outline-offset: -4px;
}

.ledger-table-container {
  background: var(--ledger-folder);
  border: 1.5px solid var(--g-ink);
  border-radius: 6px var(--g-radius) var(--g-radius) var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
  padding: 10px;
}

/* The papers in the folder. */
.ledger-table {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.ledger-table th {
  background: var(--g-paper);
  color: var(--g-ink-muted);
  font-family: var(--g-font-display);
  border-bottom: 1.5px solid var(--g-ink);
}

.ledger-table td {
  border-bottom: 1px dashed var(--g-line);
}

.ledger-table tr:hover td {
  background: color-mix(in srgb, var(--g-note-yellow) 18%, var(--g-card));
}

.tx-title-main {
  font-family: var(--g-font-display);
  font-weight: 600;
  color: var(--g-ink);
}

.tx-amount-cell {
  font-family: var(--g-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.amount-income {
  color: var(--g-money-text);
}

.amount-expense {
  color: var(--g-ink);
}

.ledger-table-container .empty-placeholder {
  background: var(--g-card);
  border: 1.5px dashed var(--g-ink-muted);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink-muted);
}

.ledger-table-container .ledger-pagination {
  color: var(--g-ink);
}

@media (max-width: 768px) {
  .ledger-table tbody tr {
    border-bottom: 1px dashed var(--g-line);
  }

  .ledger-table td {
    border-bottom: 0;
  }
}

/* ==========================================================================
   Phase 4, step 5: วางแผน. A desk planner: budgets are taped pages, bills
   carry a torn calendar date, goals are progress sheets.
   ========================================================================== */
.category-filter-bar .currency-select,
.category-period-select {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
  font-family: var(--g-font-display);
}

/* ---- Budgets: planner pages held by a strip of tape ---------------------- */
.budgets-grid {
  gap: 16px 12px;
  padding-top: 6px;
}

.budget-card {
  position: relative;
  overflow: visible;
  color: var(--g-ink);
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  box-shadow: 0 3px 0 var(--g-ink);
}

.budget-card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 46px;
  height: 14px;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--g-note-yellow) 80%, transparent);
  border-left: 1px dashed rgba(29, 36, 51, 0.25);
  border-right: 1px dashed rgba(29, 36, 51, 0.25);
  pointer-events: none;
}

.budget-card:nth-child(even)::before {
  background: color-mix(in srgb, var(--g-note-blue) 85%, transparent);
  transform: translateX(-50%) rotate(2deg);
}

.budget-card:hover {
  transform: none;
}

.budget-card:focus-visible {
  outline: 2px solid var(--g-pen-blue);
  outline-offset: 2px;
}

.budget-card-name {
  font-family: var(--g-font-display);
  font-weight: 600;
  color: var(--g-ink);
}

.budget-card .budget-spent {
  font-family: var(--g-font-display);
  font-weight: 700;
  color: var(--g-ink);
}

.budget-card .budget-max,
.budget-card .budget-card-pct,
.budget-card .budget-card-kind {
  color: var(--g-ink-muted);
}

.budget-card .tag-icon-wrap {
  border: 1.5px solid var(--g-ink);
}

/* The bar is a highlighter stroke; red pen when it runs out. */
.budget-card .budget-progress-bar {
  height: 9px;
  border-radius: 3px 8px 4px 9px / 6px 3px 7px 4px;
  background: var(--g-paper);
  outline: 1px solid var(--g-line);
}

.budget-card .budget-progress-fill {
  border-radius: inherit;
}

.budget-card .budget-progress-fill.status-safe {
  background-color: var(--g-note-green);
}

.budget-card .budget-progress-fill.status-warn {
  background-color: var(--g-note-yellow);
}

.budget-card .budget-progress-fill.status-danger {
  background-color: var(--g-pen-red);
}

/* ---- Bills: a calendar page torn off for the next date ------------------- */
.schedule-item {
  gap: 14px;
  color: var(--g-ink);
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

.schedule-item:hover {
  transform: none;
  border-color: var(--g-ink);
}

.schedule-item.is-paused {
  background: var(--g-paper);
  box-shadow: 0 2px 0 var(--g-ink-muted);
}

.sched-date-tab {
  flex: none;
  align-self: start;
  display: grid;
  justify-items: center;
  width: 52px;
  overflow: hidden;
  border: 1.5px solid var(--g-ink);
  border-radius: 8px;
  background: var(--g-card);
  font-family: var(--g-font-display);
  color: var(--g-ink);
}

.sched-date-tab small {
  display: block;
  width: 100%;
  padding: 2px 0;
  text-align: center;
  background: var(--g-pen-red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.sched-date-tab b {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  padding: 2px 0 3px;
}

.sched-date-tab.is-ended {
  background: var(--g-paper);
  color: var(--g-ink-muted);
}

.schedule-item.is-paused .sched-date-tab small {
  background: var(--g-ink-muted);
}

.sched-title {
  font-family: var(--g-font-display);
  font-weight: 600;
  color: var(--g-ink);
}

.sched-amount {
  font-family: var(--g-font-display);
  font-weight: 700;
}

.sched-frequency-badge {
  background: var(--g-note-blue);
  color: var(--g-ink);
  border: 0;
  border-radius: 3px 8px 4px 9px / 6px 3px 7px 4px;
  font-family: var(--g-font-display);
}

.sched-paused-badge {
  background: var(--g-paper);
  color: var(--g-ink-muted);
  border: 1px dashed var(--g-ink-muted);
}

/* Compact on a phone (owner, 2026-10-16: too much space). Three lines beside
   the date page: title and tools, amount and frequency, wallet and tag. The
   "Next:" line repeats the date page, so it is kept for screen readers only
   (the page is aria-hidden) and shown only once a schedule has ended. */
@media (max-width: 768px) {
  .schedule-item:not(.detected-charge) {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
      "date   title  actions"
      "date   amount badge"
      "date   labels labels"
      "next   next   next"
      "notice notice notice";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 10px 12px;
  }

  .schedule-item:not(.detected-charge) .sched-date-tab {
    grid-area: date;
    align-self: start;
  }

  .schedule-item:not(.detected-charge) .sched-title {
    font-size: 15px;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .schedule-item:not(.detected-charge) .sched-amount {
    font-size: 17px;
  }

  /* Shares the amount's line, across both right tracks, so a second tag
     (Paused) never widens the tools column and squeezes the title. */
  .schedule-item:not(.detected-charge) .sched-badge-row {
    grid-area: auto;
    grid-row: 2;
    grid-column: 2 / 4;
    justify-self: end;
    gap: 4px;
  }

  .schedule-item:not(.detected-charge) .sched-actions {
    align-self: center;
    gap: 0;
  }

  .schedule-item:not(.is-ended):not(.detected-charge) .sched-next {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .schedules-list {
    gap: 10px;
  }
}

/* ---- Goals: progress sheets ---------------------------------------------- */
.goal-row {
  color: var(--g-ink);
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

.goal-name {
  font-family: var(--g-font-display);
  font-size: 16px;
}

.goal-bar {
  height: 12px;
  border-radius: 3px 8px 4px 9px / 6px 3px 7px 4px;
  background: var(--g-paper);
  outline: 1px solid var(--g-line);
}

.goal-bar span {
  background: var(--g-note-yellow);
}

.goal-row[data-state="reached"] .goal-bar span {
  background: var(--g-note-green);
}

.goal-figures {
  font-family: var(--g-font-display);
  font-weight: 600;
}

.goal-row[data-state="overdue"] .goal-status {
  color: var(--g-red-text);
}

/* ==========================================================================
   Phase 4, step 6: the ผลประเมิน report (#modalOv rooms). A performance
   review: folder tabs, highlighter bars, and the boss's note with a stamp.
   ========================================================================== */
#modalOv .modal-window {
  background: var(--g-paper);
  border: 1.5px solid var(--g-ink);
}

#ovSheetTitle {
  font-family: var(--g-font-display);
  font-weight: 700;
}

.mo-roomtabs button {
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  background: var(--g-card);
  color: var(--g-ink-muted);
  font-family: var(--g-font-display);
}

.mo-roomtabs button[aria-selected="true"] {
  background: var(--g-note-yellow);
  color: var(--g-ink);
  border-color: var(--g-ink);
  box-shadow: 0 2px 0 var(--g-ink);
}

.mo-r-big {
  font: 800 42px/1.05 var(--g-font-display);
  letter-spacing: 0;
}

/* The bars are highlighter strokes on paper. */
.mo-hbar-top {
  font-family: var(--g-font-display);
}

.mo-hbar-track {
  height: 16px;
  border-radius: 3px 8px 4px 9px / 6px 3px 7px 4px;
  background: var(--g-card);
  outline: 1px solid var(--g-line);
}

.mo-hbar-track i,
.mo-hbar-track.mo-two i:first-child {
  border-radius: inherit;
}

.mo-bar-in {
  background: var(--g-note-green);
}

.mo-bar-out {
  background: color-mix(in srgb, var(--g-pen-red) 75%, var(--g-note-pink));
}

.mo-hbar-track .mo-ghost {
  background: repeating-linear-gradient(-45deg, var(--g-note-pink) 0 5px, transparent 5px 9px);
  border-radius: 0 8px 8px 0;
}

/* ---- โน้ตจากหัวหน้า -------------------------------------------------------- */
.mo-boss-note {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  background: var(--g-note-blue);
  border-radius: 3px 3px 14px 3px;
  box-shadow: var(--g-note-shadow);
  transform: rotate(-0.6deg);
  color: var(--g-ink);
}

.mo-boss-note[data-verdict="improve"] {
  background: var(--g-note-pink);
}

.mo-boss-note[data-verdict="none"] {
  background: var(--g-note-yellow);
}

.g-cast--note {
  flex: none;
  width: 52px;
  height: 52px;
}

.mo-boss-text {
  min-width: 0;
  padding-right: 64px;
}

.mo-boss-text b {
  display: block;
  font: 700 14px/1.2 var(--g-font-display);
  margin-bottom: 2px;
}

.mo-boss-text p {
  margin: 0;
  font: 400 15px/1.4 var(--g-font-hand);
}

.mo-boss-note[data-verdict="none"] .mo-boss-text {
  padding-right: 0;
}

/* The rubber stamp: red ink, a little crooked, the way a real one lands. */
.mo-stamp {
  position: absolute;
  top: 50%;
  right: 10px;
  padding: 4px 8px;
  border: 2.5px solid var(--g-pen-red);
  border-radius: 6px;
  color: var(--g-pen-red);
  font: 800 16px/1 var(--g-font-display);
  letter-spacing: 0.06em;
  transform: translateY(-50%) rotate(-12deg);
  opacity: 0.88;
  mix-blend-mode: multiply;
}

.mo-stamp--improve {
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .mo-boss-note {
    transform: none;
  }
}

/* ==========================================================================
   Phase 4, step 7: the + sheet, "ลงบันทึกรายการ". A logbook page: ruled
   paper, the three ways in as inked tabs. Chat, Form and Scan work as before.
   ========================================================================== */
#modalTransaction .modal-window {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
}

#modalTransactionTitle {
  font-family: var(--g-font-display);
  font-weight: 700;
}

/* The highlighter under the title, as on the active bottom tab. */
#modalTransactionTitle::after {
  content: '';
  display: block;
  width: 64px;
  height: 6px;
  margin-top: 2px;
  border-radius: 3px 8px 4px 9px / 6px 3px 7px 4px;
  background: var(--g-note-yellow);
}

.m-mode-seg {
  background: var(--g-paper);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
}

.m-mode-seg button {
  color: var(--g-ink-muted);
  font-family: var(--g-font-display);
}

.m-mode-seg button[aria-selected="true"] {
  background: var(--g-note-yellow);
  color: var(--g-ink);
  box-shadow: 0 2px 0 var(--g-ink);
}

.m-mode-seg button:focus-visible {
  outline: 2px solid var(--g-pen-blue);
}

/* ==========================================================================
   Phase 5: orientation with พี่งอก. She hosts setup, then six lessons wait in
   the right-hand noticed tile and in Settings › Lessons (js/lessons.js).
   ========================================================================== */
#onboarding {
  background-color: var(--g-paper);
  background-image:
    linear-gradient(var(--g-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-grid) 1px, transparent 1px);
  background-size: var(--g-grid-size) var(--g-grid-size);
}

.onboarding-panel {
  padding: 20px 18px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

.onboarding-panel .boot-mark {
  font-family: var(--g-font-display);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--g-money-text);
}

.onboarding-panel h2 {
  font-family: var(--g-font-display);
  color: var(--g-ink);
}

/* พี่งอก and her speech bubble. */
.onboarding-host {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.g-cast--host {
  flex: none;
  width: 76px;
  height: 76px;
}

.onboarding-bubble {
  position: relative;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--g-note-yellow);
  border-radius: 12px 12px 12px 3px;
  box-shadow: var(--g-note-shadow);
  color: var(--g-ink);
  font: 400 15px/1.45 var(--g-font-hand);
}

.onboarding-skip {
  font-family: var(--g-font-display);
}

/* ---- The lessons sheet ---------------------------------------------------- */
.mo-lessons-note {
  margin-top: 0;
}

.mo-lessons-note .mo-boss-text {
  padding-right: 0;
}

.mo-lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.mo-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  box-shadow: 0 2px 0 var(--g-ink);
  color: var(--g-ink);
}

.mo-lesson[data-state="done"] {
  background: color-mix(in srgb, var(--g-note-green) 35%, var(--g-card));
  box-shadow: none;
}

.mo-lesson[data-state="skipped"] {
  background: var(--g-paper);
  border-style: dashed;
  box-shadow: none;
}

.mo-lesson-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--g-ink);
  border-radius: 50%;
  background: var(--g-note-yellow);
  font: 700 14px/1 var(--g-font-display);
}

.mo-lesson[data-state="done"] .mo-lesson-n {
  background: var(--g-pen-green);
  color: #fff;
}

.mo-lesson-n .ic {
  width: 16px;
  height: 16px;
}

.mo-lesson-txt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mo-lesson-txt b {
  font: 600 14px/1.3 var(--g-font-display);
}

.mo-lesson-txt small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--g-ink-muted);
}

.mo-lesson-tools {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 0;
}

.mo-lesson-tools .mo-pill-btn {
  min-height: 36px;
  padding: 7px 14px;
  font-size: 13px;
  background: var(--g-ink);
  color: #fff;
}

.mo-lesson-tools .mo-txt-btn {
  padding: 4px 2px 0;
  font-size: 12px;
  color: var(--g-ink-muted);
}

.settings-group[data-settings-key="lessons"] p {
  margin: 0 0 10px;
}

/* ==========================================================================
   Phase 6: polish. The controls every screen shares, in the office kit:
   inked buttons with a lift, ruled inputs, paper dialogs.
   ========================================================================== */
.btn-primary,
.form-submit-btn {
  background: var(--g-ink);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  color: #fff;
  font-family: var(--g-font-display);
  box-shadow: 0 3px 0 var(--g-pen-red);
}

.btn-primary:hover,
.form-submit-btn:hover {
  background: var(--g-ink);
  box-shadow: 0 4px 0 var(--g-pen-red);
}

.btn-secondary {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
  font-family: var(--g-font-display);
  box-shadow: 0 2px 0 var(--g-ink);
}

.btn-secondary:hover {
  background: var(--g-note-yellow);
  border-color: var(--g-ink);
}

.btn-danger {
  border: 1.5px solid var(--g-pen-red);
  border-radius: var(--g-radius-sm);
  color: var(--g-red-text);
  font-family: var(--g-font-display);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.form-submit-btn:focus-visible {
  outline: 2px solid var(--g-pen-blue);
  outline-offset: 2px;
}

.form-control {
  background: var(--g-card);
  border: 1.5px solid var(--g-line);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
}

.form-control:focus {
  border-color: var(--g-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-note-yellow) 70%, transparent);
}

/* Dialogs are a sheet of paper on the desk. */
.modal-window {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 4px 0 var(--g-ink), 0 18px 40px rgba(29, 36, 51, 0.25);
}

.modal-header h3 {
  font-family: var(--g-font-display);
  font-weight: 700;
  color: var(--g-ink);
}

/* 44px to tap, whatever the icon inside it draws. */
.modal-close-btn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--g-ink);
}

/* The segmented switch inside the report and the sheets. */
.mo-seg {
  background: var(--g-paper);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
}

.mo-seg button {
  min-height: 36px;
  border-radius: 7px;
  font-family: var(--g-font-display);
  color: var(--g-ink-muted);
}

.mo-seg button[aria-pressed="true"] {
  background: var(--g-note-yellow);
  color: var(--g-ink);
  box-shadow: 0 2px 0 var(--g-ink);
}

.mo-pill-btn {
  background: var(--g-ink);
  font-family: var(--g-font-display);
}

.mo-ghost-btn {
  border-color: var(--g-ink);
  font-family: var(--g-font-display);
}

.mo-txt-btn {
  color: var(--g-blue-text);
  font-family: var(--g-font-display);
}

.people-btn {
  min-height: 44px;
  border-color: var(--g-ink);
  font-family: var(--g-font-display);
}

.people-btn-strong {
  background: var(--g-ink);
  border-color: var(--g-ink);
  color: #fff;
}

.btn-page {
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  background: var(--g-card);
  color: var(--g-ink);
  font-family: var(--g-font-display);
  min-height: 40px;
}

/* Small icon buttons keep their look but get a 44px tap area. */
.people-icon-btn,
.wallet-edit-btn,
.wallet-delete-btn {
  position: relative;
}

.people-icon-btn::after,
.wallet-edit-btn::after,
.wallet-delete-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
}

/* ---- Thai text: no single word stranded on its own line ------------------- */
body :is(h1, h2, h3, h4, .mo-t-mid, .mo-boss-text p, .onboarding-bubble, .mo-lesson-txt b) {
  text-wrap: balance;
}

body :is(p, .mo-sub, .mo-status, .mo-note, .onboarding-lede, small) {
  text-wrap: pretty;
}

/* ---- Phase 6 audit fixes (375px, 2026-10-17) ------------------------------ */
/* Contrast: back folder tabs were 3.37:1 in muted ink on manila. */
.ledger-folder-tab {
  color: var(--g-ink);
  font-weight: 500;
}

/* A category's own colour on paper can fall under 4.5:1 (Food was 3.57:1);
   darkened, it keeps its hue and reads. */
.mo-status b[style] {
  filter: brightness(0.72) saturate(1.15);
}

/* Touch: every control 40px or more on its short side. */
.time-travel-btn {
  min-width: 44px;
  min-height: 40px;
  justify-content: center;
}

.date-badge,
body.light-theme .date-badge {
  min-height: 40px;
}

.subtab {
  min-height: 42px;
}

.ledger-folder-tab {
  min-height: 42px;
}

.ledger-filter-bar .form-control,
.category-period-select,
#ledgerPageSize {
  min-height: 44px;
}

/* The Summary sheet's bar is 12px to look at and 40px to tap. */
.mo-meter::after {
  content: '';
  position: absolute;
  inset: -14px 0;
}

.tx-actions-group .btn-icon-secondary,
.tx-actions-group .btn-icon-danger {
  width: 36px;
  height: 36px;
  justify-content: center;
}

/* ==========================================================================
   Phase 6, emulator walk-through fixes.
   ========================================================================== */

/* With the keyboard up the screen is ~520px tall, and the chat history's
   160px floor pushed the input below the sheet's edge: the one field the
   first lesson asks for was out of sight. On short screens the history
   gives way instead; it scrolls. */
@media (max-height: 640px) {
  .m-thread {
    min-height: 0;
  }
}

/* Insights: the four cards were still the old soft white boxes. */
#pane-insights .chart-card {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

#pane-insights .chart-card h3 {
  font-family: var(--g-font-display);
}

/* Settings: the index rows and the gear were the last old-green parts left
   (soft grey cards, mint icon tiles, a green ring on the gear after a tap). */
.header-settings-btn {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  box-shadow: 0 2px 0 var(--g-ink);
  color: var(--g-ink);
}

.header-settings-btn:hover,
.header-settings-btn:focus-visible {
  background: var(--g-note-yellow);
  border-color: var(--g-ink);
  color: var(--g-ink);
}

.settings-index-heading {
  font-family: var(--g-font-display);
  color: var(--g-ink);
}

.settings-row {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

.settings-row:hover {
  border-color: var(--g-ink);
}

.settings-row:focus-visible {
  outline: 2px solid var(--g-pen-blue);
  border-color: var(--g-ink);
}

.settings-row-icon {
  background: var(--g-note-blue);
  border: 1.5px solid var(--g-ink);
  color: var(--g-ink);
}

.settings-row[data-tone="danger"] .settings-row-icon {
  background: color-mix(in srgb, var(--g-note-pink) 45%, var(--g-card));
  color: var(--g-red-text);
}

.settings-row[data-tone="danger"]:hover {
  border-color: var(--g-pen-red);
}

/* Inside a Settings page: the card, the back chevron and the three-way
   choices (language, density, and the rest), as the report's switch. */
.settings-group {
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

.settings-back svg {
  color: var(--g-ink);
}

.settings-back:focus-visible {
  outline-color: var(--g-pen-blue);
}

.density-options {
  background: var(--g-paper);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
}

.density-option {
  min-height: 44px;
  font-family: var(--g-font-display);
  color: var(--g-ink-muted);
}

.density-option[aria-checked="true"] {
  background: var(--g-note-yellow);
  border-color: var(--g-ink);
  color: var(--g-ink);
  box-shadow: 0 2px 0 var(--g-ink);
}

.density-option:focus-visible {
  outline-color: var(--g-pen-blue);
}

/* Setup's last screen: มิโดริ introduces herself under พี่งอก, mirrored and on
   a pink note so the two speakers read apart. Without it, a new user met
   "มิโดริ สังเกตเห็น" on the Overview with no idea who she was. */
.onboarding-host--midori {
  flex-direction: row-reverse;
}

.onboarding-host--midori .onboarding-bubble {
  background: color-mix(in srgb, var(--g-note-pink) 55%, var(--g-card));
  border-radius: 12px 12px 3px 12px;
}

/* ==========================================================================
   Phase 7, step 1: the office header and bar (js/office-nav.js).
   ========================================================================== */

/* The desk calendar: a tear-off page. Phone only; the desktop keeps its
   date chip and month buttons, which have the room. */
.desk-cal {
  display: none;
}

.staff-badge__face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.staff-badge__initial {
  display: none;
  font-family: var(--g-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
}

.staff-badge__face.has-initial .staff-badge__initial {
  display: inline;
}

.staff-badge__face.has-initial .staff-badge__person {
  display: none;
}

.staff-badge {
  position: relative;
}

.staff-badge__dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--g-card);
}

@media (max-width: 1080px) {
  /* The calendar and the badge's dot take over from these. */
  .header-controls,
  #zensync-header-status {
    display: none !important;
  }

  .desk-cal {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    margin-left: auto;
    min-width: 50px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    background: var(--g-card);
    border: 1.5px solid var(--g-ink);
    border-radius: var(--g-radius-sm);
    box-shadow: 0 2px 0 var(--g-ink);
    color: var(--g-ink);
    font-family: var(--g-font-display);
    cursor: pointer;
    touch-action: pan-y;
  }

  .desk-cal__month {
    padding: 1px 6px;
    background: var(--g-pen-red);
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
  }

  .desk-cal__day {
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
    padding-top: 2px;
  }

  .desk-cal__weekday {
    font-size: 9px;
    line-height: 11px;
    padding-bottom: 2px;
    color: var(--g-ink-muted);
  }

  /* Not on today: the whole page goes pink so time travel is never missed. */
  .desk-cal.is-away {
    background: var(--g-note-pink);
  }

  .header-settings-btn.staff-badge {
    margin-left: 8px;
    border-radius: 50%;
  }

}


/* The bar: the office word, and the plain word under it. */
.bottom-nav .nav-link {
  gap: 1px;
}

.bottom-nav .nav-link svg {
  width: 20px;
  height: 20px;
}

.bottom-nav .nav-link .nav-word {
  font-size: 12px;
  line-height: 15px;
}

/* The month sheet. */
.desk-cal-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.desk-cal-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.desk-cal-sheet__title {
  font-family: var(--g-font-display);
  font-size: 18px;
}

.desk-cal-sheet__step {
  min-width: 44px;
  min-height: 44px;
  font-size: 24px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
  cursor: pointer;
}

.desk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.desk-grid__head {
  text-align: center;
  font-size: 11px;
  color: var(--g-ink-muted);
}

.desk-grid__day {
  min-height: 40px;
  background: var(--g-card);
  border: 1px solid transparent;
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
  font-family: var(--g-font-display);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.desk-grid__day.is-out {
  color: var(--g-ink-muted);
  opacity: 0.5;
}

.desk-grid__day.is-today {
  border-color: var(--g-pen-red);
}

.desk-grid__day.is-selected {
  background: var(--g-note-yellow);
  border-color: var(--g-ink);
  font-weight: 600;
}

.desk-cal-sheet__today {
  align-self: center;
  min-height: 44px;
}

/* ==========================================================================
   Phase 7, step 2: โต๊ะ (js/office-desk.js).
   ========================================================================== */

/* Money in and out, inside the ใบสรุปยอด now. */
.desk-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 4px;
  padding-top: 10px;
  border-top: 1.5px dashed var(--g-ink);
}

.desk-flow > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.desk-flow b {
  font-family: var(--g-font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.desk-allowance {
  margin: 6px 0 0;
  font-family: var(--g-font-hand);
  font-size: 15px;
  color: var(--g-pen-blue);
  transform: rotate(-1.5deg);
}

/* The in-tray: yellow memos on a tray. */
.desk-intray {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.desk-intray .mo-band-head {
  margin-bottom: 0;
}

.desk-note {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  text-align: left;
  background: var(--g-note-yellow);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  box-shadow: 0 2px 0 var(--g-ink);
  color: var(--g-ink);
  cursor: pointer;
}

.desk-note.is-first {
  background: var(--g-note-pink);
}

.desk-note__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.desk-note__text b {
  font-family: var(--g-font-display);
  font-weight: 600;
}

.desk-note__text small {
  color: var(--g-ink-muted);
}

.desk-intray .slip-watch-card {
  margin: 0;
}

/* A slip card in the tray means it is not empty. */
.desk-intray:has(#slipWatchCard:not([hidden])) .desk-intray-empty {
  display: none;
}

.desk-lessons {
  margin: 16px 0;
}

/* Today's sheet: a ruled page. */
.desk-today {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

.desk-today__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.desk-today__head h3 {
  margin: 0;
  font-family: var(--g-font-display);
  font-size: 17px;
}

.desk-today__head b {
  font-family: var(--g-font-display);
  font-variant-numeric: tabular-nums;
}

.desk-today__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desk-today__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--g-ink-muted);
}

.desk-today__row > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.desk-today__row small {
  color: var(--g-ink-muted);
}

.desk-today__amt {
  font-family: var(--g-font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--g-red-text);
}

.desk-today__amt.is-in {
  color: var(--g-money-text);
}

.desk-week {
  margin-top: 12px;
}

.desk-week__lbl {
  font-size: 12px;
  color: var(--g-ink-muted);
}

.desk-week__bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 64px;
  margin-top: 4px;
}

.desk-week__day {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}

.desk-week__day i {
  display: block;
  width: 70%;
  max-height: 44px;
  background: var(--g-note-blue);
  border: 1px solid var(--g-ink);
  border-radius: 3px 3px 0 0;
}

.desk-week__day.is-today i {
  background: var(--g-pen-red);
}

.desk-week__day small {
  font-size: 10px;
  color: var(--g-ink-muted);
}

.desk-arrange {
  display: block;
  margin: 8px auto 24px;
  min-height: 44px;
}

#mReport {
  margin-bottom: 20px;
}

/* ==========================================================================
   Phase 7, step 3: แฟ้ม (js/office-files.js).
   ========================================================================== */

/* Search and the ตัวกรอง button share a row; the filters fold into a drawer. */
.ledger-filter-bar {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.ledger-search-field {
  flex: 1 1 160px;
}

.ledger-filter-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  flex: 0 0 auto;
}

.ledger-filter-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--g-pen-red);
}

.ledger-filter-bar .ledger-search-hint,
.ledger-filter-bar .ledger-filter-selects,
.ledger-filter-bar .ledger-future-toggle {
  flex: 1 0 100%;
}

.ledger-filter-bar:not(.is-open) .ledger-filter-selects,
.ledger-filter-bar:not(.is-open) .ledger-future-toggle {
  display: none;
}

/* The card holder: a row of small ID cards that scrolls sideways. */
.card-holder {
  margin: 16px 0 8px;
}

.card-holder__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-holder__head h3 {
  margin: 0;
  font-family: var(--g-font-display);
  font-size: 17px;
}

.card-holder__head b {
  font-family: var(--g-font-display);
  font-variant-numeric: tabular-nums;
}

.card-holder__row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
}

.card-holder__card {
  position: relative;
  flex: 0 0 156px;
  scroll-snap-align: start;
}

.card-holder__pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 112px;
  padding: 0 12px 10px;
  overflow: hidden;
  text-align: left;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  box-shadow: 0 2px 0 var(--g-ink);
  color: var(--g-ink);
  cursor: pointer;
}

.card-holder__card.is-picked .card-holder__pick {
  background: var(--g-note-yellow);
  box-shadow: 0 3px 0 var(--g-ink);
}

.card-holder__band {
  align-self: stretch;
  margin: 0 -12px 6px;
  padding: 3px 12px;
  background: var(--wallet-color);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.card-holder__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--g-font-display);
  font-weight: 600;
}

.card-holder__type {
  font-size: 12px;
  color: var(--g-ink-muted);
}

.card-holder__bal {
  margin-top: auto;
  font-family: var(--g-font-display);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.card-holder__tools {
  position: absolute;
  top: 24px;
  right: 6px;
  display: flex;
  gap: 4px;
}

.card-holder__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: 50%;
  color: var(--g-ink);
  cursor: pointer;
}

.card-holder__add {
  flex: 0 0 64px;
  min-height: 112px;
  background: transparent;
  border: 1.5px dashed var(--g-ink);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
  cursor: pointer;
}

/* The ยืม-ให้ยืม folder replaces the entry list while it is open. */
#tab-ledger.files-people-open .ledger-table-container,
#tab-ledger.files-people-open #ledgerResultSummary {
  display: none !important;
}

.ledger-folder-tab--people {
  background: color-mix(in srgb, var(--g-note-pink) 60%, var(--g-paper));
}

.files-people .people-section {
  margin-top: 0;
}

/* The picked card's edit and delete sit top right; the name stops short of them. */
.card-holder__card.is-picked .card-holder__name {
  max-width: calc(100% - 72px);
}

/* ==========================================================================
   Phase 7, step 4: รายงาน (js/office-report.js).
   ========================================================================== */

/* On a phone รายงาน is its own tab in the bar, so the old view switch goes. */
@media (max-width: 1080px) {
  #overviewSubtabs {
    display: none;
  }
}

/* The privacy line now sits in the บันทึกจากเลขา head. */
#pane-insights > .metric-desc {
  display: none;
}

.report-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 14px;
}

.report-month b {
  font-family: var(--g-font-display);
  font-size: 18px;
}

.report-month__step {
  min-width: 44px;
  min-height: 44px;
  font-size: 24px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  box-shadow: 0 2px 0 var(--g-ink);
  color: var(--g-ink);
  cursor: pointer;
}

/* Each room as a report page. */
.report-room {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
  scroll-margin-top: 96px;
}

.report-room__h {
  margin: 0 0 10px;
  font-family: var(--g-font-display);
  font-size: 17px;
}

.report-room .mo-room {
  padding: 0;
  overflow: visible;
}

.report-tiles {
  margin: 0 0 16px;
}

.report-memo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}

.report-memo .g-cast {
  width: 48px;
  height: 48px;
}

.report-memo div {
  display: flex;
  flex-direction: column;
}

.report-memo b {
  font-family: var(--g-font-display);
  font-size: 18px;
}

.report-memo small {
  color: var(--g-ink-muted);
}

/* ==========================================================================
   Phase 7, step 5: แผนงาน (js/office-plan.js).
   ========================================================================== */

.plan-jump,
.plan-sec-head {
  display: none;
}

@media (max-width: 1080px) {
  /* One scrolled screen: the sub-tab switch and its add buttons give way to the
     jump row and a heading with its own add button on each section. */
  #tab-planning .subtab-bar {
    display: none;
  }

  #tab-planning .tab-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
    scroll-margin-top: 96px;
  }

  .plan-jump {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
  }

  .plan-jump button {
    flex: 1;
    min-height: 44px;
    font-family: var(--g-font-display);
    font-size: 15px;
    background: var(--g-note-yellow);
    border: 1.5px solid var(--g-ink);
    border-radius: var(--g-radius-sm);
    box-shadow: 0 2px 0 var(--g-ink);
    color: var(--g-ink);
    cursor: pointer;
  }

  .plan-jump button:nth-child(2) {
    background: var(--g-note-pink);
  }

  .plan-jump button:nth-child(3) {
    background: var(--g-note-green);
  }

  .plan-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .plan-sec-head h3 {
    margin: 0;
    font-family: var(--g-font-display);
    font-size: 19px;
  }

  .plan-sec-head .btn-secondary {
    min-height: 40px;
  }
}

/* The bills month calendar. */
.plan-billcal {
  padding: 14px 16px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

.plan-cal__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.plan-cal__top b {
  font-family: var(--g-font-display);
}

.plan-cal__key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--g-ink-muted);
}

.plan-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.plan-cal__head {
  font-size: 11px;
  color: var(--g-ink-muted);
}

.plan-cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 36px;
  padding-top: 4px;
  font-family: var(--g-font-display);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
}

.plan-cal__day.is-other {
  color: var(--g-ink-muted);
  opacity: 0.45;
}

.plan-cal__day.is-today {
  outline: 1.5px solid var(--g-pen-red);
}

.plan-cal__dots {
  display: flex;
  gap: 2px;
  height: 7px;
}

.plan-cal i,
.plan-cal__key i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.plan-cal i.is-out,
.plan-cal__key i.is-out {
  background: var(--g-pen-red);
}

.plan-cal i.is-in,
.plan-cal__key i.is-in {
  background: var(--green-matcha);
}

.plan-suggest {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--g-note-yellow);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  font-family: var(--g-font-hand);
}

.plan-suggest span {
  flex: 1;
}

.plan-suggest .g-cast {
  width: 40px;
  height: 40px;
}

/* ==========================================================================
   Phase 7, step 6: บัตรพนักงาน (js/office-badge.js).
   ========================================================================== */

.staff-card {
  margin: 0 0 18px;
}

.staff-card:empty {
  display: none;
}

/* With one group open on a phone, the card gives way like the list does. */
@media (max-width: 1080px) {
  #tab-settings.settings-drilled .staff-card {
    display: none;
  }
}

.staff-card__card {
  position: relative;
  overflow: hidden;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius);
  box-shadow: 0 3px 0 var(--g-ink);
}

.staff-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: var(--green-matcha);
  color: #fff;
  font-family: var(--g-font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
}

.staff-card__plus {
  padding: 1px 10px;
  border-radius: 999px;
  background: #f2c94c;
  color: var(--g-ink);
  font-weight: 600;
}

.staff-card__body {
  display: flex;
  gap: 14px;
  padding: 14px;
}

.staff-card__photo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 76px;
  background: var(--g-note-blue);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
  font-family: var(--g-font-display);
  font-size: 30px;
  font-weight: 600;
}

.staff-card__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.staff-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--g-font-display);
  font-size: 17px;
}

.staff-card__sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--g-ink-muted);
}

.staff-card__sync i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.staff-card__scans {
  font-size: 13px;
}

.staff-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.staff-card__actions button {
  min-height: 40px;
}

/* A barcode along the foot of the card: decoration only. */
.staff-card__barcode {
  height: 18px;
  margin: 0 14px 10px;
  background: repeating-linear-gradient(90deg, var(--g-ink) 0 2px, transparent 2px 4px, var(--g-ink) 4px 5px, transparent 5px 8px);
  opacity: 0.55;
}

/* ==========================================================================
   Phase 7, step 7: one layout at every width.
   ========================================================================== */

/* No sub-tab switches anywhere: the bar or the sidebar names each place. */
#overviewSubtabs,
#tab-planning .subtab-bar {
  display: none;
}

#tab-planning .tab-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
  scroll-margin-top: 96px;
}

@media (min-width: 1081px) {
  .plan-jump {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
  }

  .plan-jump button {
    flex: 1;
    min-height: 44px;
    font-family: var(--g-font-display);
    font-size: 15px;
    background: var(--g-note-yellow);
    border: 1.5px solid var(--g-ink);
    border-radius: var(--g-radius-sm);
    box-shadow: 0 2px 0 var(--g-ink);
    color: var(--g-ink);
    cursor: pointer;
  }

  .plan-jump button:nth-child(2) {
    background: var(--g-note-pink);
  }

  .plan-jump button:nth-child(3) {
    background: var(--g-note-green);
  }

  .plan-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .plan-sec-head h3 {
    margin: 0;
    font-family: var(--g-font-display);
    font-size: 19px;
  }

  /* The desk calendar and the staff badge replace the date row and the sync pill here too. */
  .header-controls,
  #zensync-header-status {
    display: none !important;
  }

  .desk-cal {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    margin-left: auto;
    min-width: 50px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    background: var(--g-card);
    border: 1.5px solid var(--g-ink);
    border-radius: var(--g-radius-sm);
    box-shadow: 0 2px 0 var(--g-ink);
    color: var(--g-ink);
    font-family: var(--g-font-display);
    text-align: center;
    cursor: pointer;
  }

  .desk-cal__month {
    padding: 1px 6px;
    background: var(--g-pen-red);
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
  }

  .desk-cal__day {
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
    padding-top: 2px;
  }

  .desk-cal__weekday {
    font-size: 9px;
    line-height: 11px;
    padding-bottom: 2px;
    color: var(--g-ink-muted);
  }

  .desk-cal.is-away {
    background: var(--g-note-pink);
  }

  .header-settings-btn.staff-badge {
    display: inline-flex;
    margin-left: 8px;
    border-radius: 50%;
  }

  .header-title-section {
    display: flex;
    align-items: center;
  }

}

/* ==========================================================================
   Phase 8, step 1.
   ========================================================================== */

/* The folder's tabs sit on the folder: cancel the pane's gap under them. */
.ledger-folder-tabs {
  margin-bottom: -30px;
}

@media (max-width: 1080px) {
  .ledger-folder-tabs {
    margin-bottom: -16px;
  }
}

.plan-jump button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.plan-jump button .ic {
  width: 18px;
  height: 18px;
}

/* The start-up switch in the desk calendar. */
.desk-cal-sheet__auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.desk-cal-sheet__auto i {
  flex: none;
  position: relative;
  width: 40px;
  height: 22px;
  border: 1.5px solid var(--g-ink);
  border-radius: 999px;
  background: var(--g-paper);
}

.desk-cal-sheet__auto i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--g-ink);
  transition: transform 0.15s ease;
}

.desk-cal-sheet__auto[aria-checked="true"] i {
  background: var(--green-matcha);
}

.desk-cal-sheet__auto[aria-checked="true"] i::after {
  transform: translateX(18px);
  background: #fff;
}

/* ==========================================================================
   Phase 8, step 2: the year view and the chosen range.
   ========================================================================== */

/* The month title is a button: tap it for the year's months. */
.desk-cal-sheet__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  background: none;
  border: 0;
  border-radius: var(--g-radius-sm);
  color: var(--g-ink);
  cursor: pointer;
}

.desk-cal-sheet__title:hover,
.desk-cal-sheet__title[aria-expanded="true"] {
  background: var(--g-note-yellow);
}

.desk-cal-sheet__title span {
  font-size: 12px;
}

.desk-grid--months {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.desk-grid--months .desk-grid__day {
  min-height: 52px;
  font-family: var(--g-font-display);
  font-size: 15px;
}

.ledger-folder-tab--range {
  color: var(--g-pen-blue);
}

.ledger-range {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ledger-range__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}

/* ==========================================================================
   Phase 8, step 3: every wallet at full size.
   ========================================================================== */

.card-holder__all {
  margin-left: 10px;
  min-height: 32px;
  padding: 0 10px;
  background: var(--g-card);
  border: 1.5px solid var(--g-ink);
  border-radius: 999px;
  color: var(--g-ink);
  font: 600 13px/1 var(--g-font-display);
  cursor: pointer;
}

/* Under every other dialog: edit, delete and add open from inside these sheets. */
#modalOv {
  z-index: 99;
}

.wallets-sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wallets-sheet__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wallets-sheet__total b {
  font-family: var(--g-font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.wallets-sheet__types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wallets-sheet__type {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--g-note-yellow);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  font-size: 12px;
}

.wallets-sheet__type b {
  font-family: var(--g-font-display);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.wallets-sheet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.wallets-sheet__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallets-sheet__entries {
  min-height: 40px;
}

/* ==========================================================================
   Phase 8, step 4: the category picker shows a few, then all with a search.
   ========================================================================== */

.m-cat-search {
  margin-bottom: 8px;
}

.m-chip.m-more-chip {
  border-style: dashed;
  font-weight: 600;
}

.m-chips__none {
  align-self: center;
  color: var(--g-ink-muted);
  font-size: 13px;
}

/* Phase 8, step 4b: duplicates, hidden starters. */
.cat-dupes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.cat-dupes[hidden] {
  display: none;
}

.cat-dupe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--g-note-yellow);
  border: 1.5px solid var(--g-ink);
  border-radius: var(--g-radius-sm);
  font-size: 14px;
}

.cat-dupe .btn-secondary {
  flex: none;
}

.budget-card.is-hidden-cat {
  opacity: 0.55;
}

.budget-card-hidden {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px dashed var(--g-ink-muted);
  border-radius: 999px;
  color: var(--g-ink-muted);
  font-size: 11px;
}

/* ==========================================================================
   Phase 8, step 5: จำเป็น / ไม่จำเป็น.
   ========================================================================== */

.m-need {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.m-need[hidden] {
  display: none;
}

.m-need__lab {
  color: var(--g-ink-muted);
  font-size: 13px;
  margin-right: 4px;
}

.m-need__opt--need[aria-pressed="true"] {
  background: var(--g-note-green);
  border-color: var(--g-ink);
}

.m-need__opt--want[aria-pressed="true"] {
  background: var(--g-note-pink);
  border-color: var(--g-ink);
}

.need-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--g-ink);
  border-radius: 999px;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}

.need-chip--need {
  background: var(--g-note-green);
}

.need-chip--want {
  background: var(--g-note-pink);
}

.report-need__bar {
  display: flex;
  height: 14px;
  overflow: hidden;
  border: 1.5px solid var(--g-ink);
  border-radius: 999px;
  background: var(--g-paper);
}

.report-need__bar i.is-need,
.report-need__rows i.is-need {
  background: var(--g-note-green);
}

.report-need__bar i.is-want,
.report-need__rows i.is-want {
  background: var(--g-note-pink);
}

.report-need__rows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 14px;
}

.report-need__rows i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 1px solid var(--g-ink);
  border-radius: 50%;
}

/* Phase 8, step 6: report a problem. */
.bug-report {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--g-ink-muted);
}

.bug-report h4 {
  margin: 0;
  font-family: var(--g-font-display);
  font-size: 16px;
}

.bug-report p {
  margin: 0;
  color: var(--g-ink-muted);
  font-size: 13px;
}

.bug-report label {
  font-weight: 600;
  font-size: 14px;
}

.bug-report textarea {
  resize: vertical;
  min-height: 96px;
}

.bug-report .btn-primary {
  align-self: flex-start;
}

/* ==========================================================================
   Cards phase, step 2: the staff card binder and one card (js/cards-ui.js).
   Frames by rank follow the design canvas (Cards · System).
   ========================================================================== */

.rank-common { --rank-frame: #dce6f2; }
.rank-uncommon { --rank-frame: #7cc4f2; }
.rank-rare { --rank-frame: #9fd9a8; }
.rank-super { --rank-frame: linear-gradient(110deg, #f9e08b, #d9a93a 30%, #fff4c4 48%, #c99231 66%, #f9e08b); }
.rank-ultra { --rank-frame: linear-gradient(110deg, #ff8fb1, #ffe45c 20%, #8be36a 40%, #7cc4f2 60%, #c9a6ff 80%, #ff8fb1); }

.card-slot.rank-super,
.card-slot.rank-ultra,
.card-front.rank-super,
.card-front.rank-ultra {
  background-size: 200% 100%;
  animation: card-foil 3s linear infinite;
}

.card-slot.rank-ultra,
.card-front.rank-ultra { animation-duration: 2.4s; }

@keyframes card-foil {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

.cards-tile-box { margin-top: 10px; }

.cards-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 12px 6px 6px;
  border: 1.5px solid var(--g-line);
  border-radius: 12px;
  background: var(--g-card);
  color: var(--g-ink);
  text-align: left;
  cursor: pointer;
}

.cards-tile img { width: 28px; height: 42px; border-radius: 5px; object-fit: cover; }
.cards-tile__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cards-tile__txt b { font-family: var(--g-font-display); font-size: 14px; }
.cards-tile__txt small { color: var(--g-ink-muted); font-size: 12px; }
.cards-tile__go { font-size: 22px; color: var(--g-ink-muted); }

.cards-binder { display: flex; flex-direction: column; gap: 14px; }
.cards-binder__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; color: var(--g-ink-muted); }
.cards-binder__pts { padding: 3px 10px; border: 1.5px solid var(--g-line); border-radius: 10px; background: var(--g-note-yellow); color: var(--g-ink); font-family: var(--g-font-display); font-weight: 600; font-size: 13px; }
.cards-binder__who { flex-wrap: nowrap; overflow-x: auto; }
.cards-binder__sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.cards-set__head { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.cards-set__head b { font-family: var(--g-font-display); font-weight: 600; }
.cards-set__head span { color: var(--g-ink-muted); text-align: right; }
.cards-set__bar { height: 8px; margin-top: 4px; border-radius: 4px; background: #e3ded2; overflow: hidden; }
.cards-set__bar i { display: block; height: 100%; border-radius: 4px; background: var(--g-pen-green); }
.cards-binder__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

@media (min-width: 700px) {
  .cards-binder__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card-slot {
  position: relative;
  padding: 4px;
  border: 1.5px solid var(--g-line);
  border-radius: 10px;
  background: var(--rank-frame);
  color: var(--g-ink);
  text-align: left;
  cursor: pointer;
}

.card-slot.is-locked { background: #c9c4b8; animation: none; }
.card-slot__in { display: flex; flex-direction: column; border-radius: 7px; background: var(--g-card); overflow: hidden; }
.card-slot__in img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; }
.card-slot__nm { padding: 3px 6px 0; font-family: var(--g-font-display); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-slot__rk { padding: 0 6px 5px; color: var(--g-ink-muted); font-size: 10px; font-weight: 600; }
.card-slot__n { position: absolute; top: 8px; right: 8px; padding: 0 6px; border-radius: 999px; background: var(--g-ink); color: var(--g-card); font-size: 11px; font-weight: 700; }

.cards-how summary { cursor: pointer; font-family: var(--g-font-display); font-weight: 600; }
.cards-how ul { margin: 8px 0; padding-left: 18px; font-size: 13px; }
.cards-how__h { margin: 8px 0 0; font-weight: 600; font-size: 13px; }
.cards-how .cards-how__odds { list-style: none; padding: 0; }
.cards-how__odds li { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid #e3ded2; font-variant-numeric: tabular-nums; }

.card-detail { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.card-detail__hint { margin: 0; }

.card-flip {
  width: min(270px, 78vw);
  aspect-ratio: 27 / 40;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 1200px;
  cursor: pointer;
}

.card-flip__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s ease; }
.card-flip.is-flipped .card-flip__inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 7px;
  border: 2px solid var(--g-line);
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 24px rgba(29, 36, 51, 0.2);
  text-align: left;
}

.card-front { background: var(--rank-frame); }
.card-face__in { display: flex; flex-direction: column; height: 100%; border-radius: 13px; background: var(--g-card); overflow: hidden; }
.card-face__top { display: flex; justify-content: space-between; padding: 8px 12px 0; font-family: var(--g-font-display); font-size: 11px; font-weight: 700; }
.card-face__art { position: relative; flex: 1; min-height: 0; margin: 8px 10px 0; border-radius: 10px; overflow: hidden; }
.card-face__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.card-face__art .card-face__shine { position: absolute; inset: 0; mix-blend-mode: screen; animation: card-shine 3.2s ease-in-out infinite alternate; }

@keyframes card-shine {
  from { opacity: 0.35; }
  to { opacity: 0.9; }
}

.card-face__foot { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 12px; }
.card-face__foot b { font-family: var(--g-font-display); font-weight: 800; font-size: 20px; line-height: 1.15; }
.card-face__foot small { color: var(--g-ink-muted); font-size: 12px; }
.card-face__foot span { font-family: var(--g-font-display); font-weight: 600; font-size: 12px; }

.card-back { transform: rotateY(180deg); background: var(--g-ink); }
.card-back__in {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 13px;
  background: #fffdf6 repeating-linear-gradient(180deg, transparent 0 27px, #cfe0f5 27px 28px);
  color: var(--g-ink);
}

.card-back__in b { font-family: var(--g-font-display); font-size: 14px; }
.card-back__in p { margin: 0; font-family: var(--g-font-hand); font-size: 18px; line-height: 1.5; color: var(--g-pen-blue); }
.card-back__stamp { align-self: flex-end; margin-top: auto; padding: 0 8px; border: 2.5px solid var(--g-pen-green); border-radius: 8px; color: var(--g-pen-green); font-family: var(--g-font-display); font-weight: 800; font-size: 15px; transform: rotate(8deg); }

.card-detail.is-locked .card-face { position: relative; width: min(230px, 66vw); aspect-ratio: 27 / 40; }
.card-detail.is-locked .card-front { background: #c9c4b8; animation: none; }
.card-detail__how { margin: 0; text-align: center; }

.card-detail__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
  padding: 10px 14px;
  border: 1.5px solid var(--g-line);
  border-radius: 12px;
  background: var(--g-card);
  text-align: center;
  font-size: 12px;
}

.card-detail__facts span { display: flex; flex-direction: column; gap: 2px; color: var(--g-ink-muted); }
.card-detail__facts b { color: var(--g-ink); font-family: var(--g-font-display); font-size: 14px; }

.card-slot:focus-visible,
.card-flip:focus-visible,
.cards-tile:focus-visible { outline: 3px solid var(--g-pen-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .card-slot.rank-super,
  .card-slot.rank-ultra,
  .card-front.rank-super,
  .card-front.rank-ultra,
  .card-face__art .card-face__shine { animation: none; }
  .card-flip__inner { transition: none; }
}

/* ==========================================================================
   Cards phase, step 3: the bonus envelope (js/cards-earn.js), after the
   design canvas (Cards · Bonus envelope). It shakes, the flap opens, the
   card rises with a gold burst, then the words and buttons arrive.
   ========================================================================== */

.card-reveal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  overflow-y: auto;
  padding: 16px;
  background-color: var(--g-paper);
  background-image: linear-gradient(#e3ded2 1px, transparent 1px), linear-gradient(90deg, #e3ded2 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--g-ink);
}

.card-reveal[hidden] { display: none; }

.card-reveal__box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(420px, 100%); margin: auto; text-align: center; }
.card-reveal__from { padding: 4px 12px; border: 1.5px solid var(--g-line); border-radius: 999px; background: var(--g-card); font-weight: 600; font-size: 13px; }
.card-reveal__stage { position: relative; width: 100%; height: 350px; margin-top: 8px; }

.card-reveal__burst {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 340px;
  height: 340px;
  margin-left: -170px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--g-note-yellow) 0 10deg, transparent 10deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
  opacity: 0;
  animation: reveal-burst 1.2s ease-out 1.1s forwards, reveal-spin 24s linear 1.1s infinite;
}

.card-reveal__env { position: absolute; left: 50%; bottom: 0; width: 260px; height: 150px; margin-left: -130px; perspective: 700px; animation: reveal-shake 0.7s ease-in-out; }
.card-reveal__back { position: absolute; inset: 0; border: 2px solid var(--g-line); border-radius: 8px; background: #c9a46a; }
.card-reveal__flap { position: absolute; left: 0; right: 0; top: 0; height: 84px; border: 2px solid var(--g-line); background: #be9658; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; animation: reveal-flap 0.4s ease-in 0.7s forwards; }

.card-reveal__front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100px;
  padding-bottom: 12px;
  box-sizing: border-box;
  border: 2px solid var(--g-line);
  border-radius: 0 0 8px 8px;
  background: #d8b67c;
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
}

.card-reveal__front em { padding: 0 10px; border: 2.5px solid #c2261f; border-radius: 6px; color: #c2261f; font-style: normal; font-family: var(--g-font-display); font-weight: 800; font-size: 16px; transform: rotate(-6deg); }

.card-reveal__cards {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  transform: translate(-50%, 110px) scale(0.7);
  opacity: 0;
  animation: reveal-rise 0.6s cubic-bezier(0.2, 1.1, 0.4, 1) 1s forwards;
}

.reveal-card { position: relative; display: block; width: 150px; padding: 5px; border: 2px solid var(--g-line); border-radius: 12px; background: var(--rank-frame); }
.card-reveal__stage[data-count="2"] .reveal-card { width: 120px; }
.card-reveal__stage[data-count="3"] .reveal-card { width: 96px; }
.card-reveal__stage[data-count="4"] .card-reveal__cards,
.card-reveal__stage[data-count="5"] .card-reveal__cards,
.card-reveal__stage[data-count="6"] .card-reveal__cards,
.card-reveal__stage[data-count="7"] .card-reveal__cards { flex-wrap: wrap; width: 320px; }
.card-reveal__stage[data-count="4"] .reveal-card,
.card-reveal__stage[data-count="5"] .reveal-card,
.card-reveal__stage[data-count="6"] .reveal-card,
.card-reveal__stage[data-count="7"] .reveal-card { width: 70px; }

.card-reveal .reveal-card.rank-super,
.card-reveal .reveal-card.rank-ultra { background-size: 200% 100%; animation: card-foil 3s linear infinite; }
.reveal-card__in { display: flex; flex-direction: column; border-radius: 8px; background: var(--g-card); overflow: hidden; text-align: left; }
.reveal-card__in img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; }
.reveal-card__in b { padding: 4px 6px 0; font-family: var(--g-font-display); font-size: 12px; line-height: 1.2; }
.reveal-card__in small { padding: 0 6px 5px; color: var(--g-ink-muted); font-size: 10px; font-weight: 600; }
.reveal-card__tag { position: absolute; top: -8px; right: -8px; padding: 0 7px; border: 1.5px solid var(--g-line); border-radius: 999px; background: var(--g-note-yellow); font-style: normal; font-weight: 700; font-size: 11px; }

.card-reveal h2,
.card-reveal__line,
.card-reveal__actions { opacity: 0; animation: reveal-say 0.4s ease-out 1.5s forwards; }
.card-reveal h2 { margin: 6px 0 0; font-family: var(--g-font-display); font-weight: 800; font-size: 26px; text-wrap: balance; }
.card-reveal__line { min-height: 1.4em; margin: 0; font-family: var(--g-font-hand); font-size: 17px; color: var(--g-pen-blue); text-wrap: pretty; }
.card-reveal__actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.card-reveal__actions button { min-height: 52px; }

@keyframes reveal-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}

@keyframes reveal-flap { to { transform: rotateX(180deg); } }
@keyframes reveal-rise { to { transform: translate(-50%, -128px) scale(1); opacity: 1; } }
@keyframes reveal-burst { to { opacity: 1; } }
@keyframes reveal-spin { to { rotate: 360deg; } }
@keyframes reveal-say { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .card-reveal__env,
  .card-reveal__burst { animation: none; }
  .card-reveal__burst { opacity: 1; }
  .card-reveal__flap { animation: none; transform: rotateX(180deg); }
  .card-reveal__cards { animation: none; transform: translate(-50%, -128px); opacity: 1; }
  .card-reveal h2,
  .card-reveal__line,
  .card-reveal__actions { animation: none; opacity: 1; }
  .card-reveal .reveal-card.rank-super,
  .card-reveal .reveal-card.rank-ultra { animation: none; }
}

/* Cards phase, step 4: the night-shift app icon in Settings › Appearance. */
.app-icon-setting { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.app-icon-setting[hidden] { display: none; }
.app-icon-setting__copy { display: flex; flex-direction: column; gap: 2px; }
.app-icon-setting__label { font-weight: 600; }
.app-icon-setting__copy small { color: var(--g-ink-muted); font-size: 13px; text-wrap: pretty; }
.app-icon-setting__lock { width: 56px; height: 56px; border-radius: 14px; filter: grayscale(1); opacity: 0.5; }
.app-icon-options { display: flex; gap: 12px; }

.app-icon-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-card);
  color: var(--g-ink);
  font-size: 13px;
  cursor: pointer;
}

.app-icon-option img { width: 56px; height: 56px; border-radius: 14px; }
.app-icon-option[aria-checked="true"] { box-shadow: 0 0 0 3px var(--g-pen-green); }
.app-icon-option:focus-visible { outline: 3px solid var(--g-pen-blue); outline-offset: 2px; }

/* ---- สถิติ (js/stats.js): one sticky bar, then a figure-first card per section ---- */
:root {
  --stats-variable: #e3c48a;
  --stats-soft: rgba(30, 142, 70, 0.22);
}
.stats { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.stats-head { display: flex; justify-content: flex-end; align-items: center; gap: 8px; color: var(--m-muted); font-size: 12px; }
.stats-rail { position: sticky; top: var(--stats-rail-top, 0px); z-index: 5; display: flex; align-items: center; gap: 6px; min-height: 48px; background: var(--m-app-bg); border-bottom: 1px solid var(--m-line); }
.stats-period { flex: 0 0 auto; display: flex; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 999px; padding: 2px; }
.stats-period button { border: 0; background: none; font: 500 11px var(--g-font-display, inherit); padding: 4px 7px; border-radius: 999px; color: var(--m-muted); cursor: pointer; }
.stats-period button[aria-pressed="true"] { background: var(--m-fg); color: var(--m-surface); }
.stats-chips { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px; }
.stats-chips::-webkit-scrollbar { display: none; }
.stats-chip { flex: 0 0 auto; border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-fg); border-radius: 999px; padding: 5px 10px; font: 600 12px var(--g-font-display, inherit); white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
.stats-chip span { color: var(--m-muted); font-weight: 400; margin-right: 4px; }
.stats-chip.is-on { background: var(--m-fg); border-color: var(--m-fg); color: var(--m-surface); }
.stats-chip.is-on span { color: inherit; opacity: 0.75; }
.stats-chip:focus-visible, .stats-period button:focus-visible, .stats-pick:focus-visible { outline: 2px solid var(--m-move); outline-offset: 2px; }
.stats-sec { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 14px; padding: 12px 14px; scroll-margin-top: calc(var(--stats-rail-top, 0px) + 58px); }
.stats-sec h3 { margin: 0; font: 500 13px var(--g-font-display, inherit); color: var(--m-muted); }
.stats-big { font: 600 26px/1.15 var(--g-font-display, inherit); font-variant-numeric: tabular-nums; margin: 2px 0 8px; color: var(--m-fg); }
.stats-big small { font: 400 12px var(--g-font-body, inherit); color: var(--m-muted); margin-left: 6px; }
.stats-note { display: block; font-size: 12px; color: var(--m-muted); margin: 8px 0 0; text-wrap: pretty; }
.stats-note b { color: var(--m-fg); }
.stats-svg { display: block; width: 100%; height: auto; }
.stats-lbl { font-size: 9px; fill: var(--m-muted); }
.stats-avg { stroke: var(--m-brand); stroke-dasharray: 3 3; stroke-width: 1; }
.stats-range { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.stats-range > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-track { position: relative; height: 8px; background: var(--m-app-bg); border-radius: 4px; }
.stats-band { position: absolute; top: 0; bottom: 0; background: var(--stats-soft); border-radius: 4px; }
.stats-dot { position: absolute; top: -3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--m-brand); border: 2px solid var(--m-surface); }
.stats-dot.is-out { background: var(--m-out); }
.stats-range__v { text-align: right; font-variant-numeric: tabular-nums; }
.stats-range__v.is-out { color: var(--m-out); font-weight: 600; }
.stats-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--m-app-bg); }
.stats-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--m-muted); margin-top: 6px; }
.stats-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.stats-rows { margin-top: 8px; border-top: 1px dashed var(--m-line); padding-top: 6px; font-size: 12px; }
.stats-rows > div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.stats-rows b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-gauge { position: relative; height: 10px; border-radius: 5px; background: var(--m-app-bg); }
.stats-gauge i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--m-brand); }
.stats-gauge b { position: absolute; top: -3px; width: 1px; height: 16px; background: var(--m-fg); }
.stats-gauge__k { position: relative; height: 14px; font-size: 10px; color: var(--m-muted); }
.stats-gauge__k span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.stats-gauge__k span:last-child { transform: translateX(-100%); }
.stats-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.stats-week span { text-align: center; font-size: 10px; color: var(--m-muted); }
.stats-week i { display: block; height: 22px; border-radius: 4px; margin-bottom: 2px; background: var(--m-brand); }
.stats-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.stats-pick { border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-fg); border-radius: 999px; padding: 4px 10px; font: 500 12px var(--g-font-display, inherit); cursor: pointer; }
.stats-pick[aria-pressed="true"] { border-color: var(--m-brand); background: var(--m-brand-soft); color: var(--m-brand); }
.stats-slider { width: 100%; accent-color: var(--m-brand); }
.stats-thin { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--m-muted); margin-top: 6px; }
.stats-thin__meter { flex: 0 0 64px; height: 6px; border-radius: 3px; background: var(--m-app-bg); overflow: hidden; }
.stats-thin__meter i { display: block; height: 100%; background: var(--m-muted); }

/* เลขาสังเกต row in ภาพรวม: one line, the sheet holds the rest */
.mo-notes-row { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; margin-top: 10px; padding: 0 8px 0 10px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-surface); color: var(--m-fg); cursor: pointer; text-align: left; }
.mo-notes-row > b { font: 500 12px var(--g-font-display, inherit); white-space: nowrap; }
.mo-notes-pills { flex: 1; min-width: 0; display: flex; gap: 6px; overflow: hidden; }
.mo-pill { flex: 0 0 auto; border-radius: 999px; padding: 2px 8px; font: 500 11px var(--g-font-display, inherit); white-space: nowrap; background: var(--m-app-bg); color: var(--m-fg); }
.mo-pill.is-pass { background: #ffc531; color: #1d2433; }
.mo-pill.is-improve { background: var(--danger-soft); color: var(--m-out); }
.notes-body { max-height: min(78vh, 760px); overflow-y: auto; }

/* วางแผน: what is coming up, three rows */
.plan-upcoming:empty { display: none; }
.plan-upcoming { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; }
.plan-up-h { margin: 0 0 2px; font: 500 13px var(--g-font-display, inherit); color: var(--m-muted); }
.plan-up-list { list-style: none; margin: 0; padding: 0; }
.plan-up-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; border-top: 1px solid var(--m-line); font-size: 13px; }
.plan-upcoming > .plan-up-list > .plan-up-row:first-child { border-top: 0; }
.plan-up-day { font: 600 12px var(--g-font-display, inherit); color: var(--m-bill); }
.plan-up-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-up-row b { font-variant-numeric: tabular-nums; }
.plan-up-row b.is-in { color: var(--m-in); }
.plan-up-more summary { cursor: pointer; font: 500 12px var(--g-font-display, inherit); color: var(--m-move); padding: 6px 0 2px; }

/* On a phone the page scrolls, not <main>; main's overflow:auto would make it the
   sticky container and the สถิติ rail would scroll away with the page. */
@media (max-width: 1080px) {
  main:has(#pane-insights.active) { overflow: visible; min-width: 0; }
}

/* Arranging สถิติ (js/stats-arrange.js): one row per section, figure as a reminder */
.stats-arr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stats-arr-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 8px 6px 14px; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 12px; }
.stats-arr-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stats-arr-name b { font: 500 14px var(--g-font-display, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-arr-name small { font-size: 12px; color: var(--m-muted); font-variant-numeric: tabular-nums; }
.stats-arr-row .mo-tools { position: static; display: flex; gap: 4px; opacity: 1; }

/* Onboarding: two answers on one screen (js/presets.js) */
.onboarding-chooser { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.onboarding-chooser legend { font: 600 14px var(--g-font-display, inherit); color: var(--m-fg); margin-bottom: 6px; padding: 0; }
.onboarding-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.onboarding-chip { min-height: 40px; padding: 6px 14px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-surface); color: var(--m-fg); font: 500 13px var(--g-font-display, inherit); cursor: pointer; }
.onboarding-chip[aria-pressed="true"] { border-color: var(--m-brand); background: var(--m-brand-soft); color: var(--m-brand); font-weight: 600; }
.onboarding-chip:focus-visible { outline: 2px solid var(--m-move); outline-offset: 2px; }

/* รายการ: pinned quick filters and day headers (js/ledger-view.js) */
.ledger-pins { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
.ledger-pins[hidden] { display: none; }
.ledger-pin { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-surface); color: var(--m-fg); font: 500 13px var(--g-font-display, inherit); cursor: pointer; }
.ledger-pin i { width: 8px; height: 8px; border-radius: 50%; }
.ledger-pin.is-active { border-color: var(--m-brand); background: var(--m-brand-soft); color: var(--m-brand); font-weight: 600; }
.ledger-pin:focus-visible, .ledger-view-btn:focus-visible { outline: 2px solid var(--m-move); outline-offset: 2px; }
.ledger-view-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 10px; }
/* Room for the pencil beside Filters on a 360px phone. */
.ledger-search-field { flex-basis: 120px; }
.ledger-day { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px 4px; font-size: 12px; color: var(--m-muted); }
.ledger-day-date { font-weight: 600; color: var(--m-fg); }
.ledger-day-sum { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* วางแผน arranged (js/plan-arrange.js): hidden sections and extras, colours by
   section rather than by position (the order is the person's), the pencil last. */
#tab-planning .plan-hidden,
.plan-jump button[hidden] { display: none !important; }
.plan-jump button[data-arg="categories"] { background: var(--g-note-yellow); }
.plan-jump button[data-arg="schedules"] { background: var(--g-note-pink); }
.plan-jump button[data-arg="goals"] { background: var(--g-note-green); }
.plan-jump .plan-arrange-btn { flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--g-card); }
.plan-jump .plan-arrange-btn:focus-visible { outline: 2px solid var(--m-move); outline-offset: 2px; }