@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root{--black:#000;--white:#fff;--serif:Baskerville,'Iowan Old Style','Palatino Linotype',serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif;--line:1px solid var(--black);--space:clamp(20px,3vw,48px)}
*{box-sizing:border-box}html{background:var(--white);color:var(--black);font-family:var(--sans);scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--white)}button,input,select,textarea{font:inherit;color:inherit;background:var(--white)}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--black);outline-offset:3px}.skip{position:fixed;left:12px;top:-60px;background:#000;color:#fff;padding:12px;z-index:100}.skip:focus{top:12px}.topbar{height:76px;border-bottom:var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--space);position:sticky;top:0;background:#fff;z-index:20}.brand{font-family:var(--serif);font-size:23px;color:#000;text-decoration:none}.topbar nav{display:flex;height:100%;align-items:stretch}.nav{border:0;padding:0 20px;position:relative}.nav.active:after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:4px;background:#000}.topbar>.button{justify-self:end}.button{border:var(--line);min-height:46px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:14px;text-decoration:none}.button:hover{background:#000;color:#fff}.button.dark{background:#000;color:#fff}.button.dark:hover{background:#fff;color:#000}.button.wide{width:100%;font-size:17px;min-height:56px}.button.small{min-height:36px;padding:0 12px;font-size:12px}.icon-button{border:0;text-decoration:underline;text-underline-offset:4px;padding:8px}.topbar>.icon-button{display:none}kbd{font-size:10px;border:1px solid currentColor;padding:2px 5px}main{padding:0 var(--space)}.view{max-width:1600px;margin:auto}.hidden{display:none!important}.diary-head{padding:48px 0 28px;display:flex;align-items:end;justify-content:space-between;gap:24px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:700;margin:0 0 12px}.diary-head h1,.invoice-title h1,.auth h1{font-family:var(--serif);font-size:clamp(46px,6vw,90px);font-weight:400;line-height:.92;margin:0}.date-controls{display:flex;align-items:center;gap:8px}.date-controls button{border:var(--line);height:40px;padding:0 14px}.date-controls input{border:var(--line);height:40px;padding:0 10px}.diary-grid{border-top:var(--line);display:grid;grid-template-columns:80px 1fr;position:relative}.time-rail,.day-column{display:grid;grid-template-rows:repeat(20,48px)}.time-rail{border-right:var(--line)}.time-label{font-size:11px;padding-top:8px}.slot{border:0;border-bottom:var(--line);position:relative;text-align:left;padding:4px 14px}.slot:hover:after{content:'Add';position:absolute;right:12px;top:10px;text-transform:uppercase;font-size:10px;letter-spacing:.1em}.appointment{position:absolute;left:94px;right:12px;border:2px solid #000;background:#fff;padding:10px 14px;z-index:2;overflow:hidden;text-align:left}.appointment:hover{background:#000;color:#fff}.appointment strong,.appointment span{display:block}.appointment strong{font-size:13px}.appointment span{font-size:11px;margin-top:4px}.appointment.cancelled{border-style:dashed;text-decoration:line-through}.appointment.completed{background:#000;color:#fff}.now-line{position:absolute;left:70px;right:0;height:3px;background:#000;z-index:3}.now-line:before{content:'';width:10px;height:10px;background:#000;position:absolute;left:0;top:-3px}.panel{position:fixed;right:0;top:0;bottom:0;width:min(520px,100%);background:#fff;border-left:var(--line);z-index:50;padding:28px;transform:translateX(102%);transition:transform .22s ease;overflow:auto}.panel.open{transform:translateX(0)}.panel-head{display:flex;justify-content:space-between;align-items:start;border-bottom:var(--line);padding-bottom:18px;margin-bottom:28px}.scrim{position:fixed;inset:0;background:#000;z-index:40;display:none}.scrim.open{display:block;opacity:1}.stack{display:grid;gap:20px}.stack label{display:grid;gap:8px;font-size:12px;font-weight:700}.stack input,.stack select,.stack textarea{border:var(--line);min-height:48px;padding:11px 12px;border-radius:0}.stack textarea{min-height:90px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field-help{font-size:11px;font-weight:400}.inline-actions{display:flex;gap:10px;flex-wrap:wrap}.search-results{border:var(--line);margin-top:-20px}.search-result{display:block;width:100%;border:0;border-bottom:var(--line);text-align:left;padding:12px}.search-result:last-child{border-bottom:0}.search-result:hover{background:#000;color:#fff}.selected-client{border:2px solid #000;padding:16px;display:flex;justify-content:space-between}.section-head{padding:50px 0 24px;display:flex;align-items:end;justify-content:space-between;border-bottom:var(--line)}.section-head h1{font-family:var(--serif);font-size:clamp(42px,5vw,72px);font-weight:400;margin:0}.data-list{display:grid}.data-row{min-height:74px;border-bottom:var(--line);display:grid;grid-template-columns:2fr 1fr 1fr auto;align-items:center;gap:20px}.data-row strong{font-family:var(--serif);font-size:20px;font-weight:400}.data-row span{font-size:12px}.status{border:var(--line);padding:6px 9px;text-transform:uppercase;font-size:9px;letter-spacing:.12em;white-space:nowrap}.status.dark{background:#000;color:#fff}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:#000;color:#fff;padding:14px 20px;z-index:80;transition:transform .2s}.toast.show{transform:translate(-50%,0)}.auth{min-height:100vh;display:grid;place-items:center;padding:40px}.auth section{width:min(520px,100%)}.auth h1{font-size:clamp(54px,8vw,92px)}.lede{font-family:var(--serif);font-size:20px;line-height:1.5;margin:24px 0 40px}.notice{border:2px solid #000;padding:14px}.notice.error{background:#000;color:#fff}.public-invoice{max-width:800px;margin:auto;padding-top:40px;padding-bottom:80px}.public-invoice>header{display:flex;justify-content:space-between;border-bottom:var(--line);padding-bottom:24px}.invoice-title{padding:70px 0}.invoice-lines{border-top:var(--line)}.invoice-lines>div{display:flex;justify-content:space-between;padding:20px 0;border-bottom:var(--line)}.invoice-lines .total{font-size:24px;padding:30px 0}.public-invoice form{margin-top:40px}.fine{font-size:11px;text-align:center;margin-top:14px}.paid-mark{background:#000;color:#fff;padding:28px;text-align:center;text-transform:uppercase;letter-spacing:.15em;margin-top:40px}.empty{padding:60px 0;font-family:var(--serif);font-size:24px}.invoice-actions{display:flex;gap:8px}.channel-pick{display:flex;gap:10px}.channel-pick label{display:flex;align-items:center;gap:8px;border:var(--line);padding:14px;flex:1}.channel-pick input{min-height:auto}
@media(max-width:760px){.topbar{height:66px;grid-template-columns:1fr auto;padding:0 18px}.topbar nav{position:fixed;bottom:0;left:0;right:0;height:58px;background:#fff;border-top:var(--line);z-index:30;justify-content:space-around}.nav{flex:1}.topbar>.button{font-size:0;min-width:46px;padding:0}.topbar>.button:before{content:'+';font-size:25px}.topbar kbd{display:none}.diary-head{padding-top:30px;align-items:start;flex-direction:column}.diary-head h1{font-size:50px}.diary-grid{grid-template-columns:56px 1fr}.appointment{left:68px}.view{padding-bottom:78px}.panel{padding:20px;border-left:0}.form-grid{grid-template-columns:1fr}.data-row{grid-template-columns:1fr auto;padding:16px 0}.data-row span:nth-child(2),.data-row span:nth-child(3){grid-column:1}.section-head{padding-top:32px}.scrim.open{display:none}.auth{padding:24px}.invoice-title{padding:48px 0}.public-invoice{padding-left:22px;padding-right:22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

body.panel-open{overflow:hidden}.diary-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}.segmented{display:flex;border:var(--line)}.segmented button{border:0;min-height:40px;padding:0 16px}.segmented button+button{border-left:var(--line)}.segmented .selected{background:#000;color:#fff}.closed-day{border-top:var(--line);min-height:420px;display:grid;place-content:center;text-align:center;gap:16px}.closed-day p{font-family:var(--serif);font-size:42px;margin:0}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));border-top:var(--line);border-left:var(--line);overflow-x:auto}.week-day{min-height:620px;border-right:var(--line);border-bottom:var(--line);padding-bottom:16px;display:flex;flex-direction:column}.week-day.today{box-shadow:inset 0 5px #000}.week-date{border:0;border-bottom:var(--line);padding:16px;text-align:left;display:flex;align-items:baseline;justify-content:space-between}.week-date span{font-size:11px;text-transform:uppercase;letter-spacing:.12em}.week-date strong{font-family:var(--serif);font-size:30px;font-weight:400}.week-hours,.week-empty{font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:0 12px}.week-day>div{display:grid;gap:8px;padding:8px;flex:1;align-content:start}.week-appointment{border:2px solid #000;text-align:left;padding:10px;display:grid;gap:4px}.week-appointment time,.week-appointment span{font-size:10px}.week-appointment.completed{background:#000;color:#fff}.week-appointment.cancelled{text-decoration:line-through;border-style:dashed}.week-appointment.no_show{border-style:double;border-width:4px}.week-add{border:0;border-top:var(--line);padding:14px;text-align:left}.appointment{padding-left:22px}.appointment em{position:absolute;right:8px;top:8px;font-style:normal;text-transform:uppercase;letter-spacing:.08em;font-size:8px}.appointment .status-mark{position:absolute;left:0;top:0;bottom:0;width:8px;border-right:var(--line)}.appointment.confirmed .status-mark{background:repeating-linear-gradient(45deg,#000 0,#000 2px,#fff 2px,#fff 5px)}.appointment.no_show{border-style:double;border-width:4px}.appointment.no_show .status-mark{background:#000}.appointment.booked .status-mark{background:#fff}.appointment.cancelled{}.suggestions{border:var(--line);padding:12px;display:flex;gap:8px;flex-wrap:wrap}.suggestions .eyebrow{width:100%}.suggestions button{border:var(--line);padding:9px;background:#fff;font-size:11px}.suggestions button:hover{background:#000;color:#fff}.advanced{border-top:var(--line);border-bottom:var(--line);padding:14px 0}.advanced summary{cursor:pointer;font-size:12px;font-weight:700}.advanced[open] summary{margin-bottom:16px}.danger-zone{margin-top:10px}.action-group{display:grid;gap:10px}.form-error{margin:0}.client-hero h2,.appointment-summary h2{font-family:var(--serif);font-size:42px;font-weight:400;margin:0}.history-row{width:100%;border:0;border-bottom:var(--line);padding:13px 0;display:grid;grid-template-columns:1fr 2fr auto;gap:12px;text-align:left;align-items:center}.history-row:first-of-type{border-top:var(--line)}.history-row:hover{background:#000;color:#fff;padding-left:10px;padding-right:10px}.list-search{display:grid;grid-template-columns:auto minmax(220px,420px);align-items:center;gap:14px;padding:22px 0;border-bottom:var(--line);font-size:12px;font-weight:700}.list-search input{min-height:42px;border:var(--line);padding:8px 12px}.data-row{width:100%;border:0;border-bottom:var(--line);text-align:left;padding:0;background:#fff}.data-row:hover{background:#000;color:#fff;padding-left:12px;padding-right:12px}.invoice-summary{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--line)}.invoice-summary>div{padding:28px 0;display:grid;gap:6px}.invoice-summary>div+div{border-left:var(--line);padding-left:28px}.invoice-summary strong{font-family:var(--serif);font-size:38px;font-weight:400}.invoice-summary span{font-size:11px;text-transform:uppercase;letter-spacing:.12em}.invoice-amount{font-family:var(--serif);font-size:50px;margin:0}.delivery-state{border:var(--line);padding:16px}.settings-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:var(--space);padding:32px 0 80px}.settings-card{border-top:4px solid #000;padding-top:24px}.settings-card h2{font-family:var(--serif);font-size:34px;font-weight:400;margin:0}.hours-list{display:grid}.hours-row{display:grid;grid-template-columns:1fr 120px auto 120px;gap:10px;align-items:center;border-bottom:var(--line);padding:10px 0}.hours-row label{display:flex;align-items:center;gap:8px}.hours-row input[type=time]{border:var(--line);padding:8px}.service-list{border-top:var(--line);margin:20px 0 32px}.service-list>div{border-bottom:var(--line);padding:14px 0;display:flex;justify-content:space-between;gap:10px}.service-list span{font-size:12px}.compact{margin-top:24px}.notice.success{background:#000;color:#fff}
@media(max-width:1000px){.week-grid{grid-template-columns:repeat(7,180px)}.settings-grid{grid-template-columns:1fr}.topbar{grid-template-columns:auto 1fr auto}.topbar nav{justify-self:center}}
@media(max-width:760px){.diary-tools{width:100%;justify-content:space-between}.date-controls{width:100%;justify-content:space-between}.date-controls input{max-width:130px}.week-grid{margin-left:-20px;margin-right:-20px;padding-left:20px}.week-day{min-height:500px}.hours-row{grid-template-columns:1fr 95px auto 95px}.hours-row label{grid-column:1/-1}.invoice-summary strong{font-size:28px}.toast{bottom:76px;max-width:calc(100% - 32px);text-align:center}.topbar nav{overflow-x:auto}.nav{padding:0 12px}.panel{width:100%;}.scrim.open{display:block;opacity:0}.history-row{grid-template-columns:1fr auto}.history-row strong{grid-column:1}}


:root {
  --serif: 'Plus Jakarta Sans', Arial, sans-serif;
  --sans: 'Plus Jakarta Sans', Arial, sans-serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

html { font-family: var(--sans); }
.brand,
.diary-head h1,
.invoice-title h1,
.auth h1,
.section-head h1,
.data-row strong,
.closed-day p,
.week-date strong,
.client-hero h2,
.appointment-summary h2,
.invoice-summary strong,
.invoice-amount,
.settings-card h2,
.lede,
.empty { font-family: var(--sans); }

.diary-head h1,
.invoice-title h1,
.auth h1,
.section-head h1 { font-weight: 600; letter-spacing: -.045em; }
.brand { font-weight: 700; letter-spacing: -.035em; }

.button,
.date-controls button,
.date-controls input,
.stack input,
.stack select,
.stack textarea,
.list-search input,
.hours-row input[type=time],
.suggestions button { border-radius: var(--radius-sm); }

.segmented,
.selected-client,
.search-results,
.suggestions,
.delivery-state,
.notice,
.channel-pick label,
.week-appointment,
.week-add,
.history-row,
.invoice-summary { border-radius: var(--radius-md); }

.segmented { overflow: hidden; }
.status { border-radius: var(--radius-pill); }
.appointment { border-radius: var(--radius-sm); }
.appointment .status-mark { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.week-appointment,
.week-add { overflow: hidden; }
.week-day { padding: 8px; gap: 8px; }
.week-date { border: var(--line); border-radius: var(--radius-md); }
.week-day > div { padding: 0; }
.week-add { border: var(--line); margin-top: auto; }

.panel {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow-x: hidden;
}
.settings-card {
  border: var(--line);
  border-top-width: 4px;
  border-radius: var(--radius-lg);
  padding: 24px;
}
.public-invoice .invoice-lines,
.invoice-lines { border-radius: var(--radius-md); overflow: hidden; }
.paid-mark { border-radius: var(--radius-md); }
.toast { border-radius: var(--radius-pill); }

@media (max-width: 760px) {
  .panel { border-radius: 0; }
  .settings-card { padding: 18px; border-radius: var(--radius-md); }
}

:root {
  --control-height: 48px;
  --toggle-width: 44px;
  --toggle-height: 24px;
}

input:not([type='checkbox']):not([type='radio']),
select {
  width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 14px;
  border: var(--line);
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

textarea {
  width: 100%;
  min-height: 112px;
  padding: 14px;
  border: var(--line);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.date-controls input,
.hours-row input[type='time'],
.list-search input,
.stack input,
.stack select {
  height: var(--control-height);
  min-height: var(--control-height);
  padding-top: 0;
  padding-bottom: 0;
}

input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: var(--toggle-width);
  height: var(--toggle-height);
  min-width: var(--toggle-width);
  min-height: var(--toggle-height);
  margin: 0;
  padding: 0;
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  background: var(--white);
  cursor: pointer;
  transition: background-color .16s ease;
}

input[type='checkbox']::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--black);
  transition: transform .16s ease, background-color .16s ease;
}

input[type='checkbox']:checked { background: var(--black); }
input[type='checkbox']:checked::before {
  background: var(--white);
  transform: translateX(20px);
}
input[type='checkbox']:disabled {
  border-style: dashed;
  cursor: not-allowed;
}

.hours-row label,
.channel-pick label {
  min-height: var(--control-height);
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  input[type='checkbox'],
  input[type='checkbox']::before { transition: none; }
}

.date-controls input { width: auto; }
.hours-row input[type='time'] { width: 100%; }

@media (max-width: 760px) {
  .date-controls input { width: 130px; }
}

#settingsView a[href='/logout'] {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

#settingsView a[href='/logout']:hover,
#settingsView a[href='/logout']:focus-visible {
  background: var(--white);
  color: var(--black);
}

@media (max-width: 760px) {
  .topbar nav {
    left: 0;
    right: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: calc(62px + env(safe-area-inset-bottom));
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .topbar nav .nav {
    width: 100%;
    min-width: 0;
    height: 62px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    text-align: center;
  }

  .topbar nav .nav.active::after {
    left: 18%;
    right: 18%;
  }

  .topbar > #quickAdd {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    gap: 0;
    line-height: 1;
  }

  .topbar > #quickAdd::before {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 28px;
    line-height: 1;
    text-align: center;
    transform: translateY(-1px);
  }

  .view {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body { max-width: 100%; overflow-x: hidden; }
main,
.view,
.settings-grid,
.settings-card,
.data-row,
.topbar { min-width: 0; }

@media (max-width: 760px) {
  .topbar .brand {
    min-width: 0;
    max-width: calc(100vw - 92px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar nav .nav {
    min-height: 62px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  .diary-head {
    width: 100%;
    gap: 20px;
  }
  .diary-head > div:first-child { min-width: 0; width: 100%; }
  .diary-head h1 {
    max-width: 100%;
    font-size: clamp(36px, 12vw, 50px);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .diary-tools { min-width: 0; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; min-height: 44px; }
  .date-controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .date-controls button { width: 100%; min-width: 0; height: 44px; padding: 0 8px; }
  .date-controls input {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea { font-size: 16px; }

  .section-head {
    gap: 12px;
    align-items: center;
  }
  .section-head h1 { font-size: clamp(34px, 11vw, 48px); }
  .section-head > .button { flex: 0 0 auto; min-height: 44px; padding: 0 14px; }

  .settings-grid { width: 100%; gap: 24px; }
  .settings-card { width: 100%; min-width: 0; }
  .hours-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }
  .hours-row label { grid-column: 1 / -1; }
  .hours-row input[type='time'] {
    min-width: 0;
    width: 88px;
    max-width: 100%;
    justify-self: center;
    height: 40px;
    min-height: 40px;
    padding: 0 6px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: textfield;
    appearance: textfield;
  }
  .hours-row input[type='time']::-webkit-datetime-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 40px;
    text-align: center;
  }
  .hours-row input[type='time']::-webkit-datetime-edit-fields-wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    line-height: 40px;
  }
  .hours-row input[type='time']::-webkit-datetime-edit-hour-field,
  .hours-row input[type='time']::-webkit-datetime-edit-minute-field {
    padding: 0 1px;
    line-height: 40px;
  }
  .hours-row input[type='time']::-webkit-date-and-time-value {
    text-align: center;
    line-height: 40px;
  }
  .service-list > div {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .service-list strong { min-width: 0; overflow-wrap: anywhere; }
  .service-list span { flex: 0 0 auto; }

  .channel-pick { flex-direction: column; }
  .channel-pick label { width: 100%; min-width: 0; }
  .inline-actions > .button { flex: 1 1 120px; }

  .list-search {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .data-row { column-gap: 12px; }
  .data-row strong,
  .data-row span { min-width: 0; overflow-wrap: anywhere; }

  .invoice-summary > div { min-width: 0; padding: 20px 12px 20px 0; }
  .invoice-summary > div + div { padding-left: 16px; }
  .invoice-summary strong { font-size: clamp(22px, 7vw, 28px); overflow-wrap: anywhere; }

  .week-grid {
    width: calc(100% + 40px);
    max-width: calc(100vw);
    margin-left: -20px;
    margin-right: 0;
    padding-left: 20px;
    overscroll-behavior-x: contain;
  }
  .week-appointment { min-width: 0; }
  .week-appointment strong,
  .week-appointment span { overflow-wrap: anywhere; }

  .suggestions button { min-height: 44px; }
  .panel {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

  .public-invoice { max-width: 100%; }
  .invoice-title h1 { font-size: clamp(38px, 13vw, 60px); overflow-wrap: anywhere; }
  .invoice-lines > div { gap: 16px; }
  .invoice-lines > div span { min-width: 0; overflow-wrap: anywhere; }
  .invoice-lines > div strong { flex: 0 0 auto; }
}

@media (max-width: 360px) {
  .topbar nav .nav { font-size: 10px; padding-left: 2px; padding-right: 2px; }
  .section-head { align-items: flex-start; }
  .section-head h1 { font-size: 34px; }
  .section-head > .button { padding-left: 11px; padding-right: 11px; }
}

@media (max-width: 760px) {
  .topbar nav .nav {
    font-size: 11px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

@media (max-width: 360px) {
  .topbar nav .nav { font-size: 11px; }
}

#panelBody,
#panelBody form,
#clientArea,
.stack,
.stack > *,
.form-grid,
.form-grid > *,
.date-controls,
.date-controls > * {
  min-width: 0;
  max-width: 100%;
}

input[type='date'],
input[type='time'],
input[type='datetime-local'] {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#clientArea {
  display: grid;
  gap: 12px;
}

#clientArea #newClient {
  width: 100%;
  margin-top: 6px;
}

#clientArea .search-results {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

@media (max-width: 760px) {
  .date-controls input[type='date'] {
    grid-column: 1 / -1;
    inline-size: 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #panelBody {
    width: 100%;
    overflow-x: hidden;
  }

  #bookingForm input[type='datetime-local'] {
    inline-size: 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

input[type='date']::-webkit-date-and-time-value,
input[type='time']::-webkit-date-and-time-value,
input[type='datetime-local']::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator,
input[type='datetime-local']::-webkit-calendar-picker-indicator {
  margin-left: auto;
}

@media (min-width: 761px) {
  .date-controls input[type='date'] {
    inline-size: auto;
    width: auto;
  }
}

@media (max-width: 760px) {
  .date-controls input[type='date'],
  #bookingForm input[type='datetime-local'],
  #rescheduleForm input[type='datetime-local'] {
    box-sizing: border-box !important;
    inline-size: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    padding: 0 12px !important;
    line-height: normal !important;
  }

  .date-controls input[type='date']::-webkit-date-and-time-value,
  #bookingForm input[type='datetime-local']::-webkit-date-and-time-value,
  #rescheduleForm input[type='datetime-local']::-webkit-date-and-time-value {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    line-height: normal;
    text-align: left;
  }

  .date-controls input[type='date']::-webkit-datetime-edit,
  #bookingForm input[type='datetime-local']::-webkit-datetime-edit,
  #rescheduleForm input[type='datetime-local']::-webkit-datetime-edit {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .date-controls input[type='date']::-webkit-calendar-picker-indicator,
  #bookingForm input[type='datetime-local']::-webkit-calendar-picker-indicator,
  #rescheduleForm input[type='datetime-local']::-webkit-calendar-picker-indicator {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 4px;
  }
}

.input-affix {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}

.input-affix:focus-within {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}

.input-affix input:not([type='checkbox']):not([type='radio']) {
  flex: 1 1 auto;
  inline-size: 1%;
  width: 1%;
  min-width: 0;
  max-width: none;
  height: calc(var(--control-height) - 2px);
  min-height: calc(var(--control-height) - 2px);
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.input-prefix,
.input-suffix {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  background: var(--white);
  pointer-events: none;
}

.input-prefix { border-right: var(--line); }
.input-suffix { border-left: var(--line); }

@media (max-width: 760px) {
  .input-affix { inline-size: 100%; width: 100%; }
  .input-affix input:not([type='checkbox']):not([type='radio']) {
    inline-size: 1% !important;
    width: 1% !important;
    min-width: 0 !important;
  }
}

/* Black accent */
:root {
  --accent: var(--black);
  --accent-dark: var(--black);
  --accent-soft: rgba(0, 0, 0, 0.12);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline-color: var(--accent);
}

.button.dark {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.button.dark:hover,
.button.dark:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--white);
}

.topbar > .button.dark {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.nav.active::after,
.segmented .selected,
.status.dark {
  background: var(--accent);
}

.week-day.today {
  box-shadow: inset 0 5px var(--accent);
}

.now-line,
.now-line::before {
  background: var(--accent);
}

.selected-client {
  border-color: var(--accent);
}

.suggestions button:hover {
  background: var(--accent);
  color: var(--white);
}

@media (max-width: 760px) {
  .week-grid {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 12px;
    border: 0;
    overflow: visible;
  }

  .week-day {
    min-height: 0;
    padding: 0;
    gap: 0;
    border: var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
  }

  .week-day.today {
    box-shadow: none;
  }

  .week-date {
    padding: 14px 16px;
    align-items: center;
    border: 0;
    border-bottom: var(--line);
  }

  .week-date span {
    font-size: 10px;
  }

  .week-date strong {
    font-size: 24px;
    line-height: 1;
  }

  .week-hours {
    padding: 12px 16px 0;
    font-size: 11px;
  }

  .week-day > div {
    padding: 12px 16px 16px;
    gap: 10px;
  }

  .week-empty {
    padding: 8px 0 2px;
  }

  .week-appointment {
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: start;
    padding: 12px 14px;
    border-width: 1px;
  }

  .week-appointment time {
    grid-row: 1 / span 2;
    align-self: start;
    min-width: 48px;
    font-size: 12px;
    font-weight: 700;
  }

  .week-appointment strong {
    font-size: 14px;
  }

  .week-appointment span {
    font-size: 11px;
  }

  .week-add {
    margin: 0 16px 16px;
    border: var(--line);
    border-radius: var(--radius-md);
    min-height: 48px;
    text-align: center;
    background: #000;
    color: #fff;
  }

  .week-add:hover,
  .week-add:focus-visible {
    background: #fff;
    color: #000;
  }
}


.settings-stack { display: grid; gap: var(--space); }
.toggle-row { display: flex; align-items: center; gap: 10px; min-height: var(--control-height); font-size: 12px; font-weight: 700; }
.toggle-row input { flex: 0 0 auto; }
.blockout-list { display: grid; gap: 12px; margin-top: 20px; }
.blockout-row { border: var(--line); border-radius: var(--radius-md); padding: 16px; display: grid; gap: 14px; }
.blockout-row strong { font-family: var(--sans); font-size: 18px; }
.blockout-row span { font-size: 12px; }
.holiday-notice { border: var(--line); border-radius: var(--radius-md); padding: 12px 14px; font-size: 12px; }
.slot.blocked { opacity: .3; pointer-events: none; }
@media (max-width: 760px) {
  .blockout-row { padding: 14px; }
  .blockout-row .inline-actions { width: 100%; }
}