@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Greens and tan sampled directly from the logo */
  --pine: #39483A;          /* logo background green */
  --pine-dark: #2B372C;     /* deeper green for hovers and headings */
  --brass: #A89878;         /* logo tan */
  --brass-deep: #857552;    /* darker tan where contrast is needed */

  --bg: #F6F4ED;
  --card: #FFFFFF;
  --ink: #262E27;
  --ink-soft: #5A655B;
  --line: #E3DFD3;
  --slate: #7C93A3;
  --danger: #9E4630;

  /* Room key - earthy tones that sit with the green and tan */
  --tag-1: #A85A3E;  /* terracotta */
  --tag-2: #4F7A6B;  /* sage */
  --tag-3: #75577F;  /* plum */
  --tag-4: #B08A3C;  /* ochre */
  --tag-5: #43708C;  /* denim */
  --tag-6: #8A5A5F;  /* dusty rose */
  --tag-7: #5D6B58;  /* moss */

  --radius: 10px;

  --today-bg: #E9F1EA;      /* today's calendar cell */

  /* logo 32px + 14px padding top and bottom + 1px border */
  --topnav-h: 61px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--pine-dark);
  font-weight: 600;
  margin: 0 0 0.4em;
}

.mono { font-family: 'IBM Plex Mono', monospace; }
a { color: var(--pine); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }

.topnav {
  /* Same hex the logo's background was flattened to, so the image edges
     are invisible against the bar. */
  background: #39483A;
  border-bottom: 1px solid #2B372C;
  margin-bottom: 28px;
}
.topnav-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topnav-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-link { text-decoration: none; flex-shrink: 0; display: flex; align-items: center; }
.brand-img { height: 32px; width: auto; display: block; }

.house-count {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(246, 244, 237, 0.1);
  border: 1px solid rgba(246, 244, 237, 0.2);
  color: #EFEBE0;
  border-radius: 999px; padding: 3px 11px 3px 9px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.house-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass); flex-shrink: 0;
}

.nav-panel { display: flex; align-items: center; gap: 22px; flex: 1; justify-content: space-between; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { text-decoration: none; color: rgba(246, 244, 237, 0.72); font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: #F6F4ED; }
.nav-links a.active { color: var(--brass); }
.nav-user { font-size: 13px; color: rgba(246, 244, 237, 0.7); display: flex; gap: 10px; align-items: center; }
.nav-user .btn.secondary {
  color: #F6F4ED; border-color: rgba(246, 244, 237, 0.4); background: transparent;
}
.nav-user .btn.secondary:hover { background: rgba(246, 244, 237, 0.1); }

/* Burger: hidden on desktop, drives the menu via :checked on mobile */
.nav-toggle {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; overflow: hidden;
}
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.nav-burger { display: none; }

@media (max-width: 820px) {
  .topnav { margin-bottom: 18px; }
  .topnav-inner { padding: 12px 16px; flex-wrap: wrap; }

  .brand-img { height: 26px; }
  .house-count { font-size: 11.5px; padding: 3px 9px 3px 7px; gap: 5px; }
  .topnav-left { gap: 9px; }

  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin: -10px -10px -10px 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: #E6E1D4; transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle:checked + .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-panel { display: none; }
  .nav-toggle:checked ~ .nav-panel {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; gap: 0; margin-top: 10px;
    border-top: 1px solid rgba(246, 244, 237, 0.18); padding-top: 6px;
  }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a {
    padding: 13px 4px; font-size: 16px;
    border-bottom: 1px solid rgba(246, 244, 237, 0.14);
  }
  .nav-links a.active { color: var(--brass); font-weight: 600; }
  .nav-user {
    justify-content: space-between; padding: 14px 4px 6px; font-size: 14px;
  }
  .nav-user .btn { padding: 9px 16px !important; font-size: 14px !important; }
}

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

label { display:block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
input, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px;
  background: #FCFBF8; font-family: inherit; font-size: 14px; color: var(--ink);
}
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; }
.field { margin-bottom: 14px; }
.btn {
  display: inline-block; background: var(--pine); color: #fff; border: none; border-radius: 7px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--pine-dark); }
.btn.secondary { background: transparent; color: var(--pine); border: 1px solid var(--pine); }
.btn.danger { background: var(--danger); }
.hint { color: var(--ink-soft); font-size: 13px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px;
  border-radius: 5px 12px 12px 5px; color: #fff; font-size: 12.5px; font-weight: 500;
  white-space: nowrap; position: relative;
}
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); flex-shrink: 0; }
.tag-1 { background: var(--tag-1); } .tag-2 { background: var(--tag-2); }
.tag-3 { background: var(--tag-3); } .tag-4 { background: var(--tag-4); }
.tag-5 { background: var(--tag-5); } .tag-6 { background: var(--tag-6); }
.tag-7 { background: var(--tag-7); } .tag-none { background: #B8B2A2; }

.room-list { display: flex; flex-direction: column; gap: 10px; }
.room-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 4px; border-bottom: 1px dashed var(--line);
}
.room-row:last-child { border-bottom: none; }
.room-meta { font-size: 12.5px; color: var(--ink-soft); }

.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align:center; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 4px; }
.cal-cell { min-height: 92px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #FCFBF8; }
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.cal-cell .daynum { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; color: var(--ink); }

/* how many people are staying that night */
.daycount {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500;
  color: var(--ink-soft); background: rgba(57, 72, 58, 0.08);
  border-radius: 999px; padding: 0 5px; line-height: 16px; flex-shrink: 0;
}
.daycount.full { background: var(--brass); color: #fff; }
.cal-cell.past .daycount { opacity: 0.45; }
.cal-cell.today {
  /* Deeper tan and a heavier stroke, so today reads from across the grid
     without needing a louder fill. */
  border-color: var(--brass-deep); border-width: 3px;
  background: var(--today-bg);
}
.cal-cell.today .daynum { color: var(--pine-dark); font-weight: 700; }
.cal-tags { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Calendar tags wrap instead of forcing the column wide */
.cal-tags .tag {
  font-size: 10.5px; padding: 3px 7px 3px 5px;
  max-width: 100%; min-width: 0;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
  align-items: flex-start;
}
.cal-tags .tag::before { margin-top: 3px; }

.conflict-banner {
  background: #FBEDE8; border: 1px solid var(--danger); color: var(--danger);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px;
}

.pref-list { list-style: none; margin: 0; padding: 0; }
.pref-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: 8px; background: #FCFBF8; cursor: grab;
}
.pref-item .handle { color: var(--ink-soft); }

/* Reorder buttons - the only way to do this on a touch screen */
.pref-move { display: flex; gap: 4px; flex-shrink: 0; }
.pref-move button {
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--pine-dark);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.pref-move button:hover { background: #F1EFE8; border-color: var(--brass); }
.pref-move button:active { background: #E7E4DA; }

@media (max-width: 820px) {
  /* the drag handle would imply something that doesn't work on touch */
  .pref-item .handle { display: none; }
  .pref-move button { width: 40px; height: 40px; font-size: 17px; }
}
/* room name with its bed description underneath */
/* align-items: flex-start stops the name tag stretching to the width of
   the description beneath it - a flex column stretches children by default */
.pref-room { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pref-rank { font-family: 'IBM Plex Mono', monospace; color: var(--brass-deep); font-weight: 600; width: 20px; }

table.plain { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.plain th, table.plain td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
table.plain th { color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }

.empty-state { text-align:center; color: var(--ink-soft); padding: 30px 10px; }

/* ---- Editable people rows (admin) ---- */
/* Column headings appear once in .person-head; each row carries only its
   inputs. The grid has real minimum widths, so on a narrow window the
   whole table scrolls sideways rather than squashing the fields. */
.person-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.person-head,
.person-row {
  display: grid;
  grid-template-columns:
    minmax(130px, 1.2fr) minmax(150px, 1.6fr) 122px 104px 138px 82px;
  gap: 8px;
  align-items: center;
}
.person-head {
  padding: 0 12px 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.person-list { display: flex; flex-direction: column; gap: 8px; }
.person-row {
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #FCFBF8;
}
.person-field { min-width: 0; }
.person-field input, .person-field select { padding: 7px 9px; font-size: 13px; }
.person-delete-btn { width: 100%; padding: 8px 0; font-size: 13px; }

@media (max-width: 820px) {
  .person-head { display: none; }
  .person-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  }
  .person-scroll { overflow-x: visible; }
  .person-delete-btn { align-self: flex-start; width: auto; padding: 8px 16px; }
}

/* Neutral confirmation banner (the red one is .conflict-banner) */
.notice-banner {
  background: #EDF3EE; border: 1px solid var(--tag-2); color: var(--pine-dark);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px;
}

/* "Whose preferences?" picker on the profile page */
.subject-picker { display: flex; align-items: flex-end; gap: 10px; margin: 0; }

/* ---- First-login wizard ---- */
.wizard { max-width: 640px; margin: 20px auto 0; }
.wizard-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.wizard-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.wizard-step.current { color: var(--pine-dark); }
.wizard-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--line); color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
}
.wizard-step.current .wizard-num { background: var(--pine); color: #fff; }
.wizard-step.done .wizard-num { background: var(--tag-2); color: #fff; }
.wizard-line { flex: 1; height: 1px; background: var(--line); }
@media (max-width: 600px) {
  .wizard-steps { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wizard-line { display: none; }
}

/* ---- Other phone-sized tweaks ---- */
@media (max-width: 820px) {
  .container { padding: 0 16px 40px; }
  .card { padding: 16px; }
  h1 { font-size: 24px; }

  /* Wide tables scroll sideways instead of squashing the page */
  table.plain { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Calendar: smaller cells and labels so a week still fits across */
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 62px; padding: 4px; border-radius: 6px; }
  .cal-tags .tag { font-size: 9px; padding: 2px 5px 2px 4px; }
  .cal-tags .tag::before { width: 5px; height: 5px; margin-top: 2px; }
  .cal-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* ---- Family members on the booking form ---- */
.family-list {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 10px; background: #FCFBF8;
}
.family-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; margin: 0; cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--ink);
}
.family-item.family-all { border-bottom: 1px solid var(--line); }
.family-item input { flex-shrink: 0; }
@media (max-width: 820px) {
  .family-item { padding: 12px 2px; }
}

/* "Stay with parents" nested under a child's checkbox */
.family-entry { display: flex; flex-direction: column; }
.family-item.family-sub {
  padding: 2px 2px 8px 30px; font-size: 13px; color: var(--ink-soft);
}
.family-item.family-sub input:disabled + span { opacity: 0.45; }
.family-item.family-sub input:disabled { opacity: 0.45; cursor: not-allowed; }

/* Only shown on phones, where the grid scrolls sideways */
.cal-hint { display: none; font-size: 12px; color: var(--ink-soft); margin: 0 0 8px; }

@media (max-width: 600px) {
  /* Below this width seven readable columns no longer fit, so the grid
     scrolls inside its card rather than stretching the page. */
  .cal-grid { min-width: 500px; }
  .cal-hint { display: block; }
}

/* Past days: muted so the eye skips to what's still to come */
.cal-cell.past { background: #EFECE3; border-color: #E0DBCE; }
.cal-cell.past .daynum { color: #9A948A; }
.cal-cell.past .tag { opacity: 0.5; filter: saturate(0.55); }
.cal-cell.past.today { border-color: var(--brass); background: var(--today-bg); }

/* ---- Sticky room key on the calendar ---- */
.cal-key {
  display: flex; flex-wrap: wrap; gap: 6px;
  position: sticky; z-index: 5;
  background: var(--bg);
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cal-key .tag { font-size: 11.5px; padding: 3px 9px 3px 6px; }

@media (max-width: 600px) {
  /* One scrollable line rather than three wrapped rows, so the sticky
     bar doesn't eat the screen on a phone. */
  .cal-key {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 0; gap: 5px;
  }
  .cal-key .tag { flex: 0 0 auto; font-size: 11px; }
}

/* ---- Editable stays on the dashboard ---- */
/* Column labels appear once in .stay-head on wide screens; each row then
   only carries its inputs. Below 820px the head is dropped and the inline
   .field-label spans take over. */
.stay-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 150px 150px 92px;
  gap: 10px;
  padding: 0 12px 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft);
}


.stay-list { display: flex; flex-direction: column; gap: 10px; }

.stay-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 150px 150px 92px;
  gap: 8px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #FCFBF8;
}
.stay-who {
  grid-column: 1; grid-row: 1 / span 2;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
/* Sits directly below the two date fields */
.stay-pin {
  grid-column: 2 / 4; grid-row: 2;
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 13px; font-weight: 400; color: var(--ink-soft); cursor: pointer;
}
.stay-arrive { grid-column: 2; grid-row: 1; }
.stay-depart { grid-column: 3; grid-row: 1; }
.stay-cancel { grid-column: 4; grid-row: 1 / span 2; align-self: center; width: 100%; padding: 9px 0; }
.stay-field input { padding: 7px 9px; font-size: 13px; }
.field-label { display: none; }

@media (max-width: 820px) {
  .stay-head { display: none; }
  .stay-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  }
  .field-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--ink-soft); margin-bottom: 3px;
  }
  .stay-cancel { align-self: flex-start; }
}

/* ---- Lock a room in across a stay (admin) ---- */
.lock-list { display: flex; flex-direction: column; gap: 10px; }
.lock-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #FCFBF8;
}
.lock-who { flex: 0 0 230px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.lock-room-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lock-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; flex: 1 1 auto; min-width: 0; }
.lock-field { flex: 1 1 130px; min-width: 118px; }
.lock-field.lock-room { flex: 1.4 1 170px; min-width: 140px; }
.lock-field label { font-size: 11px; margin-bottom: 3px; }
.lock-field input, .lock-field select { padding: 7px 9px; font-size: 13px; }
.lock-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.lock-actions .btn { padding: 8px 14px; font-size: 13px; }
.lock-badge {
  display: inline-block; background: #EFE7D5; border: 1px solid var(--brass);
  color: var(--brass-deep); border-radius: 4px; padding: 0 6px; font-size: 11.5px; font-weight: 600;
}
@media (max-width: 820px) {
  .lock-row { flex-direction: column; align-items: stretch; }
  .lock-who { flex: 0 0 auto; }
  .lock-form { flex-direction: column; align-items: stretch; }
  .lock-field, .lock-field.lock-room { flex: 1 1 100%; }
  .lock-actions .btn { flex: 1; }
}

/* ---- Manage house: sticky section menu ---- */
.page-layout {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.page-nav {
  position: sticky; top: calc(var(--topnav-h) + 16px);
  display: flex; flex-direction: column; gap: 2px;
}
.page-nav a {
  display: block; padding: 8px 12px;
  border-left: 3px solid transparent; border-radius: 0 7px 7px 0;
  text-decoration: none; color: var(--ink-soft);
  font-size: 13.5px; font-weight: 500;
}
.page-nav a:hover { background: rgba(57, 72, 58, 0.06); color: var(--pine-dark); }
.page-nav a.current {
  background: var(--card); border-left-color: var(--brass);
  color: var(--pine-dark); font-weight: 600;
}
/* Only one section on screen at a time, once JS has taken over */
.page-sections.tabbed > .card { display: none; }
.page-sections.tabbed > .card.active { display: block; }

@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; gap: 12px; }
  .page-nav {
    top: var(--topnav-h); z-index: 4;
    flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 6px; padding: 8px 0; margin-bottom: 4px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .page-nav a {
    flex: 0 0 auto; white-space: nowrap;
    border-left: none; border-bottom: 2px solid transparent; border-radius: 6px;
    padding: 7px 11px;
  }
  .page-nav a.current { border-left: none; border-bottom-color: var(--brass); }
}


/* ---- Keep the header in view while scrolling ---- */
.topnav { position: sticky; top: 0; z-index: 20; }

/* The other sticky bits sit below the header rather than under it. They all
   read --topnav-h, which shrinks with the header on small screens. */
.cal-key { top: var(--topnav-h); }
.page-sections .card { scroll-margin-top: calc(var(--topnav-h) + 16px); }

@media (max-width: 820px) {
  /* logo 26px + 12px padding top and bottom + 1px border */
  :root { --topnav-h: 51px; }
}

/* ---- Filter a list by name ---- */
.filter-box { margin-bottom: 12px; max-width: 280px; }
.filter-box input {
  padding: 8px 11px; font-size: 13.5px;
  background: #FCFBF8;
}
/* The rows set their own display, which beats the browser's [hidden]
   rule, so hiding has to be spelled out. */
.stay-row[hidden], .lock-row[hidden] { display: none; }
.filter-empty { padding: 18px 10px; }

/* Calendar month navigation */
.cal-nav { display: flex; gap: 6px; flex-wrap: wrap; }

/* Weeks already behind us are collapsed until asked for */
.cal-grid.hide-past .cal-cell.week-past { display: none; }


/* Readable long-form text (How it works) */
.prose { margin-bottom: 16px; }
.prose h2 { margin: 0 0 10px; }
.prose p { line-height: 1.6; margin: 0 0 12px; color: var(--ink); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0; padding-left: 20px; }
.prose li { line-height: 1.6; margin-bottom: 9px; }
.prose li:last-child { margin-bottom: 0; }
.prose .hint { margin-top: 12px; }

@media (max-width: 600px) {
  .daycount { font-size: 9.5px; padding: 0 4px; line-height: 14px; }
}