/* ============================================================
   Code Tracker 360 — visual design system.
   Ported from Roamly's design language (warm neutral canvas, one
   teal accent, Plus Jakarta Sans / Fraunces, soft-shadow cards).
   Tokens match Roamly's own CSS; written as plain CSS classes since
   the app loads Tailwind via the Play CDN with no build step.

   Used by: base.html (the app shell links it before its own app-only
   rules) and the standalone account pages. Plan #221: this is the one
   home of these rules; base.html no longer keeps a copy.
   ============================================================ */
:root {
  --brand-50: 239 250 248; --brand-100: 215 242 238; --brand-200: 177 228 221; --brand-300: 127 207 198; --brand-400: 75 179 169;
  --brand-500: 42 151 142; --brand-600: 31 122 116; --brand-700: 29 98 94; --brand-800: 28 79 76; --brand-900: 27 66 64;
}
body { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.font-display { font-family: "Fraunces", Georgia, serif; }

.card { background:#fff; border:1px solid rgba(231,229,228,.7); border-radius:16px; box-shadow:0 1px 2px rgba(28,25,23,.04), 0 4px 16px -4px rgba(28,25,23,.06); }
.card-pad { padding:24px; }
.card-hover { transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card-hover:hover { box-shadow:0 2px 4px rgba(28,25,23,.04), 0 16px 40px -12px rgba(28,25,23,.18); transform:translateY(-2px); border-color:rgb(var(--brand-200)); }
.shadow-lift { box-shadow:0 2px 4px rgba(28,25,23,.04), 0 16px 40px -12px rgba(28,25,23,.18); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:10px 16px; font-size:15px; font-weight:600; transition:all .15s ease; cursor:pointer; border:1px solid transparent; }
.btn:active { transform:scale(.98); }
.btn-primary { background:rgb(var(--brand-600)); color:#fff; box-shadow:0 1px 2px rgba(27,66,64,.2); }
.btn-primary:hover { background:rgb(var(--brand-700)); }
.btn-secondary { background:#fff; color:#292524; border-color:#e7e5e4; }
.btn-secondary:hover { background:#fafaf9; border-color:#d6d3d1; }
.btn-ghost { background:transparent; color:#78716c; border-color:transparent; }
.btn-ghost:hover { background:#f5f5f4; color:#1c1917; }
.btn-sm { padding:6px 12px; font-size:13px; border-radius:10px; }

.chip { display:inline-flex; align-items:center; gap:6px; border-radius:9999px; padding:6px 14px; font-size:13px; font-weight:500; border:1px solid; cursor:pointer; user-select:none; transition:all .12s ease; }
.chip-off { background:#fff; border-color:#e7e5e4; color:#57534e; }
.chip-off:hover { border-color:#d6d3d1; color:#1c1917; }
.chip-on { background:#1c1917; border-color:#1c1917; color:#fff; }
.chip-brand { background:rgb(var(--brand-50)); color:rgb(var(--brand-800)); }
.chip-brand:hover { background:rgb(var(--brand-100)); }

.badge { display:inline-flex; align-items:center; gap:4px; border-radius:9999px; padding:2px 10px; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:inset 0 0 0 1px currentColor; opacity:.92; }

.ct-input { width:100%; border-radius:12px; border:1px solid #e7e5e4; background:#fff; padding:10px 14px; font-size:15px; color:#1c1917; transition:all .15s ease; }
.ct-input::placeholder { color:#a8a29e; }
.ct-input:focus { outline:none; border-color:rgb(var(--brand-500)); box-shadow:0 0 0 4px rgb(var(--brand-500) / .15); }
.ct-label { display:block; font-size:13px; font-weight:600; color:#44403c; margin-bottom:6px; }

/* Plan #221: four kinds of heading, each defined once. Page title; section
   heading (clearly bigger than the text under it, more space above than
   below); card title; small label (sentence case, never spaced capitals). */
.h-page { font-size:28px; font-weight:700; letter-spacing:-0.01em; color:#1c1917; line-height:1.2; margin-bottom:8px; }
.h-section { font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-0.005em; color:#1c1917; margin-top:28px; margin-bottom:8px; }
.h-label { font-size:11px; font-weight:600; line-height:1.35; letter-spacing:normal; color:#78716c; }
.h-card { font-size:17px; font-weight:700; color:#1c1917; }
.muted { color:#78716c; }

/* Plan #220: the app's four text sizes, by role. Title 14px (card titles),
   body 13px (reading text: plain explanations, summaries, hints), detail
   12px (paths, "changes / also affects", dates, meta lines), label 11px
   (badges, tags, small links, menus). Nothing is smaller than 11px. Weight
   and colour stay on the element. The ! forms are for the few places that
   must win over a component's own size (as Tailwind's !text-xs did). */
.t-title { font-size:14px; line-height:1.4; }
.t-body { font-size:13px; line-height:1.5; }
.t-detail { font-size:12px; line-height:1.5; }
.t-label { font-size:11px; line-height:1.35; }
.\!t-title { font-size:14px !important; line-height:1.4 !important; }
.\!t-body { font-size:13px !important; line-height:1.5 !important; }
.\!t-detail { font-size:12px !important; line-height:1.5 !important; }
.\!t-label { font-size:11px !important; line-height:1.35 !important; }
.ct-link { font-weight:600; color:rgb(var(--brand-700)); }
.ct-link:hover { color:rgb(var(--brand-800)); }
.stat-value { font-size:28px; font-weight:700; letter-spacing:-0.01em; color:#1c1917; font-variant-numeric:tabular-nums; }

.nav-item { display:flex; align-items:center; gap:10px; border-radius:10px; padding:7px 10px; font-size:13px; font-weight:500; color:#57534e; transition:background .12s,color .12s; }
.nav-item:hover { background:#f5f5f4; color:#1c1917; }
.nav-item.active { background:rgb(var(--brand-600) / .08); color:rgb(var(--brand-800)); font-weight:600; }
.nav-item.active svg { color:rgb(var(--brand-600)); }

.toast { display:flex; align-items:flex-start; gap:12px; background:#1c1917; color:#fff; padding:14px 16px; border-radius:16px; box-shadow:0 16px 40px -12px rgba(28,25,23,.4); font-size:14px; font-weight:500; animation:ctToastIn .3s ease; max-width:100%; }
.toast-out { opacity:0; transform:translateY(8px); transition:all .3s ease; }
.toast-dot { width:8px; height:8px; border-radius:9999px; margin-top:5px; flex-shrink:0; }
.toast-ok .toast-dot { background:#34d399; }
.toast-error .toast-dot { background:#f87171; }
@keyframes ctToastIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* Plan #154: the name "Code Tracker 360", the same everywhere (tracker/_wordmark.html). */
.ct-wordmark { font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight:700; letter-spacing:-0.01em; white-space:nowrap; }
.ct-wordmark-sm { font-size:13px; line-height:1.25; white-space:normal; }
.ct-wordmark-md { font-size:22px; }
.ct-wordmark-lg { font-size:inherit; }
.ct-wordmark-xl { font-size:clamp(1.6rem, 4vw, 2.75rem); }

/* ---- dark mode ---- */
html.dark body { background:#0b0d14; color:#e7e9ee; }
html.dark .card { background:#12151d; border-color:#262b38; }
html.dark .btn-secondary { background:#171b26; color:#e7e9ee; border-color:#333a4c; }
html.dark .btn-secondary:hover { background:#1b1f2a; border-color:#3f4759; }
html.dark .btn-ghost { color:#8891a5; }
html.dark .btn-ghost:hover { background:#1b1f2a; color:#e7e9ee; }
html.dark .chip-off { background:#171b26; border-color:#333a4c; color:#a3aabb; }
html.dark .chip-off:hover { border-color:#4d5468; color:#e7e9ee; }
html.dark .chip-on { background:#e7e9ee; border-color:#e7e9ee; color:#12151d; }
html.dark .chip-brand { background:rgba(31,122,116,.18); color:#5fd1c6; }
html.dark .chip-brand:hover { background:rgba(31,122,116,.28); }
html.dark .ct-input { background:#171b26; border-color:#333a4c; color:#e7e9ee; }
html.dark .ct-input::placeholder { color:#5b6377; }
html.dark .ct-label { color:#c3c8d4; }
html.dark .h-section { color:#e7e9ee; }
html.dark .h-label { color:#8891a5; }
html.dark .h-page, html.dark .h-card, html.dark .stat-value { color:#e7e9ee; }
html.dark .muted { color:#8891a5; }
html.dark .ct-link { color:#5fd1c6; }
html.dark .ct-link:hover { color:#8be0d8; }
html.dark .nav-item { color:#a3aabb; }
html.dark .nav-item:hover { background:#1b1f2a; color:#e7e9ee; }
html.dark .nav-item.active { background:rgba(31,122,116,.18); color:#5fd1c6; }
html.dark .nav-item.active svg { color:#5fd1c6; }
/* Plan #227: one grey family. The app and the account pages use Tailwind's
   cool "gray" scale; its readable light values (plans #121, #226) and dark
   values (plan #112) live here, in the shared stylesheet, so every page gets
   them. (The warm "stone" scale is no longer used.) */
:where(html:not(.dark)) body .text-gray-500 { color:#5b6270; }
:where(html:not(.dark)) body .text-gray-400 { color:#676e7a; }
:where(html:not(.dark)) body .text-gray-300 { color:#858a94; }
html.dark .bg-gray-50  { background-color:#0f121a !important; }
html.dark .bg-gray-100 { background-color:#1b1f2a !important; }
html.dark .bg-gray-200 { background-color:#262b38 !important; }
html.dark .bg-gray-700 { background-color:#2a2f3f !important; }
html.dark .bg-gray-900 { background-color:#1b1f2a !important; border:1px solid #333a4c !important; }
html.dark .border-gray-100 { border-color:#1c2029 !important; }
html.dark .border-gray-200 { border-color:#262b38 !important; }
html.dark .border-gray-300 { border-color:#333a4c !important; }
html.dark .text-gray-900 { color:#e7e9ee !important; }
html.dark .text-gray-800 { color:#d7dae3 !important; }
html.dark .text-gray-700 { color:#c3c8d4 !important; }
html.dark .text-gray-600 { color:#a3aabb !important; }
html.dark .text-gray-500 { color:#8891a5 !important; }
html.dark .text-gray-400 { color:#858da1 !important; }   /* plan #227: 4.5:1 on the dark amber box too (#226's value for "Sign out") */
html.dark .text-gray-300 { color:#636b80 !important; }
html.dark .text-gray-200 { color:#394054 !important; }
html.dark .hover\:text-gray-900:hover, html.dark .hover\:text-gray-800:hover { color:#e7e9ee !important; }
html.dark .hover\:text-gray-700:hover { color:#c3c8d4 !important; }
html.dark .hover\:text-gray-600:hover { color:#a3aabb !important; }
html.dark .hover\:text-gray-500:hover { color:#8891a5 !important; }
html.dark .hover\:bg-gray-50:hover  { background-color:#171b26 !important; }
html.dark .hover\:bg-gray-100:hover { background-color:#222838 !important; }
html.dark .hover\:bg-gray-200:hover { background-color:#2d3242 !important; }
/* Tailwind red colours used by the account pages (plan #140). */
html.dark .bg-red-50  { background-color:#2a1215 !important; }
html.dark .text-red-600 { color:#f87171 !important; }
html.dark .text-red-700 { color:#fca5a5 !important; }
html.dark .border-red-100 { border-color:#3d1a1f !important; }

/* Plan #227: one accent colour, brand teal, for links, numbers, codes,
   selected tabs, "on" states, main buttons and focus outlines. */
.hover-accent:hover, .hover-accent:focus-visible { color:rgb(var(--brand-800)); }
.border-accent { border-color:rgb(var(--brand-600)) !important; }
.bg-accent { background-color:rgb(var(--brand-600)); color:#fff; }
.bg-accent:hover { background-color:rgb(var(--brand-700)); }
.bg-accent-soft { background-color:rgb(var(--brand-50)); }
.border-accent-soft { border-color:rgb(var(--brand-200)); }
.focus-accent:focus { outline:none; border-color:rgb(var(--brand-500)); box-shadow:0 0 0 3px rgb(var(--brand-500) / .18); }
/* Plan #228: a button beside a box is as tall as the box; the danger button;
   and tabs (a teal underline on the chosen one). */
.btn-field { align-self:stretch; padding-top:0; padding-bottom:0; }   /* takes the row's height, which is the box's */
.btn-danger { background:#b91c1c; color:#fff; border-color:#b91c1c; }
.btn-danger:hover { background:#991b1b; border-color:#991b1b; }
.ct-tabs { display:flex; gap:4px; border-bottom:1px solid #e5e7eb; }
.ct-tab { padding:8px 12px; margin-bottom:-1px; border-bottom:2px solid transparent; font-size:14px; font-weight:600; color:#5b6270; background:none; cursor:pointer; }
.ct-tab:hover { color:#1c1917; }
.ct-tab.is-selected { color:rgb(var(--brand-700)); border-bottom-color:rgb(var(--brand-600)); }
html.dark .btn-danger { background:#b91c1c; border-color:#b91c1c; color:#fff; }
html.dark .btn-danger:hover { background:#dc2626; border-color:#dc2626; }
html.dark .ct-tabs { border-bottom-color:#262b38; }
html.dark .ct-tab { color:#a3aabb; }
html.dark .ct-tab:hover { color:#e7e9ee; }
html.dark .ct-tab.is-selected { color:#5fd1c6; border-bottom-color:#5fd1c6; }
/* The keyboard outline (Tab) is the accent on every page, clearly visible in both modes. */
:focus-visible { outline:2px solid rgb(var(--brand-600)); outline-offset:2px; }
details[open] > summary .open-accent { color:rgb(var(--brand-700)); border-color:rgb(var(--brand-500)); }
/* Plan #227's icons (tracker/_icon.html): inline, one text-line tall. */
.ct-icon { display:inline-block; width:1em; height:1em; vertical-align:-0.14em; flex-shrink:0; }
/* "In plain terms": normal text with a thin teal edge (no box). */
.plain-terms { border-left:2px solid rgb(var(--brand-600)); padding-left:10px; }
html.dark .hover-accent:hover, html.dark .hover-accent:focus-visible { color:#8be0d8; }
html.dark .border-accent { border-color:#5fd1c6 !important; }
html.dark .bg-accent-soft { background-color:rgba(31,122,116,.18); }
html.dark .border-accent-soft { border-color:#1f4f4b; }
html.dark details[open] > summary .open-accent { color:#5fd1c6; border-color:#5fd1c6; }
html.dark .plain-terms { border-left-color:#5fd1c6; }
html.dark :focus-visible { outline-color:#5fd1c6; }