/*
  CSS = LOOKS. Same clean "MinimaList" style as the to-do app, so the two
  parts of Cala feel like one app. Reused ideas: the white phone-style
  card, --ink / --faded colours, the colour swatches and the bottom modal.
  New here: the calendar bubbles, the month grid, and the agenda list.
*/

:root {
  --ink: #111111;
  --faded: #b8b8b8;
  --line: #ececec;
  --bg: #ffffff;
  --accent: #e0533d;          /* the red used for "today", like Apple's calendar */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Hide scrollbars everywhere — content still scrolls, the bar just doesn't
   show, keeping the card clean. */
* {
  scrollbar-width: none;                        /* Firefox */
}
*::-webkit-scrollbar {                          /* Chrome / Safari */
  display: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f2f2f2;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px;
}

.screen {
  background: var(--bg);
  width: 100%;
  max-width: 420px;
  /* Fill the window (minus the body's 24px padding top+bottom) but never
     grow past it — so long lists scroll INSIDE the card instead of
     stretching it. min-height keeps it usable on very short windows. */
  height: calc(100vh - 48px);
  min-height: 640px;
  border-radius: 28px;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Let the flex children (e.g. the agenda) shrink below their content so
     their own overflow-y scrolling kicks in, rather than pushing the card
     taller. Without this, flex items refuse to shrink past their content. */
  min-height: 0;
  /* The event form has no inner scroll region, so let the whole view scroll
     if it ever outgrows the card. (The month view's agenda scrolls on its
     own, so this stays dormant there.) */
  overflow-y: auto;
}
[hidden] {
  display: none !important;
}

/* ---- Full-page slide flow ---- */
/* While moving between full-page screens, the outgoing and incoming views
   briefly overlap inside the card and slide sideways. These rules only switch
   on during a slide (the .sliding class on .screen), so the resting layout is
   completely untouched. */
.screen.sliding {
  position: relative;   /* positioning context for the sliding overlay */
  overflow: hidden;     /* clip the page that's sliding off the edge */
}
/* Only the MOVING page becomes an overlay; the page underneath keeps its
   normal layout, so nothing reflows mid-slide. An opaque background hides
   what's behind it while it travels. */
.view.slide-over {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  /* inset:0 pins the overlay to the screen's padding box, which would place
     its content flush to the edge — 18px higher and 20px further left than the
     view sits in normal flow. That mismatch made the page "drop" the moment the
     slide finished. Inheriting the screen's padding keeps the content in the
     exact same spot during and after the slide, so it lands cleanly. */
  padding: inherit;
}
.view.slide-anim {
  /* ease-out curve: quick to start, gently settling — feels less abrupt */
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .view.slide-anim { transition: none; }
}

/* ---- Shared icon button (same as the to-do app) ---- */
.iconbtn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iconbtn:hover {
  background: #f3f3f3;
}
.iconbtn svg {
  width: 22px;
  height: 22px;
}
/* ★ Today, filled black while the merged all-calendars Day view is showing.
   The star's outline is already --ink, so filling it makes a solid star.
   Overrides the SVG's inline fill="none" (CSS beats presentation attributes). */
.iconbtn--star-on svg {
  fill: var(--ink);
}

/* ---- Top icon row ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* six tools spread evenly across the bar */
  gap: 6px;
  padding: 2px 0 12px;
}

/* ---- Calendar bubbles (scroll sideways) ---- */
.bubbles {
  flex: 0 0 auto;
  min-height: 64px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: none;         /* hide the scrollbar (Firefox) */
}
.bubbles::-webkit-scrollbar {
  display: none;                 /* hide the scrollbar (Chrome/Safari) */
}
.bubble {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  /* White first-letter with a dark outline, matching the icons. */
  -webkit-text-stroke: 1.2px var(--ink);
  paint-order: stroke fill;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease;
}
.bubble:active {
  transform: scale(0.94);
}
/* ---- Material Icons, vendored locally (font in assets/) ---- */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('assets/MaterialIcons-Regular.ttf') format('truetype');
}
/* Base class — Google's CDN normally provides this; we host it ourselves.
   The 'liga' settings make the font turn a name like "home" into a glyph. */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* An icon chosen for the calendar sits inside the coloured circle.
   White glyph with a black outline, so it reads on any bubble colour. */
.bubble .material-icons {
  font-size: 24px;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 1.2px var(--ink);
  paint-order: stroke fill;     /* outline sits outside the white fill */
}
/* "No colour" calendars: a plain white circle with a grey ring. The letter /
   icon keeps the white-with-outline look so it matches coloured bubbles. */
.bubble--plain {
  background: #fff;
  border-color: var(--line);
}
/* The active calendar gets a dark ring with a white gap. */
.bubble.active {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px #fff;
}
/* The "add a calendar" bubble: a dashed circle with a +. */
.bubble--add {
  background: #fff;
  border: 2px dashed var(--faded);
  color: var(--faded);
  -webkit-text-stroke: 0;        /* the "+" stays clean, no outline */
  font-weight: 300;
  font-size: 26px;
}

/* ---- Month heading + arrows ---- */
.monthbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 10px;
}
.monthbar__title {
  flex: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
}

/* ---- Weekday header ---- */
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--faded);
  padding-bottom: 6px;
}

/* ---- The month grid ---- */
.calgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  touch-action: pan-y;           /* let US handle left/right swipes */
}
/* One day cell. */
.day {
  position: relative;
  aspect-ratio: 1 / 1;           /* keep cells square */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.day:hover {
  background: #f5f5f5;
}
/* Days that belong to the previous / next month look faint. */
.day--muted {
  color: var(--faded);
}
/* The number sits in a round badge (like the date picker). Today gets a
   faint ring; the selected day gets a solid fill — see below / JS. */
.day__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 1;
}
/* Today, when it isn't the selected day: a faint ring around the number. */
.day--today:not(.day--selected) .day__num {
  box-shadow: inset 0 0 0 1.5px var(--faded);
}
/* Little coloured dots under a day that has events. */
.day__dots {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  height: 5px;
}
.day__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
/* A done event's dot fades, so a finished day looks lighter. */
.day__dot--done {
  opacity: 0.35;
}

/* ---- Year view: 12 mini-months ---- */
/* The year number, current-month name and today dot are tinted in the active
   calendar's colour (--cal-color, set in renderYear), falling back to black
   (--ink) for a "no colour" calendar. */
.monthbar__title--year {
  color: var(--cal-color, var(--ink));
  font-weight: 700;
}
/* Three columns of mini-months; scrolls inside the card if it's too tall. */
.year-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 12px;
  padding: 4px 2px 8px;
  touch-action: pan-y;             /* let US handle left/right swipes */
}
.minimonth {
  cursor: pointer;
  user-select: none;
}
/* Month name above its little grid. The current month shows in red. */
.minimonth__name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.minimonth__name--current {
  color: var(--cal-color, var(--ink));
}
/* Seven columns of tiny day numbers (no weekday header). */
.minimonth__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.minimonth__day,
.minimonth__blank {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
/* Today: a small filled circle in the calendar's colour (black if the
   calendar has no colour) with a white number. */
.minimonth__day--today {
  background: var(--cal-color, var(--ink));
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}

/* ---- Dashed divider ---- */
.divider {
  border-top: 1px dashed var(--line);
  margin: 14px 0 10px;
}

/* ---- Agenda (the tapped day's events) ---- */
.agenda-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 0 2px 6px;
}
.agenda {
  list-style: none;
  flex: 1;
  overflow-y: auto;
}
.agenda-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: var(--bg);          /* covers the hint that sits behind it */
  position: relative;
  user-select: none;
  touch-action: pan-y;            /* we handle left/right; keep up/down scroll */
}
.agenda-item:hover {
  background: #fafafa;
}

/* A soft hint that sits BEHIND a row as you swipe it (says "Done"). */
.agenda-item__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--faded);
  font-size: 13px;
  background: #f5f5f5;
  border-radius: 4px;
  z-index: -1;
}

/* A completed event: strike through the title and fade the row. */
.agenda-item.done .agenda-item__title {
  text-decoration: line-through;
  color: var(--faded);
}
.agenda-item.done .agenda-item__time {
  color: var(--faded);
}
.agenda-item.done .agenda-item__bar {
  opacity: 0.35;
}
/* The little coloured bar on the left of an event row (the ▯ in the sketch). */
.agenda-item__bar {
  width: 4px;
  align-self: stretch;
  min-height: 34px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--faded);
}
/* Task marker in the agenda: a hollow circle (vs. the event's bar). */
.agenda-item__dot {
  width: 12px;
  height: 12px;
  align-self: center;
  border: 2px solid var(--faded);
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.agenda-item.done .agenda-item__dot { opacity: 0.35; }
.agenda-item__body {
  flex: 1;
}
.agenda-item__title {
  font-size: 16px;
}
.agenda-item__time {
  font-size: 12px;
  color: var(--faded);
  margin-top: 2px;
}
/* The place under an agenda item — pin icon + text, muted like the time. */
.agenda-item__loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--faded);
  margin-top: 2px;
}
.agenda-item__loc svg { width: 13px; height: 13px; flex-shrink: 0; }
/* The "2/5 attending" pill under an event in the agenda. */
.agenda-item__tally {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  color: #8a8a8a;
  background: #f3f3f3;
  border-radius: 10px;
  padding: 2px 8px;
}
.agenda-item.done .agenda-item__tally {
  color: var(--faded);
  background: #f3f3f3;
}

.empty-note {
  color: var(--faded);
  text-align: center;
  padding: 28px 0;
  font-size: 15px;
}

/* ---- Detail header (event view) — same as the to-do app ---- */
.detailbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 12px;
}
/* Pushes the right-hand action buttons (delete, save) to the far right. */
.detailbar__spacer {
  flex: 1;
}

/* The title of the event you're editing — the same centred, tappable label the
   To-Do app's task screen wears. Takes the spacer's place, so it centres. */
.detailbar__title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detailbar__title:hover {
  background: #f3f3f3;
}

/* The small round save check in the top-right corner. */
.roundsave {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roundsave svg {
  width: 20px;
  height: 20px;
}
.roundsave:active {
  opacity: 0.85;
}

/* Text button in a header (e.g. "Clear" on the event screen). */
.textbtn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--faded);
  padding: 6px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}
.textbtn:hover {
  background: #f3f3f3;
  color: var(--ink);
}

/* ---- Event form fields ---- */
.bigtitle {
  width: 100%;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 22px;
  padding: 8px 2px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.bigtitle::placeholder {
  color: var(--faded);
}

/* A labelled row: a name on the left, controls on the right. */
.fieldrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  min-height: 56px;
}
/* Repeat summary line on the event form (mirrors the to-do app). */
.event-meta {
  color: var(--faded);
  font-size: 13px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}
.fieldrow__label {
  font-size: 16px;
  width: 70px;
  flex-shrink: 0;
}
/* Starts / Ends are tappable rows now (they open the calm picker). */
.fieldrow--btn {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
}
.fieldrow__value {
  flex: 1;
  text-align: right;
  font-size: 16px;
  color: var(--ink);
}

/* ---- Calm calendar + time steppers (shared with the to-do app) ---- */
.picker__title { margin-top: 44px; font-size: 17px; font-weight: 600; }
/* Add page: put the "Add" title in the header bar, centered at the top, so the
   page doesn't visually settle lower after it slides in. The three columns
   (1fr / auto / 1fr) keep the back arrow at the left while the title stays
   centered across the whole bar. */
.detailbar--center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.detailbar--center .picker__title { margin: 0; }
.cal-head { display: flex; align-items: center; margin-top: 16px; }
/* The month heading is a button: tap it to open the month/year wheels.
   Reset the button chrome so it still reads as plain bold text. */
.cal-head__month {
  flex: 1;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* A little down-caret that flips up while the wheels are open. */
.cal-head__month::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--faded);
  transition: transform 0.18s ease;
}
.cal-head__month.open::after { transform: rotate(180deg); }
.cal-head__nav { display: flex; gap: 4px; }

/* The month + year drum-rollers that replace the grid when the heading is
   tapped. Two wheels, centred, with a Done link underneath. */
.my-panel { margin-top: 12px; }
.my-wheels { display: flex; justify-content: center; gap: 24px; }
.my-done {
  display: block;
  margin: 16px auto 2px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 12px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--faded); padding: 6px 0; }
.cal-day {
  aspect-ratio: 1;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* The number sits in a 30px round badge — same as the month grid's .day__num,
   so the picker's circles match the calendar exactly. */
.cal-day__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 1;
}
.cal-day:hover .cal-day__num { background: #f3f3f3; }
.cal-day.today:not(.selected) .cal-day__num { box-shadow: inset 0 0 0 1.5px var(--faded); }

.time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.time-row__label { font-size: 15px; }
.time-steppers { display: flex; align-items: center; gap: 8px; }
.time-colon { font-size: 20px; color: var(--faded); }
/* A drum-roller wheel you spin to pick a value (same as the to-do app).
   Height is set inline by JS (rows × row-height). */
.wheel {
  position: relative;
  width: 62px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.wheel:active { cursor: grabbing; }
.wheel__list { will-change: transform; }
.wheel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--faded);
  white-space: nowrap;
  transition: color 0.15s ease, transform 0.15s ease;
}
.wheel__item.is-active {
  color: var(--ink);
  font-weight: 600;
  transform: scale(1.08);
}
.wheel__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* A simple iOS-style on/off switch built from a checkbox. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.switch:checked {
  background: var(--ink);
}
.switch:checked::after {
  transform: translateX(18px);
}

/* Note row (same as the to-do app). */
.addrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}
.addrow__icon {
  opacity: 0.45;
  flex-shrink: 0;
}
.addrow__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.addrow__note {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  resize: none;
}
.addrow__note::placeholder {
  color: var(--faded);
}
.addrow__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
}
.addrow__input::placeholder {
  color: var(--faded);
}

/* ---- Event subtasks (a per-day checklist on the event form) ---- */
.subtasks {
  list-style: none;
}
.subtask {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  user-select: none;
  cursor: grab;                       /* grab the whole row to reorder */
}
.subtask:active {
  cursor: grabbing;
}
/* The square checkbox; fills in when done for this day. */
.subtask__box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--faded);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.subtask.done .subtask__box {
  background: var(--ink);
  border-color: var(--ink);
}
/* The ghost box next to the "Add subtask" field — just decoration. */
.subtask__box--ghost {
  cursor: default;
}
.subtask__text {
  flex: 1;
  cursor: pointer;
}
.subtask.done .subtask__text {
  color: var(--faded);
  text-decoration: line-through;
}
.subtask__del {
  border: none;
  background: none;
  color: var(--faded);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.subtask__del:hover {
  color: var(--accent);
}
/* The subtask progress count on an agenda row. */
.agenda-item__subcount {
  margin-top: 2px;
  color: var(--faded);
  font-size: 13px;
}
/* Drag-to-reorder a subtask: the ≡ grip, the drop marker, the dragged row. */
.drag-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--faded);
  cursor: grab;
  touch-action: none;                 /* don't scroll while grabbing the handle */
  padding: 0 2px;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 20px; height: 20px; }
.subtask.dragging { opacity: 0.4; }
.drop-line {
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  margin: 0 2px;
}

/* Saved location — a tappable pin + place row that opens Google Maps.
   Mirrors the .addrow look so it sits cleanly above Attending. */
.location-display {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 2px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
}
.location-display__icon {
  opacity: 0.45;
  flex-shrink: 0;
  display: flex;
}
.location-display__icon svg { width: 18px; height: 18px; display: block; }
.location-display__text { flex: 1; }

/* ---- Attending: @-tag people on an event ---- */
.attend__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--faded);
  padding: 12px 2px 0;
}
.attend__count {
  font-size: 13px;
  font-weight: 600;
  color: #2f6fed;
}
.attend__hint {
  font-size: 12px;
  color: var(--faded);
  padding: 6px 2px 0;
}
/* A quieter sub-heading ("Members") under the "Sharing" head. */
.attend__head--sub {
  padding-top: 14px;
}

/* ---- Sharing: the owner card + member rows ---- */
.owner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafafa;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.owner-card:active { background: #f0f0f0; }

.member-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}
.member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
}
/* A round colour dot standing for a person — tappable on member rows. */
.member__color {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}
.member__label {
  flex: 1;
  font-size: 14px;
  color: var(--ink);
}
.member__role {
  font-size: 11px;
  color: var(--faded);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.member__role--owner { color: var(--ink); }
.member__x {
  border: none;
  background: none;
  color: var(--faded);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.member__x:hover { color: var(--ink); }

/* The inline owner editor (name / @handle / colour). */
.owner-edit {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.owner-edit__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.owner-edit__row .addrow__input {
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  min-width: 0;
}
.owner-edit__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.owner-edit__cancel {
  border: none;
  background: none;
  color: var(--faded);
  font: inherit;
  cursor: pointer;
}

/* The add-member row: name + @handle + Add. */
.addrow--member { gap: 10px; }
/* Let the two text inputs shrink inside the flex row. Without min-width:0 they
   keep their default intrinsic width and overflow, pushing Add off the card. */
.addrow--member .addrow__input { min-width: 0; }
.addrow__add {
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
}
.addrow__add:active { opacity: 0.85; }

/* The honest "Invite someone…" stub button. */
.modal__invite {
  width: 100%;
  margin-top: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}
.modal__invite:active { background: #f3f3f3; }
/* A member chip on the event acts as a toggle: filled = going, grey = not. */
.chip--toggle {
  cursor: pointer;
  user-select: none;
}
.chip--toggle:not(.chip--on) {
  background: #f3f3f3;
  color: var(--faded);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 2px 0;
}
.chips:empty {
  padding: 0;                     /* no gap when there are no people yet */
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef3ff;
  color: #2f6fed;
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 13px;
}
.chip__x {
  cursor: pointer;
  opacity: 0.6;
  font-size: 15px;
  line-height: 1;
}
.chip__x:hover {
  opacity: 1;
}

/* ---- Colour swatches (same as the to-do app) ---- */
.color-row {
  display: flex;
  gap: 12px;
  padding: 14px 2px;
  flex-wrap: wrap;
}
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s ease;
}
.swatch:hover {
  transform: scale(1.1);
}
.swatch.selected {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px #fff;
}
.swatch--none {
  background: #fff;
  border-color: var(--faded);
  color: var(--faded);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
}
.swatch--custom {
  background: conic-gradient(
    #e0533d, #f5a623, #1f9d55, #2f6fed, #8e44ad, #e84393, #e0533d
  );
}

/* ---- Calendar pop-up: live preview, colour & icon pickers ---- */
/* Centred preview bubble at the top of the pop-up (clears the ✕ close). */
.cal-preview {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.cal-preview .bubble {
  width: 56px;
  height: 56px;
  font-size: 22px;
  cursor: default;
}
.cal-preview .bubble .material-icons {
  font-size: 30px;
}
/* With the preview on top, the name field needs less of its own top gap. */
#cal-modal-form .modal__input {
  margin-top: 14px;
}
.cal-pick {
  margin-top: 16px;
}
.cal-pick__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--faded);
  margin-bottom: 2px;
}
/* The colour row inside the pop-up shouldn't carry the event form's padding. */
.cal-pick .color-row {
  padding: 8px 2px 0;
}

/* The "Choose icon" button: shows the current icon (or "None") + a hint. */
.icon-choose {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: #f3f3f3;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
}
.icon-choose__current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--faded);
}
.icon-choose__current .material-icons {
  font-size: 22px;
  color: var(--ink);
}
.icon-choose__hint {
  color: var(--faded);
  margin-left: auto;
}

/* A taller card for the searchable icon grid. */
.modal__card--tall {
  min-height: 60vh;
}
.icon-search {
  margin-top: 12px;
}
.icon-none-row {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--faded);
}
/* Category tabs — a horizontal strip you can flick through. */
.icon-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scrollbar-width: none;
}
.icon-tabs::-webkit-scrollbar {
  display: none;
}
.icon-tab {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--faded);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.icon-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* The results grid scrolls; each cell is a tappable icon. */
.icon-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
  margin-top: 12px;
  max-height: 42vh;
  overflow-y: auto;
}
.icon-pick {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.icon-pick:hover {
  transform: scale(1.08);
  background: #f7f7f7;
}
.icon-pick .material-icons {
  font-size: 24px;
}
.icon-pick.selected {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--ink);
}

/* ---- The options toolbar (same look as the to-do app) ---- */
.addtoolbar {
  display: flex;
  gap: 6px;
  margin-top: auto;             /* push toward the bottom of the screen */
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.addtoolbar__btn {
  flex: 1;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
  padding: 10px 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addtoolbar__btn svg {
  width: 23px;
  height: 23px;
}
.addtoolbar__btn:hover {
  background: #f3f3f3;
}

/* The big Save button at the bottom of the event form. */
/* ---- Pop-up (modal) — same as the to-do app ---- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal__card {
  background: #fff;
  width: 100%;
  max-width: 420px;
  border-radius: 24px 24px 0 0;
  padding: 22px;
  position: relative;
  min-height: 220px;
}
.modal__close {
  position: absolute;
  top: 14px;
  left: 14px;
  /* The form below is positioned too (the @-tag dropdown makes it so) and comes
     later in the DOM, so without this it paints over the ×'s lower half and
     swallows the tap. */
  z-index: 1;
}
.modal__input {
  width: 100%;
  margin-top: 44px;
  background: #f3f3f3;
  border: none;
  outline: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  font-family: inherit;
}
.modal__input::placeholder {
  color: var(--faded);
}
.modal__save {
  width: 100%;
  margin-top: 22px;
  border: none;
  border-radius: 30px;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  padding: 16px;
  cursor: pointer;
}
.modal__save:active {
  opacity: 0.85;
}
.modal__delete {
  width: 100%;
  margin-top: 10px;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 15px;
  padding: 12px;
  cursor: pointer;
}

/* The view chooser (Year / Month / Week / Day) inside its modal. */
.view-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.view-option {
  width: 100%;
  border: 1px solid var(--line, #e6e6e6);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
}
.view-option:active {
  opacity: 0.85;
}
.view-option--active {
  border-color: var(--ink);
  font-weight: 600;
}
/* The currently-chosen row in the ★ Move picker. */
.view-option.selected {
  border-color: var(--ink);
  font-weight: 600;
}
/* Small colour dot beside a calendar's name in the Move picker. */
.move-option__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: -1px;
}

/* ---- Custom Repeat pop-up (ported from the to-do app, shared look) ---- */
/* Header: cancel · title · confirm. */
.picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.picker-head__title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
.picker-head__ok {
  width: 40px;
  height: 40px;
  border: none;
  background: none;          /* no circle — just the checkmark */
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-head__ok svg {
  width: 22px;
  height: 22px;
}
/* A bordered card section inside the pop-up. */
.repeat-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
}
.repeat-block__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}
.repeat-freq {
  display: flex;
  align-items: center;
  gap: 12px;
}
.repeat-freq__label {
  font-weight: 600;
}
/* The unit wheel ("Day/Week/Month/Year") needs room for the longest label. */
#repeat-unit .wheel {
  width: 92px;
}
#repeat-unit .wheel__item {
  font-size: 18px;
}
.repeat-summary {
  margin-top: 12px;
  color: var(--faded);
  font-size: 14px;
}
.weekday-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.weekday-chip {
  padding: 10px 16px;
  border: none;
  border-radius: 20px;
  background: #f1f1f1;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.weekday-chip.selected {
  background: var(--ink);
  color: #fff;
}
.picker__clear {
  width: 100%;
  margin-top: 12px;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  padding: 10px;
  cursor: pointer;
}
/* The repeat summary line under an event in the agenda. */
.agenda-item__repeat {
  margin-top: 2px;
  color: var(--faded);
  font-size: 13px;
}

/* The custom-colour picker field inside its modal. */
.color-card__label {
  margin-top: 40px;
  color: var(--faded);
  font-size: 14px;
}
.color-input {
  width: 100%;
  height: 56px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  cursor: pointer;
}

/* ===== Day view ===== */
.daybar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.daybar__title {
  flex: 1;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.daybar__nav {
  display: flex;
  gap: 2px;
}

.day-allday {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.day-allday__chip {
  font-size: 13px;
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.day-allday__chip.done { opacity: 0.5; text-decoration: line-through; }

/* The scrollable timeline. 24 hour-rows are absolutely positioned inside. */
.day-grid {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Contain the grid's own layering. The now-line (z-15), task markers (z-3)
     and a dragging block (z-20) use positive z-index to stack among themselves;
     isolating a stacking context here keeps those from leaking into the root and
     painting OVER the .modal sheets (which sit at z-index:auto). */
  isolation: isolate;
  /* Breathing room so the 00:00 label (which straddles the line) isn't clipped
     at the very top, and the 23:00 row isn't flush against the bottom. */
  padding: 12px 0;
}
.day-grid__inner {
  position: relative;
  height: 1344px;            /* 24 * 56px — keep in sync with HOUR_PX in script.js */
}
.day-hour {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}
.day-hour__label {
  position: absolute;
  left: 0;
  top: -8px;
  width: 44px;
  text-align: right;
  padding-right: 6px;
  font-size: 12px;
  color: var(--faded);
  background: var(--bg);
}

/* A timed event block. left edge clears the 50px hour-label gutter. */
.day-event {
  position: absolute;
  left: 52px;
  border-radius: 8px;
  padding: 4px 8px;
  color: #fff;
  font-size: 13px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}
.day-event.done { opacity: 0.5; text-decoration: line-through; }
.day-event__time { font-size: 11px; opacity: 0.85; }
.day-event.dragging { opacity: 0.8; z-index: 20; }

/* The "now" line — tinted with the calendar colour, set inline in renderDay(). */
.day-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--accent);
  z-index: 15;
  pointer-events: none;
}
.day-now__pill {
  position: absolute;
  left: 0;
  top: -9px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
}

/* ===== Day view — tasks dropdown ===== */
.day-tasks {
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}
.day-tasks__hd {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #fafafa;
  border: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.day-tasks__chev { width: 18px; height: 18px; color: var(--faded); transition: transform .15s; }
.day-tasks.collapsed .day-tasks__chev { transform: rotate(-90deg); }
.day-tasks.collapsed .day-tasks__body { display: none; }
.day-tasks__body { max-height: 168px; overflow-y: auto; }
.day-tasks__label {
  padding: 6px 12px 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faded);
}
.day-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.day-task__ck {
  width: 17px;
  height: 17px;
  border: 2px solid var(--faded);
  border-radius: 50%;
  flex: none;
  cursor: pointer;
  background: none;
  padding: 0;
}
.day-task__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-task__when { color: var(--faded); font-size: 12px; flex: none; }
.day-tasks__empty { padding: 10px 12px; color: var(--faded); font-size: 13px; }

/* ---- Week view: one continuous agenda; days flow into each other ---- */
.week-stack {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 16px;
}
/* A slim date marker — a heading, not a box. A hairline above it connects the
   days into one scroll; tapping it opens that day's full Day view. */
.week-daymark {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  cursor: pointer;
  padding: 14px 2px 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--faded);
}
.week-stack .week-daymark:first-child { border-top: none; }
.week-daymark--today { color: var(--cal-color, var(--accent)); }

/* One item row: time | marker | title, on a single line. */
.week-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  background: var(--bg);          /* opaque so the swipe reveals nothing odd */
  cursor: pointer;
  user-select: none;
  touch-action: pan-y;            /* we handle left/right; keep up/down scroll */
}
.week-row__time {
  flex: none;
  width: 52px;
  text-align: right;
  font-size: 12px;
  color: var(--faded);
  font-variant-numeric: tabular-nums;
}
/* Event marker: a solid coloured bar. Task marker: a hollow circle. Both sit in
   a 12px-wide slot so titles line up whichever the row is. */
.week-row__bar {
  flex: none;
  width: 4px;
  margin: 0 4px;
  align-self: stretch;
  min-height: 18px;
  border-radius: 3px;
  background: var(--faded);
}
.week-row__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--faded);
  border-radius: 50%;
  box-sizing: border-box;
}
.week-row__title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-row.done .week-row__title { text-decoration: line-through; color: var(--faded); }
.week-row.done .week-row__bar { opacity: 0.35; }
.week-row.done .week-row__dot { opacity: 0.35; }


/* ---- Day view: task markers on the timeline ---- */
.day-task-mark {
  position: absolute;
  left: 44px;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  z-index: 3;
}
.day-task-mark__dot {
  width: 11px; height: 11px;
  border: 2px solid var(--faded);
  border-radius: 50%;
  box-sizing: border-box;
  flex: none;
}
.day-task-mark__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-task-mark.done .day-task-mark__title { text-decoration: line-through; color: var(--faded); }
.day-task-mark.done .day-task-mark__dot { opacity: 0.4; }

/* Day-view Tasks dropdown: row marker + the "overdue" status pill. */
.day-task__dot {
  width: 12px; height: 12px;
  border: 2px solid var(--faded);
  border-radius: 50%;
  box-sizing: border-box;
  flex: none;
}
.day-task__tag {
  font-size: 11px;
  color: var(--faded);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  flex: none;
}
/* The date/time and colour pickers can open FROM the task editor, so they must
   stack above it (all .modal share a z-index otherwise, and DOM order wins). */
#dt-modal, #color-modal { z-index: 10; }

/* Inside a modal card the plain .picker__title margin is far too tall. */
.move-subhead {
  margin-top: 18px;
}
/* The shared .wheel is 62px wide — right for two-digit numbers, far too narrow
   for calendar names, which it would clip on both sides. Give it the full card
   width and ellipsize anything still too long. */
#move-cal-wheel .wheel {
  width: 100%;
}
#move-cal-wheel .wheel__item {
  font-size: 17px;
  padding: 0 10px;
  display: block;
  line-height: 34px;            /* the row height, so text stays centred */
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Says where a new item will land. A colour spine, then the destination. */
.destbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0 12px;
  padding: 8px 2px;
  border: none;
  background: none;
  color: var(--faded);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.destbar__swatch {
  flex: none;
  width: 5px;
  height: 20px;
  border-radius: 3px;
}
.destbar__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Settings ---- */
.settings-body { flex: 1; overflow-y: auto; padding-bottom: 12px; }
.settings-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.settings-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: #f7f7f7; }
.settings-row__label { flex: 1; }
.settings-row__chev { color: var(--faded); font-size: 20px; line-height: 1; }
.settings-row__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* The header's Save pill — hidden except on pages that register a save. */
.settings-save {
  justify-self: end;
  border: none;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.settings-save:disabled { background: var(--faded); cursor: default; }

.cal-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.cal-row:last-child { border-bottom: none; }
.cal-row__tap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: none;
  border: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.cal-row__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.cal-row__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row__grip { padding: 14px 12px; color: var(--faded); cursor: grab; touch-action: none; }
.cal-row__grip svg { width: 20px; height: 20px; display: block; }
.cal-row--dragging {
  background: #fafafa;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}
.cal-row__grip:active { cursor: grabbing; }
.settings-row--add { color: var(--faded); justify-content: center; }
.settings-about {
  text-align: center;
  color: var(--faded);
  font-size: 12px;
  padding: 6px 0 2px;
}
.settings-prose p {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 12px;
}
.settings-prose p + p { color: var(--faded); }
.settings-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.settings-form { display: flex; flex-direction: column; gap: 12px; }
.settings-form .addrow__input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
}

/* ===== Schedule Clearer — the fixed black & white striped indicator ===== */
/* The striped bar / all-day chip. The thin border keeps the white stripes
   visible on a white background. */
.clearer-stripes {
  background: repeating-linear-gradient(135deg, #111 0 3px, #fff 3px 6px);
  border: 1px solid #111;
  box-sizing: border-box;
}
/* Month-grid dot: finer stripes so the pattern still reads at dot size. */
.day__dot--clearer {
  background: repeating-linear-gradient(135deg, #111 0 1.5px, #fff 1.5px 3px);
  border: 1px solid #111;
  box-sizing: border-box;
}
/* Day view wears rings, not stripes: the element's own border is the outer
   ring, the two pseudo layers draw the inner ones — 3 black oval liners. */
.clearer-ovals {
  position: relative;
  background: #fff;
  border: 1px solid #111;
  border-radius: 999px;
  box-sizing: border-box;
  color: #111;      /* the chip base paints text white for coloured chips */
  /* The innermost ring sits 7px in — pad past it so the title reads clear. */
  padding: 9px 16px;
}
.clearer-ovals::before,
.clearer-ovals::after {
  content: "";
  position: absolute;
  border: 1px solid #111;
  border-radius: 999px;
  pointer-events: none;
}
.clearer-ovals::before { inset: 3px; }
.clearer-ovals::after  { inset: 6px; }

/* Day-view block: same 3 nested rings as the chip, drawn by its pseudo
   layers; the title/time lines lift above the ring lines so no ring runs
   through the text. */
.day-event--clearer {
  position: relative;
  background: #fff;
  border: 1px solid #111;
  border-radius: 999px;
  box-sizing: border-box;
  color: #111;
  /* Same clearance as the chip: text starts inside the innermost ring. */
  padding: 9px 16px;
}
.day-event--clearer::before,
.day-event--clearer::after {
  content: "";
  position: absolute;
  border: 1px solid #111;
  border-radius: 999px;
  pointer-events: none;
}
.day-event--clearer::before { inset: 3px; }
.day-event--clearer::after  { inset: 6px; }
.day-event--clearer > div {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 4px;
  padding: 0 4px;
  width: fit-content;
}
/* The quiet "N hidden" note on clearer rows. */
.agenda-item__hidden { font-size: 12px; color: var(--faded); }
.week-row__hidden { font-size: 11px; color: var(--faded); margin-left: 8px; white-space: nowrap; }

/* Clearer mode: the ★ tool stays as a filled badge but does nothing — a
   clearer lands everywhere, so there is nothing to move. */
.addtoolbar__btn--inert svg { fill: currentColor; }
.addtoolbar__btn--inert { cursor: default; }

/* ---- Reminder pop-up (ported from the to-do app) ---- */
.reminder__title { margin-top: 8px; text-align: center; }
.seg {
  display: flex;
  width: max-content;
  margin: 16px auto 0;
  background: #f1f1f1;
  border-radius: 22px;
  padding: 4px;
}
.seg__btn {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 8px 22px;
  border-radius: 18px;
}
.seg__btn.is-active {
  background: #fff;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.reminder-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.rem-offset { flex: 1; }
.rem-offset .wheel { width: 124px; }
.rem-offset .wheel__item { font-size: 16px; }
.reminder-expired {
  color: #e0533d;
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
}
.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.btn--plain {
  flex: 1;
  border: none;
  background: #f1f1f1;
  border-radius: 24px;
  padding: 15px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.btn--plain:disabled { opacity: 0.4; cursor: default; }

/* ===== Counter (settings page) ===== */
.counter-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: none;
  border: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.counter-row:active { background: #f7f7f7; }
.counter-row__title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.counter-row__count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.counter-row__num  { font-size: 26px; font-weight: 700; }
.counter-row__unit { font-size: 12px; }
.counter-row__count--left  { color: var(--ink); }
.counter-row__count--since { color: #1f9d55; }
.counter-row__count--today { color: var(--accent); }

/* The Counter add / edit page */
.counter-edit__bubblewrap { display: flex; justify-content: center; padding: 10px 0 8px; }
.counter-edit__bubble { width: 72px; height: 72px; font-size: 30px; cursor: pointer; }
.counter-edit__swatches { justify-content: center; margin-bottom: 12px; }
.counter-edit__title {
  display: block;
  width: 100%;
  border: none;
  background: #f3f3f3;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.counter-edit__title:focus { outline: none; }
.counter-field__value { color: var(--faded); }
.counter-edit__segcard { padding: 10px; }
.counter-edit__delete {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 15px;
  padding: 12px;
  border-radius: 14px;
  cursor: pointer;
}
.counter-edit__preview {
  text-align: center;
  color: var(--faded);
  font-size: 13px;
  padding: 10px 0 4px;
}

/* The optional Time row and its pop-up */
.counter-addtime { color: var(--faded); }
.counter-time-clear {
  color: var(--faded);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}
.counter-time__wheels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 10px;
}

/* ---------- Settings: Date & Time ---------- */
.settings-subhead { margin: 18px 4px 8px; font-size: 13px; font-weight: 600; color: #888; }
.daychips, .clockseg { display: flex; gap: 6px; }
.daychip, .clockseg__btn {
  flex: 1; height: 40px; border-radius: 10px; border: 1px solid #ddd;
  background: #fff; font-size: 14px; cursor: pointer;
}
.daychip--on, .clockseg__btn.is-active { background: #111; color: #fff; border-color: #111; }

/* ---------- Settings: Profile ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; border: 1px solid #e3e3e3;
  background: #fafafa; padding: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--big  { width: 96px; height: 96px; margin: 12px auto 4px; display: flex; cursor: pointer; }
.avatar--mini { width: 28px; height: 28px; margin-right: 10px; flex: none; }
.avatar--preset { width: 56px; height: 56px; cursor: pointer; }
.avatar-presets { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0 14px; }
.avatar-modal__title { text-align: center; font-size: 15px; margin: 0 0 6px; }
.avatar-upload { display: block; text-align: center; margin-bottom: 8px; cursor: pointer; }
.profile-note { color: #c0392b; font-size: 13px; text-align: center; margin: 4px 0; }
.profile-qr { margin: 18px auto 0; max-width: 240px; text-align: center; }
.profile-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 18px 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
/* The QR and the centre avatar share this box so the avatar can sit dead-centre. */
.profile-card__qr { position: relative; width: 180px; height: 180px; margin: 0 auto; }
.profile-card__qr svg { width: 100%; height: 100%; display: block; }
.profile-card__logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  /* A white ring punches a quiet zone in the QR so modules never touch the avatar. */
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #fff;
}
.profile-card__logo .avatar { width: 100%; height: 100%; }
.profile-card__name { font-weight: 600; font-size: 15px; margin: 12px 0 0; }
.profile-card__handle { color: #888; font-size: 13px; margin: 2px 0 0; }
.profile-qr__cap { font-size: 12px; color: #999; margin: 10px 0 0; }

/* Invite-someone pop-up: a menu of ways to add a person to the calendar. */
.invite-modal__title { text-align: center; font-size: 15px; margin: 0 0 14px; }
.invite-options { display: flex; flex-direction: column; gap: 10px; }
.invite-opt {
  width: 100%; border: 1px dashed var(--line); border-radius: 12px;
  background: none; color: var(--ink); font: inherit; font-weight: 600;
  padding: 12px; cursor: pointer;
}
.invite-opt:active { background: #f3f3f3; }
.invite-search { margin-top: 12px; }
.invite-modal__hint { text-align: center; color: #888; font-size: 13px; margin: 10px 8px 2px; }

/* ---------- Settings: Timezone ---------- */
.settings-row--static { cursor: default; }
.tz-search {
  width: 100%;
  height: 40px;
  margin: 0 0 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.tz-row--current .settings-row__label { font-weight: 700; }

/* ===== External calendar sync — imported event markers ===== */
/* Agenda row: a quiet "◈ <source name>" tag pushed to the far right.
   It's appended to the row BEFORE the colour bar and body in the markup, so
   without help it would sit at the flex start; `order` moves it after
   `.agenda-item__body` (which is `flex: 1` and otherwise eats all the free
   space) without touching any JS/markup, and margin-left: auto plus
   flex-shrink: 0 keep it pinned to the right edge and unsquashed. */
.agenda-item__source {
  order: 2;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11.5px;
  opacity: 0.6;
  white-space: nowrap;
}
/* Month-grid dot: a faint outline so an imported day still stands out
   from the solid colour dots of the user's own events. */
.day__dot.is-imported {
  outline: 1px solid rgba(0, 0, 0, 0.25);
  outline-offset: -1px;
}
/* Agenda row, day-view block, and week row all switch to a dashed edge. */
.day-event.is-imported,
.agenda-item.is-imported,
.week-row.is-imported {
  border-style: dashed;
}
/* Week row: same quiet "◈ <source name>" tag as the agenda row's, just
   without the flex-order trick — it already sits after the title in markup. */
.week-row__source {
  flex-shrink: 0;
  font-size: 11px;
  opacity: 0.6;
  white-space: nowrap;
}
/* Event editor: the read-only banner shown while viewing an imported event. */
.event-source-note {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 12.5px;
  color: var(--faded);
}

/* ---------- Settings: Import & Integration ---------- */
/* A small explanatory line under a row — same voice as .settings-prose but
   sized to sit inside a card instead of standing alone on the page. */
.settings-note {
  padding: 0 14px 14px;
  margin: -4px 0 0;
  font-size: 12.5px;
  color: var(--faded);
  line-height: 1.4;
}
/* A row that isn't tappable yet (e.g. "Add from a link…" pre-accounts).
   Visibly inert: dimmed text, no pointer, no hover/active feedback. */
.settings-row.is-disabled {
  color: var(--faded);
  cursor: default;
  pointer-events: none;
}
.settings-row.is-disabled:active { background: none; }
/* One imported source: name/count header, a meta line (.settings-note),
   then rows appended below — Task 7b adds target/notifier/remind controls
   here without changing this shape. */
.sub-card__head {
  padding: 14px 14px 4px;
  font-size: 15px;
  font-weight: 600;
  /* The header is a full-width dropdown toggle — strip the button chrome so it
     still reads as the card's title row. */
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.sub-card__chevron {
  font-size: 12px;
  opacity: 0.55;
  transition: transform 0.15s ease;
}
.sub-card__head.is-open .sub-card__chevron {
  transform: rotate(90deg);
}
/* Task 7b: the Shows in / Notifies from / Hidden events groups inside a
   sub-card. Same subhead voice as the page-level groups, just tighter since
   it lives inside a card instead of floating on the page. */
.sub-card__subhead { margin: 10px 4px 0; }
.sub-row input[type="checkbox"],
.sub-row input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
}
.sub-row .settings-link {
  flex: none;
  margin-top: 0;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

/* ===== Real phones: fill the screen =====
   On a desktop the app floats as a rounded 420px "phone card" on grey.
   On an actual phone that frame wastes space and reads as a mockup, so
   below 480px the card IS the screen: edge to edge, square corners, and
   sized in dvh — the viewport unit that tracks the browser toolbars as
   they collapse (plain 100vh overshoots there and clips the bottom).
   The height stays FIXED (not auto) so long lists keep scrolling inside
   their own panels, exactly like the desktop card. env(safe-area-inset-*)
   keeps content clear of the notch and home bar once installed. */
@media (max-width: 480px) {
  body { padding: 0; }
  .screen {
    max-width: none;
    height: 100vh;   /* fallback for browsers without dvh */
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 20px
             calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== Account / sign-in pop-up (Profile → Account) ===== */
.signin { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.signin__title { text-align: center; font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.signin__field {
  width: 100%;
  background: #f3f3f3;
  border: none;
  outline: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  font-family: inherit;
}
.signin__field::placeholder { color: var(--faded); }
/* Log in / Change email: the filled primary button (like .modal__save). */
.signin__primary {
  width: 100%;
  border: none;
  border-radius: 30px;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  padding: 16px;
  cursor: pointer;
}
.signin__primary:active { opacity: 0.85; }
/* Create account / Log out: quiet text buttons under the primary one. */
.signin__quiet {
  width: 100%;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 15px;
  padding: 10px;
  cursor: pointer;
}
.signin__quiet--danger { color: var(--accent); }
.signin__who { text-align: center; font-size: 16px; margin: 0; word-break: break-all; }
.signin__status { display: block; margin-top: 6px; font-size: 13px; color: var(--faded); }
.signin__msg { text-align: center; font-size: 13px; color: var(--faded); line-height: 1.4; margin: 2px 4px 0; }
/* The Profile "Account" row's value (email or "Sign in to sync"). */
.settings-row__value { color: var(--faded); margin-left: auto; margin-right: 6px; }