/* paper.css — every page in the mockup look (loaded last, extension + website)
   Warm paper with a dot grid, Caveat headings, Kalam handwriting body,
   no card outlines (sheets instead), quiet underline inputs, coral accent.
   Colors per column stay as on My Board: mind coral · to do ink · goals green · dates blue · appts purple. */

:root {
  --bg: #fbf9f4;
  --surface: rgba(255, 253, 250, .92);
  --border: #ebe5da;          /* hairlines only; containers drop their outlines below */
  --text: #23201b;
  --muted: #6f6a60;
  --accent: #c2634a;
  --accent-strong: #a85338;
  --accent-soft: #f8e9e3;
  --accent-text: #8f3f26;
  --accent-mid: #a85338;
  --nav-active: #f8e9e3;
  --pos: #2c6342;
  --neg: #b4463a;
  --blue: #2f5d8a;
  --purple: #6b4a86;
  --radius: 6px;
  --shadow: none;
  --hand: 'Caveat', cursive;
  --body: 'Kalam', cursive;
}

html { background: #fbf9f4; }
body {
  background-color: #fbf9f4;
  background-image: radial-gradient(#e4ddd1 1px, transparent 1.2px);
  background-size: 24px 24px;
  background-attachment: scroll;   /* the dots scroll with the page */
  background-position: 0 0;
  font-family: var(--body);
  font-size: 16.5px;
  color: var(--text);
}
button, input, select, textarea { font-family: inherit; }
/* Numbers stay easy to read in money tables. */
input[type="number"], .money, [class*="amount"], [class*="total"], td { font-variant-numeric: tabular-nums; }

/* ---------- one continuous dot grid ----------
   Only the page (body) draws the dots. Pages that used to draw their own grid
   (My Board, Today, Routine) are see-through now, so the dots line up everywhere
   and move together as you scroll — including behind the see-through sidebar. */
.board, .td, .rt { background-color: transparent !important; background-image: none !important; }

/* ---------- sidebar (rail) ---------- */
.rail { background: rgba(251, 249, 244, .96); border-color: transparent !important; box-shadow: none; }
.rail__name, .rail__spark { font-family: var(--hand); color: #c2634a; }
.rail__name { font-size: 28px; font-weight: 700; letter-spacing: 0; }
.nav-item, .nav-subitem { font-size: 16px; color: #4a453d; border-radius: 6px; }
.nav-item:hover, .nav-subitem:hover { background: #efebe3; color: var(--text); }
.nav-item.is-active, .nav-sub.is-open .nav-subitem.is-active { background: #f8e9e3; color: #a85338; }
.nav-item__icon { color: inherit; }
@media (min-width: 760px) {
  /* Sidebar stays put; it's see-through, so the page's dots slide by behind it. */
  .rail { background: transparent !important; border-right: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto; scrollbar-width: thin; }
}

/* ---------- page headers ---------- */
.view__header { background: rgba(251, 249, 244, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 0 !important; box-shadow: none !important; }
.view__title { font-family: var(--hand); font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: 0; color: var(--text); }
.view__subtitle { font-family: var(--body); font-weight: 300; font-size: 15px; }
.subnav { border-bottom: 0 !important; gap: 2px; }
.subnav__item { font-size: 16px; border-radius: 6px; padding: 6px 12px; border-bottom: 0 !important; color: var(--muted); }
.subnav__item:hover { background: #efebe3; }
.subnav__item.is-active { background: #f8e9e3; color: #a85338; box-shadow: none !important; }
.subnav__item.is-active::after { display: none !important; }

/* Headings inside pages: handwriting */
.view h2, .view h3, .sub-panel h2, .sub-panel h3,
[class*="__title"]:not(.view__title):not(input), [class*="__heading"], .card__title, .section-title {
  font-family: var(--hand); font-weight: 700; letter-spacing: 0;
}
.view h2, .sub-panel h2 { font-size: 30px; line-height: 1.1; }
.view h3, .sub-panel h3 { font-size: 24px; line-height: 1.15; }

/* ---------- no card outlines: everything sits on sheets ---------- */
.view :is([class*="card"], [class*="panel"]:not(.sub-panel), .brief, .entry, .finding, .add-form, .totals, .todo, .todos__card,
  .schedule__item, .home-action, .home-goalrow, .chat-box, .side-mini, .score-ring, .variance__row, .concern, .goal, .bill, .debt, .journal-entry) {
  border-color: transparent !important;
  box-shadow: none !important;
}
.view :is([class*="card"]:not([class*="chatcard"]), .brief, .entry, .add-form, .totals, .chat-box) {
  background: rgba(255, 253, 250, .92);
  border-radius: 6px;
}
.sub-panel { background: transparent; }
hr { border: 0; border-top: 1.5px dashed #e2dbcf; }

/* ---------- inputs: a line to write on ---------- */
.view :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="email"], input[type="search"], input:not([type]), select):not(.board-in):not(.zf-chk):not([type="checkbox"]):not([type="radio"]) {
  border: 0 !important;
  border-bottom: 1.5px solid #e2dbcf !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
}
.view :is(input, select):focus { outline: none; border-bottom-color: #c2634a !important; }
.view textarea:not(.chat-box textarea) {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background-color: transparent !important;
  background-image: linear-gradient(transparent 27px, #efeae1 27px); background-size: 100% 28px;
  line-height: 28px;
}
.view textarea:focus { outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: #c2634a; }

/* ---------- buttons ---------- */
.btn { border: 0 !important; border-radius: 6px; background: #efebe3; color: var(--text); font-size: 16px; min-height: 38px; padding: 0 14px; box-shadow: none; }
.btn:hover { background: #e7e2d8; color: var(--text); }
.btn--primary { background: #c2634a; color: #fff; }
.btn--primary:hover { background: #a85338; color: #fff; }
.btn--ghost { background: transparent; color: #a85338; }
.btn--ghost:hover { background: #f8e9e3; color: #a85338; }
.btn:disabled { opacity: .5; cursor: default; }
.chip { border-color: transparent; background: #efebe3; border-radius: 6px; font-size: 15px; }
.chip:hover { background: #f8e9e3; border-color: transparent; }

/* ---------- tables (money, lists) ---------- */
.view table { border-collapse: collapse; }
.view th { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--muted); border-bottom: 1.5px solid #e2dbcf !important; background: transparent !important; }
.view td { border-color: #efeae1 !important; background: transparent !important; }

/* ---------- calendar ---------- */
.bcal-month { background: #ece6db; border: 0; border-radius: 6px; }
.bcal-cell { background: #fffdfa; }
.bcal-cell.is-out { background: #f7f4ee; }
.bcal-cell.is-today { background: #fdf3ef; }
.bcal-dow { font-family: var(--body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 14px; }
.bcal-date { font-weight: 400; font-size: 15px; }
.bcal-viewbtn.is-active { box-shadow: none; background: #f8e9e3; color: #a85338; }
.cal__day, .plan-cal__day { border-color: #efeae1 !important; }

/* ---------- assistant panel ---------- */
.ai-modal { font-family: var(--body); }
.ai-modal__greet { font-family: var(--hand) !important; font-size: 34px !important; }

/* ---------- toast & dialogs ---------- */
.toast { font-family: var(--body); border-radius: 6px; }

/* ---------- Zuly's morning flow (today.js) ---------- */
.zf-err { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: #f8e9e3; color: #8f3f26; font-size: 15.5px; }
.zf-busy { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.zf-dots { display: inline-flex; gap: 4px; }
.zf-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c2634a; animation: zfDot 1.1s infinite ease-in-out; }
.zf-dots i:nth-child(2) { animation-delay: .15s; } .zf-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes zfDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .zf-dots i { animation: none; opacity: .7; } }
.zf-list { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.zf-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; border-radius: 6px; }
.zf-row:hover { background: #f4f0e8; }
.zf-row.is-off { opacity: .45; }
.zf-chk { flex: none; width: 18px; height: 18px; margin-top: 8px; accent-color: #c2634a; }
.zf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zf-top { display: flex; gap: 8px; align-items: center; }
.zf-title { flex: 1; min-width: 0; font-size: 18px !important; padding: 4px 2px !important; }
.zf-type { flex: none; font-size: 15px !important; color: var(--c, #6f6a60) !important; padding: 4px 2px !important; }
.zf-meta { font-size: 14px; color: var(--muted); font-weight: 300; }
.zf-meta b { font-weight: 400; color: #2c6342; }
.zf-steps { margin: 2px 0 0; padding-left: 20px; font-size: 15px; color: #4a453d; }
.zf-t-worry { --c: #a85338; } .zf-t-todo, .zf-t-buy { --c: #23201b; } .zf-t-goal, .zf-t-project { --c: #2c6342; }
.zf-t-event { --c: #2f5d8a; } .zf-t-appt { --c: #6b4a86; } .zf-t-note { --c: #6f6a60; }
.zf-row[class*="zf-t-"] { box-shadow: inset 3px 0 0 var(--c); }
.zf-tabs { display: flex; gap: 2px; margin: 0 0 8px -4px; }
.zf-tab { min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 16px; color: var(--muted); cursor: pointer; }
.zf-tab:hover { background: #efebe3; }
.zf-tab.is-on { background: #e6eef7; color: #2f5d8a; }
.zf-day { font-family: var(--hand); font-size: 22px; font-weight: 700; color: #2f5d8a; padding: 10px 8px 0; }
.zf-prow { align-items: center; }
.zf-prow .zf-chk { margin-top: 0; }
.zf-when { flex: none; width: 72px; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zf-ptext { flex: 1; min-width: 0; font-size: 17px; }
.zf-dumpwrap { position: relative; }
.zf-mic { position: absolute; right: 4px; bottom: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #efebe3; color: #23201b; font: inherit; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.zf-mic:hover { background: #e7e2d8; }
.zf-mic.is-on { background: #c2634a; color: #fff; }
.td-zav.is-live { box-shadow: 0 0 0 4px rgba(194, 99, 74, .18); }

/* Phone: roomier tap targets */
@media (max-width: 759px) {
  .view__title { font-size: 36px; }
  .nav-item { font-size: 15px; }
  .btn { min-height: 44px; }
}