/* Breadslice desktop app mock. Forked from the Bubblegum calendars mock on
   2026-10-02 and rebranded: the landing page's palette, Lato throughout, maroon
   where Bubblegum was pink. The structure is deliberately still Bubblegum's in
   places; this is a working draft, not a finished app.

   Product differences so far: no Outbound, Inbound became Booking chats,
   Billing carries a float and a payments report, visitors verify by social
   account rather than by a cross-platform proven email, and Live meetings is a
   new section. */
:root {
	--accent: #8a2433;
	--accent-2: #6f1c29;
	--accent-lt: #c33248;
	--accent-soft: #fdf5f4;
	--accent-line: #eaddda;
	--ink: #2b1a1c;
	--ink-h: #1d1013;
	--muted: #8a6f72;
	--subtle: #b49a9c;
	--line: #eaddda;
	--canvas: #faf6f5;
	--panel: #ffffff;
	--violet: #7c5cff;
	--teal: #16a88f;
	--amber: #f59e0b;
	/* Icon tiles in the menu and Settings, by meaning (2026-10-13). A lighter maroon for now (Joe);
	   the meaning palette, to look at again later: money #2f7a55, booking #8a2433,
	   people #c0583a, forms #b07a1e, system #76666a. */
	--ic-money: #a8414f;
	--ic-book: #a8414f;
	--ic-people: #a8414f;
	--ic-forms: #a8414f;
	--ic-system: #a8414f;
	--r: 20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--canvas); color: var(--ink); font: 400 15px/1.55 Lato, system-ui, sans-serif; }
h1, h2, h3 { font-family: Lato, system-ui, sans-serif; font-weight: 900; margin: 0; letter-spacing: -0.01em; }
button { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* ---- top bar ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 24px; background: rgba(250, 246, 245, 0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.mark { font: 600 22px Lato, system-ui, sans-serif; color: var(--ink); text-decoration: none; }
.mark i { color: var(--accent); font-style: normal; }
.crumbs { display: flex; align-items: center; gap: 8px; font: 600 18px Lato, system-ui, sans-serif; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs .sep { color: var(--line); font-size: 22px; }
.top .grow { flex: 1; }
.meter { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 10px; }
.meter .bar { width: 64px; height: 6px; border-radius: 3px; background: #f1e8e6; overflow: hidden; }
.meter .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.tbtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 14px; cursor: pointer; }
.tbtn:hover { border-color: var(--accent-line); color: var(--accent); }
.tbtn.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.ibtn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 50%; cursor: pointer; font-size: 17px; }
.me { width: 38px; height: 38px; border-radius: 50%; background: #f6dcd7; display: grid; place-items: center; font-weight: 800; color: var(--accent); }

/* ---- buttons ---- */
.btn { border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; padding: 11px 20px; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(138, 36, 51, 0.8); }
.btn:hover { filter: brightness(1.05); }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.ghost { border: 0; background: none; color: var(--accent); font-weight: 800; cursor: pointer; padding: 6px 0; }
.soft { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 9px 16px; font-weight: 800; cursor: pointer; }
.soft:hover { border-color: var(--accent-line); color: var(--accent); }

/* ---- calendars page ---- */
.page { max-width: 980px; margin: 0 auto; padding: 32px 24px 80px; }
.hello { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.hello h1 { font-size: 34px; }
.hello p { margin: 6px 0 0; color: var(--muted); max-width: 560px; }
.hello .grow { flex: 1; }
.cal { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; margin-bottom: 18px; overflow: hidden; }
.cal-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; }
.cal-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; box-shadow: 0 0 0 4px var(--c-soft, #fdf5f4); }
.cal-head h2 { font-size: 21px; }
.cal-head .sub { color: var(--muted); font-size: 13px; font-weight: 600; }
.cal-head .grow { flex: 1; min-width: 0; }
.count { font-size: 13px; font-weight: 800; color: var(--muted); background: var(--canvas); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.chev { color: var(--subtle); transition: transform 0.2s; font-size: 18px; }
.cal.open > .cal-head .chev { transform: rotate(90deg); }
.cal-body { border-top: 1px solid var(--line); padding: 8px 12px 12px; }
.ev { display: flex; align-items: center; gap: 14px; padding: 13px 10px; border-radius: 16px; cursor: pointer; }
.ev:hover { background: var(--canvas); }
/* A straight divider between rows (2026-10-12): drawn inset on a pseudo-element, since a border
   on the row itself bends round its rounded hover corners. Hidden next to a hovered row. */
.ev { position: relative; }
.ev + .ev::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; border-top: 1px dashed #f1e8e6; pointer-events: none; }
.ev:hover::before, .ev:hover + .ev::before { opacity: 0; }
.ev .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: var(--c-soft, #fdf5f4); flex: 0 0 42px; }
.ev .main { flex: 1; min-width: 0; }
.ev b { display: block; font-size: 16px; }
.ev .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.link { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.chip.off { color: var(--amber); background: #fff8eb; border-color: #fde2b0; }
.add-ev { display: flex; align-items: center; gap: 10px; margin: 6px 10px 2px; padding: 12px; border: 1.5px dashed var(--line); border-radius: 16px; color: var(--muted); font-weight: 800; cursor: pointer; background: none; width: calc(100% - 20px); text-align: left; }
.add-ev:hover { border-color: var(--accent-line); color: var(--accent); }
.empty-cal { display: flex; gap: 16px; align-items: center; padding: 14px 10px; color: var(--muted); }
.empty-cal img { width: 84px; }

/* ---- drawer ---- */
.scrim { position: fixed; inset: 0; background: rgba(29, 22, 51, 0.28); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--canvas); z-index: 50; overflow-y: auto; box-shadow: -30px 0 60px -30px rgba(29, 22, 51, 0.4); animation: slide 0.22s ease-out; }
@keyframes slide { from { transform: translateX(40px); opacity: 0.4; } }
.dh { position: sticky; top: 0; z-index: 2; background: var(--canvas); display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.dh .grow { flex: 1; min-width: 0; }
.dh .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.dh h2 { font-size: 26px; margin-top: 2px; }
.close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 18px; color: var(--muted); }
.db { padding: 16px 22px 60px; }
.grp { margin-bottom: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.grp > summary { list-style: none; cursor: pointer; padding: 15px 18px; display: flex; align-items: center; gap: 10px; font-weight: 800; }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary .grow { flex: 1; }
.grp > summary .n { font-size: 12px; color: var(--subtle); font-weight: 800; }
.grp > summary::after { content: "›"; color: var(--subtle); font-size: 20px; transition: transform 0.2s; }
.grp[open] > summary::after { transform: rotate(90deg); }
.grp[open] > summary { border-bottom: 1px solid var(--line); }
.grp.new > summary .grow::after { content: "new"; margin-left: 8px; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 7px; vertical-align: 2px; }
.row { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #f5efed; font-size: 14px; }
.row:first-child { border-top: 0; }
.row .grow { flex: 1; }
.row .v { color: var(--muted); font-weight: 700; font-size: 13px; text-align: right; }
.card { padding: 16px 18px; border-top: 1px solid #f5efed; }
.card:first-child { border-top: 0; }
.card h3 { font-size: 18px; }
.card .hint { color: var(--muted); font-size: 13.5px; margin: 3px 0 12px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 14px; margin-top: 8px; cursor: pointer; background: var(--panel); }
.opt:hover { border-color: var(--accent-line); }
.opt.on { border-color: var(--accent); background: var(--accent-soft); }
.opt input { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; }
.opt .grow { flex: 1; min-width: 0; }
.opt b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.seg { display: flex; background: #f5efed; border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 8px 10px; font-weight: 800; font-size: 14px; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--panel); color: var(--accent); box-shadow: 0 2px 6px -2px rgba(29, 22, 51, 0.2); }
.segnote { color: var(--muted); font-size: 13.5px; margin: 10px 2px 0; }

/* type badges */
.tb { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.tb.simple { background: #eef6ff; color: #2563eb; }
.tb.random { background: #f3efff; color: var(--violet); }
.tb.once { background: #e9fbf6; color: var(--teal); }
.tb.home { background: var(--accent); color: #fff; }
/* the label you gave a link, worn where its shape pill would be */
.tb.lbl { background: var(--canvas); color: var(--ink); border: 1px solid var(--line); padding: 1px 7px; }
.tb.nolbl { background: transparent; color: var(--subtle); border: 1px dashed var(--line); padding: 1px 7px; }

/* ---- library ---- */
.shelves { display: flex; gap: 6px; overflow-x: auto; padding: 0 22px 12px; margin: 0 -22px; scrollbar-width: none; }
.shelves button { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 13px; font-weight: 800; font-size: 13px; color: var(--muted); cursor: pointer; }
.shelves button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.lk { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 10px; }
.lk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lk-url { font: 600 16px Lato, system-ui, sans-serif; word-break: break-all; }
.lk p { margin: 6px 0 10px; color: var(--muted); font-size: 14px; }
.lk .sum { display: flex; flex-wrap: wrap; gap: 6px; }
.lk .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.lib-intro { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; }
.lib-intro .grow { flex: 1; font-size: 14px; }
.lib-intro b { display: block; }
.plain { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }

/* ---- link studio ---- */
.studio { display: grid; grid-template-columns: 270px minmax(0, 1fr) 340px; gap: 24px; max-width: 1340px; margin: 0 auto; padding: 24px; align-items: start; }
.rail { position: sticky; top: 86px; background: #f4ebe7; border-radius: 20px; padding: 14px 12px 16px; }
.rail h3 { font-size: 12px; color: var(--subtle); font-family: Lato, system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 6px 8px; }
.railscroll > h3:first-of-type { margin-top: 2px; }
/* Anything that scrolls inside the page fades at an end only when there is more
   that way. The classes come from the scroll handler. */
.scrollfade { overflow-y: auto; overscroll-behavior: contain; mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
.scrollfade.up { mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 26px), transparent); }
.scrollfade.end { mask-image: none; }
.scrollfade.up.end { mask-image: linear-gradient(transparent, #000 22px); }
.scrollfade::-webkit-scrollbar { width: 6px; }
.scrollfade::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.railscroll { max-height: calc(100vh - 182px); padding: 4px 4px 0 2px; }
.stbody { max-height: calc(100vh - 60px); padding-right: 6px; }
/* The studio's two halves. Settings is contents plus one section; testing is
   the link's own welcome screen with a working input beside what it would do. */
.studio:not(:has(.pv)) { grid-template-columns: 270px minmax(0, 1fr); }
.stabs { margin: 0 0 14px; background: #e7d7d1; }
/* Labels: the first one leads, so it is the one that looks like a label. */
.rilabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
/* Top bar: the thing being edited, shown as itself. */
.tbprev { display: flex; align-items: center; gap: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-top: 14px; }
.tbav { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--accent) url(./mark.svg) center/58% no-repeat; overflow: hidden; }
.tbav img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tbprev b { display: block; font-size: 17px; }
.tbprev small { display: block; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.labs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.lab { display: inline-flex; align-items: center; gap: 4px; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 5px 7px 5px 13px; font-size: 14px; font-weight: 700; }
.lab.first { box-shadow: inset 0 0 0 1px currentColor; }
.lab .labt { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0 2px 0 0; }
.lab.sel { box-shadow: 0 0 0 2px var(--accent); }
.lab button.stuck { opacity: 0.4; }
.labcols { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.labcols .f { margin: 0 6px 0 0; }
.labsw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid; cursor: pointer; padding: 0; }
.labsw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lc, var(--ink)); }
.lab button:not(.labt) { border: 0; background: none; color: currentColor; opacity: 0.55; font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 50%; line-height: 1; }
.lab button:not(.labt):hover { opacity: 1; background: #fff; }
.labadd { display: flex; gap: 8px; margin-top: 14px; }
.labadd input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 15px; background: #fff; outline: none; }
.labadd input:focus { border-color: var(--accent-line); }
/* Overview: the address itself, and what to do with it, before any settings. */
.ovurl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.ovurl .grow { flex: 1; min-width: 220px; }
.ovurl b { display: block; font-size: 19px; margin-top: 6px; word-break: break-all; }
.ovurl small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 3px; }
.ovurl .acts { margin: 0; flex: 0 0 auto; }
.ovurl a.btn { text-decoration: none; }
.hostx { border: 0; background: none; color: var(--subtle); font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 50%; align-self: center; }
.hostx:hover { background: var(--canvas); color: var(--accent); }
.onceqr { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.onceqr .qbox { width: 150px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.onceqr .qbox svg { width: 100%; height: auto; display: block; }
.onceqr .hint { margin: 0; max-width: 34ch; }
button.chip.link { border: 0; font: inherit; cursor: pointer; }
.stmain, .studio .pv { margin-top: 0; }
/* Testing is the chat itself at the size a browser would give it, not a phone
   held up to the screen: the point is what a visitor on this link gets. */
.tbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.webchat { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; height: min(640px, calc(100vh - 230px)); }
.wcbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 800; color: var(--muted); }
.wcbar b { display: block; font-size: 15.5px; color: var(--ink); }
.wcbar small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.wcav { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--accent) url(./mark.svg) center/100% no-repeat; }
.wcdot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.wclog { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; background: var(--canvas); }
.wclog .bub { font-size: 15px; max-width: 70%; padding: 11px 15px; }
.wcin { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.wcin input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 15px; outline: none; background: var(--canvas); }
.wcin input:focus { border-color: var(--accent-line); background: #fff; }
.stsplit { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.stnav { display: grid; gap: 2px; align-self: start; }
.stnav .ri { padding: 9px 12px; }
.stbody .sec { margin-top: 0; }
.tsim { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.phone.big { width: 100%; max-width: 340px; }
.phone.big .pchat { min-height: 360px; max-height: 460px; overflow-y: auto; }
.bub.me { background: var(--accent); border-color: var(--accent); color: #fff; align-self: flex-end; width: fit-content; border-radius: 16px 16px 4px 16px; }
.pinput { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); background: #fff; }
.pinput input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; outline: none; }
.tsend { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; cursor: pointer; }
@media (max-width: 1100px) { .tsim, .stsplit { grid-template-columns: minmax(0, 1fr); } }
.ri { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 14px; padding: 10px 12px; cursor: pointer; margin-bottom: 4px; }
.ri:hover { background: var(--panel); border-color: var(--line); }
.ri.on { background: var(--panel); border-color: var(--accent-line); box-shadow: 0 6px 18px -12px rgba(138, 36, 51, 0.7); }
.ri b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri small { display: flex; gap: 6px; align-items: center; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
.ri.new { border: 1.5px dashed var(--line); color: var(--muted); font-weight: 800; text-align: center; margin-top: 10px; }
.ri.new:hover { color: var(--accent); border-color: var(--accent-line); }
.sh { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 22px 24px; margin-bottom: 16px; }
.sh-head { display: flex; align-items: flex-start; gap: 12px; }
.sh-head .grow { flex: 1; min-width: 0; }
.sh-head h1 { font-size: 26px; word-break: break-all; }
.sh-head .lbl { color: var(--muted); font-weight: 700; margin-top: 4px; }
.sec { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 20px 24px; margin-bottom: 16px; }
.sec h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.sec h2 .num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 800 13px Lato, system-ui, sans-serif; display: grid; place-items: center; }
.sec .hint { color: var(--muted); font-size: 14px; margin: 4px 0 14px; }
label.f { display: block; font-weight: 800; font-size: 13.5px; margin: 14px 0 6px; }
label.f small { color: var(--subtle); font-weight: 700; margin-left: 6px; }
input[type="text"], textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 600 15px Lato, system-ui, sans-serif; color: var(--ink); background: #fff; resize: vertical; }
input[type="text"]:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.tog { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid #f5efed; }
.tog:first-of-type { border-top: 0; }
.tog .grow { flex: 1; }
.tog b { display: block; font-size: 14.5px; }
.tog small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.sw { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 999px; background: #e3def0; border: 0; cursor: pointer; transition: background 0.15s; margin-top: 2px; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 0.15s; }
.sw.on { background: var(--accent); }
.sw.on::after { left: 21px; }
.note { background: var(--canvas); border-radius: 14px; padding: 12px 14px; color: var(--muted); font-size: 13.5px; }
.tg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.tg .logo { width: 34px; height: 34px; border-radius: 50%; background: #29a9eb; color: #fff; display: grid; place-items: center; font-weight: 800; }
.tg .grow { flex: 1; }
.evlist { display: flex; flex-wrap: wrap; gap: 8px; }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.type { text-align: left; border: 1.5px solid var(--line); background: var(--panel); border-radius: 18px; padding: 16px; cursor: pointer; }
.type:hover { border-color: var(--accent-line); }
.type.on { border-color: var(--accent); background: var(--accent-soft); }
.type b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; margin-bottom: 4px; }
.type span { color: var(--muted); font-size: 13.5px; }
.urlrow { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.urlrow span { padding: 10px 0 10px 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.urlrow input { border: 0; border-radius: 0; padding-left: 2px; }
.urlrow input:focus { outline: 0; }
.urlrow:focus-within { outline: 2px solid var(--accent); border-color: transparent; }

/* phone preview */
.pv { position: sticky; top: 86px; }
.pv .cap { text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.phone { border-radius: 38px; background: var(--ink); padding: 11px; box-shadow: 0 30px 60px -30px rgba(29, 22, 51, 0.5); }
.screen { background: var(--canvas); border-radius: 28px; overflow: hidden; min-height: 540px; display: flex; flex-direction: column; }
.pbar { display: flex; align-items: center; gap: 10px; padding: 14px; background: #fff; border-bottom: 1px solid #eee; }
.pbar .av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft) url(./mark.svg) center/58% no-repeat; flex: 0 0 38px; }
.pbar b { display: block; font-size: 15px; }
.pbar span { display: block; font-size: 12px; color: var(--muted); }
.pchat { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bub { background: #fff; border: 1px solid #eee; border-radius: 16px 16px 16px 4px; padding: 9px 12px; font-size: 14px; max-width: 90%; white-space: pre-wrap; }
.ptypes { display: flex; gap: 6px; flex-wrap: wrap; }
.ptypes span { border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.pin { margin: 0 12px 12px; border: 1px solid #eee; background: #fff; border-radius: 999px; padding: 10px 14px; color: var(--subtle); font-size: 13px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 800; border-radius: 999px; padding: 10px 18px; z-index: 90; font-size: 14px; }

@media (max-width: 1180px) { .studio, .studio:not(:has(.pv)) { grid-template-columns: 240px minmax(0, 1fr); } .pv { display: none; } }
@media (max-width: 760px) {
	.top { padding: 10px 16px; gap: 8px; }
	.top .meter, .top .tbtn .t { display: none; }
	.page { padding: 22px 16px 60px; }
	.hello { flex-direction: column; align-items: flex-start; }
	.studio { grid-template-columns: 1fr; padding: 16px; }
	.rail { position: static; }
	.types { grid-template-columns: 1fr; }
}

/* ---- card pages inside the event drawer ---- */
.rowbtn { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.rowbtn:hover { background: var(--canvas); }
.rowbtn .go { color: var(--subtle); font-size: 18px; }
.rowbtn .v { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { font-size: 24px; line-height: 1; flex: 0 0 36px; }
.cardpage { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.cardpage > .hint:first-child { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.pickrow { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { border: 1.5px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 14px; cursor: pointer; }
.pick:hover { border-color: var(--accent-line); }
.pick.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.say { margin-top: 18px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-weight: 700; }
.say span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.words { margin-top: 14px; }
.words summary { cursor: pointer; color: var(--accent); font-weight: 800; font-size: 14px; }
.words textarea { margin-top: 10px; }
.week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 0 6px; padding-right: 34px; }
.wd { text-align: center; }
.wd span { font-size: 12px; font-weight: 800; color: var(--muted); }
.wcol { position: relative; height: 120px; background: var(--canvas); border-radius: 10px; margin-top: 4px; }
.wcol i { position: absolute; left: 3px; right: 3px; background: var(--accent); border-radius: 6px; opacity: 0.85; }
.wscale { position: absolute; right: 0; top: 22px; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--subtle); font-weight: 700; }
.dayrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f5efed; }
.dayrow b { width: 40px; }
.dayrow select { width: auto; padding: 6px 8px; font-size: 14px; }
.dayrow .off { color: var(--subtle); font-size: 13px; font-weight: 700; }
.gapbar { display: flex; height: 38px; margin-top: 18px; border-radius: 12px; overflow: hidden; }
.gapbar i { background: repeating-linear-gradient(135deg, #f1e8e6 0 6px, #f7f4fc 6px 12px); }
.gapbar b { background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swatch { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 10px; cursor: pointer; font-weight: 700; font-size: 13px; --cal: #8a2433; }
.swatch i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); flex: 0 0 16px; }
.swatch.on { border-color: var(--accent); background: var(--accent-soft); }
.alsobox { margin-top: 14px; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); padding: 14px 16px; }
.alsobox b { display: block; font-size: 14.5px; }
.alsobox small { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.alsolist { display: flex; flex-wrap: wrap; gap: 6px; }
.alsoi { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px 5px 8px; font-size: 13px; font-weight: 800; cursor: pointer; }
.alsoi input { accent-color: var(--accent); margin: 0; }
.alsoi em { font-style: normal; color: var(--subtle); font-weight: 700; }
.alsoi.on { border-color: var(--accent); background: var(--accent-soft); }
.donebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 14px 0 4px; background: linear-gradient(transparent, var(--canvas) 30%); }
@media (max-width: 760px) { .swatches { grid-template-columns: repeat(2, 1fr); } }

/* ---- sidebar shell ---- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
.side { position: sticky; top: 63px; height: calc(100vh - 63px); padding: 18px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.si { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15px; }
.si:hover { background: var(--panel); }
.si.on { background: var(--panel); box-shadow: 0 6px 18px -12px rgba(29, 22, 51, 0.35); color: var(--accent); }
.si .grow { flex: 1; }
.sic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: color-mix(in srgb, var(--m, #b49a9c) 14%, white); }
.badge { min-width: 22px; height: 22px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 6px; }
.sdiv { margin: 18px 11px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--subtle); }
.page.wide { max-width: 1180px; }

/* ---- app pages ---- */
.app2, .app3 { display: grid; gap: 20px; padding: 24px; align-items: start; }
.app2 { grid-template-columns: 360px minmax(0, 1fr); max-width: 1180px; }
.app3 { grid-template-columns: 330px minmax(0, 1fr) 300px; }
.apph { font-size: 30px; }
.appsub { color: var(--muted); font-size: 14px; margin: 4px 0 14px; }
.li { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; border: 1px solid transparent; background: none; border-radius: 16px; padding: 11px 12px; cursor: pointer; margin-bottom: 4px; }
.li:hover { background: var(--panel); border-color: var(--line); }
.li.on { background: var(--panel); border-color: var(--accent-line); box-shadow: 0 6px 18px -12px rgba(138, 36, 51, 0.7); }
.li .grow { flex: 1; min-width: 0; }
.li b { display: block; font-size: 15px; }
.li small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li em { font-style: normal; font-size: 12px; color: var(--subtle); font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.dot { font-style: normal; background: var(--accent); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.okc { color: var(--teal) !important; } .waitc { color: #c47a00 !important; }
.ava { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #f6dcd7; color: var(--accent); display: grid; place-items: center; font-weight: 800; }
.ava.br { background: #f3e7df; color: #9a6b4f; }
.ava.lg { width: 48px; height: 48px; flex-basis: 48px; font-size: 18px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 22px; }
.panel .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.big { font: 600 20px Lato, system-ui, sans-serif; color: var(--accent); }
.who { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 14px; }
.who b { display: block; font-size: 16px; }
.who small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 3px; }
.ok { color: var(--teal); font-weight: 800; }
.quote { background: var(--canvas); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 15px; }
.acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.dayc { position: relative; height: 420px; margin-top: 10px; border-left: 1px solid var(--line); margin-left: 40px; }
.hl { position: absolute; left: -42px; font-size: 11px; color: var(--subtle); font-weight: 700; transform: translateY(-50%); }
.hl::after { content: ""; position: absolute; left: 42px; width: 230px; border-top: 1px dashed #f1e8e6; top: 50%; }
.blk { position: absolute; left: 6px; right: 0; background: #f1e8e6; border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; }
.blk.pen { background: repeating-linear-gradient(135deg, #ffd6e8 0 8px, #ffe7f1 8px 16px); border: 1.5px dashed var(--accent); color: var(--accent); }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fchips button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 11px; font-weight: 800; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.fchips button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chat { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 520px; }
.chead { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chead .grow { min-width: 0; }
.chead b { display: block; font-size: 16px; }
.chead small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; }
.cbody { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: var(--canvas); }
.m { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.m > div { padding: 10px 13px; border-radius: 16px; font-size: 14.5px; }
.m.v { align-self: flex-end; } .m.v > div { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.m.a > div { background: #fff; border: 1px solid #eee; border-bottom-left-radius: 4px; }
.mav { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--accent-soft) url(./mark.svg) center/58% no-repeat; }
.cfoot { padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.goal { padding: 10px 20px; background: #fbf5f1; color: #9a6b4f; font-weight: 800; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.bal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.bal b { display: block; font-size: 13px; }
.bal small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 4px; }
.bal .bar { display: block; height: 6px; border-radius: 3px; background: #f1e8e6; margin-top: 8px; overflow: hidden; }
.bal .bar i { display: block; height: 100%; background: var(--accent); }
.money { font: 600 22px Lato, system-ui, sans-serif; }
.newout { display: flex; gap: 8px; margin-bottom: 14px; }
.emptybig { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 40px 20px; color: var(--muted); }
.emptybig img { width: 180px; }
.emptybig b { font: 600 22px Lato, system-ui, sans-serif; color: var(--ink); }

/* ---- link board ---- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 16px; }
.qc { border: 0; text-align: left; cursor: pointer; border-radius: 26px; padding: 16px; background: linear-gradient(160deg, #c33248, #8a2433); color: #fff; box-shadow: 0 16px 30px -18px rgba(138, 36, 51, 0.9); transition: transform 0.15s; }
.qc:hover { transform: translateY(-3px); }
.qc.tgc { background: linear-gradient(160deg, #4cc2f5, #229ed9); box-shadow: 0 16px 30px -18px rgba(34, 158, 217, 0.9); }
.qtop { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.qtop .grow { flex: 1; min-width: 0; }
.qtop b { display: block; font: 600 17px Lato, system-ui, sans-serif; }
.qtop small { display: block; font-size: 12px; font-weight: 700; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qav { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: #fff url(./mark.svg) center/58% no-repeat; border: 2px solid rgba(255, 255, 255, 0.8); }
.qav.lg { width: 72px; height: 72px; }
.tgic { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.tgb .tgic { width: 20px; height: 20px; }
.tg .logo .tgic { width: 22px; height: 22px; vertical-align: -5px; }
.tgb { font-size: 18px; }
.qbox { background: #fff; border-radius: 18px; padding: 14px; aspect-ratio: 1; }
.qbox svg { width: 100%; height: 100%; display: block; }
.qbox.lg { width: min(340px, 70vw); margin: 18px auto 12px; }
.qurl { font: 600 14px Lato, system-ui, sans-serif; margin-top: 10px; word-break: break-all; }
.qlab { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 700; }
/* Link board cards keep each label's own colours (2026-10-15), border included. */
.qlab .tb { box-shadow: 0 0 0 1.5px currentColor; }
.qlab .tb.nolbl { background: rgba(255, 255, 255, 0.25); color: #fff; box-shadow: none; }
.bigq { position: fixed; inset: 0; z-index: 80; background: linear-gradient(160deg, #c33248, #8a2433); display: grid; place-items: center; color: #fff; cursor: pointer; }
.bigq.tgc { background: linear-gradient(160deg, #4cc2f5, #229ed9); }
.bigin { text-align: center; }
.bigin .qav { margin: 0 auto 8px; display: block; }
.bigin h2 { font-size: 32px; }
.bigin p { margin: 2px 0 0; font-weight: 700; opacity: 0.9; }
.bigin .qurl { font-size: 20px; }
.bigin small { display: block; margin-top: 18px; opacity: 0.8; font-weight: 700; }

@media (max-width: 1400px) { .studio, .studio:not(:has(.pv)) { grid-template-columns: 240px minmax(0, 1fr); } .pv { display: none; } .app3 { grid-template-columns: 300px minmax(0, 1fr); } .app3 .colR { grid-column: 2; } }
@media (max-width: 900px) {
	.shell { grid-template-columns: 1fr; }
	.side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 30; flex-direction: row; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); background: rgba(251, 248, 255, 0.95); backdrop-filter: blur(10px); }
	.side .sdiv, .side .si:nth-last-child(-n + 2) { display: none; }
	.si { flex-direction: column; gap: 2px; padding: 4px 6px; font-size: 11px; position: relative; }
	.si .grow { flex: none; }
	.si .badge { position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; font-size: 10px; }
	#view { padding-bottom: 80px; }
	.app2, .app3 { grid-template-columns: 1fr; padding: 16px; }
	.app3 .colR { grid-column: auto; }
}
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; margin-right: 2px; }
.cdot.lg { width: 14px; height: 14px; flex-basis: 14px; }
.fchips button { display: inline-flex; align-items: center; gap: 5px; }

/* ---- events (week + list) ---- */
.si.sub { margin-left: 18px; font-size: 14px; padding: 7px 10px; }
.si.sub .sic { width: 26px; height: 26px; font-size: 13px; }
.evpage { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 20px 24px; align-items: start; }
.evside { position: sticky; top: 83px; }
.evgrp { margin-top: 20px; }
.evgrp > b { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); margin: 0 4px 6px; }
.evgrp small { display: block; color: var(--muted); font-size: 12px; margin: 8px 4px 0; }
.ck { display: flex; align-items: center; gap: 9px; padding: 6px 4px; font-weight: 700; font-size: 14px; cursor: pointer; }
.ck input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.ck span { display: flex; align-items: center; gap: 7px; }
.mk { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.mk.bgm { background: var(--accent); }
.mk.selfm { background: var(--accent-soft); border: 2px solid var(--accent); }
.evbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.evbar h2 { font-size: 22px; margin-left: 4px; }
.evbar .grow { flex: 1; }
.seg.sm button { padding: 6px 14px; font-size: 13px; }
.gbtn { text-decoration: none; color: var(--ink); font-size: 14px; }
.wk { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.wkhead { display: grid; grid-template-columns: 56px repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.wkhead > div { text-align: center; padding: 10px 0 8px; }
.wkhead small { display: block; font-size: 11px; font-weight: 800; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.05em; }
.wkhead b { font: 600 22px Lato, system-ui, sans-serif; }
.wkhead .today b { background: var(--accent); color: #fff; border-radius: 50%; width: 38px; height: 38px; display: inline-grid; place-items: center; }
.wkbody { position: relative; display: grid; grid-template-columns: 56px repeat(7, 1fr); height: 700px; }
.wkhours { position: relative; }
.wkhours span { position: absolute; right: 8px; font-size: 11px; color: var(--subtle); font-weight: 700; transform: translateY(-50%); }
.wkcol { position: relative; border-left: 1px solid #f3ece9; background-image: repeating-linear-gradient(#f5f2fa 0 1px, transparent 1px 50px); }
.wkcol.today { background-color: #fffafd; }
.now { position: absolute; left: 0; right: 0; border-top: 2px solid #e11d48; z-index: 3; }
.now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #e11d48; }
.evb { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 3px 6px; text-align: left; overflow: hidden; cursor: pointer; font: inherit; z-index: 1; border: 0; }
.evb b { display: block; font-size: 12px; line-height: 1.25; }
.evb small { display: block; font-size: 11px; font-weight: 700; opacity: 0.85; }
.evb.bg { background: var(--c); color: #fff; }
.evb.self { background: var(--cs); color: var(--ink); border-left: 3px solid var(--c); }
.evb.pend { background: repeating-linear-gradient(135deg, var(--cs) 0 7px, #fff 7px 14px); color: var(--c); border: 1.5px dashed var(--c); }
.evb.past { opacity: 0.5; }
.evb:hover { filter: brightness(1.05); z-index: 2; box-shadow: 0 6px 14px -6px rgba(29, 22, 51, 0.4); }
.bgdot { float: right; width: 14px; height: 14px; border-radius: 50%; background: #fff url(./mark.svg) center/58% no-repeat; margin: 1px 0 0 4px; }
.evlist { display: flex; flex-direction: column; gap: 14px; }
.evday { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.evdh { padding: 10px 16px; font-weight: 800; font-size: 13px; color: var(--muted); background: var(--canvas); border-bottom: 1px solid var(--line); }
.evdh.today { color: var(--accent); }
.evrow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-top: 1px solid #f5efed; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.evrow:first-of-type { border-top: 0; }
.evrow:hover { background: var(--canvas); }
.evrow .t { width: 96px; flex: 0 0 96px; font-weight: 800; font-size: 13px; color: var(--muted); }
.evrow .grow { flex: 1; min-width: 0; }
.evrow b { display: block; font-size: 15px; }
.evrow small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.evrow.past { opacity: 0.6; }
.kv { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid #f5efed; font-size: 14px; }
.kv:first-child, .row:first-child, .card:first-child, .tog:first-child, .hrow:first-child, .dayrow:first-child, .evrow:first-child { border-top: 0; }
.kv span:first-child { width: 90px; flex: 0 0 90px; color: var(--muted); font-weight: 700; }
@media (max-width: 900px) {
	.evpage { grid-template-columns: 1fr; padding: 16px; }
	.evside { position: static; }
	.si.sub { margin-left: 0; }
	.wkbody { height: 560px; }
	.evb small { display: none; }
}
.kv b { flex: 1; min-width: 0; display: block; }

/* ---- library, full screen ---- */
.libpage { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding: 24px; max-width: 1280px; align-items: start; }
.shelfnav { position: sticky; top: 83px; }
.shelfi { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid transparent; background: none; border-radius: 12px; padding: 9px 12px; cursor: pointer; font-weight: 800; font-size: 14.5px; margin-bottom: 2px; }
.shelfi:hover { background: var(--panel); border-color: var(--line); }
.shelfi.on { background: var(--panel); border-color: var(--accent-line); color: var(--accent); box-shadow: 0 6px 18px -12px rgba(138, 36, 51, 0.7); }
.shelfi .grow { flex: 1; }
.shelfi em { font-style: normal; font-size: 12px; color: var(--subtle); }
.shelfmain .hello { margin-bottom: 18px; }
.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: stretch; }
.libgrid .lk { margin: 0; display: flex; flex-direction: column; }
.libgrid .lk .foot { margin-top: auto; padding-top: 10px; }
.addcard { border: 1.5px dashed var(--line); background: none; color: var(--muted); font-weight: 800; cursor: pointer; min-height: 120px; justify-content: center; align-items: center; font-size: 15px; }
.addcard:hover { border-color: var(--accent-line); color: var(--accent); }
@media (max-width: 900px) {
	.libpage { grid-template-columns: 1fr; padding: 16px; }
	.shelfnav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
	.shelfnav h1, .shelfnav p { width: 100%; }
	.shelfi { width: auto; border-color: var(--line); background: var(--panel); padding: 6px 12px; font-size: 13px; }
}
.pick.icon { font-size: 18px; padding: 6px 10px; }

/* ---- settings ---- */
.setg { margin: 22px 4px 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.setc { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.setc:hover { border-color: var(--accent-line); }
.setc .grow { flex: 1; min-width: 0; }
.setc b { display: block; font-size: 15px; }
.setc small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.setc .go { color: var(--subtle); font-size: 18px; }
.sic.lg { width: 40px; height: 40px; font-size: 19px; border-radius: 12px; background: var(--canvas); }
.backlink { display: inline-block; margin-bottom: 12px; font-weight: 800; text-decoration: none; }
.usebig { display: flex; align-items: baseline; gap: 12px; }
.usebig b { font: 600 44px Lato, system-ui, sans-serif; color: var(--accent); }
.usebig span { color: var(--muted); font-weight: 700; }
.lgbar { display: block; height: 10px; border-radius: 5px; background: #f1e8e6; overflow: hidden; margin: 10px 0 18px; }
.lgbar i { display: block; height: 100%; background: var(--accent); }
.hrs { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
.hrs i { flex: 1; background: #eaddda; border-radius: 4px 4px 0 0; min-height: 2px; }
.hrsx { display: flex; justify-content: space-between; font-size: 11px; color: var(--subtle); font-weight: 700; margin-top: 4px; }

/* ---- inbound, on the real app's model ---- */
.inb { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 20px; padding: 24px; align-items: start; max-width: 1300px; }
.trow { width: 100%; display: block; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 18px; padding: 12px; cursor: pointer; margin-bottom: 8px; font: inherit; color: inherit; }
.trow:hover { border-color: var(--accent-line); }
.trow.on { border-color: var(--accent); box-shadow: 0 8px 20px -14px rgba(138, 36, 51, 0.8); }
.ttop { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.ttop .grow { flex: 1; }
.livec { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); }
.livec i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px #d5f5ec; }
.whenc { color: var(--subtle); }
.doors { display: inline-flex; gap: 3px; }
.dl { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; }
.dl.tgl { background: #229ed9; }
.tcards { display: flex; flex-direction: column; gap: 6px; }
.vcard { display: flex; align-items: center; gap: 10px; background: var(--canvas); border-radius: 12px; padding: 7px 9px; min-width: 0; }
.vcard .grow { flex: 1; min-width: 0; }
.vcard b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard.big { cursor: pointer; background: var(--panel); border: 1px solid var(--line); flex: 0 1 auto; max-width: 260px; }
.vcard.big:hover { border-color: var(--accent-line); }
.face { position: relative; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; }
.face.slate { background: #b49a9c; }
.face.door { background: #fff; border: 1px solid var(--line); display: flex; gap: 1px; justify-content: center; }
.face.tgf { background: #9dd6f2; color: #0b5c86; }
.face .corner { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; font-size: 8px; border: 2px solid #fff; }
.face.lkf { background: var(--accent-soft) url(./mark.svg) center/58% no-repeat; }
.tlast { margin-top: 8px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlast small { display: block; font-size: 11px; color: var(--subtle); font-weight: 800; }
.room { min-height: 620px; position: relative; }
.rhead { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rhead .grow { flex: 1; }
.nomsg { font-size: 12px; color: var(--teal); font-weight: 800; }
.m > div em { display: block; font-style: normal; font-size: 11px; font-weight: 800; opacity: 0.6; margin-bottom: 2px; }
.m.o { align-self: flex-start; } .m.o > div { background: #fff4d6; border: 1px solid #f6d77a; border-bottom-left-radius: 4px; }
.tdiv { text-align: center; font-size: 12px; font-weight: 800; color: var(--subtle); margin: 6px 0; }
.tdiv span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.composer { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.composer input { flex: 1; }
.composer input[readonly] { cursor: pointer; background: var(--canvas); }
.jbtn { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 18px; }
.jbtn.on { background: var(--ink); color: #fff; font-size: 15px; }
.sheet { position: absolute; inset: 0; background: rgba(29, 22, 51, 0.25); display: grid; place-items: end center; border-radius: 24px; padding: 14px; }
.sheetin { width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 20px 40px -20px rgba(29, 22, 51, 0.5); }
.sheetin > b { display: block; font: 600 18px Lato, system-ui, sans-serif; margin-bottom: 4px; }
.sheetin .opt { width: 100%; text-align: left; font: inherit; }
.sheetin .opt.cold { opacity: 0.7; }
@media (max-width: 900px) { .inb { grid-template-columns: 1fr; padding: 16px; } .vcard.big { max-width: none; flex: 1 1 100%; } }

/* our own 3D event icons */
/* Maroon line icons on a white ground rather than the pink 3D set this mock
   was forked with. multiply drops the white into whatever tint the tile has,
   so one file works on the soft calendar colours and on plain panels. */
.eic { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.32em; display: inline-block; mix-blend-mode: multiply; }
.ev .ic .eic { width: 34px; height: 34px; }
.dh h2 .eic { width: 34px; height: 34px; vertical-align: -6px; margin-right: 2px; }
.pick.icon { padding: 4px; width: 46px; height: 46px; display: inline-grid; place-items: center; }
.pick.icon .eic { width: 34px; height: 34px; }
.pick.icon.on { background: var(--accent-soft); border-color: var(--accent); }
.chip .eic { width: 16px; height: 16px; vertical-align: -3px; }
.ev .ic { width: 50px; height: 50px; flex-basis: 50px; border-radius: 16px; }
.ev .ic .eic { width: 44px; height: 44px; }

/* Duration: the deployed drawer's enter-in number boxes */
.dufields { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; min-height: 42px; }
.dufields.sug { padding-top: 14px; border-top: 1px solid #f5efed; }
.duf { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.duf em { font-style: normal; color: var(--muted); font-weight: 700; }
.duf.dim .enin input { opacity: 0.45; }
.enin { display: inline-flex; align-items: center; gap: 6px; }
.enin input[type="text"] { width: 66px; text-align: center; padding: 8px 6px; background: var(--canvas); border-color: transparent; }
.enin input[type="text"]:focus { background: #fff; }
.enin input::placeholder { color: var(--subtle); }
.enin .was { font-style: normal; font-size: 12px; color: var(--subtle); font-weight: 700; }
.dusay { color: var(--muted); font-size: 13.5px; font-weight: 700; }

/* new link wizard */
.wz { max-width: 620px; margin: 10px auto 0; background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 26px 28px 22px; }
.wzdots { display: flex; gap: 6px; margin-bottom: 18px; }
.wzdots i { flex: 1; height: 5px; border-radius: 3px; background: #f1e8e6; }
.wzdots i.on { background: var(--accent); }
.wzq { font-size: 30px; margin: 4px 0 18px; }
.wzbody { display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.wzopt { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 18px; padding: 15px 16px; cursor: pointer; font: inherit; color: inherit; }
.wzopt:hover { border-color: var(--accent-line); }
.wzopt.on { border-color: var(--accent); background: var(--accent-soft); }
.wzopt b { display: block; font-size: 16px; }
.wzopt b em { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.wzopt span { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
/* The address a kind would get: shown, not described, so it reads under the name
   rather than as another pill. */
.wzopt b i { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 3px; }
.wzhint { color: var(--muted); font-size: 13.5px; margin: 2px 2px 0; }
.wzhint.bad { color: #e11d48; font-weight: 700; }
.wznav { display: flex; justify-content: space-between; margin-top: 22px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.sendbox { border-color: var(--accent-line); background: linear-gradient(180deg, #fff 0%, #fff5fa 100%); }
.opt .cfg { padding: 4px 0; font-size: 13px; white-space: nowrap; }

/* ---- availability (merged) ---- */
.avtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.avtab { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; font-weight: 800; font-size: 14px; background: #fff; }
.avtab.on { border-color: var(--accent); background: var(--accent-soft); }
.sw.sm { width: 34px; height: 20px; flex-basis: 34px; margin: 0; }
.sw.sm::after { width: 14px; height: 14px; }
.sw.sm.on::after { left: 17px; }
.avbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; color: var(--muted); }
.avbar .grow { flex: 1; }
.avbar .ibtn { width: 32px; height: 32px; }
.avbar .ibtn:disabled { opacity: 0.35; }
.soft.sm { padding: 6px 12px; font-size: 13px; }
.avoff { background: #fff8eb; border: 1px solid #fde2b0; color: #92600a; border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.avdim { opacity: 0.55; }
.avcal { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; user-select: none; }
.avhead { display: grid; grid-template-columns: 38px repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.avhead > div { text-align: center; padding: 6px 0 5px; }
.avhead b { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.avhead i { display: block; font-style: normal; font-size: 12.5px; font-weight: 800; }
.avhead .today b, .avhead .today i { color: var(--accent); }
.avbody { display: grid; grid-template-columns: 38px repeat(7, 1fr); height: 480px; }
.avgut span { display: block; height: 20px; font-size: 8.5px; color: var(--subtle); text-align: right; padding-right: 5px; line-height: 1; transform: translateY(-4px); }
.avcol { position: relative; border-left: 1px solid #f3ece9; background-image: repeating-linear-gradient(transparent 0 19px, #f8f3f1 19px 20px); cursor: crosshair; touch-action: none; }
.avcol.today { background-color: #fff6fa; }
.avcol.past { background: repeating-linear-gradient(135deg, #f7f5fb 0 6px, #fff 6px 12px); cursor: not-allowed; }
.avwin { position: absolute; left: 2px; right: 2px; border: 1px solid #8a243380; background: #8a243326; border-radius: 6px; color: #c2185b; font-size: 9px; font-weight: 800; padding: 1px 3px; overflow: hidden; cursor: grab; z-index: 2; }
.avwin:hover { border-color: var(--accent); }
.avwin b { display: block; }
.avwin em { display: none; position: absolute; bottom: 1px; left: 3px; font-style: normal; }
.avwin.tall em { display: block; }
.avwin .g { position: absolute; left: 0; right: 0; height: 32%; max-height: 6px; cursor: ns-resize; }
.avwin .gt { top: 0; } .avwin .gb { bottom: 0; }
.avwin.inh { background: repeating-linear-gradient(135deg, #f3effa 0 5px, #faf8fd 5px 10px); border: 1px dashed #d9d2ea; color: var(--subtle); cursor: crosshair; z-index: 1; pointer-events: none; }
.avwin.doomed { border: 1px dashed #b91c1c; background: #b91c1c14; color: #b91c1c; }
.avghost { position: absolute; left: 2px; right: 2px; background: #8a243340; border-radius: 6px; color: #c2185b; font-size: 9px; font-weight: 800; padding: 1px 3px; z-index: 3; pointer-events: none; }
body[data-avdrag="paint"], body[data-avdrag="paint"] * { cursor: crosshair !important; }
body[data-avdrag="move"], body[data-avdrag="move"] * { cursor: grabbing !important; }
body[data-avdrag="top"], body[data-avdrag="top"] *, body[data-avdrag="bot"], body[data-avdrag="bot"] * { cursor: ns-resize !important; }
body[data-avdrag] { user-select: none; }
.avside { background: var(--canvas); border-radius: 16px; padding: 12px; }
.avside h3 { font-size: 17px; }
.tplc { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; margin-top: 8px; }
.tplc.on { border-color: var(--accent); }
.tplh { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; }
.tplh .btn.sm { padding: 5px 10px; font-size: 12px; }
.week.mini { margin: 8px 0 0; padding-right: 0; gap: 4px; }
.week.mini .wcol { height: 64px; }
.tplsave { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* ---- sidebar: menu or Bubblegum ---- */
.side { min-width: 0; }
.shell.with-agent { grid-template-columns: 340px minmax(0, 1fr); }
.sideswitch { display: flex; background: #f1edf8; border-radius: 999px; padding: 3px; gap: 3px; margin-bottom: 12px; }
.sideswitch button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 7px 8px; font-weight: 800; font-size: 13px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sideswitch button.on { background: #fff; color: var(--accent); box-shadow: 0 2px 6px -2px rgba(29, 22, 51, 0.2); }
.agdot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); display: inline-block; }
div.agent { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.aghead { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.aghead b { display: block; font: 600 18px Lato, system-ui, sans-serif; }
.aghead small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.agav { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft) url(./mark.svg) center/58% no-repeat; flex: 0 0 44px; box-shadow: 0 6px 14px -8px rgba(138, 36, 51, 0.8); }
.aglog { flex: 1; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.agm { display: flex; }
.agm > div { max-width: 92%; padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.agm.a > div { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.agm.u { justify-content: flex-end; }
.agm.u > div { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.agacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-line); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 50% { background: var(--accent); } }
.agsug { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.agsug button { border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 6px 11px; font-weight: 800; font-size: 12.5px; cursor: pointer; text-align: left; }
.agin { display: flex; gap: 6px; padding-top: 6px; }
.agin input { flex: 1; min-width: 0; }
@media (max-width: 900px) { .sideswitch { display: none; } }

/* Bubblegum stays close to the menu's width so the page stays in view, and the sidebar sits
   above a drawer's backdrop so it can switch (or be used) while a drawer is open. */
.shell.with-agent { grid-template-columns: 272px minmax(0, 1fr); }
.side { z-index: 45; background: var(--canvas); }
.agm > div { font-size: 13.5px; padding: 8px 11px; }
.aghead small { font-size: 11.5px; }
.agsug button { font-size: 12px; padding: 5px 10px; }
.drawer { z-index: 50; }

/* A panel attached to the drawer's left edge. The two must read as ONE plane
   (2026-10-02): they used to animate separately — 40px at 0.22s against 30px
   at 0.2s, from different opacities — so a gap opened between them and closed
   as they settled. Same keyframes, same duration, same easing now, and the
   same background, so they arrive as one surface with a hairline between. */
.drawerx { position: fixed; top: 0; bottom: 0; right: min(560px, 100vw); width: 300px; background: var(--canvas); border-right: 1px solid var(--line); z-index: 50; overflow-y: auto; padding: 18px 16px 30px; box-shadow: -30px 0 60px -30px rgba(29, 22, 51, 0.4); animation: slide 0.22s ease-out; }
/* Only the leftmost panel casts a shadow: the drawer's would otherwise fall
   across the panel beside it and draw a seam down the middle of the plane. */
#drawer:has(+ #drawerx:not([hidden])) { box-shadow: none; }
#drawer[hidden] ~ #drawerx { display: none; }
.drawerx .avside { background: none; padding: 0; }
.drawerx .xclose { float: right; width: 32px; height: 32px; font-size: 15px; }
/* Full screen (2026-10-04): the card list keeps its own column in the drawerx
   panel, the card takes the other, and the sidebar is AI help. Together they
   fill everything right of the sidebar, so the window is the event type.
   Everything below --sidew is the two columns' to share. */
.drawerx:has(.odwide) { padding: 0; }
.odwide .dh { padding: 20px 22px 14px; align-items: center; }
.odwide .db { padding-bottom: 30px; }
body.fullcard .drawer { width: calc((100vw - var(--sidew)) / 2); box-shadow: none; }
body.fullcard .drawerx { right: calc((100vw - var(--sidew)) / 2); width: calc((100vw - var(--sidew)) / 2); }
body.fullcard .scrim { background: none; }
/* Nothing is floating over anything in full screen, so the drawers drop their
   shadows. AI help is told apart by its ground instead: a half-step darker than
   the canvas. */
body.fullcard .drawerx { box-shadow: none; }
body.fullcard .side { background: #f4ebe7; padding: 0; }
/* In full screen AI help is not one of two modes, it is the left column, so the
   switcher goes and its header lines up with the drawers' own: same floor
   height, same rule under it. */
body.fullcard .sideswitch { display: none; }
body.fullcard .dh, body.fullcard .aghead { min-height: 96px; box-sizing: border-box; }
body.fullcard .aghead { padding: 20px 20px 14px; margin: 0; }
body.fullcard .sidebody > .agent > :not(.aghead) { padding-left: 14px; padding-right: 14px; }
/* The compact rate picker, borrowed from the landing page. */
.ratec { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; margin-top: 14px; }
.ratec-top { display: flex; align-items: center; gap: 12px; }
.ratec-top span { flex: 1; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.35; }
.ratec-top b { font-size: 26px; font-weight: 900; color: var(--accent); }
.rslide { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 14px 0 0; border-radius: 999px; background: var(--line); cursor: pointer; }
.rslide::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(29, 22, 51, 0.3); }
.rslide::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); }
.ratec-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; background: var(--canvas); border-radius: 12px; overflow: hidden; }
.ratec-grid div { padding: 9px 4px 10px; text-align: center; }
.ratec-grid div + div { border-left: 1px solid var(--line); }
.ratec-grid span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ratec-grid b { font-size: 16px; font-weight: 900; }
.ratec-grid small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.ratec-grid b.none { font-size: 14px; color: var(--subtle); }
/* The wallet's asset switch, top right of the page header. */
.wseg { flex: 0 0 auto; align-self: center; }
.wseg button { min-width: 64px; }
.roseic { width: 19px; height: 19px; display: block; margin: 0 auto; }
.wusdc.bud { background: #fdf5f4; color: var(--accent); }
.opt.off { opacity: 0.45; cursor: default; }
.opt.off:hover { border-color: var(--line); }
.rowbtn.lit { background: var(--accent-soft); }
.rowbtn.lit .grow { color: var(--accent); font-weight: 700; }
.close.widen { padding: 0; display: flex; align-items: center; justify-content: center; }
.fsic { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .drawerx { right: 0; width: 100vw; z-index: 55; } }

/* Full-height sidebar: it runs from the top of the window to the bottom, with the logo at its
   top; the top bar and the page sit to its right. */
:root { --sidew: 232px; }
body.with-agent { --sidew: 360px; }
body { padding-left: var(--sidew); }
.shell, .shell.with-agent { display: block; }
.side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidew); height: auto; padding-top: 16px; border-right: 1px solid var(--line); }
.sidemark { display: block; padding: 2px 10px 12px; }
.top > .mark, .top .crumbs .sep:first-child { display: none; }
@media (max-width: 900px) {
	body { padding-left: 0; }
	.side { top: auto; width: auto; right: 0; padding-top: 6px; border-right: 0; }
	.sidemark { display: none; }
	.top > .mark, .top .crumbs .sep:first-child { display: initial; }
}

/* Bubblegum's message box: grows upward with what you type, then scrolls */
.agbox { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 12px 14px 8px; box-shadow: 0 8px 24px -18px rgba(29, 22, 51, 0.35); margin-top: 6px; }
.agbox:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.agbox textarea { display: block; width: 100%; border: 0; padding: 0; outline: 0; resize: none; background: none; font: 500 15px/1.45 Lato, system-ui, sans-serif; color: var(--ink); max-height: 220px; overflow-y: hidden; }
.agbox textarea:focus { outline: 0; }
.agrow { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.agplus { width: 32px; height: 32px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; border-radius: 50%; }
.agplus:hover, .agsendbtn:hover { background: var(--canvas); }
.agsendbtn { width: 34px; height: 34px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 50%; display: grid; place-items: center; }

/* Smooth Menu <-> Bubblegum: the width eases, the switch's thumb slides, the new content fades in. */
@property --sidew { syntax: '<length>'; inherits: true; initial-value: 232px; }
body { transition: --sidew 0.32s cubic-bezier(0.22, 0.8, 0.3, 1); }
.sideswitch { position: relative; }
.sideswitch::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4.5px); background: #fff; border-radius: 999px; box-shadow: 0 2px 6px -2px rgba(29, 22, 51, 0.2); transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1); }
.sideswitch.on-agent::before { transform: translateX(calc(100% + 3px)); }
.sideswitch button { position: relative; z-index: 1; transition: color 0.2s; }
.sideswitch button.on { background: none; box-shadow: none; }
.sidebody { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; }
.sidebody.swapin { animation: sidein 0.32s cubic-bezier(0.22, 0.8, 0.3, 1); }
@keyframes sidein { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) { body, .sideswitch::before { transition: none; } .sidebody.swapin { animation: none; } }

/* Pop-up for the new-link wizard, over the drawer */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(29, 22, 51, 0.35); display: grid; place-items: center; padding: 16px; }
.modalbox { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; animation: pop 0.2s ease-out; }
.modalbox .wz { margin: 0; box-shadow: 0 30px 60px -30px rgba(29, 22, 51, 0.6); }
@keyframes pop { from { transform: translateY(10px) scale(0.98); opacity: 0; } }

/* Inbound contact list: avatar (with the most recent way in as an inset), name or email */
.crow { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid transparent; background: none; border-radius: 16px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; margin-bottom: 2px; }
.crow:hover { background: var(--panel); border-color: var(--line); }
.crow.on { background: var(--panel); border-color: var(--accent-line); box-shadow: 0 6px 18px -12px rgba(138, 36, 51, 0.7); }
.crow .grow { flex: 1; min-width: 0; }
.crow b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cav { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: #b49a9c; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.cvia { position: absolute; right: -3px; bottom: -3px; border-radius: 50%; border: 2px solid var(--canvas); line-height: 0; }
.cvia .dl { width: 18px; height: 18px; font-size: 10px; }
.cwhen { font-size: 12px; font-weight: 700; color: var(--subtle); white-space: nowrap; align-self: flex-start; margin-top: 3px; }
.cwhen .livec { font-weight: 800; }

/* Inbound fills the window under the top bar: the contacts and the conversation scroll on their
   own, and in the conversation only the messages scroll (header on top, reply box at the bottom). */
@media (min-width: 901px) {
	.inb { height: calc(100vh - 63px); overflow: hidden; align-items: stretch; padding-bottom: 20px; }
	.inbL { min-height: 0; overflow-y: auto; padding-right: 4px; }
	.inbR { min-height: 0; display: flex; }
	.inbR > .room { flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column; }
	.room .rhead, .room .composer { flex: 0 0 auto; }
	.room .cbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* No top bar on desktop: sections run the full height. Free AI and the owner sit at the bottom of
   the menu; Settings is in the menu itself. Phones keep the top bar. */
.sidefoot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 4px 4px; border-top: 1px solid var(--line); }
.sidefoot .meter { flex: 1; text-decoration: none; padding: 6px 10px; }
.sidefoot .me { width: 34px; height: 34px; flex: 0 0 34px; }
@media (min-width: 901px) {
	.top { display: none; }
	.rail, .pv { top: 20px; }
	.evside, .shelfnav { top: 20px; }
	.inb { height: 100vh; padding-top: 24px; }
}
@media (max-width: 900px) { .sidefoot { display: none; } }
.sidefoot .meter { white-space: nowrap; gap: 6px; min-width: 0; }
.sidefoot .meter .bar { flex: 1; width: auto; min-width: 24px; }
.vcard.lastvia { max-width: 380px; }
.vcard.big em { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.kv span.face { flex: 0 0 36px; width: 36px; height: 36px; }

/* ---- approvals, on the deployed Pending model ---- */
.ap3 { display: grid; grid-template-columns: 340px minmax(0, 1fr) 360px; gap: 18px; padding: 24px; align-items: start; }
@media (min-width: 901px) {
	.ap3 { height: 100vh; overflow: hidden; align-items: stretch; }
	/* Still scrolls; the bar is hidden because it ate into the rows. */
	.apL { min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: none; }
	.apL::-webkit-scrollbar { display: none; }
	.apM, .apR { min-height: 0; display: flex; flex-direction: column; }
	.apdetail { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
	.apbody { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
	.apcal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
	.apgrid { flex: 1; min-height: 360px; }
}
@media (max-width: 1250px) { .ap3 { grid-template-columns: 300px minmax(0, 1fr); } .apR { display: none; } }
@media (max-width: 900px) { .ap3 { grid-template-columns: 1fr; padding: 16px; } }
.aphead { display: flex; align-items: center; gap: 8px; }
.aphead .grow { flex: 1; }
.apgrp { display: flex; align-items: center; gap: 6px; margin: 14px 4px 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.apgrp.red { color: #e11d48; }
.apgrp em { font-style: normal; background: currentColor; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.apgrp em { color: #fff; background: var(--subtle); } .apgrp.red em { background: #e11d48; }
.aprow { width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left; border: 1px solid transparent; background: none; border-radius: 16px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; margin-bottom: 4px; }
.aprow:hover { background: var(--panel); border-color: var(--line); }
.aprow.on { background: var(--panel); border-color: var(--accent-line); box-shadow: 0 6px 18px -12px rgba(138, 36, 51, 0.7); }
.aprow .grow { flex: 1; min-width: 0; }
.aprow b { display: block; font-size: 15px; }
.aprow small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apfoot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hpill { font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; background: #fff8eb; color: #b45309; border: 1px solid #fde2b0; white-space: nowrap; }
.hpill.red { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.hpill.blue { background: #eef6ff; color: #2563eb; border-color: #cfe1fb; }
.kchip { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 8px; background: #f3efff; color: var(--violet); white-space: nowrap; }
.kbanner { background: #f3efff; color: #5b3fd6; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 700; margin-bottom: 12px; }
.aph3 { font-size: 16px; margin: 16px 0 6px; }
.aptable .kv span:first-child { width: 130px; flex-basis: 130px; }
.aptable .kv b { font-weight: 700; }
.aptable .kv small { color: var(--muted); font-weight: 600; }
.aplinks { display: flex; gap: 14px; margin-top: 8px; }
.aplinks a { text-decoration: none; }
.apbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
.apbar .grow { flex: 1; }
.apcalbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.apcalbar .grow { flex: 1; }
.apcalhead { display: flex; margin-left: 40px; }
.apcalhead div { flex: 1; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); padding: 4px 0; }
.apcalhead .today { color: var(--accent); }
.apgrid { position: relative; display: flex; height: 560px; }
.aphrs { position: relative; width: 40px; flex: 0 0 40px; }
.aphrs span { position: absolute; right: 6px; font-size: 10px; color: var(--subtle); font-weight: 700; transform: translateY(-50%); }
.apcol { position: relative; flex: 1; border-left: 1px solid #f3ece9; background-image: repeating-linear-gradient(#f8f3f1 0 1px, transparent 1px 7.142857%); }
.cblk { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 3px 6px; font-size: 11px; font-weight: 700; overflow: hidden; line-height: 1.25; }
.cblk.bg { background: var(--c); color: #fff; }
.cblk.self { background: var(--cs); border-left: 3px solid var(--c); color: var(--ink); }
.cblk.held { background: repeating-linear-gradient(135deg, #fff4d6 0 7px, #fffaf0 7px 14px); border: 1.5px dashed #f59e0b; color: #92400e; }
.cblk.from { background: #f8f6fb; border: 1.5px dashed #c8c2d6; color: var(--subtle); text-decoration: line-through; }
.cblk.sel { border-width: 2.5px; border-style: solid; z-index: 2; box-shadow: 0 6px 14px -8px rgba(146, 64, 14, 0.5); }
.cblk.from.sel { border-style: dashed; border-color: #9a8fb4; }
.cblk i { display: block; font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; }
.dchip { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.dchip.ok { background: #e9fbf6; color: var(--teal); } .dchip.no { background: #fff1f2; color: #e11d48; }
.ap3 { grid-template-columns: 290px minmax(400px, 1fr) 290px; }
@media (max-width: 1280px) { .ap3 { grid-template-columns: 280px minmax(0, 1fr); } }
.apdetail .rhead { flex-wrap: wrap; }
.hrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #f5efed; }
.hrow:first-child { border-top: 0; }
.hrow .grow { flex: 1; min-width: 0; }
.hrow b { display: block; font-size: 14.5px; }
.hrow small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }

/* Approvals: list + one detail panel; Event details and Calendar share it behind a switch */
.ap3 { grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); }
@media (max-width: 1280px) { .ap3 { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-width: 900px) { .ap3 { grid-template-columns: 1fr; } }
.ap3 .apM { max-width: 760px; }
.aptabs { margin: 4px 0 14px; max-width: 320px; }
.apcal .apgrid { height: 560px; }
.vcard.lastvia[data-aparr] { cursor: pointer; } .vcard.lastvia[data-aparr]:hover { border-color: var(--accent-line); }

/* ---- outbound, on the deployed model ---- */
.out3 { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 18px; padding: 24px; align-items: start; }
@media (min-width: 901px) {
	.out3 { height: 100vh; overflow: hidden; align-items: stretch; }
	.outL { min-height: 0; overflow-y: auto; padding-right: 4px; }
	.outM { min-height: 0; display: flex; }
	.outM > .oroom { flex: 1; min-height: 0; display: flex; flex-direction: column; }
	.oroom .cbody { flex: 1; min-height: 0; overflow-y: auto; }
	.outR { min-height: 0; overflow-y: auto; }
}
@media (max-width: 1280px) { .out3 { grid-template-columns: 280px minmax(0, 1fr); } .outR { display: none; } }
@media (max-width: 900px) { .out3 { grid-template-columns: 1fr; padding: 16px; } }
.aschip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; margin: 2px 0 10px; }
.aschip b { color: var(--ink); }
.oface { background: #fff4ec; font-size: 20px; }
.opills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lpill, .aspill { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.lpill.live { background: #e9fbf6; color: var(--teal); }
.lpill.session { background: #eef6ff; color: #2563eb; }
.lpill.spent, .lpill.expired { background: #f3f1f7; color: var(--subtle); }
.lpill.blocked { background: #fff1f2; color: #e11d48; }
.lpill.agreed { background: var(--accent-soft); color: var(--accent); }
.aspill { background: #f3efff; color: var(--violet); }
.lkchip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; white-space: nowrap; }
.goal span { font-weight: 700; color: #b08b74; }
.otabs { margin: 10px 16px 0; }
.ostream { padding-top: 14px; }
.om { display: flex; gap: 8px; align-items: flex-end; max-width: 82%; }
.om > div { padding: 9px 12px; border-radius: 16px; font-size: 14.5px; }
.om > div em { display: block; font-style: normal; font-size: 11px; font-weight: 800; opacity: 0.65; margin-bottom: 2px; }
.om.you { align-self: flex-end; } .om.you > div { background: #ecebf1; border-bottom-right-radius: 4px; }
.om.mine > div { background: #fff; border: 1px solid var(--accent-line); border-bottom-left-radius: 4px; }
.om.theirs { align-self: flex-end; flex-direction: row-reverse; } .om.theirs > div { background: #e7f7f2; border: 1px solid #c4ecdf; border-bottom-right-radius: 4px; }
.oav { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #fff4ec; display: grid; place-items: center; font-size: 15px; }
.oslots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.oslot { border: 1px solid var(--accent-line); background: #fff; color: var(--accent); border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 12px; cursor: pointer; }
.oslot.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.osys { align-self: center; font-size: 12px; font-weight: 800; color: var(--teal); background: #e9fbf6; border-radius: 999px; padding: 4px 12px; }
.oagreed { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--accent); border-radius: 18px; padding: 12px 18px; text-align: center; }
.oagreed b { font: 600 16px Lato, system-ui, sans-serif; color: var(--accent); }
.oagreed span { font-size: 13px; color: var(--muted); }
.odead { padding: 14px 16px; border-top: 1px solid var(--line); background: #fffaf3; display: flex; flex-direction: column; gap: 8px; }
.odead b { font-size: 14px; }
.odead div { display: flex; gap: 8px; }
.otpl { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.otpl button { border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 5px 10px; font-weight: 800; font-size: 12px; cursor: pointer; }
.odiaryp .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.odiary { height: 380px; }

/* Outbound: two columns, the diary in a right-hand drawer */
.out3 { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 1280px) { .out3 { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-width: 900px) { .out3 { grid-template-columns: 1fr; } }
.odiarybtn { flex: 0 0 38px; margin-left: 4px; }
.drawer .odiaryp { padding: 16px; }
.drawer .odiary { height: 460px; }
/* bubbles never run past the edge */
.ostream { overflow-x: hidden; }
.om { min-width: 0; }
.om > div { min-width: 0; overflow-wrap: anywhere; }

/* ---- Settings: one iOS-style grouped list ---- */
.iospage { max-width: 720px; }
.iosh { margin: 22px 16px 6px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--subtle); }
.iosg { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.iosr { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 12px; min-height: 50px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15.5px; position: relative; }
.iosr + .iosr::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; border-top: 1px solid #f3ece9; }
.iosr:hover { background: #fcfaff; }
.iosr .grow { flex: 1; min-width: 0; padding: 13px 0; }
.iosi { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; }
.iosv { color: var(--subtle); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.iosc { color: #c7c2d3; font-size: 22px; line-height: 1; }

/* avatar menu */
.sidefoot { position: relative; }
button.me { border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.memenu { position: absolute; bottom: 72px; right: 0; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: 0 16px 40px -18px rgba(29, 22, 51, 0.45); z-index: 60; animation: pop 0.15s ease-out; }
.mehead { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; border-bottom: 1px solid #f3ece9; margin-bottom: 4px; }
.mehead b { display: block; font-size: 14px; } .mehead small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.mehead.big { border: 0; padding: 0 0 8px; } .mehead.big .me { width: 52px; height: 52px; flex-basis: 52px; font-size: 20px; }
.memenu a, .memenu button { display: block; width: 100%; text-align: left; padding: 9px 8px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.memenu a:hover, .memenu button:hover { background: var(--canvas); }
.rail .backlink { display: block; margin: 0 6px 10px; font-size: 13px; }
.rail .railhead { display: flex; align-items: baseline; gap: 10px; margin: 0 6px 10px; }
.rail .railhead .backlink { margin: 0; }
.railwhere { margin-left: auto; font-size: 13px; font-weight: 800; color: #9a8486; text-align: right; }
.apcalbtn { order: 9; margin-left: auto; }
.drawer .apcal .apgrid { height: 620px; }

/* Approvals: the requested day beside the details */
.apsplit { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; align-items: start; }
.apleft { min-width: 0; }
/* The dividing rule is drawn as a background, not a border: a border runs the
   full height of the panel, including the opaque header band, and would be the
   one thing standing above the fade. See .apright's mask below. */
.apright { position: sticky; top: 0; padding-left: 17px; }
.apcal.mini .apcalhead { margin-left: 34px; }
.apcal.mini .aphrs { width: 34px; flex-basis: 34px; }
.apcal.mini .apgrid { height: 440px; }
.apcal.mini .cblk { font-size: 10.5px; }
@media (max-width: 1100px) { .apsplit { grid-template-columns: 1fr; } .apright { border-left: 0; padding-left: 0; } }

/* Approvals: the day is full height with its own scroll; the details scroll on their own */
@media (min-width: 1101px) {
	.apdetail .apbody { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
	.apsplit { flex: 1; min-height: 0; align-items: stretch; }
	.apleft { overflow-y: auto; min-height: 0; padding-bottom: 20px; padding-right: 4px; }
	.apright { position: static; overflow-y: auto; min-height: 0; }
	.apright .apcal.mini { display: flex; flex-direction: column; }
	.apright .apcal.mini .apcalhead { position: sticky; top: 0; background: #fff; z-index: 3; }
	.apcal.mini .apgrid { height: 1152px; flex: 0 0 auto; }
	.apcal.mini .apcol { background-image: repeating-linear-gradient(#f8f3f1 0 1px, transparent 1px 48px); }
	.apcal.mini .cblk { font-size: 11.5px; }
}
@media (min-width: 1101px) { .apright .apcal.mini .apcalhead { margin-left: 0; padding-left: 34px; } }

/* Approvals' calendar drawer: full day, same scale as the single day, its own scroll */
.drawer .apcal .apscroll { max-height: calc(100vh - 330px); min-height: 280px; overflow-y: auto; border: 1px solid #f3ece9; border-radius: 12px; }
.drawer .apcal .apscroll .apcalhead { position: sticky; top: 0; background: #fff; z-index: 3; margin-left: 0; padding-left: 40px; }
.drawer .apcal .apgrid { height: 1152px; }
.drawer .apcal .apcol { background-image: repeating-linear-gradient(#f8f3f1 0 1px, transparent 1px 48px); }
.cblk.imp { background: #fff; border: 1px solid var(--c); border-left-width: 3px; color: var(--c); }
.apsrc { margin-top: 12px; }
.apsrc > b { display: block; font-size: 14px; margin-bottom: 2px; }
.apsrcg { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); margin: 10px 0 2px; }
.apsrc .ck em { font-style: normal; color: var(--subtle); font-weight: 600; font-size: 12.5px; }
.drawer .apcal .apgrid { height: auto; }
.apcalbar { flex-wrap: wrap; }
.apcalbar .ibtn:disabled { opacity: 0.35; cursor: default; }
.cblk.flash { animation: flash 1.2s ease-out 2; }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } 30% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.45); transform: scale(1.02); } }
.db.calonly { padding-top: 14px; }
.close.sm { width: 32px; height: 32px; font-size: 15px; flex: 0 0 32px; }
.db.calonly .apcal .apscroll { max-height: calc(100vh - 250px); }
.db.calonly .panel { padding: 12px; }
.db.calonly .apcalbar { flex-wrap: nowrap; gap: 4px; }
.db.calonly .apcalbar .ibtn { width: 30px; height: 30px; flex: 0 0 30px; font-size: 15px; }
.db.calonly .apcalbar .soft.sm { padding: 5px 9px; font-size: 12.5px; white-space: nowrap; }
.db.calonly .apcalbar .seg.sm button { padding: 5px 9px; }
.db.calonly .apcal .apscroll { max-height: calc(100vh - 120px); }
.drawerx .apsrc { margin-top: 0; }
.drawerx .apsrc h3 { font-size: 17px; margin: 4px 0 4px; }
.apq { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #f3ece9; }
.apq h3, .drawerx .apsrc h3 { font-size: 17px; margin: 4px 0 8px; }
.apqcard { background: #fffaf0; border: 1.5px dashed #f59e0b; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.apqcard b { display: block; font-size: 14.5px; color: #92400e; }
.apqcard small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.stepg { display: inline-flex; background: #f5efed; border-radius: 999px; padding: 2px; gap: 2px; flex: 0 0 auto; }
.stepb { border: 0; background: #fff; border-radius: 999px; padding: 4px 8px; font-weight: 800; font-size: 12px; color: var(--ink); cursor: pointer; box-shadow: 0 1px 3px -1px rgba(29, 22, 51, 0.2); }
.stepb:hover { color: var(--accent); }
.drawer .apcal .apgrid, .drawer .apcal .apcalhead { overflow: hidden; }
.drawer .apcal .aphrs { position: relative; z-index: 4; background: #fff; }
.ghost.apcalbtn { font-size: 15px; white-space: nowrap; align-self: center; }

/* Outbound split screen: private chat and the conversation side by side */
.osplit { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
.opane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.opane.theirs { border-left: 1px solid var(--line); }
.opaneh { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #f3ece9; background: #fff; }
.opaneh b { font-size: 14px; } .opaneh small { color: var(--subtle); font-size: 12px; font-weight: 700; }
.opane .cbody { flex: 1; min-height: 0; overflow-y: auto; }
.opane .om { max-width: 92%; }
@media (max-width: 1150px) { .osplit { grid-template-columns: 1fr; } .opane.theirs { border-left: 0; border-top: 1px solid var(--line); } }
.om { min-width: auto; }
.om > div { min-width: auto; overflow-wrap: break-word; word-break: normal; }
.obox { margin: 8px 12px 12px; }
.obox textarea { max-height: 180px; }

/* Outbound: the address they know you by, in the message box */
.obox { position: relative; }
.aschipb { border: 1px solid var(--line); background: var(--canvas); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.aschipb i { font-style: normal; color: var(--accent); margin-left: 2px; }
.aschipb:hover { border-color: var(--accent-line); color: var(--ink); }
.agrow .grow { flex: 1; }
.aspop { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; box-shadow: 0 18px 40px -18px rgba(29, 22, 51, 0.45); z-index: 10; animation: pop 0.15s ease-out; max-height: 60vh; overflow-y: auto; }
.aspoph { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); margin-bottom: 8px; }
.vepcard { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vepcard b { display: block; font-size: 15px; } .vepcard small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.aspop .kv span:first-child { width: 120px; flex-basis: 120px; }
.asopt { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; margin-top: 6px; }
.asopt:hover { border-color: var(--accent-line); }
.asopt .grow { flex: 1; min-width: 0; } .asopt b { display: block; font-size: 13.5px; } .asopt small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.asopt em { font-style: normal; font-weight: 800; color: var(--accent); font-size: 13px; }
.face.sm { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
.goal.obar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 18px; }
.goal.obar .grow { flex: 1; min-width: 0; }
.oagentbtn { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--line); cursor: pointer; font-size: 19px; }
.oagentbtn:hover { border-color: var(--accent-line); }
.goal.obar .odiarybtn { margin-left: 0; }
.apcal.mini .apcalhead { display: flex; align-items: center; justify-content: flex-end; }
.apcal.mini .apcalhead .grow { flex: 1; }
.minizoom { display: inline-flex; gap: 4px; padding-right: 2px; }
.minizoom .ibtn { width: 26px; height: 26px; flex: 0 0 26px; font-size: 14px; }
.minizoom .ibtn:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 1101px) { .apcal.mini .apgrid { flex: 0 0 auto; } }
/* Keep scrollbars beside the controls, not over them (overlay scrollbars on macOS) */
.apright { scrollbar-gutter: stable; padding-right: 12px; }
.drawer .apcal .apscroll { scrollbar-gutter: stable; padding-right: 10px; }

/* Configure a link in place: a large pop-up with its own sidebar */
.lmodal { position: relative; width: min(1080px, 100%); height: min(760px, calc(100vh - 32px)); background: var(--canvas); border-radius: 26px; display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(29, 22, 51, 0.6); animation: pop 0.2s ease-out; }
.lmnav { background: #fff; border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.lmhead { padding: 4px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid #f3ece9; }
.lmhead b { display: block; font-size: 14px; margin-top: 6px; word-break: break-all; }
.lmhead small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.lmi { text-align: left; border: 0; background: none; border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 14px; color: var(--ink); cursor: pointer; }
.lmi:hover { background: var(--canvas); }
.lmi.on { background: var(--accent-soft); color: var(--accent); }
.lmfull { margin-top: auto; padding: 10px 12px; font-size: 13px; text-decoration: none; }
.lmbody { overflow-y: auto; padding: 22px 26px 30px; }
.lmbody .sec { margin: 0; }
.lmpv { width: 320px; padding: 22px 22px 22px 0; overflow-y: auto; }
.lmx { position: absolute; top: 14px; right: 14px; z-index: 2; }
@media (max-width: 900px) { .lmodal { grid-template-columns: 1fr; height: calc(100vh - 32px); } .lmnav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .lmhead, .lmfull { display: none; } .lmpv { display: none; } }

/* ======== Breadslice additions (2026-10-02) ======== */

/* ---- live payouts ---- */
/* Two columns: every meeting with money attached on the left, the selected
   meeting's meters on the right. The list is the diary; the pane is the money. */
.kwrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; height: calc(100vh - 0px); }
.kleft { padding: 26px 20px 20px; border-right: 1px solid var(--line); overflow-y: auto; }
.kmain { padding: 26px 28px 60px; overflow-y: auto; }
/* Three tabs in a 320px column: short labels, no wrapping, and each one takes
   an equal third so the row cannot overflow however the counts change. */
.ktabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 12px; }
.ktab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; font-size: 13px; font-weight: 800; cursor: pointer; color: var(--muted); white-space: nowrap; }
.ktab.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.ktab .n { font-size: 11px; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 6px; }
.ktab.on .n { background: var(--accent); }
.klist { display: grid; gap: 6px; }
.krow { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border: 1px solid transparent; border-radius: 14px; background: none; cursor: pointer; text-align: left; }
.krow:hover { background: var(--panel); }
.krow.on { background: var(--panel); border-color: var(--accent-line); }
.krow .grow { flex: 1; min-width: 0; }
.krow b { display: block; font-weight: 800; font-size: 14.5px; }
.krow small { color: var(--muted); font-size: 12.5px; }
.krow .kamt { font-weight: 900; font-variant-numeric: tabular-nums; }
/* The dot is the state, so it is the one thing that differs between rows. */
.kdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--subtle); }
.kdot.live { background: #1f9d55; animation: lpulse 2s infinite; }
.kdot.soon { background: var(--accent-lt); }
.kdot.done { background: var(--line); }
.khead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.khead .grow { flex: 1; }
.khead h2 { font-size: 26px; font-weight: 900; }
/* Funded / sent / left, because on a booked meeting the money is already
   committed and the owner's question is how much is tied up. */
.kfund { display: flex; align-items: center; gap: 30px; width: 100%; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kfund .kresb { margin-left: auto; flex: none; display: flex; gap: 8px; }
.kfund > div { flex: 0 1 auto; min-width: 0; }
.kfund .chev { margin-left: auto; color: var(--subtle); font-size: 18px; }
.kfund b { display: block; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.kfund span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.knote { margin: 0 0 14px; }
.kgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1240px) { .kgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .kwrap { grid-template-columns: minmax(0, 1fr); height: auto; } .kleft { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---- payout meters ---- */
/* The figure is the biggest thing on a tile and Pause is never more than one
   press away: on this screen the owner is deciding whether to keep paying, and
   everything else is context for that one decision. */
.livebar { display: flex; align-items: center; gap: 28px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 18px; }
.livebar div b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.livebar div span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.livebar .grow { flex: 1; }

.lgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ltile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px 16px; }
.ltile.running { border-color: var(--accent-line); box-shadow: 0 10px 30px -22px rgba(138, 36, 51, 0.8); }
.ltile.ready { opacity: 0.8; }
.ltile.stopped, .ltile.finished { opacity: 0.74; }
.lhead { display: flex; align-items: center; gap: 11px; }
.lhead .grow { flex: 1; min-width: 0; }
.lhead b { display: block; font-weight: 900; }
.lhead small { color: var(--muted); font-size: 13px; }
.lav { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 900; flex: none; }
/* The sign-in that let them book, in the provider's own colour: on this screen
   it is evidence, so it should be identifiable at a glance. */
.lvia { font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--v); border-radius: 999px; padding: 4px 9px; }
.lamt { margin-top: 12px; font-size: 38px; font-weight: 900; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.lsub { display: flex; align-items: center; gap: 12px; margin-top: 2px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lsub .grow { flex: 1; }
.lstate { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.ldot { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; animation: lpulse 2s infinite; }
@keyframes lpulse { 70% { box-shadow: 0 0 0 6px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } }
.lbar { height: 6px; border-radius: 3px; background: var(--accent-soft); overflow: hidden; margin-top: 12px; }
.lbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
.lnote { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.lacts { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.lacts .ghost { margin-left: auto; font-size: 13px; }

/* ---- payments report ---- */
.panel.pad0 { padding: 0; overflow: hidden; }
.ptab { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptab th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.ptab td { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.ptab tr:last-child td { border-bottom: 0; }
.ptab .r { text-align: right; font-variant-numeric: tabular-nums; }
.ptab .dim { color: var(--muted); }
.pst { font-size: 11px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.pst.done { background: #e9fbf6; color: #0f7a66; }
.pst.stopped { background: #f3f0ee; color: var(--muted); }

@media (max-width: 1100px) { .lgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .livebar { flex-wrap: wrap; gap: 18px; } .ptab { font-size: 13px; } .ptab th:nth-child(3), .ptab td:nth-child(3) { display: none; } }
/* The payout is the chip that matters most on an event type row, so it is the
   one that is not grey. */
.ev .chip.pay { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 800; }

/* ---- wallet ---- */
.wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.wcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
/* The contract wallet is the one that moves money on its own, so it is marked
   rather than left to look like a second ordinary account. */
.wcard.contract { border-color: var(--accent-line); background: var(--accent-soft); }
.wtop { display: flex; align-items: flex-start; gap: 12px; }
.wtop .grow { flex: 1; }
.wbal { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wusdc { font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: #fff; border: 1px solid var(--accent-line); border-radius: 999px; padding: 4px 9px; }
.waddr { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 9px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font: 600 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); cursor: pointer; text-align: left; word-break: break-all; }
.waddr i { margin-left: auto; font-style: normal; font-family: Lato, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.waddr:hover { border-color: var(--accent-line); }
.waddr:hover i { color: var(--accent); }
.hash { font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.tx.out, .tx.fee { color: var(--ink); }
.tx.in { color: #0f7a66; }
.tx.fund { color: var(--accent); }
@media (max-width: 900px) { .wgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- wallet set-up ---- */
.page.narrow { max-width: 720px; }
.wnew h2 { font-size: 22px; font-weight: 900; }
.wnew .hint { margin: 10px 0 0; }
/* Providers as a grid of plain tiles: the only decision on this screen, so
   nothing else on it is a control. */
.zkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 16px; }
.zkp { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; text-align: left; }
.zkp i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.zkp b { font-weight: 800; }
.zkp small { display: block; font-size: 11.5px; color: var(--subtle); font-weight: 600; }
.zkp:hover { border-color: var(--accent-line); }
.zkp.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.zkp.off { opacity: 0.55; cursor: not-allowed; }
.zklist { margin: 18px 0 4px; padding: 0; list-style: none; }
.zklist li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.zklist b { color: var(--ink); }
.zklist em { font-style: normal; font-weight: 800; color: var(--ink); }
.zkrun { margin: 18px 0 4px; padding: 0; list-style: none; }
.zkrun li { padding: 11px 0 11px 28px; position: relative; font-size: 14.5px; color: var(--muted); }
.zkrun li::before { content: '✓'; position: absolute; left: 0; font-weight: 900; color: #0f7a66; }
.zkrun li.go { color: var(--ink); font-weight: 700; }
.zkrun li.go::before { content: '•'; color: var(--accent); animation: lpulse 1.2s infinite; }
.btn.off { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
@media (max-width: 700px) { .zkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- passkey set-up ---- */
/* The platform note is called out rather than buried: the advice only makes
   sense once the owner knows we worked out what they are using. */
.pkdetect { margin: 16px 0 4px; padding: 14px 16px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.pkdetect b { font-weight: 900; }
/* A drawn stand-in for the operating system's own sheet, so the owner knows
   what is about to appear and does not dismiss it. Deliberately plain: it is
   an illustration of someone else's UI, not a copy of it. */
.pkprompt { margin: 18px 0 6px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); max-width: 420px; }
.pkp-head { display: flex; align-items: center; gap: 11px; }
.pkp-head b { display: block; font-size: 14.5px; }
.pkp-head small { color: var(--muted); font-size: 12.5px; }
.pkp-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 17px; }
.pkp-row { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.pkp-row b { color: var(--ink); }
.pkp-acts { display: flex; gap: 8px; margin-top: 14px; }
.pkp-b { flex: 1; text-align: center; padding: 8px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; }
.pkp-b.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.pkp-note { margin: 12px 0 0; font-size: 12px; color: var(--subtle); }
.pkgrid { display: grid; gap: 9px; margin: 18px 0 14px; }
.pkgrid .zkp { align-items: flex-start; }
.pkgrid .zkp i { margin-top: 5px; }
.pkgrid .grow { flex: 1; min-width: 0; }
.pkrec { font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.pkconf { display: flex; align-items: center; gap: 10px; padding: 12px 0 2px; font-size: 14.5px; cursor: pointer; }
.pkconf input { width: 17px; height: 17px; accent-color: var(--accent); }
/* A striped placeholder, same convention as the landing page's unsourced
   figures: a section whose shape is agreed but whose content is not should
   look unfinished rather than quietly incomplete. */
.tkbox { margin: 14px 0 0; }
.tk { display: inline-block; padding: 3px 8px; border-radius: 4px; outline: 1.5px dashed var(--accent); outline-offset: 2px; background: repeating-linear-gradient(45deg, #f6dcd7, #f6dcd7 6px, #efc9c2 6px, #efc9c2 12px); font-size: 12.5px; font-weight: 800; }

/* ---- payout calendar drawer ---- */
/* The grid, bar and side panel are Approvals' (.apcal and friends); only the
   blocks are ours. Money blocks are solid and carry a figure; everything else
   on the owner's calendars is drawn plain so it reads as context. */
.khrow { display: flex; align-items: center; gap: 10px; }
.khrow .apph { flex: 1; }
.kcalbtn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; font-size: 16px; cursor: pointer; }
.kcalbtn:hover { border-color: var(--accent-line); color: var(--accent); }
.cblk.ctx { opacity: 0.5; }
.cblk.pay { cursor: pointer; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); }
/* One line, clipped: a 10-minute block is 16px tall at 100%, so the name and
   the figure have to share a row rather than stack. */
.cblk.pay { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cblk.pay b { font-weight: 800; }
.cblk.pay small { opacity: 0.75; }
.cblk.pay.live { border-left-color: #1f9d55; background: #e9fbf6; }
.cblk.pay.done { border-left-color: var(--subtle); background: var(--canvas); opacity: 0.75; }
.cblk.pay.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.kkey { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.kkey span { display: inline-flex; align-items: center; gap: 7px; }
.kkey .kdot { animation: none; }
/* The zoom readout, between the two buttons it belongs to. Tabular figures and
   a fixed width so the bar does not shuffle as the number changes. */
.zpct { min-width: 44px; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- calendar block hover card ---- */
.kpop { position: fixed; z-index: 60; width: 280px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--accent-line); border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(29, 22, 51, 0.45); }
.kpop-h { display: flex; align-items: flex-start; gap: 9px; }
.kpop-h .grow { flex: 1; min-width: 0; }
.kpop-h b { display: block; font-size: 15px; font-weight: 900; }
.kpop-h small { color: var(--muted); font-size: 12.5px; }
.kpop-h .kdot { margin-top: 5px; }
.kpop-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.kpop-kv:first-of-type { margin-top: 10px; }
.kpop-kv b { color: var(--ink); font-variant-numeric: tabular-nums; }
.kpop-who { display: grid; gap: 5px; padding: 9px 0 12px; border-top: 1px solid var(--line); }
.kpop-p { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kpop-p i { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-style: normal; font-size: 11px; font-weight: 900; }
.kpop-p em { margin-left: auto; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpop .btn { width: 100%; }

/* ---- participant details drawer ---- */
.pdhead { display: flex; align-items: center; gap: 12px; }
.pdhead .grow { flex: 1; min-width: 0; }
.pdhead b { display: block; font-size: 17px; font-weight: 900; }
.pdhead small { color: var(--muted); font-size: 13.5px; }
.lav.big { width: 44px; height: 44px; font-size: 17px; }
/* The reading is a word, not a number: a score out of ten would imply a
   precision the agent does not have. */
.pdscore { font-size: 11.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.pdscore.strong { background: #e9fbf6; color: #0f7a66; }
.pdscore.weak { background: #fdeceb; color: #b91c1c; }
.pdai { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
/* The same drawer the icon beside the heading opens, offered again at the foot
   of the list: the icon is for someone who already knows, this is for someone
   who has just read to the bottom and wants the rest. */
.kcalall { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 11px; border: 1px dashed var(--line); border-radius: 14px; background: none; font-size: 13.5px; font-weight: 800; color: var(--muted); cursor: pointer; }
.kcalall:hover { border-color: var(--accent-line); color: var(--accent); background: var(--panel); }

/* ---- dev menu (mock only) ---- */
/* Looks like a dev tool rather than part of the app, on purpose: nobody should
   mistake it for a feature if it ever shows up in front of someone. */
.devm { position: fixed; z-index: 90; width: 190px; padding: 6px; background: var(--ink-h); border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }
.devm-h { padding: 6px 10px 7px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6f72; }
.devm button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: #f1e8e6; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; }
.devm button:hover { background: rgba(255, 255, 255, 0.09); }
.devm button.on::before { content: '✓'; color: #c33248; font-weight: 900; }
.devm button:not(.on)::before { content: ''; width: 9px; }
.devm-f { padding: 8px 10px 4px; font-size: 10.5px; color: #8a6f72; }

/* ---- arrival card (copied from arrival-mock, 2026-10-02) ---- */
.amini { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; text-align: left; cursor: pointer; }
.amini:hover { border-color: var(--accent-line); }
.amini .grow { flex: 1; min-width: 0; }
.amini b { display: block; font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amini small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amini .chev { color: var(--subtle); }
/* The person: a picture where the door gives one, a placeholder where it does
   not. Never the provider mark — that lives on the right. */
.pav { width: 38px; height: 38px; flex: none; position: relative; border-radius: 50%; overflow: hidden; }
.pav.big { width: 44px; height: 44px; }
.pav .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pav.blank { background: #f1e8e6; display: grid; place-items: center; }
.pav.blank svg { width: 23px; height: 23px; fill: none; stroke: var(--subtle); stroke-width: 1.7; stroke-linecap: round; }
.pav.big.blank svg { width: 27px; height: 27px; }
/* The transport: squared, so it cannot be mistaken for a second face. */
.aav { width: 34px; height: 34px; flex: none; position: relative; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); }
.aav .logo { width: 100%; height: 100%; display: block; object-fit: contain; }
.aav.fill { background: var(--tile); }
.aav.fill .logo { border-radius: inherit; object-fit: cover; }
.aav:not(.fill) { background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 5px; }
.aav .brow { position: absolute; right: -4px; bottom: -4px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1.5px solid #fff; padding: 0; }
.aav .brow img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.vrule { width: 1px; align-self: stretch; margin: 3px 2px 3px 8px; background: var(--line); flex: none; }
/* In the list the two avatars bracket the row: person left, transport right. */
.crow .pav, .aprow .pav { width: 36px; height: 36px; }
.crow .aav, .aprow .aav { width: 26px; height: 26px; border-radius: 8px; }
.crow .aav .brow, .aprow .aav .brow { width: 15px; height: 15px; right: -3px; bottom: -3px; border-width: 1.2px; }
/* The request list is top-aligned (the rows are two and three lines tall), so
   the two avatars line up with the first line rather than floating mid-row. */
.aprow .pav, .aprow .aav { margin-top: 2px; }
.aprow .vrule { margin-left: 4px; }

/* ---- booking chat header: three cards (2026-10-03) ---- */
/* Who they are, how they got here, how well they fit. The first is attested,
   the second is transport, the third is ours; they are the same size so none of
   them reads as the headline, and the fit score is labelled so it can never be
   mistaken for something a provider said. */
.acards { display: flex; align-items: stretch; gap: 8px; width: 100%; flex-wrap: wrap; }
.acards .amini { width: auto; min-width: 0; }
.acards > .amini:first-child { flex: 1.6 1 230px; }
.acards > .lcard { flex: 1.4 1 200px; }
/* The fit card is one number: a ring the width of itself, so the name and the
   link get all the room. What the number means expands in the drawer. */
.acards > .fcard { flex: 0 0 auto; padding: 10px 14px; justify-content: center; }
.amini.flat { cursor: default; }
.amini.flat b { font-size: 14.5px; }
.lcard .grow b { font-weight: 800; }
.lav { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); }
.lav svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
/* The ring is the number drawn twice: nobody reads a percentage off an arc, but
   it tells you at a glance whether this one is worth the click. */
.fring { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%;
	background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); }
.fring b { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: var(--panel); font-size: 13px; font-weight: 900; color: var(--accent); }
.fring.none b { color: var(--subtle); }

/* ---- numbered points in the wallet wizard (2026-10-03) ---- */
/* Each point is its own fact, so each gets its own number and its own rule.
   Nothing here is an ordered procedure: the numbers are there to separate. */
.wnum { counter-reset: wn; list-style: none; margin: 14px 0 0; padding: 0; }
/* Not a flex row: an inline link inside a flex item becomes its own column. */
.wnum li { counter-increment: wn; position: relative; padding: 16px 0 16px 40px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.58; color: var(--muted); }
.wnum li:first-child { border-top: 0; padding-top: 2px; }
.wnum li:first-child::before { top: 1px; }
.wnum li::before { content: counter(wn); position: absolute; left: 0; top: 15px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 900; }
.wnum a { color: var(--accent); }
/* The label beside an unguessable link: the part a person can actually read. */
.llab { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.llab::before { content: '\00b7'; margin-right: 5px; color: var(--subtle); }

/* ---- the request panel's one-day calendar (2026-10-03) ---- */
/* The column fades out before the rule above Decline / Approve, so a block
   running past the bottom reads as "there is more below" rather than as one
   cut off against the buttons. The mask is on the scroller, so the fade stays
   put while the content moves under it. */
.apright {
	--apfade: 72px;
	/* Height of the sticky zoom row, which must stay fully opaque. */
	--aphead: 26px;
	/* Opaque through the header band, then straight to transparent and back in
	   over 26px, then out again at the foot. The hard step at the header's
	   bottom edge is invisible because the header is sticky with its own white
	   ground: everything above that line is behind it. */
	background-image: linear-gradient(to bottom, transparent 0 var(--aphead), #f3ece9 var(--aphead));
	background-size: 1px 100%;
	background-repeat: no-repeat;
	background-position: left top;
	-webkit-mask-image: linear-gradient(to bottom, #000 0 var(--aphead), transparent var(--aphead), #000 calc(var(--aphead) + 26px), #000 calc(100% - var(--apfade)), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0 var(--aphead), transparent var(--aphead), #000 calc(var(--aphead) + 26px), #000 calc(100% - var(--apfade)), transparent 100%);
}
/* Highlight, beside the mini calendar's zoom: find the block this request is
   about without re-rendering anything. */
/* Over the TIME labels, not the day's column, and centred on them rather than
   on the gutter box: the labels are right-aligned inside it, so their middle
   sits 2px left of its middle.

   padding:0 is load-bearing. The shared .ibtn has padding 1px 6px, which on a
   26px button leaves a 12px content box; a 16px icon is then WIDER than its
   grid track, and an overflowing grid item is placed at the start instead of
   centred. That, not the artwork, is what pushed the glyph right (the ink is
   bbox-centred in its viewBox: 3.25 either side, 1.25 top and bottom). */
.ibtn.mshow { width: 26px; height: 26px; flex: 0 0 26px; padding: 0; margin-left: 2px; }
.ibtn.mshow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1101px) {
	/* The flashlight sits at the panel's left edge, not indented past the hour
	   gutter like the day names it replaced. */
	.apright .apcal.mini .apcalhead { padding-left: 0; }
}
/* "Join request sent 5 hours ago" and "Full calendar view" on one line: two
   full-width bands of chrome were pushing the one-day calendar down, and the
   calendar is what wants the height. */
.apfiled { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 10px 2px 2px; }
.apfiled .appsub { margin: 0; }
.apfiled .grow { flex: 1; }
.apfiled .apcalbtn { order: 0; margin-left: 0; align-self: baseline; }
/* The hold, said plainly in the request's own foot: one thing in a bar needs no
   chip around it. Colour still carries the urgency. */
.hplain { font-size: 13px; font-weight: 800; color: #b45309; white-space: nowrap; }
.hplain.red { color: #e11d48; }
.hplain.blue { color: #2563eb; }

/* ---- the two wallets are a choice, not two panels (2026-10-03) ---- */
/* Each card owns the ledger underneath it, so one of them is always selected
   and says so with a ring. The cards keep their own colours; selection is the
   ring and the shadow, never a colour change, so "which wallet" and "which one
   am I reading" stay two separate signals. */
.wcard[data-wsel] { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.wcard[data-wsel]:hover { border-color: var(--accent-line); }
.wcard[data-wsel].on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset, 0 10px 24px -18px rgba(138, 36, 51, 0.8); }
.wcard[data-wsel]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The buttons inside are their own targets; the card behind them is the one
   thing that selects. */
.wcard[data-wsel] .acts, .wcard[data-wsel] .waddr { cursor: auto; }
.iosh em { font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 800; }
.iosh em::before { content: '·'; margin: 0 6px; color: var(--subtle); }

/* ---- "only" beside each filter (2026-10-03) ---- */
/* Ticking three things off to be left with one is three clicks and a think.
   This is the one click, and it sits outside the label on purpose: inside it,
   a click would toggle the very checkbox it is meant to override. */
.ckrow { position: relative; display: flex; align-items: center; }
.ckrow .ck { flex: 1; min-width: 0; }
.onlyb { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); font: inherit; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.12s; box-shadow: -12px 0 10px -6px var(--canvas); }
.ckrow:hover .onlyb, .onlyb:focus-visible { opacity: 1; pointer-events: auto; }
.onlyb:hover { color: var(--accent); border-color: var(--accent); }
/* The address inside Wallet settings: its own full-width row, because a kv's
   value column wraps a 42-character string mid-word. */
.wsetaddr { padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.wsetaddr .eyebrow { margin-bottom: 6px; }
.wsetaddr .waddr { width: 100%; }

/* ---- wallet accounting dashboard (2026-10-03) ---- */
.wrbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 2px 14px; }
.wrq { flex: 1 1 240px; min-width: 180px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font: inherit; font-size: 14px; color: inherit; }
.wrq:focus { outline: none; border-color: var(--accent); }
.wrgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 900px) { .wrgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wrcard { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.wrcard span { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.wrcard b { display: block; margin: 4px 0 2px; font-size: 25px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wrcard small { display: block; font-size: 12.5px; color: var(--subtle); font-weight: 700; }
.wrcard.up b { color: var(--teal); }
.wrcard.down b { color: var(--accent); }
/* Two bars a day, in above out, on one baseline. Reading a day means reading
   the pair, so they share a column rather than sitting in two charts. */
.wrchart { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 2px; height: 130px; }
.wrday { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.wrday i { width: 45%; min-height: 1px; border-radius: 2px 2px 0 0; display: block; }
.wrday i.up { background: var(--teal); opacity: 0.85; }
.wrday i.down { background: var(--accent); opacity: 0.85; }
.wrday:hover i { opacity: 1; }
.wrx { display: flex; margin-top: 8px; font-size: 11.5px; font-weight: 800; color: var(--subtle); }
.wrx .grow { flex: 1; }
.iosh .grow { flex: 1; }
.iosh { display: flex; align-items: center; gap: 10px; }
.linky { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); font-weight: 800; text-decoration: underline; cursor: pointer; }

/* ---- automatic wallet limits (2026-10-03) ---- */
/* The worst case, said once at the top in the same words as the caps below it.
   Anyone reading this page is asking exactly this question. */
.wlworst { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 18px; padding: 16px 18px; margin: 18px 0 6px; }
.wlworst span { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.wlworst b { display: block; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.wlworst p { flex: 1 1 260px; margin: 0; font-size: 13.5px; color: var(--muted); font-weight: 600; }
/* A money field that looks like the figure it holds, not like a form. */
.moneyf { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-variant-numeric: tabular-nums; }
.moneyf em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--subtle); }
.moneyf input { width: 76px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 800; text-align: right; color: inherit; padding: 0; }
.moneyf input:focus { outline: none; }
.moneyf:focus-within { border-color: var(--accent); }
.moneyf.plain input { width: 46px; text-align: center; }

/* ---- teammates (2026-10-03) ---- */
.tmlist { display: flex; flex-direction: column; }
.tmrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tmrow:last-child { border-bottom: 0; }
.tmrow:hover { background: var(--accent-soft); }
.tmrow .grow { flex: 1 1 200px; min-width: 0; }
.tmrow b { display: block; font-size: 15px; font-weight: 900; }
.tmrow small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The role is what the ticks add up to, so it reads as a column of its own
   rather than as a badge on the name. */
.tmrole { flex: 0 0 220px; min-width: 0; }
.tmrole b { font-size: 13.5px; }
.tmrole small { font-size: 12.5px; color: var(--subtle); }
.tmseen { flex: 0 0 120px; font-size: 12.5px; font-weight: 700; color: var(--subtle); }
.tmpend { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #fff8eb; border: 1px solid #fde2b0; color: #b45309; font-style: normal; font-size: 11px; font-weight: 900; vertical-align: 1px; }
.tmrow .chev { color: var(--subtle); }
@media (max-width: 900px) { .tmrole, .tmseen { display: none; } }
.wrapseg { flex-wrap: wrap; }
.fld { display: block; }
.fld > span { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.fld input { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font: inherit; font-size: 15px; color: inherit; }
.fld input:focus { outline: none; border-color: var(--accent); }

/* ---- the wallets' marks (2026-10-03) ---- */
.wic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.wic svg { width: 27px; height: 27px; display: block; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* On the selected card the mark is the solid one, so the eye lands on the card
   that owns the ledger below before it reads a word. */
.wcard.on .wic { background: var(--accent); box-shadow: none; }
.wcard.on .wic svg { stroke: #fff; }
.wtop { display: flex; align-items: center; gap: 12px; }

/* ---- the wallet cards' balances (2026-10-03) ---- */
/* The mark and the name on one line at the top, the money underneath. The
   automatic wallet carries three figures because its total means nothing on its
   own: what can still be committed is Free, and Event locked is real money the
   owner cannot move until the meetings it belongs to are over. Total is first
   because it is the number that reconciles against the chain. */
/* The chain the money is in belongs under the wallet's name, not out at the
   card's edge: it is part of what this wallet IS. */
.wtop { align-items: center; margin-bottom: 14px; }
.wtop .wusdc { display: inline-block; margin-top: 4px; }
.wtop .eyebrow { font-size: 13px; }
/* Baseline, not bottom: every column's LABEL sits on one line and the figures
   hang below it, so three figures of two different sizes still read as a row. */
.wbals { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.wbals.three .wb + .wb { padding-left: 22px; border-left: 1px solid var(--accent-line); }
.wb span { display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.wb b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wb.big b { font-size: 34px; }
.wb i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--subtle); margin-left: 7px; }

/* ---- whose wallet this is (2026-10-03) ---- */
/* The card says two different kinds of thing: who we believe this wallet
   belongs to, which is an inference from a check someone passed, and what the
   money has done, which is a chain fact. The rule is where one stops and the
   other starts. */
.lown { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--subtle); margin-bottom: 8px; }
/* The meter card's head IS the arrival card: the person on the left with a face
   only where a provider returned one, the transport on the right behind a rule.
   Same markup, same helpers, so the two surfaces cannot drift. */
.ltile .amini.lhead { padding: 10px 12px; border-radius: 14px; background: var(--canvas); }
.ltile .amini.lhead:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.amini .vrule { width: 1px; align-self: stretch; margin: 2px 2px 2px 6px; background: var(--line); flex: none; }
.ltile .lhead { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
/* Starting all the meters is the one action here that begins spending, so it
   is the one that is not maroon. */
.btn.go { background: var(--teal); border-color: var(--teal); }
.btn.go:hover { background: #12907b; }

/* ---- "this demo happened" (2026-10-03) ---- */
/* A statement the owner makes, not a state the meters imply, because a repeat
   booking rule reads it. Quiet green: it is a fact being recorded, not an
   action being offered. */
.kdone { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #e9f7f4; color: #0f7a68; border: 1px solid #bfe7de; font-size: 13px; font-weight: 900; }
.kdone::before { content: '✓'; }
.ktick { font-style: normal; margin-left: 7px; color: #0f7a68; font-weight: 900; }
.ghost.sm { font-size: 13px; }

/* ---- token use per model (2026-10-03) ---- */
.ptab.tok small { display: block; font-size: 11.5px; font-weight: 700; }
.ptab .tot td { border-top: 1px solid var(--line); border-bottom: 0; }
.agree { font-size: 12px; font-weight: 900; color: var(--teal); }
.disagree { font-size: 12px; font-weight: 900; color: #b45309; }
/* A row of buttons sitting straight on the rule of the next switch row: the
   buttons read as part of that row rather than as the end of the one above.
   Space under the buttons, not padding inside the toggle, so the toggle's own
   rhythm is unchanged wherever it appears without them. */
.acts + .tog { margin-top: 16px; }

/* ---- the key inventory (2026-10-03) ---- */
.keyc { margin-bottom: 12px; }
.keyh { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.keyh .grow { flex: 1; min-width: 0; }
.keyh b { display: block; font-size: 16px; font-weight: 900; }
.keyh small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
/* Who holds the private half is the only thing on the card that matters at a
   glance, so it is the only thing with a colour. */
.keyown { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 900; letter-spacing: 0.03em; }
.keyown.you { background: #e9f7f4; color: #0f7a68; border: 1px solid #bfe7de; }
.keyown.us { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.keyc .waddr { font-size: 12.5px; }

/* ---- support plans (2026-10-03) ---- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 6px; }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.plan.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.planh { display: flex; align-items: center; gap: 10px; }
.planh b { font-size: 16px; font-weight: 900; }
.plannow { padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 900; }
.planp { margin: 8px 0 2px; font-size: 30px; font-weight: 900; letter-spacing: -0.02em; }
.planp small { font-size: 13px; font-weight: 800; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.planl { list-style: none; margin: 12px 0 18px; padding: 0; flex: 1; }
.planl li { position: relative; padding: 7px 0 7px 22px; font-size: 13.5px; line-height: 1.45; border-top: 1px solid #f5efed; }
.planl li:first-child { border-top: 0; }
.planl li::before { content: '✓'; position: absolute; left: 0; top: 7px; color: var(--accent); font-weight: 900; }
.plan button { width: 100%; justify-content: center; }
.plan button[disabled] { opacity: 0.55; cursor: default; }

/* ---- what attendees actually ask (2026-10-03) ---- */
/* Their words, in quotes, two columns so five of them read as a sample rather
   than a specification. */
.supq { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
/* The why on one side, what they actually ask on the other. */
.supsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 34px; align-items: start; margin: 2px 0 16px; }
.supsplit .supq { grid-template-columns: minmax(0, 1fr); margin: 0; }
.supwhy { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 56ch; }
.plansay { margin: 2px 2px 10px; }
.plansay b { color: var(--ink); }
/* The float-this-away button on a live event. */
/* Where the automatic wallet's money is: free, locked, and locked to whom. */
.fund, .fundp, .fundw, .fundev > summary { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.fund small, .fundp small, .fundw small, .fundev summary small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; margin-top: 1px; }
.fund.tot { background: var(--canvas); }
/* The darker beige means "this opens in place". A row that opens a drawer
   instead stays white, so the two kinds of click are told apart before you
   make them. */
.fundev > summary { cursor: pointer; list-style: none; font-weight: 700; background: var(--canvas); }
.fundev > summary::-webkit-details-marker { display: none; }
.fundev > summary::before { content: '›'; color: var(--subtle); font-size: 17px; transition: transform 0.15s; }
.fundev[open] > summary::before { transform: rotate(90deg); }
.fundw { padding-left: 42px; }
.fundp { padding-left: 70px; }
.fundp b.spent { color: var(--subtle); font-weight: 700; }
.panel.pad0 > :last-child, .fundev:last-child > :last-child { border-bottom: 0; }
.wltabs { max-width: 420px; margin: 0 2px 16px; }
/* Update history: a comparison table, so the verdict sits under the hash. */
.uptab td small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.uptab td small.up.ok { color: var(--teal); }
.uptab td small.up.warn { color: #c47a00; }
.uptab td small.up.bad { color: var(--accent-lt); font-weight: 700; }
.uptab .dim { color: var(--subtle); }
.tb.sec { background: #fdf5f4; color: var(--accent); margin-left: 6px; }
button.fundp, button.fundw, button.fund { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; cursor: pointer; }
button.fundp:hover, button.fundw:hover, button.fund:hover { background: var(--accent-soft); }
.fundgo { background: none; border: 0; color: var(--subtle); font-size: 18px; line-height: 1; padding: 4px 2px 4px 10px; cursor: pointer; }
.fundev > summary:hover .fundgo { color: var(--accent); }
.kpipb { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pipic { width: 16px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pipic .f { fill: currentColor; stroke: none; }
@media (max-width: 900px) { .supsplit { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .supq { grid-template-columns: 1fr; } }
.supq li { position: relative; padding: 8px 0 8px 20px; font-size: 14.5px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.supq li::before { content: '\201C'; position: absolute; left: 0; top: 10px; font-size: 20px; line-height: 1; color: var(--accent-line); }
.supq li::after { content: '\201D'; color: var(--accent-line); margin-left: 2px; }

/* ---- the sidebar's foot stays put (2026-10-03) ---- */
/* The float and the account are the two things you look for when something is
   wrong, and with the nav now long enough to scroll they were scrolling away.
   Sticky rather than fixed, so it belongs to the sidebar's own scroller and
   needs no width maths. The shadow above it is what says the list continues
   underneath, so the rule alone is not doing work it cannot do. */
/* The sticky footer pins to the bottom of the sidebar's scroller, so without a
   runway above it the last nav item can never be scrolled clear: the scroll
   range runs out while the footer is still sitting on top of it. .sidegap is
   that runway. Padding on .sidebody cannot do the job, because that box is
   height-capped by flex and its padding never reaches the scroller's range. */
.sidegap { flex: 0 0 0; }
/* bottom is -18px, not 0: a sticky offset is measured from the scroller's
   padding box, so bottom: 0 parked the footer 18px above the edge, exactly the
   sidebar's bottom padding, and rows scrolled visibly through that strip. */
.sidefoot {
	position: sticky;
	bottom: -18px;
	z-index: 5;
	margin-top: auto;
	margin-bottom: -18px;
	padding-bottom: 26px;
	background: var(--canvas);
	box-shadow: 0 -12px 14px -8px rgba(20, 11, 13, 0.1);
}
/* "all" on a group heading, the counterpart to "only" on a row. Same button,
   same hover-reveal, so the pair reads as one idea. */
.evgrp .grph { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.evgrp .grph .onlyb { position: static; opacity: 0; transform: none; box-shadow: none; }
.evgrp .grph:hover .onlyb, .evgrp .grph .onlyb:focus-visible { opacity: 1; pointer-events: auto; }

/* ---- blacklists (2026-10-03) ---- */
/* The identifier KIND is a column of its own, because "blocked a handle" and
   "blocked an account id" are not the same promise and the table should not
   let them look alike. */
.ptab.blktab small { display: block; font-size: 11.5px; margin-top: 3px; }
.ptab.blktab code { font-size: 11.5px; }
.ptab.blktab td { vertical-align: top; }
.kchip.hard { background: #e9f7f4; color: #0f7a68; border: 1px solid #bfe7de; }
.kchip.soft { background: #fff8eb; color: #b45309; border: 1px solid #fde2b0; }
.iosh em { font-style: normal; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 900; }

/* Manner of address: the four third-person forms, inert in first person. The label
   stays full strength; only the options read as unavailable. */
.arow { display: flex; flex-wrap: wrap; gap: 6px; }
.achip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 800; color: var(--muted); cursor: pointer; }
.achip.on { border-color: var(--accent); background: var(--soft); color: var(--accent); }
.achip.na { border-style: dashed; background: #f7f2f0; color: var(--subtle); cursor: default; }

/* Wallet allocation: the bulk expand/collapse sits on the total row, beside the
   figure the groups underneath add up to. */
.wlbulk { display: flex; gap: 8px; flex: none; margin-left: 16px; }
.ghost.sm { padding: 6px 11px; font-size: 12.5px; }

/* National public holidays (2026-10-06), after the box that shipped on the agents app. */
.hofind { position: relative; margin-top: 14px; }
.hoq { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 15px; background: #fff; outline: none; }
.hoq:focus { border-color: var(--accent); }
.homenu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px -12px rgba(43, 26, 28, 0.28); max-height: 280px; overflow-y: auto; padding: 6px; }
.hoopt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer; text-align: left; }
.hoopt:hover { background: var(--soft); }
.hoopt i, .homark { font-style: normal; font-size: 12px; font-weight: 700; color: var(--subtle); }
.horule { height: 1px; background: var(--line); margin: 6px 4px; }
.hoflag { font-size: 18px; line-height: 1; flex: none; }
.hoflag.big { font-size: 26px; }
.holist { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.horow { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 14px; }
.hohead { display: flex; align-items: flex-start; gap: 12px; }
.hohead b { display: block; font-size: 15px; }
.hohead .homark { display: block; margin-top: 1px; }
.hohead small { display: block; color: var(--muted); font-size: 13px; }
.hox { border: 1px solid var(--line); background: #fff; border-radius: 999px; width: 30px; height: 30px; flex: none; font-size: 13px; color: var(--muted); cursor: pointer; }
.hox:hover { border-color: var(--accent); color: var(--accent); }
.hotweak { margin: 10px 0 0 38px; }
.hodays { margin: 10px 0 0 38px; }
.opt.hotell b { white-space: normal; overflow: visible; text-overflow: clip; }
/* The ✕ belongs to the card, not the text: pinned to its top-right corner so it
   sits in the same place on every row whatever the country's name. */
.horow { position: relative; }
.horow .hohead { padding-right: 40px; }
.horow .hox { position: absolute; top: 10px; right: 10px; }

/* Link studio as a large modal (2026-10-06), opened from an event type's
   "Make a new link". The studio's own heights are tied to the window, so in the
   modal they are re-tied to the box: the box is the scroller, the rail sticks to
   its top, and the inner scrollers lose the space the box's margin takes. */
.modalbox.stbox { width: min(1400px, 100%); height: calc(100vh - 32px); max-height: none; overflow-y: auto; background: var(--canvas); border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(29, 22, 51, 0.55); }
.stbox .studio { max-width: none; padding: 18px; }
.stbox .rail { top: 0; }
.stbox .railscroll { max-height: calc(100vh - 32px - 150px); }
.stbox .stbody { max-height: calc(100vh - 32px - 60px); }
.stmhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 6px 12px; }
.stmhead b { font-size: 15px; }
.stmhead .close { position: static; }

/* ---- email door: mail mark and source as two equal tiles (from arrival-mock) ---- */
.apair { position: relative; display: inline-flex; align-items: center; flex: none; }
.apair .ptile { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--panel); font-style: normal; }
.apair .ptile + .ptile { margin-left: -5px; }
.apair .ptile svg, .apair .ptile img { width: 100%; height: 100%; display: block; }
.apair .ptile.glyph { background: #fff; box-shadow: 0 0 0 2px var(--panel), inset 0 0 0 1px var(--line); padding: 5px; }
.apair .ptile.glyph img { border-radius: 50%; }
.apair .pflag { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 2.5px var(--line); font-style: normal; font-size: 12px; line-height: 1; }
.crow .apair .ptile, .aprow .apair .ptile { width: 25px; height: 25px; border-radius: 8px; }
.crow .apair .ptile.glyph, .aprow .apair .ptile.glyph { padding: 4px; }
.crow .apair .pflag, .aprow .apair .pflag { width: 14px; height: 14px; font-size: 10px; right: -4px; bottom: -4px; }
/* The emoji flag is drawn well inside its own box, so at 12px it reads as a
   speck. Blow it up past the disc and let the circle crop it: the flag fills
   the badge edge to edge, the badge stays the same size. */
.pflag { overflow: hidden; }
.pflag span { display: block; font-size: 24px; line-height: 1; }
.crow .pflag span, .aprow .pflag span { font-size: 20px; }
/* Circle flags (HatScripts/circle-flags, MIT): already round, so they fill the
   badge with only the white ring around them. */
.pflag { padding: 0.5px; }
.pflag img { width: 100%; height: 100%; display: block; border-radius: 50%; }
img.fl { width: 14px; height: 14px; vertical-align: -2px; }
/* Slice properties: a short list under the explanation in the Slices card. */
.slprops { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
/* The studio modal's close, in the modal's own corner rather than the rail. */
.modalbox.stbox { position: relative; }
.stbox .stx { position: absolute; top: 12px; right: 12px; z-index: 5; }
.stbox .studio .pv { margin-top: 38px; }

/* ---- Booking settings: the library editor (2026-10-06) ---- */
/* Every Booking item in Settings uses the Link settings shape; these are the
   few pieces it needs that links did not. */
.lbin { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 15px; background: #fff; outline: none; }
.lbin:focus { border-color: var(--accent-line); }
textarea.lbin { resize: vertical; line-height: 1.5; }
.lbkv { display: grid; gap: 0; margin-top: 4px; }
.lbkv > div { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid #f5efed; font-size: 14px; }
.lbkv > div:first-child { border-top: 0; }
.lbkv span { flex: 0 0 170px; color: var(--muted); font-weight: 700; }
.lbkv b { min-width: 0; word-break: break-all; }
.lbkv code { font-size: 12.5px; }
.lbchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lbmap { display: grid; justify-items: center; gap: 2px; padding: 26px 16px; margin-bottom: 12px; border-radius: 16px; background: repeating-linear-gradient(45deg, #f3ece9 0 10px, #f7f1ef 10px 20px); text-align: center; }
.lbmap span { font-size: 26px; }
.lbmap small { color: var(--muted); font-weight: 700; }
.lbfound { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.lbfound b { display: block; }
.lbfound small { color: var(--muted); font-weight: 700; }
.lbphoto { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); font-weight: 700; }
.lbav { display: flex; align-items: center; gap: 14px; }
.lbav span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 900; font-size: 22px; }
.lbweek { display: grid; gap: 6px; margin-top: 14px; }
.lbday { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.lbday .ck { width: 80px; padding: 0; }
.lbday select { width: auto; }
.lbday.off .ck span { color: var(--subtle); }
.lbq { padding: 14px 0; border-top: 1px solid #f5efed; }
.lbq > b { display: block; font-size: 15px; }
.lbq > small { display: block; color: var(--muted); font-weight: 700; margin: 2px 0 8px; }
.lbqf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.lbqf .soft { margin-left: auto; }
.req { color: var(--accent); font-style: normal; }
.fopt { font-style: normal; font-weight: 600; color: var(--subtle); margin-left: 4px; }
.danger.btn { background: #b42318; border-color: #b42318; color: #fff; }
.soft.danger { color: #b42318; }
.lbopen { text-decoration: none; }
/* Ad hoc − (2026-10-06): time taken away from the template, drawn as struck-out
   red over the faint template, and a per-day − to take the whole day off. */
.avwin.neg { border-color: #b4231880; background: repeating-linear-gradient(135deg, #b4231822 0 5px, #b4231810 5px 10px); color: #b42318; }
.avwin.neg:hover { border-color: #b42318; }
.avhead > div { position: relative; }
.avdayx { display: block; margin: 3px auto 0; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #b42318; font-weight: 900; font-size: 13px; line-height: 1; cursor: pointer; }
.avdayx:hover { border-color: #b42318; }
.avdayx.on { background: #b42318; border-color: #b42318; color: #fff; }
/* A whole day taken off: the column itself is struck through, not one tall block. */
.avcol.dayoff { background: repeating-linear-gradient(135deg, #b423181c 0 6px, transparent 6px 12px); }
.avcol.dayoff .avwin.inh { opacity: 0.35; }
/* The drawer header sits above calendar blocks scrolling under it. */
.dh { z-index: 6; }
/* Ad hoc −: the template shown as itself, full strength, since it is what is
   being edited; the struck-out red sits on top of it. */
.avwin.inh.tplv { background: #8a243326; border: 1px solid #8a243380; color: #c2185b; }
.avwin.neg:not(.inh) { z-index: 3; }
/* Availability zoom: the hour height comes from --hpx, set on the grid. */
.avgut span { height: var(--hpx, 20px); }
.avcol { background-image: repeating-linear-gradient(transparent 0 calc(var(--hpx, 20px) - 1px), #f8f3f1 calc(var(--hpx, 20px) - 1px) var(--hpx, 20px)); }
.avzoom { display: inline-flex; align-items: center; gap: 2px; }
.avbody { height: min(480px, calc(var(--hpx, 20px) * 24)); overflow-y: auto; }
.avbody > .avgut, .avbody > .avcol { height: calc(var(--hpx, 20px) * 24); }
/* Ad hoc −, revised: the template is drawn already cut, and the cut-out time is
   plain white, so the column reads as the template for that date. The white
   piece keeps a faint dashed edge only so it can still be grabbed and moved. */
.avwin.neg:not(.inh) { background: #fff; border: 1px dashed #e3d3d0; color: var(--subtle); }
.avwin.neg:not(.inh):hover { border-color: #b42318; color: #b42318; }
.avcol.dayoff { background: #fff; }
/* Ad hoc +: added time in green beside the template it adds to. */
.avwin.pos { border-color: #2f8a5a99; background: #2f8a5a26; color: #1f6b44; }
.avwin.pos:hover { border-color: #1f6b44; }
.avwarn { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #fff4d6; border: 1px solid #f0d58a; color: #7a5406; font-size: 13.5px; line-height: 1.5; }
.avwarn b { display: block; color: #5c3f04; margin-bottom: 2px; }
/* The weekly template store, as a modal. */
.modalbox.tplbox { position: relative; width: min(720px, 100%); background: var(--panel); border-radius: 22px; padding: 24px 26px; box-shadow: 0 40px 80px -30px rgba(29, 22, 51, 0.55); }
.tplbox h2 { font-size: 21px; margin-right: 44px; }
.tplbox .stx { position: absolute; top: 14px; right: 14px; }
.tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.avbar { flex-wrap: wrap; row-gap: 8px; }
.avbar .soft { white-space: nowrap; }
.avfrom { margin: 0 2px 8px; font-size: 13.5px; color: var(--muted); }
.avfrom b { color: var(--ink); }
/* A fact shown in an option row: looks like the picked option, but is not a control. */
.opt.static { cursor: default; }
.dufafter { font-weight: 700; color: var(--muted); }
/* Gaps around events, as deployed: a side per gap, its exception tick, and a
   "What's this?" that opens the example in place. */
.gapside { padding: 4px 0 12px; border-bottom: 1px solid #f5efed; margin-bottom: 8px; }
.gapside .dufields { margin-top: 8px; }
.gaptick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.gaptick .ck { padding: 0; font-size: 13.5px; }
.gaptick .ck.off { opacity: 0.45; cursor: default; }
.gapbtn, .gaptick .linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 800; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---- My availability (2026-10-06): one event type's raw open time ---- */
.avlri b { display: flex; align-items: center; gap: 6px; }
.avlri .eic { width: 18px; height: 18px; }
.avlri small .cdot { width: 8px; height: 8px; }
.avlkey { display: grid; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.avlkey span { display: flex; align-items: center; gap: 8px; }
.avlkey .avsw { width: 16px; height: 12px; border-radius: 3px; flex: none; }
.avsw.open { background: #2f8a5a33; border: 1px solid #2f8a5a99; }
.avsw.gap { background: repeating-linear-gradient(135deg, #e6b80055 0 3px, #fff4d6 3px 6px); border: 1px solid #d9a600; }
.avsw.booked { background: #8a2433; }
.avsw.steer { background: #5b6b7c; }
.avsw.hol { background: repeating-linear-gradient(135deg, #b4231833 0 3px, #fff 3px 6px); border: 1px solid #b4231866; }
.avlfrom { display: grid; gap: 4px; }
.avllink { text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 6px 8px; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); cursor: pointer; }
.avllink em { display: block; font-style: normal; font-weight: 600; font-size: 12px; color: var(--muted); }
.avllink:hover { background: var(--panel); border-color: var(--line); }
.avlfor { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--muted); }
.avlfor .eic { width: 18px; height: 18px; }
.avl { position: absolute; left: 3px; right: 3px; border-radius: 6px; overflow: hidden; font-size: 10.5px; line-height: 1.25; padding: 2px 5px; }
.avl b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avl small { display: block; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avl.base { background: #f4f8f5; border: 1px dashed #2f8a5a66; z-index: 1; }
.avl.open { background: #2f8a5a2b; border: 1px solid #2f8a5a99; color: #1f6b44; z-index: 2; }
.avl.gap { background: repeating-linear-gradient(135deg, #e6b80040 0 4px, #fff4d6 4px 8px); border: 1px dashed #d9a600; z-index: 2; padding: 0; }
.avl.booked { background: #8a2433; color: #fff; z-index: 3; }
.avl.steer { background: #5b6b7c; color: #fff; z-index: 3; }
.wkcol.avlhol { background: repeating-linear-gradient(135deg, #b4231814 0 6px, transparent 6px 12px); }
.wkcol.avlhol .avl.base { opacity: 0.4; }
.avlholl { position: absolute; left: 4px; right: 4px; top: 4px; z-index: 4; font-size: 10.5px; font-weight: 800; color: #b42318; background: #fff; border: 1px solid #b4231855; border-radius: 6px; padding: 3px 5px; }
.wkcol.avlpast { opacity: 0.55; }
.avsw.base { background: #f4f8f5; border: 1px dashed #2f8a5a99; }
.avl.soon { background: repeating-linear-gradient(135deg, #8a6f7233 0 4px, #f3ece9 4px 8px); border: 1px dashed #b49a9c; z-index: 2; }
.avsw.soon { background: repeating-linear-gradient(135deg, #8a6f7255 0 3px, #f3ece9 3px 6px); border: 1px dashed #b49a9c; }

/* Schedule and My availability (2026-10-06): the page no longer scrolls as one.
   The side column scrolls on its own, and the week scrolls under its own fixed
   day header, so the hours and the filters can each be reached without losing
   the other. */
@media (min-width: 901px) {
	.evpage { height: 100vh; overflow: hidden; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
	.evside { position: static; top: auto; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
	.evmain { display: flex; flex-direction: column; min-height: 0; }
	.evmain > .wk { flex: 1; min-height: 0; overflow-y: auto; }
	.evmain > .evlist { flex: 1; min-height: 0; overflow-y: auto; }
	.evmain > .appsub { flex: none; }
	.wkhead { position: sticky; top: 0; z-index: 6; background: var(--panel); }
	.wkbody { height: 1100px; }
}
.avlsay { margin: 2px 6px 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* The Google Calendar mark beside a booking calendar name, so it reads as a calendar, not a person. */
.gcal { width: 14px; height: 14px; flex: none; object-fit: contain; vertical-align: -2px; margin-right: 4px; }
.opt.dis { opacity: 0.55; cursor: default; }
/* Chat agent's POV: the follow-up for the picked voice, indented under it. */
.povsub { margin: 4px 0 12px 14px; padding: 12px 0 2px 16px; border-left: 2px solid var(--accent-line); }
.povans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14.5px; line-height: 1.5; }
.povans span { font-weight: 800; color: var(--muted); }
.povans input { flex: 1 1 220px; min-width: 0; }
/* Gmail mode (mock): a feature that needs Google Workspace says so in place. */
.wsneed { background: #f2f6fd; border: 1px solid #c9d8f2; border-radius: 14px; padding: 12px 14px; color: #33415c; font-size: 13.5px; line-height: 1.5; }
.wsneed b { display: block; color: #1a3a73; margin-bottom: 3px; }
.wsneed p { margin: 0; }
.wsneed p + p { margin-top: 8px; }
.me.ws { box-shadow: 0 0 0 2px #1a73e8; }
.wsneed a { color: #1a3a73; font-weight: 800; }
/* The menu sidebar still scrolls, without a visible bar. */
.side { scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.ctryf { margin-top: 10px; }
.ctryf .labadd select { flex: 1; min-width: 0; }
/* Event types: the two kinds, each with its own heading. */
.evkind { margin: 26px 4px 10px; }
.evkind:first-of-type { margin-top: 8px; }
.evkind h2 { font-size: 19px; }
.evkind p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
/* Event details: can be made taller, never shorter than its starting five lines. */
.detailsin { min-height: 135px; }
.tzbox { background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.tzbox p { margin: 0; }
/* Booking rules: a sentence with a number in it, and homework rows. */
.caprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; font-weight: 700; }
.caprow .enin input { width: 64px; }
.hwrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.hwrow b { flex: 1; min-width: 0; }
.hwk { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.pick.dis { opacity: 0.4; }
/* Link settings: Testing is the first item of the section menu, in maroon. */
.stnav .ri.stest { color: var(--accent); font-weight: 900; }
.stnav .ri.stest.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.stestsec .tsim { grid-template-columns: minmax(0, 1fr); }
/* Testing: the chat stretches to the height set by the links menu. */
.stestsec { display: flex; flex-direction: column; margin-bottom: 0; }
.stestsec .webchat { flex: 1; height: auto; min-height: 0; }
/* Testing: the chat is the box; no section card around it, no fade. */
.sec.stestsec { background: none; border: 0; padding: 0; border-radius: 0; }
.tbar.tfoot { margin: 10px 0 0; flex: none; }
.tbar.tfoot a.soft { text-decoration: none; }
/* The section menu (Testing, Overview, ...) scrolls on its own, without a bar. */
.stnav { max-height: calc(100vh - 60px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.stnav::-webkit-scrollbar { display: none; }
.stbox .stnav { max-height: calc(100vh - 32px - 60px); }
/* New link, first step: domain groups, and the two actions below them. */
.wzgrp { margin: 16px 2px 6px; font-size: 11.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.wzgrp:first-child { margin-top: 0; }
.wzopt.wzact { border-style: dashed; }
/* Room inside the scrolling menu for the selected item's shadow, so the edges do not clip it. */
.stnav { padding: 4px 14px 18px; margin: -4px -14px -18px; }
/* New link in Link settings: the wizard lines up with the top of its contents list. */
.studio .stbody > .wz { margin-top: 0; }
/* Who booking is for answer: one block per answer, three-way asks inside. */
.whosec { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.whosec h3 { margin: 0 0 8px; font-size: 15px; }
.whosub { margin: 14px 0 4px; font-size: 11.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.whoask { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 0; font-size: 14px; font-weight: 700; }
.whoask .seg button { white-space: nowrap; }
.whoex { margin: -4px 0 8px; font-style: italic; font-size: 13px; line-height: 1.5; color: var(--muted); }
.seg button.dis { opacity: 0.35; cursor: not-allowed; }
/* With the drawer or a modal open, scrolling past its end must not move the page underneath. */
#drawer, #drawerx, #modal, .modalbox { overscroll-behavior: contain; }
html:has(#drawer:not([hidden])), html:has(#modal:not([hidden])) { overflow: hidden; }

/* Breadslice forms (2026-10-07): question cards, the test chat and responses */
.fq { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 12px; margin-top: 12px; background: var(--panel); }
.fq .f { margin-top: 12px; }
.fqhd { display: flex; align-items: center; gap: 6px; }
.fqhd .lbin { flex: 1; min-width: 0; font-weight: 700; }
.fqhd .hostx:disabled { opacity: 0.3; cursor: default; }
.fqn { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--canvas); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--muted); margin-right: 4px; }
.fqrow { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-left: 36px; }
.fqsel { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; background: #fff; }
.fqreq { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.fqreq input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.fqseg { max-width: 320px; }
.fqwhy { margin: 6px 0 8px; }
.fqtest { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; margin-top: 10px; }
.fqchat { height: 460px; }
.fqchat .wclog .bub { max-width: 82%; }
.fqside { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--panel); }
.fqside > b { display: block; font-size: 15px; margin-top: 4px; }
.fqside > small { display: block; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.fqside .f { margin-top: 12px; }
.fqstep { font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.fqr { border: 1px solid var(--line); border-radius: 14px; margin-top: 8px; background: var(--panel); overflow: hidden; }
.fqrhd { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 11px 14px; cursor: pointer; }
.fqrhd b { font-size: 14px; }
.fqrhd small { grid-column: 1; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.fqrhd span { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--muted); }
.fqrbody { border-top: 1px solid var(--line); padding: 4px 14px 12px; }
.fqra { padding-top: 10px; }
.fqra span { display: block; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.fqra p { margin: 2px 0 0; font-size: 14px; }
.fqra em { font-size: 12px; font-weight: 700; color: var(--accent); font-style: normal; }
@media (max-width: 1100px) { .fqtest { grid-template-columns: minmax(0, 1fr); } .fqrow { padding-left: 0; flex-wrap: wrap; } }

.opt b.wrap { white-space: normal; overflow: visible; }
.cseg { max-width: 260px; }
.hwsub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px 30px; }
.hwsub select { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; background: #fff; }
.hwsub .lbin { flex: 1; }
.chsub { margin: 4px 0 8px 30px; }
.opt.dim { opacity: 0.55; cursor: default; }
.vrrow { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.wvault { display: grid; gap: 4px; margin-bottom: 14px; }
.wgrid .wbals.three { flex-wrap: nowrap; gap: 16px; }
.wgrid .wbals.three .wb + .wb { padding-left: 16px; }
.wgrid .wb.big b { font-size: 28px; }
.wgrid .wb b { font-size: 19px; white-space: nowrap; }
.wgrid .wb i { display: block; margin: 2px 0 0; }
.wic.wlogo { padding: 0; overflow: hidden; background: none; }
.wic.wlogo img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.wcard .wic.wlogo.usdc { background: #2775ca; box-shadow: none; }

/* Payment history, statement style (2026-10-07) */
.hpanel { padding: 4px 0; }
.hday { font-size: 12px; font-weight: 900; letter-spacing: 0.04em; color: var(--muted); padding: 14px 18px 6px; }
.hlist { display: flex; flex-direction: column; }
.hrow { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 10px 18px; cursor: pointer; border-radius: 0; }
.hrow:hover { background: var(--canvas); }
.hrow .grow { min-width: 0; }
.hrow b { display: block; font-size: 14.5px; }
.hrow small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 1px; }
.hic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; background: var(--canvas); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.hic.in { background: #e7f4ee; color: #2f7a5c; box-shadow: none; }
.hic.neu { color: var(--muted); }
.hamt { text-align: right; flex: none; }
.hamt b { font-variant-numeric: tabular-nums; }
.hamt b.in { color: #2f7a5c; }
.hamt b.neu { color: var(--muted); font-weight: 700; }
.hgo { flex: none; font-size: 12.5px; font-weight: 800; color: var(--accent); margin-left: 4px; }

/* Link settings and library modals (2026-10-09): fill the box exactly instead
   of sizing each column with its own calc(100vh - …). The rail's old cap
   (100vh - 182px) plus its header and New button came out taller than the box,
   so the Testing panel (sized to the rail) pushed the whole modal into a scroll. */
.stbox .studio { height: 100%; align-items: stretch; }
.stbox .rail { display: flex; flex-direction: column; min-height: 0; }
.stbox .railscroll { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.stbox .stmain { min-height: 0; height: 100%; }
.stbox .stsplit { height: 100%; }
.stbox .stnav, .stbox .stbody { max-height: 100%; }
/* Testing reads as an action, not a heading (2026-10-09): a soft maroon button
   with a play mark when not selected, filled when it is. */
.stnav .ri.stest { display: flex; align-items: center; gap: 9px; color: var(--accent); font-weight: 800; background: var(--accent-soft); border: 1.5px solid var(--accent-line); margin-bottom: 8px; }
.stnav .ri.stest:hover { border-color: var(--accent); }
.stnav .ri.stest .stplay { font-size: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.stnav .ri.stest.on .stplay { background: #fff; color: var(--accent); }
/* The picked label is ringed in its own colour, not the brand maroon (2026-10-09). */
.lab.sel { box-shadow: 0 0 0 2px var(--selc, var(--accent)); }
/* The phone preview lines up with the top of the settings box (2026-10-09); the
   right margin keeps the close button off the phone. */
.stbox .studio .pv { margin-top: 0; margin-right: 46px; }
/* Picture crop (2026-10-09) */
.cropper { margin-top: 4px; }
.cropf { width: 220px; height: 220px; border-radius: 16px; background-repeat: no-repeat; background-color: #222; position: relative; cursor: grab; touch-action: none; overflow: hidden; }
.cropf:active { cursor: grabbing; }
.cropring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -2px; pointer-events: none; }
.cropz { width: 220px; accent-color: var(--accent); }
.cropthumb { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; flex: none; box-shadow: inset 0 0 0 1px var(--line); }
/* Access policing (2026-10-09) */
.limh { font-size: 15px; margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.chantag { display: inline-block; font-size: 11px; font-weight: 800; color: var(--muted); background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.limsub { margin: 12px 0; }
.ctryhd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ctryf.dim .lbchips, .ctryf.dim .labadd { opacity: 0.45; }
.limrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 10px; font-weight: 700; color: var(--muted); font-size: 14px; }
.limrow input { width: 80px; text-align: center; }
.ctryf .lab .hoflag { font-size: 15px; }
.ctryf .hofind { margin-top: 10px; }
.ctryacts { display: flex; gap: 14px; }
/* Telegram bots (2026-10-09) */
.tgav { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background-size: cover; background-position: center; background-color: #e8f4fb; }
.tgav.tglogo svg { width: 60%; height: 60%; }
.tgav.grp { background: #e8f4fb; color: #229ed9; font-weight: 900; font-size: 15px; }
.tgcard { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin-bottom: 8px; overflow: hidden; }
.tghead { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 11px 14px; cursor: pointer; }
.tghead b { display: block; font-size: 14.5px; }
.tghead small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.tghead .ok { color: #2f7a5c; } .tghead .warn { color: #c47a00; }
.tgbody { border-top: 1px solid var(--line); padding: 10px 14px 14px; }
.tgguide { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; }
.tgguide li { margin-top: 4px; }
.tgopt .tgav { margin-right: 2px; }
.tggrp { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; margin-top: 6px; }
.tggrp b { display: block; font-size: 14px; }
.tggrp small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.tggrp.sm { padding: 7px 10px; }
.tgmir .fqsel { width: 100%; }
.tghead .grow, .tggrp .grow { flex: 1; min-width: 0; }
.tghead .hgo { color: var(--muted); }
/* Telegram bot group headings sit flush with the cards (2026-10-09). */
.iosh.tgh { padding-left: 0; padding-right: 0; margin-left: 0; }
.hint.tgsub { margin: -4px 0 8px; }
/* Platform section (2026-10-09) */
.pfrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 11px 14px; margin-top: 10px; }
.pfrow .grow { flex: 1; min-width: 0; }
.pfrow b { display: block; font-size: 14.5px; }
.pfrow small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--canvas); }
.pfic img, .pfic svg { width: 22px; height: 22px; }
.pfsub { margin: 8px 0 4px 18px; padding-left: 14px; border-left: 2px solid var(--line); }
/* Link settings unsaved-changes bar (2026-10-09) */
.stsave { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; background: var(--ink, #2b1a1c); color: #fff; border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: 0 18px 40px -16px rgba(43, 26, 28, 0.55); font-size: 14px; max-width: calc(100% - 40px); }
.stsave .grow { flex: 1; min-width: 0; }
.stsave b { font-weight: 800; }
.stsave .soft { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.stsave .soft.danger { color: #ffb3b3; }
.stsave.ask { background: var(--accent); }

/* Chat balance (2026-10-09): balance, period boxes, per-day bar chart */
.balhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.balhead .acts { margin: 0; }
.balboxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.balbox { text-align: left; background: var(--panel); border: 1px solid #efe4e1; border-radius: 16px; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; }
.balbox small { display: block; color: var(--muted); font-weight: 700; font-size: 12px; }
.balbox b { display: block; font-size: 20px; margin: 4px 0 2px; }
.balbox span { display: block; color: var(--muted); font-size: 12px; }
.balbox.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.balbox.on b { color: var(--accent); }
.balfilt { overflow-x: auto; margin-bottom: 12px; }
.balfilt .seg { display: inline-flex; }
.balfilt .seg button { flex: 0 0 auto; white-space: nowrap; }
.balsub { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.balsub b { color: var(--ink, inherit); }
.balchart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 180px; padding: 0 0 22px; border-bottom: 1px solid #efe4e1; }
.balmax { position: absolute; top: -2px; left: 0; font-size: 11px; color: var(--muted); }
.balchart::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; border-top: 1px dashed #efe4e1; }
.balbar { position: relative; flex: 1; height: calc(100% - 14px); display: flex; align-items: flex-end; }
.balbar i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: 0.85; }
.balbar:hover i { opacity: 1; }
.balbar em { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.balbar:first-child em, .balmax + .balbar em { left: 0; transform: none; }
.balbar:last-child em { left: auto; right: 0; transform: none; }
.balsplit { margin-top: 14px; }
.balsplit .kv span:first-child { width: 130px; flex-basis: 130px; }
@media (max-width: 700px) { .balboxes { grid-template-columns: repeat(2, 1fr); } }
.balhead .usebig { flex: 1; }

/* System prompt parts (2026-10-09) */
.sptools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.sptools .seg { display: inline-flex; }
.sptools .seg button { flex: 0 0 auto; white-space: nowrap; }
.sppart { border: 1px solid #efe4e1; border-radius: 14px; background: var(--panel); margin-bottom: 10px; overflow: hidden; }
.sppart.cond { border-style: dashed; background: #fcf8f7; }
.sph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px 0; font-size: 14px; }
.sph small { color: var(--muted); font-weight: 700; font-size: 12px; }
.spcond { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; }
.sppart pre { margin: 0; padding: 8px 14px 12px; white-space: pre-wrap; word-break: break-word; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: #4a3d3f; }
.spalways { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }

/* My availability multi-select (2026-10-09) */
.avlrow .ck { align-items: flex-start; }
.avlrow .ck input { margin-top: 3px; }
.avlname { display: grid !important; gap: 2px !important; }
.avlname b { display: flex; align-items: center; gap: 6px; }
.avlname .eic { width: 18px; height: 18px; }
.avlname small { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.avlrow .onlyb { right: 34px; top: 16px; }
.avlarr { flex: none; align-self: flex-start; margin-top: 2px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 18px; cursor: pointer; transition: transform 0.15s; }
.avlarr:hover { background: var(--panel); color: var(--accent); }
.avlrow.open .avlarr { transform: rotate(180deg); }
.avlsub { display: grid; gap: 2px; margin: 0 0 10px 26px; padding: 6px 0 6px 8px; border-left: 2px solid var(--line); }
.avl.open { background: color-mix(in srgb, var(--ac, #2f8a5a) 17%, transparent); border-color: color-mix(in srgb, var(--ac, #2f8a5a) 60%, transparent); color: color-mix(in srgb, var(--ac, #2f8a5a) 80%, #000); }
.avlfor { flex-wrap: wrap; gap: 12px; }
.avlkeyc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.avlkeyc i { width: 10px; height: 10px; border-radius: 3px; }

/* Link card shows the link's labels, not its address (2026-10-09) */
.lcard .lclabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }

/* Approvals: yours over theirs when time zones differ (2026-10-09) */
.aptz { display: grid; gap: 4px; }
.aptz b { font-weight: 800; }
.aptzgap { justify-self: start; font-size: 12px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
.aptz small { display: inline; }

/* Settings › Discord (2026-10-09) */
.dch { font-weight: 600; color: var(--muted); font-size: 13px; }
.tghead .bad { color: #b42318; }
.dcban { display: grid; gap: 2px; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #eef7f2; border: 1px solid #2f7a5c33; font-size: 13.5px; }
.dcban b { color: #2f7a5c; } .dcban span { color: var(--muted); }
.dcban.warn { background: #fff7e6; border-color: #c47a0033; } .dcban.warn b { color: #c47a00; }
.dcban.bad { background: #fdecec; border-color: #b4231833; } .dcban.bad b { color: #b42318; }
.dcban .soft { justify-self: start; margin-top: 6px; }
.dcsrv { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f5efed; }
.dcsrv b { display: block; font-size: 14px; } .dcsrv small { display: block; color: var(--muted); font-size: 12.5px; }
.dcgic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 900; flex: none; }
.dcstep { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #f5efed; }
.dcstep:first-child { border-top: 0; padding-top: 0; }
.dcn { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 900; font-size: 13px; display: grid; place-items: center; flex: none; }
.dcstep .hint { margin: 4px 0 6px; }
.dcurl { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dcurl code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #f5efed; border-radius: 8px; padding: 6px 9px; font-size: 12px; }
.opt.dis { opacity: 0.55; cursor: not-allowed; }

/* Approvals tabs (2026-10-09) */
.aptabs { margin: 4px 0 12px; }
.aptabs em { font-style: normal; font-size: 12px; opacity: 0.7; margin-left: 4px; }
.hpill.okp { background: #e8f5ee; color: #2f7a5c; }
.hpill.nop { background: #f5efed; color: var(--muted); }

/* View event drawer (2026-10-09) */
.kevp { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.kevp b { display: block; font-size: 14px; } .kevp small { display: block; color: var(--muted); font-size: 12.5px; }
.kevp .grow { flex: 1; min-width: 0; }
.kevgear { margin-left: 6px; text-decoration: none; color: var(--muted); font-size: 15px; } .kevgear:hover { color: var(--accent); }
.kv .lclabs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kv .lclabs > span:first-child { width: auto; flex: 0 0 auto; color: inherit; font-weight: inherit; }
.kcoh + .kcoh { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.kcohh { display: block; font-size: 14px; margin-bottom: 2px; }
.khist { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid #f5efed; font-size: 13.5px; }
.khist:first-child { border-top: 0; }
.khw { flex: 0 0 118px; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.khist .grow { flex: 1; min-width: 0; } .khist b { display: block; } .khist small { display: block; color: var(--muted); font-size: 12px; }
.bwtabs { display: inline-flex; margin: 0 0 14px; }
.bwtabs button { flex: 0 0 auto; padding: 8px 16px; }
.bwtabs em { font-style: normal; font-size: 12px; opacity: 0.7; margin-left: 4px; }
a.bwrow { text-decoration: none; color: inherit; }
a.bwrow:hover b { color: var(--accent); }
.iosi img { width: 19px; height: 19px; display: block; }
.avl.avlov { position: absolute; z-index: 0; pointer-events: auto; border-radius: 6px; font-size: 10.5px; padding: 2px 5px; overflow: hidden; }
.wkcol .evb { z-index: 2; }

/* Link board stacks (2026-10-10): a link on several platforms takes one spot */
.qstack { position: relative; display: grid; isolation: isolate; }
.qstack::before, .qstack::after { content: ''; position: absolute; inset: 0; border-radius: 26px; z-index: 0; }
.qstack::before { transform: translate(8px, 8px) rotate(2deg); background: var(--c2); opacity: 0.85; }
.qstack::after { transform: translate(14px, 14px) rotate(4deg); background: var(--c3); opacity: 0.7; z-index: -1; }
.qstack[style*="--n:2"]::after { display: none; }
.qstack .qfront { position: relative; z-index: 1; }
.qpfs { position: absolute; z-index: 2; right: 12px; bottom: -10px; display: flex; gap: 4px; }
.qpfs i { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #8a2433; border: 2px solid #fff; border-radius: 999px; padding: 1px 8px; }
.qpfs i.tgc { background: #229ed9; } .qpfs i.dcc { background: #5865f2; }
.qc.dcc { background: linear-gradient(160deg, #7b84f5, #5865f2); box-shadow: 0 16px 30px -18px rgba(88, 101, 242, 0.9); }
.bigq.dcc { background: linear-gradient(160deg, #7b84f5, #5865f2); }
.dcb img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.qfan { position: fixed; inset: 0; z-index: 79; background: rgba(29, 16, 19, 0.6); backdrop-filter: blur(4px); display: grid; place-items: center; align-content: center; gap: 14px; cursor: pointer; padding: 16px; }
.qfanin { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 900px; }
.qfanin .qc { width: 250px; cursor: zoom-in; }
.qfan > small { color: #fff; font-weight: 700; opacity: 0.85; }
.rvia { flex: none; }
.rvia button { display: grid; line-height: 1.15; white-space: nowrap; padding: 4px 12px; text-align: center; }
.rvia button b { font-size: 12.5px; } .rvia button small { font-size: 11.5px; font-weight: 700; opacity: 0.75; }
/* With the send-to tabs, everything in the composer matches their height (2026-10-10). */
.composer:has(.rvia) > .jbtn { width: 48px; height: 48px; flex: 0 0 48px; }
.composer:has(.rvia) > input { height: 48px; box-sizing: border-box; }
.composer:has(.rvia) > .btn { height: 48px; padding-left: 20px; padding-right: 20px; }
button.amini.flat { font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.amini.flat:hover { border-color: var(--accent-line); }
.lcard .chev { margin-left: 6px; color: var(--muted); }
.fitsg { flex: 0 0 22px !important; width: 22px !important; text-align: center; font-weight: 900; color: var(--muted); }
.fitsg.up { color: #2f7a5c; } .fitsg.dn { color: #b42318; }
/* The settings rail still scrolls, without a visible scroll bar (2026-10-10). */
.railscroll { scrollbar-width: none; }
.railscroll::-webkit-scrollbar { display: none; }
.kfund .kresb { letter-spacing: 0; } .kfund .kresb button { color: var(--ink); font-size: 13px; }

/* ---- Settings pages on the rail, narrowing (2026-10-10) ----
   Above 1400px: rail | sections | section | preview.
   ≤1400px: the preview goes (the section still shows it inline where it has one).
   ≤1100px: the sections become a row of tabs above the section, scrolled sideways.
   ≤900px:  the app's own sidebar moves to the bottom, so the rail narrows to 220px.
   ≤760px:  drill down. The rail is the page; picking an item shows only that item,
            with a back bar to the list. */
.mback { display: none; }
@media (max-width: 1100px) {
	.stsplit { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.stnav { display: flex; gap: 6px; overflow-x: auto; max-height: none; padding: 2px 2px 6px; margin: 0; scroll-snap-type: x proximity; }
	.stnav .ri { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; padding: 7px 14px; border-radius: 999px; scroll-snap-align: start; }
	.stnav .ri.on { border-color: var(--line); }
	.stnav .ri.on { box-shadow: none; }
	.stnav .ri.stest { padding: 6px 14px 6px 8px; }
	.stbody { max-height: none; padding-right: 0; }
}
@media (max-width: 900px) {
	.studio, .studio:not(:has(.pv)) { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 16px; }
}
@media (max-width: 760px) {
	.studio, .studio:not(:has(.pv)) { grid-template-columns: minmax(0, 1fr); }
	.studio[data-ml="list"] .stmain, .studio[data-ml="list"] .pv { display: none; }
	.studio[data-ml="item"] > .rail { display: none; }
	.rail { position: static; }
	.railscroll { max-height: none; }
	.rail .ri { padding: 12px 12px; }
	.mback { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; min-width: 0; }
	.mbackb { flex: none; border: 0; background: none; font: inherit; font-weight: 800; font-size: 14px; color: var(--accent); cursor: pointer; padding: 6px 0; }
	.mback b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
	.stbox .mback { display: none; }
}
/* The bottom bar on narrow screens (2026-10-10): the menu's items sit inside
   .sidebody, which stacks them, so the bar grew into a column over the page.
   Lay them out in a row that scrolls sideways; group headings and the footer go. */
@media (max-width: 900px) {
	.side .sidebody { flex-direction: row; overflow-x: auto; gap: 0; scrollbar-width: none; }
	.side .sidebody::-webkit-scrollbar { display: none; }
	.side .sidebody .si { flex: 0 0 auto; min-width: 72px; }
	.side .sidebody > :not(.si) { display: none; }
}
/* On phones a setting's label sits over its value, not beside it. */
@media (max-width: 760px) {
	.stbody .kv { flex-direction: column; gap: 2px; }
	.stbody .kv span:first-child { width: auto; flex: none; }
	.stbody .kv b { overflow-wrap: anywhere; }
}
.kfund > div + div { border-left: 1px solid var(--line); padding-left: 30px; }
.kevf { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f5efed; }
.kevf:first-of-type { border-top: 0; }
.kevf b { display: block; font-size: 14px; } .kevf small { display: block; color: var(--muted); font-size: 12.5px; }
.kevf .grow { flex: 1; min-width: 0; }
/* Test this link: as tall as the rail, which is the window less 62px of chrome (2026-10-11). */
.studio .stestsec { height: calc(100vh - 62px); min-height: 420px; }
@media (max-width: 760px) { .studio .stestsec { height: calc(100vh - 230px); min-height: 380px; } }
.obul { margin: 8px 0 0; padding-left: 18px; } .obul li { margin: 3px 0; font-weight: 700; }
/* Start again: the opening arrives one message at a time (2026-10-11). */
#tchat .bub.tpend { display: none; }
#tchat .bub.tin { animation: tin 0.28s ease-out; }
@keyframes tin { from { opacity: 0; transform: translateY(6px); } }
#tchat .tdots { display: inline-flex; gap: 4px; align-self: flex-start; padding: 12px 14px; width: auto; }
#tchat .tdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--subtle); animation: tdot 1s infinite ease-in-out; }
#tchat .tdots i:nth-child(2) { animation-delay: 0.15s; } #tchat .tdots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { #tchat .bub.tin, #tchat .tdots i { animation: none; } }
/* Show mock (2026-10-11): only where the preview column has been dropped; opens it in the drawer. */
.pvshow { display: none; margin: 0 0 6px; }
@media (max-width: 1400px) { .pvshow { display: inline-flex; } }
.pvd { display: flex; justify-content: center; padding: 8px 0 4px; }
.pvd .phone { width: 100%; max-width: 340px; }
.stbody label.opt { transition: background-color 0.2s, border-color 0.2s; }
.pwwrap { position: relative; margin: -2px 0 10px; }
.pwwrap input { width: 100%; padding-right: 76px; }
.pweye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; font: inherit; font-size: 13px; font-weight: 800; color: var(--accent); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.pweye:hover { background: var(--accent-soft); }
.ctplist { margin-bottom: 10px; } .ctplist .lbchips { margin-top: 8px; }
/* Access policing: one rule for dividers (2026-10-11). A divider sits between two
   items in a group, never under a heading or a field label, and a sub-block (Countries,
   Email screening and scoring) is an item like any toggle. */
.limsec .limh + .tog, .limsec .f + .tog, .limsec .limh + .limsub, .limsec .hint + .tog { border-top: 0; }
.limsec .tog + .limsub, .limsec .segnote + .limsub, .limsec .acts + .limsub, .limsec .limrow + .tog { border-top: 1px solid #f5efed; padding-top: 12px; }
.limsec .tog + .limsub, .limsec .limsub + .limsub { border-top: 1px solid #f5efed; padding-top: 12px; }
.limsec .tog + .segnote { margin-bottom: 14px; }
.limrow .enin input { width: 64px; }
/* A number whose toggle is off stays visible, greyed (2026-10-11). */
.limrow.off { opacity: 0.45; }
.limrow.off input { cursor: not-allowed; }
.sec .limh + .tog { border-top: 0; }
.tgmset { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; font-size: 13px; font-weight: 700; }
.tgmset .ok { color: #2f7a5c; } .tgmset .warn { color: #c47a00; }
/* Support contact cards (2026-10-11): one card per method; ticking it opens the box inside the same card. */
.supl { display: grid; gap: 8px; margin-top: 4px; }
.supc { border: 1.5px solid var(--line); border-radius: 16px; background: var(--panel); transition: border-color 0.2s, background-color 0.2s; }
.supc.on { border-color: var(--accent-line); background: var(--accent-soft); }
.suph { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.suph input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.suph b { font-size: 15px; }
.supb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.26s cubic-bezier(0.22, 0.8, 0.3, 1); }
.supb > div { overflow: hidden; padding: 0 16px 0 46px; }
.supc.on .supb { grid-template-rows: 1fr; }
.supc.on .supb > div { padding-bottom: 14px; }
.supb input { width: 100%; background: #fff; }
.supb > div { transition: padding-bottom 0.26s cubic-bezier(0.22, 0.8, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .supb, .supb > div, .supc { transition: none; } }
/* Room for the focused box's border and ring inside the clipping wrapper. */
.supc.on .supb > div { padding-top: 4px; }
.supc.on .suph { padding-bottom: 9px; }
.supb > div { transition: padding 0.26s cubic-bezier(0.22, 0.8, 0.3, 1); }
.supwa { display: inline-flex; margin: 0 0 8px; }
.supwa button { flex: 0 0 auto; padding: 5px 14px; }
.wzleave { width: min(440px, 100%); }
.lbren { display: flex; gap: 8px; align-items: center; } .lbren input { flex: 1; min-width: 0; }
/* Chips in a settings section wrap with even gaps (2026-10-11). */
.stbody .sum { display: flex; flex-wrap: wrap; gap: 8px; }
.stbody .sum .chip { margin: 0; }
.avpin { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; font-size: 13px; }
.tplbox .wzopt { width: 100%; margin-bottom: 8px; }
.tplwarn { display: grid; gap: 2px; margin-top: 12px; background: #fff7e6; border: 1px solid #c47a0033; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.tplwarn b { color: #8a5300; } .tplwarn span { color: var(--muted); }
.shrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f5efed; font-weight: 700; font-size: 14px; }
.shrow:first-of-type { border-top: 0; }
.shrow select { width: auto; }
.shadd { margin-top: 10px; } .shadd select { width: auto; flex: none; }
.shrow .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plmap { width: 100%; height: 200px; border: 0; border-radius: 12px; margin-top: 10px; background: #f5efed; display: block; }
.plfound { display: grid; gap: 2px; }
.pllinks { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pllinks a { color: var(--accent); }
.plhit { display: grid; gap: 2px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; font: inherit; cursor: pointer; }
.plhit:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.plhit b { font-size: 14px; } .plhit i { font-size: 12.5px; color: var(--muted); }
.plhead b { display: block; font-size: 15px; } .plhead small { display: block; color: var(--muted); font-size: 13px; }

/* Two parts side by side inside a settings section (2026-10-11). The section body is a
   container, so a split decides by the room it actually has, not by the window: the
   window can be wide while the section is squeezed between the list and the contents.
   Below 700px of section the parts stack, the side panel first under the main one;
   below 440px the small two-up field rows stack too. */
.stbody { container-type: inline-size; container-name: sec; }
@container sec (max-width: 700px) {
	.fqtest, .tsim, .apsplit { grid-template-columns: minmax(0, 1fr); }
	.fqtest > * , .tsim > *, .apsplit > * { min-width: 0; }
}
@container sec (max-width: 440px) {
	.two { grid-template-columns: minmax(0, 1fr); }
}
/* Test this form: side by side when the section has room, otherwise the question's
   settings move to the drawer behind an Edit question button (2026-10-11). */
@container sec (max-width: 700px) {
	.fqtest { grid-template-columns: minmax(0, 1fr); }
	.fqtest > .fqside { display: none; }
}
.fqmode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 10px; }
.fqmode .seg { display: inline-flex; } .fqmode .seg button { flex: 0 0 auto; white-space: nowrap; }
.fqnav { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.fqeq { margin-bottom: 10px; } .fqeq.now { border-color: var(--accent-line); }
.fqeqh { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fqeq > b { display: block; font-size: 15px; } .fqeq > small { display: block; color: var(--muted); font-size: 12.5px; }
/* The form test fills the window to the bottom, and no further (2026-10-11): the section
   takes the column's full height and the chat takes whatever is left in it. */
.stbody:has(.fqtest) { height: calc(100vh - 60px); }
.stbody:has(.fqtest) > .sec { height: 100%; margin-bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; }
.stbody:has(.fqtest) .fqtest { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.fqchatcol { display: flex; flex-direction: column; min-height: 0; }
.fqchatcol .fqchat { flex: 1; height: auto; min-height: 280px; }
.stbody:has(.fqtest) .fqside { align-self: start; }
.tfoot .fqmode { margin: 0; } .tfoot { flex-wrap: wrap; }
.wlrole { margin-bottom: 10px; } .wlrh { display: flex; align-items: center; gap: 8px; } .wlrh b { font-size: 15px; }
.wlcan { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 13.5px; }
.wlcan ul { margin: 4px 0 0; padding-left: 18px; } .wlcan li { margin: 2px 0; }
.wlcan .ok { font-weight: 800; color: #2f7a5c; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.wlcan .no { font-weight: 800; color: #b42318; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 760px) { .wlcan { grid-template-columns: 1fr; } }
.wlaccess th.c, .wlaccess td.c { text-align: center; } .wlaccess th { font-size: 11px; line-height: 1.3; }
.wlaccess td small { display: block; }
.wlp { font-weight: 900; color: var(--subtle); } .wlp.on { color: #2f7a5c; }
.wlck input { width: 17px; height: 17px; accent-color: var(--accent); }
.respbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.respbar .seg { display: inline-flex; } .respbar .seg button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rlogo { width: 18px; height: 18px; flex: none; border-radius: 4px; }
.fqrhd .rlogo { width: 22px; height: 22px; margin-right: 4px; }
.fqrhd { display: flex; align-items: center; gap: 8px; } .fqrhd .grow { flex: 1; min-width: 0; text-align: left; } .fqrhd .grow b, .fqrhd .grow small { display: block; }
/* Our dropdown (2026-10-11) */
.dd { position: relative; }
.ddb { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.ddb:hover, .dd.open .ddb { border-color: var(--accent-line); }
.ddb .ddl { color: var(--muted); font-weight: 700; font-size: 12px; } .ddb b { font-weight: 800; } .ddb i { font-style: normal; color: var(--muted); font-size: 11px; }
.ddm { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 18px 40px -20px rgba(29, 16, 19, 0.45); animation: pop 0.14s ease-out; }
.ddo { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.ddo:hover { background: var(--canvas); } .ddo.on { background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.rst { flex: none; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; background: #f5efed; color: var(--muted); }
.rst.rst-now { background: #e8f5ee; color: #2f7a5c; } .rst.rst-upcoming { background: var(--accent-soft); color: var(--accent); }

/* Payout balance: the selected card drives the history below (2026-10-11). */
.wcard[data-wasset] { position: relative; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.wcard[data-wasset]:not(.on) { background: transparent; }
.wcard[data-wasset]:not(.on):hover { border-color: var(--accent-line); background: var(--panel); }
.wcard[data-wasset].on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 12px 26px -20px rgba(138, 36, 51, 0.8); }
.wcard[data-wasset].on::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px; background: var(--panel); border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.wcard[data-wasset]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wcard[data-wasset] .acts { cursor: auto; }
.wcard .wtop .wshow { align-self: flex-start; white-space: nowrap; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted); border: 1px solid var(--line); }
.wcard.on .wtop .wshow { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.iosh.whead { margin-top: 26px; }
.iosh .wic.wlogo.mini { width: 20px; height: 20px; border-radius: 6px; padding: 0; box-shadow: none; }
.iosh .wic.wlogo.mini.usdc { background: #2775ca; }
.iosh .wic.wlogo.mini img { width: 100%; height: 100%; }
.kfund .kresb button.btn { color: #fff; }
.klist .kgrp { margin: 14px 4px 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--subtle); }
.klist .kgrp:first-child { margin-top: 2px; }
.avlrow .ck { min-width: 0; flex: 1; align-items: center; }
.avlrow .ck input { margin-top: 0; }
.avlname { min-width: 0; flex: 1; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.avlname b { min-width: 0; }
.avlname .avlt { display: block !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chat drawer from the link card (2026-10-11). */
.cdx { display: flex; flex-direction: column; gap: 8px; }
.cdx > div > span, .cdx details > summary, .cdx details > span { display: inline-block; max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.cdx-u { text-align: right; } .cdx-u span { background: var(--ink); color: #fff; text-align: left; }
.cdx-o { text-align: right; } .cdx-o small { display: block; font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 2px; } .cdx-o span { background: var(--accent); color: #fff; text-align: left; }
.cdx-a > span, .cdx-a > summary { background: var(--canvas); border: 1px solid var(--line); color: var(--muted); }
.cdx details > summary { list-style: none; cursor: pointer; } .cdx details > summary::-webkit-details-marker { display: none; }
.cdx details[open] > summary { display: none; }
.cdx-div { text-align: center; font-size: 12px; color: var(--subtle); font-weight: 700; margin: 4px 0; }
.iosh .cdx-n { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--muted); }
.scrface { margin-right: 6px; font-size: 16px; line-height: 1; vertical-align: -2px; }
/* User explorer and the reshaped visitor drawer (2026-10-12). */
.vsum { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 4px; }
.pxmini { overflow: hidden; }
.pxmrow, .pxshd { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.pxmrow + .pxmrow { border-top: 1px solid var(--line); }
.pxmrow:hover { background: var(--canvas); }
.pxmrow b, .pxshd b { display: block; font-size: 14px; }
.pxmrow small, .pxshd small { display: block; font-size: 12.5px; color: var(--muted); }
.pxmrow em, .pxshd em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--accent); }
.pxmrow .chev, .pxshd .chev { color: var(--subtle); }
.pxrow .aav, .pxrow .apers { flex: none; }
.pxside { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; }
.pxside i { font-style: normal; font-size: 15px; line-height: 1; }
.pxstats { display: flex; flex-wrap: wrap; gap: 0; margin: 18px 0 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 6px; }
.pxstats > div { padding: 2px 16px; display: flex; flex-direction: column; gap: 2px; }
.pxstats > div + div { border-left: 1px solid var(--line); }
.pxstats b { font-size: 17px; white-space: nowrap; }
.pxstats span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.pxscr > span { min-width: 120px; }
.pxsess { padding: 0; margin-top: 8px; overflow: hidden; }
.pxsess.open { border-color: var(--accent-line); }
.pxshd { padding: 13px 16px; }
.pxn { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 900; }
.pxsb { padding: 0 16px 12px 50px; border-top: 1px solid var(--line); }
.pxmrow .grow, .pxshd .grow { flex: 1; min-width: 0; }
.pxwho { min-width: 0; }
.pxwho b { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxwho b i { font-style: normal; font-size: 14px; line-height: 1; }
.pxwho small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxside { flex: none; white-space: nowrap; }
.pxside small { font-size: 12px; color: var(--muted); }
.pxtabs { margin: 18px 0 12px; display: flex; }
.pxtabs button { flex: 1; }
.pxtabs em { font-style: normal; font-size: 11px; font-weight: 900; margin-left: 4px; color: var(--muted); }
.pxtabs button.on em { color: var(--accent); }
.kv .pxamt { margin-left: auto; font-style: normal; font-weight: 800; white-space: nowrap; color: var(--accent); }
.kv.pxtot span, .kv.pxtot .pxamt { font-weight: 900; }
.pxwrap .klist { grid-template-columns: minmax(0, 1fr); } .pxwrap .pxrow { min-width: 0; } .pxwrap .kleft { overflow-x: hidden; }
.pxo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.pxo.sm { font-size: 11px; padding: 0 7px; vertical-align: 1px; }
.pxo.yes { background: #e3f4e8; color: #1f7a3d; }
.pxo.no { background: var(--canvas); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.pxgap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin: 0 2px 10px; }
.pxstats b small { font-size: 13px; font-weight: 700; }
.pxgap .seg button { white-space: nowrap; }
/* Approvals list when narrow (2026-10-12): no divider; the icons sit top right, the
   title and who/when lines stop short of them, and the pills below run the full width. */
.apL { container: apl / inline-size; }
/* Compact rows: in the desktop side column only when it is squeezed under 340px, and always
   once the list has the screen to itself (900px and under). The divider layout is for the side column. */
@container apl (max-width: 340px) {
	.aprow { position: relative; }
	.aprow .vrule { display: none; }
	.aprow > .apair, .aprow > .aav { position: absolute; top: 12px; right: 12px; margin: 0; }
	.aprow .grow > b, .aprow .grow > small:first-of-type { padding-right: 56px; }
}
@media (max-width: 900px) {
	.aprow, .crow { position: relative; }
	.aprow .vrule, .crow .vrule { display: none; }
	.aprow > .apair, .aprow > .aav { position: absolute; top: 12px; right: 12px; margin: 0; }
	.aprow .grow > b, .aprow .grow > small:first-of-type { padding-right: 56px; }
}

/* Approvals drill-down at phone and narrow-window widths (2026-10-12). */
.apback { display: none; }
@media (max-width: 900px) {
	.ap3.m-list .apM { display: none; }
	.ap3.m-detail .apL { display: none; }
	.ap3.m-detail .apback { display: inline-flex; align-self: flex-start; margin-bottom: 12px; }
}
@media (max-width: 900px) {
	/* Above the bottom menu, so a decision never needs a scroll past the calendar. */
	.ap3.m-detail .apbar { position: sticky; bottom: calc(var(--mbar, 76px) + 8px); z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 28px -14px rgba(60, 20, 30, 0.45); }
}
/* Two-pane pages at 900px and under: one pane at a time (see mdOn in app.js). */
.mdback { display: none; }
@media (max-width: 900px) {
	.md-list > .inbR, .md-list > .kmain { display: none; }
	.md-detail > .inbL, .md-detail > .kleft { display: none; }
	.md-detail .mdback { display: inline-flex; align-self: flex-start; margin: 0 0 12px; }
	.kwrap.md-detail .kleft, .kwrap.md-list .kleft { border-bottom: 0; }
	.inbR { flex-direction: column; }
}
/* Panels size by the room they actually get, not the window (2026-10-12): between 900 and
   ~1300px the sidebar takes 232px, so a viewport query cannot tell how wide a pane is. */
.kmain { container: kmain / inline-size; }
@container kmain (max-width: 720px) {
	/* Header: title on its own line, actions wrap under it. */
	.khead { flex-wrap: wrap; }
	.khead > .grow { flex: 1 1 100%; }
	/* Reserve: the four figures as a 2 by 2 grid, the buttons under them. */
	.kfund { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
	.kfund > div + div { border-left: 0; padding-left: 0; }
	.kfund > div:nth-child(even) { border-left: 1px solid var(--line); padding-left: 18px; }
	.kfund .kresb { grid-column: 1 / -1; margin-left: 0; }
	.kfund span { letter-spacing: 0; }
	/* User explorer: tabs scroll rather than wrap their labels. */
	.pxtabs { overflow-x: auto; scrollbar-width: none; }
	.pxtabs button { flex: 0 0 auto; white-space: nowrap; }
	.pxstats > div { flex: 1 1 40%; }
	.pxstats > div:nth-child(odd) { border-left: 0; }
}
.inbR { container: inbr / inline-size; }
@container inbr (max-width: 520px) {
	/* Composer: the platform tabs go on their own row so the message box keeps its width. */
	.composer:has(.rvia) { flex-wrap: wrap; }
	.composer:has(.rvia) > input { flex: 1 1 calc(100% - 64px); order: 1; }
	.composer:has(.rvia) > .jbtn { order: 0; }
	.composer:has(.rvia) > .rvia { order: 2; flex: 1 1 auto; }
	.composer:has(.rvia) > .btn { order: 3; }
}
/* The phone top bar: one line, the section name shortened. */
.top .crumbs { min-width: 0; overflow: hidden; }
.top .crumbs b, .top .crumbs .cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evfbtn { display: none; }
@media (max-width: 900px) {
	.evfbtn { display: inline-flex; }
	.evpage:not(.fopen) .evside { display: none; }
	.evpage.fopen .evside { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
	.evbar { flex-wrap: wrap; row-gap: 8px; }
}
/* Booking chats: the list gives way to the conversation as the window narrows, never the other way round. */
.inb { grid-template-columns: clamp(280px, 30vw, 400px) minmax(0, 1fr); }
@media (max-width: 900px) { .inb { grid-template-columns: minmax(0, 1fr); } }
@container kmain (max-width: 520px) {
	/* Section heads with actions (Attendee wallets): the buttons drop under the heading, on one line each. */
	.iosh { flex-wrap: wrap; row-gap: 8px; }
	.iosh > button { white-space: nowrap; }
	.iosh > .grow { flex-basis: 100%; height: 0; }
	.iosh > button[style*="margin-left"] { margin-left: 0 !important; }
}
.ltile .lacts { flex-wrap: wrap; } .ltile .lacts button { white-space: nowrap; }
/* Add an attendee wallet: the one-time link and the waiting card (2026-10-12). */
.kinv { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.kinv code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.kinv.sm { margin: 10px 0 0; padding: 6px 10px; }
.kqr { width: 150px; height: 150px; margin: 14px auto 0; border: 10px solid #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 20px 20px; }
.kinvst { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.kinvst.ok { background: #e3f4e8; color: #1f7a3d; }
.kspin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--accent-line); border-top-color: var(--accent); animation: kspin 0.8s linear infinite; }
@keyframes kspin { to { transform: rotate(360deg); } }
.ltile.waiting { border-style: dashed; background: var(--canvas); }
.kwait { cursor: default; }
.kwav { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #e9e1df; color: var(--muted); font-weight: 900; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .kspin { animation: none; } }
.fund .grow, .fundp .grow, .fundw .grow, .fundev > summary .grow { flex: 1; min-width: 0; }
.wrbar .seg button { white-space: nowrap; }
.ratec-grid .ratec-usd { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 1px; }
/* Pinned week template (2026-10-12): a pin on the Template tab, and the pop-up when a pinned week is edited. */
.avtpin { display: inline-grid; place-items: center; margin-right: 4px; color: var(--accent); }
.pinpop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(29, 16, 19, 0.35); }
.pinbox { width: min(420px, 100%); background: var(--panel); border-radius: 20px; padding: 20px; box-shadow: 0 30px 60px -30px rgba(29, 16, 19, 0.6); }
.pinhd { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.pinic { width: 30px; height: 30px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.pinic svg { width: 16px; height: 16px; }
.pinbox p { margin: 10px 0 0; }
.pinbox .acts { justify-content: flex-start; margin-top: 16px; }
.stgrp { margin: 12px 2px 6px; font-size: 11.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--subtle); }
.segnote.warnnote { background: #fff6e6; color: #8a5a00; border-radius: 12px; padding: 10px 12px; }
/* Attendee status dropdown on the meter card (2026-10-12). */
.kstat { margin-top: 10px; display: grid; gap: 8px; }
.kstat .ddb { width: 100%; justify-content: flex-start; }
.kstat .ddb b { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kstat .ddm { width: 100%; }
.kstat .kauto { font-style: normal; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--subtle); }
.kstat .kclear { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; }
.kreason { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 13.5px; background: var(--panel); }
/* Concurrent/return booking rules (2026-10-12). */
.crule { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-top: 12px; background: var(--panel); }
.crule:first-child { margin-top: 0; }
.crhd { display: flex; align-items: center; justify-content: space-between; }
.crst { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.crst .ck.dis { opacity: 0.5; cursor: not-allowed; }
/* Status sits under the card's buttons, on a warm tint so it reads as the card's verdict rather than another action. */
.kstat { margin-top: 12px; }
.kstat .ddb { background: #f3e7e3; border-color: #e6d3ce; }
.kstat .ddb:hover, .kstat .dd.open .ddb { background: #eedcd7; border-color: var(--accent-line); }
.kstat .ddb .ddl { color: var(--accent); }
.kstat .ddb b { color: var(--accent-2); }
.supdiv { border: 0; border-top: 1px solid var(--line); margin: 28px 0 22px; }
.supdiv + .plansay { margin-top: 0; }
.iosi img[src*="icons/settings/"] { width: 21px; height: 21px; }
/* Generated menu glyphs (2026-10-13), tinted with the item's colour. */
.sicg { width: 18px; height: 18px; display: block; background: color-mix(in srgb, var(--m, #8a6f72) 88%, black); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.si.sub .sicg { width: 15px; height: 15px; }
/* 3D menu icons (2026-10-13): the object carries its own colour, so no tinted tile behind it. */
.sic:has(.sic3d) { background: none; }
.sic3d { width: 28px; height: 28px; display: block; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(80, 20, 30, 0.12)); }
.si.on .sic:has(.sic3d) { background: none; }
.si.sub .sic3d { width: 22px; height: 22px; }
.krow .kamt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.25; }
.krow .kres { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: 14.5px; color: var(--ink); }
.krow .kres svg { color: var(--accent); }
.krow .kpd { font-size: 12px; font-weight: 700; color: var(--muted); }
.krow .kamt .doughin.kcr { width: .85em; height: .85em; margin-right: .06em; vertical-align: 0; color: #000; }
/* .kres is a flex row with a 4px gap, which also lands between the icon and its number: pull that back. */
.krow .kres .doughin.kcr { margin-right: -3px; }
.ltile .lrate { margin-top: 2px; font-size: 13px; color: var(--muted); }
.ltile .lrate b { color: var(--ink); font-weight: 800; }
/* Modal close stays put (2026-10-13): sticky at the top of the scrolling box instead of
   absolute inside it, so scrolling the modal never carries it away. Takes no height. */
.modalbox.stbox > .stx { position: sticky; top: 12px; right: auto; display: grid; margin: 12px 12px -50px auto; z-index: 6; }
.tplbox { position: relative; }
.aah { font-size: 17px; font-weight: 900; margin: 0 0 4px; }
/* Settings shown but inactive while their toggle is off. */
.offdim { opacity: 0.45; pointer-events: none; user-select: none; }
.duf .unitin input { width: 84px; text-align: left; }
.duf .unitin { margin-left: 6px; }
.duf .unitin input { text-align: center; }
.otp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.otp .otpcur { font-weight: 800; color: var(--muted); }
.otp input { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font: inherit; background: var(--panel); }
.otp #otpAmt { width: 96px; } .otp #otpNote { flex: 1; min-width: 140px; }
/* Amount with the meter's state and clock to its right (2026-10-13). */
.ltile .lamtrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ltile .lamtrow .lsub { margin: 0; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
/* Suitability rules on a question (2026-10-13). */
.fqrule { margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--canvas); border: 1px solid var(--line); }
.fqrh { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--subtle); margin-bottom: 8px; }
.fqrrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 5px 0; font-size: 14px; }
.fqrseg button.fail.on { background: #fde8e8; color: #b91c1c; }
.fqrseg { flex-wrap: wrap; } .fqrseg button { white-space: nowrap; padding: 6px 12px; }
/* Event reserve with two currencies: a row each (2026-10-13). */
.kfund.two { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; }
.kfund.two .kfrow { grid-column: 1; display: grid; grid-template-columns: 104px repeat(4, minmax(0, 1fr)); align-items: center; gap: 0; }
.kfund.two .kfrow + .kfrow { border-top: 1px solid var(--line); padding-top: 10px; }
.kfund.two .kfrow > div { padding: 0 14px; border-left: 1px solid var(--line); }
.kfund.two .kfcur { font-size: 12px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.kfund.two .kfrow b small { font-size: 12px; font-weight: 800; color: var(--muted); }
.kfund.two .kresb { grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-direction: column; }
@container kmain (max-width: 720px) {
	.kfund.two { grid-template-columns: minmax(0, 1fr); }
	.kfund.two .kfrow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
	.kfund.two .kfcur { grid-column: 1 / -1; }
	.kfund.two .kfrow > div { border-left: 0; padding: 0; }
	.kfund.two .kresb { grid-column: 1; grid-row: auto; flex-direction: row; }
}
.kfund.two > .kfrow { border-left: 0 !important; padding-left: 0 !important; margin: 0; }
/* Each currency row carries its own Top up and Details. */
.kfund.two { grid-template-columns: minmax(0, 1fr); }
.kfund.two .kfrow { grid-template-columns: 90px repeat(4, minmax(0, 1fr)) auto; }
.kfund.two .kfrow .kresb { grid-column: auto; grid-row: auto; flex-direction: row; padding-left: 12px; border-left: 0; }
@container kmain (max-width: 720px) { .kfund.two .kfrow .kresb { grid-column: 1 / -1; padding-left: 0; } }
.rst.rst-unfit { background: #fde8e8; color: #b91c1c; }
.lamt .lunit { font-size: 0.42em; font-weight: 800; letter-spacing: 0; color: var(--accent); opacity: 0.85; }
/* Card copy box: Copy to / Copy from tabs, and the overwrite warning at Done (2026-10-13). */
.alsobox .cpseg { display: inline-flex; margin-bottom: 10px; }
.alsobox .cpseg button { flex: 0 0 auto; white-space: nowrap; }
.donebar:has(.cpwarn) { flex-wrap: wrap; gap: 8px; align-items: center; }
.cpwarn { flex: 1 1 100%; background: #fdf1ef; border: 1px solid #f1c6c0; border-radius: var(--r); padding: 12px 14px; }
.cpwarn b { display: block; color: #8a1c12; font-size: 14.5px; }
.cpwarn small { display: block; color: #6b3a35; font-size: 13px; margin-top: 2px; }
/* Settings › Breadslice access (2026-10-13). */
.bsaon { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: #eef8f1; border: 1px solid #bfe3cb; }
.bsaon .dot { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; flex: 0 0 10px; }
.bsaon b { display: block; font-size: 14.5px; }
.bsaon small { display: block; color: var(--muted); font-size: 13px; }
.bsaon .dot { height: 10px !important; min-height: 10px; max-height: 10px; padding: 0; align-self: center; }
.bsalog span { white-space: nowrap; flex: 0 0 auto; }
.bsalog b { text-align: right; }
/* Menu icons in the Settings style (2026-10-13): white glyph on a coloured tile, like .iosi. */
.sic.tile, .si.on .sic.tile { background: var(--m); border-radius: 8px; }
.sict { width: 21px; height: 21px; display: block; }
.si.sub .sic.tile { border-radius: 7px; } .si.sub .sict { width: 18px; height: 18px; }
/* Attendee wallet: proof of ownership card and popup (2026-10-13). */
.wpfl { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.wpfl + .wpfl { border-top: 1px solid var(--line); }
.wpfl b { display: block; font-size: 14px; } .wpfl small { display: block; color: var(--muted); font-size: 12.5px; }
.wpfk { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #e7f5ec; color: #1f7a45; display: grid; place-items: center; font-weight: 900; font-size: 12px; margin-top: 1px; }
.wpfpop { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(29, 16, 19, 0.4); }
.wpfbox { width: min(720px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--panel); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(29, 16, 19, 0.6); overflow: hidden; }
.wpfhd { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.wpfhd h2 { margin: 2px 0 0; font-size: 19px; }
.wpfbody { overflow: auto; padding: 6px 20px 16px; }
.wpfs { padding: 14px 0; } .wpfs + .wpfs { border-top: 1px solid var(--line); }
.wpfsh { display: flex; align-items: center; gap: 10px; }
.wpfn { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.wpfst { color: #1f7a45; font-weight: 900; transition: opacity .2s; }
.wpfs.wait .wpfst { opacity: 0; } .wpfs.wait .wpfchk { opacity: .35; }
.wpfs p { margin: 6px 0 0 34px; color: var(--muted); font-size: 13px; }
.wpfs pre { margin: 8px 0 0 34px; padding: 10px 12px; background: #1d1013; color: #f3e6e7; border-radius: 12px; font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto; }
.wpfs .wpfchk { color: #1f7a45; font-weight: 700; transition: opacity .2s; }
.wpfs .wpfchk::before { content: '✓ '; }
.wpfnot { margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--canvas); border: 1px solid var(--line); }
.wpfnot b { display: block; font-size: 13.5px; } .wpfnot small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.wpfft { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.wpfsum { color: #1f7a45; font-weight: 800; font-size: 13.5px; }
@media (max-width: 560px) { .wpfs p, .wpfs pre { margin-left: 0; } .wpfft { flex-wrap: wrap; } }
.wpfhd > .grow, .wpfft > .grow { flex: 1 1 auto; min-width: 0; }
/* Custom dropdowns (2026-10-14): replace every stock <select> (enhanced in app.js). */
select.csnative { display: none !important; }
.csel { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font: 600 15px Lato, system-ui, sans-serif; color: var(--ink); background: #fff; cursor: pointer; text-align: left; }
.csel:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.csel:focus-visible, .csel[aria-expanded="true"] { outline: 2px solid var(--accent); border-color: transparent; }
.csel:disabled { opacity: .5; cursor: default; }
.csel .cslab { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel .cschev { flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); transition: transform .15s; }
.csel[aria-expanded="true"] .cschev { transform: rotate(180deg); }
.dayrow .csel, .lbday .csel, .shrow .csel, .shadd .csel { width: auto; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.ctryf .labadd .csel { flex: 1; min-width: 0; }
.hwsub .csel { border-radius: 10px; font-size: 14px; min-height: 38px; padding: 8px 10px; }
.cspop { position: fixed; z-index: 200; overflow: auto; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(29, 16, 19, 0.35), 0 2px 6px rgba(29, 16, 19, 0.06); max-width: min(480px, calc(100vw - 16px)); }
.csgrp { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.csopt { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.csopt .csck { flex: 0 0 16px; color: var(--accent); font-weight: 900; }
.csopt.hi { background: var(--accent-soft); }
.csopt.on { color: var(--accent); font-weight: 800; }
.csopt.dis { opacity: .45; cursor: default; }
/* Opens-a-drawer icon (2026-10-14): a page with a panel on the right (icons/drawer.svg), in the text colour. */
.drw { display: inline-block; width: 1em; height: .75em; margin-left: .45em; vertical-align: -0.06em; background: currentColor; -webkit-mask: url(./icons/drawer.svg?v=2) center / contain no-repeat; mask: url(./icons/drawer.svg?v=2) center / contain no-repeat; opacity: .75; flex: 0 0 auto; }
.chev .drw, .fundgo .drw { margin-left: 0; width: 15px; height: 11px; }
/* Remove a booking calendar, stepped drawer (2026-10-14). */
.rmwdots { display: flex; align-items: center; gap: 6px; margin: 2px 0 14px; }
.rmwdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.rmwdots i.done { background: var(--accent-line); } .rmwdots i.on { background: var(--accent); width: 20px; border-radius: 99px; }
.rmwdots span { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rmwq { margin: 0 0 12px; font-size: 16.5px; line-height: 1.35; }
.rmwseg { display: inline-flex; margin-bottom: 12px; } .rmwseg button { flex: 0 0 auto; white-space: nowrap; }
.rmwsub { margin: 4px 0 8px 22px; padding-left: 12px; border-left: 2px solid var(--line); }
.rmwper { display: grid; gap: 8px; } .rmwrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.rmwrow .grow { font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; } .rmwrow .csel { width: 200px; flex: none; }
.rmwlist { margin-top: 12px; padding: 4px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.rmwbar { gap: 8px; } .rmwbar .btn:disabled { opacity: .45; cursor: default; }
.opt .cdot.lg { flex: 0 0 auto; }
@media (max-width: 560px) { .rmwrow { flex-wrap: wrap; } .rmwrow .csel { width: 100%; } }
/* Pause this event type, top of the event drawer (2026-10-14). */
.tog.evpause { margin: 4px 0 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.tog.evpause.on { background: #fff7e6; border-color: #f3d38a; }
/* Paused, beside the event type's name (2026-10-14), not a chip at the end. */
/* Paused is plain text after the name, not another pill (2026-10-17) */
.evpaused { display: inline; margin-left: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.evpaused::before { content: '· '; }
.ev:has(.evpaused) .ic, .ev:has(.evpaused) .meta { opacity: .6; }
/* Week template: unsaved-changes bar fixed at the bottom of the window (2026-10-14). */
.tplbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); background: var(--ink-h); color: #fff; border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: 0 18px 40px -16px rgba(43, 26, 28, 0.6); font-size: 14px; animation: tplbarin .22s ease-out; }
.tplbar .grow { min-width: 0; } .tplbar b { font-weight: 800; }
.tplbar .soft { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.tplbar .btn { background: #fff; color: var(--accent); border-color: #fff; }
@keyframes tplbarin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 600px) { .tplbar { border-radius: 18px; flex-wrap: wrap; bottom: 12px; } .tplbar .grow { flex: 1 1 100%; } }
.tplbar.still { animation: none; }
/* Room to scroll the week up clear of the floating save bar. */
body.has-tplbar .stbody, body.has-tplbar #view .page { padding-bottom: 110px; }
/* Removing a pinned week template (2026-10-14). */
.tplrmw { padding: 12px 14px; border-radius: 14px; background: #fdf1ef; border: 1px solid #f1c6c0; }
.tplrmw b { display: block; color: #8a1c12; font-size: 14.5px; } .tplrmw span { display: block; color: #6b3a35; font-size: 13.5px; margin-top: 3px; }
.kv b.bad { color: #b42318; }
/* Settings with nothing added yet (2026-10-14). */
.railempty { margin: 6px 4px 4px; color: var(--muted); font-size: 13.5px; }
.libempty { margin-bottom: 16px; padding: 18px 20px; border: 1px dashed var(--accent-line); border-radius: 18px; background: var(--panel); }
.libempty b { display: block; font-size: 16px; } .libempty span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
/* IP lists: one address per row with an optional note (2026-10-14). */
.iprows { display: grid; gap: 8px; }
.iprow { display: flex; align-items: center; gap: 10px; }
.iprow code { flex: 0 0 150px; padding: 9px 12px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line); font: 700 13.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.iprow .ipnote { flex: 1 1 auto; min-width: 0; }
.iprow.ipadd { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.iprow.ipadd > .lbin:first-child { flex: 0 0 176px; }
@media (max-width: 560px) { .iprow { flex-wrap: wrap; } .iprow code, .iprow.ipadd > .lbin:first-child { flex: 1 1 100%; } }
/* Toast with Undo (2026-10-14). */
.toast.undo { display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; }
.toast.undo button { border: 0; border-radius: 999px; padding: 6px 14px; background: rgba(255, 255, 255, 0.16); color: #fff; font: 800 13.5px Lato, system-ui, sans-serif; cursor: pointer; }
.toast.undo button:hover { background: rgba(255, 255, 255, 0.26); }
/* Type marks in the lists rail (2026-10-14). */
.ri b .riic { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); vertical-align: -5px; flex: none; }
.ri b .riic svg { width: 14px; height: 14px; display: block; }
/* Checkbox with its label beside it (2026-10-14). */
.lbck { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.lbck input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.lbck b { display: block; font-size: 14.5px; } .lbck small { display: block; color: var(--muted); font-size: 13px; }
.lbck.off { opacity: .55; cursor: default; } .lbck.off input { cursor: default; }
/* Homework form sharing: Responder or Editor per person, with an expiration (2026-10-14). */
.hwsrows { display: grid; gap: 8px; }
.hwsrow { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.hwsrow .grow { min-width: 0; } .hwsrow b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hwsrow small { display: block; color: var(--muted); font-size: 12.5px; }
.hwsrow .csel, .hwsadd .csel { width: auto; flex: none; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.hwsadd { margin-top: 12px; flex-wrap: wrap; } .hwsadd input { flex: 1 1 200px; min-width: 0; }
@media (max-width: 600px) { .hwsrow { flex-wrap: wrap; } .hwsrow .grow { flex: 1 1 100%; } }
.hwsh { margin: 14px 0 4px; font-size: 15.5px; }
.hwswarn { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #fff7e6; border: 1px solid #f3d38a; }
.hwswarn b { display: block; color: #7a4d00; font-size: 14px; } .hwswarn span { display: block; margin-top: 3px; color: #6b5420; font-size: 13.5px; }
/* Multiple choice answer widget in the web chat (2026-10-14). */
.fqw { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; margin: 2px 0 4px; }
.fqwo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid var(--accent-line); border-radius: 999px; background: #fff; color: var(--accent); font: 800 14px Lato, system-ui, sans-serif; cursor: pointer; }
.fqwo:hover { background: var(--accent-soft); }
.fqwo.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fqwo i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid currentColor; font-style: normal; font-size: 11px; }
.fqw .fqwgo { margin-left: 2px; }
.fqw small { flex: 1 1 100%; color: var(--subtle); font-size: 11.5px; }
.wclog > * { flex-shrink: 0; }
/* Suitability: what you consider a suitable, unsuitable and neutral answer (2026-10-14). */
.fqsuit { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.fqsrow { padding: 10px 0 12px 12px; border-left: 3px solid var(--line); margin-top: 8px; }
.fqsrow.fqs-ok { border-left-color: #2f9e5b; } .fqsrow.fqs-bad { border-left-color: #c2410c; } .fqsrow.fqs-mid { border-left-color: #b49a9c; }
.fqsrow .fqrseg { flex-wrap: wrap; } .fqsrow .fqrseg button { white-space: normal; text-align: left; }
.ri b .ritag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: 11px; font-weight: 800; vertical-align: 2px; }

.opt b .ritag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: 11px; font-weight: 800; vertical-align: 2px; }

/* A contact's ways to reach them, one per line with an icon (2026-10-14). */
.cways { display: grid; gap: 3px; margin-top: 4px; }
.cway { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.cway svg { width: 15px; height: 15px; flex: none; color: var(--accent); }

.wa2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .wa2 { grid-template-columns: 1fr; } }

/* Per-option suitability outcome (2026-10-14). */
.fqrrow .csel.fqrsel { width: auto; min-width: 200px; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.fqrrow .csel.fqrsel.ok { border-color: #b9e0c5; background: #f1faf4; color: #1f6b3a; }
.fqrrow .csel.fqrsel.bad { border-color: #f1c6c0; background: #fdf1ef; color: #9a2a1a; }

/* User explorer: found unsuitable, with Reset (2026-10-14). */
.pxunsuit { display: grid; gap: 8px; margin: 12px 0; }
.pxurow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fdf1ef; border: 1px solid #f1c6c0; }
.pxurow b { display: block; color: #8a1c12; font-size: 14px; } .pxurow small { display: block; color: #6b3a35; font-size: 12.5px; }

/* User explorer: side menu per person (2026-10-14). */
.pxlay { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.pxnav { display: grid; gap: 2px; position: sticky; top: 12px; }
.pxnav button { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 12px; font-weight: 800; color: var(--muted); font-size: 14px; }
.pxnav button:hover { background: var(--accent-soft); color: var(--ink); }
.pxnav button.on { background: #fff; color: var(--accent); box-shadow: 0 2px 10px -6px rgba(43, 26, 28, .35); }
.pxnav em { font-style: normal; font-size: 11.5px; font-weight: 900; color: var(--subtle); }
.pxnav button.on em { color: var(--accent); }
.pxsech { margin: 2px 0 12px; font-size: 17px; }
.pxst { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .pxst + .pxst { border-top: 1px solid var(--line); }
.pxst b { display: block; font-size: 14.5px; } .pxst small { display: block; color: var(--muted); font-size: 12.5px; }
.pxv { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #e7f5ec; color: #1f7a45; }
.pxv.unsuitable { background: #fdf1ef; color: #9a2a1a; } .pxv.reset { background: #f3ebe9; color: var(--muted); }
@media (max-width: 760px) { .pxlay { grid-template-columns: 1fr; } .pxnav { position: static; grid-auto-flow: column; overflow-x: auto; } .pxnav button { white-space: nowrap; } }

.pxname { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* User explorer overview as rows (2026-10-14). */
.pxov .kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; }
.pxov .kv span { color: var(--muted); font-weight: 700; font-size: 14px; }
.pxov .kv b { font-size: 15px; text-align: right; }
.pxov .kv span { flex: 1 1 auto; width: auto; max-width: none; white-space: nowrap; } .pxov .kv b { flex: 0 0 auto; }
/* User explorer person: once the side menu would squeeze the content below its minimum, it
   becomes a scrolling row of tabs above it (2026-10-15; at 800px since 2026-10-26). */
@container kmain (max-width: 800px) {
	.pxlay { grid-template-columns: minmax(530px, 1fr); gap: 12px; }
	.pxnav { position: static; display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: #f3ebe9; border-radius: 14px; scrollbar-width: none; }
	.pxnav::-webkit-scrollbar { display: none; }
	.pxnav button { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; border-radius: 10px; }
	.pxnav button .grow { flex: none; }
}
/* Agent name-drop › Top bar line (2026-10-15). */
.tbbox { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.tbh { display: block; font-size: 14.5px; }
.tbsegs { display: flex; flex-wrap: wrap; gap: 8px; } .tbsegs .seg { display: inline-flex; } .tbsegs .seg button { flex: 0 0 auto; white-space: nowrap; }
.tbphone { width: min(320px, 100%); margin: 14px auto 0; padding: 9px 9px 0; border-radius: 40px 40px 0 0; background: #1d1013;
	-webkit-mask-image: linear-gradient(#000 58%, transparent 96%); mask-image: linear-gradient(#000 58%, transparent 96%); }
.tbscreen { border-radius: 32px 32px 0 0; background: #fbf8f7; overflow: hidden; padding-bottom: 26px; }
.tbstatus { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 6px; font: 700 12px -apple-system, system-ui, sans-serif; color: #1d1013; }
.tbisland { width: 78px; height: 22px; border-radius: 999px; background: #1d1013; }
.tbicons { font-size: 9px; letter-spacing: 1px; }
.tbmock { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.tbmock .wcav { width: 34px; height: 34px; border-radius: 10px; }
.tbmock b { display: block; font-size: 14.5px; } .tbmock small { display: block; color: var(--muted); font-size: 12px; }
.tbchat { padding: 12px 14px 0; display: grid; gap: 6px; }
.tbchat .bub { justify-self: start; max-width: 82%; padding: 8px 12px; border-radius: 14px 14px 14px 5px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; }
.tbchat .bub.short { width: 55%; height: 30px; }
.qc .qurl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; word-break: normal; }
/* Link board: single-session links make a one-time link on tap (2026-10-15). */
.qbox.qgen { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 1; text-align: center; color: var(--accent); border: 2px dashed rgba(138, 36, 51, 0.35); }
.qgenic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 22px; font-weight: 800; }
.qgen b { font-size: 14px; } .qgen small { color: var(--muted); font-size: 12px; }
.qregen { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.qregen:hover { background: rgba(255, 255, 255, 0.35); }
.qlab { flex-wrap: wrap; }
.oncecount { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.18); color: #fff; }
.ovurl .oncecount { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.bigonce { margin: 8px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
/* Event reserve: a divider after Returned, before the buttons (2026-10-15). */
.kfund:not(.two) > div:last-of-type { border-right: 1px solid var(--line); padding-right: 30px; }
.kfund.two .kfrow > div:last-of-type { border-right: 1px solid var(--line); }
@container kmain (max-width: 720px) { .kfund:not(.two) > div:last-of-type { border-right: 0; padding-right: 0; } }
.sliceic { display: inline-block; width: .9em; height: .9em; margin-right: .16em; vertical-align: -0.05em; color: var(--ink); }
.kfund.two .kfcur { line-height: 1.15; }
.kfund .kusd { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; margin: -1px 0 2px; }
/* The password box: the same field as every text input (2026-10-15); type=password had none of it. */
.pwwrap input { border: 1px solid var(--line); border-radius: 12px; padding: 10px 76px 10px 12px; font: 600 15px Lato, system-ui, sans-serif; color: var(--ink); background: #fff; margin: 4px 0 4px; }
.pwwrap input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.pwwrap input[type="password"] { letter-spacing: .12em; }
.pwwrap input::placeholder { letter-spacing: 0; color: var(--subtle); font-weight: 600; }
.pweye { border-radius: 8px; }
.pick:disabled { opacity: .4; cursor: default; }

/* Pick chips are never narrower than they are tall (2026-10-15): one character makes a circle, not an upright oval. */
.pick { min-width: 2.95em; display: inline-flex; align-items: center; justify-content: center; }
.pxst .pxamt { flex: none; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.pxst .pxamt.in { color: #1f7a45; } .pxst .pxamt.out { color: var(--ink); }
/* Explorer list: the name shortens with an ellipsis, the screening face never gets cut off (2026-10-15). */
.pxwho b { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: visible; }
.pxwho .pxnm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxwho b i { flex: none; font-style: normal; line-height: 1; }

/* Remove link (2026-10-16): last in the link settings menu, in the danger colour. */
.stnav .ri.strm { color: #b42318; margin-top: 8px; }
.stnav .ri.strm.on { background: #fdecea; border-color: #f4c7c3; }
.rmwarn { color: #b42318; font-weight: 800; }

/* Google Sheets mirroring layout preview (2026-10-16). */
.shtab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shtab b { font-size: 14px; } .shtab span { color: var(--muted); font-size: 13px; }
.shcols { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.shcols span { font: 700 12px ui-monospace, Menlo, monospace; padding: 3px 7px; border-radius: 6px; background: #eef6f0; color: #1e6b3a; border: 1px solid #cfe6d6; }
/* Hints inside drawers read as hints, as on the pages (2026-10-16). */
#drawer .hint { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
/* Leaving with unsaved changes (2026-10-16): the island turns into the question. */
.tplbar.ask { background: var(--accent); }
/* Wallet proof (2026-10-16): who vouches for each step. */
.wpfl .wpfby { flex: none; align-self: center; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #f3ebe9; color: var(--muted); white-space: nowrap; }
.wpfby.google { background: #e8f0fe; color: #1a56c4; } .wpfby.passkey { background: #eef6f0; color: #1e6b3a; } .wpfby.tempo { background: #f0ecfb; color: #5a3fb0; } .wpfby.tee { background: var(--accent-soft, #fdf5f4); color: var(--accent); }
.wpfl > .grow { flex: 1 1 auto; min-width: 0; }
.youtag { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft, #fdf5f4); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }

/* Support contact fields (2026-10-16): country code + number, a fixed @, and checks. */
.phin { display: flex; gap: 8px; align-items: stretch; }
.phin > .lbin { flex: 1 1 auto; min-width: 0; }
.ccfind { margin-top: 0; flex: none; }
.ccbtn { display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; white-space: nowrap; }
.ccbtn i { font-style: normal; color: var(--muted); font-size: 11px; }
.ccmenu { width: 300px; right: auto; }
.ccmenu .hoq { width: 100%; margin-bottom: 4px; }
.ccmenu .hoopt i { margin-left: auto; font-style: normal; color: var(--muted); font-weight: 700; }
.atin { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.atin span { padding: 0 2px 0 13px; color: var(--muted); font-weight: 800; }
.atin input.lbin { border: 0 !important; box-shadow: none !important; padding-left: 2px; flex: 1; min-width: 0; }
.fchk { margin: 6px 2px 0; font-size: 12.5px; font-weight: 700; }
.fchk.ok { color: #1f7a45; } .fchk.bad { color: #b42318; }
/* Used by, for support contacts (2026-10-16): the link, cut short with an ellipsis, and its labels. */
.ubl { overflow: hidden; }
.ubrow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.ubrow + .ubrow { border-top: 1px solid var(--line); }
.ubrow:hover { background: var(--accent-soft, #fdf5f4); }
.ubrow b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ubrow .rilabs { flex: 0 0 auto; display: flex; gap: 4px; margin-left: auto; }
.ubrow .chev { flex: none; color: var(--muted); }
/* Form questions (2026-10-16): the kind is picked when adding, then shown fixed. */
.fqkind { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 800; color: var(--muted); background: #f3ebe9; border-radius: 999px; padding: 4px 11px; }
.fqpick { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; }
.fqaddw { position: relative; display: inline-block; margin-top: 14px; }
.fqpop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(43, 26, 28, 0.4); padding: 12px; display: flex; flex-direction: column; gap: 2px; animation: fqpopin .16s ease-out; }
@keyframes fqpopin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fqpop > b { font-size: 14px; padding: 2px 6px 0; } .fqpop > small { color: var(--muted); font-size: 12px; padding: 0 6px 6px; }
.fqpopo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: none; border-radius: 10px; padding: 8px 10px; text-align: left; font: inherit; cursor: pointer; color: var(--ink); }
.fqpopo:hover { background: var(--accent-soft, #fdf5f4); } .fqpopo b { font-size: 14px; } .fqpopo span { font-size: 12.5px; color: var(--muted); }
.hwsrow > .grow { flex: 1 1 auto; } /* the address takes the room, the expiry and ✕ sit at the right (2026-10-17) */
.gbrow .csel { flex: none; min-height: 36px; padding: 6px 10px; font-size: 14px; } .gbrow code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Google account blacklist rows (2026-10-17): the address takes the room, the reason is a fixed-width dropdown. */
.iprow.gbrow .csel { width: 200px; flex: none; }
.iprow.gbrow code { flex: 1 1 auto; }
.iprow.gbrow.ipadd > .lbin:first-child { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .iprow.gbrow .csel { width: auto; flex: 1 1 auto; } }
/* The rail fills the window's height and its list scrolls inside it (2026-10-17), whether or not
   it has a New button, rather than stopping at a fixed allowance short of the bottom. */
#view .studio > .rail { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
#view .studio > .rail > .railscroll { flex: 0 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
#view .studio > .rail > .ri.new { flex: none; }
@media (max-width: 760px) { #view .studio > .rail { max-height: none; } }
/* Google account id under a blacklist entry (2026-10-17). */
.iprow.gbrow code { display: flex; align-items: center; gap: 8px; }
.gbsub { margin-left: auto; flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 1px 8px; font: 800 11px Lato, system-ui, sans-serif; color: var(--muted); cursor: pointer; }
.gbsub:hover, .gbsub.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft, #fdf5f4); }
.gbsubx { display: grid; gap: 3px; margin: -2px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft, #fdf5f4); border: 1px solid var(--accent-line); }
.gbsubx span { font-size: 11.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.gbsubx code { font: 700 13.5px ui-monospace, Menlo, monospace; color: var(--ink); }
.gbsubx small { color: var(--muted); font-size: 12.5px; }
/* List icons (2026-10-17): the Google logo on a white tile; a globe for domain lists, with a small G for Google ones. */
.ri b .riic:has(> .glogo) { background: #fff; border: 1px solid var(--line); }
.riic .glogo { width: 14px; height: 14px; display: block; }
.icstack { position: relative; display: inline-grid; place-items: center; }
.icstack svg { width: 14px; height: 14px; }
.icstack .glogo.sm { position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; background: #fff; border-radius: 50%; padding: 1px; box-shadow: 0 0 0 1px var(--line); }
/* Google account (domain): the Google logo, with a small globe at its bottom right. */
.ri b .riic:has(.icstack) { background: #fff; border: 1px solid var(--line); }
.icstack .icbadge { position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); color: var(--accent); }
.icstack .icbadge svg { width: 9px; height: 9px; }
/* Keep the globe badge inside the tile (2026-10-17): the row's name clips anything that sticks out. */
.ri b .riic:has(.icstack) { position: relative; }
.riic .icstack { position: static; }
.riic .icstack .glogo { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; }
.riic .icstack .icbadge { right: 1px; bottom: 1px; width: 10px; height: 10px; }
.riic .icstack .icbadge svg { width: 8px; height: 8px; }
/* Work email domain: the envelope, with the globe at its bottom right, to match the Google one. */
.ri b .riic:has(.icmain) { background: var(--accent-soft); border: 0; }
.riic .icstack .icmain { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; display: grid; place-items: center; }
.riic .icstack .icmain svg { width: 13px; height: 13px; }

/* Inserted country list on a link: a pill with a ⋯ popup menu (2026-10-17) */
.lab.lref { position: relative; gap: 6px; padding-left: 7px; }
.lab.lref .lrefic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; position: relative; }
.lab.lref .lrefic > svg, .lab.lref .lrefic > img { width: 18px; height: 18px; }
.lab.lref .lrefic .icstack { position: static; width: 22px; height: 22px; }
.lab.lref .lrefic .icstack .icmain, .lab.lref .lrefic .icstack .glogo { position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; display: grid; place-items: center; }
.lab.lref .lrefic .icstack .icmain svg { width: 15px; height: 15px; }
.lab.lref .lrefic .icstack .icbadge { right: 0; bottom: 0; width: 10px; height: 10px; }
.lab.lref .lrefic .icstack .icbadge svg { width: 8px; height: 8px; }
.lab.lref small { font-weight: 400; color: var(--muted, #8a7a77); font-size: 12.5px; }
.lab.lref button.lrefdots { font-size: 15px; opacity: 0.7; padding: 1px 6px; border-radius: 8px; letter-spacing: 1px; }
.lab.lref button.lrefdots[aria-expanded="true"] { opacity: 1; background: #fff; }
.lrefmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(60, 20, 20, 0.16); padding: 5px; display: flex; flex-direction: column; animation: fqpopin 0.14s ease-out; font-weight: 400; }
.lab .lrefmenu button:not(.labt) { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 9px 11px; border-radius: 8px; font-size: 14px; font-weight: 700; color: inherit; cursor: pointer; opacity: 1; text-align: left; line-height: 1.3; }
.lab .lrefmenu button:not(.labt):hover { background: var(--canvas); }
.lab .lrefmenu button small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted, #8a7a77); margin-top: 2px; }

/* Google account whitelist, row by row (2026-10-17) */
.wlgrows { margin-top: 8px; }
.wlgrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.wlgrow:first-child { border-top: 0; }
.wlgrow .wlgwho { min-width: 0; display: flex; flex-direction: column; }
.wlgrow .wlgwho b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlgrow .wlgwho small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlgrow .wlgnone { opacity: 0.45; }
.wlgrow > button.soft { flex: none; white-space: nowrap; }
.wlgx { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 50%; flex: none; }
.wlgx:hover { background: var(--canvas); color: var(--ink); }
.wlgrows + .labadd { margin-top: 10px; }
.wlgrow .wlgav { display: flex; flex: none; }
.wlgrow .wlgwho { flex: 1; }
.wlgnote { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft, #f7e9e7); font-size: 13.5px; line-height: 1.4; }
.wlgnote > button { flex: none; white-space: nowrap; }
/* Domain whitelist rows (2026-10-17): Google Workspace or not, from MX */
.wlgrow .wldic { width: 38px; height: 38px; border-radius: 50%; background: var(--canvas); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.wlgrow .wldic svg, .wlgrow .wldic img { width: 18px; height: 18px; }
.wlws { font-weight: 700; color: var(--ink); }
.wlws.g { color: #1a73e8; }
.wlgrow .wlgwho small.wlmx { white-space: normal; word-break: break-all; font-size: 12px; }
/* Add to a whitelist: button top right of the section, popup under it (2026-10-17) */
.sec h2:has(.wladdw) { display: flex; align-items: center; gap: 10px; }
.sec h2 .wladdw { margin-left: auto; position: relative; font-size: 14px; font-weight: 400; }
.wladdpop { position: fixed; top: 0; left: 0; right: auto; bottom: auto; width: 320px; z-index: 200; }
.wladdpop .labadd { margin: 0; }
.gsub { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: 0.02em; }
.wladdpop .wladdnote { margin: 10px 4px 2px; font-size: 12.5px; line-height: 1.45; }
.lbphotoimg { display: block; width: 100%; max-width: 480px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: var(--canvas); }
/* Who someone on a sharing list is (2026-10-17) */
.whotag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--canvas); border: 1px solid var(--line); color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.whotag.tm { color: var(--accent); border-color: currentColor; background: #fff; }
.whotag.self { color: #fff; background: var(--accent); border-color: var(--accent); }
button.whotag { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
button.whotag:hover { background: var(--accent-soft, #f7e9e7); }
button.whotag .drw { transform: scale(0.8); }
.wb .sliceic, .tx .sliceic, .wrcard .sliceic { color: inherit; }
/* Scrolling a menu to its end never carries on into the page behind it (2026-10-17) */
.side, .rail, .railscroll, .klist, .pxnav, .ccmenu, .ddm, .fqpop, .lrefmenu { overscroll-behavior: contain; }
/* Slices tile: the two-slice mark in white on maroon (2026-10-17) */
.wic.wlogo.slice, .iosh .wic.wlogo.mini.slice { background: linear-gradient(#a32d3f, #8a2433); box-shadow: none; display: grid; place-items: center; border-radius: 11px; }
.iosh .wic.wlogo.mini.slice { border-radius: 6px; }
.wic.wlogo .sliceic { display: block; width: 66%; height: 66%; margin: 0; color: #fff; vertical-align: 0; }
.wcard .wic.wlogo .sliceic, .iosh .wic.wlogo .sliceic { stroke: none; fill: currentColor; }
/* Portal listing preview (2026-10-18) */
.pbtnprev { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; max-width: 420px; }
.pbtnprev span:first-child { flex: 1; min-width: 0; } .pbtnprev b { display: block; font-size: 14.5px; } .pbtnprev small { color: var(--muted); font-size: 12.5px; }
.pbtnprev .chev { color: var(--accent); font-weight: 900; }
/* Access policing: each stage in its own box (2026-10-18) */
.limbox { border: 1px solid var(--line); border-radius: 18px; padding: 4px 18px 16px; margin-top: 16px; background: #fff; }
.limbox .limh { margin: 14px 0 6px; padding-top: 0; border-top: 0; font-size: 16px; }
.limbox .limh + .tog, .limbox .limh + .hint, .limbox .limh + .f { border-top: 0; margin-top: 0; }
/* After sign in with Google: lists to select, with their icons (2026-10-18) */
.limsub .opt .lsic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--canvas); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); }
.limsub .opt .lsic svg, .limsub .opt .lsic img { width: 16px; height: 16px; }
.limsub .opt .lsic .icstack { position: relative; }
.limsub.wbmuted .opt { opacity: 0.55; }
/* Crowdsourced blacklist mode under its ticked row (2026-10-18). */
.limsub .crmode { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.limsub .crmode .seg { display: inline-flex; }
.limsub .crmode small { margin-top: 6px; }
.limsub .crmode .seg button { flex: none; white-space: nowrap; }
.limsub .opt:has(.crmode) { align-items: flex-start; }
/* Screening score picker (2026-10-18): five faces, the chosen one and everything below it turned away. */
.facepick { display: flex; align-items: center; gap: 6px; margin: -2px 0 14px; }
.facepick button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 20px; line-height: 1; cursor: pointer; filter: grayscale(1); opacity: 0.55; }
.facepick button.in { filter: none; opacity: 1; background: var(--accent-soft); border-color: var(--accent-line); }
.facepick button.on { border: 2px solid var(--accent); }
.facepick span { margin-left: 6px; font-size: 13px; color: var(--muted); }
.facepick.off { opacity: 0.45; }
.facepick.off button { cursor: default; }
.scact { margin: -4px 0 14px; }
.scact.off { opacity: 0.45; }
/* Crowdsourced Google account blacklist reasons (2026-10-18): listed in Settings, chosen per link. */
.crwhy { margin: 4px 0 0; padding-left: 20px; color: var(--ink); font-size: 14px; line-height: 1.7; }
.limsub .crwhysel { display: block; margin-top: 12px; }
.limsub .crwhysel b { display: block; font-size: 13px; margin-bottom: 4px; }
.limsub .crck { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 5px 12px 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.limsub .crck i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); font-style: normal; font-size: 11px; line-height: 14px; text-align: center; }
.limsub .crck.on { color: var(--accent); border-color: var(--accent); }
.limsub .crck.on i { background: var(--accent); border-color: var(--accent); color: #fff; }
.limsub .crrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.limsub .crrow:last-child { border-bottom: 0; }
.limsub .crrow b { margin: 0; font-size: 14px; }
.limsub .crrow .seg { display: inline-flex; }
.limsub .crrow .seg button { flex: none; white-space: nowrap; }
.limsub .crwhysel { margin-top: 0; }
/* Portal display (2026-10-18): settings beside a mock of the portal. */
.pdgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 18px; align-items: start; }
@media (max-width: 900px) { .pdgrid { grid-template-columns: 1fr; } }
.pdprev { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--canvas); box-shadow: 0 10px 30px -18px rgba(43, 26, 28, 0.35); }
.pdbar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pdbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.pdbar span { margin-left: 8px; font-size: 12px; color: var(--muted); background: var(--canvas); border-radius: 999px; padding: 3px 10px; flex: 1; text-align: center; }
.pdbody { padding: 14px; }
.pdhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pdhead img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pdhead b { display: block; font-size: 15px; color: var(--ink-h); }
.pdhead small { display: block; font-size: 12px; color: var(--muted); }
.pdcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.pdt { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.pdl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.pdt + .pdl { border-top: 0; }
.pdl b { display: block; font-size: 14px; color: var(--ink); }
.pdl small { display: block; font-size: 12px; color: var(--muted); }
.pdl i { font-style: normal; color: var(--subtle); }
.pdcap { margin: 4px 0 0; font-size: 12px; color: var(--subtle); text-align: center; }
.suplearn p { margin: 0 0 12px; line-height: 1.55; color: var(--ink); }
/* Passkey prompt mock in the dashboard (2026-10-18). */
.modalbox.pkbox { width: min(340px, 100%); background: #fff; border-radius: 18px; padding: 22px; text-align: center; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); }
.pkbox .pkkey { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 14px; background: #f2f2f7; display: grid; place-items: center; }
.pkbox h3 { margin: 0 0 6px; font-size: 17px; }
.pkbox p { margin: 0 0 14px; font-size: 13.5px; color: #6e6e73; }
.pkbox .pkgo { display: block; width: 100%; padding: 11px; border: 0; border-radius: 12px; background: #0a84ff; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.pkbox .pkno { display: block; width: 100%; padding: 10px; margin-top: 6px; border: 0; background: none; color: #0a84ff; font: inherit; font-weight: 600; cursor: pointer; }
.pkbox .mocknote { margin: 10px 0 0; font-size: 11.5px; color: #9a9aa0; }
/* New link wizard (2026-10-19): compact copy-from list and labels. */
.wzcopy { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; margin: 4px 0 6px; padding: 2px; }
.wzcl { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 12px; cursor: pointer; font: inherit; }
.wzcl b { font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wzcl.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.wzlabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wzlab { display: inline-flex; align-items: center; gap: 4px; }
.wzlab .linky { text-decoration: none; color: var(--muted); font-size: 12px; }
.wzlabuse { border: 1px dashed var(--line); background: var(--panel); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.wzlabuse:hover { border-color: var(--accent); color: var(--accent); }
/* Link address QR (2026-10-19). */
.pfqr { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 14px; margin-top: 10px; }
.pfqrimg { width: 108px; height: 108px; flex: none; }
.pfqrimg svg { width: 100%; height: 100%; display: block; }
.pfqr b { display: block; font-size: 14.5px; } .pfqr small { color: var(--muted); font-size: 13px; }
/* Inactivity timeout (2026-10-19). */
.sessin { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sessin .seg { display: inline-flex; }
.iosh.dz { color: #b42318; }
.dzpanel { border-color: #f3c7c2; }
/* Telegram bot card and Notion account (2026-10-19). */
.tgbotcard { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tgbotcard b { display: block; font-size: 14.5px; } .tgbotcard small { display: block; color: var(--muted); font-size: 12.5px; }
.tgav { background-size: cover; background-position: center; border-radius: 50%; flex: none; }
.nacct { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.nacct b { display: block; font-size: 14.5px; } .nacct small { display: block; color: var(--muted); font-size: 12.5px; }
.nwsic { width: 36px; height: 36px; flex: none; border-radius: 8px; background: #f1f1ef; color: #37352f; display: grid; place-items: center; font-weight: 800; }
.nwsic.sm { width: 28px; height: 28px; font-size: 13px; }
.nbsteps { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.ri small.ell { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Calendar logos in the rail and the Add calendar flow (2026-10-19). */
.ri b .riic:has(> img) { background: #fff; border: 1px solid var(--line); }
.ri b .riic img { width: 14px; height: 14px; display: block; object-fit: contain; }
.opt .lsic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.opt .lsic img { width: 18px; height: 18px; display: block; }
/* How to add bots and groups (2026-10-20): side menu, steps, and a Telegram phone mock in the agents
   app's welcome-screen style (dark, doodle wallpaper masked over a gradient). */
.modalbox.tghbox { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 32px); display: grid; grid-template-columns: 230px 1fr; background: var(--panel); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(29, 22, 51, 0.55); }
.tghbox > .stx { position: absolute; top: 12px; right: 12px; z-index: 3; }
.tghnav { background: var(--canvas); border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; }
.tghnav > b { font-size: 14px; padding: 0 10px 10px; color: var(--ink-h); }
.tghnav .ri { display: flex; align-items: center; gap: 10px; text-align: left; }
.tghn { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 900; flex: none; }
.tghnav .ri.on .tghn { background: var(--accent); color: #fff; }
.tghmain { display: grid; grid-template-columns: 1fr 300px; gap: 24px; padding: 52px 28px 26px; overflow-y: auto; align-items: start; }
.tghtext h2 { margin: 4px 0 6px; font-size: 22px; }
.tghsteps { margin: 12px 0 18px; padding-left: 20px; line-height: 1.6; font-size: 14.5px; }
.tghsteps li + li { margin-top: 6px; }
@media (max-width: 860px) { .modalbox.tghbox { grid-template-columns: 1fr; } .tghnav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); } .tghnav > b { width: 100%; } .tghmain { grid-template-columns: 1fr; } }
.tghphone { width: 300px; height: 560px; border-radius: 38px; background: #000; border: 8px solid #1c1c1e; display: flex; flex-direction: column; overflow: hidden; color: #fff; font-size: 13px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6); }
.tghstatus { display: flex; justify-content: space-between; padding: 8px 18px 2px; font-size: 11px; font-weight: 700; }
.tghtop { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; background: rgba(28, 28, 30, 0.96); }
.tghback { font-size: 26px; line-height: 1; color: #6ab3f3; padding: 0 4px; }
.tghname { flex: 1; text-align: center; } .tghname b { display: block; font-size: 13.5px; } .tghname small { color: #8e8e93; font-size: 11px; }
.tghav { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #6ab3f3, #3a7bd5); display: grid; place-items: center; font-weight: 800; }
.tghbody { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.tghdoodle { position: absolute; inset: 0; background: linear-gradient(135deg, #a06ef5 0%, #e58a4e 35%, #7d5fe0 65%, #d5744f 100%); -webkit-mask-image: url("./icons/tg-doodle.svg"); mask-image: url("./icons/tg-doodle.svg"); -webkit-mask-size: 260px auto; mask-size: 260px auto; -webkit-mask-repeat: repeat; mask-repeat: repeat; opacity: 0.4; pointer-events: none; }
.tghmsgs { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.tghb { max-width: 82%; align-self: flex-start; background: rgba(38, 38, 42, 0.95); border-radius: 14px 14px 14px 4px; padding: 7px 10px; line-height: 1.38; font-size: 12.5px; }
.tghb.out { align-self: flex-end; background: #766ac8; border-radius: 14px 14px 4px 14px; }
.tghb code { background: rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 0 4px; font-size: 11px; }
.tghfrom { display: block; color: #6ab3f3; font-size: 11.5px; margin-bottom: 2px; }
.tghk { margin-top: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 5px 8px; text-align: center; font-size: 12px; }
.tgpic { display: block; width: 90px; height: 90px; border-radius: 10px; background: url("./photos/tg/bot-live.png") center/cover; }
.tghsys { align-self: center; background: rgba(0, 0, 0, 0.45); border-radius: 999px; padding: 3px 10px; font-size: 11px; color: #e5e5ea; }
.tghset { position: relative; margin: 10px; background: rgba(28, 28, 30, 0.97); border-radius: 16px; padding: 16px 12px 8px; text-align: center; }
.tghsav { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; background: url("./photos/tg/grp-live.png") center/cover; color: transparent; }
.tghset > b { display: block; font-size: 15px; } .tghset > small { color: #8e8e93; }
.tghrow { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: left; margin-top: 8px; }
.tghrow em { font-style: normal; color: #8e8e93; }
.tghrow.on { background: rgba(106, 179, 243, 0.12); border-radius: 10px; padding: 10px 8px; }
.tghsw { width: 38px; height: 22px; border-radius: 999px; background: #34c759; position: relative; }
.tghsw::after { content: ''; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.tghinput { padding: 8px 10px 18px; background: rgba(28, 28, 30, 0.96); }
.tghinput span { display: block; background: #2c2c2e; border-radius: 999px; padding: 7px 14px; color: #8e8e93; font-size: 12.5px; }
/* Small uppercase headings darker (2026-10-20, Joe): the faint --subtle was hard to see. */
:root { --headc: #6e5558; }
.dh .eyebrow, .rail h3, .sdiv, .panel .eyebrow, .evgrp > b, .setg, .apgrp, .odiaryp .eyebrow, .iosh, .apsrcg, .aspoph, .wzgrp, .whosub, .klist .kgrp, .stgrp, .fqrh, .csgrp { color: var(--headc); }
/* The doc's owner (2026-10-20): an Owner tag, and Editor fixed instead of a picker. */
.whotag.owner { color: #fff; background: #5a4a4c; border-color: #5a4a4c; margin-left: 4px; }
.shfixed { padding: 8px 14px; border: 1px dashed var(--line); border-radius: 12px; font-weight: 700; color: var(--muted); }
span.hostx { visibility: hidden; }
.wlmxagain { font-size: 12px; margin-left: 6px; }
/* Individual accounts rows (2026-10-20): grey Google logo until they have signed in with Google. */
.wlgav .glogo { width: 18px; height: 18px; object-fit: contain; }
.acg { display: grid; place-items: center; }
.acg svg { width: 18px; height: 18px; }
.acg.off { filter: grayscale(1); opacity: 0.45; }
.wlgav.acav { position: relative; overflow: visible; }
.acbadge { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.acbadge .glogo, .acbadge svg { width: 11px !important; height: 11px !important; }
.acbadge .acg { display: contents; }
/* Words wrap whole (2026-10-20): only a long unbroken string (an address, an ID) may break mid-way. */
.lbkv b, .wlgrow .wlgwho small.wlmx { word-break: normal; overflow-wrap: anywhere; }
/* @username boxes (2026-10-20): the focus ring goes on the whole box, not on the input inside it. */
.atin input.lbin:focus { outline: none !important; border: 0 !important; box-shadow: none !important; background: transparent; }
.atin:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Leave a started "New …" form (2026-10-20): its own layer, so it also works over a library popup. */
.leavepop { position: fixed; inset: 0; z-index: 400; background: rgba(29, 22, 51, 0.35); display: grid; place-items: center; padding: 16px; }
.leavepop .modalbox { width: min(440px, 100%); }
/* Portal display (2026-10-20): Preview is the real portal in a frame, shrunk to 55%. */
.pdtabs { display: inline-flex; }
.pdtabs button { flex: none; padding: 7px 18px; }
.pdlive { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); box-shadow: 0 10px 30px -18px rgba(43, 26, 28, 0.35); max-width: 720px; }
.pdframe { position: relative; height: 480px; overflow: hidden; }
.pdframe iframe { position: absolute; top: 0; left: 0; width: 181.8%; height: 181.8%; border: 0; transform: scale(0.55); transform-origin: 0 0; }
.pdlh { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pdlrow { margin-bottom: 10px; }
.pdlrow.on { border-color: var(--accent-line); }
/* Rows that open a popup are buttons (2026-10-20): look exactly like the link rows. */
button.ubrow { width: 100%; border: 0; border-radius: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.ubrow + button.ubrow { border-top: 1px solid var(--line); }
button.ubrow:hover { background: var(--accent-soft); }
/* The large-popup icon (2026-10-20), the counterpart of .drw for drawers. */
.popi { display: inline-block; width: .9em; height: .9em; margin-left: .45em; vertical-align: -0.08em; background: currentColor; -webkit-mask: url(./icons/popup.svg?v=1) center / contain no-repeat; mask: url(./icons/popup.svg?v=1) center / contain no-repeat; }
.chev .popi { margin-left: 0; width: 13px; height: 13px; }
.ubrow.pdl .rilabs, button.ubrow[data-pdlconf] .rilabs { margin-left: 0; }
div.balbox { cursor: default; }
.csopt .cssub { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.4; margin-top: 2px; white-space: normal; }
/* A long question grows the box instead of scrolling out of it (2026-10-20). */
textarea.fqtq { field-sizing: content; min-height: 0; resize: none; overflow: hidden; line-height: 1.4; }
.fqguide { margin-left: 8px; font-size: 13px; }
/* Go back, more prominent (2026-10-21): a button, not a small text link. */
.backlink { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--accent); font-size: 14px; font-weight: 800; box-shadow: 0 2px 6px -3px rgba(43, 26, 28, 0.25); }
.backlink:hover { border-color: var(--accent); background: var(--accent-soft); }
.rail .backlink, .rail .railhead .backlink { display: inline-flex; font-size: 14px; }
/* Event reserve with two currencies (2026-10-21): two cards side by side, stacked only when narrow. */
.kfund.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0; background: none; border: 0; box-shadow: none; }
@media (max-width: 760px) { .kfund.two { grid-template-columns: 1fr; } }
.kfund.two .kfcard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kfhd { display: flex; align-items: center; gap: 10px; } .kfhd b { font-size: 15px; }
.kflogo { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.kflogo.slice { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.kflogo.slice svg { width: 16px; height: 16px; }
.kfund.two .kfcells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.kfund.two .kfcells > div { border: 0; padding: 0; min-width: 0; }
.kfund.two .kfcells > div b { display: flex; align-items: center; gap: 4px; font-size: 22px; }
.kfund.two .kfcells > div span { display: block; color: var(--muted); font-size: 13px; }
.kfund.two .kresb { display: flex; gap: 8px; margin-top: auto; }
.kfund.two .kfcard .kresb { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-left: 0; }
.kfund.two { align-items: stretch; } .kfund.two .kfcard .kresb { width: 100%; justify-content: flex-start !important; align-self: stretch; grid-column: auto; grid-row: auto; }
/* One card, two halves (2026-10-21): a divider between them and a slightly different background on each. */
.kfund.two { gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.kfund.two .kfcard { border: 0; border-radius: 0; background: var(--panel); }
.kfund.two .kfcard + .kfcard { border-left: 1px solid var(--line); background: #fcf8f7; }
@media (max-width: 760px) { .kfund.two .kfcard + .kfcard { border-left: 0; border-top: 1px solid var(--line); } }
/* Event reserve stacks into two levels once the main column is too narrow for both halves (2026-10-21). */
@container kmain (max-width: 660px) {
	.kfund.two { grid-template-columns: 1fr; }
	.kfund.two .kfcard + .kfcard { border-left: 0; border-top: 1px solid var(--line); }
}
/* Slices logo: a filled circle like the Open USD one, with the slice inside. */
.kflogo.slice { background: #340d21; color: #f7dfe7; }
.kflogo.slice svg { width: 14px; height: 14px; }
.kfund .kflogo.slice svg, .kflogo.slice .sliceic { color: #f7dfe7; }
.kflogo.slice .sliceic { display: block; margin: 0; vertical-align: 0; width: 14px; height: 14px; }
/* The loaf (2026-10-21): a Slices attendee's card goes full width, the loaf on the right. */
.kgrid .ltile.slice { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; overflow: hidden; }
.ltile.slice .lmain { padding: 18px 20px 16px; min-width: 0; }
.loafp { border-left: 1px solid var(--line); background: #fcf8f7; padding: 18px 20px 16px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@container kmain (max-width: 720px) { .kgrid .ltile.slice { grid-template-columns: minmax(0, 1fr); } .loafp { border-left: 0; border-top: 1px solid var(--line); } }
.loafhd { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .loafhd .lown { margin: 0; }
.loafdone { font-size: 11.5px; font-weight: 800; color: #1a7f3c; background: #e5f6ea; border-radius: 999px; padding: 2px 9px; }
.loafbig { font-size: 15px; font-weight: 700; color: var(--muted); } .loafbig b { font-size: 30px; font-weight: 900; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.loafsvg { width: 100%; height: auto; display: block; margin: 2px 0; }
.loafsvg .sl.out { fill: #f1e8e6; }
.loafsvg .lout { fill: none; stroke: #d9c9c6; stroke-width: 2; stroke-dasharray: 4 4; }
.loafsvg .lcrust { fill: none; stroke: #b8722f; stroke-width: 3.5; stroke-linejoin: round; }
.loafsvg .sl.new { animation: slin .55s cubic-bezier(.2,.9,.3,1.2); transform-box: fill-box; transform-origin: center; }
@keyframes slin { from { transform: translateY(-22px) scaleY(1.08); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
.loafmeta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.loafvou { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 13.5px; color: var(--muted); }
.loafvou .lown { margin: 0; } .loafvou img { height: 16px; width: auto; } .loafvou b { color: var(--ink); }
/* The status menu opens upward (2026-10-21): it sits at the foot of the card, so there is no room below. */
.kstat .ddm { top: auto; bottom: calc(100% + 6px); box-shadow: 0 -10px 30px -16px rgba(43, 26, 28, 0.35); }
.kgrid .ltile.slice { overflow: visible; } .kgrid .ltile.slice .loafp { border-radius: 0 var(--r) var(--r) 0; }
@container kmain (max-width: 720px) { .kgrid .ltile.slice .loafp { border-radius: 0 0 var(--r) var(--r); } }
/* Links rail (2026-10-21): unselected links keep a light outline of their shape. */
.rail .ri:not(.on):not(.new) { border-color: #e4d3cf; }
.rail .ri:not(.on):not(.new):hover { border-color: var(--accent-line); }
.pfrow .pfurl { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sheets mirroring (2026-10-21): reattachable sheets, each with Details and Reattach. */
.shre { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.shre:first-child { border-top: 0; padding-top: 0; }
.shre .grow { min-width: 0; } .shre b { display: block; font-size: 14.5px; } .shre small { display: block; color: var(--muted); font-size: 12.5px; }
.shre .linky { white-space: nowrap; font-size: 13px; }
/* A number box inside an option row keeps the event-type size (2026-10-21): .opt input is sized for radios. */
.opt .enin input[type="text"] { height: auto; width: 66px; accent-color: auto; }
.opt .enin input[type="text"] { background: #fff; border-color: var(--line); }
/* The navigate icon (2026-10-21), for links that go to another page. */
.navi { display: inline-block; width: .95em; height: .95em; margin-left: .4em; vertical-align: -0.12em; background: currentColor; -webkit-mask: url(./icons/navigate.svg?v=1) center / contain no-repeat; mask: url(./icons/navigate.svg?v=1) center / contain no-repeat; }
/* Portal listing (2026-10-21): the fields stay in view when the link is not listed, greyed out. */
.plfields.off { opacity: 0.45; pointer-events: none; }
/* Changelog (2026-10-21): one row per change, grouped by day; who and on what authority on the right. */
.chbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.chbar .seg { display: inline-flex; } .chbar .seg button { white-space: nowrap; }
.chq { flex: 1; min-width: 200px; padding: 8px 12px !important; }
.chlist .chrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid #f5efed; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.chlist .chrow:first-child { border-top: 0; } .chlist .chrow:hover { background: var(--canvas); }
.chrow .chtime { flex: none; width: 44px; font-size: 12.5px; font-weight: 800; color: var(--subtle); font-variant-numeric: tabular-nums; }
.chrow .ava { width: 30px; height: 30px; flex-basis: 30px; font-size: 13px; }
.chrow .grow { min-width: 0; } .chrow .grow b { display: block; font-size: 14px; } .chrow .grow small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrow .grow small i { font-style: normal; color: var(--subtle); }
.chrow .chby { flex: none; text-align: right; } .chrow .chby b { display: block; font-size: 12.5px; } .chrow .chby small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--subtle); }
.chrow.undone .grow b, .chrow.undone .grow small { text-decoration: line-through; color: var(--subtle); }
.ava.ag { background: var(--accent-soft); color: var(--accent); } .ava.sy { background: #eef1f5; color: #4a5568; }
.chwho { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .chwho b { display: block; } .chwho small { color: var(--muted); }
@container kmain (max-width: 600px) { .chrow .chby { display: none; } }
.chrow > .grow { flex: 1 1 auto; } .chrow .chby { margin-left: auto; } .chrow .drw { flex: none; margin-left: 4px; }
/* Updates (2026-10-21): the Install and the Runner side by side. */
.upgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@container kmain (max-width: 820px) { .upgrid { grid-template-columns: 1fr; } }
.uphd { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .uphd b { display: block; font-size: 15px; } .uphd small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.upcard .kv b { overflow-wrap: anywhere; } .upcard .kv code.hash { font-size: 12px; }
.tb.ok { color: #1a7f3c; background: #e5f6ea; border-color: #c6ebd1; }
.tog select.fqsel { width: auto; flex: none; }
.tog .csel, .tog .cswrap { width: auto; flex: none; min-width: 150px; min-height: 38px; padding: 7px 12px; } .tog > .grow { flex: 1 1 auto; }
/* Keys (2026-10-21): a card per key; the open ones tinted. */
.keyc .keyh { align-items: flex-start; } .keyc .keyh .tk { flex: none; margin-top: 2px; }
.keyc.kres { border-color: #f0d49c; background: #fffaf0; }
.keyc .kv b { overflow-wrap: anywhere; }
/* Backup and restore (2026-10-21). */
.bktab td small { display: block; color: var(--muted); font-size: 12px; }
.bktab td code.hash { font-size: 12px; }
.bksteps { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.7; color: var(--subtle); }
.bksteps li.done { color: var(--muted); } .bksteps li.done::marker { color: #1a7f3c; }
.bksteps li.now { color: var(--ink); font-weight: 700; }
.bktab td:first-child, .bktab td:nth-child(2), .bktab td:nth-child(3), .bktab td:last-child { white-space: nowrap; } .bktab td:nth-child(4) { min-width: 150px; }
.fqwd { margin-top: 10px; } .fqwd .opt.wbmuted { opacity: 0.5; }
/* Google account blacklist rows (2026-10-21): the reason dropdown sits beside the person, fixed width. */
.blgrow .csel, .blgrow select.fqsel { width: 190px; flex: none; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.secstage { margin: -6px 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--subtle); }
/* The i beside an IP (2026-10-21) opens what is known about the address. */
.iprow code { display: flex; align-items: center; gap: 8px; }
.ipinfo { margin-left: auto; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--subtle); background: #fff; color: var(--muted); font: 800 11px Lato, system-ui, sans-serif; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.ipinfo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* Go back never wraps (2026-10-21): the label beside it gives way instead, then truncates. */
.backlink, .rail .backlink, .rail .railhead .backlink { white-space: nowrap; flex: none; }
.railhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.railwhere { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Settings, boxed (2026-10-21): full width, one box per group, and a breadcrumb on every setting. */
.page.setpage { max-width: 1340px; }
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.setbox { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 6px 6px 8px; }
.setbox .iosh { margin: 10px 12px 8px; }
.setbox .iosg { border: 0; border-radius: 12px; }
.setgrid .setbox-libraries { grid-row: span 2; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); margin: 0 0 14px; }
.crumbs a { color: var(--accent); text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.crumbs i { font-style: normal; color: var(--subtle); } .crumbs span { color: var(--muted); } .crumbs b { color: var(--ink); }
#view > .crumbs { max-width: 1340px; margin: 0 auto; padding: 20px 24px 0; }
#view > .crumbs + .studio { padding-top: 12px; }
#view > .crumbs + .studio > .rail { max-height: calc(100vh - 84px); }
#view > .crumbs + .studio .railhead { display: none; }
/* Boxes flow in columns, so a short box never leaves a gap beside a tall one. */
.setgrid { display: block; columns: 3 340px; column-gap: 18px; }
.setgrid .setbox { break-inside: avoid; margin-bottom: 18px; display: block; }
.setgrid .setbox-libraries { grid-row: auto; }
/* Secondary label entry (2026-10-21): the same box as the primary label, with Add beside it, not inside it. */
.wzaddrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.wzaddrow input { flex: 1 1 auto; min-width: 0; }
.wzaddrow .btn { flex: none; }
/* Test chat with no event type (2026-10-21): the notice on top, the chat greyed and inert. */
.tcnoev { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: #fff7e8; border: 1px solid #f0d49c; }
.tcnoev b { font-size: 14.5px; } .tcnoev span { font-size: 13px; color: var(--muted); } .tcnoev .soft { margin-top: 6px; }
.webchat.tcoff { opacity: 0.4; filter: grayscale(1); pointer-events: none; user-select: none; }
/* Teammates as cards (2026-10-21). */
.page.tmpage { max-width: 1340px; }
.tmgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tmcard { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; font: inherit; color: inherit; cursor: pointer; min-height: 230px; }
.tmcard:hover { border-color: var(--accent-line); box-shadow: 0 10px 26px -20px rgba(138, 36, 51, 0.6); }
.tmcard.own { background: linear-gradient(180deg, var(--accent-soft), var(--panel) 60%); }
.tmcard.inv { border-style: dashed; }
.tmtop { display: flex; align-items: center; gap: 12px; } .tmtop .me { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #f3dcd8; color: var(--accent); display: grid; place-items: center; font-weight: 900; }
.tmtop .grow { min-width: 0; } .tmtop b { display: block; font-size: 16px; } .tmtop small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmmid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tmrolep { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.02em; }
.tmst { font-size: 12.5px; font-weight: 700; color: var(--muted); } .tmst.you { color: var(--accent); } .tmst.inv { color: #a15c00; }
.tmdesc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.tmcan { display: flex; flex-wrap: wrap; gap: 6px; }
.tmarea { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--line); font-size: 12px; font-weight: 800; color: var(--ink); }
.tmarea i { font-style: normal; font-weight: 700; color: var(--muted); } .tmarea.all { background: #e9f6ee; border-color: #c6e7d2; } .tmarea.all i { color: #1a7f3c; }
.tmfoot { margin-top: auto; padding-top: 10px; border-top: 1px solid #f3ebe9; font-size: 13.5px; font-weight: 800; color: var(--accent); display: flex; align-items: center; }
.tmadd { border-style: dashed; background: none; align-items: flex-start; justify-content: flex-start; }
.tmadd .tmplus { width: 44px; height: 44px; border-radius: 50%; border: 1.5px dashed var(--accent-line); display: grid; place-items: center; color: var(--accent); font-size: 20px; }
.tmadd b { font-size: 16px; } .tmadd small { color: var(--muted); font-size: 13px; }
/* Save island inside a drawer (2026-10-21): the same dark pill as the settings one, pinned to the drawer's foot. */
.dsavebar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; padding: 10px 12px 10px 18px; border-radius: 999px; background: var(--ink-h); color: #fff; box-shadow: 0 14px 32px -14px rgba(29, 16, 19, 0.7); font-size: 14px; animation: dsbin .22s ease-out; }
.dsavebar .grow { min-width: 0; } .dsavebar b { font-weight: 800; }
.dsavebar .soft { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.dsavebar .btn { background: #fff; color: var(--accent); border-color: #fff; }
.dsavebar.busy { background: var(--accent); }
@keyframes dsbin { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.dsavebar .btn, .dsavebar .soft { white-space: nowrap; flex: none; } .dsavebar { border-radius: 22px; }
/* Details and Reattach always at the far right (2026-10-21). */
.shre > .grow { flex: 1 1 auto; } .shre .linky { margin-left: auto; flex: none; } .shre .soft { flex: none; }
/* Out of block (2026-10-22): a booking its host's availability no longer covers. */
.evb.oob { box-shadow: inset 0 0 0 2px #e0a100; }
.chip.oobchip { color: #8a5a00; background: #fff6e0; border-color: #f0d49c; gap: 6px; }
.ckrow .evinfo { margin-left: 4px; }
.ckrow .ipinfo.evinfo { margin-left: 6px; } .ckrow > .grow { flex: 1; }
.ckrow:has(> .grow) > .ck { flex: 0 1 auto; white-space: nowrap; }
/* Link type address shapes (2026-10-22): the varying part as a highlight. */
.wzopt .wzshape { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--muted); font-style: normal; }
.wzopt .wzshape mark { background: #ffe9a8; color: var(--ink); border-radius: 4px; padding: 0 4px; }
/* New link intro (2026-10-22): the chef is a placeholder illustration. */
.wzintro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 8px 12px 4px; }
.wzintro p { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.wzchef { width: 110px; height: 110px; background: var(--accent); -webkit-mask: url(./icons/chef.svg) center / contain no-repeat; mask: url(./icons/chef.svg) center / contain no-repeat; opacity: 0.9; }
/* New link intro (2026-10-22): it takes the whole width, then the steps column slides in. */
.stsplit.wzfull { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
.stsplit.wzfull > .stnav { visibility: hidden; overflow: hidden; }
.stsplit.wzgrow { animation: wzgrow .35s cubic-bezier(.2, .8, .3, 1); }
.stsplit.wzgrow > .stnav { animation: wzfade .35s ease-out; }
@keyframes wzgrow { from { grid-template-columns: 0 minmax(0, 1fr); gap: 0; } to { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; } }
@keyframes wzfade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1100px) { .stsplit.wzfull, .stsplit.wzgrow { grid-template-columns: minmax(0, 1fr); animation: none; } .stsplit.wzfull > .stnav { display: none; } }
.stsplit.wzfull .stbody > .wz { max-width: none; margin-left: 0; margin-right: 0; }
/* Short wizard steps are not padded to a minimum height (2026-10-22). */
.wz .wzbody { min-height: 0; }
.ri small.rimail { color: var(--ink); opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Calendar preview in the calendars library (2026-10-22). */
.calpv .apscroll { max-height: 460px; overflow-y: auto; }
.calfeed { display: block; overflow-wrap: anywhere; font-size: 12px; }
.calpv .apcalhead { position: sticky; top: 0; z-index: 3; background: var(--panel); }
/* Calendar preview, full height and sliding (2026-10-22). */
.calpv .apscroll { max-height: none; height: calc(100vh - 250px); min-height: 360px; }
.calpv .apcalbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calpv .apcalbar .grow { flex: 1; }
.calpv .apgrid.pvnext, .calpv .apcalhead.pvnext { animation: pvnext .28s ease-out; }
.calpv .apgrid.pvprev, .calpv .apcalhead.pvprev { animation: pvprev .28s ease-out; }
@keyframes pvnext { from { transform: translateX(36px); opacity: 0.25; } to { transform: none; opacity: 1; } }
@keyframes pvprev { from { transform: translateX(-36px); opacity: 0.25; } to { transform: none; opacity: 1; } }
.calpv .apscroll { overflow-x: hidden; }
.calpv .apscroll { height: calc(100vh - 196px); }
/* Preview: no fade at the foot of the panel, and the sliding columns are clipped to the grid (2026-10-22). */
.stbody:has(.calpv) { -webkit-mask-image: none; mask-image: none; }
.calpv .apgrid, .calpv .apcalhead { overflow: hidden; }
.calpv .apgrid.pvnext, .calpv .apcalhead.pvnext, .calpv .apgrid.pvprev, .calpv .apcalhead.pvprev { animation: none; }
.calpv .apscroll { height: calc(100vh - 150px); }
/* Preview bar: Today, the step groups and zoom all 34px tall (2026-10-22). */
.calpv .apcalbar > .soft.sm { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; }
.calpv .apcalbar .stepg { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; }
.calpv .apcalbar .stepg .stepb { height: 28px; min-width: 28px; }
.calpv .apcalbar .ibtn { width: 34px; height: 34px; }
/* The Apple Calendar icon is white: give it an edge and a soft shadow wherever it shows (2026-10-22). */
img[src*="cal-apple"] { border-radius: 24%; box-shadow: 0 0 0 1px rgba(43, 26, 28, 0.12), 0 2px 5px -1px rgba(43, 26, 28, 0.3); background: #fff; }
.calcopy { margin-left: 8px; vertical-align: middle; }
.ncsrchd { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; font-size: 16px; } .ncsrchd .lsic img { width: 22px; height: 22px; }
/* Week template zoom anchor (2026-10-22). */
.libweek { position: relative; padding-left: 26px; }
.zanch { position: absolute; left: 4px; width: 14px; border-radius: 7px; background: #f3ebe9; }
.zanch-h { position: absolute; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 6px -2px rgba(138, 36, 51, .7); cursor: ns-resize; touch-action: none; }
.zanch-h b { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font: 800 10.5px Lato, system-ui, sans-serif; color: var(--accent); background: #fff; border: 1px solid var(--accent-line); border-radius: 6px; padding: 1px 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.zanch-h:hover b, .zanch-h:active b { opacity: 1; }
.avbody { position: relative; }
.zanch-l { position: absolute; left: 38px; right: 0; height: 0; border-top: 1.5px dashed rgba(138, 36, 51, .35); pointer-events: none; z-index: 2; }
.zanch-ic { position: absolute; left: 1px; width: 20px; height: 20px; display: grid; place-items: center; color: var(--accent); cursor: help; z-index: 4; }
.zanch-ic svg { width: 16px; height: 16px; }
.zanch-ic em { position: absolute; left: 26px; top: -4px; width: 220px; padding: 8px 10px; border-radius: 10px; background: var(--ink-h); color: #fff; font: 600 12.5px/1.4 Lato, system-ui, sans-serif; font-style: normal; box-shadow: 0 10px 24px -12px rgba(29, 16, 19, .6); opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.zanch-ic:hover em, .zanch-ic:focus em { opacity: 1; transform: none; }
.tplhint.on { color: var(--accent); font-weight: 800; }
/* Week template grid fills the window (2026-10-22): as tall as the browser allows, never under 320px, scrolling inside. */
.libweek .avbody { height: min(calc(var(--hpx, 20px) * 24), max(320px, calc(100vh - 205px))); overflow-y: auto; }
.libweek .avbody { height: min(calc(var(--hpx, 20px) * 24), max(320px, calc(100vh - 178px))); }
/* No scroll fade under the week template grid (2026-10-22): the grid scrolls on its own. */
.stbody:has(.libweek) { -webkit-mask-image: none; mask-image: none; }

/* IP rows (2026-10-22): the address and its note, read only; the note is edited in the drawer. */
.ipopen { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ipopen:hover { border-color: var(--accent-line, var(--accent)); background: var(--accent-soft); }
.ipopen code { flex: 0 0 150px; }
.ipopen .ipnt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }
.ipopen .ipnt.none { color: var(--subtle); font-weight: 400; }
.ipopen > svg, .ipopen > .drw { flex: none; }
@media (max-width: 560px) { .ipopen code { flex: 0 1 auto; } }
.iprows { grid-template-columns: minmax(0, 1fr); }
.iprows > .iprow { min-width: 0; }
/* A toggle that stands apart from the list below it (2026-10-22). */
.tgbox { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 12px 0 14px; background: #fff; }
.tgbox .tog { margin: 0; padding: 0; border: 0; }
/* A domain's own icon sits over the globe (2026-10-22). */
.wlgrow .wldic { position: relative; overflow: hidden; }
.wlgrow .wldic img.wlfav { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 9px #fff; }
.wlgrow .wldic:has(img.wlfav) { background: #fff; }
.cflinks { display: grid; gap: 12px; margin-top: 12px; }
/* Libraries page (2026-10-22): blocks across the full width, four to a row. */
.libblocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.libblk { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel, #fff); color: var(--ink); text-decoration: none; min-height: 132px; transition: border-color .15s, box-shadow .15s; }
.libblk:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(43, 26, 28, .06); }
.libblk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.libblk b { font-size: 15px; font-weight: 800; }
.libblk small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.libblk .iosv { color: var(--muted); font-size: 13px; font-weight: 700; }
@media (max-width: 1100px) { .libblocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .libblocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .libblocks { grid-template-columns: minmax(0, 1fr); } }
/* Settings split view (2026-10-22): the groups on the left, the chosen setting on the right. */
.setwrap { height: auto; min-height: 100vh; align-items: start; }
.setwrap > .kleft { position: sticky; top: 0; height: 100vh; }
.setwrap > .kleft .iosh { margin: 20px 4px 6px; }
.setwrap > .kleft .iosh:first-of-type { margin-top: 16px; }
.setwrap > .kleft .iosr { font-size: 14.5px; min-height: 44px; }
.setwrap > .kleft .iosr .grow { padding: 10px 0; }
.setwrap > .kleft .iosr .iosv { font-size: 12px; }
.setwrap > .kleft .iosr.on { background: var(--accent-soft); color: var(--accent); }
.setwrap > .kmain { padding: 0; }
.setwrap > .kmain > .page { max-width: none; }
.setwrap > .kmain .crumbs { display: none; }
@media (max-width: 900px) { .setwrap > .kleft { position: static; height: auto; } }
.setwrap > .kmain > .page { padding-top: 26px; }
.setwrap > .kmain > .page > .hello h1 { font-size: 30px; margin-top: 0; }
.wznav.wzintro { justify-content: center; } /* the intro has one way on (2026-10-22) */
/* No visible scrollbar on the people list (2026-10-22); it still scrolls. */
.pxwrap .kleft { scrollbar-width: none; }
.pxwrap .kleft::-webkit-scrollbar { display: none; }
/* User explorer search (2026-10-22): a little room under the heading, and it stays put while the list scrolls. */
.pxqwrap { position: sticky; top: -26px; z-index: 2; margin: 0 -20px; padding: 14px 20px 10px; background: var(--canvas); }
.pxwrap .kleft .klist { margin-top: 2px !important; }
/* Settings menu icons without tiles (2026-10-22). */
.setwrap .kleft .setic { width: 22px; height: 22px; flex: 0 0 22px; background: var(--accent); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.setwrap .kleft .setsvg { width: 22px; flex: 0 0 22px; display: grid; place-items: center; color: var(--accent); }
.setwrap .kleft .setsvg svg { width: 21px; height: 21px; }
.setwrap .kleft .setlogo { width: 22px; flex: 0 0 22px; display: grid; place-items: center; }
.setwrap .kleft .setlogo img { width: 20px; height: 20px; display: block; }
.setwrap .kleft .iosr + .iosr::before { left: 46px; }
/* Billing (2026-10-22). */
.pmrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.pmrow + .pmrow { border-top: 1px solid var(--line); }
.pmrow .grow b { display: block; font-size: 14.5px; } .pmrow .grow small { color: var(--muted); font-size: 13px; }
.pmbrand { flex: none; width: 46px; height: 30px; border-radius: 6px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; font: 900 italic 12px/1 Lato, system-ui, sans-serif; letter-spacing: .02em; }
.pmbrand.visa { color: #1a1f71; }
.pmbrand.mc { display: flex; justify-content: center; align-items: center; }
.pmbrand.mc i { width: 14px; height: 14px; border-radius: 50%; background: #eb001b; display: block; }
.pmbrand.mc i + i { background: #f79e1b; margin-left: -6px; opacity: .9; }
.pmdef { font-size: 12px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.pmgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.invtab td code { font-size: 12.5px; }
.invpaid { margin-left: 6px; font-size: 11.5px; font-weight: 800; color: #2f7a4b; background: #e8f5ec; border-radius: 999px; padding: 2px 8px; }
/* Event reserve rows (2026-10-22): "Of that, …" labels fit on one line. */
#drawer .kv > span { min-width: 140px; }
.calcopy.linky { vertical-align: baseline; font-size: inherit; line-height: inherit; padding: 0; } /* sits on the text line (2026-10-23) */
.sec > p.hint:empty { display: none; }
/* Avatars sit at the top of multi-line list rows (2026-10-23). */
.wlgrow { align-items: flex-start; }
.wlgrow > .wlgav { margin-top: 2px; }
.wlgrow > .wlgx, .wlgrow > select, .wlgrow > .fqsel, .wlgrow > .csel { align-self: center; }
.setwrap > .kleft { scrollbar-width: none; overflow-anchor: none; }
.setwrap > .kleft::-webkit-scrollbar { display: none; }
.sw:disabled { opacity: .45; cursor: not-allowed; } /* locked on (2026-10-23) */
.payoff { opacity: .45; pointer-events: none; filter: grayscale(1); } /* a payout method switched off: shown, not editable (2026-10-23) */
.sw.locked { cursor: not-allowed; } /* locked on (the only method on): keeps its on colour, a padlock on the knob (2026-11-02) */
.sw.locked::after { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a2433' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' fill='%238a2433' stroke='none'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 11px 11px no-repeat; }
/* Attendee wallet actions under the heading (2026-10-23): same width each. */
.kwacts { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 8px; margin: 0 0 12px; }
.kwacts > button { width: 100%; justify-content: center; }
/* Top up popup (2026-10-23). */
.ktpbox { max-width: 420px; }
.ktpamt { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; }
.ktpamt input { flex: 1; border: 0; outline: 0; font: 800 20px Lato, system-ui, sans-serif; padding: 10px 0; background: transparent; min-width: 0; }
.ktpamt i { font-style: normal; color: var(--muted); font-weight: 800; }
.ktpamt:focus-within { border-color: var(--accent); }
.gbtn { display: inline-flex; align-items: center; gap: 8px; }
.gbtn .glogo { width: 16px; height: 16px; background: #fff; border-radius: 50%; padding: 2px; }
.ktpwait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 8px; text-align: center; }
.ktpwait .glogo { width: 28px; height: 28px; animation: ktpp 1s ease-in-out infinite alternate; }
.ktpwait small { color: var(--muted); }
@keyframes ktpp { to { transform: scale(1.12); } }
.ktpamt input, .ktpamt input:focus { border: 0 !important; box-shadow: none !important; outline: 0 !important; border-radius: 0; }
.ktpbox .btn.gbtn { color: #fff; }
.ktpcode { font: 800 22px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--accent); margin-top: 6px; }
/* Dashboard (2026-10-23): every button on the event page is the small size, matching Stop all payments. */
.kwrap .kmain button.soft:not(.sm), .kwrap .kmain button.btn:not(.sm) { padding: 6px 12px; font-size: 13px; min-height: 34px; }
.slper { margin: 10px 0 12px; } /* Slices period picks (2026-10-23) */
/* Slices by country (2026-10-23). */
.slvch { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.slvch img { width: 34px; height: 34px; border-radius: 8px; }
.slvch b { display: block; font-size: 14.5px; } .slvch small { color: var(--muted); font-size: 13px; }
.slvt { margin: 0 0 12px; font-size: 14px; color: var(--muted); } .slvt b { color: var(--ink); }
/* Bread types and the fill-up preview (2026-10-23). */
.breads { display: grid; gap: 8px; margin: 10px 0 12px; }
.breads .opt { margin: 0; }
.slprev { background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.slrow { display: flex; gap: 6px; padding: 3px 0; }
.slbit { width: 22px; height: 20px; display: grid; place-items: center; color: #c9893a; font-style: normal; }
.slbit .sliceic { width: 18px; height: 16px; }
.slloaf { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; padding: 6px 10px; border-radius: 10px; background: #fff6e6; border: 1px solid #f0d49c; }
.slloaf b { font-size: 13.5px; } .slloaf span { font-size: 12.5px; color: var(--muted); }
.slrow { flex-wrap: wrap; } /* Slices fill the width (2026-10-23) */
/* Breadslice Dough icon (2026-10-23): the glyph from icons/dough.svg, coloured like the other tile glyphs. */
.doughic { display: block; width: 70%; height: 70%; background: currentColor; -webkit-mask: url('./icons/credits.svg?v=1') center / contain no-repeat; mask: url('./icons/credits.svg?v=1') center / contain no-repeat; }
.wlogo.slice { color: #fff; }
.doughin { display: inline-block; width: .9em; height: .9em; margin-right: .18em; vertical-align: -0.08em; background: currentColor; -webkit-mask: url('./icons/credits.svg?v=1') center / contain no-repeat; mask: url('./icons/credits.svg?v=1') center / contain no-repeat; }
.wb b .doughin, b .doughin { display: inline-block !important; font-size: inherit !important; width: .9em !important; height: .9em !important; margin: 0 .16em 0 0 !important; padding: 0 !important; color: inherit; text-transform: none; letter-spacing: 0; }
.faqi + .faqi { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } /* FAQ entries (2026-10-23) */
/* Slices FAQ popup (2026-10-23): the Telegram help's layout, text only. */
.modalbox.faqbox { width: min(820px, 100%); min-height: 380px; }
.tghmain.faqmain { grid-template-columns: 1fr; }
.faqp { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; }
/* Select slice value popup (2026-10-23): breads on the left, how a meeting fills up on the right. */
.modalbox.slvbox { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 32px); display: grid; grid-template-columns: 380px 1fr; background: var(--panel); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(29, 22, 51, 0.55); }
.slvbox > .stx { position: absolute; top: 12px; right: 12px; z-index: 3; }
.slvl { padding: 22px 20px; background: var(--canvas); border-right: 1px solid var(--line); overflow-y: auto; }
.slvl h2 { margin: 4px 0 6px; font-size: 22px; }
.slvr { padding: 52px 24px 24px; overflow-y: auto; }
.slvsel .grow b { display: block; } .slvsel small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 860px) { .modalbox.slvbox { grid-template-columns: 1fr; } .slvl { border-right: 0; border-bottom: 1px solid var(--line); } }
/* Zoom centre on an event type's availability (2026-10-23), as on week templates. */
.zweek { position: relative; padding-left: 26px; }
.zanch-l b { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 11.5px Lato, system-ui, sans-serif; white-space: nowrap; opacity: 0; transition: opacity .12s; pointer-events: none; }
.zdrag .zanch-l b { opacity: 1; }
/* Approvals request cards (2026-10-23), from the approval cards sandbox. */
.apwho { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.apwho > .grow { flex: 1; min-width: 0; }
.apwho b { display: block; font-size: 16px; } .apwho small { color: var(--muted); font-size: 13px; }
.apjump { position: sticky; top: -20px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px -4px 0; padding: 8px 4px; background: var(--panel, #fff); }
.apjump button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font: 800 12.5px Lato, system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.apjump button:hover { border-color: var(--accent); color: var(--accent); }
.apbox { border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 12px; margin-top: 12px; background: #fff; scroll-margin-top: 56px; }
.apbox .aph3 { margin-top: 12px; } .apbox .aplinks { margin-top: 8px; }
.apscr { display: flex; align-items: center; gap: 18px; } .apscr .grow { flex: 1; min-width: 0; }
.apring { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; align-self: center; }
.apring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.apring b { position: relative; font: 900 14px Lato, system-ui, sans-serif; margin-top: 2px; }
.apring.big { width: 74px; height: 74px; } .apring.big b { font-size: 21px; margin-top: -4px; }
.apring.big small { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 800; color: var(--muted); }
.kv b .aptag { display: inline-block; width: auto !important; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #f3ebe9; color: var(--muted) !important; font-size: 11.5px; font-weight: 800 !important; }
.kv b .apok { color: #2f7a4b !important; font-weight: 800 !important; width: auto !important; } .kv b .apno { color: #b42318 !important; font-weight: 800 !important; width: auto !important; }
.kv b .aplnk { width: auto !important; margin-left: 12px; font-size: 13px; font-weight: 800; }
.kv b .apcalic { width: 16px !important; height: 16px; vertical-align: -3px; margin-right: 2px; }
.kv b .apflow { display: inline-block; width: auto !important; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.apflow.passed { background: #e8f5ec; color: #2f7a4b !important; } .apflow.agent { background: #fff6e6; color: #b06a00 !important; }
.aprow .apring { margin-left: auto; }
.apleft .apbox { scroll-margin-top: 8px; } .apleft > .apbox:first-child { margin-top: 0; }
.kv b .tb { width: auto !important; flex: none !important; display: inline-block; margin-right: 4px; } /* link labels in request cards (2026-10-23) */
/* Narrower request list (2026-10-23), so the request card has more room. */
.ap3 { grid-template-columns: 270px minmax(0, 1fr); }
@media (max-width: 900px) { .ap3 { grid-template-columns: 1fr; } }
/* Tighter rows for the narrower list (2026-10-23). */
.ap3 .aprow { gap: 9px; padding: 9px 10px; }
.ap3 .aprow .pav { width: 30px; height: 30px; flex: none; }
.ap3 .aprow b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap3 .aprow small { font-size: 12px; }
.ap3 .aprow .apring { width: 38px; height: 38px; } .ap3 .aprow .apring b { font-size: 12px; }
.ap3 .aprow .apfoot .hpill, .ap3 .aprow .apfoot .kchip { font-size: 10.5px; padding: 2px 7px; }
/* Screening ring under the avatar in list rows (2026-10-23). */
.aprow .apavc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ap3 .aprow .apavc .apring { margin: 0; width: 34px; height: 34px; } .ap3 .aprow .apavc .apring b { font-size: 11px; }
/* Request card in two columns (2026-10-23): left scrolls with its own Decline / Approve bar; the day runs the full height on the right. */
.apdetail.apdet2 { flex-direction: row; }
.apdet2 .apmain { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.apdet2 .apmain .apbody { flex: 1; min-height: 0; overflow-y: auto; display: block; padding-bottom: 20px; }
.apdet2 .apleft { overflow: visible; padding: 0; }
.apdet2 .apjump { top: -20px; }
.apdet2 .apright.apfull { position: static; flex: 0 0 230px; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); padding: 12px 10px 0 10px; }
.apdet2 .apright.apfull .apcal.mini { display: flex; flex-direction: column; }
.apdet2 .apright.apfull .apcal.mini .apcalhead { position: sticky; top: -12px; background: #fff; z-index: 3; }
@media (max-width: 1100px) { .apdetail.apdet2 { flex-direction: column; } .apdet2 .apright.apfull { flex: none; border-left: 0; border-top: 1px solid var(--line); } }
/* The day beside a request, redesigned (2026-10-23): tinted column, date on top, Show larger pinned at the foot. */
.apdet2 .apright.apfull { background: #f7f1ef; padding: 0; }
.apdet2 .apright.apfull .apcal.mini { min-height: 100%; }
.apdet2 .apright.apfull .apcal.mini .apcalhead { top: 0; display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 10px 8px; background: #f7f1ef; border-bottom: 1px solid var(--line); }
.apmday { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.apmday b { font-size: 13.5px; } .apmday small { font-size: 11px; color: var(--muted); font-weight: 700; }
.apdet2 .apright.apfull .apgrid { margin: 8px 8px 0 4px; }
.apdet2 .apright.apfull .apcol { background-color: #fff; border-radius: 10px; }
.apmfoot { position: sticky; bottom: 0; margin-top: auto; padding: 10px; background: #f7f1ef; border-top: 1px solid var(--line); z-index: 3; }
.apmfoot .soft { width: 100%; justify-content: center; }
.apdet2 .apright.apfull { -webkit-mask-image: none !important; mask-image: none !important; }
.apdet2 .apright.apfull .apcal.mini .apcalhead { flex-wrap: wrap; justify-content: space-between; }
.apdet2 .apright.apfull .apmday { flex: 1 0 100%; margin-bottom: 4px; }
.apdet2 .apright.apfull .apcol { box-shadow: 0 0 0 1px var(--line); }
.ap3 .apM { max-width: 1240px; } /* the request card uses the width it has (2026-10-23) */
.apdet2 .apleft .apbox { scroll-margin-top: 58px; } /* clear the pinned anchor row when jumping (2026-10-23) */
.apscr { display: block; } .apscr > .apring.big { margin: 4px 0 6px; } .apscr > .aptable { width: 100%; } /* score top left, table full width below (2026-10-23) */
/* Booking chats (2026-10-23): rows and header in the Approvals style; one drawer for the details. */
.inbL .chrow { align-items: flex-start; gap: 10px; }
.inbL .chrow .apavc .apring { width: 34px; height: 34px; margin: 0; } .inbL .chrow .apavc .apring b { font-size: 11px; }
.inbL .chrow small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbL .chrow .chlast { color: var(--ink); opacity: .75; }
.rhead.chhead { display: block; padding: 12px 16px 6px; }
.chhead .apwho { margin: 0; } .chhead .apwho .apring { margin-left: auto; }
.chhead .chjump { position: static; margin: 8px 0 0; padding: 0; background: none; }
.chdjump { position: sticky; top: 0; z-index: 3; margin: 0 0 4px; padding: 8px 0; background: var(--panel, #fff); }
#drawer .apbox { scroll-margin-top: 54px; }
#drawer .apscr { display: block; }
.apavc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; } .apavc > .pav { display: block; }
/* In the drawer the header (about 96px) stays at the top: the section buttons sit under it, and jumps clear both. */
.chdjump { top: 96px; }
#drawer .apbox { scroll-margin-top: 150px; }
/* One group of section buttons beside the profile, one drawer icon (2026-10-23). */
.chseg { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 3px; flex: none; }
.chseg button { border: 0; background: none; border-radius: 999px; padding: 5px 10px; font: 800 12.5px Lato, system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.chseg button:hover { background: var(--accent-soft); color: var(--accent); }
.chseg-ic { display: grid; place-items: center; padding: 0 8px 0 4px; color: var(--muted); border-left: 1px solid var(--line); margin-left: 2px; height: 22px; }
.chhead .apwho { gap: 12px; } .chhead .apwho .apring { margin-left: 0; }
@media (max-width: 1100px) { .chhead .apwho { flex-wrap: wrap; } }
#drawer .chdjump { background: rgb(250, 246, 245); margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; } /* match the drawer, edge to edge (2026-10-24) */
#drawer .chdjump { border-bottom: 1px solid var(--line); margin-bottom: 12px; } /* a line under the section buttons (2026-10-24) */
/* Booking chats list (2026-10-24): about 100px narrower; the screening ring under the time on the right. */
.inb { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 900px) { .inb { grid-template-columns: 1fr; } }
.inbL .chrow .pav { flex: none; }
.inbL .chrow .grow { flex: 1; min-width: 0; }
.chright { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chright .apring { width: 32px; height: 32px; margin: 0; } .chright .apring b { font-size: 11px; }
.chright .apring { align-self: flex-end; } /* flush right under the time (2026-10-24) */
/* Chat tools bar (2026-10-24): down the right of the chat. */
.chwrap { flex: 1 1 auto; min-height: 0; display: flex; }
.chwrap > .cbody { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; }
.chtools { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-left: 1px solid var(--line); background: #fff; }
.chtool { position: relative; width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.chtool svg { width: 18px; height: 18px; }
.chtool:hover { background: var(--accent-soft); color: var(--accent); }
.chtool.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line, var(--line)); }
.chtool em { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 8px; background: var(--ink-h); color: #fff; font: 700 12px Lato, system-ui, sans-serif; font-style: normal; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.chtool:hover em, .chtool:focus-visible em { opacity: 1; }
/* Collapsed agent messages: one muted line each. */
.colagent .m.a > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; opacity: .6; padding-top: 6px; padding-bottom: 6px; }
.colagent .m.a > div > em { display: none; }
/* The summary at the top of the chat. */
.chsum { position: relative; flex: none; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.chsum b { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--subtle); margin-bottom: 4px; }
.chsum p { margin: 0; font-size: 14px; line-height: 1.5; }
.chsum .close { position: absolute; top: 8px; right: 8px; }
.chseg button.off { color: var(--subtle); opacity: .55; cursor: default; } .chseg button.off:hover { background: none; color: var(--subtle); } /* no events yet (2026-10-24) */
/* Booking chat drawer in tabs (2026-10-24). */
.chtabs { position: sticky; top: 96px; z-index: 3; display: flex; gap: 4px; margin: 0 -22px 12px; padding: 8px 22px; background: rgb(250, 246, 245); border-bottom: 1px solid var(--line); }
.chtabs button { border: 0; background: none; border-radius: 999px; padding: 6px 12px; font: 800 13px Lato, system-ui, sans-serif; color: var(--muted); cursor: pointer; }
.chtabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.chtabs button em { font-style: normal; font-size: 11px; background: #f3ebe9; border-radius: 999px; padding: 1px 6px; margin-left: 2px; }
.chevs { display: grid; gap: 8px; }
.chevt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.chevt:hover { border-color: var(--accent); }
.chevt .grow { flex: 1; min-width: 0; } .chevt b { display: block; font-size: 14.5px; } .chevt small { color: var(--muted); font-size: 12.5px; }
.chevt .apflow { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.chevt-go { color: var(--muted); font-size: 18px; }
.apflow.ended { background: #fdecec; color: #b42318 !important; }
.chscr { display: flex; align-items: center; gap: 16px; padding: 12px 0 4px; } .chscr .grow { flex: 1; min-width: 0; } .chscr b { font-size: 15px; }
.chfaces { display: flex; gap: 8px; }
.chfaces button { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 24px; cursor: pointer; }
.chfaces button:hover { border-color: var(--accent); } .chfaces button.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-line, var(--accent-soft)); }
.chface { display: grid; place-items: center; width: 32px; height: 32px; font-size: 22px; line-height: 1; flex: none; }
.chface.big { width: 74px; height: 74px; font-size: 48px; }
#drawer .apbox > .soft { margin-bottom: 4px; }
/* Override faces bordered red to green (2026-10-24). */
.chfaces button { border-width: 2px; }
.chfaces .f1 { border-color: #e04f4f; } .chfaces .f2 { border-color: #ef8a3c; } .chfaces .f3 { border-color: #e8c13a; } .chfaces .f4 { border-color: #8cc152; } .chfaces .f5 { border-color: #2f9e6b; }
.chfaces .f1.on { background: #fdecec; box-shadow: 0 0 0 3px #f7c4c4; } .chfaces .f2.on { background: #fff1e6; box-shadow: 0 0 0 3px #fad3b4; } .chfaces .f3.on { background: #fff8e1; box-shadow: 0 0 0 3px #f3e3a6; } .chfaces .f4.on { background: #f1f8e9; box-shadow: 0 0 0 3px #d2e8b8; } .chfaces .f5.on { background: #e8f5ec; box-shadow: 0 0 0 3px #b8e0c7; }
.chfaces button:hover { filter: brightness(.97); }
.chfaces button.f1.on { border-color: #e04f4f; } .chfaces button.f2.on { border-color: #ef8a3c; } .chfaces button.f3.on { border-color: #e8c13a; } .chfaces button.f4.on { border-color: #8cc152; } .chfaces button.f5.on { border-color: #2f9e6b; }
/* Agent effort in Chat-form guidance (2026-10-24): divided off above and below. */
.fqeff { margin: 10px 0 14px; padding: 12px 0 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stestsec .fqtest { margin-top: 0; } /* flow test without its header (2026-10-24) */
/* Flow test top bar and the one-question drawer (2026-10-24). */
.fqtop { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.fqtop .grow { flex: 1; min-width: 0; } .fqtop b { display: block; font-size: 15px; margin-top: 2px; }
.stestsec .fqtest { grid-template-columns: minmax(0, 1fr); }
.fqdr .fqhd .hostx, .fqdr .acts:has([data-fqtest]) { display: none; }
.fqdr .fq { border: 0; padding: 0; background: none; }

/* ===== Live attendee card, merged from loaf-mock (2026-10-24) ===== */
/* Loaf meter sandbox (2026-10-24). */
.lm-cap { font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--subtle); }

/* The attendee's phone. */
.lm-phone { width: 340px; border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: 0 10px 30px rgba(80,30,30,.08); overflow: hidden; }
.lm-ph-top { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.lm-ph-top b { flex: 1; } .lm-clock { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 800; }
.lm-dot { width: 8px; height: 8px; border-radius: 50%; background: #3a9d5d; }
.lm-ph-body { padding: 16px 18px 18px; }
.lm-phone.sm { width: 100%; max-width: 340px; border-radius: 24px; box-shadow: none; }

/* The meter. */
.lm-meter { display: grid; gap: 12px; }
.lm-vh { display: flex; align-items: center; justify-content: space-between; }
.lm-none { font-size: 13px; color: var(--muted); }
.lm-vs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -4px; }
.lm-v { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 10px; background: #eaf7ee; border: 1px solid #bfe3cb; font-size: 13px; }
.lm-v img { height: 14px; } .lm-v b { color: #1f6b3d; }
.lm-v.new { animation: lmv .9s cubic-bezier(.2,1.6,.4,1); }
@keyframes lmv { 0% { transform: scale(.3) translateY(30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lm-more { font-size: 13px; font-weight: 800; color: var(--muted); }
.lm-vtot { margin-left: auto; font-weight: 900; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.lm-claim { border: 0; background: #1f8a4c; color: #fff; border-radius: 999px; padding: 5px 12px; font: 800 12.5px Lato, system-ui, sans-serif; cursor: pointer; }
.lm-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.lm-vchip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.lm-vchip img { height: 15px; } .lm-vchip b { color: var(--ink); }
.lm-lw { padding: 2px 0; }
.lm-loaf { display: block; width: 100%; height: auto; overflow: visible; }
.lm-ghost { fill: none; stroke: #e6d6d2; stroke-width: 2; stroke-dasharray: 5 5; }
.lm-crust { fill: none; stroke: #b07436; stroke-width: 5; }
.lm-gone { animation: lmgone 0.55s cubic-bezier(.5,0,.9,.4) forwards; transform-box: fill-box; transform-origin: center; }
/* A Slice cut off flies straight up and off the screen (2026-10-30), quickly. */
@keyframes lmgone { 0% { opacity: 1; transform: none; } 15% { transform: translateY(-14px); } 100% { opacity: 1; transform: translateY(-560px); } }
.lm-meta { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.lm-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lm-foot { margin: -4px 0 0; font-size: 12px; color: var(--subtle); }

/* Slice by slice. */
.lm-one { display: flex; align-items: center; gap: 14px; }
.lm-big { position: relative; width: 64px; height: 64px; flex: none; }
.lm-big svg { width: 100%; height: 100%; }
.lm-big .sl-crust { fill: #b07436; } .lm-big .sl-crumb { fill: #f4d9a6; }
.lm-big.pop svg { animation: lmpop .6s cubic-bezier(.2,1.8,.4,1); }
@keyframes lmpop { 0% { transform: translateY(-18px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lm-big em { position: absolute; top: -6px; right: -10px; font: 900 13px Lato, system-ui, sans-serif; font-style: normal; color: var(--accent); animation: lmplus 1.2s ease-out forwards; }
@keyframes lmplus { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
.lm-one .grow { flex: 1; min-width: 0; }
.lm-n { display: block; font-size: 30px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.lm-n small { font-size: 15px; color: var(--muted); font-weight: 800; }
.lm-bar { margin-top: 8px; height: 12px; border-radius: 999px; background: #f3ebe9; overflow: hidden; }
.lm-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e4ad68, #c98545); transition: width .5s; }

/* The host's card: the attendee on the left, what they see on the right. */
.lm-hr { padding: 20px; background: #fbf6f4; border-left: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.lm-tot { display: flex; align-items: baseline; gap: 8px; font-size: 18px; font-weight: 800; color: var(--accent); }
.lm-run { margin-left: auto; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lm-run.on::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3a9d5d; margin-right: 6px; }
.lm-rate { margin: 0; font-size: 14px; color: var(--muted); }
.lm-more { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 10px; border: 1px dashed #bfe3cb; background: #f5fbf7; color: #1f6b3d; font-size: 13px; font-weight: 800; } /* past 4 vouchers (2026-10-24) */
.lm-more.new { animation: lmv .9s cubic-bezier(.2,1.6,.4,1); }
/* Stopped by the host (2026-10-24): the attendee sees it too. */
.lm-dot.off { background: #c9b8b4; }
.lm-stop { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fdf1e6; border: 1px solid #f1d2b3; font-size: 13px; }
.lm-stop b { color: #9a4a12; font-size: 13.5px; } .lm-stop span { color: var(--muted); }
.lm-meter.off .lm-lw, .lm-meter.off .lm-one { filter: grayscale(.85); opacity: .55; }
/* Stopped: share earned, and what happens if it never resumes (2026-10-24). */
.lm-what { border: 0; background: none; padding: 0; font: 800 13.5px Lato, system-ui, sans-serif; color: var(--accent); text-decoration: underline; cursor: pointer; }
.lm-pct { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #fbf3e6; }
.lm-pct b { font-size: 30px; font-weight: 900; color: #9a5a1a; } .lm-pct span { color: var(--muted); font-size: 14px; }
/* Stopped sits over the loaf instead of a box on top, so the meter keeps its height (2026-10-24). */
.lm-prog { position: relative; }
.lm-stopped { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #f1d2b3; color: #9a4a12; font-size: 13.5px; font-weight: 800; box-shadow: 0 4px 14px rgba(80,30,30,.1); }
/* Pay out remainder, when stopped (2026-10-24). */
.lm-pay { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fcf8f7; display: grid; gap: 10px; }
.lm-pay > b { font-size: 15px; } .lm-pay p { margin: -6px 0 0; font-size: 13.5px; color: var(--muted); }
.lm-payg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lm-payg div { padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; gap: 2px; }
.lm-payg span { font-size: 11.5px; font-weight: 800; color: var(--subtle); } .lm-payg b { font-size: 15px; font-variant-numeric: tabular-nums; }
.lm-short { color: #b42318; }
.lm-pay .btn { justify-self: start; }
/* Fixed sizes (2026-10-24): nothing in the meter or the host card moves between states. */
.lm-vs { height: 72px; align-content: flex-start; overflow: hidden; margin-top: -4px; }
.lm-vtot { margin-left: 0; }
.lm-v, .lm-more { height: 32px; box-sizing: border-box; }
.lm-none { align-self: flex-start; padding-top: 6px; }
.lm-prog { height: 152px; display: flex; align-items: center; }
.lm-prog > .lm-lw, .lm-prog > .lm-one { width: 100%; }
.lm-lw { padding: 0; }
.lm-meta { height: 22px; align-items: center; white-space: nowrap; }
.lm-foot { height: 16px; }
.lm-phone .lm-ph-body { height: 404px; box-sizing: border-box; overflow: hidden; }
/* Google Meet box before the start, from the extension (2026-10-24). */
.lm-meet { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fcf8f7; display: grid; gap: 12px; }
.lm-mh { display: flex; align-items: center; gap: 8px; }
.lm-mic svg { width: 22px; height: 22px; display: block; }
.lm-mh > b { font-size: 15px; } .lm-mh small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.lm-late { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--muted); padding: 2px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.lm-late.bad { color: #b42318; border-color: #f3c3bd; background: #fdecec; }
.lm-mst { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.lm-mst i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: #c9b8b4; }
.lm-mst.green i { background: #2f9e5b; box-shadow: 0 0 0 4px #e3f4ea; } .lm-mst.amber i { background: #e09a1a; box-shadow: 0 0 0 4px #fbf0dc; }
.lm-mst span { display: grid; gap: 2px; } .lm-mst b { font-size: 14px; } .lm-mst small { font-size: 13px; color: var(--muted); }
.lm-macts { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-macts button:disabled { opacity: .45; cursor: not-allowed; }
.lm-meet.done p { margin: 0; font-size: 13.5px; color: var(--muted); }
.lm-undo { margin-left: auto; border: 0; background: none; color: var(--accent); font: 800 13px Lato, system-ui, sans-serif; text-decoration: underline; cursor: pointer; }
/* Extension status row in the Meet box (2026-10-24). */
.lm-ext { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; margin: -4px 0 -2px; }
.lm-ext i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #c9b8b4; }
.lm-ext.green i { background: #2f9e5b; } .lm-ext.amber i { background: #e09a1a; }
.lm-ext b { font-weight: 800; white-space: nowrap; } .lm-ext small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lm-ext.amber b { color: #9a5a12; }
.lm-meet { gap: 10px; }
/* Open USD meter (2026-10-24): same frame and heights as the loaf. */
.lm-wal { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; font: 800 12.5px Lato, system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.lm-usd { height: 72px; margin-top: -4px; display: grid; align-content: center; gap: 2px; }
.lm-usd b { position: relative; justify-self: start; font-size: 38px; font-weight: 900; color: #1f6b3d; font-variant-numeric: tabular-nums; line-height: 1; }
.lm-usd b.pop { animation: lmpop .5s cubic-bezier(.2,1.8,.4,1); }
.lm-usd b em { position: absolute; top: -10px; right: -54px; font: 900 13px Lato, system-ui, sans-serif; font-style: normal; color: #1f8a4c; animation: lmplus 1.2s ease-out forwards; }
.lm-usd small { font-size: 12.5px; color: var(--muted); }
.lm-uprog { flex-direction: column; justify-content: center; align-items: stretch; gap: 6px; }
.lm-ubar { height: 14px; border-radius: 999px; background: #eef5f0; overflow: hidden; }
.lm-ubar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5cc489, #1f8a4c); transition: width .5s; }
.lm-ubl { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.lm-spend { margin-top: 10px; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.lm-spend:hover { border-color: var(--accent); }
.lm-spend .grow { flex: 1; min-width: 0; } .lm-spend b { display: block; font-size: 14px; } .lm-spend small { font-size: 12.5px; color: var(--muted); }
.lm-chef { width: 40px; height: 40px; border-radius: 12px; background: #fbf3e6; display: grid; place-items: center; flex: none; }
.lm-chef img { width: 26px; height: 26px; } .lm-chef.big { width: 52px; height: 52px; } .lm-chef.big img { width: 34px; height: 34px; }
.lm-chev { color: var(--muted); font-size: 20px; }
.lm-ustop { top: 7px; transform: translate(-50%, 0); }
.lm-meter.off .lm-uprog .lm-ubar, .lm-meter.off .lm-usd b { filter: grayscale(.85); opacity: .55; }
.lm-meter.off .lm-uprog { filter: none; opacity: 1; }
.lm-spend { margin-top: 6px; padding: 8px 12px; }
.lm-usd small, .lm-spend small, .lm-foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-uprog .lm-stopped { max-width: 92%; }
.lm-how { margin-top: 2px; } /* None yet with How this works (2026-10-24) */
/* Pay out voucher remainder in a drawer (2026-10-24). */
/* Start and resume need Sam in the Meet (2026-10-24). */
.lm-block { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 700; }
/* Terminate reasons (2026-10-24). */
/* Terminate reason inline (2026-10-24): a styled select, not the stock one. */
.lm-term { display: flex; gap: 8px; align-items: center; }
.lm-selw { position: relative; flex: 1; min-width: 0; }
.lm-selw::after { content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lm-selw select { appearance: none; -webkit-appearance: none; width: 100%; height: 34px; padding: 0 32px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 700 13px Lato, system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.lm-selw select:focus { outline: none; border-color: var(--accent); }
.lm-selw select.empty { color: var(--muted); }
/* Open USD trimmed (2026-10-24): the amount, the stopped pill beside it, then How to spend this. */
.lm-usd { position: relative; height: 96px; }
.lm-usd .lm-ustop { top: 50%; left: auto; right: 0; transform: translateY(-50%); }
/* Stopped pill sits over the amount, like it does over the loaf (2026-10-24). */
.lm-usd { justify-items: center; }
.lm-usd b { justify-self: center; }
.lm-usd .lm-ustop { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); }
/* The amount stays readable when stopped; the pill sits just under it (2026-10-24). */
.lm-usd { align-content: center; gap: 10px; }
.lm-usd .lm-ustop { position: static; transform: none; }
.lm-meter.off .lm-usd b { opacity: .75; }
/* Rate and 10-second countdown above How to spend this (2026-10-24). */
.lm-cd { display: inline-flex; align-items: center; gap: 6px; }
.lm-cd.idle { opacity: .6; }
.lm-ring { width: 18px; height: 18px; transform: rotate(-90deg); }
.lm-ring circle { fill: none; stroke-width: 3; }
.lm-ring .bg { stroke: #e7efe9; } .lm-ring .fg { stroke: #1f8a4c; stroke-dasharray: 50.27; transition: stroke-dashoffset .9s linear; }
/* How to spend this sits at the bottom of the Open USD screen (2026-10-24). */
.lm-umeter { height: 100%; display: flex; flex-direction: column; gap: 12px; }
.lm-umeter .lm-spend { margin-top: auto; }
/* What the rate adds up to over a meeting (2026-10-24), capped. */
.lm-ugrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lm-ugrid div { display: grid; justify-items: center; gap: 1px; padding: 7px 2px; border-left: 1px solid var(--line); }
.lm-ugrid div:first-child { border-left: 0; }
.lm-ugrid span { font-size: 11px; font-weight: 800; color: var(--subtle); }
.lm-ugrid b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lm-ugrid small { font-size: 10px; font-weight: 800; color: var(--muted); line-height: 1; }
.lm-ugrid .cap b { color: var(--muted); }
/* Currency flags under the table (2026-10-24). */
.lm-fx { position: relative; display: flex; align-items: center; gap: 8px; }
.lm-flag { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: #fff; cursor: pointer; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.lm-flag img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.lm-flag.on { border-color: var(--accent); box-shadow: 0 0 0 2px #fde8ec; }
.lm-flag.add { border: 2px dashed #c9b8b4; box-shadow: none; color: var(--muted); font: 800 16px Lato, system-ui, sans-serif; }
.lm-flag.add:hover { border-color: var(--accent); color: var(--accent); }
.lm-fxsay { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--muted); }
.lm-fxpop { position: absolute; left: 0; top: 38px; z-index: 5; width: 220px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(80,30,30,.14); display: grid; }
.lm-fxpop button { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; background: none; border-radius: 10px; cursor: pointer; font: 700 13.5px Lato, system-ui, sans-serif; color: var(--ink); text-align: left; }
.lm-fxpop button:hover { background: #fcf3f2; }
.lm-fxpop img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.lm-fxpop span { flex: 1; } .lm-fxpop small { color: var(--muted); font-weight: 800; }
.lm-ph-body { overflow: visible; }
.lm-fxpop { top: auto; bottom: 38px; } /* opens upward so the phone edge never clips it */
.lm-gear { width: 30px; height: 30px; padding: 0; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.lm-gear svg { width: 19px; height: 19px; fill: currentColor; }
.lm-gear:hover { color: var(--accent); background: #fcf3f2; }
/* Currency picker as type boxes (2026-10-24). */
.lm-fxpop { width: 250px; gap: 6px; }
.lm-fxin { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; }
.lm-fxin input { height: 32px; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; font: 700 13px Lato, system-ui, sans-serif; color: var(--ink); background: #fff; }
.lm-fxin input:focus { outline: none; border-color: var(--accent); }
.lm-fxres { display: grid; max-height: 180px; overflow-y: auto; }
.lm-fxres:empty { display: none; }
.lm-fxnone { margin: 4px 8px; font-size: 13px; color: var(--muted); }
.lm-noflag { width: 22px; height: 22px; border-radius: 50%; background: #f3ebe9; color: var(--muted); font: 900 8px Lato, system-ui, sans-serif; font-style: normal; display: grid; place-items: center; flex: none; }
.lm-flag .lm-noflag { width: 100%; height: 100%; font-size: 9px; }
.lm-usd { height: 116px; gap: 4px; } /* amount, "Open USD" under it, then the stopped pill (2026-10-24) */
.lm-uname { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
.lm-usd .lm-ustop { margin-top: 6px; }
.lm-tot > b { font-size: 40px; font-weight: 900; }
/* The card: the attendee on the left, what they see on the right; full width like the old Slices card. */
.kgrid .ltile.lmcard { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; padding: 0; opacity: 1; overflow: visible; }
.ltile.lmcard .lmain { padding: 18px 20px 16px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.ltile.lmcard .lmain .lhead { margin-bottom: 0; }
.ltile.lmcard .lm-hr { border-radius: 0 var(--r) var(--r) 0; background: #fcf8f7; }
.ltile.lmcard .lacts { margin: 0; }
.lm-mock { flex: 0 1 150px; margin-left: 6px; }
.lm-mock select { height: 26px; font-size: 11.5px; padding: 0 26px 0 10px; border-style: dashed; color: var(--muted); }
.lm-mock::after { right: 10px; width: 5px; height: 5px; }
.lmdb h3 { margin: 18px 0 4px; font-size: 15px; } .lmdb p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.lmdb .lm-payg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lmdb .lm-pay { border: 0; background: none; padding: 0; margin: 0; }
@container kmain (max-width: 760px) { .kgrid .ltile.lmcard { grid-template-columns: minmax(0, 1fr); } .ltile.lmcard .lm-hr { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); } }
.lm-mockrow { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11.5px; font-weight: 800; color: var(--subtle); text-transform: uppercase; letter-spacing: .04em; }
.lm-mockrow .lm-mock { flex: 0 1 200px; margin: 0; }
/* Event reserve as one bar per currency (2026-10-24): a cool slate panel, apart from the warm wallet cards. */
.kres2 { display: grid; gap: 10px; margin-bottom: 6px; }
.krbar { padding: 14px 16px; border-radius: 16px; background: #f1f4f8; border: 1px solid #dce3ec; display: grid; gap: 10px; }
.krhd { display: flex; align-items: center; gap: 10px; }
.krhd > b { font-size: 15px; color: #26313f; }
.krhd .kflogo { width: 24px; height: 24px; }
.krtot { margin-left: auto; margin-right: 6px; display: grid; justify-items: end; line-height: 1.1; }
.krtot small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6b7a8c; }
.krtot b { font-size: 17px; font-weight: 900; color: #26313f; font-variant-numeric: tabular-nums; }
.krline { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
.krline i { display: block; height: 100%; transition: width .6s; }
.krline i + i { box-shadow: inset 2px 0 0 #f1f4f8; }
.krbar .paid { background: #2d5f8a; } .krbar .avail { background: #8fb7d9; } .krbar .ret { background: repeating-linear-gradient(135deg, #b8c2ce 0 4px, #cfd6df 4px 8px); }
.krbar.slice .paid { background: #a8692e; } .krbar.slice .avail { background: #ecc78f; }
.krlegs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.krleg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #6b7a8c; }
.krleg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.krleg b { color: #26313f; font-weight: 800; font-variant-numeric: tabular-nums; }
.lm-ext small a { color: inherit; text-decoration: underline dotted; }
.invtab td:nth-child(1), .invtab td:nth-child(2), .invtab td:nth-child(4), .invtab td:nth-child(5) { white-space: nowrap; } /* only the For column wraps (2026-10-24) */
/* The Schedule icon on the Dashboard's calendar buttons (2026-10-24), not an emoji. */
.kcalbtn { border: 0; background: none; padding: 0; }
.kcalbtn .kcalic { width: 34px; height: 34px; }
.kcalall .kcalic { width: 24px; height: 24px; border-radius: 7px; } .kcalall .kcalic .sict { width: 15px; height: 15px; }
/* Billing payment methods (2026-10-24): card through Stripe, and stablecoins paid by QR at checkout. */
.pmgrp { display: grid; gap: 1px; margin: 14px 2px 8px; } .pmgrp b { font-size: 14.5px; } .pmgrp small { color: var(--muted); font-size: 13px; }
.coinrow { gap: 12px; } .coinlogo { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.coinrow .linky { white-space: nowrap; margin-right: 6px; }
.coinpay .coinqr { width: 190px; margin: 4px auto 12px; } .coinpay .coinqr svg { width: 100%; height: auto; display: block; }
.coinrow { display: flex; align-items: center; } .coinrow > .grow { flex: 1; min-width: 0; } .coinrow .sw { flex: none; }
.coinnote { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 14px; }
.coinnote .grow { flex: 1; min-width: 0; } .coinnote b { display: block; font-size: 14px; } .coinnote small { color: var(--muted); font-size: 12.5px; }
.coinlogos { display: flex; flex: none; } .coinlogos img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--canvas); margin-left: -6px; } .coinlogos img:first-child { margin-left: 0; }
.coinnote .linky { white-space: nowrap; }
.coinnote { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 14px; }
.coinnote .grow { flex: 1; min-width: 0; } .coinnote b { display: block; font-size: 14px; } .coinnote small { color: var(--muted); font-size: 12.5px; }
.coinlogos { display: flex; flex: none; } .coinlogos img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--canvas); margin-left: -6px; } .coinlogos img:first-child { margin-left: 0; }
.coinnote .linky { white-space: nowrap; }
.invcoin { display: inline-flex; align-items: center; gap: 6px; } .invcoin img { width: 16px; height: 16px; border-radius: 50%; } /* settled in a stablecoin (2026-10-24) */
.limdesc { display: block; margin-top: 6px; } /* a separate descriptive line under a setting (2026-10-24) */
.predb.off .tog small { opacity: .45; } /* a dealbreaker switched off greys its description (2026-10-24) */
/* Links a chat came through (2026-10-24), when more than one. */
.chlinks { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chlk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font: 700 12.5px Lato, system-ui, sans-serif; color: var(--ink); }

.chlk .chip { margin: 0; }
.chlk small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.chlk.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* Top-up picks show how long each pays one person (2026-10-25). */
.ktppicks .pick { display: grid; justify-items: center; gap: 1px; padding: 8px 14px; line-height: 1.15; }
.ktppicks .pick small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.pickrow.ktppicks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ktppicks .pick { width: 100%; }
.ktpbread { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ktpbread button { display: grid; gap: 1px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.ktpbread button b { font-size: 14px; } .ktpbread button small { font-size: 12px; color: var(--muted); font-weight: 700; }
.ktpbread button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ktpcalc { margin: 8px 2px 0; font-size: 13px; color: var(--muted); } .ktpcalc b { color: var(--ink); } /* what the typed amount comes to (2026-10-25) */
.krhide { border: 0; background: none; padding: 0 2px; font: 800 12px Lato, system-ui, sans-serif; color: #6b7a8c; text-decoration: underline; cursor: pointer; } .krhide:hover { color: #26313f; }
/* Ad-hoc wallet wizard (2026-10-25). */
.kawho .opt { align-items: center; }
.kaav { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; flex: none; } .kaav.dim { background: #f3ebe9; color: var(--muted); }
.katag { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; background: #e8f5ec; color: #2f7a4b; }
.katag.n { background: #fff4e5; color: #9a5a12; } .katag.m { background: #e6f0ff; color: #2856a8; }
.kahd { margin: 12px 2px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); } .kahd:first-child { margin-top: 0; }
/* The wizard's Back / Next bar stays at the bottom of the drawer (2026-10-25). */
.acts.kabar { position: sticky; bottom: 0; z-index: 2; margin: 16px -22px -24px; padding: 14px 22px 18px; background: var(--panel, #fff); border-top: 1px solid var(--line); }
#drawer:has(.db > .kabar) { display: flex; flex-direction: column; } #drawer .db:has(> .kabar) { display: flex; flex-direction: column; flex: 1 0 auto; box-sizing: border-box; } #drawer .db > .kabar { margin-top: auto; } #drawer .db > .kabar { position: sticky; }
#drawer .db:has(> .kabar) { padding-bottom: 0; } #drawer .db > .kabar { margin-bottom: 0; }
/* Persona groups in User explorer (2026-10-25). */
.pxcat { margin: 12px 4px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); } .pxcat:first-child { margin-top: 0; }
.pxgrp { margin-bottom: 14px; }
.pxgrph { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .pxgrph b { font-size: 15px; } .pxgrph small { color: var(--muted); font-size: 12px; }
.pxgrpp { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.pxgrpp .grow { flex: 1; min-width: 0; } .pxgrpp b { display: block; font-size: 14px; } .pxgrpp small { color: var(--muted); font-size: 12.5px; }
.pxgic { width: 30px; height: 30px; border-radius: 9px; background: #f3f0f8; display: grid; place-items: center; flex: none; } .pxgic svg, .pxgic img { width: 16px; height: 16px; }
.pxgthis { font-size: 11.5px; font-weight: 800; color: var(--accent); }
.pxingrp { display: block; margin-top: 2px; font-size: 11px !important; font-weight: 800; color: #6b5ca5 !important; } /* in a persona group (2026-10-25) */
/* Pure Passkey personas in User explorer (2026-10-25). */
.pxpkav { width: 40px; height: 40px; border-radius: 50%; background: #e9e4f4; display: grid; place-items: center; flex: none; } .pxpkav img { width: 20px; height: auto; }
.pxpkav.big { width: 54px; height: 54px; } .pxpkav.big img { width: 26px; }
button.pxgrpp.go { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; font: inherit; color: var(--ink); padding: 8px 0; }
button.pxgrpp.go:hover b { color: var(--accent); }
.pxgopen { font-size: 12.5px; font-weight: 800; color: var(--accent); }
.meetlogo { width: 22px; height: auto; display: block; }
/* User explorer chat sessions as a table (2026-10-25). */
.pxstab { width: 100%; }
.pxstab td, .pxstab th { vertical-align: top; }
.pxstab td:nth-child(2) { white-space: nowrap; }
.pxsrow { cursor: pointer; } .pxsrow:hover td { background: #fcf6f5; } .pxsrow.open td { background: #fcf6f5; }
.pxsdet td { padding: 0 14px 12px; background: #fcf6f5; } .pxsdet .pxsb { padding: 6px 2px 0; }
/* Google profile overrides (2026-10-25). */
.pxovr { display: flex; gap: 8px; } .pxovr input { flex: 1; min-width: 0; }
.pxfaces { display: flex; flex-wrap: wrap; gap: 8px; }
.pxface { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: #f3ebe9; cursor: pointer; overflow: hidden; font: 800 10px Lato, system-ui, sans-serif; color: var(--muted); }
.pxface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxface.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pxgav .pav { display: inline-grid; }
/* One table per chat session (2026-10-25). */
.pxstab1 { margin-bottom: 12px; overflow: hidden; }
.pxsth { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fcf8f7; }
.pxsth b { font-size: 14.5px; } .pxsth small { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.pxkv { width: 100%; } .pxkv th { width: 130px; text-align: left; font-weight: 700; color: var(--muted); vertical-align: top; } .pxkv td { vertical-align: top; }
/* The booked event chip in a chat session, with its hover menu (2026-10-25). */
.pxevc { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; background: #fde8ec; color: #8a2433; font-weight: 800; cursor: default; }
.pxevc:hover, .pxevc:focus-within { background: #fbd5dd; }
.pxevpop { display: none; position: absolute; left: 0; top: 100%; z-index: 20; margin-top: 4px; padding: 6px; min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(80,30,30,.16); }
.pxevc::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 6px; } /* a bridge so the menu stays open on the way down */
.pxevc:hover .pxevpop, .pxevc:focus-within .pxevpop { display: grid; gap: 2px; }
.pxevpop button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 700 13.5px Lato, system-ui, sans-serif; color: var(--ink); text-align: left; white-space: nowrap; }
.pxevpop button:hover { background: #fcf3f2; color: var(--accent); }
.pxstab1 { overflow: visible; }
.pxkv td:has(> .pxevc:not(.pxread)) { vertical-align: middle; } /* a table cell, never flex: flex cells lose the row's height and their border drifts (2026-10-26) */ .pxevc { line-height: 1.5; } .pxevc svg, .pxevc img { width: 16px; height: 16px; } /* chip in line with "Booking of" (2026-10-25) */
/* Link pills in a chat session (2026-10-25). */
.pxlabs { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pxlabs .tb, .pxlabs .lab { font-size: 13px !important; padding: 3px 11px !important; }
.pxlnk { padding: 0; background: none; } .pxlnk:hover, .pxlnk:focus-within { background: none; }
.pxlnk:hover .tb, .pxlnk:focus-within .tb { filter: brightness(.96); box-shadow: 0 0 0 2px var(--accent-soft); }
.pxevpop a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font: 700 13.5px Lato, system-ui, sans-serif; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pxevpop a:hover { background: #fcf3f2; color: var(--accent); }
.pxkv td:has(> .pxlabs) { vertical-align: middle; }
.pxread { padding: 0; background: none; font-weight: 800; } .pxread:hover, .pxread:focus-within { background: none; } .pxread .linky { cursor: default; } /* Read the chat with its menu (2026-10-25) */
/* User explorer header: the screening face only, bordered red to green (2026-10-25). */
.pxscore { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 2px solid #e8c13a; background: #fff; font-size: 19px; }
.pxscore.f1 { border-color: #e04f4f; } .pxscore.f2 { border-color: #ef8a3c; } .pxscore.f3 { border-color: #e8c13a; } .pxscore.f4 { border-color: #8cc152; } .pxscore.f5 { border-color: #2f9e6b; }
/* Read the chat's menu opens upwards and is not clipped by its card */
.panel.pad0.pxstab1 { overflow: visible; }
.pxread .pxevpop { top: auto; bottom: 100%; margin: 0 0 4px; }
.pxread::after { top: auto; bottom: 100%; }
.pxstab1 { position: relative; } .pxstab1:hover, .pxstab1:focus-within { z-index: 6; } /* its menus sit above the next session card */
/* Booking status chips (2026-10-25). */
.pxbst { padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: #f3ebe9; color: var(--muted); }
.pxbst.yes { background: #e8f5ec; color: #2f7a4b; } .pxbst.live { background: #fde8ec; color: #b4234a; } .pxbst.wait { background: #fff4e5; color: #9a5a12; } .pxbst.no { background: #fdecec; color: #b42318; }
.pxkv .pxksub th { padding-top: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: #fcf8f7; } /* visitor side / host side (2026-10-25) */
.pxstab1 > .pxsth { border-top-left-radius: inherit; border-top-right-radius: inherit; } /* the header follows the card corners now the card does not clip (2026-10-25) */
.pxstab1 > .pxsth { border-top-left-radius: 23px; border-top-right-radius: 23px; } /* 1px inside the card border, so no sliver shows */
.pxkv tr:last-child > th, .pxkv tr:last-child > td { border-bottom: 0; } .pxkv tr:last-child > th { border-bottom-left-radius: 23px; } .pxkv tr:last-child > td:last-child { border-bottom-right-radius: 23px; } /* no square line along the bottom corners */
/* Booking tabs: Pre-meeting and Meeting report (2026-10-25). */
.pxbtabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); background: #fcf8f7; }
.pxbtabs button { border: 0; background: none; padding: 6px 12px 8px; font: 800 13px Lato, system-ui, sans-serif; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pxbtabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.pxstab1 > .pxsth { border-bottom: 0; }
.pxrep0 { padding: 16px; color: var(--muted); font-size: 14px; }
.pxlog th { width: 120px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Screening score over time (2026-10-25). */
.pxch-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .pxch-h b { font-size: 15px; } .pxch-h span { color: var(--muted); font-size: 13px; } .pxch-h span b { color: var(--ink); font-size: 14px; }
.pxsvg { width: 100%; height: auto; display: block; }
.pxsvg .g { stroke: #f0e6e3; } .pxsvg text { font: 700 10.5px Lato, system-ui, sans-serif; fill: #a8908f; }
.pxsvg .l { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.pxsvg .d { fill: #fff; stroke: var(--accent); stroke-width: 2.5; } .pxsvg .v { fill: var(--ink); font-weight: 900; font-size: 11px; }
.pxov { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pxov-l { font-size: 12px; font-weight: 800; color: var(--subtle); text-transform: uppercase; letter-spacing: .05em; }
.pxovf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pxovf .pxscore { cursor: pointer; opacity: .55; } .pxovf .pxscore.on { opacity: 1; box-shadow: 0 0 0 3px var(--accent-soft); }
.pxovauto { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: 800 12.5px Lato, system-ui, sans-serif; color: var(--muted); cursor: pointer; }
.pxovauto.on { border-color: var(--accent); color: var(--accent); }
.pxov small { color: var(--muted); font-size: 12.5px; }
.pxscore.num { border-color: var(--line); font: 900 14px Lato, system-ui, sans-serif; color: var(--ink); width: auto; min-width: 34px; padding: 0 6px; } /* the score out of 100 when there is no override */
.pxevpop button:disabled { opacity: .45; cursor: not-allowed; } .pxevpop button:disabled:hover { background: none; color: var(--ink); }
.pxhl p:first-child { margin: 0; font-size: 14.5px; line-height: 1.55; }
/* Visits map (2026-10-25). */
.pxmapw { overflow: hidden; } .pxmap { height: 280px; }
.pxvk { padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #e6f0ff; color: #2856a8; } .pxvk.portal { background: #e8f5ec; color: #2f7a4b; }
/* One avatar override: upload, change or remove (2026-10-25). */
.pxava { display: flex; align-items: center; gap: 12px; }
.pxava .grow { flex: 1; } .pxava b { font-size: 14px; }
.pxava-img img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.pxup { cursor: pointer; display: inline-flex; align-items: center; }
.kv b .pxgav { display: inline-block; width: auto !important; } .kv b .pxgav .pav { width: 44px !important; height: 44px !important; flex: none !important; } .kv b .pxgav .pav img { width: 100%; height: 100%; object-fit: cover; } /* the row styles were stretching the avatar (2026-10-25) */
/* Signing history (2026-10-25). */
.pxsigrow { cursor: pointer; } .pxsigrow:hover td { background: #fcf6f5; }
.pxpre { margin: 0 0 8px; padding: 10px 12px; background: #faf6f5; border: 1px solid var(--line); border-radius: 10px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; color: var(--ink); }
/* Wallets in User explorer (2026-10-26). */
.pxwnote { display: grid; gap: 8px; } .pxwnote > b { font-size: 14.5px; }
.pxwt { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; align-items: baseline; } .pxwt small { color: var(--muted); font-size: 13px; }
.pxwtag { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.pxwtag.evm { background: #e6f0ff; color: #2856a8; } .pxwtag.spk { background: #efe8fb; color: #5b3fa6; } .pxwtag.pure { background: #f3ebe9; color: var(--muted); }
/* Wallets in User explorer (2026-10-26). */
.pxwnote { display: grid; gap: 8px; } .pxwnote > b { font-size: 14.5px; }
.pxwt { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 10px; align-items: baseline; } .pxwt small { color: var(--muted); font-size: 13px; }
.pxwtag { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.pxwtag.evm { background: #e6f0ff; color: #2856a8; } .pxwtag.spk { background: #efe8fb; color: #5b3fa6; } .pxwtag.pure { background: #f3ebe9; color: var(--muted); }
.pxfullv { display: block; word-break: break-all; font-size: 15px; line-height: 1.6; }
.pxfullqr { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 16px; }
.pxfullqr .qbox { width: 200px; height: 200px; padding: 12px; background: #fff; border-radius: 16px; border: 1px solid var(--line); }
.pxfullqr .qbox svg { width: 100%; height: 100%; display: block; }
.pxabr { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin-right: 12px; }
.pxabr-acts { display: inline-flex; align-items: baseline; gap: 16px; font-size: 14px; }
.pxabr-acts .linky .drw, .pxabr-acts .linky svg { margin-left: 6px; }
.pxabr > code, .pxabr-acts, .pxabr-acts .linky { white-space: nowrap; }
.pxabr, .pxabr-acts { font-style: normal; }
.pxabr ~ a.linky { white-space: nowrap; font-size: 14px; }
.pxip { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pxo.warn { background: #fdf1ef; color: #9a2a1a; }
.pxbcal { display: inline-flex; align-items: center; gap: 8px; } .pxbcal .gcal { width: 18px; height: 18px; }
/* Booking party hover: their Google profile (2026-10-26). */
.pxprofpop { min-width: 280px; padding: 12px; gap: 8px !important; white-space: normal; }
.pxprof { display: flex; align-items: center; gap: 10px; }
.pxprof-av { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.pxprof-av img, .pxprof-av svg { width: 100%; height: 100%; object-fit: cover; }
.pxprof b { display: block; font-size: 14.5px; color: var(--ink); } .pxprof small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pxprof-kv { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink); font-weight: 600; } .pxprof-kv > span:first-child { width: 72px; flex: none; color: var(--muted); font-weight: 700; }
.pxprof-kv code { font-size: 12px; }
.pxprofpop button { margin-top: 2px; border-top: 1px solid var(--line) !important; border-radius: 0 0 8px 8px !important; padding-top: 10px !important; }
/* Placed per open by popPlace in app.js (2026-10-26): below when it fits, else above. */
.pxevc.down > .pxevpop { top: 100%; bottom: auto; margin: 4px 0 0; }
.pxevc.up > .pxevpop { top: auto; bottom: 100%; margin: 0 0 4px; }
.pxbst, .pxbst.yes, .pxbst.live, .pxbst.wait, .pxbst.no { background: none; padding: 0; border-radius: 0; } /* plain coloured text, so it is not taken for a hover chip (2026-10-26) */
/* An invisible bridge over the gap between chip and menu, so moving onto the menu keeps it open (2026-10-26). */
.pxevpop::before { content: ''; position: absolute; left: 0; right: 0; height: 10px; }
.pxevc.down > .pxevpop::before, .pxevc:not(.up) > .pxevpop::before { top: -10px; bottom: auto; }
.pxevc.up > .pxevpop::before { bottom: -10px; top: auto; }
.pxbtabs button em { font-style: normal; margin-left: 4px; color: var(--muted); font-weight: 700; }
/* Booking anchors (2026-10-26): only the numbers stick, at the far right, level with the name to start. */
.pxbkwrap { scroll-margin-top: 60px; }
.pxbkjumpw { position: sticky; top: 12px; z-index: 7; height: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.pxbkjump { display: flex; align-items: center; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px -6px rgba(43, 26, 28, .35); pointer-events: auto; }
.pxbkjump-l { padding: 0 6px 0 8px; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.pxbkjump button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font: 800 12.5px Lato, system-ui, sans-serif; color: var(--accent); cursor: pointer; }
.pxbkjump button:hover { background: #fcf3f2; border-color: var(--accent); }
/* The menu sticks from Overview down, in both layouts (2026-10-26). */
@container kmain (max-width: 9999px) { .pxnav { position: sticky; top: 0; z-index: 6; } }
@container kmain (max-width: 800px) { .pxnav { top: 0; } .pxbkjumpw { top: 58px; } } /* in the tab-row layout, the numbers sit below the stuck tabs */
/* Sticky offsets are measured inside .kmain's 26px top padding, so pull them up by it (2026-10-26). */
.pxnav { top: -14px; } .pxbkjumpw { top: -14px; }
@container kmain (max-width: 800px) { .pxnav { top: -26px; box-shadow: 0 0 0 6px var(--canvas); } .pxbkjumpw { top: 30px; } }
/* A Google Form's questions, read-only (2026-10-26). */
.hwqs { margin: 10px 0 0; padding: 0 0 0 22px; display: grid; gap: 8px; }
.hwqs li b { font-weight: 700; } .hwqs li small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hwqs li.fixed b::after { content: 'Always first'; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #f3ebe9; color: var(--muted); font-size: 11px; font-weight: 800; }
/* A booking's flows (2026-10-26). */
.pxflow + .pxflow { border-top: 1px solid var(--line); }
.pxflowh { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 8px; flex-wrap: wrap; }
.pxflowh small { color: var(--muted); font-size: 12.5px; font-weight: 600; flex: 1; }
.pxdoc { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: none; } .pxdoc:hover { color: var(--accent); text-decoration: underline; } .pxdoc img { width: 16px; height: 16px; }
/* Flow table columns (2026-10-26): Decision as narrow as its chip, Answer takes the rest. */
.pxflow .pxkv { table-layout: auto; }
.pxflow .pxkv th { width: auto; }
.pxflow .pxkv tr > :first-child { width: 32%; }
.pxflow .pxkv tr > :last-child { width: 1%; white-space: nowrap; }
.pxflowdiv { text-align: center; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 8px; }
.pxflownote { align-self: center; margin: 2px auto 8px; padding: 3px 10px; border-radius: 999px; background: #f3ebe9; color: var(--muted); font-size: 11.5px; font-weight: 700; text-align: center; }
/* The content box never narrower than its booking tabs need (2026-10-26); below that the pane scrolls sideways. */
@container kmain (min-width: 801px) { .pxlay { grid-template-columns: 150px minmax(530px, 1fr); } }
.pxwrap .kmain { overflow-x: auto; }
/* More › over the right of the tab row (2026-10-26). */
.pxnavmore { display: none; }
@container kmain (max-width: 800px) {
	.pxnav .pxnavmore { display: flex; position: sticky; right: -4px; margin: -4px -4px -4px auto; padding: 8px 12px 8px 34px !important; border-radius: 0 14px 14px 0 !important; background: linear-gradient(90deg, rgba(243, 235, 233, 0), #f3ebe9 38%) !important; color: var(--accent) !important; font-weight: 800; box-shadow: none !important; }
	.pxnav.atend .pxnavmore { display: none; }
}
@container kmain (max-width: 800px) { .pxnav { max-width: 100cqw; box-sizing: border-box; } } /* the tab row stays within the visible pane, so More › shows */
@container kmain (min-width: 801px) { .pxnav .pxnavmore { display: none !important; } } /* side-menu layout: no More (2026-10-26) */
.pxcomp th, .pxcomp td { width: auto !important; } .pxcomp td b { display: inline-flex; align-items: center; gap: 6px; } .pxcomp td b svg { width: 16px; height: 16px; }
/* User explorer in a wide drawer (2026-10-26). */
#drawer.pxwide { width: min(790px, 94vw); max-width: none; } /* not a kmain container, so the side-menu layout always applies here */
#drawer.pxwide .pxdrwbody { padding-top: 6px; }
.chwho { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 4px 8px 4px 4px; margin: -4px 0 -4px -4px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.chwho:hover { background: var(--accent-soft); } .chwho:hover b { color: var(--accent); }
.chwho .grow { flex: 1; min-width: 0; } .chwho b, .chwho small { display: block; } .chwho small .drw { margin-left: 6px; }
#drawer.pxwide .pxnav .pxnavmore { display: none !important; }
.room .m.flash > div { box-shadow: 0 0 0 3px rgba(138, 36, 51, .35); transition: box-shadow .3s; } /* the session start, after Scroll to in chat (2026-10-26) */
.cdx-a > span, .cdx-u > span { white-space: pre-line; }
/* Reserve totals (2026-10-27): the total, with its parts indented under it. */
.krtot { border-top: 0 !important; } .krtot span, .krtot b { font-weight: 900; }
.krsub { margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--line); }
.krsub .kv { padding: 7px 0; }
#drawer .kv.krtot > span, .kv.krtot > span:first-child { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; text-align: left; } .kv.krtot > b { flex: none; text-align: right; }
.kv.krtot { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; } .kv.krtot > span, .kv.krtot > b { justify-self: auto; align-self: auto; }
.krsub { margin-left: 0; padding-left: 0; border-left: 0; } /* no indent (2026-10-27) */
/* Paid out, opened (2026-10-27). */
.krpaid > summary { list-style: none; cursor: pointer; } .krpaid > summary::-webkit-details-marker { display: none; }
.krpaid > summary:hover span { color: var(--accent); }
.krcar { font-style: normal; display: inline-block; margin-left: 4px; transition: transform .15s; } .krpaid[open] .krcar { transform: rotate(180deg); }
.krpl { margin: 2px 0 8px; padding: 4px 12px; border-radius: 12px; background: var(--canvas); }
.krpr { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .krpr + .krpr { border-top: 1px solid var(--line); }
.krpr .grow { flex: 1; min-width: 0; } .krpr .grow b, .krpr .grow small { display: block; } .krpr small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.krpr.one small { color: var(--accent); }
.krpaid > summary .krcar { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft, #fcf3f2); color: var(--accent); flex: none; align-self: center; }
.krpaid > summary:hover .krcar { background: #f6e4e2; }
#drawer.pxbook { width: min(640px, 94vw); max-width: none; } #drawer.pxbook .pxsth .pxn { display: none; } /* View event: the booking card in a drawer (2026-10-27) */
/* View event: no title bar, just the card and a close button (2026-10-27). */
#drawer.pxbook .db { padding-top: 18px; }
#drawer.pxbook .pxbkx { position: absolute; top: 14px; right: 14px; z-index: 3; }

#drawer.pxbook .db { padding-top: 62px; } /* close sits above the card, not on it */
.sw:disabled { opacity: .4; cursor: not-allowed; } /* e.g. Slices before a country is chosen (2026-10-27) */
.opt small.rilabs { display: flex; flex-wrap: wrap; gap: 6px; } /* link labels apart in link pickers (2026-10-27) */
/* Add funds / Withdraw / Buy credits drawers (2026-10-27). */
.wdqr { display: flex; gap: 14px; align-items: flex-start; }
.wdqr .qbox { width: 140px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; } .wdqr .qbox svg { width: 100%; height: auto; display: block; }
.wdaddr { display: block; word-break: break-all; margin-bottom: 8px; font-size: 12.5px; }
.pick small { font-weight: 600; color: var(--muted); margin-left: 4px; }
.pick.on small { color: rgba(255, 255, 255, .8); }
.wdguide { margin: 0; padding-left: 20px; display: grid; gap: 10px; } .wdguide b, .wdguide small { display: block; } .wdguide small { color: var(--muted); font-size: 13px; } .wdguide small b { display: inline; color: var(--ink); }
/* Open USD top-up guide (2026-10-27). */
.ougbox .tghnav .ri { align-items: flex-start; } .ougbox .tghnav .ri b, .ougbox .tghnav .ri small { display: block; } .ougbox .tghnav .ri small { color: var(--muted); font-weight: 600; font-size: 12px; }
.ougvis { min-height: 360px; border: 2px dashed var(--line); border-radius: 20px; display: grid; place-content: center; text-align: center; gap: 4px; color: var(--muted); font-weight: 800; background: var(--canvas); }
.ougvis small { font-weight: 600; color: var(--subtle); }
/* Open USD guide, fixed size with two side panels (2026-10-27): ways to get it, then its steps. */
.modalbox.tghbox.ougbox { width: min(1240px, 96vw); height: min(780px, 92vh); max-height: none; grid-template-columns: 240px 250px minmax(0, 1fr); }
.ougbox .tghnav, .ougtoc { overflow-y: auto; }
.ougtoc { background: #fcf8f7; border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; }
.ougtoc > b { font-size: 14px; padding: 0 10px 10px; } .ougtoc > .hint { padding: 0 10px; }
.ougtoc .ri { display: flex; align-items: center; gap: 10px; text-align: left; } .ougtoc .ri .grow { flex: 1; min-width: 0; }
.ougtoc .tghn { flex: none; }
.ougmain { padding: 52px 32px 26px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.ougmain h2 { margin: 4px 0 6px; font-size: 24px; } .ougmain > .hint { margin: 0 0 16px; max-width: 620px; }
.ougmain .ougvis { flex: 1; min-height: 280px; }
.ougnav { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .ougnav .grow { flex: 1; }
/* Mock provider screens. */
.ougscr { flex: 1; min-height: 300px; max-width: 520px; width: 100%; align-self: center; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -26px rgba(43, 26, 28, .45); }
.ougbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3eef7; border-bottom: 1px solid #e6def0; font-size: 12.5px; font-weight: 800; color: #4b3a63; }
.ougbar i { width: 9px; height: 9px; border-radius: 50%; background: #d8cde6; } .ougbar span { margin-left: 8px; }
.ougscrb { padding: 22px; display: grid; gap: 10px; align-content: start; }
.ough { font-size: 18px; }
.ougin { display: grid; gap: 4px; font-size: 12px; font-weight: 800; color: var(--muted); } .ougin span { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: var(--ink); font-weight: 700; }
.ougbtn { justify-self: start; padding: 10px 18px; border-radius: 999px; background: #5b3fc4; color: #fff; font-weight: 900; font-size: 14px; }
.ougrow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; } .ougrow em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12.5px; }
.ougrow.on { border-color: #5b3fc4; background: #f4f0ff; } .ougrow.ok em { color: #1f7a3d; }
.ougtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ougtile { padding: 18px 10px; border: 1px solid var(--line); border-radius: 12px; text-align: center; font-weight: 800; } .ougtile.on { border-color: #5b3fc4; background: #f4f0ff; color: #3d2a99; }
.ougcoin { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: #2b1a1c; color: #fff; font-style: normal; font-size: 12px; } .ougcoin.g { background: #2775ca; }
.ougnote { font-size: 12.5px; color: var(--muted); }
.wdwait { margin-top: 14px; display: grid; gap: 6px; background: var(--accent-soft); border-color: var(--accent-line); } .wdwait small { color: var(--muted); font-weight: 600; } .wdwait code { font-weight: 900; color: var(--ink); }
/* Multi-country compensation groups (2026-10-27). */
.setglobe { font-size: 20px; line-height: 1; }
.cgrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cgrow:first-of-type { border-top: 0; }
.cgrow .grow { flex: 1; min-width: 0; } .cgrow b, .cgrow small { display: block; } .cgrow small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cgrow select { width: auto; min-width: 150px; }
.cgrate { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; } .cgrate input { width: 90px; } .cgrate span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cgtab th, .cgtab td { width: auto !important; }
.cgrow > .grow { flex: 1 1 160px; } .cgrow > .csel { flex: 0 0 210px; width: 210px; } /* the enhanced dropdown stays compact */
/* Slice group country cards (2026-10-27). */
.cgcard { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; background: var(--panel); }
.cgcard.off .cgbody { opacity: .5; }
.cghead { display: flex; align-items: center; gap: 10px; } .cghead b { font-size: 16px; } .cghead .grow { flex: 1; }
.cgst { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.cgbody { margin-top: 10px; display: grid; gap: 8px; }
.cgkv { display: flex; align-items: center; gap: 12px; } .cgkv > span { width: 140px; flex: none; color: var(--muted); font-weight: 700; font-size: 13.5px; }
.cgkv > .csel { flex: 0 1 260px; }
.cgv { display: inline-flex; align-items: center; gap: 8px; } .cgv img { height: 16px; }
.cgvis { margin-top: 4px; padding: 12px; border-radius: 14px; background: var(--canvas); } .cgvis > small { display: block; color: var(--muted); font-weight: 700; font-size: 12px; margin-bottom: 6px; }
.cgdur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1; max-width: 420px; }
.cgdur > div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: grid; gap: 1px; }
.cgdur small { color: var(--muted); font-weight: 700; font-size: 12px; } .cgdur b { font-size: 15px; } .cgdur em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 600; }
.cgdur em { white-space: nowrap; }
.budsub { margin: 4px 0 14px 30px; } /* the choice under its option (2026-10-27) */
/* Ad hoc tab info (2026-10-28): an i at the far right, its meaning on hover. */
.avtab { position: relative; }
.avinfo { margin-left: auto; position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid; place-items: center; font: italic 800 12px Georgia, serif; color: var(--muted); cursor: help; }
.avtip { display: none; position: absolute; right: -8px; top: calc(100% + 8px); z-index: 30; width: 240px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff; font: 600 13px/1.4 Lato, system-ui, sans-serif; text-align: left; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
.avtip::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.avinfo:hover .avtip, .avinfo:focus .avtip { display: block; }
/* The per-day minus explains itself on hover (2026-10-28). */
.avdayx { position: relative; }
.avdayx .avtip { left: 50%; right: auto; transform: translateX(-50%); width: 220px; }
.avdayx:hover .avtip, .avdayx:focus-visible .avtip { display: block; }
.avtab[data-avtab="weekly"] .avtip { right: auto; left: -8px; } /* the first tab opens its hover to the right, so it stays in view */
/* Full screen mode (2026-10-28): the panels still scroll, without a visible scroll bar. */
body.fullcard .drawer, body.fullcard .drawerx { scrollbar-width: none; }
body.fullcard .drawer::-webkit-scrollbar, body.fullcard .drawerx::-webkit-scrollbar { display: none; }
body.fullcard .drawer *, body.fullcard .drawerx * { scrollbar-width: none; } body.fullcard .drawer *::-webkit-scrollbar, body.fullcard .drawerx *::-webkit-scrollbar { display: none; }
body.fullcard .side .agbox { margin: 6px 16px 16px; } /* full screen drops the side padding, so the box keeps its own (2026-10-28) */
.dsavebar.evsave { position: sticky; bottom: 76px; margin: 14px 0 0; } /* above the Done bar, in both modes */
.cardq { margin: 0 0 12px; font-weight: 800; font-size: 15.5px; color: var(--ink); } /* a card's question, on top (2026-10-28) */
/* Library popup close (2026-10-28): a bare ✕ tucked into the top corner, no circle, so it covers nothing. */
.modalbox.stbox > .stx.bare { position: absolute; top: 2px; right: 4px; margin: 0; width: 26px; height: 26px; border: 0; background: none; box-shadow: none; font-size: 16px; color: var(--muted); display: grid; place-items: center; z-index: 6; }
.modalbox.stbox > .stx.bare:hover { color: var(--ink); }
/* Agent disclosure sample chat (2026-10-30). */
.modalbox.dsbox { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; }
.dsbox > .stx { position: absolute; top: 14px; right: 14px; }
.dsbox h2 { margin: 2px 0 6px; } .dschat { margin-top: 14px; }
.dssign { align-self: center; width: min(300px, 100%); margin: 6px auto; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: grid; gap: 10px; text-align: center; }
.dsg { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; } .dsg .glogo { width: 18px; height: 18px; }
.dsacct { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.dsacct i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #8a2433; color: #fff; font-style: normal; font-weight: 800; }
.dsacct b, .dsacct small { display: block; } .dsacct small { color: var(--muted); font-size: 12.5px; }
.modalbox.dsbox { background: var(--canvas); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); margin: auto; }
/* Library popup (2026-10-30): its panes still scroll, without a visible scroll bar. */
.modalbox.stbox, .modalbox.stbox * { scrollbar-width: none; }
.modalbox.stbox::-webkit-scrollbar, .modalbox.stbox *::-webkit-scrollbar { display: none; }
.pplopt { align-items: center; } .ava.pplava { width: 34px; height: 34px; flex: 0 0 34px; font-size: 13px; }
.caprow .grow { flex: 1; }
/* Custom messages and websites (2026-10-30). */
.hwprev { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--canvas); border: 1px dashed var(--line); display: grid; }
.hwprev .cdx-a > span p { margin: 0 0 6px; } .hwprev .cdx-a > span p:last-child { margin: 0; } .hwprev .cdx-a > span ul { margin: 4px 0; padding-left: 18px; }
.hwprev .cdx-a > span { white-space: normal; }
.sitecard { display: flex; gap: 12px; align-items: stretch; max-width: 420px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; text-decoration: none; color: var(--ink); }
.sitethumb { width: 120px; flex: none; display: grid; place-content: center; text-align: center; color: #fff; padding: 10px; }
.sitethumb b { font-size: 28px; line-height: 1; } .sitethumb small { font-size: 11px; font-weight: 700; opacity: .9; margin-top: 4px; }
.sitemeta { padding: 10px 12px 10px 0; display: grid; gap: 3px; align-content: center; } .sitemeta b { font-size: 14.5px; } .sitemeta small { color: var(--muted); font-size: 13px; } .sitemeta em { font-style: normal; color: var(--subtle); font-size: 12px; font-weight: 700; }
.hwimp { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); display: grid; gap: 8px; }
.hwimpr { display: flex; align-items: center; gap: 8px; } .hwimpr .grow { flex: 1; min-width: 0; } .hwimpr b, .hwimpr small { display: block; } .hwimpr small { color: var(--muted); font-size: 12.5px; }
textarea[readonly][data-hwpinned], input[readonly][data-hwpinned] { background: var(--canvas); cursor: pointer; }
.hwsub:has(.hwprev) { display: grid; gap: 8px; align-items: stretch; } .hwsub:has(.hwprev) > * { width: 100%; min-width: 0; } .hwsub .avpin { margin: 0; }
.hwprev .cdx-a > span { display: block; max-width: 92%; background: #fff; } .hwprev { background: var(--canvas); }
.hwprev .cdx-a > span { padding: 10px 14px; border-radius: 16px; }
/* Custom message boxes start tall enough to read (2026-10-30). */
.hwsub textarea.lbin, .stmain textarea[data-lbin="text"] { min-height: 170px; }
/* Google calendar colour name (2026-10-30). */
.gcol { display: inline-flex; align-items: center; gap: 6px; }
.swatch .gcsub { display: block; font-weight: 600; font-size: 11.5px; color: var(--muted); }
.gcltag { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.gclsp { flex: 0 0 18px; }
.opt .caldesc { display: block; margin-top: 2px; }
.duf .untabs { display: inline-flex; flex: 0 0 auto; }
.duf .untabs button { flex: 0 0 auto; }
.duf .untabs { display: inline-flex; flex: 0 0 auto; }
.duf .untabs button { flex: 0 0 auto; }
/* Calendar owner reminders: the kind on top, then when (2026-10-30). */
.orrow { flex-wrap: wrap; row-gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-top: 8px; }
.orrow .csel { flex: 0 0 180px; width: 180px; }
.orrow .hostx { margin-left: auto; }
.orrow .duf { flex: 1 0 100%; }
/* Email templates (2026-10-30). */
.emprev { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.emhd { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: 13px; }
.emhd div { display: flex; gap: 10px; }
.emhd span { color: var(--muted); font-weight: 700; flex: 0 0 60px; }
.embody { padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.embody p { margin: 0 0 10px; }
.emta { min-height: 180px; }
.emphs { display: flex; flex-wrap: wrap; gap: 6px; }
.emphs .chip { cursor: pointer; }
.emrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.emrow:first-of-type { border-top: 0; }
.emrow small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.emrow.off b { color: var(--muted); }
.emrow .csel { flex: 0 0 190px; width: 190px; }
.emrow .grow { flex: 1 1 auto; min-width: 0; }
.emrow .csel, .emrow select { flex: 0 0 200px !important; width: 200px !important; margin-left: auto; }
/* Email template editors (2026-10-30): placeholders as fixed labels. */
.emed { display: block; white-space: pre-wrap; word-break: break-word; outline: none; line-height: 1.7; cursor: text; }
.emed:focus { border-color: var(--accent); }
.emsubj { min-height: 0; white-space: nowrap; overflow-x: auto; }
.emed.emta { min-height: 180px; }
.emtok { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; margin: 0 1px; border-radius: 999px; background: #f6dcd7; color: var(--accent); font-weight: 700; font-size: 0.9em; line-height: 1.5; white-space: nowrap; user-select: none; vertical-align: baseline; }
.emtokx { border: 0; background: none; color: inherit; opacity: 0.6; font-size: 11px; padding: 0 3px; cursor: pointer; line-height: 1; }
.emtokx:hover { opacity: 1; }
.emtok.add { border: 1px dashed #e8b9b1; padding: 4px 10px; cursor: pointer; font-size: 13px; }
.emtok.add:hover { background: #f2cdc6; }
.emtabs { display: inline-flex; margin-bottom: 4px; }
.empvbar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.empvbar span { font-weight: 700; font-size: 13px; color: var(--muted); }
.empvbar .csel, .empvbar select { flex: 0 0 240px; width: 240px; }
.empvkv { margin: 10px 0 14px; }
.emtop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.emtop .empvbar { margin-top: 0; }
.emed.empv { background: #faf6f5; cursor: default; white-space: normal; }
.emed.empv p { margin: 0 0 10px; }
.emed.empv p:last-child { margin-bottom: 0; }
.emtok.add:disabled { opacity: 0.4; cursor: default; background: none; }
.emoff { opacity: 0.45; }

.lm-sl10 { margin-top: 6px; font-size: 12.5px; color: var(--subtle); }

/* topnote (2026-11-02): a notice at the top of a card page that pushes the card down and stays until closed */
.topnote { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border-radius: 14px; background: #fbf3e2; border: 1px solid #efd9a8; color: #6b4f12; font-weight: 700; font-size: 14px; line-height: 1.4; animation: topnoteIn .22s ease-out; }
.topnote .grow { flex: 1; padding-top: 2px; }
.topnote-i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e0a422; color: #fff; font-weight: 900; font-size: 13px; }
.topnote-x { flex: none; border: 0; background: none; cursor: pointer; color: #8a6a22; font-size: 14px; width: 26px; height: 26px; border-radius: 8px; }
.topnote-x:hover { background: rgba(0,0,0,.06); }
.topnote.nudge { animation: topnoteNudge .35s ease; }
@keyframes topnoteIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes topnoteNudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.topnote-m { display: block; }
.topnote-go { margin-top: 8px; border: 0; background: #fff; color: var(--accent); font: inherit; font-weight: 800; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; box-shadow: 0 0 0 1px #efd9a8; }
.topnote-go:hover { background: #fffaf0; }
.avtab.avtab-off { opacity: .45; filter: grayscale(1); cursor: not-allowed; } /* Ad hoc − with the template off (2026-11-02) */

/* the gap-tick popup's drawn morning (2026-11-02) */
.gwill { border: 1px solid var(--line, #eadfdb); border-radius: 14px; padding: 14px 16px 12px; background: #fcf8f6; }
.gwhead { font-size: 12.5px; font-weight: 700; color: #8d7a75; margin-bottom: 12px; }
.gwrow { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.gwlab b { display: block; font-size: 14px; } .gwlab small { display: block; font-size: 11.5px; color: #8d7a75; line-height: 1.3; }
.gwbar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #eadfdb; }
.gwbar i { display: flex; align-items: center; justify-content: center; min-width: 0; }
.gw-call { background: var(--accent); color: #fff; font: 700 11.5px/1 inherit; border-right: 1px solid rgba(255,255,255,.35); }
.gw-call span { font-style: normal; font-size: 11.5px; font-weight: 700; }
.gw-gap { background: repeating-linear-gradient(135deg, #f1d79b 0 4px, #f8e8c2 4px 8px); }
.gw-free { background: #fff; }
.gwticks { display: flex; justify-content: space-between; margin-left: 142px; font-size: 11px; color: #8d7a75; font-weight: 700; }
.gwkey { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: #6e5c57; }
.gwkey span { display: inline-flex; align-items: center; gap: 6px; }
.gwkey i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px #eadfdb; }
@media (max-width: 560px) { .gwrow { grid-template-columns: 1fr; gap: 6px; } .gwticks { margin-left: 0; } }

/* steer-clear calendar preview: a Preview button on each option, and the large popup (2026-11-02) */
.opt .pvbtn { flex: none; align-self: center; margin-left: auto; }
.modalbox.calpvbox { position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: hidden; padding: 24px; background: var(--canvas); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); margin: auto; display: flex; flex-direction: column; }
.calpvbox .apcal { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.calpvbox .apcal .apscroll { height: auto; max-height: calc(100vh - 290px); min-height: 320px; overflow-y: auto; border: 1px solid #f3ece9; border-radius: 12px; background: #fff; }
.calpvbox .apcal .apcalhead { position: sticky; top: 0; background: #fff; z-index: 3; margin-left: 0; padding-left: 40px; }
.calpvbox .apcal .apgrid { position: relative; }
.calpvbox .apcal .apcol { position: relative; background-image: repeating-linear-gradient(#f8f3f1 0 1px, transparent 1px 48px); }
.calpvbox > .stx { position: absolute; top: 14px; right: 14px; }
.calpvbox h2 { margin: 2px 0 4px; }
.calpvbox .apscroll { max-height: calc(100vh - 260px); }
.cblk.pvbusy { background: repeating-linear-gradient(135deg, #e7e2ee 0 6px, #efebf4 6px 12px); color: #4b5563; font-weight: 700; } /* free/busy blocks, shaded (2026-11-02) */
.calpvbox .apcalbar .seg { margin-left: 4px; }
.revsup { margin: 8px 0 10px 34px; display: grid; gap: 8px; } /* the link's support contact, under "Tell the visitor to contact support" (2026-11-02) */
.revsupc { border: 1px solid var(--line, #eadfdb); border-radius: 14px; padding: 12px 14px; background: #fff; }
.revsuph { display: flex; align-items: center; gap: 10px; }
.revsuph small { display: block; font-size: 12px; color: var(--muted, #8d7a75); font-weight: 700; }
.revsuph b { display: block; font-size: 15px; }
.revsupc .cways { margin-top: 8px; }
.revsuph b .ritag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: 11px; font-weight: 800; vertical-align: 2px; }
.revsuph b .fopt { font-style: normal; font-weight: 600; color: var(--muted, #8d7a75); margin-left: 4px; }
.duf.bad .enin input { color: #c0392b; box-shadow: inset 0 0 0 2px #e4867b; background: #fdf0ee; } /* an event length out of range: kept, not saved (2026-11-02) */
.duf.bad .untabs button.on { color: #c0392b; }
.duf.bad { flex-wrap: wrap; }
.duf .dubad { flex-basis: 100%; color: #c0392b; font-weight: 700; font-size: 12.5px; margin-top: 2px; }
.ppimg { width: 100%; height: 180px; object-fit: cover; border-radius: 14px; margin: 10px 0 4px; display: block; } /* place details popup (2026-11-02) */
.ppkvs { display: grid; gap: 0; margin-top: 10px; border: 1px solid var(--line, #eadfdb); border-radius: 14px; background: #fff; }
.ppkv { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 14px; border-top: 1px solid #f3ece9; font-size: 14px; }
.ppkv:first-child { border-top: 0; }
.ppkv span { color: var(--muted, #8d7a75); font-weight: 700; font-size: 13px; }
.ppkv b { font-weight: 600; }
/* Teammates as a large popup (2026-11-02): cards left, the teammate's settings right */
.modalbox.tmmbox { position: relative; width: min(1180px, 100%); height: min(780px, calc(100vh - 32px)); padding: 24px; background: var(--canvas); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); margin: auto; display: flex; flex-direction: column; overflow: hidden; }
.tmmbox > .stx { position: absolute; top: 14px; right: 14px; }
.tmmhead h2 { margin: 2px 0 0; }
.tmmbody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 18px; margin-top: 16px; }
.tmmlist { overflow-y: auto; padding: 2px 4px 2px 2px; }
.tmmlist .tmgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tmmpane { overflow-y: auto; background: #fff; border: 1px solid var(--line, #eadfdb); border-radius: 18px; padding: 0 18px 18px; }
.tmmpane .dh { position: sticky; top: 0; background: #fff; z-index: 2; padding-top: 16px; }
.tmmpick { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted, #8d7a75); font-weight: 600; padding: 40px 20px; }
@media (max-width: 900px) { .tmmbody { grid-template-columns: 1fr; } .tmmpane { max-height: 50vh; } }
.opt .docico { width: 22px; height: 22px; flex: none; align-self: center; } /* Google Doc / Sheet icon on the Event details picks (2026-11-02) */
.modalbox.stbox:has(> [data-lbclose]) > .studio { padding-right: 66px; } /* room beside the round ✕ in library popups (2026-11-02) */
.modalbox > .close.stx { display: grid; place-items: center; padding: 0; line-height: 1; } /* the ✕ centred in its circle (2026-11-02) */

/* Waitlists (2026-11-02): one list per event type; time waitlists vs seat waitlists */
.wtkinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 16px; }
.wtk { border-radius: 16px; padding: 12px 14px; border: 1px solid var(--line, #eadfdb); background: #fff; display: grid; gap: 4px; font-size: 13.5px; color: var(--muted, #8d7a75); }
.wtk b { color: var(--ink); font-size: 15px; } .wtk.time { border-left: 4px solid #3b82f6; } .wtk.seat { border-left: 4px solid #e0a422; }
.wtbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.wtsec { margin-bottom: 14px; padding: 16px 18px; }
.wthead { display: flex; align-items: center; gap: 12px; }
.wthead .grow b { display: block; font-size: 17px; } .wthead .grow small { color: var(--muted, #8d7a75); font-weight: 600; }
.wtfull { color: #c0392b; font-weight: 800; }
.wtkind { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.wtkind.time { background: #e8f0fe; color: #1d4ed8; } .wtkind.seat { background: #fbf0d9; color: #8a5a0a; }
.wtn { min-width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; padding: 0 6px; }
.wthint { margin: 8px 0 6px; }
.wtrow { display: grid; grid-template-columns: auto auto minmax(150px, 1.1fr) minmax(170px, 1.3fr) minmax(130px, .9fr) minmax(120px, .9fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f3ece9; }
.wtrow:not(:has(.wtpos)) { grid-template-columns: auto minmax(150px, 1.1fr) minmax(170px, 1.3fr) minmax(130px, .9fr) minmax(120px, .9fr) auto; }
.wtrow b { display: block; font-size: 14px; } .wtrow small { display: block; font-size: 12.5px; color: var(--muted, #8d7a75); }
.wtpos { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fbf0d9; color: #8a5a0a; font-weight: 800; font-size: 13px; }
.wtst { display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #f3ece9; color: #6e5c57; }
.wtst.off { background: #e6f4ea; color: #1e7a3c; } .wtst.noti { background: #e8f0fe; color: #1d4ed8; }
.wtacts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 1100px) { .wtrow, .wtrow:not(:has(.wtpos)) { grid-template-columns: auto 1fr; } .wtrow > .wtwhat, .wtrow > .wtwhen, .wtrow > .wtstc, .wtrow > .wtacts { grid-column: 2; } .wtkinds { grid-template-columns: 1fr; } .wtacts { justify-content: flex-start; } }
.wthead .grow { flex: 1; min-width: 0; }
.wtbar .seg button { white-space: nowrap; }
.wthint { color: var(--muted, #8d7a75); font-size: 13.5px; }
.wtrow { grid-template-columns: auto auto minmax(150px, 1.1fr) minmax(170px, 1.3fr) minmax(130px, .9fr) minmax(120px, .9fr) 170px; }
.wtrow:not(:has(.wtpos)) { grid-template-columns: auto minmax(150px, 1.1fr) minmax(170px, 1.3fr) minmax(130px, .9fr) minmax(120px, .9fr) 170px; }
/* the Telegram variant's preview, as a Telegram chat bubble (2026-11-02) */
.emtgpv { border-radius: 16px; padding: 18px; background: linear-gradient(160deg, #cfe3c8, #b9d6b0); }
.emtgchat { display: flex; }
.emtgbub { position: relative; max-width: 86%; background: #fff; border-radius: 14px 14px 14px 4px; padding: 10px 14px 18px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.emtgbub p { margin: 0 0 8px; } .emtgbub p:last-of-type { margin-bottom: 0; }
.emtgtime { position: absolute; right: 10px; bottom: 4px; font-size: 11px; color: #9aa59a; }
.duf > span:first-child { white-space: nowrap; } /* a tabbed field's label stays on one line (2026-11-02) */
.dufields .duf { flex-wrap: wrap; row-gap: 6px; }
.discbox { width: min(620px, 100%); } .dstabs { flex-wrap: wrap; } .dstabs button { white-space: nowrap; } /* disclosure sample chat tabs (2026-11-02) */
.datewd { position: relative; display: block; } /* the weekday shown inside a date field (2026-11-03) */
.datewd .dwd { position: absolute; top: 50%; right: 46px; transform: translateY(-50%); font-weight: 800; color: var(--accent); pointer-events: none; font-size: 14px; }
.ubrow.evuse { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; } /* support profile: event types using (2026-11-03) */
.evuses { display: grid; gap: 4px; font-size: 13.5px; color: var(--muted, #8d7a75); }
.evuse1 b { color: var(--ink); font-weight: 700; margin-right: 4px; }

/* waitlist person drawer + slot calendar (2026-11-03) */
#drawer.wtwide { width: min(920px, 96vw); max-width: none; }
.wtcalbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wtkey { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #8d7a75); font-weight: 700; }
.wtkey .k { width: 14px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.wtkey .k.av { background: #e6f4ea; box-shadow: inset 0 0 0 1px #b6dfc3; } .wtkey .k.book { background: var(--accent); } .wtkey .k.steer { background: repeating-linear-gradient(135deg, #e7e2ee 0 4px, #efebf4 4px 8px); box-shadow: inset 0 0 0 1px #cfc6dc; }
.wtcal { border: 1px solid var(--line, #eadfdb); border-radius: 14px; background: #fff; overflow: auto; max-height: calc(100vh - 360px); }
.wthead2 { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: 46px repeat(5, 1fr); background: #fff; border-bottom: 1px solid #f3ece9; font-size: 12.5px; font-weight: 700; color: var(--muted, #8d7a75); }
.wthead2 span { padding: 8px 6px; text-align: center; } .wthead2 .today { color: var(--accent); }
.wtgrid { display: grid; grid-template-columns: 46px repeat(5, 1fr); position: relative; }
.wthrs { position: relative; } .wthrs span { position: absolute; right: 6px; font-size: 11px; color: var(--muted, #8d7a75); transform: translateY(-6px); }
.wtcol { position: relative; border-left: 1px solid #f3ece9; background-image: repeating-linear-gradient(#f6f1ee 0 1px, transparent 1px 88px); }
.wtav { position: absolute; left: 0; right: 0; background: #e6f4ea; }
.wtcell { position: absolute; left: 0; right: 0; height: 44px; cursor: pointer; z-index: 1; }
.wtcell:hover { background: rgba(138, 36, 51, .08); }
.wtblk { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 4px 7px; font-size: 11.5px; overflow: hidden; pointer-events: none; z-index: 2; display: flex; flex-direction: column; }
.wtblk b { font-size: 11.5px; } .wtblk span { font-size: 10.5px; opacity: .8; }
.wtblk.book { background: var(--accent); color: #fff; }
.wtblk.steer { background: repeating-linear-gradient(135deg, #e7e2ee 0 6px, #efebf4 6px 12px); color: #4b5563; box-shadow: inset 0 0 0 1px #cfc6dc; }
.wtblk.slot { background: #fff; color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 6px 16px -6px rgba(0,0,0,.3); z-index: 3; }
.wtnow { position: absolute; left: 0; right: 0; height: 2px; background: #e11d48; z-index: 3; pointer-events: none; }
.wtchk { margin-top: 10px; } .wtchk p { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; }
.wtbad { color: #c0392b; } .wtwarn { color: #8a5a0a; } .wtok { color: #1e7a3c; }
.wtover { font-weight: 700; color: #6b4f12; }
.wtmade { padding: 14px 16px; display: grid; gap: 4px; } .wtmade small { color: var(--muted, #8d7a75); }
.wtlink { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .wtlink code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #f6f1ee; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; }
.wtslotcal .avbody { height: calc(100vh - 400px); min-height: 320px; overflow-y: auto; } /* waitlist slot calendar on the availability grid (2026-11-03) */
.wtslotcal .avwin.inh { background: #e6f4ea; box-shadow: inset 0 0 0 1px #b6dfc3; color: transparent; }
.wtslotcal .avwin:not(.inh) { background: #fff; color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 6px 16px -6px rgba(0,0,0,.3); z-index: 4; }
.wtov { position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 3px 6px; font-size: 10.5px; overflow: hidden; pointer-events: none; z-index: 2; display: flex; flex-direction: column; }
.wtov b { font-size: 11px; } .wtov em { font-style: normal; font-size: 10px; opacity: .8; }
.wtov.book { background: var(--accent); color: #fff; }
.wtov.steer { background: repeating-linear-gradient(135deg, #e7e2ee 0 6px, #efebf4 6px 12px); color: #4b5563; box-shadow: inset 0 0 0 1px #cfc6dc; }
.wtkey .k.slot { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.modalbox.wtcalbox { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 24px; background: var(--canvas); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); margin: auto; } /* the slot calendar as a large popup (2026-11-03) */
.wtcalbox > .stx { position: absolute; top: 14px; right: 14px; }
.wtcalbox h2 { margin: 2px 0 12px; }
.wtslotcal .avbody { overflow-x: hidden; } .wtslotcal .avhead { overflow: hidden; } /* day slide (2026-11-03) */
.wteye { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted, #8d7a75); } /* hide/show a slot-calendar layer (2026-11-03) */
.wteye:hover { background: rgba(0,0,0,.05); color: var(--ink); } .wteye svg { opacity: .8; }
.wteye.off { opacity: .55; text-decoration: line-through; }
.wtkey .wteye .k { margin-left: 0; }
.wtslotcal .avwin.wtslot { display: flex; flex-direction: column; justify-content: flex-start; padding: 4px 8px; } /* slot shows its times and length (2026-11-03) */
.wtslotcal .avwin.wtslot b { display: block; font-size: 12.5px; } .wtslotcal .avwin.wtslot em.wtdur { display: block !important; font-style: normal; font-size: 11.5px; font-weight: 700; opacity: .8; position: static; }
/* waitlist rows as columns with labels (2026-11-03) */
.wtrow, .wtrow:not(:has(.wtpos)) { grid-template-columns: minmax(170px, 1.1fr) minmax(170px, 1fr) minmax(200px, 1.6fr) minmax(130px, .8fr) auto; }
.wtrow:has(.wtpos) { grid-template-columns: 26px minmax(170px, 1.1fr) minmax(170px, 1fr) minmax(200px, 1.6fr) minmax(130px, .8fr) auto; }
.wthrow { padding: 6px 0; border-top: 0; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #8d7a75); }
.wthrow .wtpos { background: none; }
.wtwho { display: flex; align-items: center; gap: 10px; min-width: 0; } .wtwho > span:last-child { min-width: 0; } .wtwho small { overflow: hidden; text-overflow: ellipsis; }
.wtremark { font-size: 13.5px; line-height: 1.4; color: var(--ink); font-style: italic; } .wtremark small { font-style: normal; margin-top: 2px; }
.wtacts { flex-wrap: nowrap; align-items: center; }
@media (max-width: 1100px) { .wthrow { display: none !important; } .wtrow, .wtrow:has(.wtpos) { grid-template-columns: 1fr; } .wtrow > * { grid-column: auto !important; } }
/* every row is its own grid, so the actions column needs a fixed width or the labels drift (2026-11-03) */
.wtrow, .wtrow:not(:has(.wtpos)) { grid-template-columns: minmax(170px, 1.1fr) minmax(130px, .8fr) minmax(200px, 1.6fr) minmax(100px, .6fr) 210px; }
.wtrow:has(.wtpos) { grid-template-columns: 26px minmax(170px, 1.1fr) minmax(130px, .8fr) minmax(200px, 1.6fr) minmax(100px, .6fr) 210px; }
.wtacts { justify-content: flex-end; }
/* the Sign in with LinkedIn button in the test chat (2026-11-03) */
.fqwo.fqli { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.fqwo.fqli:hover { background: #004182; }
.fqwo .lilogo { width: 18px; height: 18px; border: 0; border-radius: 3px; background: #fff; color: #0a66c2; font: 900 12px/18px Arial, sans-serif; }