:root {
  /* Apple-style design tokens. Every rule below references these, so the whole
     look can be retuned here instead of hunting through the file. */

  /* Typography: the OS's own UI font (San Francisco on Apple, Segoe on Windows). */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  /* Soft, professional palette */
  --bg: #f5f5f7; /* page background: Apple's signature off-white-gray */
  --surface: #ffffff; /* cards / panels that sit on top of --bg */
  --text: #1d1d1f; /* near-black — softer than pure #000 */
  --text-muted: #6e6e73; /* secondary labels and hints */
  --border: #d2d2d7; /* hairline borders */

  --accent: #34a853; /* soft green: the brand + primary action color */
  --accent-strong: #2a8c45; /* darker green for hover/active */
  --accent-tint: #e6f4ea; /* very light green fill */

  /* Shape & depth */
  --radius: 12px; /* generous rounded corners */
  --radius-sm: 8px; /* smaller controls */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --glow: 0 2px 12px rgba(52, 168, 83, 0.35); /* the button "glow" */
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased; /* crisper, Apple-like text rendering */
}
a {
  color: var(--accent);
  text-decoration: none;
}

/* ---------- Scrollbars (unified, app-wide) ----------
   One slim, rounded, semi-transparent scrollbar for every scroll area (the
   table, the calendar, the people list, anything future). Replaces each
   browser's chunky default. */

/* Firefox. These two properties inherit, so setting them on the root cascades
   to every element — no per-area rule needed. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* WebKit (Chrome / Edge / Safari). With no element prefix these pseudo-elements
   target every scrollable area on the page at once. */
::-webkit-scrollbar {
  width: 8px; /* vertical scrollbars */
  height: 8px; /* horizontal scrollbars (e.g. the grid) */
}
::-webkit-scrollbar-track {
  background: transparent; /* no visible groove behind the thumb */
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px; /* fully rounded pill */
  border: 2px solid transparent; /* inset the thumb so it reads as thinner */
  background-clip: padding-box; /* keep the grey inside that transparent border */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted); /* darken on hover for affordance */
  background-clip: padding-box;
}

/* ---------- nav ---------- */
#nav {
  background: var(--surface); /* white banner */
  padding: 16px;
  text-align: center; /* center the Meetable wordmark */
  box-shadow: var(--shadow); /* soft division from the content below */
}
#nav a {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px; /* tight tracking reads as a modern wordmark */
}
#nav a:hover {
  opacity: 0.7;
}

.hidden {
  display: none !important;
}
/* keeps an element's layout space but hides it — used so the table doesn't
   shift sideways when the responses panel is tucked away during editing */
.invisible {
  visibility: hidden;
}
.center {
  text-align: center;
}
.hint {
  font-size: 13px;
  margin: 2px 0;
}
.error {
  color: #c00;
}

/* =====================================================
   CREATE PAGE
   ===================================================== */
/* one centered box that fixes the width everything aligns to */
.create-form {
  width: 320px; /* single stacked column: name, calendar, times, button */
  max-width: 92vw;
  margin: 24px auto;
}
.create-name {
  text-align: center;
  margin: 0 0 14px;
}
.create-name input {
  font-size: 16px; /* same as the Create event button text */
  font-weight: 600;
  text-align: center;
  padding: 10px 16px;
  width: 100%; /* fills .create-form -> edges align with the columns below */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.create-name input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.create-name input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint); /* soft green focus ring */
}
.create-columns {
  display: flex;
  flex-direction: column; /* stack: calendar (dates) on top, times below */
  gap: 20px;
}
.create-col {
  text-align: center;
}

/* calendar (Apple-style, scrollable) */
#calendar {
  width: 100%;
  margin: 8px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden; /* keeps the rounded corners clean over the scroll area */
}
/* the weekday header and every month grid share the same 7-column layout,
   so the columns line up perfectly under one shared header */
.cal-dow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-dow {
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--border);
}
.cal-dow span {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.cal-scroll {
  max-height: 300px;
  overflow-y: auto; /* this is what makes the months scrollable */
  padding: 4px 10px 10px;
}
.cal-month + .cal-month {
  margin-top: 12px;
}
.cal-month-head {
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 8px 2px;
}
.cal-grid {
  row-gap: 2px;
}
.cal-day {
  font-family: inherit;
  font-size: 14px;
  aspect-ratio: 1 / 1; /* square cell -> the selected circle stays round */
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.cal-day:hover {
  background: var(--accent-tint);
}
.cal-day.past {
  color: #c7c7cc; /* faded */
  pointer-events: none; /* not hoverable or clickable */
}
.cal-day.selected {
  background: var(--accent);
  color: #fff;
}

.time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
}
.time-sep {
  color: var(--text-muted); /* the "to" between the start/end dropdowns */
}
.time-row select {
  flex: 1; /* stretch to the Time column's right edge so it aligns */
}
.ready-row {
  margin-top: 40px;
  font-size: 18px;
}
/* dropdowns (Apple-style): hide the native arrow, draw our own chevron */
select {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 34px 8px 12px; /* extra right padding leaves room for the chevron */
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select:hover {
  border-color: #b9b9c0;
}
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* custom time dropdown (trigger button + styled popup menu) */
.dropdown {
  position: relative;
  flex: 1; /* fill the Time column like the old <select> did */
}
.dropdown-trigger {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 34px 9px 12px;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dropdown-trigger:hover {
  border-color: #b9b9c0;
}
.dropdown-trigger:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.dropdown-menu {
  position: absolute;
  /* vertical position is set in JS so the menu opens centered on the trigger */
  left: 0;
  width: 100%;
  max-height: 240px;
  overflow-y: auto; /* scrollable list */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); /* floating-panel shadow */
  padding: 6px;
  z-index: 20;
}
.dropdown-option {
  font-size: 15px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.dropdown-option:hover {
  background: var(--accent-tint);
}
.dropdown-option.selected {
  color: var(--accent);
  background: var(--accent-tint);
  font-weight: 600;
}

/* Create button spans the Time column so its edges align with the dropdowns */
#create-btn {
  width: 100%;
}

/* primary action button: glowing green */
#create-btn,
#signin-btn,
#save-btn,
#primary-btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
#create-btn:hover,
#signin-btn:hover,
#save-btn:hover,
#primary-btn:hover {
  background: var(--accent-strong);
  box-shadow: 0 4px 18px rgba(52, 168, 83, 0.45); /* stronger glow on hover */
}
#create-btn:active,
#signin-btn:active,
#save-btn:active,
#primary-btn:active {
  transform: translateY(1px); /* subtle press feedback */
}
#create-btn:disabled,
#save-btn:disabled {
  cursor: default;
  box-shadow: none; /* drop the glow while loading */
}
/* edit icon while you're already editing: visible but gray + unclickable */
#primary-btn:disabled,
#primary-btn:disabled:hover {
  background: #e5e5ea;
  color: #a1a1a8;
  box-shadow: none;
  cursor: default;
}
/* rotating circle shown in the button while the event is being created */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  border: 2px solid rgba(255, 255, 255, 0.4); /* faint full ring */
  border-top-color: #fff; /* bright head that appears to spin */
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =====================================================
   EVENT PAGE
   ===================================================== */
.event-wrap {
  padding: 16px 30px;
}
/* header: name + date range on the left, action buttons on the right */
.event-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap; /* keep name and buttons on one row (width set in JS) */
  margin-bottom: 4px; /* keep the name/date/buttons tight to the table */
}
/* the name/date column: allowed to shrink so a long name can be clipped
   instead of pushing the buttons out of place */
.event-heading {
  flex: 0 1 auto;
  min-width: 0;
}
#event-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.4px; /* tight tracking reads as modern */
  line-height: 1.3; /* room for descenders (the "g") under overflow:hidden */
  margin: 0;
  padding-bottom: 2px;
  white-space: nowrap; /* a too-long name is trimmed with an ellipsis... */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* date range + "Edit event", sitting just under the name */
.event-subline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-size: 16px;
  color: var(--text-muted);
}
/* a text-only button styled like an inline link (Edit event) */
.link-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.link-btn:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}
/* the cluster of action buttons, right-aligned and aligned to the title row */
.event-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto; /* never shrink: the name gives way, not the buttons */
  flex-wrap: nowrap;
}
/* The content block shrink-wraps to its real width (table + gap + responses)
   and is centered, leaving room on both sides. Because the header and body are
   both full-width children of this shrink-wrapped block, the header's left edge
   lands on the table's left border and the buttons' right edge lands on the
   responses' right border — everything lines up. */
.event-single {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.event-single h2 {
  font-weight: normal;
  font-size: 22px;
  margin-bottom: 8px;
}
/* table + responses panel kept snug together, hugging the block's left edge */
.event-body {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap; /* stack on narrow screens */
}
.grid-side {
  flex: 0 1 auto; /* shrink-wrap the table so people sit right beside it */
  min-width: 0; /* let the grid area scroll instead of overflowing the row */
}
/* shrink-wraps the table so the serration overlays pin to its real edges */
.grid-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
/* the table's own area: left-aligned, scrolls horizontally past 7 day-columns
   (the visible width is capped in JS). */
#grid-area {
  overflow-x: auto;
  padding: 12px 0;
  display: flex;
  justify-content: flex-start;
  /* no scroll-snap: it fights the eased mouse-wheel animation (each frame's
     programmatic scroll gets yanked to a column), making scrolling jerky. The
     JS wheel handler glides smoothly instead. */
  scroll-snap-type: none;
}
#grid {
  flex: 0 0 auto; /* size to the table's content, don't shrink */
}
/* torn-paper edges that mark hidden columns. They sit outside #grid-area so
   they stay pinned to the visible edges while the table scrolls. Each SVG has
   two layers: a page-colored fill that solidly covers the straight table edge,
   and a grey stroked wave on top of it — the stroke is what keeps the wavy edge
   visible even over empty (white) cells. Big arcs => large, modern waves. */
.serration {
  position: absolute;
  top: 50px; /* clears #grid-area's 12px padding + the 38px day headers */
  bottom: 12px;
  width: 22px;
  pointer-events: none;
  z-index: 3;
  background-repeat: repeat-y;
  background-size: 22px 36px;
}
/* Right edge: the table touches the clip edge (x=22) at the wave crests and
   bites 18px inward at the troughs. Fill is solid to the right edge. */
.serration-right {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='36'%3E%3Cpath d='M13 0 A9 9 0 0 0 13 18 A9 9 0 0 1 13 36 L22 36 L22 0 Z' fill='%23f5f5f7'/%3E%3Cpath d='M13 0 A9 9 0 0 0 13 18 A9 9 0 0 1 13 36' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* Left edge: mirror image — the table touches the left border (x=0) at the
   crests, so the columns stay flush with the border instead of floating. */
.serration-left {
  left: 0; /* JS shifts this to just past the sticky time column */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='36'%3E%3Cpath d='M9 0 A9 9 0 0 1 9 18 A9 9 0 0 0 9 36 L0 36 L0 0 Z' fill='%23f5f5f7'/%3E%3Cpath d='M9 0 A9 9 0 0 1 9 18 A9 9 0 0 0 9 36' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* Save sits just past the table's right edge, lined up with its bottom border.
   left:100% = the table's right edge; bottom:12px lifts it over #grid-area's
   bottom padding so it meets the last gridline. Absolute => no layout shift. */
#mine-controls {
  position: absolute;
  left: 100%;
  bottom: 12px;
  margin-left: 16px;
}

/* neutral, outlined button for secondary actions (Sign Out, Cancel) */
.btn-secondary {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 18px;
  cursor: pointer;
  display: inline-flex; /* lay out a text label + icon on one line */
  align-items: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover {
  border-color: #b9b9c0;
  background: #fafafa;
}
/* Copy link: tight to the "Copy link" text, label left + icon right. The label
   reserves its own width so swapping to the shorter "Copied!" doesn't resize
   the button. */
#copy-link-btn {
  justify-content: space-between;
}
#copy-link-btn .btn-label {
  min-width: 4.8em;
}
#copy-link-btn .icon-check {
  display: none;
}
#copy-link-btn.copied .icon-copy {
  display: none;
}
#copy-link-btn.copied .icon-check {
  display: block;
  color: var(--accent); /* green check on success */
}
/* inline button/list icons: size to the line, inherit the text color */
.icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}
/* round icon-only button (Edit / Sign out). Placed after .btn-secondary so it
   overrides its padding/border-radius for the outlined sign-out variant. */
.icon-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
/* #primary-btn is an id, so its padding/radius need an id-level override here */
#primary-btn.icon-btn {
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* responses: a vertical list sitting snug to the right of the table. The
   padding-top drops the heading down to line up with the top of the table's
   time area (grid padding 12px + day-header 46px). */
#people-section {
  flex: 0 0 200px;
  padding-top: 58px;
}
#people-section h2 {
  font-size: 16px; /* smaller + bolder than the default event h2 */
  font-weight: 700;
  margin: 0;
}
/* heading row: "Responses (n/total)" on the left, the kebab button on the right */
.responses-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-left: 10px; /* line the checkbox + heading up with the person rows */
}
/* select-all checkbox in the Responses heading — same box as the row checkbox */
#select-all {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  visibility: hidden; /* like the row checkbox: only on hover (or when checked) */
}
/* reveal when hovering the heading, or once it's checked */
.responses-head:hover #select-all,
#select-all.checked {
  visibility: visible;
}
#select-all:hover {
  border-color: #1f6feb;
}
/* the "(n/total)" counter beside the heading: lighter and a touch smaller */
#responses-count {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
}
#people-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* each pill shrinks to its name, so the green
                              highlight stops at the end of the name */
  gap: 4px;
  margin-top: 8px;
}
.person {
  display: flex; /* person icon + name on one line, left-aligned */
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text);
  background: transparent;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.person-icon {
  color: var(--text-muted);
}
/* hovering a group slot marks everyone available at that time green */
.person.available {
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-weight: 600;
}
.person.available .person-icon {
  color: var(--accent-strong);
}
/* ...and strikes through everyone who isn't available at that time */
.person.unavailable {
  color: var(--text-muted);
}
.person.unavailable .pname {
  text-decoration: line-through;
}

/* multi-select: a checkbox that only shows on hover (or when checked), and a
   soft-blue paint on the selected rows — used to find a subgroup's mutual time */
.person-check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: #fff;
  display: none; /* hidden until hover/selected, when it replaces the icon */
}
/* on hover or when selected, swap the person icon out for the checkbox */
.person:hover .person-icon,
.person.selected .person-icon {
  display: none;
}
.person:hover .person-check,
.person.selected .person-check {
  display: block;
}
.person.selected {
  background: #e6f0ff;
  color: #1f6feb;
  font-weight: 600;
}
.person.selected .person-icon {
  color: #1f6feb;
}
.person.selected .person-check,
#select-all.checked {
  border-color: #1f6feb;
  background: #1f6feb
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}

/* sign-in modal: dim overlay + centered card */
#signin-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 50;
}
#signin-card {
  width: 90vw;
  max-width: 360px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 24px 28px;
}
.signin-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* sign in */
.signin-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 18px 0 4px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.signin-input::placeholder {
  color: var(--text-muted);
}
.signin-input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* legend */
.legend {
  margin: 8px 0;
  font-size: 13px;
}
.legend .swatch {
  display: inline-block;
  width: 26px;
  height: 13px;
  border: 1px solid #888;
  vertical-align: middle;
  margin: 0 4px;
}

/* grids */
.grid {
  display: flex;
  justify-content: flex-start;
  margin-top: 0; /* no extra gap above the table */
}
.grid-inner {
  display: flex;
}
.time-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  padding-top: 46px; /* must match .day-head height so labels hit the gridlines */
  padding-bottom: 0;
  padding-right: 5px; /* a little breathing room between labels and the waves */
  margin-right: 6px;
  white-space: nowrap;
  position: sticky; /* stay visible while the table scrolls horizontally */
  left: 0;
  background: var(--bg); /* opaque so day columns don't show through */
  z-index: 1;
}
.time-col span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1;
  transform: translateY(-50%);
}
.days {
  display: flex;
}
.day-col {
  width: 74px;
  scroll-snap-align: start; /* each column is a snap landing point */
}
/* blank spacer between two dates that aren't consecutive */
.day-gap {
  width: 18px;
  flex: 0 0 18px;
}
.day-head {
  height: 46px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted); /* the "Jul 7" month/day is muted... */
  line-height: 1.2;
  padding-top: 4px;
}
.day-head b {
  display: block; /* ...and the weekday sits below it, larger and dark */
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-top: 3px;
}
.col-slots {
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.day-col:last-child .col-slots,
.day-col:has(+ .day-gap) .col-slots {
  border-right: 1px solid var(--border);
}
.slot {
  height: 24px;
  border-top: 1px dotted #c7c7cc; /* half-hour line: dotted */
  background: #fff;
  cursor: pointer;
}
.slot.hour {
  border-top: 1px solid var(--border); /* full hour line: solid (not black) */
}
/* the very first slot already has col-slots top border; keep hour lines visible */
.col-slots .slot:first-child {
  border-top: none;
}
.col-slots .slot.hour:first-child {
  border-top: none;
}
.slot:last-child {
  border-bottom: 1px solid var(--border);
}

/* editable (mine) colors */
#grid.mine .slot {
  background: #fff0f0; /* unavailable (light pink) */
}
#grid.mine .slot.available {
  background: var(--accent); /* available — same green as the group heat-map */
}

/* group is not editable: cells are colored inline, no pointer */
#grid.group .slot {
  cursor: default;
}