/* Kantoor — the look of The Digitals group (brandbook: Saira titles, Open Sans text, black #131416, grey #303133,
   beige #F3EFE7, white, green #68EEA0; one marked word in green per title), light and dark. */
:root {
  --bg:#F3EFE7; --surface:#ffffff; --surface-2:#ebe6dc; --hover:#f6f3ed;
  --fg:#131416; --fg-2:#303133; --muted:#6c6a65; --line:#e4ded2; --line-2:#d5cdbf;
  --brand:#131416; --accent:#68EEA0; --accent-soft:#dff8ea; --accent-ink:#131416;
  --primary-bg:#131416; --primary-fg:#ffffff; --primary-hover:#303133;
  --lunch:#a8501c; --lunch-bg:#fbeee3; --event:#5245c7; --event-bg:#efedfd; --stop:#c0392f; --warn:#8a5a00; --warn-bg:#fff4d1;
  --shadow:0 1px 2px rgba(19,20,22,.04),0 1px 3px rgba(19,20,22,.06);
  --f-display:"Saira","Avenir Next",system-ui,sans-serif;
  --f-body:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px;
  color-scheme:light;
}
/* Dark (D27): follows the device, unless the person picked light or dark with the toggle (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#131416; --surface:#1c1d20; --surface-2:#232428; --hover:#26272b;
    --fg:#F3EFE7; --fg-2:#d9d4ca; --muted:#9b978f; --line:#2b2c30; --line-2:#3a3b40;
    --brand:#68EEA0; --accent:#68EEA0; --accent-soft:#17301f; --accent-ink:#131416;
    --primary-bg:#68EEA0; --primary-fg:#131416; --primary-hover:#55dd8f;
    --lunch:#f3a06d; --lunch-bg:#36230f; --event:#c4bbfd; --event-bg:#24204a; --stop:#f18b81; --warn:#f2c35b; --warn-bg:#33290c;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#131416; --surface:#1c1d20; --surface-2:#232428; --hover:#26272b;
  --fg:#F3EFE7; --fg-2:#d9d4ca; --muted:#9b978f; --line:#2b2c30; --line-2:#3a3b40;
  --brand:#68EEA0; --accent:#68EEA0; --accent-soft:#17301f; --accent-ink:#131416;
  --primary-bg:#68EEA0; --primary-fg:#131416; --primary-hover:#55dd8f;
  --lunch:#f3a06d; --lunch-bg:#36230f; --event:#c4bbfd; --event-bg:#24204a; --stop:#f18b81; --warn:#f2c35b; --warn-bg:#33290c;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--fg); font:15px/1.5 var(--f-body); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
a { color:inherit; }
button { font:inherit; color:inherit; cursor:pointer; }
h1, h2 { font-family:var(--f-display); font-weight:700; letter-spacing:-.005em; margin:0; }
h1 { font-size:clamp(24px,4vw,32px); line-height:1.15; }
h2 { font-size:18px; line-height:1.25; }
.muted { color:var(--muted); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---- top bar ---- */
.top { position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top); }
.top-in { position:relative; max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; min-height:40px; text-decoration:none; margin-right:auto; }
.logo { width:116px; height:25px; background:var(--fg); -webkit-mask:url(../img/logo-the-digitals.svg) no-repeat center/contain; mask:url(../img/logo-the-digitals.svg) no-repeat center/contain; }
.brand-name { font:600 17px var(--f-display); padding-left:10px; border-left:1px solid var(--line-2); }
/* The one marked word per title (brandbook). */
.hl { color:var(--fg); background:linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); padding:0 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl { color:var(--accent); background:none; padding:0; } }
:root[data-theme="dark"] .hl { color:var(--accent); background:none; padding:0; }
.tabs { display:flex; align-items:center; gap:4px; }
.tab { text-decoration:none; padding:7px 12px; border-radius:999px; color:var(--fg-2); font-weight:500; font-size:14px; white-space:nowrap; }
.tab:hover { background:var(--hover); }
.tab.on { background:var(--primary-bg); color:var(--primary-fg); }
/* The light/dark toggle (D27): always in the top bar, also before logging in. */
.theme-toggle { order:3; width:36px; height:36px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); font-size:16px; line-height:1; color:var(--fg); }
.theme-toggle:hover { background:var(--hover); }
.me { display:flex; align-items:center; gap:6px; margin-left:8px; padding:3px 10px 3px 3px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); font-size:14px; }
.logout { margin-left:4px; font-size:13px; }

.content { width:100%; max-width:1200px; margin:0 auto; padding:24px 16px 40px; flex:1; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.eyebrow { margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.lead { margin:6px 0 0; color:var(--fg-2); }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--primary-bg); background:var(--primary-bg); color:var(--primary-fg); font-weight:600; text-decoration:none; font-size:14px; }
.btn:hover { background:var(--primary-hover); }
.btn.ghost { background:var(--surface); color:var(--fg); border-color:var(--line-2); }
.btn.ghost:hover { background:var(--hover); }
.icon-btn { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line-2); background:var(--surface); text-decoration:none; font-size:22px; line-height:1; }
.icon-btn:hover { background:var(--hover); }
.week-nav { display:flex; gap:8px; align-items:center; }
.link { background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:2px; color:var(--fg-2); font-size:13px; }
.link.danger { color:var(--stop); margin-top:10px; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; }
.pill.now { background:var(--accent); color:var(--accent-ink); }
.pill.lunch { background:var(--lunch-bg); color:var(--lunch); }
.pill.event { background:var(--event-bg); color:var(--event); }

/* ---- company tag (D18): neutral, so the colours keep their one meaning ---- */
.tag { display:inline-block; flex:none; padding:0 6px; border:1px solid var(--line-2); border-radius:5px; font-size:10.5px; font-weight:600; line-height:17px; color:var(--fg-2); background:var(--surface-2); white-space:nowrap; }
.small { font-size:13px; }

/* ---- filter chips: location in the week, company in the overview ---- */
.loc-filter { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.chip { min-height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); font-size:13px; font-weight:600; color:var(--fg-2); }
.chip:hover { background:var(--hover); }
.chip.on { background:var(--primary-bg); border-color:var(--primary-bg); color:var(--primary-fg); }
.chip-note { font-weight:400; opacity:.75; font-size:12px; }

/* ---- avatars ---- */
.av { width:26px; height:26px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--fg); display:grid; place-items:center; font-size:11px; font-weight:700; }

/* ---- login ---- */
.auth { max-width:400px; margin:6vh auto 0; }
.auth-form { display:flex; flex-direction:column; gap:14px; margin-top:24px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.auth-form input { font:inherit; font-size:16px; color:var(--fg); background:var(--surface); border:1px solid var(--line-2); border-radius:8px; min-height:44px; padding:0 12px; }
.auth-form .btn { min-height:44px; }
.auth-form label { display:flex; flex-direction:column; gap:6px; }
.auth-switch { margin-top:16px; color:var(--fg-2); font-size:14px; }
.auth-switch .link { font-size:14px; color:var(--brand); font-weight:600; }

/* ---- week ---- */
.days { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:start; }
.day { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; min-width:0; }
.day.today { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
/* The day you came to from the overview (D22). */
.day.focus { box-shadow:0 0 0 3px var(--accent); }
/* Many people on one place (D31): initials in a row, then "+N". */
.faces { display:flex; flex-wrap:wrap; gap:4px; }
.faces .av { width:30px; height:30px; font-size:11px; }
.av.more { border:0; background:var(--primary-bg); color:var(--primary-fg); width:auto; min-width:32px; height:32px; padding:0 8px; border-radius:16px; font-weight:700; cursor:pointer; }
.crowd-toggle { margin-top:6px; }
.day.past { opacity:.62; }
.day.holiday { background:var(--surface-2); }
.day-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dname { font:700 16px var(--f-display); text-transform:capitalize; }
.ddate { color:var(--muted); font-size:13px; }
.day-head .pill { margin-left:auto; }
.holiday-note { margin:0; color:var(--muted); font-size:14px; }

.segs { display:grid; grid-template-columns:1.6fr 1fr 1fr; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; }
.seg { min-height:40px; border:0; background:var(--surface); font-size:13px; font-weight:600; color:var(--fg-2); padding:0 4px; }
.seg + .seg { border-left:1px solid var(--line-2); }
.seg:hover { background:var(--hover); }
.seg.on { background:var(--primary-bg); color:var(--primary-fg); }

.where { display:flex; flex-direction:column; gap:6px; }
.where.idle { opacity:.7; }
.where-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-2); }
.where select, .where-other { font:inherit; font-size:14px; color:var(--fg); background:var(--surface); border:1px solid var(--line-2); border-radius:8px; min-height:38px; padding:0 8px; width:100%; min-width:0; }
.who + .who { padding-top:10px; border-top:1px solid var(--line); }
.who-head { margin:0 0 6px; font-size:13px; color:var(--fg-2); }
.who ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.who li { display:flex; align-items:center; gap:8px; font-size:14px; min-width:0; }
.who li span:not(.av):not(.part) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.who li.me-row span:not(.av):not(.part) { font-weight:600; }
.part { margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:0 5px; }

.ev-chip { display:flex; flex-direction:column; gap:1px; text-decoration:none; padding:8px 10px; border-radius:10px; border-left:3px solid var(--event); background:var(--event-bg); }
.ev-chip.lunch { border-left-color:var(--lunch); background:var(--lunch-bg); }
.ev-chip:hover { filter:brightness(.98); }
.ev-kind { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--event); }
.ev-chip.lunch .ev-kind { color:var(--lunch); }
.ev-title { font-weight:600; font-size:14px; line-height:1.3; }
.ev-count { font-size:12px; color:var(--fg-2); }

.week-tools { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:-8px 0 12px; }
/* The office rule (D29): the brand green, soft while you are on your way, full green when you reach it. */
.rule { margin:0; padding:10px 14px; border-radius:12px; font-size:14px; flex:1; min-width:240px; color:var(--fg); }
.rule.warn { background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); }
.rule.ok { background:var(--accent); color:var(--accent-ink); }
.rule-team { margin:0 0 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; }
.rule-team summary { cursor:pointer; }
.rule-team ul { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px 16px; }
.rule-team li { display:flex; align-items:center; gap:8px; font-size:14px; }
.rule-count { margin-left:auto; color:var(--warn); font-weight:600; font-size:13px; }
.from-pattern { margin:-4px 0 0; font-size:12px; color:var(--muted); }
.pattern { margin-top:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow); }
.pattern summary { cursor:pointer; }
.pattern .lead { font-size:14px; margin:10px 0 14px; }
.pattern-rows { display:flex; flex-direction:column; gap:10px; }
.pattern-row { display:grid; grid-template-columns:110px minmax(0,260px) minmax(0,260px); gap:12px; align-items:center; }
.pattern-day { font-weight:600; text-transform:capitalize; }
.profile { margin-top:12px; }
.profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,260px)); gap:12px; margin-top:12px; }
.profile-fields label, .profile-fields select, .auth-form select { font:inherit; font-size:15px; color:var(--fg); background:var(--surface); border:1px solid var(--line-2); border-radius:8px; min-height:42px; padding:0 10px; }

/* ---- together (D28): the warm, positive lines ---- */
.together { margin:-4px 0 0; font-size:13px; font-weight:600; color:var(--fg); display:flex; gap:6px; align-items:baseline; }
.together::before { content:""; flex:none; width:8px; height:8px; border-radius:2px; background:var(--accent); transform:translateY(-1px); }
/* The tip (D30): its own box, quiet, with one button. */
.tip-box { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; font-size:14px; color:var(--fg-2); box-shadow:var(--shadow); }
.tip-box > span:nth-child(2) { flex:1; min-width:200px; }
.tip-label { flex:none; padding:1px 8px; border-radius:5px; background:var(--accent); color:var(--accent-ink); font:700 12px var(--f-display); letter-spacing:.04em; text-transform:uppercase; }
.ev-by { margin:4px 0 0; font-size:12px; color:var(--muted); }
.lead .invite { color:var(--fg); }

/* ---- seats (D25): green while there is room, amber when nearly full, red when full ---- */
.seats { display:flex; align-items:center; gap:6px; margin:2px 0 8px; font-size:12px; font-weight:600; color:var(--fg-2); }
.meter { flex:none; width:56px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.meter i { display:block; height:100%; background:var(--accent); border-radius:3px; }
.seats.low .meter i { background:var(--warn); }
.seats.low { color:var(--warn); }
.seats.full .meter i { background:var(--stop); }
.seats.full { color:var(--stop); }
.grid .seats { flex-direction:column; align-items:flex-start; gap:3px; margin:4px 0 2px; white-space:nowrap; }
.grid .seats .meter { width:100%; max-width:84px; }
.grid .seats .muted { display:none; }
.grid .row-seats { display:block; font-size:11px; font-weight:400; color:var(--muted); }

/* ---- managing partners (D23) ---- */
.partners { margin-top:12px; }
.partner-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.partner-list li { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.pill.mp { background:var(--accent-soft); color:var(--fg); }
.small-btn { min-height:32px; padding:0 10px; font-size:13px; }
.partners .error { margin-top:10px; }

/* ---- overview (D22): places against days ---- */
.grid-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.grid { width:100%; border-collapse:collapse; min-width:620px; }
.grid th, .grid td { padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.grid thead th { font-size:13px; font-weight:600; white-space:nowrap; }
.grid thead th.today { box-shadow:inset 0 -3px 0 var(--accent); }
.grid thead .dname { font-family:var(--f-display); text-transform:capitalize; font-weight:700; }
.grid thead .ddate { color:var(--muted); font-weight:400; }
.grid tbody th { font-weight:600; font-size:14px; white-space:nowrap; }
.grid td { width:17%; }
.grid .n { display:inline-flex; align-items:center; min-width:32px; min-height:32px; font:700 20px/1.1 var(--f-display); text-decoration:none; }
.grid a.n:hover { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; }
.grid .zero .n { color:var(--line-2); }
.grid .names { display:block; font-size:12px; color:var(--fg-2); margin-top:2px; }
.grid .names i { font-style:normal; font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted); }
.grid td.off { background:var(--surface-2); font-size:12px; }
/* The place column stays put when the table scrolls sideways on a phone. */
.grid th[scope="row"], .grid thead th:first-child { position:sticky; left:0; z-index:1; background:var(--surface); }
.grid tfoot th[scope="row"] { background:var(--surface-2); }
.grid tfoot th, .grid tfoot td { border-bottom:0; background:var(--surface-2); font-size:14px; }

/* ---- events ---- */
.ev-list { display:flex; flex-direction:column; gap:12px; max-width:760px; }
.ev-card { display:flex; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); scroll-margin:90px; }
.ev-card.focus { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.ev-date { flex:none; width:54px; height:58px; border-radius:10px; background:var(--event-bg); color:var(--event); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ev-card.lunch .ev-date { background:var(--lunch-bg); color:var(--lunch); }
.ev-date .d { font:700 22px/1 var(--f-display); }
.ev-date .m { font-size:12px; font-weight:600; text-transform:uppercase; }
.ev-body { min-width:0; flex:1; }
.ev-meta { margin:0 0 4px; font-size:13px; color:var(--fg-2); }
.ev-place, .ev-note { margin:4px 0 0; font-size:14px; color:var(--fg-2); }
.ev-note { color:var(--muted); }
.ev-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ev-actions .btn.on { background:var(--primary-bg); color:var(--primary-fg); }
.ev-who { margin:10px 0 0; font-size:14px; }
.nudge { margin:10px 0 0; padding:8px 10px; border-radius:10px; background:var(--accent-soft); font-size:13px; }
.nudge .link { color:var(--brand); font-weight:600; font-size:13px; }
.empty { color:var(--muted); }
.past-list { margin-top:24px; max-width:760px; color:var(--fg-2); }
.past-list summary { cursor:pointer; font-weight:600; }
.past-list ul { padding-left:18px; font-size:14px; }

.new-ev { max-width:760px; margin-bottom:16px; border:1px dashed var(--line-2); border-radius:var(--r); padding:12px 16px; background:var(--surface); }
.new-ev summary { cursor:pointer; font-weight:600; }
.form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.form label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:500; color:var(--fg-2); min-width:0; }
.form .full { grid-column:1/-1; }
.form .half { grid-column:span 2; }
.form input, .form select { font:inherit; color:var(--fg); background:var(--surface); border:1px solid var(--line-2); border-radius:8px; min-height:40px; padding:0 10px; width:100%; }
.error { margin:0; color:var(--stop); font-size:14px; }

.demo-note { max-width:1200px; width:100%; margin:0 auto; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; font-size:13px; color:var(--muted); border-top:1px solid var(--line); }

/* ---- smaller screens: days stack, today first in reading order stays the week order ---- */
@media (max-width: 1000px) {
  .days { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
}
@media (max-width: 600px) {
  .pattern-row { grid-template-columns:1fr; gap:6px; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .week-tools { justify-content:stretch; margin-top:0; }
  .week-tools .btn { width:100%; }
  .content { padding-top:16px; }
  .top-in { gap:8px; }
  .tabs { width:100%; }
  .tab { flex:1 1 auto; text-align:center; padding:7px 8px; font-size:13px; }
  /* Three tabs fill the row; your name moves out, "Afmelden" goes up next to the logo. */
  .me { display:none; }
  .logout { position:absolute; top:calc(14px + env(safe-area-inset-top)); right:62px; margin:0; }
  .theme-toggle { position:absolute; top:calc(6px + env(safe-area-inset-top)); right:16px; }
  .days { grid-template-columns:1fr; }
  .ev-card { gap:12px; padding:14px; }
  .ev-date { width:46px; height:52px; }
  .profile-fields { grid-template-columns:1fr; }
  .logo { width:92px; height:20px; }
  .form { grid-template-columns:1fr 1fr; }
}

/* ---- The QAura mode (D33): the look of QAura Sales (deep green, lime, Syne titles, Inter text), light and dark.
   <html data-brand="qaura"> is set by server.cjs (and by core.js in the rehearsal). Only tokens change, plus the mark. ---- */
:root[data-brand="qaura"] {
  --bg:#f6f6f4; --surface:#ffffff; --surface-2:#f4f4f1; --hover:#efefec;
  --fg:#15191a; --fg-2:#3b4245; --muted:#6f7679; --line:#e8e8e4; --line-2:#dcdcd7;
  --brand:#0b3227; --accent:#b9f86f; --accent-soft:#f0fbe2; --accent-ink:#0b3227;
  --primary-bg:#0b3227; --primary-fg:#ffffff; --primary-hover:#14473a;
  --lunch:#b0521b; --lunch-bg:#fdefe5;
  --shadow:0 1px 2px rgba(15,25,20,.04),0 1px 3px rgba(15,25,20,.05);
  --f-display:"Syne","Avenir Next",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-brand="qaura"]:not([data-theme="light"]) {
    --bg:#0c100f; --surface:#151b19; --surface-2:#1a211f; --hover:#1f2826;
    --fg:#edf1ef; --fg-2:#c8d0cc; --muted:#8a9592; --line:#232c29; --line-2:#2e3a36;
    --brand:#b9f86f; --accent:#b9f86f; --accent-soft:#1d2a17; --accent-ink:#0b3227;
    --primary-bg:#b9f86f; --primary-fg:#0b3227; --primary-hover:#a6ea58;
    --lunch:#f3a06d; --lunch-bg:#36230f;
    --shadow:0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-brand="qaura"][data-theme="dark"] {
  --bg:#0c100f; --surface:#151b19; --surface-2:#1a211f; --hover:#1f2826;
  --fg:#edf1ef; --fg-2:#c8d0cc; --muted:#8a9592; --line:#232c29; --line-2:#2e3a36;
  --brand:#b9f86f; --accent:#b9f86f; --accent-soft:#1d2a17; --accent-ink:#0b3227;
  --primary-bg:#b9f86f; --primary-fg:#0b3227; --primary-hover:#a6ea58;
  --lunch:#f3a06d; --lunch-bg:#36230f;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}
/* The QAura mark instead of the logo of The Digitals: a "Q" tile, as in QAura Sales. */
[data-brand="qaura"] .logo { width:30px; height:30px; border-radius:9px; background:var(--primary-bg); -webkit-mask:none; mask:none; display:grid; place-items:center; }
[data-brand="qaura"] .logo::after { content:"Q"; color:var(--accent); font:700 16px var(--f-display); }
@media (prefers-color-scheme: dark) { [data-brand="qaura"]:not([data-theme="light"]) .logo::after { color:var(--accent-ink); } }
[data-brand="qaura"][data-theme="dark"] .logo::after { color:var(--accent-ink); }
[data-brand="qaura"] .brand-name { font-weight:700; }

/* Online (D34): the Google button, and a short message after a save that did not go through. */
.google-knop { min-height:44px; margin:18px 0 12px; }
.toast { position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100% - 32px); margin:0; padding:10px 14px; border-radius:var(--r); background:var(--fg); color:var(--bg); box-shadow:var(--shadow); font-size:14px; z-index:20; }
.toast[hidden] { display:none; }