/* The salon's own app: a tool used all day at the desk, on a tablet or between customers.
   Built on fixed scales (Refactoring UI): warm greys, one green for actions, one hue per
   kind of treatment, a 4px spacing scale and a small type scale. Square corners, no shadows. */
:root {
  /* Warm greys, dark to light. */
  --g900: #1f1d1a;
  --g700: #4a4640;
  --g600: #6b665d;
  --g500: #8c867b;
  --g300: #d6d0c4;
  --g200: #e6e1d7;
  --g100: #f0ece5;
  --chrome: #f5f2ec;
  --surface: #fffefb;
  --closed: #eeeae2;

  /* The one action colour. */
  --a900: #1e3a2d;
  --a700: #2e5a44;
  --a600: #3a6b52;
  --a100: #e3ede6;

  --danger: #a8402a;
  --now: #c2412d;

  /* Treatments: tint, bar and text of the same hue. */
  --klipp-bg: #e4eee7; --klipp-bar: #3a6b52; --klipp-ink: #1e3a2d;
  --farge-bg: #f6e5dd; --farge-bar: #b0573a; --farge-ink: #5a2a1a;
  --styling-bg: #e3e9f2; --styling-bar: #4a6a95; --styling-ink: #1f3352;
  --annet-bg: #f3ead3; --annet-bar: #a8822e; --annet-ink: #4d3a10;

  --font: 'Familjen Grotesk', system-ui, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 26px;
  --ppm: 1.6px;
  --col: minmax(170px, 1fr);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100dvh; display: flex; flex-direction: column;
  background: var(--chrome); color: var(--g900); font: 400 var(--t-md)/1.45 var(--font); font-feature-settings: 'tnum' 1;
}
#root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--a600); outline-offset: 2px; }
.muted { color: var(--g600); }
.small { font-size: var(--t-sm); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s4); border: 1px solid var(--a700); background: var(--a700); color: #fff;
  font-weight: 600; font-size: var(--t-md); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--a900); border-color: var(--a900); }
.btn.secondary { background: var(--surface); color: var(--g900); border-color: var(--g300); }
.btn.secondary:hover { border-color: var(--g500); background: var(--surface); }
.btn.text { background: transparent; border-color: transparent; color: var(--g700); padding: 0 var(--s3); }
.btn.text:hover { background: var(--g100); color: var(--g900); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: #f6e5dd; color: var(--danger); }
.btn.icon { width: 36px; padding: 0; font-size: 18px; color: var(--g700); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- fields ---------- */
label.field { display: grid; gap: var(--s1); }
label.field > span { font-size: var(--t-sm); font-weight: 500; color: var(--g700); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea {
  width: 100%; height: 38px; padding: 0 var(--s3); background: var(--surface); border: 1px solid var(--g300); border-radius: 0;
}
textarea { height: auto; min-height: 72px; padding: var(--s2) var(--s3); resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--g500); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--a100); outline-offset: 0; border-color: var(--a600); }
.check { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; color: var(--g700); }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--a600); flex: none; }
.error { color: var(--danger); font-size: var(--t-md); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 140px; }

/* ---------- login ---------- */
.login { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.login .side { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) 48px; background: var(--a900); color: #f3efe6; }
.login .side .name { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.login .side p { max-width: 30ch; color: #b9c8bd; font-size: var(--t-lg); }
.login .side .foot { margin-top: auto; font-size: var(--t-sm); color: #8fa596; }
.login .main { display: grid; place-content: center; padding: var(--s6) var(--s5); }
.login form { width: min(360px, 100%); display: grid; gap: var(--s4); }
.login h1 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
.login .btn { height: 42px; }
.login .demo { width: min(360px, 100%); margin-top: var(--s5); padding: var(--s3) var(--s4); border-left: 3px solid var(--a600); background: var(--a100); color: var(--a900); font-size: var(--t-sm); }

/* ---------- top: brand and actions, date and summary, week ---------- */
.top { background: var(--chrome); border-bottom: 1px solid var(--g200); }
.top .r1, .top .r2 { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s5); }
.top .r1 { height: 52px; }
.brand { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; }
.brand span { color: var(--g500); font-weight: 400; }
.spacer { flex: 1; }
.top .r2 { padding-bottom: var(--s3); gap: var(--s2); flex-wrap: wrap; }
.dayhead { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.dayhead h1 { font-size: var(--t-2xl); letter-spacing: -0.025em; cursor: pointer; white-space: nowrap; }
.dayhead h1:hover { color: var(--a700); }
.pickdate { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.stats { display: flex; gap: var(--s5); margin-left: auto; }
.stat { display: grid; justify-items: end; }
.stat b { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.stat span { font-size: var(--t-xs); color: var(--g600); }

.week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 var(--s5); }
.wd { display: grid; gap: 2px; padding: var(--s2) var(--s3) var(--s3); border: 0; border-top: 2px solid transparent; background: none; text-align: left; cursor: pointer; }
.wd:hover { background: var(--g100); }
.wd[aria-current=date] { border-top-color: var(--g900); background: var(--surface); }
.wd .dn { font-size: var(--t-xs); color: var(--g600); }
.wd .dd { font-size: var(--t-lg); font-weight: 600; }
.wd.today .dd { color: var(--a700); }
.wd .load { height: 3px; background: var(--g200); margin-top: var(--s1); }
.wd .load i { display: block; height: 100%; background: var(--a600); }
.wd .cnt { font-size: var(--t-xs); color: var(--g600); }
.wd.closed .dd, .wd.closed .cnt { color: var(--g500); }

/* Pages */
.tabs { display: flex; gap: var(--s1); margin-left: var(--s4); }
.tab { height: 52px; padding: 0 var(--s3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--g600); font-weight: 500; cursor: pointer; }
.tab:hover { color: var(--g900); }
.tab[aria-current=page] { color: var(--g900); border-bottom-color: var(--g900); }
.top .r1 { align-items: stretch; }
.top .r1 > .brand, .top .r1 > .btn, .top .r1 > .menu { align-self: center; }
.pagewrap { flex: 1; min-height: 0; overflow: auto; background: var(--surface); }
.page { max-width: 1040px; margin: 0 auto; padding: var(--s6) var(--s5) 64px; display: grid; gap: var(--s5); }
.pagehead { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.pagehead h1 { font-size: var(--t-2xl); letter-spacing: -0.025em; }
.pagehead p { margin-top: var(--s1); max-width: 60ch; }
.toolbar input[type=search] { max-width: 420px; }
.group { display: grid; gap: var(--s2); }
.group h2 { font-size: var(--t-lg); }
.list { display: grid; border-top: 1px solid var(--g200); }
.lrow { display: grid; grid-template-columns: 2fr 1fr 2fr 1.2fr; gap: var(--s4); align-items: center; min-height: 48px; padding: var(--s2) var(--s3);
  border: 0; border-bottom: 1px solid var(--g200); background: none; text-align: left; cursor: pointer; }
.lrow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.lrow:hover { background: var(--g100); }
.lrow.lhead { min-height: 36px; cursor: default; font-size: var(--t-xs); color: var(--g600); font-weight: 500; }
.lrow.inactive { color: var(--g500); }
.lrow strong { font-weight: 600; }
.hint { font-size: var(--t-xs); color: var(--g600); font-weight: 400; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
.hours { display: grid; border-top: 1px solid var(--g200); }
.hrow { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3); align-items: center; min-height: 48px; padding: var(--s2) 0; border-bottom: 1px solid var(--g200); }
.times2 { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.span2 { display: inline-flex; align-items: center; gap: var(--s1); color: var(--g500); }
.span2 input[type=time] { width: 104px; padding: 0 var(--s2); }
.invite { padding: var(--s4); background: var(--a100); border-left: 3px solid var(--a600); }
.invite input { font-size: var(--t-sm); }
.actions.plain { border-top: 0; padding-top: 0; }

/* List pages, each with its own columns */
.pagehead .stats { margin-left: 0; margin-right: var(--s4); }
.list.customers .lrow { grid-template-columns: minmax(0, 2.6fr) 1.1fr 0.8fr 1.2fr 1.2fr; }
.list.services .lrow { grid-template-columns: minmax(0, 3fr) 1.3fr 1fr 1.6fr; }
.list.staff .lrow { grid-template-columns: minmax(0, 2.6fr) 1.6fr 1.6fr 1.2fr; }
.list .lrow { min-height: 60px; }
.list .lrow.lhead { min-height: 36px; }
.who { display: flex; align-items: center; gap: var(--s3); }
.two { display: grid; gap: 2px; min-width: 0; }
.two .main { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.two .sub { font-size: var(--t-xs); color: var(--g600); overflow: hidden; text-overflow: ellipsis; }
.lrow > .two:not(:first-child) .main { font-weight: 400; }
.tile.quiet { background: var(--g200); color: var(--g700); }
.tile.sm { width: 24px; height: 24px; font-size: 10px; }
.tile.lg { width: 36px; height: 36px; font-size: var(--t-sm); }
.tiles { display: flex; gap: 3px; flex-wrap: wrap; }
.price { font-variant-numeric: tabular-nums; }
.next { color: var(--a700); font-weight: 500; }
.lrow.kind { border-left: 3px solid var(--bar); --bar: var(--annet-bar); }
.lrow.kind.klipp { --bar: var(--klipp-bar); }
.lrow.kind.farge { --bar: var(--farge-bar); }
.lrow.kind.styling { --bar: var(--styling-bar); }
.group h2 { display: flex; align-items: center; gap: var(--s2); }
.swatch { width: 10px; height: 10px; background: var(--annet-bar); }
.swatch.klipp { background: var(--klipp-bar); }
.swatch.farge { background: var(--farge-bar); }
.swatch.styling { background: var(--styling-bar); }
.status { font-size: var(--t-sm); font-weight: 500; }
.status.ok { color: var(--a700); }
.status.wait { color: #8a6516; }
.status.off { color: var(--g500); }
.list.services { border-top: 0; }

/* Day / week switch */
.seg { display: inline-flex; margin-left: var(--s2); border: 1px solid var(--g300); }
.seg button { height: 34px; padding: 0 var(--s3); border: 0; background: var(--surface); color: var(--g700); font-weight: 500; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--g300); }
.seg button[aria-pressed=true] { background: var(--g900); color: #fff; }
.chips.always { display: flex; }
.grid.week { --col: minmax(120px, 1fr); }
button.head.day { border-top: 0; border-right: 0; text-align: left; cursor: pointer; font: inherit; }
button.head.day:hover { background: var(--g100); }
.head.day.today .nm { color: var(--a700); }

/* User menu */
.menu { position: relative; }
.menu summary { list-style: none; display: flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s2); cursor: pointer; }
.menu summary:hover { background: var(--g100); }
.menu summary::-webkit-details-marker { display: none; }
.menu .items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 35; display: grid; min-width: 200px; background: var(--surface); border: 1px solid var(--g300); }
.menu .items .who { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--g200); font-size: var(--t-sm); color: var(--g600); }
.menu .items button { height: 40px; padding: 0 var(--s4); border: 0; background: none; text-align: left; cursor: pointer; }
.menu .items button:hover { background: var(--g100); }
.tile { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; font-size: var(--t-xs); font-weight: 600; color: #fff; background: var(--a700); }

/* Stylist chips: on a phone one column shows at a time. */
.chips { display: none; gap: var(--s2); padding: var(--s2) var(--s4); overflow-x: auto; border-bottom: 1px solid var(--g200); background: var(--chrome); }
.chip { display: flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3) 0 var(--s1); border: 1px solid var(--g300); background: var(--surface); cursor: pointer; white-space: nowrap; }
.chip .tile { width: 26px; height: 26px; }
.chip[aria-pressed=true] { border-color: var(--g900); }

/* ---------- calendar ---------- */
.cal { flex: 1; min-height: 0; overflow: auto; background: var(--surface); }
.grid { display: grid; grid-template-columns: 56px repeat(var(--cols), var(--col)); grid-template-rows: auto 1fr; min-width: max-content; min-height: 100%; }
.corner { position: sticky; top: 0; left: 0; z-index: 12; background: var(--surface); border-bottom: 1px solid var(--g200); }
.head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3); background: var(--surface); border-bottom: 1px solid var(--g200); border-left: 1px solid var(--g200); }
.head .who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.head .nm { font-weight: 600; font-size: var(--t-md); }
.head .meta { font-size: var(--t-xs); color: var(--g600); white-space: nowrap; }
.head .load { height: 2px; background: var(--g200); }
.head .load i { display: block; height: 100%; }
.axis { position: sticky; left: 0; z-index: 6; background: var(--surface); }
.axis div { position: absolute; right: var(--s2); transform: translateY(-50%); font-size: var(--t-xs); color: var(--g500); }
.axis .nowpill { right: 4px; padding: 1px 5px; background: var(--now); color: #fff; font-weight: 600; z-index: 2; }
.col { position: relative; border-left: 1px solid var(--g200); background: var(--closed); }
.col .open { position: absolute; left: 0; right: 0; background: var(--surface); }
.col .hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--g200); pointer-events: none; }
.col .half { position: absolute; left: 0; right: 0; border-top: 1px solid var(--g100); pointer-events: none; }
.col .pause { position: absolute; left: 0; right: 0; display: grid; place-items: center; font-size: var(--t-xs); color: var(--g500); pointer-events: none; }
.col .slot { position: absolute; left: 0; right: 0; border: 0; background: transparent; cursor: pointer; padding: 0; }
.col .slot:hover { background: var(--a100); }
.col .slot:hover::after { content: '+ ' attr(data-time); position: absolute; left: var(--s2); top: 3px; font-size: var(--t-xs); font-weight: 600; color: var(--a700); }
.nowline { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--now); z-index: 4; pointer-events: none; }

.appt {
  position: absolute; left: 4px; right: 4px; z-index: 3; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; padding: 5px 8px;
  border: 0; border-left: 3px solid var(--bar); background: var(--bg); color: var(--ink); text-align: left; cursor: pointer;
  font-size: var(--t-xs); line-height: 1.3;
  --bg: var(--annet-bg); --bar: var(--annet-bar); --ink: var(--annet-ink);
}
.appt.klipp { --bg: var(--klipp-bg); --bar: var(--klipp-bar); --ink: var(--klipp-ink); }
.appt.farge { --bg: var(--farge-bg); --bar: var(--farge-bar); --ink: var(--farge-ink); }
.appt.styling { --bg: var(--styling-bg); --bar: var(--styling-bar); --ink: var(--styling-ink); }
.appt:hover { filter: brightness(0.97); }
.appt strong { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt .t { opacity: 0.75; }
.appt .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.appt.short { display: block; padding: 3px 8px; white-space: nowrap; text-overflow: ellipsis; }
.appt.short strong, .appt.short .s { display: inline; }
.appt.short .t { margin-right: var(--s1); }
.appt.walkin { border-left-style: dashed; }
.appt.no_show { --bg: var(--g100); --bar: var(--g500); --ink: var(--g600); text-decoration: line-through; }
.appt.past { opacity: 0.7; }
.appt.locked { cursor: default; }
.buffer { position: absolute; left: 4px; right: 4px; z-index: 2; background: repeating-linear-gradient(-45deg, var(--g200) 0 2px, transparent 2px 6px); pointer-events: none; }
.off { position: absolute; left: 0; right: 0; z-index: 2; padding: 5px 8px; border: 0; text-align: left; font-size: var(--t-xs); color: var(--g700);
  background: var(--g100); border-left: 3px solid var(--g500); }
button.off { cursor: pointer; }
button.off:hover { background: var(--g200); }
.empty { padding: 48px var(--s5); color: var(--g600); }

/* ---------- side panel ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgb(31 29 26 / 0.22); }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(460px, 100vw); overflow-y: auto;
  display: grid; align-content: start; gap: var(--s5); padding: var(--s5) var(--s5) var(--s6); background: var(--surface); border-left: 1px solid var(--g300);
}
.panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.panel header .kicker { font-size: var(--t-sm); color: var(--g600); margin-bottom: var(--s1); }
.panel h2 { font-size: var(--t-xl); letter-spacing: -0.015em; }
.panel section { display: grid; gap: var(--s3); }
.panel h3 { font-size: var(--t-sm); font-weight: 600; color: var(--g700); }
.panel .actions { display: flex; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s4); border-top: 1px solid var(--g200); }
.contact { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-md); }
.contact a { color: var(--a700); text-decoration: none; font-weight: 500; }
.contact a:hover { text-decoration: underline; }
.facts { display: grid; grid-template-columns: 96px 1fr; gap: var(--s2) var(--s4); margin: 0; }
.facts dt { color: var(--g600); }
.facts dd { margin: 0; }
.lines { display: grid; border-top: 1px solid var(--g200); }
.lines div { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--g200); }
.lines .total { font-weight: 600; border-bottom: 0; }
.lines .muted { white-space: nowrap; }
.note { padding: var(--s3) var(--s4); background: var(--g100); border-left: 3px solid var(--g500); color: var(--g700); }
.tag { display: inline-block; padding: 1px 6px; background: var(--g100); font-size: var(--t-xs); color: var(--g700); }

.picks { display: grid; gap: var(--s1); }
.pick { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 42px; padding: var(--s2) var(--s3); border: 1px solid var(--g300); background: var(--surface); text-align: left; cursor: pointer; }
.pick:hover { border-color: var(--g500); }
.pick[aria-pressed=true] { border-color: var(--a600); background: var(--a100); }
.pick[aria-pressed=true] .name::before { content: '✓ '; color: var(--a700); font-weight: 600; }
.pick .meta { color: var(--g600); font-size: var(--t-sm); white-space: nowrap; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: var(--s1); }
.time { height: 38px; border: 1px solid var(--g300); background: var(--surface); cursor: pointer; }
.time:hover { border-color: var(--g500); }
.time[aria-pressed=true] { background: var(--a700); color: #fff; border-color: var(--a700); }
.results { display: grid; border: 1px solid var(--g300); }
.results button { padding: var(--s2) var(--s3); border: 0; border-bottom: 1px solid var(--g200); background: var(--surface); text-align: left; cursor: pointer; }
.results button:last-child { border-bottom: 0; }
.results button:hover { background: var(--a100); }
.chosen { display: flex; justify-content: space-between; align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--a600); background: var(--a100); }

.toast { position: fixed; left: 50%; bottom: var(--s5); z-index: 60; transform: translateX(-50%); padding: var(--s3) var(--s4); background: var(--g900); color: #fff; }

@media (max-width: 900px) {
  .stats { display: none; }
}
@media (max-width: 720px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login .side { padding: var(--s5); gap: var(--s3); }
  .login .side .name { font-size: 28px; }
  .login .side .foot { display: none; }
  .top .r1, .top .r2, .week { padding-left: var(--s3); padding-right: var(--s3); }
  .brand { display: none; }
  .top .r1 .spacer { display: none; }
  .top .r1 > .btn { flex: 1; }
  .dayhead h1 { font-size: var(--t-xl); }
  .wd { padding: var(--s2) var(--s1); }
  .wd .cnt { display: none; }
  .chips { display: flex; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; background: var(--chrome); border-top: 1px solid var(--g200); }
  .tab { flex: 1; height: 52px; border-bottom: 0; border-top: 2px solid transparent; }
  .tab[aria-current=page] { border-top-color: var(--g900); }
  body:has(.tabs) { padding-bottom: 53px; }
  .list .lrow, .list.customers .lrow, .list.services .lrow, .list.staff .lrow { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .list .lrow > :nth-child(n+3) { display: none; }
  .pagehead .stats { display: none; }
  .login .main { place-content: start; padding-top: var(--s5); }
  .page { padding: var(--s5) var(--s4) 48px; }
  .cols2 { grid-template-columns: 1fr; }
  .hrow { grid-template-columns: 1fr; }
  .grid { --col: minmax(0, 1fr); min-width: 0; grid-template-columns: 48px 1fr; }
  .grid:not(.week) > [data-staff]:not(.shown) { display: none; }
  .grid.week { --col: minmax(96px, 1fr); min-width: max-content; grid-template-columns: 48px repeat(7, var(--col)); }
  .panel { width: 100vw; border-left: 0; padding: var(--s4); }
}