/* kvk.css — the Event Cycle page (events/), the 28-day
   clock for the recurring events. Loaded after styles.css + events.css.
   The live 28-day clock, the prep chart, the point tables, and the KingShot
   copy box — the page's own components. */

/* ─── Beta demarcation — this page is a work in progress ─ */
.beta-badge {
  display: inline-block;
  margin-top: var(--space-s);
  padding: 0.2rem 0.6rem;
  background: var(--amber);
  color: var(--void);
  border-radius: 2px;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ─── The live clock — 28 cells, four weeks ───────────── */
.cycle-bar {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: 3px;
  margin: var(--space-s) 0 0.4rem;
}
.cycle-keys {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: 3px;
  margin-bottom: 0.4rem;
}
.cycle-keys span {
  grid-column: span 7;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
}
.cell {
  height: 1.05rem;
  border-radius: 2px;
  background: var(--void-2);
  min-width: 0;
}
.cell.brawl { background: rgba(157, 149, 127, 0.28); }
.cell.sg { background: rgba(217, 178, 90, 0.55); }
.cell.mob { background: color-mix(in srgb, var(--amber) 22%, transparent); }
.cell.prep { background: var(--amber-dim); }
.cell.battle { background: var(--enemy); }
.cell.now { outline: 2px solid var(--amber); outline-offset: 1px; }
.cell.mark { outline: 1px dashed var(--ink-muted); outline-offset: 1px; }

/* ─── The calibration — one date anchors the whole wheel ─ */
.epoch-set {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.epoch-set input[type="date"] {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--ink-muted);
  border-radius: 0;
  padding: 0.3rem 0.1rem;
  font-family: var(--body);
  font-size: var(--step--1);
  color-scheme: dark;
}
.epoch-set input[type="date"]:focus { border-bottom-color: var(--amber); outline: none; }

/* ─── The clock controls ──────────────────────────────── */
.cycle-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-top: 0.4rem;
}
.cycle-day-out {
  font-family: var(--display-2);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--amber);
  min-width: 7.5rem;
  text-align: center;
}
.cycle-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.kb {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--signal-line);
  border-radius: 2px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb:hover { color: var(--amber); border-color: var(--amber); }
.kb.on { color: var(--amber); border-color: var(--amber); }
.kb:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }

/* ─── The today card ──────────────────────────────────── */
.today-card {
  margin-top: var(--space-m);
  border-top: 1px solid var(--signal-line);
  padding-top: var(--space-m);
}
.today-empty { font-style: italic; color: var(--ink-muted); font-size: var(--step--1); }
.today-head { margin-bottom: var(--space-s); }
.today-kicker {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.today-title {
  font-family: var(--display-2);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 0.25rem;
}
.today-meta { margin-top: 0.25rem; font-size: var(--step--1); color: var(--ink-dim); }
.today-zone { margin-top: var(--space-s); }
.today-zone h4 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.today-zone h4 .mark { margin-inline-end: 0.4rem; }
.trow {
  display: grid;
  grid-template-columns: 1.7rem 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(157, 149, 127, 0.1);
  font-size: var(--step--1);
}
.trow.keep { grid-template-columns: 1.7rem 1fr auto auto; }
.trow .tmark { text-align: center; }
.trow .tname { color: var(--ink-dim); }
/* The hold mark — an authored pause glyph in the page's caution amber,
   so it never reads as a twin of the blue ok 🆗 chip. Sized like the
   emoji marks beside it; currentColor follows the theme tokens. */
.hold-ico {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  color: var(--amber);
}
/* Inline KingShot game icons (truegold, gem, speedups…) in the today-card
   rows and the prep-chart matrix: real game art, sized to the row's text. */
.ks-ico {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.32em;
  margin-inline-end: 0.3rem;
  object-fit: contain;
  image-rendering: auto;
}
.trow .tpts { font-family: var(--display-2); font-weight: 700; color: var(--amber); white-space: nowrap; }
.trow.dont .tname { color: var(--ink-muted); }
.trow .tkeep { color: var(--amber-dim); font-size: 0.72rem; letter-spacing: 0.12em; }
.trow.v-best { }              /* keep amber pts + ✅ mark (existing tpts/amber) */
.trow.v-ok { }
.trow.v-low .tname, .trow.v-low .tkeep { color: var(--ink-dim); }
.trow.v-hold .tname, .trow.v-hold .tpts, .trow.v-hold .tkeep { color: var(--ink-muted); }

/* ─── The copy box — KingShot-ready plain text (a disclosure) ─ */
/* Folded behind its prompt by default so the today card stays short;
   the summary carries the copy label (the shared ❧ prompt styles). */
.copy-box { margin-top: var(--space-s); }
.copy-box > summary { padding: 0.15rem 0; }
.copy-inner { margin-top: 0.4rem; }
.copy-box textarea {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
  background: var(--void-2);
  color: var(--ink);
  border: 1px solid var(--signal-line);
  border-radius: 2px;
  padding: 0.6rem;
  font: 0.84rem/1.5 ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
}
.copy-box textarea:focus { border-color: var(--amber); outline: none; }
.copy-meta {
  margin-top: 0.4rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.copy-meta b { color: var(--ink-dim); }
.copy-meta .over { color: var(--amber); font-weight: 700; }
.copy-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.copy-note { margin-top: 0.5rem; font-size: var(--step--1); font-style: italic; color: var(--ink-muted); }

/* ─── The prep chart (matrix) ─────────────────────────── */
.legend {
  margin: var(--space-s) 0;
  font-size: var(--step--1);
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.1rem;
}
.lg {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lg.best { color: var(--amber); }
.lg.ok { color: var(--ink-dim); }
.lg.no { color: var(--ink-muted); }
.lg.free { color: var(--amber); }
.lg.keep { color: var(--amber-dim); }

.mtable {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-s) 0 var(--space-m);
  font-size: var(--step--1);
}
.mtable thead th {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid rgba(157, 149, 127, 0.25);
}
.mtable thead th:first-child { text-align: start; }
.mtable tbody td {
  text-align: center;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid rgba(157, 149, 127, 0.1);
}
.mtable tbody td:first-child { text-align: start; color: var(--ink-dim); }
.mtable td.best { color: var(--amber); }
.mtable td.ok { color: var(--ink); }
.mtable td.no { color: var(--ink-muted); opacity: 0.55; }
.mtable td.today, .mtable th.today {
  background: var(--signal-tint);
  box-shadow: inset 0 0 0 1px var(--signal-line);
}
.mtable td.today.best { color: var(--amber); }

/* ─── The day cards & point tables ────────────────────── */
.day {
  border-top: 1px solid var(--signal-line);
  padding-top: var(--space-m);
  margin-top: var(--space-l);
}
.day-title {
  font-family: var(--display-2);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.day-meta {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}
.day-meta b { color: var(--amber); }

/* ─── Disclosure day rows — the tables fold, the label stays glanceable ─ */
details.day { margin-top: var(--space-s); padding-top: var(--space-s); }
details.day[open] { margin-top: var(--space-m); padding-top: var(--space-m); }
details.day > summary {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 0.9rem; row-gap: 0.1rem;
  padding: 0.05rem 0;
}
details.day > summary .day-title { margin: 0; }
details.day > summary .day-meta { margin: 0; }
details.day > summary .sum-mark { margin-inline-end: 0.4rem; }

.pt {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-s) 0;
}
.pt tr { border-bottom: 1px solid rgba(157, 149, 127, 0.12); }
.pt td {
  padding: 0.4rem 0;
  font-size: var(--step--1);
  color: var(--ink-dim);
}
.pt td.pts {
  text-align: end;
  font-family: var(--display-2);
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
  padding-inline-start: 1rem;
}
.pt tr:first-child td { padding-top: 0.15rem; }

/* ─── Responsive — the clock keys shrink before they wrap ─ */
@media (max-width: 480px) {
  .cycle-keys span { font-size: 0.55rem; letter-spacing: 0.08em; }
  .trow { grid-template-columns: 1.5rem 1fr auto; }
}

/* Day-driven page: collapsed event sets stay in the DOM but hidden. */
section[data-phase][hidden], .toc a[hidden] { display: none !important; }

.events-heading { padding: var(--space-m) 0 var(--space-s); }
.events-heading h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.events-heading p { margin-top: 0.4rem; color: var(--ink-dim); font-size: var(--step--1); }
.today-section { padding: var(--space-s) 0 var(--space-m); }
.today-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.today-heading h2 { font-family: var(--body); font-size: var(--step-0); letter-spacing: 0.1em; color: var(--amber); }
.today-heading h2::before { display: none; }
#ks-date { font-size: var(--step--1); color: var(--ink-muted); }
.today-card { margin-top: 0.6rem; padding: var(--space-s); border-top: 2px solid var(--amber); background: var(--void-2); }
.today-title { font-size: clamp(1.35rem, 4.5vw, 2rem); text-transform: none; overflow-wrap: anywhere; }
.today-kicker { letter-spacing: 0.07em; }
.today-actions { margin-top: 0.75rem; }
.today-action { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 0.6rem; font-size: var(--step--1); color: var(--ink); }
.today-action .ks-ico { width: 2rem; height: 2rem; flex: 0 0 2rem; }
.today-action > span { flex: 0 0 2rem; text-align: center; }
.side-run { margin-top: 0.6rem; font-size: var(--step--1); color: var(--ink-dim); }
.today-value .today-zone { margin-top: 0.85rem; }
.today-zone h4 { font-family: var(--body); font-size: var(--step--1); letter-spacing: 0.08em; }
.today-value .trow { grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.4rem 0; }
.today-value .tmark { font-size: 1.4rem; }
.today-value .ks-ico { width: 2rem; height: 2rem; margin: 0; vertical-align: middle; }
.today-value .tname { overflow-wrap: anywhere; }
.today-value .tpts { font-size: 0.95rem; letter-spacing: 0; }
.today-stored { margin-top: 0.8rem; border-top: 1px solid var(--signal-line); }
.today-stored > summary { width: 100%; min-height: 44px; padding: 0.45rem 0; letter-spacing: 0.06em; }
.today-stored > summary .ks-ico { width: 1.5rem; height: 1.5rem; }
.copy-box { margin: 0.8rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--signal-line); }
.copy-btns { align-items: center; }
.copy-link-option { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; max-width: 100%; color: var(--ink-dim); font-size: var(--step--1); cursor: pointer; }
.copy-link-option input { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--amber); }
.copy-link-option span { min-width: 0; }
.copy-link-option input:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.copy-btns .copy-action { background: transparent; color: var(--ink-dim); border-color: var(--signal-line); min-height: 44px; font-size: var(--step--1); font-weight: 400; text-transform: none; letter-spacing: 0; }
.copy-btns .copy-action:hover { color: var(--ink); border-color: var(--ink-muted); }
.copy-btns .copy-action:disabled { opacity: 0.65; cursor: wait; }
.copy-box details { margin-top: 0.3rem; }
.copy-box summary { min-height: 44px; font-size: var(--step--1); color: var(--ink-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
#ks-copy-status { font-size: var(--step--1); color: var(--ink-dim); }
.copy-box textarea { font-size: 1rem; }
.copy-box textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cycle-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; align-items: center; gap: 0.3rem; margin: 0.6rem 0; padding: 0.25rem; border: 1px solid var(--signal-line); border-radius: 2px; background: var(--void-2); }
.cycle-controls .kb { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0.3rem; border: 0; font-weight: 400; letter-spacing: 0; text-transform: none; }
.cycle-controls .kb:hover { background: var(--signal-tint); }
.cycle-controls .kb:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.cycle-day-out { display: grid; gap: 0.15rem; font-family: var(--body); font-size: var(--step--1); line-height: 1.2; min-width: 0; letter-spacing: 0; overflow-wrap: anywhere; }
.cycle-weekday { color: var(--ink); font-weight: 700; }
.cycle-position { font-size: 0.83rem; color: var(--ink-muted); }
.day-step { width: 1.1rem; height: 1.1rem; }
html[dir="rtl"] .day-step { transform: scaleX(-1); }
.cycle-controls #ks-today { margin-inline-start: 0.2rem; padding-inline: 0.65rem; border-inline-start: 1px solid var(--signal-line); border-radius: 0; }
#ks-today[aria-pressed="true"] { color: var(--amber); }
.cycle-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.75rem; }
.cycle-quick .kb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; min-height: 44px; padding: 0.35rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.week-jumps .kb { justify-content: flex-start; align-items: flex-start; flex-direction: column; flex-wrap: nowrap; padding: 0.65rem; gap: 0.6rem; text-align: start; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.week-jump-icon { flex: 0 0 auto; font-size: 1.4rem; text-align: center; }
.week-jump-copy { min-width: 0; }
.week-jump-copy > span { display: block; font-weight: 700; color: var(--ink-dim); }
.week-jump-copy small { display: block; margin-top: 0.25rem; font-size: 0.85rem; font-weight: 400; color: var(--ink-muted); }
.week-jumps .kb[aria-pressed="true"] { border-color: var(--amber); background: var(--signal-tint); }
.week-jumps .kb[aria-pressed="true"] .week-jump-copy > span { color: var(--amber); }
.prep-tasks { list-style: none; padding: 0; margin: var(--space-s) 0; }
.prep-tasks li { border-bottom: 1px solid var(--signal-line); padding: 0.4rem 0; color: var(--ink-dim); }
.cycle-bar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; margin: var(--space-s) 0; }
.cycle-bar .cell { min-height: 44px; height: auto; font: var(--step--1)/1 var(--body); color: var(--ink-dim); background: var(--void-2); border: 1px solid var(--signal-line); cursor: pointer; }
.cycle-bar .cell.now { color: var(--amber); background: var(--signal-tint); outline: 2px solid var(--amber); outline-offset: -2px; }
.cycle-bar .cell.mark { text-decoration: underline; text-underline-offset: 0.25rem; outline: none; }
.cycle-bar .cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.next-day { margin-top: 0.85rem; font-size: var(--step--1); color: var(--ink-dim); border-bottom: 1px solid var(--signal-line); padding-bottom: var(--space-s); }
#cycle { padding: var(--space-m) 0; }
#cycle h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
section[data-phase], #checklist { padding: var(--space-s) 0; border-top: 1px solid var(--signal-line); }
.reference-heading { font-size: clamp(1.2rem, 4vw, 1.7rem); }
.reference-heading::before { display: none !important; }
.reference-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 0.3rem 0; background: transparent; border: 0; text-align: start; font: inherit; letter-spacing: inherit; color: var(--ink-dim); cursor: pointer; }
.reference-toggle:hover, .reference-toggle[aria-expanded="true"] { color: var(--ink); }
.reference-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.reference-mark { flex: 0 0 1.3rem; color: var(--amber); text-align: center; font-family: var(--body); }
.reference-body[hidden] { display: none; }
.reference-body { padding-bottom: var(--space-m); }
.current-phase .reference-toggle { color: var(--amber); }
@media (max-width: 600px) {
  .cycle-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .cycle-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .today-value .trow { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .today-value .tpts { grid-column: 2; }
}

/* Personal inventory is a ruled ledger, with fields that wrap at phone widths. */
.availability-controls { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-block: var(--space-m); }
.event-availability label { display: grid; gap: .35rem; min-width: 0; }
.availability-controls label { flex: 1 1 10rem; }
.event-availability input, .event-availability select { width: 100%; min-width: 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-muted); border-radius: 0; padding: .45rem 0; font: inherit; }
.event-availability select option { color: var(--ink); background: var(--void); }
.event-availability input:focus-visible, .event-availability select:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.availability-result { border-block: 1px solid var(--signal-line); padding-block: var(--space-s); }
.availability-result p, .availability-item p { display: flex; justify-content: space-between; gap: 1rem; }
.availability-result output { color: var(--amber); font-variant-numeric: tabular-nums; }
.availability-item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; padding-block: var(--space-m); border-bottom: 1px solid var(--signal-line); }
.availability-item h3 { grid-column: 1 / -1; margin: 0; }
.availability-item p { margin: 0; flex-wrap: wrap; }
.availability-item small { color: var(--ink-muted); }
.availability-item[data-eligible="false"] [data-points] { color: var(--ink-muted); }
.availability-potential { padding-inline-start: 1.3rem; }
@media (max-width: 420px) { .availability-item { grid-template-columns: minmax(0, 1fr); } }

.availability-controls { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr); gap: 1rem 1.5rem; }
.availability-controls label > span, .availability-item label > span { font-size: var(--step--1); color: var(--ink-muted); }
.event-availability input, .event-availability select { min-height: 44px; }
.availability-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-block: 1.4rem; margin-bottom: 1rem; }
.availability-result p { margin: 0; display: grid; align-content: start; gap: .4rem; font-size: var(--step--1); color: var(--ink-muted); }
.availability-result p:first-child { grid-column: 1; }
.availability-result p:first-child output { font-size: var(--step-2); color: var(--amber); }
.availability-result output { font-family: var(--display-2); font-size: var(--step-1); line-height: 1.3; overflow-wrap: anywhere; }
.availability-result .note { grid-column: 1 / -1; display: block; color: var(--ink-dim); }
.availability-inventory-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin-block: var(--space-m) .5rem; }
.availability-inventory-heading h3 { margin: 0; font-size: var(--step-0); }
.event-availability .availability-show-all { display: flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--ink-muted); font-size: var(--step--1); cursor: pointer; }
.event-availability .availability-show-all input { width: 1rem; min-height: 1rem; height: 1rem; accent-color: var(--amber); }
.availability-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1.5rem; padding-block: 1.1rem; }
.availability-item[hidden] { display: none; }
.availability-item h3 { font-family: var(--body); font-size: var(--step-0); }
.availability-item p { font-size: var(--step--1); color: var(--ink-muted); }
.availability-item [data-points] { color: var(--amber); font-variant-numeric: tabular-nums; }
.availability-item [data-state="unknown"] { border-bottom-style: dashed; }
.availability-item small:empty { display: none; }
.availability-potential { color: var(--ink-dim); font-size: var(--step--1); }
.event-availability > details { border-top: 1px solid var(--signal-line); margin-top: var(--space-m); padding-top: .8rem; }
.event-availability > details > summary { min-height: 44px; }
.event-availability > details .note { font-size: var(--step--1); }
.event-availability > details .kb { min-height: 44px; margin-inline-end: 1rem; }
@media (max-width: 550px) { .availability-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .availability-controls label:first-child { grid-column: 1 / -1; } .availability-result { grid-template-columns: repeat(2, minmax(0, 1fr)); } .availability-result p:first-child { grid-column: 1 / -1; } }
@media (max-width: 360px) { .availability-item { grid-template-columns: minmax(0, 1fr); } }