/* The journal's layout and type, with a landscape and palette per section.
   These overrides are only loaded by section.html; the day page stays intact. */
.section-page {
  --accent-rgb: 198 165 238;
  --surface-border: rgb(180 170 218 / 0.19);
  --active: #4e3b66;
  --active-text: #f1e5ff;
  --secondary: #dfabc2;
}

.section-page[data-theme="week"] {
  --bg: #211921;
  --panel: #281f29;
  --panel-2: #332737;
  --surface: rgb(37 28 39 / 0.95);
  --line: #483747;
  --surface-border: rgb(224 176 201 / 0.2);
  --text: #f5eaf0;
  --muted: #c2aebd;
  --purple-lift: #edb6cf;
  --purple: #644356;
  --accent-rgb: 237 182 207;
  --active: #644356;
  --active-text: #ffeaf3;
  --secondary: #eac9db;
  --wallpaper: url("journal-sakura.webp");
}

.section-page[data-theme="todo"] {
  --bg: #151e1b;
  --panel: #1d2925;
  --panel-2: #28362f;
  --surface: rgb(26 38 33 / 0.95);
  --line: #3b4c43;
  --surface-border: rgb(176 210 184 / 0.2);
  --text: #eaf2e9;
  --muted: #afc3b5;
  --purple-lift: #b1cfb3;
  --purple: #435e4d;
  --accent-rgb: 177 207 179;
  --active: #435e4d;
  --active-text: #eaf5e9;
  --secondary: #d6dbc0;
  --wallpaper: url("journal-forest.webp");
}

.section-page[data-theme="trends"] {
  --bg: #141e2a;
  --panel: #1c2a38;
  --panel-2: #253546;
  --surface: rgb(25 37 51 / 0.95);
  --line: #364d61;
  --surface-border: rgb(171 204 230 / 0.2);
  --text: #e9f0f8;
  --muted: #adc1d3;
  --purple-lift: #a6c9ed;
  --purple: #3d5877;
  --done: #9ed0c9;
  --accent-rgb: 166 201 237;
  --active: #3d5877;
  --active-text: #e5f2ff;
  --secondary: #bbd9e7;
  --wallpaper: url("journal-alpine.webp");
}

.section-page[data-theme="days"] {
  --bg: #241d19;
  --panel: #2e2521;
  --panel-2: #3a2f29;
  --surface: rgb(43 34 29 / 0.95);
  --line: #514136;
  --surface-border: rgb(224 190 163 / 0.2);
  --text: #f5ece4;
  --muted: #c6b4a5;
  --purple-lift: #e8bd96;
  --purple: #6b4e38;
  --accent-rgb: 232 189 150;
  --active: #6b4e38;
  --active-text: #fff0df;
  --secondary: #edcbb6;
  --wallpaper: url("journal-autumn.webp");
}

.section-page::before {
  background: linear-gradient(rgb(13 17 22 / 0.2), rgb(13 17 22 / 0.4)),
              var(--wallpaper, url("journal-dusk.webp")) center / cover no-repeat;
}

.section-page .sidenav,
.section-page .journal-date,
.section-page .panel {
  background: var(--surface);
  border-color: var(--surface-border);
  box-shadow: 0 8px 28px rgb(5 8 19 / 0.12);
}

.section-page .panel { padding: 1.375rem 1.5rem; }
.section-page .journal-brand span { color: var(--secondary); }
.section-page .sidenav li a:hover { background: rgb(var(--accent-rgb) / 0.07); }
.section-page .sidenav .nav-on { background: var(--active); color: var(--active-text); }
.section-page .journal-icon-button { background: rgb(var(--accent-rgb) / 0.035); }
.section-page .journal-icon-button:hover:not(:disabled),
.section-page .journal-icon-button[aria-expanded="true"] { background: rgb(var(--accent-rgb) / 0.1); border-color: var(--purple-lift); }
.section-page .journal-icon-button:disabled { color: var(--muted); opacity: 0.4; border-color: var(--line); }
.section-page .picker { background: var(--panel-2); }
.section-page .journal-today { color: var(--purple-lift); border-color: rgb(var(--accent-rgb) / 0.25); background: rgb(var(--accent-rgb) / 0.09); }
.section-page input:disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.section-page .chip { height: 2.75rem; border-radius: 9px; background: rgb(var(--accent-rgb) / 0.035); font-size: 0.8rem; }
.section-page .chip-on { background: var(--active); border-color: var(--active); color: var(--active-text); }
.section-subtitle { color: var(--muted); font: 0.8rem/1.5 var(--mono); }
.section-column { display: grid; gap: inherit; min-width: 0; width: 100%; max-width: 54rem; justify-self: center; }

/* Quiet writing space, using the same integrated fields as the journal. */
.section-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.section-panel-head h2 { margin: 0; font-size: 1rem; font-weight: 550; letter-spacing: -0.025em; }
.section-panel-head > span { color: var(--muted); font: 0.7rem var(--mono); }
.section-page .panel-todo { min-height: 20rem; }
.section-page .todo-list { gap: 0; }
.section-page .todo-item { min-height: 3.5rem; padding: 0.5rem 0; gap: 0.875rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.section-page .todo-item:focus-within { border-bottom-color: var(--purple-lift); }
.section-page .todo-item:last-child { border-bottom: 0; }
.section-page .todo-check { margin: 0; width: 1.125rem; height: 1.125rem; }
.section-page .todo-check-space { width: 1.125rem; color: var(--purple-lift); text-align: center; }
.section-page .todo-check-space::before { content: "+"; }
.section-page .todo-text,
.section-page .todo-new input { font-size: 0.95rem; line-height: 1.8; }
.section-page .todo-text:not(:focus) { text-overflow: ellipsis; }
.section-page .todo-text { color: var(--text); text-decoration: none; }
.section-page .todo-check:checked + .todo-text { color: var(--muted); text-decoration: line-through; }
.section-page .todo-new input::placeholder { color: var(--muted); }
.section-page .todo-del { width: 2.25rem; min-height: 2.75rem; border-radius: 8px; }
.section-page .todo-del:hover { background: rgb(var(--accent-rgb) / 0.07); }

/* Calendar geometry remains owned by the shared week grid stylesheet. */
.section-page .panel-week { padding: 1rem; }
.section-page .week { --row: 2.125rem; grid-template-rows: 2.75rem; }
.section-page .week-head { font-family: var(--sans); font-weight: 400; }
.section-page .week-head b { font: 0.875rem var(--mono); }
.section-page .week-hour { font-family: var(--mono); }
.section-page .cal-cell:hover { background: var(--panel-2); }
.section-page .cal-when { color: var(--text); opacity: 0.8; font-family: var(--mono); }
.section-page .cal-event { border-color: rgb(var(--accent-rgb) / 0.4); border-radius: 5px; }
.section-page .cal-open > .event-open { width: max(10.5rem, 100%); padding: 0.5rem; gap: 0.375rem; box-shadow: 0 8px 28px rgb(5 8 19 / 0.4); }
.section-page .event-title { padding: 0.4rem; font-size: 0.75rem; }
.section-page .event-quarter span { padding-block: 0.4rem; }
.section-page .event-length,
.section-page .event-save,
.section-page .event-cancel { min-height: 1.875rem; }
.section-page .carried-note { margin: 0; justify-self: start; border-color: var(--surface-border); padding: 0.5rem 0.75rem; }

.trends-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
.section-page .trend { min-width: 0; gap: 1rem; }
.trend-title { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 0.8rem; font-weight: 500; }
.trend-title .journal-icon { color: var(--purple-lift); }
.section-page .verdict { letter-spacing: 0; font-size: 0.7rem; }
.section-page .trend-mean { font-size: 1.875rem; font-weight: 400; letter-spacing: -0.045em; }
.section-page .trend-coverage { flex-basis: 100%; margin: 0.25rem 0 0; text-align: left; font: 0.6875rem var(--mono); }
.section-page .chart { height: 7rem; background: rgb(var(--accent-rgb) / 0.04); }
.section-page .chart-bars { width: 100%; }
.section-page .bar:hover { background: var(--text); }
.section-page .bar-met:hover { background: #c8eee6; }
.section-page .trend-empty { min-height: 8rem; display: grid; align-items: center; }

.section-page .entry { gap: 0.875rem; }
.section-page .entry-date { font-size: 0.875rem; font-weight: 400; }
.section-page .dow { color: var(--purple-lift); font-size: 0.75rem; text-transform: none; letter-spacing: 0; margin-right: 0.75rem; }
.section-page .entry-metrics { font-size: 0.75rem; gap: 0.375rem 1.25rem; }
.section-page .entry-metrics b { color: var(--purple-lift); font-weight: 400; }
.section-page .entry-note { color: var(--text); font-size: 0.95rem; line-height: 1.8; }
.section-page .entry-more summary { margin-top: 0.75rem; }
.section-page .more { text-align: center; }
.section-page .more a { display: inline-block; padding: 0.75rem 1rem; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface); text-decoration: none; }

.section-page[data-theme="login"] main { max-width: none; padding: 0; }
.section-page .gate { min-height: 100svh; }
.section-page .panel-login { padding: 2rem; width: min(24rem, 100%); }
.section-page .panel-login h1 { color: var(--purple-lift); font-size: 1.8rem; letter-spacing: -0.05em; font-weight: 650; }
.section-page .panel-login .eyebrow { font-size: 0.85rem; text-transform: none; letter-spacing: 0; margin: 0.5rem 0 2rem; }
.section-page .panel-login label { font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.section-page .panel-login button { background: var(--active); color: var(--active-text); font-size: 0.9rem; font-weight: 550; letter-spacing: 0; }
.section-page .panel-login button:hover { background: var(--purple); }

@media (max-width: 42rem) {
  .section-page .panel { padding: 1.125rem; }
  .section-subtitle { order: 1; flex-basis: 100%; font-size: 0.625rem; }
  .section-page .panel-week { padding: 0.5rem; }
  .section-page .week { grid-template-columns: 2.2rem repeat(7, minmax(0, 1fr)); }
  .section-page .week-head b { font-size: 0.75rem; }
  .section-page .week-hour { font-size: 0.5rem; }
  .section-page .cal-open.col-4 > .event-open,
  .section-page .cal-open.col-5 > .event-open { left: auto; right: 0; }
  .section-page .todo-item { gap: 0.625rem; flex-wrap: wrap; }
  .section-page .todo-item .status-slot:not(:empty) { order: 1; flex-basis: 100%; padding-left: 1.75rem; }
  .section-panel-head { gap: 0.5rem; }
  .section-panel-head > span { font-size: 0.625rem; }
  .trends-grid { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
  .section-page .windows { gap: 0.25rem; }
  .section-page .windows .chip { min-width: 2.25rem; padding-inline: 0.5rem; font: 0.7rem var(--mono); }
  .section-page .panel-login { padding: 1.5rem; }
}