/* ---------- Layout: bottom nav on phones, sidebar from 768px ---------- */
.app {
  min-height: 100vh;
}

.main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  padding-bottom: calc(var(--nav-height) + var(--space-5) + env(safe-area-inset-bottom));
}

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.nav__link {
  flex: 1;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.nav__link svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Current page: colour + weight + underline bar, never colour alone. */
.nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--color-primary);
}

@media (min-width: 768px) {
  .nav {
    top: 0;
    right: auto;
    bottom: auto;
    width: var(--sidebar-width);
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-3);
    border-top: 0;
    border-right: 1px solid var(--color-border);
  }

  .nav__link {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    font-size: 1rem;
    border-radius: var(--radius-s);
  }

  .nav__link[aria-current="page"] {
    background: var(--color-primary-soft);
    box-shadow: inset 4px 0 0 var(--color-primary);
  }

  .main {
    margin-left: var(--sidebar-width);
    max-width: none;
    padding: var(--space-6) var(--space-6);
  }

  .main > * {
    max-width: var(--content-max);
  }
}

/* ---------- Cards, empty state, banner ---------- */
.card {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

.empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.empty p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.banner {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-m);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-5);
  font: inherit;
  font-weight: 700;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-m);
  cursor: pointer;
}

.button--hero {
  width: 100%;
  min-height: 72px;
  margin-bottom: var(--space-4);
  font-size: 1.3rem;
}

.button--quiet {
  color: var(--color-primary);
  background: transparent;
}

/* ---------- Today ---------- */
.greeting {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.date,
.status,
.hint {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}

.status {
  margin-bottom: var(--space-4);
  font-weight: 600;
}

.hint {
  font-size: 0.9375rem;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat {
  margin: 0;
}

.stat p {
  margin: 0;
}

.stat__label {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.stat__value {
  font-size: 1.35rem;
  font-weight: 700;
}

.log,
.week {
  margin-bottom: var(--space-4);
}

.log h2:not(:first-child) {
  margin-top: var(--space-5);
}

.symptom-group h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* ---------- Form controls ---------- */
.field {
  margin-bottom: var(--space-4);
}

.field__label,
.field label {
  display: block;
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-s);
}

textarea.input {
  resize: vertical;
}

.choices {
  display: flex;
  gap: var(--space-1);
}

.choice,
.chip {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  cursor: pointer;
}

.choice {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--space-1);
  border-radius: var(--radius-s);
  line-height: 1.2;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-4);
  border-radius: 999px;
}

/* Selected = filled + bold, so it never relies on colour alone. */
.choice[aria-pressed="true"],
.chip[aria-pressed="true"] {
  font-weight: 700;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.more {
  margin-bottom: var(--space-4);
}

.more summary {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  font-weight: 600;
  cursor: pointer;
}

/* display:flex hides the native marker, so draw one (decoration; <details> announces its state). */
.more summary::after {
  content: "+";
  margin-left: var(--space-2);
  font-size: 1.25rem;
  line-height: 1;
}

.more[open] summary::after {
  content: "\2212";
}

.more .chips {
  padding-bottom: var(--space-2);
}

.save-state {
  min-height: 1.5em;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* ---------- Toast ---------- */
.toast-host {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + var(--space-3));
  z-index: 20;
  pointer-events: none;
}

.toast {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  pointer-events: auto;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-m);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}

.toast__message {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.toast__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.toast__hint {
  flex: 1 0 100%;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .toast-host {
    left: calc(var(--sidebar-width) + var(--space-5));
    right: var(--space-5);
    bottom: var(--space-5);
  }

  .toast {
    margin: 0;
  }
}

/* ---------- Calendar ---------- */
.stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0 var(--space-3);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
}

.tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  border: 2px solid var(--color-border);
  border-radius: 999px;
}

.tab[aria-current="page"] {
  font-weight: 700;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.month-nav__label {
  margin: 0;
  font-size: 1.25rem;
  text-align: center;
}

.month-nav__step {
  font-size: 1.5rem;
  text-decoration: none;
}

.month-nav__step--off {
  display: inline-block;
  min-width: var(--touch-min);
  visibility: hidden;
}

.month-nav__today {
  margin: 0 0 var(--space-2);
  text-align: center;
}

.cal {
  width: 100%;
  margin-bottom: var(--space-4);
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
}

.cal th {
  padding: var(--space-1) 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.cal td {
  padding: 0;
}

.cal__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 58px;
  padding: var(--space-1) 0;
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
}

.cal__cell--future {
  color: var(--color-text-muted);
  background: transparent;
  border-style: dashed;
}

/* Today: thick outline + bold number, not colour alone. */
.cal__cell--today {
  font-weight: 700;
  border: 3px solid var(--color-primary);
}

.cal__marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  min-height: 10px;
}

.mark {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.mark .outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.mark--bleeding,
.mark--spotting {
  color: var(--mark-bleeding);
}
.mark--symptoms {
  color: var(--mark-symptoms);
}
.mark--hot {
  color: var(--mark-hot);
}
.mark--sleep {
  color: var(--mark-sleep);
}
.mark--journal {
  color: var(--mark-journal);
}

.legend h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.legend__list,
.cycle-list,
.start-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
}

.legend__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.legend .mark {
  width: 14px;
  height: 14px;
  flex: none;
}

.day-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
}

.cycles,
.info {
  margin-bottom: var(--space-4);
}

.cycles h2,
.info h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.cycle-list li {
  margin-bottom: var(--space-3);
}

.cycle-list__text {
  display: block;
  margin-bottom: var(--space-1);
}

.bar {
  display: block;
  width: 100%;
  height: 8px;
}

.bar__track {
  fill: var(--color-primary-soft);
}

.bar__fill {
  fill: var(--color-primary);
}

.cycle-range {
  margin: var(--space-3) 0 0;
  font-weight: 600;
}

.card.more {
  margin-bottom: var(--space-4);
}

/* ---------- Insights, charts, treatments (M3) ---------- */
.week-summary,
.hot,
.insights > .card {
  margin-bottom: var(--space-4);
}

.week-summary > .card,
.hot > .card {
  margin-bottom: var(--space-3);
}

.card__title {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
}

.plain-list,
.meter-list,
.link-list,
.marker-list,
.treatment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.marker-list {
  padding-left: var(--space-5);
  list-style: decimal;
}

.meter-list li {
  margin-bottom: var(--space-3);
}

.meter-list__text {
  display: block;
  margin-bottom: var(--space-1);
}

.plain-list li {
  padding: var(--space-1) 0;
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.link-list .link-button {
  padding: 0 var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: 999px;
}

.chart-block {
  margin-bottom: var(--space-4);
}

.chart-block__title {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
}

.chart__grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.chart__axis {
  font-size: 11px;
  fill: var(--color-text-muted);
}

.chart__line {
  fill: none;
  stroke: var(--chart-color, var(--color-primary));
  stroke-width: 2;
  stroke-linejoin: round;
}

.chart__dot,
.chart__bar {
  fill: var(--chart-color, var(--color-primary));
}

/* Treatment markers are dashed and numbered, so they never rely on colour. */
.chart__event {
  stroke: var(--color-text-muted);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}

.chart__event-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-text);
}

.chart--sleep {
  --chart-color: var(--mark-sleep);
}

.chart--energy {
  --chart-color: var(--mark-journal);
}

.chart--mood {
  --chart-color: var(--mark-symptoms);
}

.chart--hot {
  --chart-color: var(--mark-hot);
}

.chart--symptom {
  --chart-color: var(--mark-bleeding);
}

.treatment-list li {
  margin-bottom: var(--space-3);
}

.treatment-list__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--touch-min);
  color: inherit;
  text-decoration: none;
}

.treatment-list__link .hint {
  margin: 0;
}

.treatments > h2 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 1.1rem;
}

.form-error {
  min-height: 1.5em;
  margin: 0 0 var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}

.change-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.change-list .button {
  min-width: var(--touch-min);
  padding: var(--space-1);
}

/* ---------- Journal, appointments, learn, report controls (M4) ---------- */
.journal > h2,
.appointments > h2,
.report-screen > h2 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 1.1rem;
}

.journal .button,
.appointments .button {
  text-decoration: none;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  font-weight: 500;
}

.check input {
  flex: none;
  width: 24px;
  height: 24px;
  accent-color: var(--color-primary);
}

.fieldset {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.fieldset legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.question-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Covered questions get a line through them; the ticked box says the same, so colour is not alone. */
.question-list .is-done span {
  text-decoration: line-through;
}

.question-list .button {
  min-width: var(--touch-min);
  padding: var(--space-1);
}

.report-controls {
  margin-bottom: var(--space-4);
}

.hint a {
  color: inherit;
}

/* ---------- Settings, onboarding, banners (M5) ---------- */
.settings .settings-card {
  margin-top: var(--space-4);
}

.settings-card h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.settings-card h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.block {
  display: block;
}

.restore-panel,
.delete-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Serious action: inverted colours and a heavy border, so it never relies on a red hue. */
.button--danger {
  color: var(--color-surface);
  background: var(--color-text);
  border-color: var(--color-text);
}

.banner--sample,
.banner--backup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.banner p {
  margin: 0;
}

.onboarding {
  max-width: var(--content-max);
  margin: 0 auto;
}

.onboarding__step {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  color: var(--color-text-muted);
}

.onboarding__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

.onboarding__actions .hint {
  flex-basis: 100%;
  margin: 0;
}

/* While onboarding runs there is no navigation, so the content uses the full width. */
body[data-onboarding] .nav {
  display: none;
}

body[data-onboarding] .main {
  margin-left: 0;
  padding-bottom: var(--space-6);
}

/* A link-styled <button> (Skip) must not look like the browser's default button. */
button.link-button {
  font: inherit;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- PWA: install hint, update notice, demo (M6) ---------- */
.banner--demo,
.banner--install {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.install-hint {
  display: grid;
  gap: var(--space-3);
}

.install-platform summary {
  display: list-item;
  list-style-position: inside;
  min-height: var(--touch-min);
  padding: var(--space-3) 0;
  font-weight: 600;
  cursor: pointer;
}

.install-platform h3 {
  margin: 0 0 var(--space-2);
}

.install-steps {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.install-steps li {
  padding-left: var(--space-1);
}

.install-steps li > span {
  vertical-align: middle;
}

.step-icon {
  width: 24px;
  height: 24px;
  margin-right: var(--space-2);
  vertical-align: middle;
  color: var(--color-primary);
}

.update-notice {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  background: var(--color-primary-soft);
  border-bottom: 2px solid var(--color-primary);
}

.update-notice p {
  margin: 0;
}

.update-notice > div,
.update-notice--limit > p {
  flex: 1 1 14rem;
}

a.button {
  text-decoration: none;
}