/* home.css — Home header band, settings and the mode cards.
   Split from app.module.css; load order in app.html preserves the original cascade. */

/* ---------- home header band + settings ---------- */
/* The kit's Profile opens on a pale blue band that runs to the screen edges
   and holds the title and the settings control. The pane pads 16px, so the
   band pulls itself back out to the edges. */
.hero {
  margin: -20px -16px 16px;
  padding: 16px 16px 20px;
  background: var(--brand-soft-2);
}

.hero .sub {
  margin: 0;
}

.hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* chips size to their label; the row wraps rather than the words */
.hrow .chip,
.hrow .tag {
  white-space: nowrap;
}

.hrow .tag {
  margin-bottom: 0;
}

/* ---------- settings page ---------- */
#settings .setinner { max-width: 560px; margin: 0 auto; }
/* Save returns you, and the nav sits above this panel, so there is no back
   control here to make room for. */
.settings-header { display: flex; align-items: center; gap: 6px; margin: 0 0 18px; }
#settingsTitle, #settings .setrow > span { min-width: 0; overflow-wrap: anywhere; }
#settings .settings-header h1 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -.4px; outline: none; }
/* Preferences reads as a list, not a stack of boxes: a quiet heading with a
   rule under it, then rows that put the name on the left and the control on
   the right, where the eye already is. */
.settings-card { padding: 0; border: 0; background: none; }
.settings-card + .settings-card { margin-top: 34px; }
#settings .settings-card h2 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line-1); color: var(--ink-2); font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.settings-card .setlabel { display: block; margin: 20px 0 8px; color: var(--ink-2); font-size: 12px; font-weight: 800; letter-spacing: .07em; }
.settings-card .setlabel:first-of-type { margin-top: 16px; }
.settings-card .setrow:last-child { margin-bottom: 0; }
#settings .installbox { margin-top: 14px; }
#settings .big { width: 100%; margin: 18px 0 0; }
#settings select { width: 100%; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; }
@media (min-width: 960px) { #settings .settings-header h1 { font-size: 34px; } }


.setlabel {
  display: block;
  color: var(--ink-2);
  margin: 14px 0 6px;
}

.setfield {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-align: left;
}

.setfield:hover { border-color: var(--brand-line); }
.setfield #setDateText.is-empty { color: var(--ink-2); font-weight: 500; }
.setfield-icon {
  flex: none;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#settings .setpreview { width: 100%; margin: 12px 0 0; min-height: 48px; font-size: 15px; font-weight: 700; }

.sethint { margin: 10px 0 0; color: var(--ink-2); font-size: 13px; font-weight: 600; line-height: 1.45; }

/* ---------- the app's own list of choices ---------- */
.choice-panel h2 { margin: 0 0 12px; font-size: 21px; font-weight: 900; letter-spacing: -.3px; }
.choice-list { display: grid; gap: 8px; margin-bottom: 16px; }

.choice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

.choice-row:hover { border-color: var(--brand-line); }
.choice-row.is-chosen { border-color: #19afe8; background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; }
.choice-tick { flex: none; width: 22px; height: 22px; fill: none; stroke: #19afe8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.choice-row.is-chosen .choice-tick { opacity: 1; }
#choiceModal .panel .big { display: block; width: 100%; margin: 0; min-height: 52px; border-radius: 14px; background: #19afe8; color: #fff; box-shadow: 0 4px 0 #0a97cd; font-weight: 800; }

/* ---------- the app's own calendar ---------- */
/* One control on every platform. The grid is always six weeks tall so paging
   through months never resizes the sheet under a thumb that is still moving. */
.calendar-panel { padding-bottom: calc(20px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
#dateModal .calendar-panel h2 { margin: 0 0 4px; font-size: 21px; font-weight: 900; letter-spacing: -.3px; }

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 0 6px;
}

.calendar-month { font-size: 17px; font-weight: 800; color: var(--ink); }

.calendar-step {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--line-2);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink-2);
}

.calendar-step:disabled { opacity: .35; }
.calendar-step svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.calendar-grid > div, .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-weekdays { margin-bottom: 4px; }
.calendar-weekdays span { padding: 6px 0; color: var(--ink-2); font-size: 12px; font-weight: 800; text-align: center; }

.calendar-day {
  aspect-ratio: 1;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.calendar-day:hover:not(:disabled) { background: var(--panel); }
/* A day from the neighbouring month is still selectable when it is inside the
   bounds — and it was painted --line-2 either way, which left a tappable October
   date fainter than a genuinely disabled one at opacity .3. Only the disabled
   ones recede now. */
.calendar-day.is-outside { color: var(--ink-3); font-weight: 600; }
.calendar-day.is-outside:disabled { color: var(--line-2); }
.calendar-day:disabled { opacity: .3; }
/* Today is outlined, the chosen day is filled: two different questions, so
   they must not answer with the same shape. */
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--brand-line); }
.calendar-day.is-selected { background: #19afe8; color: #fff; box-shadow: 0 3px 0 #0a97cd; }

.calendar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
#dateModal .calendar-actions .big { width: 100%; margin: 0; min-height: 52px; border-radius: 14px; background: #19afe8; color: #fff; box-shadow: 0 4px 0 #0a97cd; font-weight: 800; }
#dateModal .calendar-actions .ghost { width: 100%; margin: 0; min-height: 52px; }

@media (max-width: 340px) { .calendar-day { font-size: 15px; border-radius: 10px; } .calendar-grid > div, .calendar-weekdays { gap: 2px; } }

.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  min-height: 56px;
  font-weight: 800;
}

/* A switch rather than a tick box: it reads as a thing that is on, which is
   what these settings are, and it gives the row a right-hand edge to align to. */
.setrow input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  margin: 0;
  border-radius: 999px;
  background: var(--line-2);
  cursor: pointer;
  transition: background 0.18s var(--ease);
}

.setrow input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0000002e;
  transition: transform 0.18s var(--ease);
}

.setrow input[type="checkbox"]:checked {
  background: var(--brand);
}

.setrow input[type="checkbox"]:checked::after {
  transform: translateX(22px);
}

.setrow input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .setrow input[type="checkbox"],
  .setrow input[type="checkbox"]::after { transition: none; }
}

.installbox {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 14px 16px;
  border: 1.5px solid var(--brand-line);
  border-radius: var(--r);
  background: var(--brand-soft);
}

.installbox h3 {
  margin: 0 0 2px;
  font-size: 1rem;
  line-height: 1.4;
}

.installbox p {
  margin: 0;
  color: var(--brand-ink);
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- home stats ---------- */
/* Static cards carry a 1.5px stroke and no lip; only things you press get one. */
.goal {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.goal .ring {
  width: 56px;
  height: 56px;
  flex: none;
}

.goal .track {
  fill: none;
  stroke: var(--line-1);
  stroke-width: 9;
}

.goal .fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s var(--ease);
}

.goal.done .fill {
  stroke: var(--green);
}

.goal .xp {
  margin-left: auto;
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.goal .xp::before {
  content: "◆";
  margin-right: 5px;
  font-size: 0.8em;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.tile {
  background: var(--paper);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  padding: 14px 12px;
  text-align: left;
}

.tile b {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.tile:nth-child(1) b {
  color: var(--info);
}

.tile:nth-child(2) b {
  color: var(--brand-ink);
}

.tile:nth-child(3) b {
  color: var(--amber-text);
}

.tile span {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
}

/* ---------- mode cards ---------- */

.mode {
  background: var(--paper);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  padding: 16px;
  text-align: left;
  color: var(--ink);
  transition:
    transform 0.08s var(--ease),
    background 0.12s var(--ease);
}

.mode:active {
  transform: scale(0.985);
  background: var(--panel);
}

.mode .i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 10px;
  overflow: hidden;
}

.mode .i svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.mode .n {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  display: block;
}

.mode .c {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
  display: block;
}

.mode.q .i {
  background: var(--brand);
  box-shadow: 0 3px 0 var(--brand-lip);
}

.mode.f .i {
  background: var(--m-f);
  box-shadow: 0 3px 0 var(--m-f-lip);
}

.mode.l .i {
  background: var(--m-l);
  box-shadow: 0 3px 0 var(--m-l-lip);
}

.mode.v .i {
  background: var(--m-v);
  box-shadow: 0 3px 0 var(--m-v-lip);
}

.mode.q {
  border-color: var(--brand-line);
}