/* appointments.css — the Appointment Book. Phone first: an app bar, four parts and a tab
   bar at the foot; sheets rise from the bottom. On a wide screen the app is a wider column,
   so the grid of the day has room for several people side by side.
   Light and dark follow the device. A booking's colour says where it stands, the same
   everywhere: booked (indigo), here (amber), done (green), no-show (red), cancelled (grey). */
:root{
  --bg:#f3f1ec; --bg2:#eae7e0; --card:#fffefb; --ink:#1b1d22; --ink2:#5d626b; --ink3:#8a8f98; --line:#e2ded5; --line2:#d3cec3;
  --ac:#3f4fb8; --ac2:#323f99; --acs:#e7e9fa; --acink:#fff;
  --bk:#3f4fb8; --bks:#e7e9fa; --hr:#a35f00; --hrs:#fcefd2; --ok:#1d7f43; --oks:#e2f3e8; --no:#c2283f; --nos:#fde5e9; --off:#8f949c; --offs:#edeae4;
  --wa:#1fa855;
  --shadow:0 1px 2px rgba(30,30,50,.06),0 8px 24px -14px rgba(30,30,60,.28);
  --r:18px; --r2:12px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Malayalam","Noto Sans Devanagari","Nirmala UI","Helvetica Neue",Arial,sans-serif;
  --tabh:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111216; --bg2:#17191e; --card:#1c1f25; --ink:#ecebe8; --ink2:#a7acb5; --ink3:#7b818b; --line:#2a2e35; --line2:#373c44;
    --ac:#9aa8ff; --ac2:#b7c1ff; --acs:#232a4d; --acink:#0d1233;
    --bk:#9aa8ff; --bks:#232a4d; --hr:#f4b740; --hrs:#3c3016; --ok:#5fd38d; --oks:#173a26; --no:#ff7a8c; --nos:#43202a; --off:#737982; --offs:#25282d;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.45; font-size:15px; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
a{ color:var(--ac); }
svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2.5px solid var(--ac); outline-offset:2px; border-radius:6px; }
.grow{ flex:1; }

/* ---------- the website around the app ---------- */
header.site{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
header.site .brand{ display:flex; align-items:center; font-weight:900; font-size:19px; letter-spacing:-.02em; color:#0e386d; text-decoration:none; font-family:Georgia,serif; }
@media (prefers-color-scheme:dark){ header.site .brand{ color:#cfe0ff; } }
header.site .brand img{ width:24px; height:24px; margin-right:8px; }
header.site .brand span{ color:#0b7d74; }
.hdr-right{ display:flex; align-items:center; gap:12px; }
header.site .back{ font-size:13px; font-weight:700; text-decoration:none; color:var(--ink2); }
.hdr-install{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:7px 12px; border-radius:99px; background:var(--ac); color:var(--acink); }
.hdr-install svg{ width:16px; height:16px; stroke-width:2.2; }
main.page{ width:100%; max-width:720px; margin:0 auto; padding:18px 12px 32px; flex:1; }
.intro{ text-align:center; padding:4px 8px 14px; }
h1.title{ font-size:26px; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
.sub{ color:var(--ink2); font-size:15px; margin-top:6px; }
footer.site{ text-align:center; color:var(--ink2); font-size:13px; padding:22px 16px 30px; }

.installcard{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:12px; box-shadow:var(--shadow); }
.installcard img{ border-radius:12px; flex:none; }
.ic-text{ flex:1; min-width:0; }
.ic-text b{ display:block; font-size:15px; }
.ic-text span{ display:block; font-size:13px; color:var(--ink2); }

/* ---------- the app ---------- */
.app{ position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); min-height:640px; display:flex; flex-direction:column; }
.appbar{ display:flex; align-items:center; gap:10px; padding:12px 12px 10px 14px; background:var(--card); border-bottom:1px solid var(--line); border-radius:24px 24px 0 0; }
.appbar img{ border-radius:9px; flex:none; }
.ab-id{ flex:1; min-width:0; }
.ab-id b{ display:block; font-size:17px; font-weight:750; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ab-id span{ display:block; font-size:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iconbtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--ink); flex:none; }
.iconbtn:hover{ background:var(--bg2); }
.iconbtn svg{ width:22px; height:22px; }
.iconbtn:disabled{ opacity:.3; cursor:default; background:none; }
#abBook{ background:var(--ac); color:var(--acink); }
#abBook:hover{ background:var(--ac2); }
.bars:empty{ display:none; }
.notice{ display:flex; align-items:center; gap:10px; margin:10px 12px 0; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r2); font-size:14px; font-weight:600; }
.notice > span{ flex:1; }
.notice.warn,.warn{ color:var(--no); background:var(--nos); border-color:transparent; font-size:13.5px; font-weight:600; padding:9px 12px; border-radius:var(--r2); margin-top:10px; }
.warn.soft{ color:var(--hr); background:var(--hrs); }
.pane{ flex:1; padding:12px 12px 20px; min-width:0; }
.pane .notice{ margin:10px 0 0; }
.notice.closed{ background:var(--offs); border-color:transparent; color:var(--ink2); }
.tapbar{ width:100%; text-align:left; color:var(--ink); }
.tapbar b{ color:var(--ac); white-space:nowrap; }
.tapbar:hover{ border-color:var(--ac); }
.tapbar.free{ background:var(--acs); border-color:transparent; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:12px; font-size:14.5px; font-weight:700; background:var(--card); border:1px solid var(--line2); color:var(--ink); white-space:nowrap; }
.btn svg{ width:18px; height:18px; stroke-width:2.3; }
.btn:hover{ border-color:var(--ink3); }
.btn.solid{ background:var(--ac); border-color:var(--ac); color:var(--acink); }
.btn.solid:hover{ background:var(--ac2); border-color:var(--ac2); }
.btn.danger{ color:var(--no); border-color:var(--no); background:transparent; }
.btn.sm{ min-height:34px; padding:0 12px; font-size:13px; border-radius:10px; }
.btn.big{ min-height:52px; font-size:16px; width:100%; }
.btn:disabled{ opacity:.45; cursor:default; }
.btnrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.btnrow .btn{ flex:1 1 auto; }
.xbtn{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--ink2); font-size:16px; flex:none; }
.xbtn:hover{ background:var(--bg2); }
.linkbtn{ color:var(--ac); font-weight:700; font-size:14px; padding:10px 4px; text-decoration:underline; text-underline-offset:3px; }

/* ---------- the day ---------- */
.dayswitch,.monthswitch{ display:flex; align-items:center; justify-content:space-between; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:5px; }
.daylabel{ position:relative; flex:1; text-align:center; cursor:pointer; padding:3px 0; border-radius:10px; }
.daylabel b{ display:block; font-size:16px; font-weight:750; }
.daylabel span{ display:block; font-size:12.5px; color:var(--ink2); }
.daylabel input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.daylabel input::-webkit-calendar-picker-indicator{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.monthswitch b{ font-size:16.5px; font-weight:750; }
.monthswitch.slim{ border:none; background:var(--bg); margin-bottom:6px; }

.daystats{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.daystats:empty{ display:none; }
.stat{ display:inline-flex; align-items:baseline; gap:5px; padding:6px 11px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-size:13px; color:var(--ink2); font-weight:600; }
.stat b{ color:var(--ink); font-size:15px; font-variant-numeric:tabular-nums; }
.stat.here b{ color:var(--hr); } .stat.done b{ color:var(--ok); } .stat.noshow b{ color:var(--no); }
.dayctl{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:8px; margin-top:10px; }
.dayctl .btn{ min-height:50px; font-size:15px; }
.viewrow{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.viewrow .chips{ flex:1; min-width:0; }
.seg.mini{ flex:none; }
.seg.mini button{ min-height:36px; padding:0 12px; font-size:13px; }

.welcome{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px 16px 12px; margin-top:10px; text-align:center; }
.welcome h2{ font-size:20px; font-weight:800; letter-spacing:-.01em; }
.welcome p{ color:var(--ink2); font-size:14px; margin:6px 0 14px; }
.kindgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.kindbtn{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px 12px; border-radius:16px; background:var(--bg); border:1.5px solid transparent; font-weight:700; font-size:13.5px; line-height:1.25; text-align:center; }
.kindbtn:hover{ border-color:var(--line2); }
.kindbtn.pick,.kindbtn[aria-checked="true"]{ border-color:var(--ac); background:var(--acs); }
.kic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--kc,#6b7280); flex:none; }
.kic svg{ width:24px; height:24px; stroke-width:1.9; }
.kic.sm{ width:36px; height:36px; border-radius:11px; }
.kic.sm svg{ width:20px; height:20px; }

/* the day as a list */
.alist{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ap{ display:grid; grid-template-columns:62px minmax(0,1fr); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; border-left:5px solid var(--bk); }
.ap.st-here{ border-left-color:var(--hr); }
.ap.st-done{ border-left-color:var(--ok); }
.ap.st-noshow{ border-left-color:var(--no); }
.ap.st-cancel{ border-left-color:var(--off); opacity:.7; }
.ap.st-cancel .ap-name{ text-decoration:line-through; }
.ap.past.st-booked{ border-left-color:var(--ink3); }
.ap-time{ display:flex; flex-direction:column; align-items:flex-start; padding:11px 0 10px 10px; text-align:left; font-variant-numeric:tabular-nums; }
.ap-time b{ font-size:15px; font-weight:800; line-height:1.2; }
.ap-time span{ font-size:12px; color:var(--ink3); font-weight:600; }
.ap-time .ampm{ font-size:11px; font-weight:700; color:var(--ink2); }
.ap-main{ min-width:0; padding:10px 12px 0 4px; text-align:left; display:block; }
.ap-main > span{ display:block; }
.ap-main > .ap-top{ display:flex; }
.ap-top{ display:flex; align-items:center; gap:7px; min-width:0; }
.ap-name{ font-size:16px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.tok{ font-size:12px; font-weight:800; padding:2px 7px; border-radius:7px; background:var(--bg); color:var(--ink2); font-variant-numeric:tabular-nums; flex:none; }
.ap-sub{ font-size:13px; color:var(--ink2); margin-top:1px; overflow-wrap:anywhere; }
.ap-note{ font-size:12.5px; color:var(--ink2); margin-top:3px; padding:4px 8px; border-radius:8px; background:var(--bg); white-space:pre-line; overflow-wrap:anywhere; }
.ap-acts{ grid-column:2; display:flex; gap:6px; padding:8px 10px 10px 4px; flex-wrap:wrap; }
.ap-acts .qa{ display:inline-flex; align-items:center; gap:5px; min-height:38px; padding:0 12px; border-radius:11px; background:var(--bg); font-size:13.5px; font-weight:750; color:var(--ink); text-decoration:none; }
.ap-acts .qa svg{ width:17px; height:17px; stroke-width:2.3; }
.ap-acts .qa:hover{ filter:brightness(.96); }
.ap-acts .qa.go{ background:var(--ac); color:var(--acink); }
.ap-acts .qa.here{ background:var(--hr); color:#fff; }
.ap-acts .qa.done{ background:var(--ok); color:#fff; }
.ap-acts .qa.wa{ background:var(--wa); color:#fff; }
.ap-acts .qa.wa.sent{ background:var(--oks); color:var(--ok); }
.ap-acts .qa.no{ color:var(--no); }
.ap-acts .qa.icon{ padding:0 10px; }
@media (prefers-color-scheme:dark){ .ap-acts .qa.here,.ap-acts .qa.done{ color:#111; } }
.pill{ font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:99px; white-space:nowrap; flex:none; }
.pill.booked{ background:var(--bks); color:var(--bk); }
.pill.here{ background:var(--hrs); color:var(--hr); }
.pill.done{ background:var(--oks); color:var(--ok); }
.pill.noshow{ background:var(--nos); color:var(--no); }
.pill.cancel{ background:var(--offs); color:var(--ink2); }
.pill.late{ background:var(--nos); color:var(--no); }
.pill.walk{ background:var(--offs); color:var(--ink2); }
.gap button{ width:100%; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-radius:14px; border:1.5px dashed var(--line2); color:var(--ink2); font-size:13.5px; font-weight:650; text-align:left; font-variant-numeric:tabular-nums; }
.gap button span{ flex:1; }
.gap button b{ color:var(--ac); }
.gap button:hover{ border-color:var(--ac); color:var(--ink); }
.sess{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); padding:6px 4px 0; }
.sess::after{ content:""; flex:1; height:1px; background:var(--line2); }
.nowline{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--no); padding:0 4px; }
.nowline::after{ content:""; flex:1; height:2px; border-radius:2px; background:var(--no); }
.empty{ color:var(--ink2); text-align:center; padding:28px 12px; font-size:14px; }
.dayfoot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }

/* the day as a grid: one column for each person who takes bookings */
.grid-wrap{ margin-top:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:auto; max-height:72vh; overscroll-behavior:contain; }
.gtable{ display:grid; position:relative; min-width:100%; }
.ghead{ position:sticky; top:0; z-index:3; background:var(--card); border-bottom:1px solid var(--line); font-size:13px; font-weight:750; padding:8px 6px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ghead.axis{ left:0; z-index:4; }
.gaxis{ position:sticky; left:0; z-index:2; background:var(--card); border-right:1px solid var(--line); }
.gaxis span{ position:absolute; right:6px; font-size:11px; font-weight:700; color:var(--ink3); transform:translateY(-50%); font-variant-numeric:tabular-nums; white-space:nowrap; }
.gaxis span.top{ transform:translateY(2px); }
.gcol{ position:relative; border-right:1px solid var(--line); cursor:copy; background-image:linear-gradient(var(--line) 1px, transparent 1px); background-size:100% var(--hourpx); }
.gcol:last-child{ border-right:none; }
.gshut{ position:absolute; left:0; right:0; background:repeating-linear-gradient(-45deg, var(--offs) 0 6px, transparent 6px 12px); pointer-events:none; }
.gblock{ position:absolute; left:3px; right:3px; border-radius:9px; padding:3px 7px; font-size:12px; line-height:1.25; overflow:hidden; text-align:left; background:var(--bks); color:var(--ink); border-left:4px solid var(--bk); cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.gblock b{ display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gblock span{ display:block; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gblock.st-here{ background:var(--hrs); border-left-color:var(--hr); }
.gblock.st-done{ background:var(--oks); border-left-color:var(--ok); }
.gblock.st-noshow{ background:var(--nos); border-left-color:var(--no); }
.gblock.st-cancel{ background:var(--offs); border-left-color:var(--off); opacity:.65; }
.gblock.clash{ outline:2px solid var(--no); outline-offset:-2px; }
.gnow{ position:absolute; left:0; right:0; height:2px; background:var(--no); z-index:1; pointer-events:none; }

/* ---------- chips ---------- */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chips.scroller{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; margin:0 -2px; }
.chips.scroller::-webkit-scrollbar{ display:none; }
.chip{ display:inline-flex; align-items:center; gap:6px; flex:none; min-height:40px; padding:0 14px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-weight:700; font-size:14px; white-space:nowrap; }
.chip small{ font-weight:600; font-size:12px; color:var(--ink2); }
.chip[aria-checked="true"],.chip[aria-pressed="true"]{ background:var(--ink); color:var(--card); border-color:var(--ink); }
.chip[aria-checked="true"] small,.chip[aria-pressed="true"] small{ color:inherit; opacity:.75; }
.sheet .chip{ background:var(--bg); border-color:transparent; }
.sheet .chip[aria-checked="true"],.sheet .chip[aria-pressed="true"]{ background:var(--ink); color:var(--card); }
.daychips{ margin-top:8px; }
.daychips .chip{ min-height:34px; font-size:13px; padding:0 12px; }

/* times to choose from */
.times{ display:flex; flex-direction:column; gap:8px; }
.tgroup b{ display:block; font-size:12px; font-weight:700; color:var(--ink3); margin-bottom:5px; }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:6px; }
.tgrid button{ min-height:40px; border-radius:10px; background:var(--bg); font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; border:1.5px solid transparent; }
.tgrid button:hover{ border-color:var(--line2); }
.tgrid button[aria-checked="true"]{ background:var(--ac); color:var(--acink); }
.tnone{ font-size:13.5px; color:var(--ink2); padding:10px 12px; background:var(--bg); border-radius:12px; }
.othertime{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.othertime label{ font-size:13px; font-weight:700; color:var(--ink2); white-space:nowrap; }
.othertime input{ max-width:150px; }
.matches{ display:flex; gap:6px; flex-wrap:wrap; }
.matches:empty{ display:none; }
.matches button{ display:flex; flex-direction:column; align-items:flex-start; padding:7px 12px; border-radius:12px; background:var(--acs); text-align:left; margin-top:8px; }
.matches button b{ font-size:13.5px; }
.matches button span{ font-size:12px; color:var(--ink2); }

/* ---------- calendar ---------- */
.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:8px; margin-top:10px; }
.cal .wh{ text-align:center; font-size:11.5px; font-weight:700; color:var(--ink3); padding:2px 0 4px; }
.cal .wh.sun{ color:var(--no); }
.cd{ position:relative; aspect-ratio:1/1.05; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--bg); font-variant-numeric:tabular-nums; min-width:0; overflow:hidden; }
.cd .n{ font-size:12.5px; font-weight:700; line-height:1; color:var(--ink2); }
.cd .c{ font-size:15px; font-weight:850; line-height:1.05; }
.cd .bar{ position:absolute; left:0; bottom:0; height:4px; background:var(--ac); border-radius:0 3px 0 0; }
.cd.lv1{ background:var(--acs); } .cd.lv2{ background:color-mix(in srgb, var(--ac) 30%, var(--card)); } .cd.lv3{ background:color-mix(in srgb, var(--ac) 50%, var(--card)); }
.cd.lv3 .c,.cd.lv3 .n{ color:var(--ink); }
.cd.shut{ background:repeating-linear-gradient(-45deg, var(--offs) 0 5px, transparent 5px 10px); color:var(--ink3); }
.cd.today{ box-shadow:0 0 0 2px var(--ink) inset; }
.cd.blank{ background:transparent; cursor:default; }
.cd.past{ opacity:.75; }
button.cd:hover{ filter:brightness(.96); }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink2); padding:10px 4px 0; }
.legend i{ display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:-1px; margin-right:5px; }
.legend .lv1{ background:var(--acs); border:1px solid var(--line2); } .legend .lv3{ background:color-mix(in srgb, var(--ac) 50%, var(--card)); } .legend .lvx{ background:repeating-linear-gradient(-45deg, var(--off) 0 2px, transparent 2px 4px); border:1px solid var(--line2); }
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-top:6px; }
.tile{ background:var(--bg); border-radius:14px; padding:10px 12px; }
.tile span{ display:block; font-size:12px; color:var(--ink2); font-weight:650; }
.tile b{ display:block; font-size:21px; font-weight:820; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tile.ok b{ color:var(--ok); } .tile.no b{ color:var(--no); }
.tiles.small .tile b{ font-size:17px; }
.bars2{ list-style:none; margin-top:12px; }
.bars2 li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:6px 0; font-size:14px; }
.bars2 li b{ font-variant-numeric:tabular-nums; }
.bars2 li i{ grid-column:1 / -1; height:6px; border-radius:6px; background:var(--bg); overflow:hidden; display:block; }
.bars2 li i::after{ content:""; display:block; height:100%; width:var(--w); background:var(--ac); border-radius:6px; }
.subhead{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); margin-top:14px; }

/* ---------- people ---------- */
.searchrow{ display:flex; gap:8px; }
.searchrow input{ flex:1; }
.pcount{ margin:10px 4px 2px; }
.rows.people li{ padding:10px 4px; }
.avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--acs); color:var(--ac); font-weight:800; font-size:15px; flex:none; }
.pnacts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.act{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px 9px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--ink); text-decoration:none; }
.act svg{ width:22px; height:22px; }
.act:hover{ border-color:var(--ink3); }
.act.wa{ background:var(--wa); border-color:var(--wa); color:#fff; }
.act.off{ opacity:.4; pointer-events:none; }
.rows.hist li{ padding:8px 0; }

/* ---------- grouped lists ---------- */
.group{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-top:12px; }
.group:first-child{ margin-top:0; }
.group-head{ display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); margin-bottom:6px; }
.group-head span:last-child{ letter-spacing:0; text-transform:none; font-weight:700; }
.rows{ list-style:none; }
.rows li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.rows li:last-child{ border-bottom:none; }
.rows.tight li{ padding:6px 0; }
.rows li .rt{ flex:1; min-width:0; }
.rows li .rt b{ display:block; font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.rows li .rt span{ display:block; font-size:12.5px; color:var(--ink2); }
.rows li > b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.rows li.tap{ cursor:pointer; border-radius:10px; }
.rows li.tap:hover{ background:var(--bg); }
.rows li.off{ opacity:.6; }
.rows li .chev{ width:18px; height:18px; color:var(--ink3); flex:none; }
.rows .none{ color:var(--ink2); font-size:14px; padding:8px 0; display:block; border:none; }
.rows li .qa{ display:inline-flex; align-items:center; gap:5px; min-height:38px; padding:0 12px; border-radius:11px; background:var(--wa); color:#fff; font-size:13.5px; font-weight:750; text-decoration:none; white-space:nowrap; }
.rows li .qa svg{ width:17px; height:17px; }
.rows li .qa.sent{ background:var(--oks); color:var(--ok); }
.rows li .qa.nophone{ background:var(--bg); color:var(--ink3); pointer-events:none; }
.rows li .xs{ font-size:12px; color:var(--ink3); white-space:nowrap; }
.note{ font-size:13.5px; color:var(--ink2); }
.note.small{ font-size:12px; margin-top:6px; }
.whatsnew{ margin-top:10px; font-size:13.5px; }
.whatsnew summary{ cursor:pointer; font-weight:700; color:var(--ac); }
.rel{ margin-top:8px; }
.rel b{ font-size:14px; } .rel span{ color:var(--ink2); margin-left:8px; font-size:12.5px; }
.rel ul{ margin:4px 0 0 18px; color:var(--ink2); }
.msgprev{ margin-top:14px; }
.msgprev p{ background:#e6f7da; color:#16210f; border-radius:12px 12px 12px 3px; padding:10px 12px; font-size:13.5px; white-space:pre-line; overflow-wrap:anywhere; }
@media (prefers-color-scheme:dark){ .msgprev p{ background:#1f3a24; color:#e3f2dc; } }

/* ---------- fields ---------- */
.field{ margin-top:12px; min-width:0; }
.field label,.flabel{ display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-bottom:5px; }
input:not([type="checkbox"]):not([type="file"]),select,textarea{ width:100%; min-height:46px; padding:10px 12px; border-radius:12px; border:1px solid var(--line2); background:var(--card); font-size:16px; }
textarea{ resize:vertical; line-height:1.4; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--ac); box-shadow:0 0 0 3px var(--acs); }
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 10px; }
.moneyin{ display:flex; align-items:center; border:1px solid var(--line2); border-radius:12px; background:var(--card); overflow:hidden; }
.moneyin:focus-within{ border-color:var(--ac); box-shadow:0 0 0 3px var(--acs); }
.moneyin .cur{ padding:0 0 0 12px; color:var(--ink2); font-weight:700; }
.moneyin input{ border:none !important; box-shadow:none !important; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line2); border-radius:12px; background:var(--card); overflow:hidden; min-height:46px; }
.stepper output{ flex:1; text-align:center; font-weight:750; font-size:15.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stepper .stp{ width:46px; height:46px; font-size:22px; color:var(--ink); flex:none; }
.stepper .stp:hover{ background:var(--bg); }
.stepper .stp:disabled{ opacity:.3; }
.stepper.narrow{ max-width:200px; }
.seg{ display:flex; gap:3px; background:var(--bg); border-radius:12px; padding:3px; }
.seg button{ flex:1; min-height:42px; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--ink2); padding:0 6px; }
.seg button[aria-checked="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.seg.wrap{ flex-wrap:wrap; }
.seg.wrap button{ flex:1 1 30%; }
#bkStatus button[data-st="here"][aria-checked="true"]{ color:var(--hr); }
#bkStatus button[data-st="done"][aria-checked="true"]{ color:var(--ok); }
#bkStatus button[data-st="noshow"][aria-checked="true"],#bkStatus button[data-st="cancel"][aria-checked="true"]{ color:var(--no); }
.wdrow{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.wdrow button{ min-height:42px; border-radius:10px; background:var(--bg); font-weight:700; font-size:13px; color:var(--ink2); }
.wdrow button[aria-pressed="true"]{ background:var(--ink); color:var(--card); }
.wdrow button:disabled{ opacity:.35; }
.switch{ display:flex; align-items:center; gap:12px; margin-top:14px; cursor:pointer; font-size:14.5px; font-weight:600; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch .sw{ position:relative; width:50px; height:30px; border-radius:99px; background:var(--line2); flex:none; transition:background .2s; }
.switch .sw::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.switch input:checked + .sw{ background:var(--ok); }
.switch input:checked + .sw::after{ transform:translateX(20px); }
.switch input:focus-visible + .sw{ outline:2.5px solid var(--ac); outline-offset:2px; }
.switch small{ display:block; font-size:12.5px; color:var(--ink2); font-weight:500; }
.checks{ display:flex; flex-wrap:wrap; gap:8px; }
.checks.col{ flex-direction:column; gap:6px; }
.checks label{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border-radius:12px; background:var(--bg); font-weight:700; font-size:14px; cursor:pointer; }
.checks label span{ flex:1; }
.checks label small{ font-weight:600; color:var(--ink2); font-size:12.5px; }
.checks input{ width:19px; height:19px; accent-color:var(--ac); flex:none; }
details.more{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
details.more summary{ cursor:pointer; font-weight:700; color:var(--ac); font-size:14px; padding:4px 0; }

/* ---------- sheets ---------- */
dialog.sheet{ position:fixed; inset:auto 0 0 0; margin:0 auto; width:100%; max-width:600px; max-height:94vh; max-height:94dvh; border:none; border-radius:22px 22px 0 0; background:var(--card); color:var(--ink); padding:0; box-shadow:0 -10px 40px rgba(0,0,0,.25); display:none; flex-direction:column; }
dialog.sheet[open]{ display:flex; animation:rise .24s cubic-bezier(.2,.8,.2,1); }
dialog.sheet::backdrop{ background:rgba(12,12,24,.45); animation:fade .2s; }
@keyframes rise{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
@keyframes fade{ from{ opacity:0; } }
.sheet-head{ display:flex; align-items:flex-start; gap:10px; padding:16px 16px 6px; position:relative; }
.sheet-head::before{ content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--line2); }
.sheet-head > div{ flex:1; min-width:0; padding-top:6px; }
.sheet-head b{ display:block; font-size:18px; font-weight:800; }
.sheet-head span{ display:block; font-size:13px; color:var(--ink2); }
.sheet-body{ padding:0 16px 14px; overflow-y:auto; overscroll-behavior:contain; }
.sheet-foot{ display:flex; gap:8px; align-items:center; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); flex-wrap:wrap; }
@media (min-width:700px){
  dialog.sheet{ inset:0; margin:auto; border-radius:22px; max-height:88vh; }
  dialog.sheet[open]{ animation:pop .2s ease-out; }
  @keyframes pop{ from{ transform:scale(.96); opacity:.5; } }
  .sheet-head::before{ display:none; }
}
.isteps{ background:var(--bg); border-radius:14px; padding:12px 14px; margin-top:10px; }
.isteps b{ font-size:14.5px; }
.isteps ol{ margin:6px 0 0 20px; font-size:14px; color:var(--ink2); }
.isteps.mine{ border:1.5px solid var(--ac); background:var(--acs); }

/* ---------- the tab bar ---------- */
.tabbar{ position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); border-top:1px solid var(--line); border-radius:0 0 24px 24px; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); }
.tabbar button{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 4px; border-radius:12px; font-size:11.5px; font-weight:700; color:var(--ink3); }
.tabbar button svg{ width:24px; height:24px; stroke-width:1.9; }
.tabbar button[aria-selected="true"]{ color:var(--ac); }
.tabbar button[aria-selected="true"] svg{ stroke-width:2.3; }

/* ---------- toast ---------- */
.toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); top:auto; right:auto; margin:0; transform:translate(-50%,12px); background:var(--ink); color:var(--card); border:none; font-size:14px; font-weight:600; padding:12px 16px; border-radius:14px; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; display:flex; gap:14px; align-items:center; max-width:calc(100vw - 32px); width:max-content; z-index:50; inset:auto auto calc(84px + env(safe-area-inset-bottom)) 50%; }
.toast.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast button{ color:#aab5ff; font-weight:800; font-size:14px; white-space:nowrap; }
@media (prefers-color-scheme:dark){ .toast button{ color:#3f4fb8; } }

/* ---------- guide and questions ---------- */
.mh-guide,.faqbox{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-top:16px; }
.mh-guide h2,.faqbox h2{ font-size:19px; font-weight:800; margin:18px 0 6px; letter-spacing:-.01em; }
.mh-guide h2:first-child,.faqbox h2:first-child{ margin-top:0; }
.mh-guide p,.mh-guide li{ font-size:15px; color:var(--ink); }
.mh-guide p{ margin:8px 0; }
.mh-guide ul,.mh-guide ol{ margin:8px 0 8px 22px; }
.mh-guide li{ margin:4px 0; }
.mh-guide code{ background:var(--bg); padding:1px 5px; border-radius:5px; font-size:.92em; }
.mh-guide .mh-scroll{ overflow-x:auto; margin:10px 0; }
.mh-guide table{ border-collapse:collapse; width:100%; font-size:14px; }
.mh-guide th,.mh-guide td{ border:1px solid var(--line2); padding:7px 9px; text-align:left; vertical-align:top; }
.mh-guide th{ background:var(--bg); }
.mh-guide td.r,.mh-guide th.r{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
details.faq{ border-top:1px solid var(--line); padding:11px 0; }
details.faq summary{ cursor:pointer; font-weight:700; font-size:15px; }
details.faq p{ color:var(--ink2); font-size:14.5px; margin-top:6px; }
.pages{ margin-top:14px; font-size:14px; color:var(--ink2); }
.pages a{ font-weight:700; margin-right:10px; }

/* ---------- as an installed app ---------- */
body.is-app header.site, body.is-app .intro, body.is-app .installcard, body.is-app .mh-guide, body.is-app .faqbox, body.is-app .mh-related, body.is-app footer.site{ display:none; }
html.pre-app header.site, html.pre-app .intro, html.pre-app .installcard, html.pre-app footer.site{ display:none; }
body.is-app.show-guide .mh-guide, body.is-app.show-guide .faqbox{ display:block; }
body.is-app{ background:var(--bg2); }
body.is-app main.page{ max-width:760px; padding:0; }
body.is-app .app{ border:none; border-radius:0; box-shadow:none; min-height:100vh; min-height:100dvh; }
body.is-app .appbar{ position:sticky; top:0; z-index:5; border-radius:0; padding-top:calc(12px + env(safe-area-inset-top)); background:color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); }
body.is-app .tabbar{ position:fixed; left:0; right:0; bottom:0; max-width:760px; margin:0 auto; border-radius:0; }
body.is-app .pane{ padding-bottom:calc(var(--tabh) + 28px + env(safe-area-inset-bottom)); }
body.is-app .grid-wrap{ max-height:calc(100dvh - 300px); }
body.is-app.show-guide .mh-guide{ margin:12px; }
body.is-app.show-guide .faqbox{ margin:12px 12px calc(var(--tabh) + 30px); }
@media (min-width:800px){
  body.is-app{ background:var(--bg); }
  body.is-app .app{ border-left:1px solid var(--line); border-right:1px solid var(--line); }
}
@media (max-width:420px){
  main.page{ padding:12px 8px 24px; }
  .app{ border-radius:20px; }
  .appbar{ border-radius:20px 20px 0 0; }
  .tabbar{ border-radius:0 0 20px 20px; }
  .pane{ padding:10px 8px 16px; }
  .cal{ gap:3px; padding:6px; }
  .cd{ border-radius:9px; }
  .cd .c{ font-size:13.5px; }
  .ap{ grid-template-columns:56px minmax(0,1fr); }
  .ap-acts .qa{ padding:0 10px; }
  .dayctl .btn{ padding:0 8px; font-size:14px; }
  h1.title{ font-size:23px; }
  .kindbtn{ font-size:12.5px; padding:12px 4px 10px; }
}

/* ---------- print: only the day's list ---------- */
#printArea{ display:none; }
@media print{
  @page{ margin:12mm; }
  body > *:not(#printArea){ display:none !important; }
  body{ background:#fff; color:#000; display:block; }
  #printArea{ display:block !important; font-family:var(--font); color:#000; }
  #printArea h2{ font-size:16pt; margin:0; }
  #printArea p{ font-size:10pt; margin:2px 0 10px; color:#333; }
  #printArea table{ width:100%; border-collapse:collapse; font-size:10pt; }
  #printArea th,#printArea td{ border:1px solid #777; padding:5px 6px; text-align:left; vertical-align:top; }
  #printArea th{ background:#eee; }
  #printArea td.n{ white-space:nowrap; font-variant-numeric:tabular-nums; }
  #printArea tr.x td{ color:#777; text-decoration:line-through; }
  #printArea .foot{ margin-top:8px; font-size:8pt; color:#555; text-align:center; }
}