/*
 * Milestone: project styles on top of the Pomar design system (static/pomar/pomar.css).
 * Only what Pomar has no component for; always Pomar tokens, never raw colors.
 */

/* ── Page layout ──────────────────────────────────────── */
.app-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.app-page-head .pm-heading { margin-bottom: 0; min-width: 0; }
.app-section { display: flex; flex-direction: column; gap: var(--space-3); }
.app-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.app-section-head .pm-title { margin: 0; }
.app-narrow { width: 100%; max-width: 40rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-6); }
.app-two-cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.app-side-layout { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
@media (max-width: 60rem) { .app-side-layout { grid-template-columns: minmax(0, 1fr); } }
.app-stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.app-field-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: start; }
.app-meta { margin: 0; font-size: 0.75rem; color: var(--label-secondary); }
.app-dl { display: flex; flex-direction: column; gap: var(--space-1-5); margin: 0; font-size: 0.8125rem; }
.app-dl > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.app-dl dt { color: var(--label-secondary); }
.app-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.app-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pm-card-title a { color: inherit; }
.app-inline-form { display: inline; margin: 0; }
.pm-code-input { font-family: var(--font-mono); font-size: 0.75rem; font-feature-settings: "calt", "liga"; font-variant-ligatures: contextual common-ligatures; }
.pm-card-title .pm-badge, .pm-card-title .pm-tag { margin-left: var(--space-1-5); vertical-align: 0.1em; }

/* Link tabs dressed as a Pomar segmented control (server-side filters). */
nav.pm-segmented { max-width: 100%; overflow-x: auto; align-self: flex-start; }
.app-segment { display: flex; align-items: center; height: calc(var(--control-md) - 4px); padding: 0 var(--space-3); border-radius: calc(var(--radius-md) - 2px); font-size: 0.8125rem; white-space: nowrap; color: var(--label); text-decoration: none !important; transition: background-color var(--pm-dur) var(--pm-ease), box-shadow var(--pm-dur) var(--pm-ease); }
.app-segment:hover { background: var(--fill-quaternary); }
.app-segment[aria-current="page"] { background: var(--segment-selected); box-shadow: var(--shadow-control); font-weight: 500; }
.app-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ── Sidebar brand and login ──────────────────────────── */
.app-brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.app-brand-mark { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--label-on-accent); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; }
.app-login { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); }
.app-login .pm-card { width: 100%; max-width: 22rem; padding: var(--space-6); gap: var(--space-4); }

/* ── Habit color (stored as a Pomar system color name) ── */
.habit-dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full); background: var(--pm-tint, var(--accent)); }
.habit-card-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.habit-card-head .habit-dot { margin-top: 0.3rem; }
.habit-streak { text-align: right; line-height: 1.1; }
.habit-streak .pm-stat-value { font-size: 1.375rem; }

/* Check-in buttons: the pressed state carries the outcome's meaning (and its label). */
.checkin-btn[aria-pressed="true"].is-done { background: var(--success-soft); color: var(--success-text); box-shadow: none; }
.checkin-btn[aria-pressed="true"].is-missed { background: var(--danger-soft); color: var(--danger-text); box-shadow: none; }
.checkin-btn[aria-pressed="true"].is-skipped { background: var(--warning-soft); color: var(--warning-text); box-shadow: none; }
.checkin-btn[aria-pressed="true"] { font-weight: 600; }

/* ── Day status cells (year map, month calendar, legend) ── */
.status-done { --cell: var(--green); }
.status-missed { --cell: var(--red); }
.status-skipped { --cell: var(--orange); }
.status-paused { --cell: var(--fill-primary); }
.status-pending { --cell: var(--bg-content); box-shadow: inset 0 0 0 1.5px var(--accent); }
.status-not-due { --cell: var(--chart-grid); }
.status-outside { --cell: transparent; }

.year-map { overflow-x: auto; padding-bottom: var(--space-1); }
.year-map-grid { display: inline-flex; gap: 3px; }
.year-map-week { display: flex; flex-direction: column; gap: 3px; width: 0.75rem; }
.year-map-label { height: 1rem; overflow: visible; white-space: nowrap; font-size: 0.625rem; line-height: 1rem; color: var(--label-secondary); }
.year-map-cell, .status-swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; background: var(--cell, var(--chart-grid)); }
.status-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 0.6875rem; color: var(--label-secondary); }
.status-legend span { display: inline-flex; align-items: center; gap: var(--space-1); }

.month-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.month-head h2::first-letter { text-transform: uppercase; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.month-weekdays { font-size: 0.6875rem; font-weight: 600; color: var(--label-secondary); text-align: center; }
.month-day { display: flex; align-items: center; justify-content: center; height: 2.25rem; width: 100%; border: 0; border-radius: var(--radius-sm); font: inherit; font-variant-numeric: tabular-nums; color: var(--label); background: var(--cell, transparent); }
.month-day.status-done { background: var(--success-soft); color: var(--success-text); font-weight: 600; }
.month-day.status-missed { background: var(--danger-soft); color: var(--danger-text); font-weight: 600; }
.month-day.status-skipped { background: var(--warning-soft); color: var(--warning-text); font-weight: 600; }
.month-day.status-paused { background: var(--fill-secondary); color: var(--label-secondary); }
.month-day.status-not-due { background: transparent; color: var(--label-secondary); }
.month-day.is-out { opacity: 0.4; }
.month-day.is-locked { color: var(--label-tertiary); background: transparent; }
.month-day.is-today { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
button.month-day { cursor: default; transition: box-shadow var(--pm-dur) var(--pm-ease); }
button.month-day:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ── Course goal periods strip ────────────────────────── */
.goal-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.goal-strip span { width: 1.25rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--fill-secondary); }
.goal-strip .is-met { background: var(--green); }
.goal-strip .is-missed { background: var(--red); }
.goal-strip .is-current { background: var(--accent); }

/* ── Course card and lessons ──────────────────────────── */
.course-emoji { margin-right: 0.3em; }
.lesson-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-1-5) 0; border-top: 1px solid var(--separator); }
.lesson-row:first-child { border-top: 0; }
.lesson-row .lesson-title { flex: 1; min-width: 8rem; }
.lesson-row.is-done .lesson-title { color: var(--label-secondary); text-decoration: line-through; }
.lesson-index { width: 1.5rem; text-align: right; font-size: 0.6875rem; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.lesson-row .pm-input { width: auto; }

/* ── Reading list ─────────────────────────────────────── */
.book-index { flex: none; width: 1.5rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pm-list-row a.pm-list-title { color: var(--label); }

/* ── Emoji picker on the course form ──────────────────── */
.emoji-input { text-align: center; font-family: var(--font-emoji); font-size: 1.25rem; }
.emoji-choices { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.emoji-choices .pm-btn { font-family: var(--font-emoji); font-size: 1.0625rem; padding: 0; width: var(--control-md); }
.emoji-choices .pm-btn[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ── Help page ────────────────────────────────────────── */
.help-layout { display: grid; gap: var(--space-8); grid-template-columns: 12rem minmax(0, 1fr); align-items: start; }
.help-toc { position: sticky; top: calc(var(--toolbar-h) + var(--space-4)); }
.help-layout section { scroll-margin-top: calc(var(--toolbar-h) + var(--space-4)); }
@media (max-width: 60rem) { .help-layout { grid-template-columns: minmax(0, 1fr); } .help-toc { position: static; } }

[hidden] { display: none !important; }