/* Staff + Owner views — design source: StaffApp.dc.html / OwnerApp.dc.html */
.bh-head { flex: none; background: var(--ink); color: var(--cream); padding: 14px 20px 12px; }
.bh-head .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bh-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.16em; color: #C4A0AF; }
.bh-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
.bh-right { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(242,240,235,0.55); }
.bh-block-btn { height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(242,240,235,0.28); display: flex; align-items: center; font-size: 12.5px; cursor: pointer; }

.chairs { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; }
/* The label that says the chips above are a switcher, not a headcount. */
.chairs-label { margin-top: 12px; }
.chairs-label + .chairs { margin-top: 6px; }

/* Keying a booking in without a mobile: a warning, never a block. */
.wk-nophone { margin-top: 14px; padding: 11px 13px; border-radius: 8px;
  background: rgba(122, 46, 74, 0.07); border: 1px solid rgba(122, 46, 74, 0.22);
  color: var(--ink, #16110F); font-size: 12.5px; font-weight: 300; line-height: 1.5; }
.chair { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; background: rgba(242,240,235,0.09); color: rgba(242,240,235,0.8); border: 1px solid rgba(242,240,235,0.18); }
.chair.on { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.chair .cnt { font-family: 'IBM Plex Mono', monospace; font-size: 10px; opacity: 0.7; }

.st-shell { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.st-shell.wide { flex-direction: row; }
.st-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

.st-stats { display: flex; gap: 8px; padding: 14px 16px 4px; }
.st-stat { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.st-stat .k { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted); }
.st-stat .v { font-family: 'IBM Plex Mono', monospace; font-size: 20px; margin-top: 6px; color: var(--ink); }

.agenda { padding: 10px 16px 20px; }
.ag-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; background: #fff; border: 1px solid var(--line); }
.ag-row.soft { background: transparent; border: 1px dashed rgba(22,17,15,0.22); }
.ag-row.soft.nogap { cursor: default; }
.ag-row.dim { opacity: 0.62; }
.ag-row.sel { border: 1px solid var(--wine); }
.ag-time { width: 50px; flex: none; }
.ag-time .t { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500; }
.ag-time .l { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--muted); margin-top: 3px; }
.ag-bar { width: 3px; align-self: stretch; border-radius: 99px; flex: none; background: transparent; }
.ag-bar.now { background: var(--wine); }
.ag-bar.next { background: var(--blush); }
.ag-main { flex: 1; min-width: 0; }
.ag-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.ag-title.soft { font-weight: 400; color: var(--body); }
.ag-title.strike { text-decoration: line-through; }
.ag-sub { font-size: 12.5px; color: var(--body); margin-top: 3px; font-weight: 300; }
.ag-note { font-size: 11.5px; color: var(--wine); margin-top: 5px; }
.ag-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.ag-chip { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em; padding: 4px 7px; border-radius: 4px; }
.ag-price { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--wine); }

.st-sec-head { padding: 16px 16px 8px; }
.st-sec-head .t { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.st-sec-head .s { font-size: 12.5px; color: var(--body); margin-top: 4px; font-weight: 300; }
.cl-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px; margin: 0 16px 8px; cursor: pointer; }
.cl-av { width: 38px; height: 38px; border-radius: 6px; background: var(--blush); color: var(--wine); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 13px; flex: none; }
.cl-flag { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em; flex: none; padding: 4px 7px; border-radius: 4px; }
.cl-flag.care { background: #F4DADA; color: #8A2E2E; }
.cl-flag.card { background: var(--blush); color: var(--wine); }

.cd-wrap { padding: 16px 16px 20px; }
.cd-back { width: 44px; height: 44px; border-radius: 6px; border: 1px solid rgba(22,17,15,0.15); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
.cd-name { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 14px; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cd-chip { padding: 7px 11px; border-radius: 6px; font-size: 11.5px; background: var(--blush); color: var(--wine); }
.cd-chip.warn { background: rgba(22,17,15,0.06); color: var(--body); }
.cd-actions { display: flex; gap: 8px; margin-top: 14px; }
.cd-actions > * { flex: 1; height: 46px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.allergy { margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: #F4DADA; color: #8A2E2E; }
.allergy .k { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em; }
.allergy .b { font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
.facts { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 16px; }
.facts .row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.facts .row:last-child { border-bottom: none; }
.facts .k { color: var(--muted); font-weight: 300; }
.facts .v { text-align: right; }
.note-card { background: var(--blush); border-radius: 8px; padding: 13px 16px; font-size: 13.5px; line-height: 1.5; color: #4A3A40; margin-top: 8px; }
.add-note { margin-top: 8px; height: 46px; border-radius: 8px; border: 1px dashed rgba(122,46,74,0.4); color: var(--wine); display: flex; align-items: center; justify-content: center; font-size: 13.5px; cursor: pointer; }
.hist { margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 16px; }
.hist .row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.hist .row:last-child { border-bottom: none; }
.hist .d { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); width: 52px; flex: none; }
.hist .w { flex: 1; font-size: 13.5px; font-weight: 300; }
.hist .a { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--wine); }

.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wk-chip { padding: 10px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.wk-chip.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.wk-scroll { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; flex-wrap: nowrap; }

.st-btn { height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: center; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.st-btn.dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.st-btn.solid { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.st-btn.disabled { opacity: 0.55; cursor: default; }

.panel { display: flex; flex-direction: column; background: #F7F5F1; }
.st-shell.wide .panel { flex: none; width: 380px; min-height: 0; border-left: 1px solid var(--line); }
.st-shell:not(.wide) .panel { position: absolute; left: 0; right: 0; bottom: 0; top: 56px; z-index: 31; border-top: 1px solid var(--line); box-shadow: 0 -12px 40px rgba(22,17,15,0.18); }
.scrim { position: absolute; inset: 0; background: rgba(22,17,15,0.45); z-index: 30; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid rgba(22,17,15,0.09); }
.panel-head .k { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; color: var(--muted); }
.panel-head .t { font-size: 17px; font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-close { width: 40px; height: 40px; flex: none; border-radius: 6px; border: 1px solid rgba(22,17,15,0.15); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 16px 18px 24px; }
.appt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.noshow-btn { margin-top: 8px; height: 48px; border-radius: 8px; border: 1px solid rgba(122,46,74,0.35); color: var(--wine); display: flex; align-items: center; justify-content: center; font-size: 13.5px; cursor: pointer; }
.panel-hint { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; font-weight: 300; }
.pay-hero { background: var(--ink); color: var(--cream); border-radius: 8px; padding: 18px 20px; }
.pay-hero .k { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; color: #C4A0AF; }
.pay-hero .v { font-family: 'IBM Plex Mono', monospace; font-size: 38px; font-weight: 500; margin-top: 8px; }
.pay-hero .s { font-size: 13px; color: rgba(242,240,235,0.6); margin-top: 4px; font-weight: 300; }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.pay-m { height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; background: #fff; border: 1px solid var(--line); }
.pay-m.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.text-opt { padding: 14px 16px; border-radius: 8px; font-size: 13.5px; line-height: 1.5; cursor: pointer; background: #fff; border: 1px solid var(--line); }
.text-opt.on { background: var(--blush); border-color: var(--wine); }
.sent-ok { margin-top: 14px; padding: 12px 16px; border-radius: 8px; background: #DDEBDD; color: #2F5D3A; font-size: 13px; }

.st-tabs { flex: none; display: flex; gap: 8px; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.st-tab { flex: 1; height: 46px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--body); }
.st-tab.on { background: var(--ink); color: var(--cream); }

/* Owner */
.ow-periods { display: flex; gap: 4px; background: rgba(242,240,235,0.09); border-radius: 6px; padding: 3px; }
.ow-period { padding: 8px 14px; border-radius: 4px; font-size: 12.5px; cursor: pointer; color: rgba(242,240,235,0.7); }
.ow-period.on { background: var(--cream); color: var(--ink); font-weight: 500; }
.ow-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 16px 16px 28px; }
.ow-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ow-takings { background: var(--ink); color: var(--cream); border-radius: 10px; padding: 20px 22px; }
.ow-takings .k { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; color: #C4A0AF; }
.ow-takings .vrow { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ow-takings .v { font-family: 'IBM Plex Mono', monospace; font-size: 42px; font-weight: 500; letter-spacing: -0.02em; }
.ow-delta { font-family: 'IBM Plex Mono', monospace; font-size: 13px; padding: 5px 9px; border-radius: 5px; }
.ow-delta.up { background: rgba(221,235,221,0.22); color: #BEE0BE; }
.ow-delta.down { background: rgba(244,218,218,0.22); color: #F0C0C0; }
.ow-takings .s { font-size: 12.5px; color: rgba(242,240,235,0.55); margin-top: 6px; font-weight: 300; }
.ow-track { height: 6px; border-radius: 99px; background: rgba(242,240,235,0.16); margin-top: 18px; overflow: hidden; }
.ow-fill { height: 100%; border-radius: 99px; background: #C4A0AF; }
.ow-target-row { display: flex; justify-content: space-between; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: rgba(242,240,235,0.55); }
.ow-chart { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.ow-chart .k { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em; color: var(--muted); }
.ow-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 16px; }
.ow-bcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.ow-bval { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--wine); text-align: center; }
.ow-bar { border-radius: 4px; background: var(--blush); }
.ow-bar.max { background: var(--wine); }
.ow-blab { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); text-align: center; }
.ow-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-top: 12px; }
.ow-kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 15px 16px; }
.ow-kpi .k { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: var(--muted); }
.ow-kpi .v { font-family: 'IBM Plex Mono', monospace; font-size: 26px; margin-top: 8px; }
.ow-kpi .s { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-weight: 300; line-height: 1.4; }
.ow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 22px; }
.ow-card { margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 18px; }
.ow-team-row { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.ow-team-row:last-child { border-bottom: none; }
.ow-tr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ow-tr-top .n { font-size: 15px; font-weight: 500; }
.ow-tr-top .v { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--wine); }
.ow-meter { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.ow-meter .track { flex: 1; height: 5px; border-radius: 99px; background: rgba(22,17,15,0.08); overflow: hidden; }
.ow-meter .fill { height: 100%; border-radius: 99px; background: #C4A0AF; }
.ow-meter .fill.hot { background: var(--wine); }
.ow-meter .fill.soft { background: var(--blush); }
.ow-meter .pct { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--muted); width: 44px; text-align: right; }
.ow-tr-sub { font-size: 11.5px; color: var(--muted); margin-top: 7px; font-weight: 300; }
.ow-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 13px 16px; margin-bottom: 8px; }
.ow-item .when { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; width: 74px; flex: none; }
.ow-item .mid { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 300; }
.ow-item .n { font-size: 14.5px; font-weight: 500; }
.ow-item .s { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-weight: 300; }
.ow-small-btn { flex: none; height: 38px; padding: 0 13px; border-radius: 6px; display: flex; align-items: center; font-size: 12.5px; cursor: pointer; background: #fff; color: var(--wine); border: 1px solid rgba(122,46,74,0.3); }
.ow-small-btn.done { background: #DDEBDD; color: #2F5D3A; border-color: #DDEBDD; cursor: default; }
.ow-small-btn.na { color: var(--muted); border-color: var(--line); cursor: default; }
.ow-note { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-weight: 300; line-height: 1.5; }
.ow-statement { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.ow-st-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ow-st-head .t { font-size: 17px; font-weight: 600; margin-top: 5px; }
.ow-export { flex: none; height: 40px; padding: 0 16px; border-radius: 6px; display: flex; align-items: center; font-size: 13px; cursor: pointer; background: var(--ink); color: var(--cream); }
.ow-export.done { background: #DDEBDD; color: #2F5D3A; cursor: default; }
.ow-st-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.ow-st-row:last-child { border-bottom: none; }
.ow-st-row .k { font-size: 13.5px; }
.ow-st-row .k.sub { color: var(--muted); font-weight: 300; padding-left: 14px; }
.ow-st-row .v { font-family: 'IBM Plex Mono', monospace; font-size: 14px; }

@media (min-width: 700px) {
  .bh-wide #app { max-width: none; border: none; }
}

/* ── Real-data additions (22 Aug) ─────────────────────────────────────────── */
.bh-signin { max-width: 380px; margin: 0 auto; padding: 56px 20px 20px; }
.bh-signin .bh-kicker { margin-bottom: 10px; }
.bh-signin h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.bh-signin p { font-size: 13.5px; color: var(--body); font-weight: 300; margin: 8px 0 18px; line-height: 1.5; }

/* Day stepper — the mockups only ever showed one hard-coded day. */
.bh-days { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
/* Sits on the dark header, so it takes the header's palette — a white
   button here rendered as a blank box with an invisible chevron. */
.bh-day-nav { width: 34px; height: 34px; border-radius: 6px;
  border: 1px solid rgba(242,240,235,0.28); background: rgba(242,240,235,0.09);
  color: var(--cream); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; line-height: 1; user-select: none; }
.bh-day-nav:hover { background: rgba(242,240,235,0.18); }
.bh-day-now { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  color: rgba(242,240,235,0.75); }
.bh-day-today { margin-left: auto; font-size: 12.5px; color: rgba(242,240,235,0.8);
  text-decoration: underline; cursor: pointer; }

.bh-note { padding: 18px 2px; font-size: 13.5px; color: var(--body); font-weight: 300; line-height: 1.55; }
.ag-ref { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 3px; }
.ow-till-note { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; font-size: 12.5px; color: var(--body); font-weight: 300; line-height: 1.55; }

/* Switching between the diary, the owner view and what a client sees — the
   three things Trang needs off one handset. */
.bh-switch { display: flex; gap: 6px; margin-top: 12px; }
.bh-sw {
  flex: 1; text-align: center; padding: 9px 6px; border-radius: 6px;
  font-size: 12.5px; font-weight: 400; text-decoration: none;
  color: rgba(242, 240, 235, 0.62); border: 1px solid rgba(242, 240, 235, 0.18);
}
.bh-sw.on { background: var(--cream, #F2F0EB); color: #16110F; font-weight: 500; border-color: transparent; }

.bh-sw.out {
  flex: 0 0 auto; padding-left: 12px; padding-right: 12px; cursor: pointer;
  border-style: dashed; color: rgba(242, 240, 235, 0.5);
}

/* A time she can take but that runs past the next appointment. Not an error —
   her call — so it reads as a warning, not a refusal. */
.wk-chip.over { border-color: #C9A227; color: #7A5E12; }
.wk-chip.over.on { background: #7A5E12; border-color: #7A5E12; color: #F2F0EB; }

/* Owner tabs: the figures, the whole salon's day, and the settings. */
.ow-tabs { display: flex; gap: 6px; margin-top: 10px; }
.ow-tab { flex: 1; text-align: center; padding: 9px 6px; border-radius: 6px; font-size: 12.5px;
  cursor: pointer; color: rgba(242,240,235,0.62); border: 1px solid rgba(242,240,235,0.18); }
.ow-tab.on { background: var(--cream, #F2F0EB); color: #16110F; font-weight: 500; border-color: transparent; }

.ow-daynav { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; }
.ow-day { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ow-daycol { background: #fff; border: 1px solid rgba(22,17,15,0.1); border-radius: 8px; overflow: hidden; }
.ow-dayhead { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px;
  background: rgba(22,17,15,0.04); font-size: 14px; font-weight: 500; }
.ow-dayhead .mono { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #6B625B; font-weight: 400; }
.ow-slot { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border-top: 1px solid rgba(22,17,15,0.06); }
.ow-slot .t { font-size: 13px; min-width: 44px; }
.ow-slot .m { flex: 1; min-width: 0; }
.ow-slot .m .n { font-size: 14px; }
.ow-slot .m .s { font-size: 11.5px; color: #6B625B; font-weight: 300; margin-top: 2px; }
.ow-slot .r { font-size: 12px; color: #7A2E4A; }
.ow-slot.empty { color: #8A8078; font-size: 13px; font-weight: 300; justify-content: center; }

/* The day arrows were built for the dark header, where cream on near-black
   reads fine. Dropped into the owner's Diary tab they were cream on cream —
   present, clickable, and completely invisible (Darren, 31 Aug: "doesn't
   allow you to change days"). Same control, colours for a light page, and a
   proper thumb-sized target. */
.ow-daynav .bh-day-nav {
  color: #16110F; background: #fff; border: 1px solid rgba(22, 17, 15, 0.18);
  min-width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; border-radius: 8px; font-size: 20px; cursor: pointer;
}
.ow-daynav .bh-day-now { color: #16110F; font-weight: 500; }
.ow-daynav .bh-day-today { color: var(--wine, #7A2E4A); text-decoration: underline; cursor: pointer; }

/* Moving an appointment — the day being moved TO.
   Its own arrows, inside the panel: the diary's arrows close the panel, which
   is why moving to another day was impossible before. `.bh-day-nav` is styled
   for the dark diary header, so it is re-tinted here for the light panel. */
.mv-days { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mv-days .bh-day-nav { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.mv-days .bh-day-nav:hover { background: rgba(22,17,15,0.06); }
.mv-daylabel { font-size: 14px; font-weight: 500; color: var(--ink); }
/* Tap the date to pick one off a calendar (Darren, 21 Sep). */
.mv-daylabel.tap { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-decoration-color: rgba(122,46,74,0.35); text-underline-offset: 3px; }
.mv-days .bh-day-today { margin-left: auto; color: var(--wine, #7A2E4A);
  text-decoration: underline; cursor: pointer; }

/* A clash is not the same as a late finish, so it must not look the same.
   Amber (.over) = runs past closing, her call. Red = she is about to put two
   clients on one chair at once. Reuses the no-show red already in this file
   rather than introducing another colour. */
.wk-chip.busy { border-color: #8A2E2E; color: #8A2E2E; background: #FDF6F6; }
.wk-chip.busy.on { background: #8A2E2E; border-color: #8A2E2E; color: #F2F0EB; }

/* Who did what to this appointment. Collapsed by default — it matters when
   somebody asks "who moved that", not on every glance at the diary. */
.hist-toggle { margin-top: 14px; font-size: 13px; color: var(--wine, #7A2E4A);
  text-decoration: underline; cursor: pointer; }
.hist { margin-top: 10px; border-top: 1px solid var(--line); }
.hist-row { display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.hist-what { font-size: 13px; color: var(--ink); }
.hist-when { font-size: 12px; color: var(--body, #6B625B); white-space: nowrap; }

/* Owner Diary rows are links into the technician diary, so they have to look
   like something you can press. Before this they were inert divs and an owner
   reasonably concluded a booking could not be moved at all. */
a.ow-slot.live { text-decoration: none; color: inherit; cursor: pointer; display: flex; }
a.ow-slot.live:hover { background: rgba(22,17,15,0.04); }
a.ow-slot.live:active { background: rgba(22,17,15,0.08); }

/* Small inline actions on a login row (send the link again / switch off). */
.st-btn.tiny { height: auto; padding: 7px 11px; font-size: 12.5px; }
.ow-item-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ── The week (Trang, 7 Sep) ────────────────────────────────────────────────
   A real grid on a computer in landscape -- Tuesday to Saturday side by side.
   On a phone the columns stack, because five columns of appointments on a
   420px screen is unreadable, and the day view is the working view anyway. */
.ow-week { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* iPad portrait is 810 and landscape is 1080-1194, so one breakpoint at 700
   would have given five columns of 140px on a tablet. Three steps instead:
   a phone stacks, a tablet in portrait fits as many as stay readable, and
   from 900 up -- iPad landscape and any computer -- Tuesday to Saturday are
   always side by side, which is what Trang asked for. */
@media (min-width: 640px) {
  .ow-week { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; }
}
@media (min-width: 800px) {
  .ow-week { grid-template-columns: repeat(var(--wk-cols, 5), minmax(0, 1fr)); align-items: start; }
}
.ow-wkcol { border: 1px solid rgba(22,17,15,0.12); border-radius: 8px; overflow: hidden; background: #fff; }
.ow-wkcol.on { border-color: var(--wine); }
.ow-wkhead { display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  padding: 8px 10px; font-size: 12.5px; font-weight: 500; background: rgba(22,17,15,0.05); cursor: pointer; }
.ow-wkcol.on .ow-wkhead { background: var(--wine); color: var(--cream); }
.ow-wkhead .mono { font-size: 11px; opacity: 0.75; }
.ow-wkslot { padding: 7px 10px; border-top: 1px solid rgba(22,17,15,0.07); }
.ow-wkslot .t { font-size: 11px; color: var(--wine); }
.ow-wkslot .n { font-size: 13px; font-weight: 500; }
.ow-wkslot .s { font-size: 11px; color: #6B625B; }
.ow-wkslot.empty { font-size: 12px; color: rgba(22,17,15,0.35); }
.ow-wkslot.off { opacity: 0.5; text-decoration: line-through; }

/* The Day/Week switch sits on the LIGHT page, not the dark header bar, so it
   cannot borrow .ow-period -- that is cream text, which on this background is
   invisible. Measured, not guessed: the inactive chip came back
   rgba(242,240,235,0.7) on a near-white page. */
.ow-viewsw { display: inline-flex; gap: 4px; padding: 4px; border-radius: 9px;
  background: rgba(22,17,15,0.06); margin-bottom: 12px; }
.ow-viewsw .v { padding: 7px 18px; border-radius: 6px; font-size: 13px; cursor: pointer;
  color: rgba(22,17,15,0.65); }
.ow-viewsw .v.on { background: #fff; color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 2px rgba(22,17,15,0.14); }

/* ── The month ──────────────────────────────────────────────────────────────
   Thirty days of appointments do not fit anywhere, so a cell carries a count
   and a shade instead. Four steps rather than a gradient, because she is
   reading it at a glance, not measuring it. */
.ow-mon-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.ow-mon-dow div { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 10px; opacity: 0.5; }
.ow-mon { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ow-mday { position: relative; min-height: 52px; border-radius: 8px; padding: 5px 6px 6px;
  border: 1px solid rgba(22,17,15,0.1); background: #fff; cursor: pointer; }
.ow-mday.pad { border: 0; background: none; cursor: default; }
.ow-mday .d { font-size: 12px; font-weight: 500; }
.ow-mday .n { position: absolute; right: 6px; bottom: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; }
.ow-mday.shut { background: rgba(22,17,15,0.05); border-color: transparent; cursor: default; }
.ow-mday.shut .d { opacity: 0.3; }
.ow-mday.past { opacity: 0.5; }
.ow-mday.today { border-color: var(--wine); border-width: 2px; }

/* One bar per person who works that day, filled as they book up. Reading bar
   lengths down a column is how she finds a day worth selling -- a count of
   appointments never said whether anything was left. */
.ow-mday .bars { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.ow-mday .bar { height: 4px; border-radius: 2px; background: rgba(22,17,15,0.10); overflow: hidden; }
.ow-mday .bar i { display: block; height: 100%; background: var(--wine); }
/* The longest unbroken free stretch. "1h 50" says a full set fits; a total of
   free minutes could be four useless slivers. */
/* In flow, right-aligned -- absolutely positioning it put the label on top of
   the bars in a 46px phone cell. */
.ow-mday .g { margin-top: 3px; text-align: right; line-height: 1;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #6B625B; }
.ow-mday .g.none { color: var(--wine); font-weight: 500; }
.ow-mon-key .k i { display: block; height: 100%; background: var(--wine); border-radius: 2px; }
.ow-mon-key .k { width: 22px; height: 8px; border-radius: 2px; background: rgba(22,17,15,0.10);
  border: 0; display: inline-block; }
.ow-mon-key .k.shut { background: rgba(22,17,15,0.05); }
@media (min-width: 800px) { .ow-mday { min-height: 76px; } .ow-mday .d { font-size: 13px; } }

/* ── Appointments that run at the same time ─────────────────────────────────
   The day list only ever showed start times, so three people at 10:00 read as
   three tidy rows (Darren, 8 Sep: "are there no overlapping bookings on this
   day?" -- there were thirteen pairs). Now the finish time is on every chip,
   and a run of overlapping ones sits side by side wherever there is width. */
.ow-together { border-left: 2px solid var(--wine); }
.ow-together-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.04em; color: var(--wine); padding: 5px 0 2px 12px; }
/* Side by side EVERYWHERE, phone included.
   Darren, 9 Sep: "again the calander daily veiw needs to show overlaps side by
   side as we outlined in another session - i feel like i'm just repeasitn
   myself". He was right and the reason he kept seeing rows is that the lanes
   were real but gated behind `@media (min-width: 800px)` -- so every phone,
   which is where this app is used, stacked them. The earlier note said two
   columns of appointment text is unreadable on a phone. That was a fair worry
   and the answer is to make the chip narrow-friendly, not to take the columns
   away: below 800px the chip stacks its own insides (time over name over
   treatment) instead of laying them out in a row, so a column only has to
   carry about twelve characters. */
.ow-lanes { display: grid; gap: 6px; padding: 0 0 6px 10px; align-items: start;
  grid-template-columns: repeat(var(--lanes, 2), minmax(0, 1fr)); }
.ow-lanes > .ow-slot { grid-column: calc(var(--lane, 0) + 1);
  border: 1px solid rgba(22,17,15,0.10); border-radius: 8px; background: #fff; }

/* Phone: the chip goes vertical inside its own column. */
@media (max-width: 799px) {
  .ow-lanes > .ow-slot { display: block; padding: 8px 9px; }
  .ow-lanes > .ow-slot .t { font-size: 12px; min-width: 0; }
  .ow-lanes > .ow-slot .t .e { display: block; }
  .ow-lanes > .ow-slot .m { margin-top: 3px; }
  .ow-lanes > .ow-slot .m .n { font-size: 13px; line-height: 1.25; }
  .ow-lanes > .ow-slot .m .s { font-size: 11px; line-height: 1.3; }
  .ow-lanes > .ow-slot .r { margin-top: 3px; }
  /* Three or more at once on a narrow screen: two columns and let the third
     wrap under, rather than three unreadable slivers. */
  .ow-lanes { grid-template-columns: repeat(min(var(--lanes, 2), 2), minmax(0, 1fr)); }
  .ow-lanes > .ow-slot { grid-column: auto; }
}
/* The finish time, quieter than the start -- it is context, not the thing you
   scan for. */
.ow-slot .t .e { opacity: 0.5; font-size: 11px; }

/* ── Date picker ───────────────────────────────────────────────────────────
   Darren, 9 Sep: getting to 1 December meant tapping the chevron sixteen weeks
   in a row. The date label is the button now; this is what drops out of it. */
.bh-day-now.tap { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cal-caret { font-size: 9px; opacity: 0.75; }
.cal { background: #fff; border: 1px solid var(--line, rgba(22,17,15,0.12));
  border-radius: 10px; padding: 10px; margin: 8px 0 2px;
  box-shadow: 0 6px 20px rgba(22,17,15,0.10); max-width: 340px; }
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cal-title { flex: 1; text-align: center; font-size: 13.5px; font-weight: 500; color: var(--ink, #16110F); }
.cal-nav { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; border: 1px solid var(--line, rgba(22,17,15,0.12));
  color: var(--ink, #16110F); font-size: 16px; line-height: 1; background: #fff; }
.cal-nav:active { background: rgba(22,17,15,0.06); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { margin-bottom: 2px; }
.cal-dow > div { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.06em; color: var(--muted, #8A8078); padding: 2px 0; }
.cal-d { text-align: center; padding: 8px 0; border-radius: 6px; font-size: 13.5px;
  cursor: pointer; color: var(--ink, #16110F); }
.cal-d:active { background: rgba(22,17,15,0.08); }
/* Shut days stay tappable — she still looks at a Monday — but read as closed. */
.cal-d.shut { color: var(--muted, #8A8078); opacity: 0.55; }
.cal-d.now { box-shadow: inset 0 0 0 1px var(--wine, #7A2E4A); }
.cal-d.on { background: var(--wine, #7A2E4A); color: #fff; }
.cal-d.on.shut { opacity: 1; }
.cal-foot { margin-top: 8px; text-align: center; }
.cal-foot span { font-size: 12.5px; color: var(--wine, #7A2E4A); cursor: pointer; text-decoration: underline; }
/* The picker hangs off a dark bar on the staff screen and a light one for the
   owner, so it carries its own light card either way. */
.bh-days + .cal { margin-left: 0; }
.cl-retry { color: var(--wine, #7A2E4A); text-decoration: underline; cursor: pointer; }

/* Back out of one client to the list. */
.ow-back { font-size: 13px; color: var(--wine, #7A2E4A); cursor: pointer;
  padding: 2px 0 10px; display: inline-block; }

/* Find a client, from the diary. Sits on the day bar next to the date, which
   is dark on the therapist screen and light on the owner's, so it takes its
   colour from whichever bar it is on. */
.bh-find { margin-left: auto; width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 17px; line-height: 1; border: 1px solid rgba(242,240,235,0.25);
  color: rgba(242,240,235,0.9); }
.bh-find:active { background: rgba(242,240,235,0.18); }
/* "Back to today" already claims the left auto-margin when it is showing. */
.bh-day-today + .bh-find { margin-left: 8px; }
.ow-daynav .bh-find { border: 1px solid var(--line, rgba(22,17,15,0.12));
  color: var(--ink, #16110F); background: #fff; }
.ow-daynav .bh-find:active { background: rgba(22,17,15,0.06); }

/* The name-and-number card, shared by the owner and therapist client screens. */
.cl-edit { background: #fff; border: 1px solid var(--line, rgba(22,17,15,0.12));
  border-radius: 10px; padding: 12px; margin-top: 12px; }

/* What's changed — the owner's running log and the technician's new list (11 Sep 2026) */
.ow-feed { margin-bottom: 22px; }
a.feed-row { color: inherit; text-decoration: none; cursor: pointer; }
.feed-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; font-weight: 500; color: var(--wine); }
.feed-tag.new { color: #2F5D3A; }
.feed-tag.cancelled, .feed-tag.noshow { color: #8A2E2E; }
.feed-go { flex: none; font-size: 18px; color: var(--wine); }
.st-new { margin: 14px 16px 2px; padding: 12px 14px 4px; background: var(--blush); border-radius: 10px; }
.st-new-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.st-new-k { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--wine); }
.st-new-sub { font-size: 12px; color: var(--body); margin-top: 3px; }
.st-new-empty { font-size: 13px; color: var(--ink); font-weight: 300; line-height: 1.5; padding: 4px 0 10px; }

/* Report columns — last day open / today / next day open, or week against week (13 Sep 2026) */
.rep-grid { margin-top: 14px; }
.rep-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rep-row:last-child { border-bottom: 0; }
.rep-k { flex: 1.5; min-width: 0; font-size: 12.5px; color: var(--body); font-weight: 300; }
.rep-v { flex: 1; min-width: 0; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink); }
.rep-v.now { color: var(--wine); font-weight: 500; }
.rep-head { align-items: flex-end; border-bottom: 1px solid rgba(22, 17, 15, 0.2); }
.rep-head .rep-c { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.rep-head .rep-s { font-size: 10.5px; color: var(--muted); font-weight: 300; margin-top: 3px; }

/* Notes — the client's own note, and the one on a single visit (13 Sep 2026) */
.note-card.client-note { background: #F4DADA; color: #8A2E2E; }
.ag-note.client { color: var(--wine); }
textarea.b-input.nt { min-height: 54px; resize: vertical; font-family: inherit; line-height: 1.45; padding-top: 10px; }

/* Staff diary: clients on the chair at the same time, side by side (Darren,
   21 Sep). Same "N at once" wrapper as the owner diary. A card in a column is
   too narrow for its usual row, so it stacks: time, then name, then the chips.
   Three or more at once: two columns and the rest wrap under. */
.ag-lanes { display: grid; gap: 6px; padding: 0 0 6px 10px; align-items: start;
  /* One column per chair, however many are genuinely in at once - capping
     at two put a third person's card in somebody else's column. */
  grid-template-columns: repeat(var(--lanes, 2), minmax(0, 1fr)); }
.ag-lanes > .ag-row { flex-direction: column; gap: 4px; padding: 10px; margin-bottom: 0; min-width: 0; grid-column: calc(var(--lane, 0) + 1) / span var(--span, 1); }
/* Timed: one grid row per five minutes, so a two-hour card is three times a
   forty-minute one and runs alongside whoever else is in for that time. */
.ag-lanes.timed { grid-template-rows: repeat(var(--rows, 1), 16px); align-items: stretch; row-gap: 0; }
.ag-lanes.timed > .ag-row { grid-row: var(--row, auto); overflow: hidden; box-sizing: border-box; margin-bottom: 4px; padding: 8px; }
/* A forty-minute card has room for the time, the name, the treatment and the
   hold - not the booking number, which the panel shows anyway. */
.ag-lanes.timed > .ag-row .ag-ref { display: none; }
.ag-lanes > .ag-row .ag-bar { display: none; }
.ag-lanes > .ag-row .ag-time { width: auto; display: flex; gap: 6px; align-items: baseline; }
.ag-lanes > .ag-row .ag-time .l { margin-top: 0; }
.ag-lanes > .ag-row .ag-title { font-size: 14px; line-height: 1.25; }
.ag-lanes > .ag-row .ag-sub { font-size: 11.5px; }
.ag-lanes > .ag-row .ag-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
.agenda .ow-together { margin-bottom: 8px; }

/* Darren, 22 Sep: "breaks should be a different shade on the diary". Free time
   stays a dashed outline; blocked time (a break, lunch, an hour out) is filled
   and striped so it reads as NOT bookable at a glance; a half day's closed
   hours are one dark block. */
.ag-row.soft.free { background: #E9E5DF; border: 1px dashed rgba(22,17,15,0.28); cursor: pointer; }
.ag-row.soft.free .ag-title { color: #5E574F; font-weight: 500; font-size: 13px; }
.ag-row.soft.free .ag-sub { color: #6E665E; }
.ag-row.soft.blocked { background: repeating-linear-gradient(135deg, #EFE8E0 0 10px, #E6DDD3 10px 20px);
  border: 1px solid #D8CCBF; }
.ag-row.soft.blocked .ag-title { color: #5E4F42; font-weight: 500; }
.ag-row.soft.shut { background: repeating-linear-gradient(135deg, #2A2320 0 12px, #231D1A 12px 24px);
  border: 1px solid #16110F; }
.ag-row.soft.shut .ag-title { color: #F2F0EB; font-weight: 600; }
.ag-row.soft.shut .ag-sub, .ag-row.soft.shut .ag-time .t, .ag-row.soft.shut .ag-time .l { color: #CFC6BD; }

/* One diary for owner and staff (Darren, 22 Sep). The Day / Week / Month
   switch sits in the dark header here, so it takes the chair chips' colours
   rather than the owner screen's light-page ones. */
.st-viewsw { display: flex; margin: 12px 0 0; background: rgba(242,240,235,0.09); }
.st-viewsw .v { flex: 1; text-align: center; color: rgba(242,240,235,0.8); }
.st-viewsw .v.on { background: var(--cream); color: var(--ink); box-shadow: none; }
.st-range { padding: 12px 16px 20px; }
/* "All": every chair in that day side by side. A column is too narrow for the
   usual row, so a card stacks the way it does in the "N at once" lanes. */
.st-all { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; padding: 10px 10px 20px; align-items: start; }
.st-allcol { background: rgba(22,17,15,0.03); border: 1px solid var(--line); border-radius: 8px; min-width: 0; overflow: hidden; }
.st-allcol .agenda { padding: 8px; }
.st-allcol .ag-row { flex-direction: column; gap: 4px; padding: 10px; min-width: 0; }
.st-allcol .ag-row .ag-bar { display: none; }
.st-allcol .ag-row .ag-time { width: auto; display: flex; gap: 6px; align-items: baseline; }
.st-allcol .ag-row .ag-time .l { margin-top: 0; }
.st-allcol .ag-row .ag-title { font-size: 14px; line-height: 1.25; }
.st-allcol .ag-row .ag-sub { font-size: 11.5px; }
.st-allcol .ag-row .ag-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
.st-allcol .ag-lanes { grid-template-columns: 1fr; padding-left: 6px; }
.st-allcol .ag-lanes > .ag-row { grid-column: auto; }
.st-allcol .ag-lanes.timed { grid-template-rows: none; }
.st-allcol .ag-lanes.timed > .ag-row { grid-row: auto; overflow: visible; }

/* == OWNER -> SETTINGS, redesigned 23 Sep 2026 ==============================
   The designer's layout, namespaced under .setpage. Everything here shares a
   page with the CLIENT app (two apps, one page), and names like .card .row
   .btn .tag .status already mean something else in styles.css -- so every rule
   below is scoped and none of them are global. Colours are the tokens that
   were already there; --paper, --r and --tap are new and local. */
.setpage { --paper: #fff; --r: 12px; --tap: 44px; --mono: 'IBM Plex Mono', monospace;
  max-width: 1120px; margin: 0 auto; padding: 24px 16px 96px; }
@media (min-width: 1000px) {
  .setpage { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; padding-top: 36px; }
}
.setpage .content { min-width: 0; max-width: 760px; }
@media (min-width: 1000px) { .setpage .content { max-width: none; } }
.setpage .index { display: none; }
@media (min-width: 1000px) {
  .setpage .index { display: block; position: sticky; top: 0; align-self: start; }
  .setpage .index p { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
  .setpage .index div { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--body); font-size: 15px; cursor: pointer; }
  .setpage .index div:hover { background: var(--paper); color: var(--ink); }
}

/* Section headings -- the main fix: real headings, not 10px grey mono. */
.setpage .sec { margin: 0 0 56px; scroll-margin-top: 16px; }
.setpage .sec-h { margin: 0 0 16px; max-width: 62ch; }
.setpage .sec-h .n { font: 500 12px/1 var(--mono); color: var(--wine); letter-spacing: .08em; }
.setpage .sec-h h2 { margin: 6px 0 6px; font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.01em; }
.setpage .sec-h p { margin: 0; color: var(--body); font-size: 15px; font-weight: 300; }
.setpage .narrow { max-width: 640px; }

.setpage .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.setpage .row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 12px 12px 16px; cursor: pointer; }
.setpage .row + .row { border-top: 1px solid var(--line); }
.setpage .row:hover { background: #FAF9F6; }
.setpage .row .t { flex: 1; min-width: 0; }
.setpage .row .t b { display: block; font-weight: 500; }
.setpage .row .t span { display: block; font: 13px/1.4 var(--mono); color: var(--body); }
.setpage .chev { color: var(--muted); font-size: 18px; }

.setpage .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap);
  padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper);
  font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.setpage .btn:hover { border-color: var(--ink); }
.setpage .btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; min-height: 48px; padding: 0 22px; }
.setpage .btn.primary:hover { background: var(--wine); border-color: var(--wine); }
.setpage .btn[disabled] { background: #D8D3CC; border-color: #D8D3CC; color: var(--body); cursor: not-allowed; }
.setpage .btn.add { border-style: dashed; border-color: rgba(122, 46, 74, .45); color: var(--wine); background: transparent; }
.setpage .btn.add:hover { background: var(--paper); }
.setpage .btn.undo { font-size: 14px; padding: 0 14px; background: transparent; }
.setpage .btn.undo:hover { border-color: var(--wine); color: var(--wine); }
.setpage .after { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.setpage .after small { color: var(--body); font-size: 13px; }

/* Days that aren't normal */
.setpage .split { display: grid; gap: 20px; }
@media (min-width: 1000px) { .setpage .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } }
.setpage .list-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; }
.setpage .list-h h3, .setpage .addday h3 { margin: 0; font-size: 18px; font-weight: 500; }
.setpage .list-h span { font: 13px var(--mono); color: var(--muted); }
.setpage .x { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "tile body" "tile act"; gap: 8px 14px; padding: 14px; }
.setpage .x + .x { border-top: 1px solid var(--line); }
@media (min-width: 560px) and (max-width: 999px) {
  .setpage .x { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "tile body act"; }
  .setpage .x .act { align-self: center; }
}
.setpage .tile { grid-area: tile; width: 56px; height: 64px; border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-family: var(--mono); line-height: 1; gap: 4px; }
.setpage .tile i { font-style: normal; font-size: 10px; letter-spacing: .1em; }
.setpage .tile b { font-size: 20px; font-weight: 500; }
.setpage .x.closed .tile { background: var(--ink); color: #fff; }
.setpage .x.half .tile { background: linear-gradient(180deg, var(--blush) 50%, var(--paper) 50%); color: var(--wine); border: 1px solid rgba(122, 46, 74, .35); }
.setpage .x.open .tile { background: var(--wine); color: #fff; }
.setpage .x .body { grid-area: body; min-width: 0; }
.setpage .tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px;
  font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.setpage .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.setpage .closed .tag { background: var(--ink); color: #fff; }
.setpage .closed .tag::before { background: #fff; }
.setpage .half .tag { background: var(--blush); color: var(--wine); }
.setpage .half .tag::before { box-shadow: inset 0 0 0 1.5px var(--wine); }
.setpage .open .tag { background: var(--wine); color: #fff; }
.setpage .open .tag::before { background: #fff; }
.setpage .x .d { display: block; margin-top: 6px; font-weight: 500; }
.setpage .x .what { display: block; color: var(--body); font-size: 14px; }
.setpage .x .note { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.setpage .people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.setpage .people span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--bg); font-size: 13px; }
.setpage .act { grid-area: act; justify-self: start; }

/* The add form -- its own panel, with a clear beginning and end. */
.setpage .addday { background: var(--blush); border-radius: var(--r); padding: 20px 16px; }
@media (min-width: 560px) { .setpage .addday { padding: 24px; } }
.setpage .addday > p { margin: 4px 0 18px; color: var(--body); font-size: 14px; }
.setpage .fld { margin: 0 0 20px; min-width: 0; }
.setpage .fld .lb { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.setpage .fld .opt { font-weight: 400; color: var(--body); }
.setpage .hint { margin: 6px 0 0; color: var(--body); font-size: 13px; }
.setpage .kinds { display: grid; gap: 8px; }
.setpage .kind { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; align-items: center; min-height: 56px;
  padding: 10px 14px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(22, 17, 15, .12); border-radius: 10px; cursor: pointer; }
.setpage .kind .dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); grid-row: span 2; }
.setpage .kind b { font-weight: 500; font-size: 15px; }
.setpage .kind small { color: var(--body); font-size: 13px; grid-column: 2; }
.setpage .kind.on { background: var(--paper); border: 2px solid var(--ink); padding: 9px 13px; }
.setpage .kind.on .dot { border: 6px solid var(--ink); }
.setpage .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 380px; }
.setpage .pair label { display: block; font-size: 13px; color: var(--body); margin-bottom: 4px; }
.setpage .in { width: 100%; height: 48px; padding: 0 12px; background: var(--paper); border: 1px solid rgba(22, 17, 15, .18);
  border-radius: 10px; font: inherit; font-size: 16px; color: var(--ink); }
.setpage .in.mono { font-family: var(--mono); font-size: 15px; }
.setpage .in.note { max-width: 380px; }
.setpage select.in { appearance: none; padding-right: 32px; }
.setpage .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.setpage .chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); min-width: 64px; padding: 0 16px;
  border-radius: 99px; background: var(--paper); border: 1px solid rgba(22, 17, 15, .18); cursor: pointer; font-size: 15px; justify-content: center; }
.setpage .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.setpage .err { display: none; margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--paper); color: var(--wine); font-size: 14px; font-weight: 500; }
.setpage .fld[data-invalid] .err { display: block; }
.setpage .fld[data-invalid] .chip { border-color: var(--wine); border-width: 2px; }
.setpage .fld[data-invalid] .lb { color: var(--wine); }
.setpage .submit { border-top: 1px solid rgba(22, 17, 15, .12); padding-top: 16px; margin-top: 4px; }
.setpage .summary { margin: 0 0 12px; font-size: 15px; }
.setpage .summary:empty { display: none; }
.setpage .submit .row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.setpage .submit small { color: var(--body); font-size: 13px; }
.setpage .card-err { margin: 0 0 16px; }

/* Instagram and the logins */
.setpage .form-card { padding: 18px 16px; }
@media (min-width: 560px) { .setpage .form-card { padding: 22px 24px; } }
.setpage .prefix { display: flex; max-width: 380px; }
.setpage .prefix span { display: flex; align-items: center; padding: 0 12px; border: 1px solid rgba(22, 17, 15, .18); border-right: 0;
  border-radius: 10px 0 0 10px; background: var(--bg); color: var(--body); font-family: var(--mono); }
.setpage .prefix .in { border-radius: 0 10px 10px 0; }
.setpage .status { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--bg); margin: 0 0 18px; max-width: 520px; }
.setpage .status::before { content: ""; flex: 0 0 10px; height: 10px; margin-top: 6px; border-radius: 50%; border: 1.5px solid var(--muted); }
.setpage .status.on { background: #DDEBDD; }
.setpage .status.on::before { background: #2F5D3A; border-color: #2F5D3A; }
.setpage .status b { display: block; font-weight: 500; }
.setpage .status span { color: var(--body); font-size: 14px; }
.setpage .login { padding: 16px; }
.setpage .login + .login { border-top: 1px solid var(--line); }
.setpage .login-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.setpage .login-top .t { flex: 1; min-width: 0; }
.setpage .login-top b { font-weight: 500; }
.setpage .role { margin-left: 8px; display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 99px;
  background: var(--bg); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.setpage .role.owner { background: var(--blush); color: var(--wine); }
.setpage .login-top span.e { display: block; font: 13px var(--mono); color: var(--body); overflow-wrap: anywhere; }
.setpage .login .lb { display: block; margin: 14px 0 8px; font-size: 14px; color: var(--body); }
.setpage .seg { display: inline-flex; padding: 3px; background: var(--bg); border-radius: 12px; gap: 3px; flex-wrap: wrap; }
.setpage .seg div { min-height: 40px; min-width: 56px; padding: 0 14px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer; font-size: 15px; }
.setpage .seg div.on { background: var(--ink); color: #fff; }

/* R347: the diary on screen is a SAVED COPY, not live. Loud on purpose, and
   above the day so it cannot be scrolled out of sight. */
.bh-offline { flex: none; background: #8A2E2E; color: #F2F0EB; padding: 10px 20px; font-size: 13px; line-height: 1.45; }
.bh-offline b { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; }
.bh-retry { display: inline-block; margin-left: 6px; padding: 3px 10px; border: 1px solid rgba(242,240,235,0.5); border-radius: 6px; cursor: pointer; white-space: nowrap; }

/* R358: a block with no seat of its own (a one-seat chair with a client in)
   is a slim strip under the cluster, not a column - there but out of the way. */
.ag-row.strip { padding: 6px 14px; margin-top: -2px; align-items: center; }
.ag-row.strip .ag-sub, .ag-row.strip .ag-time .l { display: none; }

/* R361: a block row is tappable (book in here / remove), like a free one. */
.ag-row.soft.nogap.blocked { cursor: pointer; }

/* R362: the lower half of the header scrolls with the page; only the
   Diary / Owner / Client view row stays pinned. */
.bh-head.bh-more { padding-top: 2px; }