/* =====================================================================
   Happy Journal: shared styles for the inner pages
   (Dashboard, About, Goals, Journal, Notes, History, Reports, Journey).
   Built only from the tokens in layout.css:
   --bg  --card  --line  --text  --muted  --accent  --btn
   ===================================================================== */

/* The extra colour variables (--ghost --up --ok --warn --dim ...) live in theme.css */

/* ---------- Form controls inherit the page font ---------- */
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(button){cursor:pointer}
:where(input,select,textarea):where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden])){
  width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.4;
}
:where(input,select,textarea):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
::placeholder{color:var(--dim)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--btn)}
textarea{resize:vertical}
[hidden]{display:none !important}
button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Header: current page ---------- */
.nav a[aria-current="page"]{color:var(--text)}

/* ---------- Page heading (same type scale as the home hero) ---------- */
.eyebrow{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lead{margin:24px 0 32px;max-width:520px;font-size:18px;color:var(--muted)}
.page-head{padding:40px 0 28px}
.page-head .eyebrow{margin-bottom:12px}
.page-head h1{margin:0;font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.page-head h1 span{color:var(--accent)}
.page-head .lead{margin:16px 0 0;max-width:680px}
.page-head .sub{margin:12px 0 0;font-size:18px;color:var(--accent)}
.page-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
main{padding-bottom:56px}

/* ---------- Panels and stacks ---------- */
.panel{padding:28px}
.stack{display:grid;gap:20px}
.card-title{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:20px;letter-spacing:-.01em}
.card-title i{color:var(--accent);font-size:18px}
.muted{color:var(--muted)}
@media (max-width:560px){.panel{padding:20px}}

/* ---------- Buttons (the layout's .btn / .btn--solid / .btn--ghost) ---------- */
button.btn,label.btn{cursor:pointer}
button.btn--solid{border:0}
.btn--ghost{background:transparent;color:var(--text)}
.btn-sm{padding:10px 16px;font-size:14px}
.btn-danger{color:var(--down);border-color:color-mix(in srgb,var(--down) 45%,transparent)}
.btn-danger:hover{background:color-mix(in srgb,var(--down) 10%,transparent);filter:none}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.btn-block{display:block;width:100%;text-align:center}

/* every action button in the app uses the same two looks */
.jr-btn,.nt-btn,.rp-primary,.rp-ghost,.btn-submit,.btn-add-activity{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border:0;border-radius:10px;
  background:var(--btn);color:#fff;font-weight:600;font-size:14px;line-height:1.3;text-decoration:none;cursor:pointer;
}
.jr-btn:hover,.nt-btn:hover,.rp-primary:hover,.btn-submit:hover,.btn-add-activity:hover{filter:brightness(1.15)}
.jr-btn.ghost,.nt-btn.ghost,.rp-ghost{background:transparent;border:1px solid var(--ghost);color:var(--text)}
.rp-ghost:hover{filter:none;border-color:var(--accent)}
.jr-btn.danger,.nt-btn.danger{background:transparent;border:1px solid color-mix(in srgb,var(--down) 50%,transparent);color:var(--down)}
.jr-btn:disabled,.nt-btn:disabled,.rp-primary:disabled,.rp-ghost:disabled{opacity:.5;cursor:default;filter:none}

/* ---------- Pills: tabs, chips, filters ---------- */
.jr-tab,.tab,.chip,.filter-btn,.tt-chip,.trend-filter-btn,.rp-tabs button,.rp-years button{
  padding:8px 16px;border-radius:999px;border:1px solid var(--ghost);background:transparent;color:var(--muted);
  font-size:14px;font-weight:600;line-height:1.3;cursor:pointer;
}
.jr-tab:hover,.tab:hover,.chip:hover,.filter-btn:hover,.tt-chip:hover,.trend-filter-btn:hover,.rp-tabs button:hover,.rp-years button:hover{border-color:var(--accent);color:var(--text)}
.jr-tab.active,.tab.on,.chip.on,.filter-btn.active,.tt-chip.active,.trend-filter-btn.active,.rp-tabs button.on,.rp-years button.on{
  background:var(--btn);border-color:var(--btn);color:#fff;
}

/* ---------- Tables ---------- */
.table-container,.tt-scroll{overflow:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--thead)}
th i{color:var(--accent);margin-right:6px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--stripe)}
td:first-child,th:first-child{text-align:left}

/* ---------- Growth / drop (flat colours, no glow) ---------- */
.glow-up{color:var(--up) !important}
.glow-down{color:var(--down) !important}
.glow-flat{color:var(--muted)}

/* ---------- Timeline (Journey page) ---------- */
.timeline{border-left:2px solid var(--accent);padding-left:18px;margin-top:8px}
.timeline-item{margin-bottom:20px;position:relative}
.timeline-title{font-weight:700;color:var(--text);font-size:16px}
.timeline-date{font-size:12px;color:var(--muted);margin-bottom:4px}
.timeline-desc{color:var(--muted);font-size:14px}
.timeline:empty{display:none}
.journey-empty{color:var(--muted);font-size:14px;margin:0}

/* ---------- Small helpers ---------- */
.back-link{display:inline-block;margin-top:28px;color:var(--accent);font-size:14px;font-weight:600}
.back-link:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}