/* Belgravia Book design system: midnight navy, ivory and champagne gold.
   Customer pages use the business's own brand color (--brand) for buttons and highlights. */
:root {
  --brand: #0e1b2c; --brand-ink: #fff;
  --night: #0a1120; --night-2: #111a2e; --night-3: #18233b;
  --bg: #f6f2ea; --card: #fffdf8; --ink: #1b2233; --muted: #6b7180; --line: #e7decd; --line-2: #efe8da;
  --gold: #c8a464; --gold-hi: #f1dcaa; --gold-lo: #9a7536;
  --gold-grad: linear-gradient(120deg, #9a7536 0%, #d9b877 30%, #f4e2b4 50%, #d2ae6a 72%, #94702f 100%);
  --soft: #f3ede1; --danger: #a8321f; --warn: #8a5a12; --ok: #1f6f5c;
  --radius: 4px; --shadow: 0 1px 2px rgba(10,17,32,.04), 0 12px 32px -18px rgba(10,17,32,.22);
  --serif: "Cormorant Garamond", "Didot", Georgia, serif; --sans: Jost, "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--sans); color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; background: var(--bg); -webkit-font-smoothing: antialiased; font-weight: 400; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 .55rem; color: var(--night); letter-spacing: -.005em; }
h1 { font-size: 2.2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; }
p { margin: .25rem 0 .75rem; }
.muted { color: var(--muted); } .small { font-size: .86rem; }
a { color: var(--gold-lo); }
.eyebrow { text-transform: uppercase; letter-spacing: .26em; font-size: .68rem; font-weight: 500; color: var(--gold-lo); }

button, .btn { font: 500 .9rem var(--sans); letter-spacing: .02em; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: .62rem 1.05rem; border-radius: var(--radius); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
button:hover, .btn:hover { border-color: var(--gold); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 500; letter-spacing: .06em; }
.primary:hover { border-color: var(--brand); box-shadow: 0 10px 24px -12px var(--brand); transform: translateY(-1px); }
.gold { background: var(--gold-grad); background-size: 200% 100%; color: #1a1408; border: 0; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.gold:hover { background-position: 100% 0; }
.danger { color: var(--danger); border-color: #ecc9c1; }
.big { width: 100%; padding: 1rem 1.2rem; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }
input, select, textarea { font: inherit; width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,164,100,.18); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: .9rem 0 .35rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid2 > * { min-width: 0; }
.error { color: var(--danger); font-weight: 500; min-height: 1.2em; }
.hidden { display: none !important; }
.pill { display: inline-block; padding: .14rem .6rem; border-radius: 99px; font-size: .7rem; font-weight: 500; letter-spacing: .06em; background: var(--line-2); color: var(--muted); vertical-align: middle; }
.pill.ok { background: #e3f1ea; color: var(--ok); } .pill.warn { background: #f8ecd2; color: var(--warn); }
.pill.bad { background: #f7e1dc; color: var(--danger); } .pill.info { background: var(--soft); color: var(--gold-lo); }
.crest { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: .03em; text-decoration: none; color: inherit; }
.crest i { font-weight: 500; color: var(--gold); }
.crest svg { width: 30px; height: 30px; }

/* ---------- customer booking page ---------- */
.book-top { background: var(--night); color: #d4d9e3; padding: 2.4rem 16px 4.6rem; text-align: center; position: relative; overflow: hidden; }
.book-top::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(40% 40% at 70% 30%, rgba(200,164,100,.2), transparent 70%); }
.book-top > * { position: relative; }
.book-top h1 { color: #f8f4ec; font-size: clamp(2rem, 4.5vw, 3rem); margin: .4rem 0; }
.book-top p { color: #aab3c5; margin: 0; }
.book-wrap { max-width: 1100px; margin: -3rem auto 0; padding: 0 16px 6rem; display: grid; grid-template-columns: 1fr 340px; gap: 1.4rem; align-items: start; position: relative; }
.book-wrap > * { min-width: 0; }
.book-head { grid-column: 1 / -1; }
.step-num { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-lo); font-family: var(--serif); font-style: italic; font-size: 1.05rem; margin-right: .55rem; vertical-align: middle; }
.stepper { display: flex; align-items: center; gap: .6rem; }
.stepper button { width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; font-size: 1.25rem; font-weight: 300; }
.stepper output { min-width: 2.6rem; text-align: center; font-family: var(--serif); font-weight: 600; font-size: 1.6rem; color: var(--night); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
.choice { text-align: left; padding: .85rem .95rem; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: .1rem; }
.choice .sub { display: block; font-size: .78rem; color: var(--gold-lo); letter-spacing: .04em; }
.choice[aria-pressed="true"] { border-color: var(--brand); background: var(--soft); box-shadow: inset 0 0 0 1px var(--brand); }
.days { display: flex; gap: .45rem; overflow-x: auto; padding: .2rem .1rem .5rem; scrollbar-width: thin; }
.day { flex: 0 0 auto; width: 4.5rem; text-align: center; padding: .55rem 0; flex-direction: column; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.day b { display: block; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; color: var(--night); letter-spacing: 0; line-height: 1.1; }
.day[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: rgba(255,255,255,.75); }
.day[aria-pressed="true"] b { color: #fff; }
.day:disabled { opacity: .3; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .45rem; margin-top: .9rem; }
.times button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.summary { position: sticky; top: 1.2rem; }
.summary h2 { font-size: 1.45rem; }
.summary .line { display: flex; justify-content: space-between; gap: .5rem; font-size: .92rem; margin: .35rem 0; color: var(--ink); }
.summary .total { font-family: var(--serif); font-size: 2rem; font-weight: 600; border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .8rem; color: var(--night); align-items: baseline; }
.summary .total span:first-child { font-family: var(--sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
#card-element { padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.mobile-bar { display: none; }
.done { max-width: 580px; margin: 2.5rem auto; padding: 0 16px; }
.check { width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-lo); display: grid; place-items: center; font-size: 1.7rem; margin-bottom: 1rem; }
.powered { text-align: center; color: var(--muted); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; margin: 1rem 0 5rem; }
.powered a { color: var(--gold-lo); text-decoration: none; }

@media (max-width: 860px) {
  .book-wrap { grid-template-columns: 1fr; }
  .summary { position: static; }
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line);
    padding: .75rem 16px; justify-content: space-between; align-items: center; z-index: 5; box-shadow: 0 -10px 30px -20px rgba(10,17,32,.4); }
  .mobile-bar b { font-family: var(--serif); font-size: 1.5rem; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ---------- dashboard ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--night); color: #a9b1c2; padding: 1.4rem .9rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand { color: #f8f4ec; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.2; padding: .2rem .7rem 1.2rem; border-bottom: 1px solid rgba(214,186,132,.18); margin-bottom: 1rem; }
.side .brand small { display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-top: .3rem; }
.side .navgroup { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: #6f7a90; padding: 1rem .75rem .4rem; }
.side button { display: flex; width: 100%; justify-content: flex-start; background: none; border: 0; border-left: 2px solid transparent; color: inherit; padding: .62rem .75rem; border-radius: 0; margin-bottom: 1px; font-weight: 400; letter-spacing: .03em; }
.side .foot button { text-align: left; white-space: nowrap; }
.side button[aria-current="page"] { color: #f8f4ec; border-left-color: var(--gold); background: linear-gradient(90deg, rgba(200,164,100,.14), transparent); }
.side button:hover { color: #f8f4ec; }
.side .foot { margin-top: auto; padding: 1rem .75rem 0; border-top: 1px solid rgba(214,186,132,.18); font-size: .8rem; }
.side select { background: var(--night-2); color: #f8f4ec; border-color: rgba(214,186,132,.25); font-size: .85rem; padding: .45rem .55rem; margin-bottom: .7rem; }
.main { padding: 2rem 2.4rem 4rem; min-width: 0; max-width: 1280px; }
.main > h1, .pagehead h1 { font-size: 2.3rem; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; text-align: left; flex-direction: column; align-items: flex-start; box-shadow: var(--shadow); }
.stat span { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.stat b { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--night); line-height: 1.15; margin-top: .2rem; }
.stat.alert { border-color: #e6c98d; background: #fbf4e4; }
.notice { background: #fbf4e4; border: 1px solid #ead2a0; border-left: 3px solid var(--gold); padding: .8rem 1rem; margin-bottom: .7rem; font-size: .92rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
tbody tr:hover td { background: #fbf8f1; }
.table-wrap { overflow-x: auto; }
.daygroup h3 { margin: 1.6rem 0 .6rem; font-size: 1.35rem; }
.job { display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--gold)); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .55rem; box-shadow: var(--shadow); }
.job .time { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--night); }
.job .actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.job .actions button { padding: .45rem .8rem; font-size: .85rem; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar input, .toolbar select { width: auto; }
dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; width: min(600px, calc(100vw - 32px)); box-shadow: 0 40px 100px -30px rgba(10,17,32,.55); background: var(--card); }
dialog::backdrop { background: rgba(10,17,32,.55); backdrop-filter: blur(3px); }
/* toasts open in the browser's top layer, so they show above pop-up windows (whose backdrop blurs the page) */
.toast[popover] { inset: auto 1.2rem 1.2rem auto; margin: 0; border: 0; border-left: 3px solid var(--gold); overflow: visible; }
.toast { position: fixed; bottom: 1.2rem; right: 1.2rem; background: var(--night); color: #f8f4ec; padding: .85rem 1.15rem; border-radius: var(--radius); border-left: 3px solid var(--gold); z-index: 50; max-width: 380px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.weekdays { display: flex; gap: .35rem; flex-wrap: wrap; }
.weekdays label { display: flex; align-items: center; gap: .3rem; font-weight: 400; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .6rem; text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--ink); background: #fff; }
.weekdays input { width: auto; }
pre.code { background: var(--night); color: #e4e7ec; padding: .9rem; border-radius: var(--radius); overflow-x: auto; font-size: .8rem; white-space: pre-wrap; word-break: break-all; border-left: 3px solid var(--gold); }
.check-row { display: flex; gap: .55rem; align-items: center; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); margin: .5rem 0; }
.check-row input { width: auto; }

/* ---------- account pages (login, sign up, invites) ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth .art { background: var(--night); color: #c9cfdb; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth .art::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(40% 35% at 70% 30%, rgba(200,164,100,.22), transparent 70%), radial-gradient(35% 40% at 15% 85%, rgba(31,111,92,.25), transparent 70%); }
.auth .art > * { position: relative; }
.auth .art .crest { color: #f8f4ec; }
.auth .art blockquote { font-family: var(--serif); font-style: italic; font-size: 2rem; line-height: 1.25; color: #f8f4ec; margin: 0; max-width: 30rem; }
.auth .art blockquote em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth .panel { display: grid; place-items: center; padding: 2rem 16px; }
.auth form { width: 100%; max-width: 420px; }
.auth h1 { font-size: 2.6rem; }
.auth .alt { margin-top: 1.4rem; font-size: .92rem; color: var(--muted); }
.login-wrap { max-width: 420px; margin: 4rem auto; padding: 0 16px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { flex-direction: row; overflow-x: auto; gap: .2rem; padding: .5rem; height: auto; position: sticky; top: 0; z-index: 10; align-items: center; }
  .side .brand, .side .navgroup, .side .foot small { display: none; }
  .side button { width: auto; white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .side button[aria-current="page"] { border-bottom-color: var(--gold); }
  .side .foot { margin: 0; padding: 0; border: 0; display: flex; gap: .2rem; align-items: center; }
  .side select { width: auto; margin: 0; }
  .main { padding: 1.2rem 16px 3rem; }
  .job { grid-template-columns: 1fr; }
  .job .actions { justify-content: flex-start; }
  .auth { grid-template-columns: 1fr; }
  .auth .art { padding: 1.6rem 16px; }
  .auth .art blockquote { display: none; }
}
.book-top.hidden + .book-wrap { margin-top: 1rem; }
.linkish { background: none; border: 0; padding: 0; color: var(--brand, #0f766e); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9em; }

/* ---- section tabs, Home, Insights ---- */
.subnav { display: flex; gap: .3rem; flex-wrap: wrap; margin: -.4rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.subnav:empty { display: none; }
.subnav button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .55rem .9rem; color: var(--muted, #5b6475); font-weight: 500; }
.subnav button[aria-selected="true"] { color: var(--night); border-bottom-color: var(--gold); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }
.todo { list-style: none; padding: 0; margin: .6rem 0 0; }
.todo li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.todo li:last-child { border-bottom: 0; }
.todo .tick { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: .8rem; }
.todo li.is-done .tick { background: #2f8f5b; border-color: #2f8f5b; color: #fff; }
.todo li.is-done .t { color: #8a92a3; text-decoration: line-through; }
.todo .t { flex: 1; }
.progress { height: .45rem; background: var(--line); border-radius: 1rem; overflow: hidden; margin-top: .5rem; }
.progress > i { display: block; height: 100%; background: var(--gold); }
.attn { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; background: #fbf4e4; border: 1px solid #e6c98d; border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .5rem; }
.attn b { font-family: var(--serif); font-size: 1.5rem; min-width: 2rem; }
.allgood { background: #eef7f1; border: 1px solid #bfe0cb; border-radius: var(--radius); padding: .8rem 1rem; color: #24613f; }
.jobline { display: flex; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.jobline:last-child { border-bottom: 0; }
.jobline .tm { min-width: 4.8rem; font-weight: 600; }
.chg { font-size: .75rem; font-weight: 600; margin-left: .35rem; }
.chg.up { color: #2f8f5b; } .chg.down { color: #b4442d; }
.idea { border-left: 3px solid var(--gold); background: var(--card); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .8rem; box-shadow: var(--shadow); }
.idea h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.idea p { margin: .2rem 0; }
.idea.p1 { border-left-color: #b4442d; }
.bars { display: grid; gap: .35rem; }
.bar { display: grid; grid-template-columns: 9rem 1fr 7.5rem; gap: .6rem; align-items: center; font-size: .9rem; }
.bar .track { background: var(--line); height: .7rem; border-radius: 1rem; overflow: hidden; }
.bar .track i { display: block; height: 100%; background: var(--brand, #14213d); border-radius: 1rem; }
.bar .v { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .bar { grid-template-columns: 6.5rem 1fr 4.5rem; } }
.cols { display: flex; align-items: flex-end; gap: .6rem; height: 9rem; padding-top: .5rem; }
.cols .c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: .75rem; }
.cols .c i { display: block; width: 100%; max-width: 3rem; background: var(--brand, #14213d); border-radius: .3rem .3rem 0 0; min-height: 2px; }
.fineprint { font-size: .78rem; color: #7a8292; margin-top: 1.5rem; }

/* ---- Help button + panel ---- */
.help-fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; border-radius: 999px; padding: .65rem 1.05rem; background: var(--night); color: #f8f4ec; border: 1px solid rgba(214,186,132,.4); box-shadow: 0 6px 20px rgba(10,17,32,.25); font-weight: 500; display: inline-flex; gap: .45rem; align-items: center; }
.help-fab span { display: inline-flex; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--gold); color: var(--night); align-items: center; justify-content: center; font-weight: 700; }
.help-panel { position: fixed; right: 18px; bottom: 76px; z-index: 41; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(10,17,32,.25); padding: 1.1rem 1.2rem 1.3rem; }
.help-panel[hidden] { display: none; }
.help-tips { margin: 0 0 .5rem; padding-left: 1.1rem; }
.help-tips li { margin: .35rem 0; }
.help-panel .chip { font-size: .78rem; padding: .3rem .6rem; border-radius: 999px; background: var(--line-2); border: 1px solid var(--line); }
.help-answer { white-space: pre-wrap; background: var(--line-2); border-radius: 10px; padding: .75rem .9rem; margin-top: .8rem; font-size: .93rem; line-height: 1.5; }
@media (max-width: 600px) { .help-fab { right: 12px; bottom: 12px; } .help-panel { right: 16px; left: 16px; width: auto; bottom: 66px; } }

.demo-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; background: #fbf4e4; border: 1px solid #e8d6a8; border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1rem; font-size: .95rem; }

/* ---------- schedule calendar (month / week / day) ---------- */
.cal-card { padding: 1rem 1.1rem; }
.cal-bar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cal-title { margin: 0 0 0 .4rem; font-size: 1.35rem; }
.cal-views { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.cal-views button { border: 0; border-radius: 0; padding: .4rem .8rem; background: var(--card); }
.cal-views button[aria-selected="true"] { background: var(--ink); color: #fff; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: .7rem; }
.cal-dow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; padding: .2rem 0; }
.cal-cell { min-height: 112px; border: 1px solid var(--line-2); border-radius: 8px; padding: .3rem; background: var(--card); cursor: pointer; overflow: hidden; }
.cal-cell:hover { border-color: var(--gold, #b08a48); }
.cal-cell.other { opacity: .45; }
.cal-cell.today { outline: 2px solid var(--gold, #b08a48); }
.cal-num { display: flex; justify-content: space-between; font-weight: 600; font-size: .85rem; margin-bottom: .15rem; }
.cal-count { font-weight: 500; font-size: .72rem; color: var(--muted); }
.cal-chips { display: flex; flex-direction: column; gap: 2px; }
.cal-chip { display: block; width: 100%; text-align: left; min-height: 0; margin: 0; line-height: 1.3; transform: none !important; box-shadow: none !important; font: 400 .74rem var(--sans); padding: .12rem .3rem; border: 0; border-left: 3px solid var(--c); border-radius: 4px;
  background: color-mix(in srgb, var(--c) 12%, var(--card)); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.cal-chip.cal-done { opacity: .6; }
.cal-chip:hover { border-left-color: var(--c); filter: brightness(.96); }
.cal-chip .cal-t { font-weight: 600; }
.cal-more { font-size: .72rem; color: var(--muted); padding-left: .3rem; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: .7rem; }
.cal-wcol { display: flex; flex-direction: column; gap: 3px; min-height: 220px; border: 1px solid var(--line-2); border-radius: 8px; padding: .3rem; background: var(--card); }
.cal-wcol.today { outline: 2px solid var(--gold, #b08a48); }
.cal-whead { display: flex; gap: .35rem; align-items: baseline; justify-content: center; border: 0; background: none; padding: .2rem; }
.cal-wcol .cal-chip { white-space: normal; font-size: .78rem; padding: .25rem .35rem; }
.cal-day { display: grid; gap: 0 6px; margin-top: .7rem; overflow-x: auto; }
.cal-dhead { font-weight: 600; font-size: .88rem; padding: .35rem; border-top: 3px solid; text-align: center; }
.cal-hours { position: relative; } .cal-hours div { position: absolute; right: 6px; font-size: .7rem; color: var(--muted); transform: translateY(-.45em); }
.cal-dcol { position: relative; border-left: 1px solid var(--line-2); }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-2); }
.cal-block { position: absolute; left: 3px; right: 3px; white-space: normal; overflow: hidden; font-size: .78rem; padding: .2rem .35rem; }
@media (max-width: 720px) {
  .cal-cell { min-height: 64px; padding: .2rem; }
  .cal-chips { display: none; }
  .cal-count { display: inline-block; background: var(--ink); color: #fff; border-radius: 999px; padding: 0 .4rem; }
  .cal-week { grid-template-columns: 1fr; } .cal-wcol { min-height: 0; }
  .cal-title { font-size: 1.1rem; }
}

/* Business look (public/look.js): logo, button shape, light headers */
.book-top .look-logo { display: block; margin: 0 auto .9rem; max-height: 96px; max-width: 220px; border-radius: 10px; object-fit: contain; }
.look-pill button, .look-pill .btn, .look-pill .choice, .look-pill .times button { border-radius: 999px; }
.look-pill .choice { border-radius: 18px; }
.look-square button, .look-square .btn, .look-square .choice, .look-square input, .look-square select, .look-square textarea, .look-square .card { border-radius: 0; }
.look-light-header .book-top { color: #1d1e20; }
.look-light-header .book-top h1 { color: #1d1e20; }
.look-light-header .book-top p { color: #3d4048; }
.look-light-header .book-top::before { display: none; }

/* Money › Sales & bookings */
.sales-chart { display: flex; align-items: flex-end; gap: 2px; height: 11rem; padding-top: .5rem; border-bottom: 1px solid var(--line); }
.sales-chart .sc { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; cursor: default; outline: none; }
.sales-chart .sc i { display: block; width: 100%; max-width: 2.6rem; margin: 0 auto; background: var(--brand, #14213d); border-radius: 4px 4px 0 0; opacity: .85; }
.sales-chart .sc:hover i, .sales-chart .sc:focus i { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.sales-chart .sc.today i { background: var(--gold-lo, #9a7536); }
.sales-chart .sc span { display: block; height: 1.1rem; margin-top: .25rem; font-size: .68rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; }
@media print { .no-print, .sales-ranges, nav, #subnav, .side { display: none !important; } }

/* Calendar time grid (Week and Day): times down the left, 15-minute rows, drag to move */
.cal-tg-wrap { margin-top: .7rem; overflow: auto; max-height: 78vh; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); }
.cal-tg { display: grid; min-width: min-content; }
.cal-tg-corner, .cal-tg-head { position: sticky; top: 0; z-index: 3; background: var(--card); border-bottom: 1px solid var(--line); }
.cal-tg-corner { left: 0; z-index: 4; }
.cal-tg-head { font-weight: 600; font-size: .86rem; padding: .45rem .3rem; text-align: center; border-top: 3px solid transparent; border-left: 1px solid var(--line-2); border-radius: 0; margin: 0; min-height: 0; box-shadow: none !important; transform: none !important; }
button.cal-tg-head:hover { color: var(--brand); }
.cal-tg-head.today { color: var(--brand); }
.cal-tg-hours { position: sticky; left: 0; z-index: 2; background: var(--card); border-right: 1px solid var(--line); }
.cal-tg-hours div { position: absolute; right: 6px; font-size: .72rem; font-weight: 600; color: var(--ink); transform: translateY(-.5em); white-space: nowrap; }
.cal-tg-hours div.half { font-weight: 400; color: var(--muted); font-size: .64rem; }
.cal-tg-hours div:first-child { transform: none; }
.cal-tg-col { position: relative; border-left: 1px solid var(--line-2); background-color: #fff; cursor: copy;
  background-image: linear-gradient(to bottom, var(--line-2) 1px, transparent 1px); }
.cal-tg-col.today { background-color: #fffdf6; }
.cal-hr { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); pointer-events: none; }
.cal-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #eef0f3 0 6px, #e6e9ee 6px 12px); opacity: .9; }
.cal-off-label { position: absolute; top: .5rem; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--muted); pointer-events: none; }
.cal-now { position: absolute; left: 0; right: 0; border-top: 2px solid #d64545; z-index: 1; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #d64545; }
.cal-tg-col .cal-block { z-index: 1; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important; }
.cal-tg-col .cal-block.cal-dragging { opacity: .35; }
.cal-ghost { z-index: 5 !important; opacity: .95; cursor: grabbing !important; outline: 2px dashed var(--brand); pointer-events: none; }
.cal-tg-col .cal-block { background: color-mix(in srgb, var(--c) 24%, #fff); }

/* Website builder */
.site-steps{display:flex;gap:.4rem;list-style:none;padding:0;margin:0 0 1.2rem;flex-wrap:wrap}
.site-steps li{display:flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:99px;background:var(--line-2);color:var(--muted);font-size:.85rem}
.site-steps li span{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;font-weight:600;font-size:.75rem}
.site-steps li.now{background:var(--ink,#1c1b22);color:#fff}.site-steps li.now span{color:var(--ink,#1c1b22)}
.site-steps li.done{background:#e3f1ea;color:var(--ok)}
.site-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.site-card{padding:.8rem;min-width:0}.site-card.chosen{outline:3px solid var(--ok)}
.site-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:10px;border:1px solid var(--line-2);background:#eee}
.site-thumb iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none}
.sw{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}

/* Snap a receipt */
.receipt-check { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; align-items: start; }
.receipt-thumb { width: 160px; max-height: 260px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: .3rem; }
div.receipt-thumb { display: grid; place-items: center; height: 120px; }
@media (max-width: 600px) { .receipt-check { grid-template-columns: 1fr; } .receipt-thumb { width: 100%; max-height: 200px; } }
/* Training videos */
.watch-btn { border-color: var(--gold, #c8a464); color: var(--ink, #1b2233); background: #fff8ea; font-weight: 500; }
.watch-btn:hover { background: #fdeecb; }
dialog.dlg-video { width: min(960px, 96vw); max-width: none; }
.help-videos { display: flex; flex-direction: column; gap: .4rem; margin: .2rem 0 .9rem; }
.help-videos .watch-btn { text-align: left; }

/* v97: photo rows (Inventory and Website editor) */
.photo-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.3rem 0 .6rem}
.ph-tile{position:relative;width:104px;height:80px;border-radius:10px;overflow:hidden;border:2px solid var(--line,#e6dccb);background:#f3f0ea}
.ph-tile.main{border-color:var(--gold,#b08a48)}
.ph-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ph-badge{position:absolute;left:4px;top:4px;background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;font-weight:700;padding:.1rem .4rem;border-radius:999px}
.ph-tools{position:absolute;left:0;right:0;bottom:0;display:flex;gap:2px;justify-content:center;padding:3px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.ph-tools button{min-width:28px;height:26px;padding:0 .3rem;font-size:.8rem;border-radius:6px;border:0;background:rgba(255,255,255,.92);cursor:pointer;line-height:1}
.ph-tools button.danger{color:#b42318}
.ph-add{width:104px;height:80px;border:2px dashed var(--line,#cdbf9f);border-radius:10px;background:transparent;cursor:pointer;font-weight:600;font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:-.2rem 0 .7rem}
.chip{border:1px solid var(--line,#e6dccb);background:#fff;border-radius:999px;padding:.3rem .75rem;font-size:.85rem;cursor:pointer}
.chip.on{background:var(--night,#0a1120);color:#fff;border-color:var(--night,#0a1120)}
details.more{margin:.4rem 0;border-top:1px solid var(--line,#e6dccb);padding-top:.5rem}
details.more>summary{cursor:pointer;font-weight:600}
/* v97: website editor */
.se-bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.se-layout{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:1rem;align-items:start}
.se-panels{display:grid;gap:.6rem;min-width:0}
.se-panel>summary{cursor:pointer;font-weight:700;font-size:1.02rem}
.se-panel[open]>summary{margin-bottom:.6rem}
.se-panel.flash{box-shadow:0 0 0 3px var(--gold,#b08a48)}
.se-preview{position:sticky;top:70px;min-width:0;text-align:center}
.se-frame{height:calc(100vh - 140px);min-height:520px;border:1px solid var(--line,#e6dccb);border-radius:14px;background:#fff;max-width:100%}
.se-sec{display:flex;justify-content:space-between;align-items:center;gap:.4rem;padding:.35rem 0;border-bottom:1px solid var(--line,#e6dccb)}
.se-sec.off .se-sec-name{opacity:.5}
.se-sec-name{display:flex;align-items:center;gap:.3rem;font-weight:600;text-transform:none;letter-spacing:0;margin:0}
.se-item{border:1px solid var(--line,#e6dccb);border-radius:10px;padding:.6rem;margin-bottom:.5rem;display:grid;gap:.3rem}
@media (max-width:900px){.se-layout{grid-template-columns:1fr}.se-preview{position:static}.se-frame{height:70vh}}

.chkline{display:flex;gap:.5rem;align-items:center;text-transform:none;letter-spacing:0;font-size:.98rem;font-weight:500;margin:.4rem 0}
.seg{display:inline-flex;border:1px solid var(--line,#e6dccb);border-radius:999px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:.45rem .9rem;background:#fff}
.seg button.on{background:var(--night,#0a1120);color:#fff}
.se-layout.narrow.v-edit .se-preview{display:none}
.se-layout.narrow.v-preview .se-panels{display:none}
.se-layout.narrow .se-frame{height:calc(100vh - 210px);width:100%}
@media (max-width:900px){.se-bar{position:static}}

/* v98: Prices & fees rows */
.rule-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-end;padding:.5rem 0;border-bottom:1px solid var(--line,#e6dccb)}
.rule-cell{display:grid;gap:.15rem;min-width:0}
.rule-cell input,.rule-cell select{min-width:0}
.pick-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.3rem 0}

/* v102: simpler on phones */
.inv-pick { max-height: 260px; overflow: auto; }
@media (max-width: 700px) { .inv-pick { max-height: none; overflow: visible; } }
.new-cust { width: 100%; margin: .4rem 0; padding: .75rem; font-weight: 600; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: 0 0 1.2rem; }
.quick { display: grid; justify-items: start; gap: .1rem; text-align: left; padding: .9rem 1rem; border: 1px solid var(--line, #e6e2d9); border-radius: 14px; background: #fff; cursor: pointer; min-height: 88px; }
.quick .qi { font-size: 1.4rem; line-height: 1; margin-bottom: .2rem; }
.quick b { font-size: 1rem; } .quick small { color: var(--muted, #5b6475); font-size: .8rem; }
.quick.main { background: var(--night, #14131a); color: #fff; border-color: transparent; } .quick.main small { color: #c9cfdb; }
@media (max-width: 700px) { .quick-grid { grid-template-columns: 1fr 1fr; } }
.bottombar { display: none; }
@media (max-width: 900px) {
  .side { display: none; }
  .bottombar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--night, #14131a); padding: .3rem .2rem calc(.3rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 18px rgba(0,0,0,.18); }
  .bottombar button { display: grid; justify-items: center; gap: .1rem; background: none; border: 0; color: #a9b1c2; font-size: .72rem; padding: .35rem .1rem; border-radius: 10px; min-height: 52px; }
  .bottombar button span { font-size: 1.25rem; line-height: 1.1; }
  .bottombar button[aria-current="page"] { color: #fff; background: rgba(200,164,100,.18); }
  .main { padding-bottom: 6rem; }
  .help-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  .subnav { overflow-x: auto; flex-wrap: nowrap; }
  .subnav button { white-space: nowrap; }
}
.more-menu { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .4rem 0; }
.more-menu button { padding: .8rem .6rem; text-align: left; justify-content: flex-start; font-weight: 600; }
.more-menu.small button { font-weight: 400; }
@media (max-width: 900px) { .help-panel { bottom: 140px !important; } }
@media (max-width: 700px) {
  .inv-table thead { display: none; }
  .inv-table tr { display: grid; grid-template-columns: 64px 1fr 1fr; gap: .2rem .6rem; padding: .6rem 0; border-bottom: 1px solid var(--line, #e6e2d9); }
  .inv-table td { border: 0; padding: 0; }
  .inv-table td:nth-child(1) { grid-row: span 2; }
  .inv-table td:nth-child(2) { grid-column: 2 / -1; }
  .inv-table td[data-l]::before { content: attr(data-l) ": "; color: var(--muted, #5b6475); font-size: .8rem; }
  .inv-table td:last-child { grid-column: 1 / -1; }
  .inv-table td:last-child button { flex: 1; }
}

/* v109: toned-down back office looks (Settings › Back office look). "site" takes its menu and accent colors from the
   owner's website design (set as variables by admin.js); "mono" is plain black and white. Both: white pages, black text,
   a clean sans-serif, a light menu. Without data-look, the classic navy-and-gold look stays. */
html[data-look] { --bg: #f5f6f8; --card: #fff; --ink: #15171c; --muted: #5d6470; --line: #e1e4e9; --line-2: #eceff3; --soft: #f1f3f6;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: var(--sans); --radius: 8px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -16px rgba(16,24,40,.18); }
html[data-look="mono"] { --night: #111214; --night-2: #1d1f23; --night-3: #2a2d33; --gold: #111214; --gold-lo: #111214; --gold-hi: #e6e7ea; --gold-grad: #111214; --brand: #111214; --brand-ink: #fff; }
html[data-look] h1, html[data-look] h2, html[data-look] h3 { font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
html[data-look] .eyebrow { letter-spacing: .12em; font-weight: 600; }
html[data-look] label { letter-spacing: .05em; font-weight: 600; }
html[data-look] .stat b, html[data-look] .job .time, html[data-look] .day b, html[data-look] .stepper output, html[data-look] .summary .total { font-weight: 700; color: var(--ink); }
html[data-look] .gold { background: var(--brand); color: var(--brand-ink, #fff); text-transform: none; letter-spacing: .02em; font-size: .9rem; }
html[data-look] input:focus, html[data-look] select:focus, html[data-look] textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }
html[data-look] .notice { background: color-mix(in srgb, var(--gold) 7%, #fff); border-color: color-mix(in srgb, var(--gold) 25%, #fff); }
/* the menu: white, black text, the accent color marks the page you're on */
html[data-look] .side { background: #fff; color: #3d434d; border-right: 1px solid var(--line); }
html[data-look] .side .brand { color: var(--ink); border-bottom-color: var(--line); font-weight: 700; }
html[data-look] .side .brand small { color: var(--gold-lo); }
html[data-look] .side .navgroup { color: #8a909a; letter-spacing: .14em; }
html[data-look] .side button { border-radius: 6px; border-left: 3px solid transparent; }
html[data-look] .side button:hover { color: var(--ink); background: var(--soft); }
html[data-look] .side button[aria-current="page"] { color: var(--ink); font-weight: 600; border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, #fff); }
html[data-look] .side .foot { border-top-color: var(--line); }
html[data-look] .side select { background: #fff; color: var(--ink); border-color: var(--line); }
html[data-look] .help-fab, html[data-look] .toast { border-color: transparent; }
html[data-look] .help-fab span { background: #fff; color: var(--night); }
html[data-look] .bottombar button { color: rgba(255,255,255,.72); }
html[data-look] .bottombar button[aria-current="page"] { color: #fff; background: rgba(255,255,255,.14); }
.look-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.look-pick button { flex-direction: column; align-items: flex-start; text-align: left; gap: .45rem; padding: .9rem; border-radius: 10px; }
.look-pick button.on { border: 2px solid var(--ink); }
.look-pick .sw { display: flex; gap: 4px; } .look-pick .sw i { width: 22px; min-width: 22px; flex: 0 0 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); display: block; }