/* B · Next wash
   Point of view: for the neighbour who does not want an app. One sentence says where you
   stand, one big button is the next thing to do, and the colour of the screen tells you the
   state before you have read a word. Friendly, large, soft, made to be read without glasses.
   Structural answer: your own booking is the home screen. The soonest free times are three big
   buttons under it; the full timetable stays closed until you ask for it, and then it is a
   list of free times, not a grid.
   Fonts: Bricolage Grotesque (the sentence), Atkinson Hyperlegible Next (everything else). */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,500..800&display=swap');

.device {
  --bg: #ffffff; --surface: #f3f1ec; --line: #dedad0; --ink: #15130f; --dim: #5d5a52;
  --accent: #15130f; --on-accent: #ffffff; --ok: #2a9d5f; --warn: #ff8a70;
  --cloud: #eaeef4; --mint: #bdf0d3; --sun: #ffd43b; --sky: #b5dcff; --lilac: #dccfff;
  --display: 'Bricolage Grotesque', sans-serif; --body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
  --radius: 28px; --spring: cubic-bezier(.3, 1.45, .5, 1);
  background: var(--bg); color: var(--ink); font: 17px/1.45 var(--body);
}
.device :focus-visible { outline: 3px solid #2f6bff; outline-offset: 3px; }
.device button { transition: transform .18s var(--spring), background-color .15s; }
.device button:active:not(:disabled) { transform: scale(.97); }

.top { display: flex; align-items: center; gap: 16px; padding: 16px 28px 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 22px; height: 22px; border-radius: 50%; border: 6px solid var(--ink); }
.brand-name { font: 700 21px/1 var(--display); letter-spacing: -.02em; }
.brand-place { color: var(--dim); font-size: 15px; }
.tabs { display: flex; gap: 2px; margin-left: auto; padding: 4px; background: var(--surface); border-radius: 999px; }
.tabs button { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: 15.5px; }
.tabs button.on { background: var(--ink); color: #fff; }
.tabs small { font-weight: 400; font-size: 13px; opacity: .7; }
.who { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.clock { color: var(--dim); }
.sig { display: none; }
.flat { padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; }
.net { margin: 0 28px 10px; padding: 14px 20px; border-radius: 22px; background: var(--ink); color: #fff; font-size: 16px; }
.net strong { color: var(--sun); }
.net-q { display: inline-block; margin-left: 4px; padding: 1px 10px; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 700; font-size: 14.5px; }

/* home: the sentence on the left, everything else on request on the right */
.home { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: auto auto auto auto 1fr; gap: 20px 28px; padding: 6px 28px 28px; align-content: start; }
.me { grid-area: 1 / 1 / 6 / 2; position: sticky; top: 6px; align-self: start; min-height: 630px; display: flex; flex-direction: column; align-items: flex-start; padding: 36px 36px 32px; border-radius: 40px; background: var(--cloud); transition: background-color .45s; overflow: hidden; }
.picks { grid-area: 1 / 2; }
.room { grid-area: 2 / 2; }
.sheet { grid-area: 3 / 2; }
.rules { grid-area: 4 / 2; }
.me[data-me=booked] { background: var(--mint); }
.me[data-me=turn], .me[data-me=offer] { background: var(--sun); }
.me[data-me=running] { background: var(--sky); }
.me[data-me=over] { background: var(--warn); }
.me[data-me=nudged] { background: var(--lilac); }
.me > * { animation: b-rise .5s var(--spring) both; }
.me > :nth-child(2) { animation-delay: .04s; }
.me > :nth-child(3) { animation-delay: .08s; }
.me > :nth-child(n + 4) { animation-delay: .12s; }
@keyframes b-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.me-kicker { padding: 6px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15.5px; }
.me-title { margin-top: 22px; font: 800 62px/.98 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.me-clock { margin-top: 18px; font: 700 26px/1.1 var(--display); letter-spacing: -.01em; }
.me-slot, .dlg-slot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.me-slot span, .dlg-slot span { padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .75); font-weight: 700; font-size: 16.5px; }
.me-detail { margin-top: 18px; max-width: 34ch; font-size: 19px; line-height: 1.4; }
.me-note { margin-top: 12px; padding: 10px 16px; border-radius: 18px; background: var(--ink); color: #fff; font-size: 16px; }
.me-also { margin-top: 12px; font-size: 16px; font-weight: 600; }
.me-actions { display: flex; flex-direction: column; align-self: stretch; gap: 10px; margin-top: auto; padding-top: 28px; }
.device .primary { min-height: 70px; padding: 12px 28px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 23px/1.15 var(--display); letter-spacing: -.01em; }
.device .primary:hover { background: #33302a; }
.device .quiet { min-height: 56px; padding: 10px 24px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; font: 700 18px/1.2 var(--body); }
.device .quiet:hover:not(:disabled) { background: rgba(21, 19, 15, .08); }
.device .quiet:disabled { border-color: var(--line); color: var(--dim); cursor: default; }

.picks-title, .room-title, .rules h2 { font: 700 21px/1.2 var(--display); letter-spacing: -.01em; }
.pick-list { display: grid; gap: 8px; margin: 12px 0; }
.pick { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; min-height: 72px; padding: 12px 22px; text-align: left; border: 0; border-radius: 24px; background: var(--surface); }
.pick:hover { background: var(--sun); }
.pick::after { content: '→'; grid-area: 1 / 2 / 3 / 3; font: 600 24px var(--display); }
.p-when { font: 700 21px/1.2 var(--display); letter-spacing: -.01em; }
.p-m { grid-column: 1; font-size: 16px; color: var(--dim); }
.p-note { display: none; }
.times { width: 100%; }
.picks[data-empty=true] .times { margin-top: 0; }

.room { padding: 20px 22px 8px; border: 2px solid var(--line); border-radius: var(--radius); }
.room-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.room-clock { color: var(--dim); font-size: 16px; }
.machine { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: 0 12px; width: 100%; min-height: 48px; padding: 6px 0; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; border-radius: 0; cursor: default; }
.machine::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #b9b5aa; }
.machine[data-st=free]::before { background: var(--ok); }
.machine[data-st=waiting]::before { background: var(--sun); box-shadow: inset 0 0 0 2px var(--ink); }
.machine[data-st=over]::before { background: #e8452a; }
.m-drum, .m-short, .m-sub, .m-next { display: none; }
.m-name { font-weight: 700; }
.m-state { color: var(--dim); text-align: right; font-size: 16px; }
.machine[data-st=free] .m-state { color: #1c7a47; font-weight: 600; }
.machine[data-st=over] .m-state { color: #b3260f; font-weight: 600; }

.device[data-sheet-open=false] .sheet { display: none; }
.sheet { animation: b-rise .45s var(--spring) both; }
.sheet-title { font: 700 21px/1.2 var(--display); letter-spacing: -.01em; }
.st-machine { display: none; }
.st-day::before { content: 'All free times · '; }
.days { display: flex; gap: 6px; margin: 12px 0; overflow-x: auto; scrollbar-width: none; }
.day { flex: 0 0 auto; min-width: 86px; padding: 10px 14px; text-align: left; border: 0; border-radius: 18px; background: var(--surface); }
.day.on { background: var(--ink); color: #fff; }
.d-name { display: block; font-weight: 700; font-size: 16px; }
.d-date { display: none; }
.d-free { font-size: 14px; opacity: .75; }
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 16px; border-radius: 24px; background: var(--surface); }
.row.past { display: none; }
.r-time { order: -2; display: flex; align-items: baseline; gap: 4px; }
.r-time b { font: 700 23px/1.1 var(--display); letter-spacing: -.01em; }
.r-time span { color: var(--dim); font-size: 16px; }
.row.now .r-time::after { content: 'now'; margin-left: 6px; padding: 1px 10px; border-radius: 999px; background: var(--sun); font-weight: 700; font-size: 14px; }
.r-free { order: -1; justify-self: end; align-self: center; color: var(--dim); font-size: 15px; }
.row[data-free='0'] { padding-bottom: 14px; }
.row[data-free='0'] .r-free { padding: 2px 12px; border-radius: 999px; background: var(--line); color: var(--ink); font-weight: 600; }
.cell { display: none; min-height: 56px; padding: 8px 14px; text-align: left; border: 2px solid var(--ink); border-radius: 18px; background: #fff; }
.cell.free, .cell.mine, .cell.pending { display: block; }
.cell.mine.was { display: none; }
.c-short, .c-st { display: none; }
.c-m { display: block; font-weight: 700; font-size: 17px; }
.c-who { display: block; font-size: 14.5px; color: var(--dim); }
.cell.free:hover { background: var(--sun); }
.cell.released .c-st { display: block; font-size: 13.5px; color: #b3260f; }
.cell.mine { background: var(--mint); }
.cell.mine .c-who { color: var(--ink); font-weight: 600; }
.cell.mine .c-who::after { content: ' · tap to change'; font-weight: 400; }
.cell.pending { border-style: dashed; background: transparent; animation: b-wait 1s ease-in-out infinite alternate; }
.cell.flash { animation: b-pop .6s var(--spring); }
@keyframes b-wait { to { opacity: .5; } }
@keyframes b-pop { from { transform: scale(.8); } }
.rules { padding: 20px 22px; border-radius: var(--radius); background: var(--surface); }
.rules ol { padding-left: 22px; margin-top: 8px; font-size: 16px; color: var(--dim); }
.rules li + li { margin-top: 6px; }

/* dialog: a sheet that comes up from below */
.scrim { background: rgba(21, 19, 15, .5); }
.dialog { left: 50%; top: 50%; width: min(500px, calc(100% - 32px)); padding: 34px 32px 28px; transform: translate(-50%, -50%); border-radius: 36px; background: #fff; animation: b-up .4s var(--spring) both; }
@keyframes b-up { from { opacity: 0; translate: 0 30px; } }
.dlg-title { font: 800 36px/1.02 var(--display); letter-spacing: -.03em; }
.dlg-slot span { background: var(--surface); }
.dlg-body { margin-top: 16px; font-size: 18.5px; line-height: 1.4; }
.dlg-sub { margin-top: 18px; font-weight: 700; }
.dlg-alts { display: grid; gap: 8px; margin-top: 10px; }
.alt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; min-height: 68px; padding: 10px 22px; text-align: left; border: 0; border-radius: 22px; background: var(--surface); }
.alt::after { content: '→'; grid-area: 1 / 2 / 3 / 3; font: 600 24px var(--display); }
.alt:hover { background: var(--sun); }
.alt .p-m { font: 700 20px/1.2 var(--display); }
.alt .p-when { color: var(--dim); font-size: 16px; }
.dlg-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.dialog[data-kind=clash] .dlg-slot span { background: var(--warn); text-decoration: line-through; }
.dialog[data-kind=sending] .dlg-slot span { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); animation: b-wait .9s ease-in-out infinite alternate; }
.dialog[data-kind=offline] .dlg-slot { display: none; }
.toast { padding: 14px 24px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 16.5px; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .4); }
.toast.warn { background: var(--warn); color: var(--ink); }

/* board: the verdict first, then the evidence */
.board { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto auto auto 1fr; gap: 20px 28px; padding: 6px 28px 32px; align-content: start; }
.b-head { grid-area: 1 / 1 / 2 / 3; }
.b-head h1 { font: 800 44px/1 var(--display); letter-spacing: -.035em; }
.b-head p { margin-top: 6px; color: var(--dim); }
.b-stats { grid-area: 2 / 1 / 3 / 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { display: flex; flex-direction: column; padding: 18px 20px; border-radius: 26px; background: var(--cloud); }
.stat[data-i='1'] { background: var(--mint); }
.stat[data-i='2'] { background: var(--sun); }
.stat[data-i='3'] { background: var(--warn); }
.stat b { font: 800 50px/1 var(--display); letter-spacing: -.03em; }
.stat span { margin-top: 6px; font-weight: 700; }
.stat small { font-size: 14.5px; opacity: .75; }
.b-cases { grid-area: 3 / 1; }
.b-machines { grid-area: 4 / 1; }
.b-flats { grid-area: 5 / 1; }
.b-log { grid-area: 6 / 1; align-self: start; }
.b-case { grid-area: 3 / 2 / 7 / 3; align-self: start; display: flex; flex-direction: column; padding: 28px 28px 24px; border: 2px solid var(--ink); border-radius: 36px; }
.board h2 { font: 700 21px/1.2 var(--display); letter-spacing: -.01em; margin-bottom: 10px; }
.case { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; margin-bottom: 8px; padding: 14px 20px; text-align: left; border: 2px solid transparent; border-radius: 24px; background: var(--surface); }
.case.on { border-color: var(--ink); background: #fff; }
.case-title { font-weight: 700; }
.case-meta { grid-column: 1; font-size: 15px; color: var(--dim); }
.case-status { grid-area: 1 / 2 / 3 / 3; align-self: center; padding: 4px 14px; border-radius: 999px; background: var(--sun); font-weight: 700; font-size: 14.5px; }
.case-status[data-s=settled] { background: var(--mint); }
.b-case h2 { order: 1; margin: 0; font: 800 34px/1.02 var(--display); letter-spacing: -.03em; }
.case-when { order: 2; margin-top: 8px; color: var(--dim); }
.finding { order: 3; margin-top: 18px; padding: 18px 22px; border-radius: 24px; background: var(--sun); font-size: 19px; line-height: 1.35; }
.finding strong { display: block; font-size: 15px; }
.case-done { order: 4; margin-top: 12px; font-weight: 700; color: #1c7a47; }
.case-actions { order: 5; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.case-actions .primary { min-height: 60px; font-size: 20px; }
.tl { order: 6; list-style: none; padding: 0; margin-top: 22px; }
.tl li { position: relative; padding: 0 0 16px 28px; font-size: 16.5px; }
.tl li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.tl li::after { content: ''; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl time { display: block; font-weight: 700; font-size: 15px; }
.bar-row { display: grid; grid-template-columns: 86px 1fr 92px; gap: 12px; align-items: center; padding: 7px 0; font-size: 16px; }
.bar-name { font-weight: 700; }
.bar { height: 20px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 999px; background: var(--ink); }
.bar-val { color: var(--dim); font-size: 15px; text-align: right; }
.b-insight { margin-top: 8px; color: var(--dim); font-size: 16px; }
.board table { width: 100%; border-collapse: collapse; font-size: 16px; }
.board th { padding: 8px 6px; text-align: left; font-size: 14px; color: var(--dim); font-weight: 600; }
.board td { padding: 10px 6px; border-top: 1px solid var(--line); }
.board td.hot { font-weight: 700; }
.board td.hot::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%; background: #e8452a; }
.b-log .tl { margin-top: 4px; }

/* Phone: the sentence fills the screen; everything else is below it. */
.vp-phone .top { padding: 10px 16px 8px; gap: 8px; }
.vp-phone .brand-place, .vp-phone .clock, .vp-phone .flat, .vp-phone .tabs small { display: none; }
.vp-phone .brand-mark { width: 18px; height: 18px; border-width: 5px; }
.vp-phone .brand-name { font-size: 19px; }
.vp-phone .tabs button { padding: 8px 14px; }
.vp-phone .net { margin: 0 12px 8px; padding: 12px 16px; font-size: 15px; }
.vp-phone .home { display: flex; flex-direction: column; gap: 18px; padding: 4px 12px 24px; }
.vp-phone .me { position: static; flex: none; min-height: 470px; padding: 24px 22px 20px; border-radius: 34px; }
.vp-phone .me-title { margin-top: 18px; font-size: 42px; }
.vp-phone .me-clock { margin-top: 12px; font-size: 22px; }
.vp-phone .me-slot { margin-top: 14px; }
.vp-phone .me-slot span { padding: 5px 12px; font-size: 15px; }
.vp-phone .me-detail { margin-top: 14px; font-size: 17.5px; }
.vp-phone .me-actions { padding-top: 20px; }
.vp-phone .device .primary, .device.vp-phone .primary { min-height: 66px; font-size: 21px; padding: 10px 20px; }
.vp-phone .picks, .vp-phone .room, .vp-phone .sheet, .vp-phone .rules { flex: none; }
.vp-phone .m-state { font-size: 15px; }
.vp-phone .row { grid-template-columns: 1fr 1fr; }
.vp-phone .dialog { left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: none; padding: 28px 20px 22px; border-radius: 34px 34px 0 0; }
.vp-phone .dlg-title { font-size: 32px; }
.vp-phone .board { display: flex; flex-direction: column; padding: 4px 12px 28px; }
.vp-phone .board > * { flex: none; }
.vp-phone .b-head h1 { font-size: 36px; }
.vp-phone .b-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.vp-phone .stat { padding: 14px 16px; border-radius: 22px; }
.vp-phone .stat b { font-size: 40px; }
.vp-phone .b-cases { order: 1; }
.vp-phone .b-case { order: 2; padding: 22px 20px; border-radius: 30px; }
.vp-phone .b-case h2 { font-size: 28px; }
.vp-phone .b-machines { order: 3; }
.vp-phone .b-flats { order: 4; }
.vp-phone .b-log { order: 5; }
.vp-phone .board th:nth-child(2), .vp-phone .board td:nth-child(2) { display: none; }