/* Calendar by Hottub. Water by day, deep water by night, and the sun marks now.
   Colour means one calendar and nothing else; the sun's gradient is only for now and today.
   No inline styles anywhere (the content security policy forbids them): positions are classes
   written by hottub_calendar_ui::grid::geometry_css and appended by the build. */

@font-face { font-family: "Reddit Sans"; src: url("reddit-sans-949ee48989.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fraunces-soft-d8d6a5fce9.woff2") format("woff2"); font-weight: 400 650; font-display: swap; }

:root {
  color-scheme: light dark;
  --ink: #0c3b46;
  --ink-2: #3e6670;
  --ink-3: #5f7f86;
  --canvas: #f4f9f9;
  --day: #ffffff;
  --night: #e4eff1;
  --wash: #e9f3f4;
  --line: #dbe7e9;
  --line-strong: #bdd1d5;
  --focus: #0a7f90;
  --danger: #b23519;
  --sun-a: #f26d4a;
  --sun-b: #ffb84d;
  --sun-ink: #0c3b46;
  --scrim: rgba(6, 26, 31, 0.34);
  --shadow: 0 1px 2px rgba(12, 59, 70, 0.07), 0 14px 36px rgba(12, 59, 70, 0.17);
  --hour: 48px;
  --gutter: 56px;
  --font-ui: "Reddit Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #d8eef1; --ink-2: #a4c4c9; --ink-3: #82a2a8;
    --canvas: #0e1717; --day: #132225; --night: #0a1213; --wash: #19292c;
    --line: #20343a; --line-strong: #2e474d; --focus: #7fd6e2; --danger: #ff8f73;
    --sun-a: #ff7a5a; --sun-b: #ffc777; --sun-ink: #0c2a31;
    --scrim: rgba(0, 0, 0, 0.5);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --ink: #d8eef1; --ink-2: #a4c4c9; --ink-3: #82a2a8;
  --canvas: #0e1717; --day: #132225; --night: #0a1213; --wash: #19292c;
  --line: #20343a; --line-strong: #2e474d; --focus: #7fd6e2; --danger: #ff8f73;
  --sun-a: #ff7a5a; --sun-b: #ffc777; --sun-ink: #0c2a31;
  --scrim: rgba(0, 0, 0, 0.5);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Calendar colours: fill, edge and text, tuned for each mode. */
.c-coral  { --fill: #fde6dd; --edge: #e2603f; --text: #6b2414; }
.c-sun    { --fill: #fff0cf; --edge: #d9931a; --text: #5a3b00; }
.c-lagoon { --fill: #d8f0f2; --edge: #1590a1; --text: #07434b; }
.c-deep   { --fill: #dde8eb; --edge: #0c3b46; --text: #0c3b46; }
.c-kelp   { --fill: #def0e1; --edge: #3a8a4d; --text: #1b4826; }
.c-orchid { --fill: #eee3f7; --edge: #8a4fb8; --text: #44205c; }
.c-rose   { --fill: #fbe1ec; --edge: #c0437a; --text: #5d1837; }
.c-sky    { --fill: #e0e9fa; --edge: #3d71c6; --text: #1a396a; }
.c-sand   { --fill: #f2eadb; --edge: #9d7744; --text: #4b3715; }
.c-slate  { --fill: #e7ecee; --edge: #5d6d76; --text: #29343a; }
.src-organize { --fill: transparent; --edge: #3a8a4d; --text: var(--ink); }
.src-crm      { --fill: transparent; --edge: #e2603f; --text: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-coral  { --fill: #3b2119; --edge: #ff8a6b; --text: #ffd9cd; }
  :root:not([data-theme="light"]) .c-sun    { --fill: #33290f; --edge: #ffc35c; --text: #ffe6b3; }
  :root:not([data-theme="light"]) .c-lagoon { --fill: #0f3035; --edge: #4cc6d6; --text: #c5eff4; }
  :root:not([data-theme="light"]) .c-deep   { --fill: #1a2b2f; --edge: #8fb8c2; --text: #d6e8ec; }
  :root:not([data-theme="light"]) .c-kelp   { --fill: #16291b; --edge: #6fc283; --text: #ceeed5; }
  :root:not([data-theme="light"]) .c-orchid { --fill: #2a1c33; --edge: #c595ea; --text: #ecdcf7; }
  :root:not([data-theme="light"]) .c-rose   { --fill: #331a25; --edge: #f08ab5; --text: #fbd6e5; }
  :root:not([data-theme="light"]) .c-sky    { --fill: #172338; --edge: #8ab0f0; --text: #d6e3fb; }
  :root:not([data-theme="light"]) .c-sand   { --fill: #2b241a; --edge: #d2b07c; --text: #f0e3cc; }
  :root:not([data-theme="light"]) .c-slate  { --fill: #1f2629; --edge: #a4b4bc; --text: #dfe7ea; }
  :root:not([data-theme="light"]) .src-organize { --edge: #6fc283; }
  :root:not([data-theme="light"]) .src-crm      { --edge: #ff8a6b; }
}
:root[data-theme="dark"] .c-coral  { --fill: #3b2119; --edge: #ff8a6b; --text: #ffd9cd; }
:root[data-theme="dark"] .c-sun    { --fill: #33290f; --edge: #ffc35c; --text: #ffe6b3; }
:root[data-theme="dark"] .c-lagoon { --fill: #0f3035; --edge: #4cc6d6; --text: #c5eff4; }
:root[data-theme="dark"] .c-deep   { --fill: #1a2b2f; --edge: #8fb8c2; --text: #d6e8ec; }
:root[data-theme="dark"] .c-kelp   { --fill: #16291b; --edge: #6fc283; --text: #ceeed5; }
:root[data-theme="dark"] .c-orchid { --fill: #2a1c33; --edge: #c595ea; --text: #ecdcf7; }
:root[data-theme="dark"] .c-rose   { --fill: #331a25; --edge: #f08ab5; --text: #fbd6e5; }
:root[data-theme="dark"] .c-sky    { --fill: #172338; --edge: #8ab0f0; --text: #d6e3fb; }
:root[data-theme="dark"] .c-sand   { --fill: #2b241a; --edge: #d2b07c; --text: #f0e3cc; }
:root[data-theme="dark"] .c-slate  { --fill: #1f2629; --edge: #a4b4bc; --text: #dfe7ea; }
:root[data-theme="dark"] .src-organize { --edge: #6fc283; }
:root[data-theme="dark"] .src-crm      { --edge: #ff8a6b; }

/* ----- Base ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.55; }
a { color: var(--focus); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.glyph { flex: none; width: 18px; height: 18px; }
kbd { font-family: var(--font-ui); font-size: 12.5px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--canvas); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--day); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.button:hover { background: var(--wash); }
.button.is-primary { background: var(--ink); border-color: var(--ink); color: var(--day); }
.button.is-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.button.is-quiet { background: none; border-color: transparent; color: var(--ink-2); }
.button.is-quiet:hover { background: var(--wash); }
.button.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.button.is-small { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.button.is-wide { width: 100%; min-height: 42px; }
.button .glyph { width: 16px; height: 16px; }
.link { background: none; border: 0; padding: 0; color: var(--focus); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.icon-button {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 10px; background: none; color: var(--ink-2);
}
.icon-button:hover { background: var(--wash); color: var(--ink); }

/* ----- Frame ---------------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 268px minmax(0, 1fr); height: 100dvh; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; }

.rail {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  padding: 16px 14px 14px; overflow-y: auto;
  border-right: 1px solid var(--line); background: var(--canvas);
}
.brand { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; }
.brand-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.mark { flex: none; border-radius: 8px; }
.wordmark { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.012em; }
.by { color: var(--ink-3); font-size: 14px; margin-left: -4px; }
.rail-close, .rail-open { display: none; }
.new-button {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; border: 0; border-radius: 12px;
  background: var(--ink); color: var(--day); font-weight: 600; font-size: 15px;
}
.new-button:hover { background: var(--ink-2); }

.mini-head { display: flex; align-items: center; gap: 2px; padding: 0 2px 6px 6px; }
.mini-title { flex: 1; font-weight: 600; font-size: 14px; }
.mini-head .icon-button { width: 28px; height: 28px; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.mini-dow { display: contents; }
.mini-dow span { text-align: center; font-size: 11px; color: var(--ink-3); padding-bottom: 2px; }
.mini-day {
  position: relative; height: 30px; border: 0; border-radius: 9px; background: none;
  font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.mini-day:hover { background: var(--wash); }
.mini-day.is-outside { color: var(--ink-3); }
.mini-day.is-selected { background: var(--wash); }
.mini-day.is-today { font-weight: 700; }
.mini-day.is-today::before {
  content: ""; position: absolute; inset: 3px 4px; border-radius: 50%; z-index: -1;
  background: linear-gradient(135deg, var(--sun-a), var(--sun-b));
}
.mini-day.is-today { color: var(--sun-ink); isolation: isolate; }
.mini-day.has-events::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: var(--ink-3);
}
.mini-day.is-today.has-events::after { background: var(--sun-ink); bottom: 4px; }

.rail-section { display: flex; flex-direction: column; gap: 4px; }
.rail-heading { margin: 0 0 2px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.cal-toggle, .link-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 9px; background: none; text-align: left; color: var(--ink);
}
.cal-toggle:hover, .link-toggle:hover { background: var(--wash); }
.swatch {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px;
  border: 2px solid var(--edge); color: transparent;
}
.swatch .glyph { width: 13px; height: 13px; stroke-width: 2.6; }
[aria-pressed="true"] > .swatch { background: var(--edge); color: var(--day); }
.link-toggle .swatch { border-radius: 50%; }
.cal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.cal-note { display: flex; gap: 4px; align-items: center; margin: -2px 0 4px 36px; font-size: 12px; color: var(--ink-3); }
.cal-note .glyph { width: 13px; height: 13px; }
.cal-note.is-problem { color: var(--danger); }
.rail-note { margin: 2px 8px 6px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.rail-link { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; margin-left: 8px; padding: 4px 0; border: 0; background: none; color: var(--ink-2); font-size: 13.5px; }
.rail-link:hover { color: var(--ink); text-decoration: underline; }
.rail-link.is-current { color: var(--ink); font-weight: 600; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.who { margin-left: 8px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }

.toolbar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: 8px 14px; padding: 14px 20px 10px;
}
.period {
  margin: 0; font-family: var(--font-display); font-weight: 560; font-size: 27px;
  letter-spacing: -0.015em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav { display: flex; align-items: center; gap: 2px; }
.today-button {
  min-height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--day); font-weight: 600; font-size: 14px;
}
.today-button:hover { background: var(--wash); }
.views { display: flex; justify-self: end; padding: 3px; gap: 2px; border-radius: 11px; background: var(--wash); }
.period-short { display: none; }
.view-button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.view-button[aria-pressed="true"] { background: var(--day); color: var(--ink); box-shadow: 0 1px 2px rgba(12, 59, 70, 0.12); }
.quick { grid-column: 1 / -1; position: relative; }
.quick input[type="text"] {
  width: 100%; height: 44px; min-height: 44px; padding: 0 76px 0 16px; border-radius: 12px; text-overflow: ellipsis;
  border: 1px solid var(--line-strong); background: var(--day); font-size: 15px;
}
.quick input[type="text"]::placeholder { color: var(--ink-3); }
.quick input[type="text"]:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.quick-add {
  position: absolute; right: 5px; top: 5px; height: 34px; padding: 0 14px;
  border: 0; border-radius: 9px; background: var(--ink); color: var(--day); font-weight: 600; font-size: 14px;
}
.quick-preview { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-height: 22px; margin: 7px 2px 0; font-size: 13.5px; color: var(--ink-2); }
.quick-preview.is-empty { min-height: 0; margin: 0; }
.qp-title { font-weight: 600; color: var(--ink); }
.qp-hint { color: var(--ink-3); }

/* ----- Day and week ----------------------------------------------------------------------- */
.grid {
  --cols: 7;
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  margin: 0 20px 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--day); overflow: hidden;
}
.grid.cols-1 { --cols: 1; }
.daylight-note { display: flex; gap: 6px; align-items: center; margin: 0; padding: 8px 14px 0; font-size: 12.5px; color: var(--ink-3); }
.daylight-note .glyph { width: 15px; height: 15px; }
.grid-head, .allday, .grid-body { display: grid; grid-template-columns: var(--gutter) repeat(var(--cols), minmax(0, 1fr)); scrollbar-gutter: stable; }
.grid-head, .allday { overflow: hidden; }
.grid-head { border-bottom: 1px solid var(--line); }
.day-head {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 2px 9px; border: 0; background: none; color: var(--ink-2);
}
.day-head:hover .dom { background: var(--wash); }
.dow { font-size: 12.5px; }
.dom {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font-family: var(--font-display); font-size: 20px; font-weight: 560; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.day-head.is-today .dom, .day-head.is-today:hover .dom { background: linear-gradient(135deg, var(--sun-a), var(--sun-b)); color: var(--sun-ink); }
.day-head.is-today .dow { color: var(--ink); font-weight: 600; }

/* Rows are written out per lane count: repeat(0, …) is invalid CSS, and a week with no multi-day events would lose its rows. */
.allday { grid-template-rows: 0 25px; row-gap: 3px; padding: 3px 0 6px; border-bottom: 1px solid var(--line); min-height: 30px; }
.allday.lanes-2 { grid-template-rows: 0 repeat(2, 25px); } .allday.lanes-3 { grid-template-rows: 0 repeat(3, 25px); } .allday.lanes-4 { grid-template-rows: 0 repeat(4, 25px); } .allday.lanes-5 { grid-template-rows: 0 repeat(5, 25px); }
.allday-label { grid-column: 1; grid-row: 1 / -1; align-self: center; padding-right: 8px; text-align: right; font-size: 11px; color: var(--ink-3); }
.bar {
  grid-row-end: span 1; height: 23px; margin: 0 3px; padding: 0 8px; min-width: 0;
  display: flex; align-items: center; border: 0; border-left: 3px solid var(--edge); border-radius: 6px;
  background: var(--fill); color: var(--text); font-size: 12.5px; font-weight: 600; text-align: left;
}
.bar:hover { filter: brightness(0.97) saturate(1.1); }
.bar.from-before { border-left-style: dotted; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bar.to-after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-extras { grid-row-end: span 1; display: flex; gap: 3px; margin: 0 3px; min-width: 0; overflow: hidden; }
.due {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; height: 23px;
  padding: 0 7px 0 4px; border: 1px solid var(--edge); border-radius: 6px;
  background: var(--day); color: var(--ink); font-size: 12px; font-weight: 500;
}
.due .glyph { width: 15px; height: 15px; color: var(--edge); }
.due.is-done .due-title { text-decoration: line-through; color: var(--ink-3); }
.due-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more { border: 0; background: none; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.more:hover { text-decoration: underline; }

.grid-body { flex: 1; overflow-y: auto; position: relative; overscroll-behavior: contain; }
.gutter, .day-col { display: grid; grid-template-rows: repeat(288, calc(var(--hour) / 12)); }
.gutter { grid-column: 1; }
.hour { grid-column: 1; grid-row-end: span 1; align-self: start; transform: translateY(-50%); padding-right: 8px; text-align: right; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-col { position: relative; border-left: 1px solid var(--line); cursor: copy; }
.day-col > * { grid-column: 1; }
.day-col::after {
  content: ""; grid-column: 1; grid-row: 1 / -1; z-index: 1; pointer-events: none;
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% var(--hour);
}
.day-col.is-weekend { background: color-mix(in srgb, var(--canvas) 45%, var(--day)); }
.night { z-index: 0; background: var(--night); pointer-events: none; }
.ev {
  position: relative; z-index: 2; align-self: stretch; justify-self: start; min-height: 18px; min-width: 0;
  margin: 1px 0 1px 2px; padding: 3px 7px; border: 0; border-left: 3px solid var(--edge); border-radius: 6px;
  background: var(--fill); color: var(--text); text-align: left; overflow: hidden;
  font-size: 12.5px; line-height: 1.25; box-shadow: 0 0 0 1px var(--day);
  display: flex; flex-direction: column; gap: 1px;
}
.ev:hover { filter: brightness(0.97) saturate(1.1); z-index: 3; }
.ev-title { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: normal; }
.ev-time, .ev-place { font-size: 11.5px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ev.is-medium .ev-title, .ev.is-hour .ev-title { -webkit-line-clamp: 1; }
.ev.is-short { flex-direction: row; align-items: baseline; gap: 6px; padding-top: 2px; padding-bottom: 0; }
.ev.is-short .ev-time { flex: 0 1000 auto; min-width: 0; }
.ev.is-narrow .ev-title { display: block; white-space: nowrap; text-overflow: ellipsis; }
.ev.is-narrow.is-short .ev-time { display: none; }
.ev.is-short .ev-title { -webkit-line-clamp: 1; flex: 0 1 auto; min-width: 0; white-space: nowrap; display: block; text-overflow: ellipsis; }
.ev.from-before { border-top-left-radius: 0; border-top-right-radius: 0; }
.ev.to-after { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.now {
  position: relative; z-index: 4; align-self: start; height: 2px; margin-top: -1px; pointer-events: none;
  background: linear-gradient(90deg, var(--sun-a), var(--sun-b));
}
.now::before {
  content: ""; position: absolute; left: -7px; top: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sun-b), var(--sun-a) 70%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun-b) 30%, transparent), 0 0 14px color-mix(in srgb, var(--sun-a) 45%, transparent);
}

/* ----- Month ------------------------------------------------------------------------------- */
.month {
  --weeks: 5;
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  margin: 0 20px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--day); overflow: hidden;
}
.month.weeks-4 { --weeks: 4; } .month.weeks-6 { --weeks: 6; }
.month-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.month-head span { padding: 8px 10px; font-size: 12.5px; color: var(--ink-3); }
.month-body { flex: 1; display: grid; grid-template-rows: repeat(var(--weeks), minmax(0, 1fr)); min-height: 0; }
.mweek {
  --lanes: 0;
  display: grid; grid-template-columns: 0 repeat(7, minmax(0, 1fr)); grid-template-rows: 32px minmax(0, 1fr);
  row-gap: 2px; min-height: 0; border-top: 1px solid var(--line);
}
.mweek:first-child { border-top: 0; }
.mweek.lanes-1 { grid-template-rows: 32px 22px minmax(0, 1fr); } .mweek.lanes-2 { grid-template-rows: 32px repeat(2, 22px) minmax(0, 1fr); } .mweek.lanes-3 { grid-template-rows: 32px repeat(3, 22px) minmax(0, 1fr); }
.mcell { grid-row: 1 / -1; border-left: 1px solid var(--line); cursor: copy; }
.mcell.col-1 { border-left: 0; }
.mcell.is-outside { background: color-mix(in srgb, var(--night) 60%, transparent); }
.mnum {
  margin: 5px 0 0 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none;
  font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.mnum:hover { background: var(--wash); }
.mcell.is-outside .mnum { color: var(--ink-3); font-weight: 500; }
.mcell.is-today .mnum { background: linear-gradient(135deg, var(--sun-a), var(--sun-b)); color: var(--sun-ink); }
.mweek .bar { z-index: 1; height: 21px; margin: 0 4px; }
.mlines { grid-row: -2 / -1; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 3px 4px; overflow: hidden; }
.line {
  display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 1px 5px; border: 0; border-radius: 5px;
  background: none; color: var(--ink); font-size: 12.5px; text-align: left;
}
.line:hover { background: var(--wash); }
.line::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--edge); }
.line-time { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.line-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlines .due { height: 21px; }
.mlines .more { align-self: flex-start; padding: 1px 5px; }

/* ----- List -------------------------------------------------------------------------------- */
.list { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 40px; }
.list > * { max-width: 780px; }
.lday { margin-top: 18px; }
.lday-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px 2px; font-weight: 500; }
.rel { font-family: var(--font-display); font-size: 20px; font-weight: 560; letter-spacing: -0.01em; }
.full { font-size: 13px; color: var(--ink-3); }
.lday.is-today .rel::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sun-a), var(--sun-b)); vertical-align: 1px;
}
.rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--day); overflow: hidden; }
.row {
  display: grid; grid-template-columns: 136px 10px minmax(0, 1fr); align-items: baseline; gap: 12px;
  width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; color: var(--ink);
}
.rows li:first-child .row { border-top: 0; }
.row:hover { background: var(--wash); }
.row-when { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row-swatch { align-self: start; margin-top: 5px; width: 10px; height: 10px; border-radius: 3px; background: var(--edge); }
.row-due .row-swatch { background: none; width: auto; height: auto; color: var(--edge); }
.row-due .row-swatch .glyph { width: 16px; height: 16px; margin-left: -3px; }
.row-main { display: flex; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.row-title { font-weight: 600; }
.row-due.is-done .row-title { text-decoration: line-through; color: var(--ink-3); }
.row-place { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--ink-3); }
.row-place .glyph { width: 14px; height: 14px; }
.list-end { margin: 22px 2px 0; font-size: 13.5px; color: var(--ink-3); }
.empty { margin: 48px auto; text-align: center; color: var(--ink-2); }
.empty-title { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin: 0 0 6px; }

/* ----- Sheets ------------------------------------------------------------------------------ */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); animation: fade 0.16s ease-out; }
.sheet {
  position: fixed; z-index: 41; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 22px 24px 20px; border-radius: 18px; background: var(--day); box-shadow: var(--shadow);
  animation: rise 0.18s ease-out;
}
.sheet.is-detail { border-top: 6px solid var(--edge, var(--line)); }
.sheet.is-scope { width: min(440px, calc(100vw - 32px)); }
.sheet-close { position: absolute; top: 12px; right: 12px; }
.sheet-title { margin: 0 40px 14px 0; font-size: 21px; font-weight: 650; line-height: 1.25; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.sheet-text { margin: 0 0 16px; color: var(--ink-2); }
.facts { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fact { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; overflow-wrap: anywhere; }
.fact .glyph { color: var(--ink-3); margin-top: 1px; }
.fact-sub { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.fact-sub.is-live { color: var(--ink); font-weight: 600; }
.sheet-note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); }
.fact-notes span { white-space: normal; line-height: 1.5; }
.swatch-dot { width: 12px; height: 12px; margin: 4px 0 0 4px; border-radius: 4px; background: var(--edge); }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.scope-choices { display: flex; flex-direction: column; gap: 8px; }
.scope-choices .button { justify-content: flex-start; min-height: 42px; }
.shortcuts { display: grid; gap: 8px; margin: 0; }
.shortcut { display: grid; grid-template-columns: 110px 1fr; align-items: center; }
.shortcut dd { margin: 0; color: var(--ink-2); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }

/* ----- Forms ------------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.field label, .field-row label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="date"],
input[type="time"], input[type="number"], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 11px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--day); color: var(--ink);
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.narrow { width: 84px !important; display: inline-block; }
.inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 12px; font-size: 14.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.when-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 10px; }
.event-form:not(.has-times) .time-field { display: none; }
.event-form:not(.has-times) .when-grid { grid-template-columns: 1fr 1fr; }
.zone-line { margin: -2px 0 12px; font-size: 13.5px; color: var(--ink-3); }
.custom-repeat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 12px; }
.custom-repeat select { width: auto; }
.weekdays { display: flex; gap: 4px; border: 0; margin: 0; padding: 0; }
.day-pick input { position: absolute; opacity: 0; pointer-events: none; }
.day-pick span[aria-hidden] {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.day-pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--day); }
.day-pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -4px 0 12px; }
.field-row select, .field-row input[type="date"] { width: auto; }
.form-error { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 12%, var(--day)); color: var(--danger); font-size: 14px; }
.form-note { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; }
.field-hint { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.colors { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 12px; }
.color-pick input { position: absolute; opacity: 0; pointer-events: none; }
.color-pick .swatch { width: 28px; height: 28px; border-radius: 50%; background: var(--edge); border: 3px solid var(--day); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.color-pick input:checked + .swatch { box-shadow: 0 0 0 2px var(--ink); }
.color-pick input:focus-visible + .swatch { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ----- Settings ---------------------------------------------------------------------------- */
/* Scrolling columns contain their positioned children (hidden radios, screen-reader text), or those stretch the whole page. */
.settings { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 56px; }
.settings > * { max-width: 760px; }
.settings-section { padding: 18px 0 26px; border-bottom: 1px solid var(--line); }
.settings-section:last-child { border-bottom: 0; }
.settings-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 560; letter-spacing: -0.01em; }
.settings-sub { margin: 22px 0 8px; font-size: 16px; }
.settings-lede, .settings-text { margin: 0 0 14px; color: var(--ink-2); }
.settings-form { margin-top: 10px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.cal-rows { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--day); }
.cal-row { padding: 12px 14px; border-top: 1px solid var(--line); }
.cal-row:first-child { border-top: 0; }
.cal-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cal-row-main .swatch-dot { margin: 0; align-self: center; }
.cal-row-name { font-weight: 600; }
.cal-row-kind { font-size: 13px; color: var(--ink-3); }
.cal-row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.calendar-edit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.calendar-new { margin-top: 6px; }
.feed { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--wash); }
.feed label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.feed-row { display: flex; gap: 8px; }
.feed-row input { font-size: 13px; }
.import-preview { margin-top: 6px; padding: 14px; border-radius: 12px; background: var(--wash); }
.import-preview p { margin: 0 0 10px; }
.import-notes { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; }
.import-form { margin-top: 8px; }
.link-check { align-items: flex-start; }
.link-check strong { display: block; font-size: 14.5px; }
/* Sharing: who has it, and the form to share it with someone else. */
.share-panel { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--wash); }
.share-panel .settings-text { margin-bottom: 10px; }
.people { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 10px; background: var(--day); }
.person-who { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-weight: 600; overflow-wrap: anywhere; }
.person-note { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.person-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.person-actions select { width: auto; min-width: 0; font-size: 13.5px; }
.share-form { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 0 10px; align-items: end; }
.share-form .form-actions { margin: 0 0 14px; }
.share-panel .field-hint { margin: 0; }

/* ----- Toast ------------------------------------------------------------------------------- */
.toast-slot { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100vw - 32px); }
.toast {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px 11px 16px; border-radius: 12px;
  background: var(--ink); color: var(--day); box-shadow: var(--shadow); font-size: 14px; animation: up 0.18s ease-out;
}
.toast.is-problem { background: var(--danger); color: #fff; }
.toast-action { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 0; }

/* ----- Loading ----------------------------------------------------------------------------- */
.loading-grid { flex: 1; margin: 0 20px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--day); }
.app.is-loading .main::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
  background: linear-gradient(90deg, transparent, var(--sun-a), var(--sun-b), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: tide 1.2s ease-in-out infinite;
}
@keyframes tide { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ----- Public page ------------------------------------------------------------------------- */
.public { min-height: 100dvh; display: flex; flex-direction: column; }
.public-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; }
.public-link { color: var(--ink-2); font-size: 14px; text-decoration: none; }
.public-link:hover { color: var(--ink); text-decoration: underline; }
.public-main { flex: 1; }
.hero {
  display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: 56px; align-items: start;
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px 32px 48px;
}
.hero-title { margin: 18px 0 16px; font-family: var(--font-display); font-weight: 560; font-size: clamp(38px, 4.2vw, 56px); line-height: 1.03; letter-spacing: -0.025em; }
.hero-lede { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.signin { margin-top: 28px; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--day); }
.signin-title { margin: 0 0 14px; font-size: 17px; }
.signin-step { margin: 0 0 12px; color: var(--ink-2); }
.signin-alt { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font-size: 14px; }
.signin-new { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.hero-sample { margin: 0; min-width: 0; }
.sample-frame { display: flex; height: 600px; border-radius: 18px; box-shadow: var(--shadow); }
.sample-frame .grid { margin: 0; --hour: 40px; }
.sample-frame .grid-body { overflow: hidden; }
.sample-frame .grid-body > * { margin-top: calc(var(--hour) * -6.25); }
.hero-sample figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.public-points { padding: 8px 32px 64px; }
.points { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; max-width: 1000px; margin: 0 auto; padding: 0; }
.point-glyph { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--wash); color: var(--ink); }
.point-title { margin: 12px 0 6px; font-size: 17px; }
.point-text { margin: 0; color: var(--ink-2); line-height: 1.6; max-width: 40em; }
.public-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 32px 28px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.public-foot p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.public-foot a { color: var(--ink-2); }
.not-found { max-width: 560px; margin: 0 auto; padding: 72px 24px; }

/* ----- Narrower screens -------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .period { grid-column: 1 / -1; }
  .views { justify-self: end; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sample-frame { height: 480px; }
}
@media (max-width: 760px) {
  :root { --hour: 44px; --gutter: 44px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(320px, 86vw);
    transform: translateX(-102%); transition: transform 0.2s ease-out; box-shadow: var(--shadow);
  }
  .rail.is-open { transform: none; }
  .app.rail-is-open::after { content: ""; position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
  .rail-close, .rail-open { display: inline-grid; }
  .toolbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px 8px; gap: 8px; }
  .period { grid-column: 2; font-size: 21px; }
  .period-long { display: none; }
  .period-short { display: inline; }
  .nav { grid-column: 3; }
  .views { grid-column: 1 / -1; justify-self: stretch; }
  .view-button { flex: 1; }
  .grid, .month { margin: 0 8px 8px; border-radius: 14px; }
  .list, .settings { padding-left: 12px; padding-right: 12px; }
  .grid.cols-7 .ev-time, .grid.cols-7 .ev-place { display: none; }
  .grid.cols-7 .ev { padding: 2px 4px; font-size: 11.5px; }
  .grid.cols-7 .ev-title { display: block; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
  .grid.cols-7 .bar, .grid.cols-7 .due { padding-left: 4px; padding-right: 4px; }
  .grid.cols-7 .dom { width: 30px; height: 30px; font-size: 17px; }
  .mweek { grid-template-rows: 30px minmax(0, 1fr); }
  .mweek.lanes-1 { grid-template-rows: 30px 18px minmax(0, 1fr); } .mweek.lanes-2 { grid-template-rows: 30px repeat(2, 18px) minmax(0, 1fr); } .mweek.lanes-3 { grid-template-rows: 30px repeat(3, 18px) minmax(0, 1fr); }
  .mweek .bar { height: 17px; font-size: 11px; padding: 0 4px; }
  .line { padding: 1px 3px; }
  .line-time, .line-title { display: none; }
  .mlines { flex-direction: row; flex-wrap: wrap; gap: 3px; padding: 2px 6px; }
  .mlines .due .due-title { display: none; }
  .row { grid-template-columns: 118px 10px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .row-when { font-size: 13px; white-space: nowrap; }
  .sheet {
    top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%;
    max-height: 90dvh; border-radius: 18px 18px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    animation: up 0.2s ease-out;
  }
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .share-form { grid-template-columns: minmax(0, 1fr); }
  .share-panel { padding: 12px; }
  .public-bar { padding: 14px 16px; }
  .hero { padding: 8px 16px 32px; }
  .public-points { padding: 8px 16px 48px; }
  .points { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .public-foot { padding: 18px 16px 24px; }
  .sample-frame { height: 400px; }
  .toast-slot { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Local runs only: how to sign in to the stand-in Hottub. */
.signin-hint { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wash); color: var(--ink-2); font-size: 13.5px; }
.signin-hint:empty { display: none; }

/* Written by hottub_calendar_ui::grid::geometry_css. */
.t-0{grid-row-start:1}.t-1{grid-row-start:2}.t-2{grid-row-start:3}.t-3{grid-row-start:4}.t-4{grid-row-start:5}.t-5{grid-row-start:6}.t-6{grid-row-start:7}.t-7{grid-row-start:8}.t-8{grid-row-start:9}.t-9{grid-row-start:10}.t-10{grid-row-start:11}.t-11{grid-row-start:12}.t-12{grid-row-start:13}.t-13{grid-row-start:14}.t-14{grid-row-start:15}.t-15{grid-row-start:16}.t-16{grid-row-start:17}.t-17{grid-row-start:18}.t-18{grid-row-start:19}.t-19{grid-row-start:20}.t-20{grid-row-start:21}.t-21{grid-row-start:22}.t-22{grid-row-start:23}.t-23{grid-row-start:24}.t-24{grid-row-start:25}.t-25{grid-row-start:26}.t-26{grid-row-start:27}.t-27{grid-row-start:28}.t-28{grid-row-start:29}.t-29{grid-row-start:30}.t-30{grid-row-start:31}.t-31{grid-row-start:32}.t-32{grid-row-start:33}.t-33{grid-row-start:34}.t-34{grid-row-start:35}.t-35{grid-row-start:36}.t-36{grid-row-start:37}.t-37{grid-row-start:38}.t-38{grid-row-start:39}.t-39{grid-row-start:40}.t-40{grid-row-start:41}.t-41{grid-row-start:42}.t-42{grid-row-start:43}.t-43{grid-row-start:44}.t-44{grid-row-start:45}.t-45{grid-row-start:46}.t-46{grid-row-start:47}.t-47{grid-row-start:48}.t-48{grid-row-start:49}.t-49{grid-row-start:50}.t-50{grid-row-start:51}.t-51{grid-row-start:52}.t-52{grid-row-start:53}.t-53{grid-row-start:54}.t-54{grid-row-start:55}.t-55{grid-row-start:56}.t-56{grid-row-start:57}.t-57{grid-row-start:58}.t-58{grid-row-start:59}.t-59{grid-row-start:60}.t-60{grid-row-start:61}.t-61{grid-row-start:62}.t-62{grid-row-start:63}.t-63{grid-row-start:64}.t-64{grid-row-start:65}.t-65{grid-row-start:66}.t-66{grid-row-start:67}.t-67{grid-row-start:68}.t-68{grid-row-start:69}.t-69{grid-row-start:70}.t-70{grid-row-start:71}.t-71{grid-row-start:72}.t-72{grid-row-start:73}.t-73{grid-row-start:74}.t-74{grid-row-start:75}.t-75{grid-row-start:76}.t-76{grid-row-start:77}.t-77{grid-row-start:78}.t-78{grid-row-start:79}.t-79{grid-row-start:80}.t-80{grid-row-start:81}.t-81{grid-row-start:82}.t-82{grid-row-start:83}.t-83{grid-row-start:84}.t-84{grid-row-start:85}.t-85{grid-row-start:86}.t-86{grid-row-start:87}.t-87{grid-row-start:88}.t-88{grid-row-start:89}.t-89{grid-row-start:90}.t-90{grid-row-start:91}.t-91{grid-row-start:92}.t-92{grid-row-start:93}.t-93{grid-row-start:94}.t-94{grid-row-start:95}.t-95{grid-row-start:96}.t-96{grid-row-start:97}.t-97{grid-row-start:98}.t-98{grid-row-start:99}.t-99{grid-row-start:100}.t-100{grid-row-start:101}.t-101{grid-row-start:102}.t-102{grid-row-start:103}.t-103{grid-row-start:104}.t-104{grid-row-start:105}.t-105{grid-row-start:106}.t-106{grid-row-start:107}.t-107{grid-row-start:108}.t-108{grid-row-start:109}.t-109{grid-row-start:110}.t-110{grid-row-start:111}.t-111{grid-row-start:112}.t-112{grid-row-start:113}.t-113{grid-row-start:114}.t-114{grid-row-start:115}.t-115{grid-row-start:116}.t-116{grid-row-start:117}.t-117{grid-row-start:118}.t-118{grid-row-start:119}.t-119{grid-row-start:120}.t-120{grid-row-start:121}.t-121{grid-row-start:122}.t-122{grid-row-start:123}.t-123{grid-row-start:124}.t-124{grid-row-start:125}.t-125{grid-row-start:126}.t-126{grid-row-start:127}.t-127{grid-row-start:128}.t-128{grid-row-start:129}.t-129{grid-row-start:130}.t-130{grid-row-start:131}.t-131{grid-row-start:132}.t-132{grid-row-start:133}.t-133{grid-row-start:134}.t-134{grid-row-start:135}.t-135{grid-row-start:136}.t-136{grid-row-start:137}.t-137{grid-row-start:138}.t-138{grid-row-start:139}.t-139{grid-row-start:140}.t-140{grid-row-start:141}.t-141{grid-row-start:142}.t-142{grid-row-start:143}.t-143{grid-row-start:144}.t-144{grid-row-start:145}.t-145{grid-row-start:146}.t-146{grid-row-start:147}.t-147{grid-row-start:148}.t-148{grid-row-start:149}.t-149{grid-row-start:150}.t-150{grid-row-start:151}.t-151{grid-row-start:152}.t-152{grid-row-start:153}.t-153{grid-row-start:154}.t-154{grid-row-start:155}.t-155{grid-row-start:156}.t-156{grid-row-start:157}.t-157{grid-row-start:158}.t-158{grid-row-start:159}.t-159{grid-row-start:160}.t-160{grid-row-start:161}.t-161{grid-row-start:162}.t-162{grid-row-start:163}.t-163{grid-row-start:164}.t-164{grid-row-start:165}.t-165{grid-row-start:166}.t-166{grid-row-start:167}.t-167{grid-row-start:168}.t-168{grid-row-start:169}.t-169{grid-row-start:170}.t-170{grid-row-start:171}.t-171{grid-row-start:172}.t-172{grid-row-start:173}.t-173{grid-row-start:174}.t-174{grid-row-start:175}.t-175{grid-row-start:176}.t-176{grid-row-start:177}.t-177{grid-row-start:178}.t-178{grid-row-start:179}.t-179{grid-row-start:180}.t-180{grid-row-start:181}.t-181{grid-row-start:182}.t-182{grid-row-start:183}.t-183{grid-row-start:184}.t-184{grid-row-start:185}.t-185{grid-row-start:186}.t-186{grid-row-start:187}.t-187{grid-row-start:188}.t-188{grid-row-start:189}.t-189{grid-row-start:190}.t-190{grid-row-start:191}.t-191{grid-row-start:192}.t-192{grid-row-start:193}.t-193{grid-row-start:194}.t-194{grid-row-start:195}.t-195{grid-row-start:196}.t-196{grid-row-start:197}.t-197{grid-row-start:198}.t-198{grid-row-start:199}.t-199{grid-row-start:200}.t-200{grid-row-start:201}.t-201{grid-row-start:202}.t-202{grid-row-start:203}.t-203{grid-row-start:204}.t-204{grid-row-start:205}.t-205{grid-row-start:206}.t-206{grid-row-start:207}.t-207{grid-row-start:208}.t-208{grid-row-start:209}.t-209{grid-row-start:210}.t-210{grid-row-start:211}.t-211{grid-row-start:212}.t-212{grid-row-start:213}.t-213{grid-row-start:214}.t-214{grid-row-start:215}.t-215{grid-row-start:216}.t-216{grid-row-start:217}.t-217{grid-row-start:218}.t-218{grid-row-start:219}.t-219{grid-row-start:220}.t-220{grid-row-start:221}.t-221{grid-row-start:222}.t-222{grid-row-start:223}.t-223{grid-row-start:224}.t-224{grid-row-start:225}.t-225{grid-row-start:226}.t-226{grid-row-start:227}.t-227{grid-row-start:228}.t-228{grid-row-start:229}.t-229{grid-row-start:230}.t-230{grid-row-start:231}.t-231{grid-row-start:232}.t-232{grid-row-start:233}.t-233{grid-row-start:234}.t-234{grid-row-start:235}.t-235{grid-row-start:236}.t-236{grid-row-start:237}.t-237{grid-row-start:238}.t-238{grid-row-start:239}.t-239{grid-row-start:240}.t-240{grid-row-start:241}.t-241{grid-row-start:242}.t-242{grid-row-start:243}.t-243{grid-row-start:244}.t-244{grid-row-start:245}.t-245{grid-row-start:246}.t-246{grid-row-start:247}.t-247{grid-row-start:248}.t-248{grid-row-start:249}.t-249{grid-row-start:250}.t-250{grid-row-start:251}.t-251{grid-row-start:252}.t-252{grid-row-start:253}.t-253{grid-row-start:254}.t-254{grid-row-start:255}.t-255{grid-row-start:256}.t-256{grid-row-start:257}.t-257{grid-row-start:258}.t-258{grid-row-start:259}.t-259{grid-row-start:260}.t-260{grid-row-start:261}.t-261{grid-row-start:262}.t-262{grid-row-start:263}.t-263{grid-row-start:264}.t-264{grid-row-start:265}.t-265{grid-row-start:266}.t-266{grid-row-start:267}.t-267{grid-row-start:268}.t-268{grid-row-start:269}.t-269{grid-row-start:270}.t-270{grid-row-start:271}.t-271{grid-row-start:272}.t-272{grid-row-start:273}.t-273{grid-row-start:274}.t-274{grid-row-start:275}.t-275{grid-row-start:276}.t-276{grid-row-start:277}.t-277{grid-row-start:278}.t-278{grid-row-start:279}.t-279{grid-row-start:280}.t-280{grid-row-start:281}.t-281{grid-row-start:282}.t-282{grid-row-start:283}.t-283{grid-row-start:284}.t-284{grid-row-start:285}.t-285{grid-row-start:286}.t-286{grid-row-start:287}.t-287{grid-row-start:288}
.h-1{grid-row-end:span 1}.h-2{grid-row-end:span 2}.h-3{grid-row-end:span 3}.h-4{grid-row-end:span 4}.h-5{grid-row-end:span 5}.h-6{grid-row-end:span 6}.h-7{grid-row-end:span 7}.h-8{grid-row-end:span 8}.h-9{grid-row-end:span 9}.h-10{grid-row-end:span 10}.h-11{grid-row-end:span 11}.h-12{grid-row-end:span 12}.h-13{grid-row-end:span 13}.h-14{grid-row-end:span 14}.h-15{grid-row-end:span 15}.h-16{grid-row-end:span 16}.h-17{grid-row-end:span 17}.h-18{grid-row-end:span 18}.h-19{grid-row-end:span 19}.h-20{grid-row-end:span 20}.h-21{grid-row-end:span 21}.h-22{grid-row-end:span 22}.h-23{grid-row-end:span 23}.h-24{grid-row-end:span 24}.h-25{grid-row-end:span 25}.h-26{grid-row-end:span 26}.h-27{grid-row-end:span 27}.h-28{grid-row-end:span 28}.h-29{grid-row-end:span 29}.h-30{grid-row-end:span 30}.h-31{grid-row-end:span 31}.h-32{grid-row-end:span 32}.h-33{grid-row-end:span 33}.h-34{grid-row-end:span 34}.h-35{grid-row-end:span 35}.h-36{grid-row-end:span 36}.h-37{grid-row-end:span 37}.h-38{grid-row-end:span 38}.h-39{grid-row-end:span 39}.h-40{grid-row-end:span 40}.h-41{grid-row-end:span 41}.h-42{grid-row-end:span 42}.h-43{grid-row-end:span 43}.h-44{grid-row-end:span 44}.h-45{grid-row-end:span 45}.h-46{grid-row-end:span 46}.h-47{grid-row-end:span 47}.h-48{grid-row-end:span 48}.h-49{grid-row-end:span 49}.h-50{grid-row-end:span 50}.h-51{grid-row-end:span 51}.h-52{grid-row-end:span 52}.h-53{grid-row-end:span 53}.h-54{grid-row-end:span 54}.h-55{grid-row-end:span 55}.h-56{grid-row-end:span 56}.h-57{grid-row-end:span 57}.h-58{grid-row-end:span 58}.h-59{grid-row-end:span 59}.h-60{grid-row-end:span 60}.h-61{grid-row-end:span 61}.h-62{grid-row-end:span 62}.h-63{grid-row-end:span 63}.h-64{grid-row-end:span 64}.h-65{grid-row-end:span 65}.h-66{grid-row-end:span 66}.h-67{grid-row-end:span 67}.h-68{grid-row-end:span 68}.h-69{grid-row-end:span 69}.h-70{grid-row-end:span 70}.h-71{grid-row-end:span 71}.h-72{grid-row-end:span 72}.h-73{grid-row-end:span 73}.h-74{grid-row-end:span 74}.h-75{grid-row-end:span 75}.h-76{grid-row-end:span 76}.h-77{grid-row-end:span 77}.h-78{grid-row-end:span 78}.h-79{grid-row-end:span 79}.h-80{grid-row-end:span 80}.h-81{grid-row-end:span 81}.h-82{grid-row-end:span 82}.h-83{grid-row-end:span 83}.h-84{grid-row-end:span 84}.h-85{grid-row-end:span 85}.h-86{grid-row-end:span 86}.h-87{grid-row-end:span 87}.h-88{grid-row-end:span 88}.h-89{grid-row-end:span 89}.h-90{grid-row-end:span 90}.h-91{grid-row-end:span 91}.h-92{grid-row-end:span 92}.h-93{grid-row-end:span 93}.h-94{grid-row-end:span 94}.h-95{grid-row-end:span 95}.h-96{grid-row-end:span 96}.h-97{grid-row-end:span 97}.h-98{grid-row-end:span 98}.h-99{grid-row-end:span 99}.h-100{grid-row-end:span 100}.h-101{grid-row-end:span 101}.h-102{grid-row-end:span 102}.h-103{grid-row-end:span 103}.h-104{grid-row-end:span 104}.h-105{grid-row-end:span 105}.h-106{grid-row-end:span 106}.h-107{grid-row-end:span 107}.h-108{grid-row-end:span 108}.h-109{grid-row-end:span 109}.h-110{grid-row-end:span 110}.h-111{grid-row-end:span 111}.h-112{grid-row-end:span 112}.h-113{grid-row-end:span 113}.h-114{grid-row-end:span 114}.h-115{grid-row-end:span 115}.h-116{grid-row-end:span 116}.h-117{grid-row-end:span 117}.h-118{grid-row-end:span 118}.h-119{grid-row-end:span 119}.h-120{grid-row-end:span 120}.h-121{grid-row-end:span 121}.h-122{grid-row-end:span 122}.h-123{grid-row-end:span 123}.h-124{grid-row-end:span 124}.h-125{grid-row-end:span 125}.h-126{grid-row-end:span 126}.h-127{grid-row-end:span 127}.h-128{grid-row-end:span 128}.h-129{grid-row-end:span 129}.h-130{grid-row-end:span 130}.h-131{grid-row-end:span 131}.h-132{grid-row-end:span 132}.h-133{grid-row-end:span 133}.h-134{grid-row-end:span 134}.h-135{grid-row-end:span 135}.h-136{grid-row-end:span 136}.h-137{grid-row-end:span 137}.h-138{grid-row-end:span 138}.h-139{grid-row-end:span 139}.h-140{grid-row-end:span 140}.h-141{grid-row-end:span 141}.h-142{grid-row-end:span 142}.h-143{grid-row-end:span 143}.h-144{grid-row-end:span 144}.h-145{grid-row-end:span 145}.h-146{grid-row-end:span 146}.h-147{grid-row-end:span 147}.h-148{grid-row-end:span 148}.h-149{grid-row-end:span 149}.h-150{grid-row-end:span 150}.h-151{grid-row-end:span 151}.h-152{grid-row-end:span 152}.h-153{grid-row-end:span 153}.h-154{grid-row-end:span 154}.h-155{grid-row-end:span 155}.h-156{grid-row-end:span 156}.h-157{grid-row-end:span 157}.h-158{grid-row-end:span 158}.h-159{grid-row-end:span 159}.h-160{grid-row-end:span 160}.h-161{grid-row-end:span 161}.h-162{grid-row-end:span 162}.h-163{grid-row-end:span 163}.h-164{grid-row-end:span 164}.h-165{grid-row-end:span 165}.h-166{grid-row-end:span 166}.h-167{grid-row-end:span 167}.h-168{grid-row-end:span 168}.h-169{grid-row-end:span 169}.h-170{grid-row-end:span 170}.h-171{grid-row-end:span 171}.h-172{grid-row-end:span 172}.h-173{grid-row-end:span 173}.h-174{grid-row-end:span 174}.h-175{grid-row-end:span 175}.h-176{grid-row-end:span 176}.h-177{grid-row-end:span 177}.h-178{grid-row-end:span 178}.h-179{grid-row-end:span 179}.h-180{grid-row-end:span 180}.h-181{grid-row-end:span 181}.h-182{grid-row-end:span 182}.h-183{grid-row-end:span 183}.h-184{grid-row-end:span 184}.h-185{grid-row-end:span 185}.h-186{grid-row-end:span 186}.h-187{grid-row-end:span 187}.h-188{grid-row-end:span 188}.h-189{grid-row-end:span 189}.h-190{grid-row-end:span 190}.h-191{grid-row-end:span 191}.h-192{grid-row-end:span 192}.h-193{grid-row-end:span 193}.h-194{grid-row-end:span 194}.h-195{grid-row-end:span 195}.h-196{grid-row-end:span 196}.h-197{grid-row-end:span 197}.h-198{grid-row-end:span 198}.h-199{grid-row-end:span 199}.h-200{grid-row-end:span 200}.h-201{grid-row-end:span 201}.h-202{grid-row-end:span 202}.h-203{grid-row-end:span 203}.h-204{grid-row-end:span 204}.h-205{grid-row-end:span 205}.h-206{grid-row-end:span 206}.h-207{grid-row-end:span 207}.h-208{grid-row-end:span 208}.h-209{grid-row-end:span 209}.h-210{grid-row-end:span 210}.h-211{grid-row-end:span 211}.h-212{grid-row-end:span 212}.h-213{grid-row-end:span 213}.h-214{grid-row-end:span 214}.h-215{grid-row-end:span 215}.h-216{grid-row-end:span 216}.h-217{grid-row-end:span 217}.h-218{grid-row-end:span 218}.h-219{grid-row-end:span 219}.h-220{grid-row-end:span 220}.h-221{grid-row-end:span 221}.h-222{grid-row-end:span 222}.h-223{grid-row-end:span 223}.h-224{grid-row-end:span 224}.h-225{grid-row-end:span 225}.h-226{grid-row-end:span 226}.h-227{grid-row-end:span 227}.h-228{grid-row-end:span 228}.h-229{grid-row-end:span 229}.h-230{grid-row-end:span 230}.h-231{grid-row-end:span 231}.h-232{grid-row-end:span 232}.h-233{grid-row-end:span 233}.h-234{grid-row-end:span 234}.h-235{grid-row-end:span 235}.h-236{grid-row-end:span 236}.h-237{grid-row-end:span 237}.h-238{grid-row-end:span 238}.h-239{grid-row-end:span 239}.h-240{grid-row-end:span 240}.h-241{grid-row-end:span 241}.h-242{grid-row-end:span 242}.h-243{grid-row-end:span 243}.h-244{grid-row-end:span 244}.h-245{grid-row-end:span 245}.h-246{grid-row-end:span 246}.h-247{grid-row-end:span 247}.h-248{grid-row-end:span 248}.h-249{grid-row-end:span 249}.h-250{grid-row-end:span 250}.h-251{grid-row-end:span 251}.h-252{grid-row-end:span 252}.h-253{grid-row-end:span 253}.h-254{grid-row-end:span 254}.h-255{grid-row-end:span 255}.h-256{grid-row-end:span 256}.h-257{grid-row-end:span 257}.h-258{grid-row-end:span 258}.h-259{grid-row-end:span 259}.h-260{grid-row-end:span 260}.h-261{grid-row-end:span 261}.h-262{grid-row-end:span 262}.h-263{grid-row-end:span 263}.h-264{grid-row-end:span 264}.h-265{grid-row-end:span 265}.h-266{grid-row-end:span 266}.h-267{grid-row-end:span 267}.h-268{grid-row-end:span 268}.h-269{grid-row-end:span 269}.h-270{grid-row-end:span 270}.h-271{grid-row-end:span 271}.h-272{grid-row-end:span 272}.h-273{grid-row-end:span 273}.h-274{grid-row-end:span 274}.h-275{grid-row-end:span 275}.h-276{grid-row-end:span 276}.h-277{grid-row-end:span 277}.h-278{grid-row-end:span 278}.h-279{grid-row-end:span 279}.h-280{grid-row-end:span 280}.h-281{grid-row-end:span 281}.h-282{grid-row-end:span 282}.h-283{grid-row-end:span 283}.h-284{grid-row-end:span 284}.h-285{grid-row-end:span 285}.h-286{grid-row-end:span 286}.h-287{grid-row-end:span 287}.h-288{grid-row-end:span 288}
.lx-1-0{margin-left:calc(0 * 100% / 1)}.lw-1-1{width:calc(1 * 100% / 1 - 3px)}.lx-2-0{margin-left:calc(0 * 100% / 2)}.lx-2-1{margin-left:calc(1 * 100% / 2)}.lw-2-1{width:calc(1 * 100% / 2 - 3px)}.lw-2-2{width:calc(2 * 100% / 2 - 3px)}.lx-3-0{margin-left:calc(0 * 100% / 3)}.lx-3-1{margin-left:calc(1 * 100% / 3)}.lx-3-2{margin-left:calc(2 * 100% / 3)}.lw-3-1{width:calc(1 * 100% / 3 - 3px)}.lw-3-2{width:calc(2 * 100% / 3 - 3px)}.lw-3-3{width:calc(3 * 100% / 3 - 3px)}.lx-4-0{margin-left:calc(0 * 100% / 4)}.lx-4-1{margin-left:calc(1 * 100% / 4)}.lx-4-2{margin-left:calc(2 * 100% / 4)}.lx-4-3{margin-left:calc(3 * 100% / 4)}.lw-4-1{width:calc(1 * 100% / 4 - 3px)}.lw-4-2{width:calc(2 * 100% / 4 - 3px)}.lw-4-3{width:calc(3 * 100% / 4 - 3px)}.lw-4-4{width:calc(4 * 100% / 4 - 3px)}.lx-5-0{margin-left:calc(0 * 100% / 5)}.lx-5-1{margin-left:calc(1 * 100% / 5)}.lx-5-2{margin-left:calc(2 * 100% / 5)}.lx-5-3{margin-left:calc(3 * 100% / 5)}.lx-5-4{margin-left:calc(4 * 100% / 5)}.lw-5-1{width:calc(1 * 100% / 5 - 3px)}.lw-5-2{width:calc(2 * 100% / 5 - 3px)}.lw-5-3{width:calc(3 * 100% / 5 - 3px)}.lw-5-4{width:calc(4 * 100% / 5 - 3px)}.lw-5-5{width:calc(5 * 100% / 5 - 3px)}.lx-6-0{margin-left:calc(0 * 100% / 6)}.lx-6-1{margin-left:calc(1 * 100% / 6)}.lx-6-2{margin-left:calc(2 * 100% / 6)}.lx-6-3{margin-left:calc(3 * 100% / 6)}.lx-6-4{margin-left:calc(4 * 100% / 6)}.lx-6-5{margin-left:calc(5 * 100% / 6)}.lw-6-1{width:calc(1 * 100% / 6 - 3px)}.lw-6-2{width:calc(2 * 100% / 6 - 3px)}.lw-6-3{width:calc(3 * 100% / 6 - 3px)}.lw-6-4{width:calc(4 * 100% / 6 - 3px)}.lw-6-5{width:calc(5 * 100% / 6 - 3px)}.lw-6-6{width:calc(6 * 100% / 6 - 3px)}
.col-1{grid-column-start:2}.span-1{grid-column-end:span 1}.col-2{grid-column-start:3}.span-2{grid-column-end:span 2}.col-3{grid-column-start:4}.span-3{grid-column-end:span 3}.col-4{grid-column-start:5}.span-4{grid-column-end:span 4}.col-5{grid-column-start:6}.span-5{grid-column-end:span 5}.col-6{grid-column-start:7}.span-6{grid-column-end:span 6}.col-7{grid-column-start:8}.span-7{grid-column-end:span 7}
.lane-1{grid-row-start:2}.lane-2{grid-row-start:3}.lane-3{grid-row-start:4}.lane-4{grid-row-start:5}.lane-5{grid-row-start:6}