/* NorthLight — "Lilac & Rose". Calm, thoughtful, uncluttered; light and a
   little fun. Extend here; avoid inline styles.

   Bootstrap 5.3 is re-themed through its CSS variables so buttons, links,
   badges, focus rings and switches follow the palette without a Sass build. */
:root {
  --nl-bg: #faf8fd;            /* lavender-tinted white page ground */
  --nl-card: #efe9f8;          /* cards: a step darker lilac than the ground */
  --nl-line: #ddd4ee;          /* borders, chart grid, progress track on lilac */
  --nl-accent: #7b61c9;        /* soft violet: primary, Satisfaction, progress */
  --nl-accent-dark: #6a51b3;
  --nl-accent-soft: #ece7f7;
  --nl-northlight: #d9628f;    /* rose: the North Light and the Importance overlay */
  --nl-mint: #5fb3a1;          /* Protect / complete: calm "this is working" */
  --nl-muted: #6c757d;

  --bs-primary: var(--nl-accent);
  --bs-primary-rgb: 123, 97, 201;
  --bs-success-rgb: 95, 179, 161;
  --bs-info-rgb: 217, 98, 143;        /* Explore badge = rose */
  --bs-secondary-rgb: 139, 128, 163;  /* lilac-grey for Maintain / not started */
  --bs-light-rgb: 250, 248, 253;
  --bs-link-color-rgb: 123, 97, 201;
  --bs-link-hover-color-rgb: 106, 81, 179;
  --bs-body-bg: #faf8fd;
  --bs-border-color: var(--nl-line);
}

body { color: #26223a; background-color: var(--nl-bg); }
.nl-mark { color: var(--nl-northlight); }
.navbar { border-color: #e6def3 !important; }
.card { border-radius: .75rem; background: var(--nl-card); }
.nl-card { background: var(--nl-card); border: 0; box-shadow: 0 1px 3px rgba(80, 60, 140, .10); border-radius: .75rem; }

/* Surfaces inside lilac cards stay transparent (Bootstrap paints them body-white). */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--nl-line); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--nl-line); }
.border-top { border-top-color: var(--nl-line) !important; }

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--nl-accent); --bs-btn-border-color: var(--nl-accent);
  --bs-btn-hover-bg: var(--nl-accent-dark); --bs-btn-hover-border-color: var(--nl-accent-dark);
  --bs-btn-active-bg: var(--nl-accent-dark); --bs-btn-active-border-color: var(--nl-accent-dark);
  --bs-btn-disabled-bg: var(--nl-accent); --bs-btn-disabled-border-color: var(--nl-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--nl-accent); --bs-btn-border-color: var(--nl-accent);
  --bs-btn-hover-bg: var(--nl-accent); --bs-btn-hover-border-color: var(--nl-accent);
  --bs-btn-active-bg: var(--nl-accent); --bs-btn-active-border-color: var(--nl-accent);
}
.btn-success {
  --bs-btn-bg: var(--nl-mint); --bs-btn-border-color: var(--nl-mint);
  --bs-btn-hover-bg: #4fa08f; --bs-btn-hover-border-color: #4fa08f;
  --bs-btn-active-bg: #4fa08f; --bs-btn-active-border-color: #4fa08f;
}
.btn-outline-success {
  --bs-btn-color: var(--nl-mint); --bs-btn-border-color: var(--nl-mint);
  --bs-btn-hover-bg: var(--nl-mint); --bs-btn-hover-border-color: var(--nl-mint);
  --bs-btn-active-bg: var(--nl-mint); --bs-btn-active-border-color: var(--nl-mint);
}

/* Forms */
.form-control:focus, .form-select:focus { border-color: #b9a8e6; box-shadow: 0 0 0 .25rem rgba(123, 97, 201, .18); }
.form-check-input:checked { background-color: var(--nl-accent); border-color: var(--nl-accent); }
.form-check-input:focus { border-color: #b9a8e6; box-shadow: 0 0 0 .25rem rgba(123, 97, 201, .18); }
.form-range { padding: 0; }
.form-range::-webkit-slider-thumb { background: var(--nl-accent); }
.form-range::-moz-range-thumb { background: var(--nl-accent); }
.range-value { min-width: 2ch; display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* The North Light is visually distinctive but understated. */
.northlight {
  border-left: 3px solid var(--nl-northlight);
  padding: .25rem 0 .25rem 1rem;
  font-size: 1.05rem;
  line-height: 1.5;
}
.northlight .label {
  display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nl-northlight); margin-bottom: .2rem;
}
.why { color: var(--nl-muted); font-style: italic; }

/* Subtle progress — no gamification. */
.progress { height: .4rem; background: var(--nl-line); }
.progress-bar { background: var(--nl-accent); }

.stat { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nl-muted); }

.score { font-variant-numeric: tabular-nums; }
.wheel-wrap { position: relative; max-width: 560px; margin: 0 auto; }

.step-nav { font-size: .85rem; color: var(--nl-muted); }
.hint { font-size: .85rem; color: var(--nl-muted); }

/* North Light starting points */
.nl-samples summary { cursor: pointer; list-style: none; }
.nl-samples summary::before { content: "\25B8 "; }
.nl-samples[open] summary::before { content: "\25BE "; }
.nl-sample { background: #fff; border: 1px solid var(--nl-card); border-radius: .5rem; padding: .6rem .8rem; width: 100%; }
.nl-sample:hover, .nl-sample:focus-visible { border-color: var(--nl-accent); outline: none; }

/* Clickable summary cards */
.nl-card-link { color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.nl-card-link:hover, .nl-card-link:focus-visible { color: inherit; box-shadow: 0 3px 10px rgba(80, 60, 140, .18); transform: translateY(-1px); }

/* Attention card: a quiet nudge, not an alarm */
.nl-attention { border-left: 4px solid #d9628f; }

/* Calendar */
.nl-cal { table-layout: fixed; }
.nl-cal td { height: 6.5rem; vertical-align: top; padding: .3rem; background: #fff; }
.nl-cal td.nl-cal-out { background: transparent; color: var(--nl-muted); }
.nl-cal td.nl-cal-today { box-shadow: inset 0 0 0 2px var(--nl-accent); }
.nl-cal-day { font-size: .8rem; color: var(--nl-muted); margin-bottom: .2rem; }
.nl-cal-item { display: block; font-size: .72rem; line-height: 1.2; padding: .15rem .35rem; margin-bottom: .15rem; border-radius: .3rem;
  color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-cal-item:hover { color: #fff; filter: brightness(.92); }
.nl-cal-milestone { background: #7b61c9; }
.nl-cal-goal { background: #a48fdc; }
.nl-cal-review { background: #5fb3a1; }
.nl-cal-review_due { background: #d9628f; }
.nl-cal-year { background: #6c757d; }
.nl-cal-life_review { background: #c7508a; }
.nl-cal-item.nl-cal-complete { opacity: .55; text-decoration: line-through; }
.nl-cal-item.nl-cal-dropped, .nl-cal-item.nl-cal-paused { opacity: .45; }
.nl-cal-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; vertical-align: -.1rem; margin-right: .2rem; }