/* ============================================================
   Management view — white grid on paper, with a sidebar that
   holds the month at a glance.
   ============================================================ */

body.manage{
  --slot-h:52px;              /* one hour row — recomputed by fitCalendar() */
  --monthcell-h:112px;        /* one day cell — recomputed by fitCalendar() */
  --sidebar-w:236px;
  min-height:100vh;
  background:var(--paper);
  display:flex;flex-direction:column;
}

/* ---------- page header ---------- */
.pagehead{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px var(--pad);
  background:var(--card);
  border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:30;
}
.brandlogo{flex:none;display:flex;align-items:center;text-decoration:none}
.brandlogo img{
  display:block;height:46px;width:auto;max-width:170px;object-fit:contain;
}
.pagehead-main{margin-right:auto;min-width:0}
.page-title{
  font-variation-settings:"wdth" 112;
  font-weight:800;font-size:clamp(19px,2.4vw,26px);
  letter-spacing:-.01em;line-height:1.15;color:var(--ink);
}
.page-sub{margin-top:3px;font-size:13px;color:var(--ink-faint);letter-spacing:.02em}

.pagehead-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.langswitch{
  display:inline-flex;border:1px solid var(--hairline);border-radius:9px;overflow:hidden;
  background:var(--card);
}
.langswitch a{
  padding:8px 11px;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--ink-faint);text-decoration:none;line-height:1;
}
.langswitch a + a{border-left:1px solid var(--hairline)}
.langswitch a:hover{color:var(--ink)}
.langswitch a.is-on{background:var(--accent);color:#fff}

.adminchip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 11px;border-radius:999px;
  background:#EAF1F7;border:1px solid rgba(31,92,139,.3);
  color:var(--accent);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.adminchip a{color:var(--ink-soft);text-decoration:underline;letter-spacing:.04em;text-transform:none;font-weight:500}
.adminchip a:hover{color:var(--ink)}

/* ---------- two-column layout ---------- */
.layout{
  flex:1;min-height:0;
  display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  align-items:start;gap:var(--pad);
  padding:var(--pad);
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
}

/* ---------- sidebar ---------- */
.sidebar{
  display:flex;flex-direction:column;gap:14px;
  position:sticky;top:var(--pad);
  max-height:calc(100vh - var(--pad) * 2);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--hairline) transparent;
}
/* ---------- on a phone ----------
 *
 * The sidebar is a reference panel: a month at a glance, a legend, a rule.
 * On a wide screen it sits beside the calendar and costs nothing. On a
 * phone it goes above it, and the calendar — the thing people opened the
 * page for — starts below the fold.
 *
 * So it goes. The month picker is reachable from the arrows in the period
 * bar, the legend explains colours that are visible anyway, and the rule is
 * repeated in the booking form where it actually matters.
 */
@media (max-width:900px){
  .sidebar{display:none}

  /* The calendar takes the room the sidebar leaves. */
  .layout{gap:0}
  .week-body{max-width:none}
}

.panel{
  background:var(--card);border:1px solid var(--hairline);
  border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);
}
.panel-title{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:9px;
}
.panel-title-spaced{margin-top:16px}
.panel-note{margin-top:12px;font-size:12px;line-height:1.5;color:var(--ink-soft)}

.monthnav{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px}
.monthlabel{
  font-variation-settings:"wdth" 110;font-weight:700;font-size:14px;
  text-transform:capitalize;color:var(--ink);
}

/* the month at a glance */
.minical{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.minical-dow{
  text-align:center;font-family:var(--font-mono);font-size:10px;
  color:var(--ink-faint);padding-bottom:4px;
}
.minical-day{
  display:flex;align-items:center;justify-content:center;position:relative;
  aspect-ratio:1;border-radius:7px;
  font-size:12px;font-weight:500;color:var(--ink);
  text-decoration:none;
  transition:background-color .12s;
}
.minical-day:hover{background:rgba(31,92,139,.12)}
.minical-day.is-outside{color:var(--ink-faint);opacity:.55}
.minical-day.is-past{background:rgba(23,26,31,.06);color:var(--ink-faint)}
.minical-day.is-inweek{background:#EAF1F7;color:var(--ink)}
.minical-day.is-today{background:var(--accent);color:#fff;font-weight:700}
.minical-day.has-bookings::after{
  content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.minical-day.is-today.has-bookings::after{background:#fff}

.legend{list-style:none;display:flex;flex-direction:column;gap:7px}
.legend li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-soft)}
.dot{width:11px;height:11px;border-radius:4px;flex:none}
.dot-today{background:var(--accent)}
.dot-past{background:rgba(23,26,31,.09);box-shadow:inset 0 0 0 1px var(--hairline)}
.dot-booked{background:transparent;box-shadow:inset 0 0 0 1px var(--hairline);position:relative}
.dot-booked::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.dot-week{background:#EAF1F7;box-shadow:inset 0 0 0 1px rgba(31,92,139,.28)}

/* ---------- period bar ---------- */
.periodbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:14px;
}
.periodnav{display:flex;align-items:center;gap:6px}
.periodlabel{
  flex:1;min-width:0;
  font-variation-settings:"wdth" 115;
  font-weight:800;font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.015em;line-height:1.1;color:var(--ink);
  text-transform:capitalize;
}
.viewswitch{
  display:inline-flex;border:1px solid var(--hairline);border-radius:10px;
  overflow:hidden;background:var(--card);
}
.viewswitch a{
  padding:9px 15px;font-size:13px;font-weight:600;
  color:var(--ink-soft);text-decoration:none;line-height:1;
}
.viewswitch a + a{border-left:1px solid var(--hairline)}
.viewswitch a:hover{color:var(--ink)}
.viewswitch a.is-on{background:var(--accent);color:#fff}
.navbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 10px;
  background:var(--card);
  border:1px solid var(--hairline);border-radius:9px;
  color:var(--ink-soft);text-decoration:none;font-size:17px;line-height:1;
}
.navbtn-wide{font-size:13px;font-weight:600;padding:0 14px}
.navbtn:hover{border-color:var(--ink-faint);color:var(--ink)}

/* ---------- week grid ---------- */
.week{min-width:0;display:flex;flex-direction:column;min-height:0}
/* The day is taller than the screen once the hours have room to breathe,
   so the grid scrolls rather than compressing every booking to a hairline. */
.weekgrid{overflow:auto;min-height:0;scrollbar-width:thin}

/* Full width.
   It used to be capped at 1120 px, on the grounds that seven columns across a
   wide monitor gave each booking 290 px for content that needs 150. That was
   true when a column held nothing but a name and an hour; the headings now
   carry the weather too, and the empty band to the right of the grid was a
   worse fault than a roomy block. */
.week-head,.week-body{
  display:grid;
  /* 76 px, not 56: "10:00 AM" needs 63 and was being clipped on the left,
     which turned ten o'clock into "0:00 AM". The column widths for the days
     are set by the script, so empty days give their room to busy ones. */
  grid-template-columns:var(--week-cols, 76px repeat(7, minmax(72px, 1fr)));
  min-width:720px;
}
.week-head{
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:12px 12px 0 0;
}
.week-body{
  background:var(--card);
  border:1px solid var(--hairline);border-top:0;
  border-radius:0 0 12px 12px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.week-corner{border-right:1px solid var(--hairline)}
.daycol-head{
  padding:10px 8px;text-align:center;
  border-right:1px solid var(--hairline-2);
}
.daycol-head:last-child{border-right:0}
.daycol-head .dayname{
  display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.daycol-head .daynum{
  display:block;font-variation-settings:"wdth" 112;
  font-weight:700;font-size:20px;line-height:1.25;color:var(--ink);
}
.daycol-head.is-past{opacity:.5}
.daycol-head.is-today .daynum,
.daycol-head.is-today .dayname{color:var(--accent)}

.hours{border-right:1px solid var(--hairline-2);background:var(--paper)}
.hourlabel{height:var(--slot-h);position:relative}
/* The label straddles its own line, so it reads the same whether the band
   is 27 px or 104 px tall. */
.hourlabel span{
  position:absolute;top:-7px;right:10px;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);
  white-space:nowrap;
}

/* The first and the last have no line above or below them to straddle, and
   were being cut in half by the edge of the grid: "7:00 AM" showed its lower
   half, "10:00 PM" its upper half. They sit inside instead. */
.hourlabel:first-child span{top:2px}
.hourlabel:last-child span{top:-14px}
.hourlabel{transition:height .18s ease}
.hourcell{transition:height .18s ease}
.hourlabel:last-child{height:0}

.daycol{position:relative;border-right:1px solid var(--hairline-2)}
.daycol:last-child{border-right:0}
.daycol.is-past{background:rgba(23,26,31,.035)}
.daycol.is-today{background:rgba(31,92,139,.035)}
.hourcell{
  height:var(--slot-h);
  border-bottom:1px solid var(--hairline-2);
  cursor:pointer;
}
.hourcell:hover{background:rgba(31,92,139,.09)}
.daycol.is-past .hourcell{cursor:default}
.daycol.is-past .hourcell:hover{background:none}

.nowline{
  position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:6;
  pointer-events:none;
}
.nowline::before{
  content:"";position:absolute;left:-4px;top:-3px;
  width:8px;height:8px;border-radius:50%;background:var(--danger);
}

/* ---------- booking blocks ---------- */
.booking{
  position:absolute;left:3px;right:3px;z-index:5;
  border:1px solid rgba(31,92,139,.28);
  border-left:3px solid var(--accent);border-radius:7px;
  background:#EAF1F7;
  color:var(--ink);text-align:left;
  padding:5px 7px;overflow:hidden;cursor:pointer;
  font-family:var(--font-display);
  transition:background-color .15s,box-shadow .15s;
}
.booking:hover{background:#DCE8F2;box-shadow:var(--shadow-sm)}
.booking.is-past{opacity:.55}

/* Awaiting deletion: still on the calendar so nobody wonders where it went,
   but hatched and faded, and no longer holding the room. */
.booking.is-pending{
  opacity:.6;
  border-style:dashed;
  background-image:repeating-linear-gradient(
    45deg, transparent, transparent 5px,
    rgba(23,26,31,.05) 5px, rgba(23,26,31,.05) 10px);
}
.booking.is-pending .b-title{text-decoration:line-through}
/* Its own line, the width of the window. Squeezed between the buttons in
   the flex row it came out one word per line. */
/* Locked fields read as information, not as an invitation to type. */
.field input.is-locked,
.field input.is-locked:focus{
  background:var(--paper);border-color:var(--hairline);
  color:var(--ink-soft);box-shadow:none;cursor:default;
}

.delete-hint{margin-top:16px}
.delete-hint[hidden]{display:none}

/* Awaiting confirmation: the same amber as the button that asks for it. */
.delete-hint.is-pending{
  border-color:#E4C48A;background:#FDF6E8;color:#7A4E06;font-weight:500;
}
.btn-warn{background:#9C6208;color:#fff;border-color:#9C6208}
.btn-warn:hover{background:#84520a}
.booking .b-time{
  display:block;font-family:var(--font-mono);font-size:10px;
  color:var(--accent);letter-spacing:.02em;font-weight:500;
}
/* A block with room lets the subject and the name wrap onto a second line
   rather than cutting them off. "Patrice Eugène-Tremblay" read as
   "Patrice Eugène-Trem…" for no reason: the space underneath was empty. */
.booking .b-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:13px;font-weight:600;line-height:1.2;margin-top:1px;
  overflow:hidden;overflow-wrap:anywhere;
}
/* Two lines, then an ellipsis. A name longer than that is rare, and the
   whole of it is one tap away in the booking itself. */
.booking .b-who{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:11px;color:var(--ink-soft);line-height:1.25;
  overflow:hidden;overflow-wrap:anywhere;
}
/* The shortest blocks: subject and name, no clock. The row labels and the
   block's own position already say when it is — the name does not appear
   anywhere else, so it is the clock that gives way. */
.booking.is-tight{padding:1px 5px;overflow:hidden}
.booking.is-tight .b-time{display:none}
.booking.is-tight .b-title{
  display:block;font-size:10px;line-height:1.15;margin-top:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.booking.is-tight .b-who{
  display:block;font-size:9px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Middle: all three, tightened. */
.booking.is-medium{padding:1px 6px;overflow:hidden}
.booking.is-medium .b-time{display:block;font-size:9px;line-height:1.2}
.booking.is-medium .b-title{
  display:block;font-size:11px;line-height:1.2;margin-top:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.booking.is-medium .b-who{
  display:block;font-size:9px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- modal ---------- */
.modal{
  width:min(520px,100%);background:var(--card);
  border-radius:18px;box-shadow:var(--shadow-md);
  padding:var(--pad);max-height:100%;overflow-y:auto;
  transform:translateY(10px);transition:transform .22s ease;
}
.modal-scrim.is-open .modal{transform:none}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.modal h2{font-variation-settings:"wdth" 116;font-size:21px;font-weight:700;color:var(--ink)}
.modal-close{
  flex:none;border:0;background:transparent;color:var(--ink-faint);
  font-size:26px;line-height:1;padding:0 2px;margin-top:-2px;cursor:pointer;
}
.modal-close:hover{color:var(--ink)}
.modal-error{
  margin-top:14px;padding:10px 12px;border-radius:10px;
  background:#FBEAE7;border:1px solid rgba(179,58,43,.35);
  color:#8E2C20;font-size:13px;line-height:1.4;
}
.modal-error[hidden]{display:none}
.modal-actions{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.modal-actions .spacer{flex:1}

.field-hint{margin-top:6px;font-size:12px;line-height:1.4;color:var(--ink-faint)}
.field-hint[hidden]{display:none}

/* ---------- month grid ---------- */
.monthgrid{
  background:var(--card);border:1px solid var(--hairline);
  border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.monthgrid-head,.monthgrid-body{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.monthgrid-head{border-bottom:1px solid var(--hairline);background:var(--paper)}
.monthgrid-dow{
  padding:9px 8px;text-align:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
}
.monthcell{
  height:var(--monthcell-h);padding:5px;overflow:hidden;
  border-right:1px solid var(--hairline-2);
  border-bottom:1px solid var(--hairline-2);
  display:flex;flex-direction:column;gap:4px;cursor:pointer;
}
.monthcell:nth-child(7n){border-right:0}
.monthcell:nth-child(n+36){border-bottom:0}
.monthcell:hover{background:rgba(31,92,139,.05)}
/* Grey marks a day that has gone by — whatever month it belongs to. A day
   outside the displayed month is only dimmed in its number, so next month's
   first days still read as bookable. */
.monthcell.is-past{background:rgba(23,26,31,.05);cursor:default}
.monthcell.is-past:hover{background:rgba(23,26,31,.05)}
.monthcell.is-past .monthcell-num{color:var(--ink-faint)}
.monthcell.is-outside .monthcell-num{color:var(--ink-faint);opacity:.6}
.monthcell.is-today{background:rgba(31,92,139,.06)}
.monthcell-head{display:flex;justify-content:flex-end}
.monthcell-num{
  font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--ink-soft);
  min-width:20px;text-align:center;line-height:20px;border-radius:6px;
}
.monthcell.is-today .monthcell-num{background:var(--accent);color:#fff;font-weight:700}
.monthcell-list{
  display:flex;flex-direction:column;gap:3px;
  overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--hairline) transparent;
}

.chip{
  display:flex;align-items:baseline;gap:5px;width:100%;
  border:0;border-left:3px solid var(--accent);border-radius:5px;
  background:#EAF1F7;color:var(--ink);
  padding:3px 6px;cursor:pointer;text-align:left;
  font-family:var(--font-display);
  transition:background-color .15s;
}
.chip:hover{background:#DCE8F2}
.chip.is-past{opacity:.55}
.chip-time{
  flex:none;font-family:var(--font-mono);font-size:10px;
  color:var(--accent);font-weight:500;
}
.chip-title{
  font-size:11px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- rules note in the modal ---------- */
.rule-note{
  margin-top:12px;padding:9px 11px;border-radius:9px;
  background:var(--paper);border:1px solid var(--hairline-2);
  font-size:12px;line-height:1.45;color:var(--ink-soft);
}
.rule-note-tight{margin-top:8px}
.rule-left{display:block;margin-top:2px;color:var(--accent);font-weight:600}
.rule-left.is-warning{color:var(--danger)}

/* ---------- confirmation dialog ---------- */
.modal-narrow{width:min(420px,100%)}
.confirm-card{
  margin-top:14px;padding:12px 14px;border-radius:11px;
  background:var(--paper);border:1px solid var(--hairline);
  border-left:3px solid var(--danger);
  display:flex;flex-direction:column;gap:2px;
}
.confirm-when{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
}
.confirm-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.confirm-who{font-size:13px;color:var(--ink-soft)}
.confirm-body{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* ---------- footer ---------- */
/* A plain message and a way out — no form, no card, nothing to fill in. */
.cookiepanel{max-width:560px;padding:26px 28px 20px;text-align:center}
.cookiepanel-text{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.cookiepanel-actions{
  display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap;
}

/* The bar sits above the footer rather than over the calendar: a visitor
   should be able to read the page while deciding, not be blocked by the
   question. */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 20px;
  background:var(--card);
  border-top:1px solid var(--hairline);
  box-shadow:0 -6px 24px rgba(23,26,31,.10);
}
.cookiebar[hidden]{display:none}
.cookiebar-text{flex:1;min-width:260px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.cookiebar-text strong{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.cookiebar-actions{display:flex;gap:8px;flex:none}

@media (max-width:640px){
  .cookiebar{gap:10px}
  .cookiebar-actions{width:100%}
  .cookiebar-actions .btn{flex:1}
}

/* Drawn rather than typed: the Unicode symbols come out as colour emoji on
   one device and flat glyphs on the next, with no say in either. These sit
   on the baseline of the text beside them. */
.wx{vertical-align:-0.16em;flex:none}

/* ---- weather above a weekday column ----
   Under the number rather than beside it: the column is narrow, and the day
   of the week is what the eye looks for first. */
.daysky{
  display:flex;align-items:center;justify-content:center;gap:4px;
  margin-top:3px;font-size:10.5px;color:var(--ink-faint);
}
.daysky-temp{font-weight:600;color:var(--ink-soft)}
.daysky-low{font-weight:400;color:var(--ink-faint)}

/* Seven columns share the width; below this the range no longer fits. */
@media (max-width:1080px){
  .daysky-temp{display:none}
}

/* ---- weather in a month square ----
   Left of the date, so the eye meets the sky before the number — which is
   the order people ask the question in: what is it like on the 27th. */
.monthcell-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px}

.monthcell-sky{
  display:inline-flex;align-items:baseline;gap:4px;
  font-size:11px;color:var(--ink-faint);white-space:nowrap;
}
.monthcell-sky .sky-icon{display:inline-flex;align-items:center}
.monthcell-sky .sky-temp{font-weight:600;color:var(--ink-soft)}
.monthcell-sky .sky-low{font-weight:400;color:var(--ink-faint)}

/* A square barely wider than the number itself: the range goes, the sky
   stays — the icon is what carries the glance. */
@media (max-width:820px){
  .monthcell-sky .sky-temp{display:none}
}
@media (max-width:560px){
  .monthcell-sky{display:none}
}

/* ---- weather in the header bar ----
   Two days, one line, beside the language switch. It is a glance, not a
   forecast page: the day, the sky, the range, and the feel in brackets.
   The third day went with the move — a header is not the place for it. */
.headweather{
  display:flex;align-items:center;gap:18px;
  margin-right:6px;padding-right:16px;
  border-right:1px solid var(--hairline);
}
.hw-day{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.hw-day.is-today .hw-when{color:var(--ink);font-weight:600}

.hw-when{font-size:11.5px;color:var(--ink-soft)}
.hw-icon{display:inline-flex;align-items:center}
.hw-temp{font-size:13px;font-weight:600;color:var(--ink)}
.hw-low{font-weight:400;color:var(--ink-faint)}
.hw-feels{font-size:10.5px;color:var(--ink-faint)}

/* The header runs out of room long before the calendar does; the weather is
   the first thing that can go. */
@media (max-width:1100px){
  .hw-feels{display:none}
}
@media (max-width:900px){
  .headweather{display:none}
}


/* Reads as a link whether it is one or a button opening the panel. */
.foot-link{
  background:none;border:0;padding:0;font:inherit;color:var(--ink-faint);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.foot-link:hover{color:var(--ink-soft)}

.pagefoot{
  margin-top:auto;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px var(--pad) 16px;
  border-top:1px solid var(--hairline);
  font-size:12px;color:var(--ink-faint);
}

/* Shorter screens: pull the chrome in so the calendar keeps the space. */
@media (max-height:860px){
  body.manage{--pad:16px}
  .pagehead{padding:10px var(--pad)}
  .page-title{font-size:19px}
  .page-sub{font-size:12px}
  .brandlogo img{height:38px}
  .periodlabel{font-size:22px}
  .periodbar{margin-bottom:10px;gap:10px}
  .panel{padding:11px}
  .sidebar{gap:10px}
  /* A plain message and a way out — no form, no card, nothing to fill in. */
.cookiepanel{max-width:560px;padding:26px 28px 20px;text-align:center}
.cookiepanel-text{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.cookiepanel-actions{
  display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap;
}

/* The bar sits above the footer rather than over the calendar: a visitor
   should be able to read the page while deciding, not be blocked by the
   question. */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 20px;
  background:var(--card);
  border-top:1px solid var(--hairline);
  box-shadow:0 -6px 24px rgba(23,26,31,.10);
}
.cookiebar[hidden]{display:none}
.cookiebar-text{flex:1;min-width:260px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.cookiebar-text strong{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.cookiebar-actions{display:flex;gap:8px;flex:none}

@media (max-width:640px){
  .cookiebar{gap:10px}
  .cookiebar-actions{width:100%}
  .cookiebar-actions .btn{flex:1}
}


/* Reads as a link whether it is one or a button opening the panel. */
.foot-link{
  background:none;border:0;padding:0;font:inherit;color:var(--ink-faint);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.foot-link:hover{color:var(--ink-soft)}

.pagefoot{padding:9px var(--pad) 11px;font-size:11px}
}
@media (max-height:720px){
  body.manage{--sidebar-w:206px}
  .page-title{font-size:17px}
  .periodlabel{font-size:19px}
  .brandlogo img{height:32px}
  .daycol-head{padding:6px 6px}
  .daycol-head .daynum{font-size:17px}
  .monthgrid-dow{padding:6px}
}

@media (max-width:640px){
  .pagehead{gap:12px}
  .pagehead-main{margin-right:0;width:100%}
  .periodlabel{flex:1 1 100%;order:-1}
  .brandlogo img{height:38px}
}