:root {
  --signal: #C85320;
  --bg: #f8fafc; --panel: #ffffff; --fg: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --accent: #0f766e; --accent-fg: #ffffff; --soft: #f0fdfa;
  --ok: #15803d; --ok-soft: #dcfce7; --warn: #b45309; --warn-soft: #fef3c7; --bad: #b91c1c; --bad-soft: #fee2e2;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --signal: #F08A55;
    --bg: #0b1120; --panel: #111827; --fg: #e5e7eb; --muted: #94a3b8; --line: #1f2937;
    --accent: #2dd4bf; --accent-fg: #042f2e; --soft: #0b2e2b;
    --ok: #4ade80; --ok-soft: #052e16; --warn: #fbbf24; --warn-soft: #3a2a05; --bad: #f87171; --bad-soft: #3b0d0d;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 'Figtree', 'Segoe UI', Arial, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
button, .btn {
  font: 600 13px system-ui, sans-serif; border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; text-decoration: none; display: inline-block;
}
button.primary, .btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button:disabled { opacity: .6; cursor: default; }
input, select, textarea {
  font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; width: 100%;
}
textarea { resize: vertical; }
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.brand { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.brand span { color: var(--accent); }

/* landing */
.hero { padding: 72px 0 40px; text-align: center; }
.hero h1 { font-size: clamp(30px, 6vw, 52px); letter-spacing: -.03em; }
.hero p { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 28px; }
.signin { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 24px 0 40px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding-bottom: 60px; }
.price { font-size: 28px; font-weight: 800; }

/* app */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 12px; flex-wrap: wrap; }
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; padding-bottom: 40px; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.layout > * { min-width: 0; }
.events button { display: block; width: 100%; text-align: left; margin-bottom: 6px; }
.events button.active { border-color: var(--accent); background: var(--soft); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input[type=search] { max-width: 260px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat b { display: block; font-size: 22px; }
.stat small { color: var(--muted); }
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 820px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--bg); position: sticky; top: 0; }
tr:last-child td { border-bottom: none; }
td .sub { color: var(--muted); font-size: 12px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.none { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.links a { margin-right: 8px; white-space: nowrap; }
.posts { font-size: 12px; margin-top: 4px; }
.posts a { display: block; }
td select { padding: 4px 6px; width: auto; }
.actions button { padding: 5px 9px; margin: 0 4px 4px 0; }

dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--fg); padding: 20px; width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.4); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
.notice { padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); margin-bottom: 12px; }
code.token { display: block; word-break: break-all; padding: 8px; background: var(--bg); border: 1px dashed var(--line); border-radius: 8px; margin-top: 8px; }

/* booths */
.side-label { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.booth-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.booth-head .tag { align-self: flex-start; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; background: var(--soft); color: var(--accent); border-radius: 999px; padding: 4px 9px; }
.capture { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.capture .card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.capture .card h3 { font-size: 16px; margin: 0; }
.capture .card p { margin: 0; font-size: 13px; color: var(--muted); }
.capture .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.capture code { font: 500 13px/1.4 'JetBrains Mono', monospace; background: var(--bg); border: 1px dashed var(--line); border-radius: 6px; padding: 6px 8px; word-break: break-all; }
.qrimg { width: 160px; height: 160px; background: #fff; border-radius: 8px; padding: 6px; border: 1px solid var(--line); }
.saved-note { font-size: 13px; color: var(--ok); }

/* team plan */
.plan-days { display: flex; flex-direction: column; gap: 22px; }
.plan-day { display: flex; flex-direction: column; gap: 10px; }
.plan-day h3 { font-size: 15px; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.plan-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; }
.plan-time { font: 600 15px/1.3 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.plan-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plan-flags, .plan-people { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 560px) { .plan-card { grid-template-columns: 1fr; } }

/* event report */
.report { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.funnel { display: flex; flex-direction: column; gap: 6px; }
.funnel-step { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 10px; }
.funnel-bar { height: 12px; border-radius: 99px; background: var(--accent); }
.funnel-step span { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .funnel-step { grid-template-columns: 1fr 120px; } }

.cphoto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; float: left; margin: 2px 10px 0 0; }

/* Claude Design system: type and components */
h1, h2, h3, .brand, .stat b, .price { font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif; letter-spacing: -.01em; }
.brand { font-weight: 800; }
.hero h1 { font-weight: 800; letter-spacing: -.03em; }
.eyebrow, th, .side-label, code, .time { font-family: 'JetBrains Mono', 'Courier New', monospace; }
.eyebrow { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal, #C85320); margin-bottom: 6px; }
th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pill { font-family: 'Figtree', sans-serif; }
.features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .features { grid-template-columns: minmax(0, 1fr); } }
.features .card h3 { margin-bottom: 6px; }
button, .btn { border-radius: 7px; }
.card { border-radius: 12px; }
.signin button { white-space: nowrap; }
.plans .card.popular { border: 2px solid var(--accent); }

/* settings: tabs instead of one long scroll */
dialog.settings { width: min(640px, calc(100vw - 32px)); padding: 0; }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.settings-head h3 { margin: 0; }
.settings-head button { border: none; background: none; font-size: 18px; padding: 4px 8px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 12px 20px 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); padding: 8px 10px; white-space: nowrap; }
.tabs button.active { color: var(--fg); border-bottom-color: var(--signal, var(--accent)); }
.tab-panel { padding: 16px 20px 20px; min-height: 320px; max-height: min(70vh, 640px); overflow-y: auto; }
.tab-panel hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.notice .toolbar { margin-top: 8px; }

/* first sign-in welcome: an announcement-style modal, shown once */
dialog.welcome { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.welcome-hero { height: 120px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 50%, rgba(45,212,191,.35), transparent 55%), radial-gradient(circle at 65% 50%, rgba(240,138,85,.3), transparent 55%), #0b1120; }
.welcome-body { position: relative; padding: 20px 22px 18px; }
.welcome-x { position: absolute; top: -108px; right: 12px; border: none; background: rgba(0,0,0,.35); color: #fff; }
.welcome-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.welcome-grid button { text-align: left; padding: 12px; display: flex; flex-direction: column; gap: 4px; font-weight: 400; }
.welcome-grid button b { font-size: 14px; }
.welcome-grid button span { color: var(--muted); font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .welcome-grid button:hover { border-color: var(--accent); } }
@media (max-width: 520px) { .welcome-grid { grid-template-columns: minmax(0, 1fr); } }

.brand.logo { display: inline-flex; align-items: center; line-height: 0; }
.brand.logo img { height: 30px; width: auto; }

.booth-head .tag.ok { background: var(--ok-soft); color: var(--ok); }
.host-pass { border-color: var(--accent); }

/* settings: extension tab */
.steps { margin: 10px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.steps code { background: var(--soft); padding: 1px 6px; border-radius: 6px; }
details.manual { margin-top: 14px; }
details.manual summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.token-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.token-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* setup wizard */
dialog.wizard { width: min(820px, calc(100vw - 24px)); padding: 0; }
.wz-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: relative; }
.wz-head .welcome-x { position: absolute; top: 12px; right: 12px; }
.wz-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 380px; }
.wz-nav { border-right: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.wz-nav button { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; display: flex; gap: 8px; align-items: center; font-weight: 500; }
.wz-nav button.on { background: var(--soft); color: var(--accent); }
.wz-nav .mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.wz-nav .done .mark { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.wz-nav .skipped .mark { border-style: dashed; }
.wz-panel { padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.wz-panel h2 { margin: 0; font-size: 24px; }
.wz-panel p { margin: 0; }
.wz-panel .why { color: var(--muted); }
.wz-panel ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.wz-choices { display: grid; gap: 10px; }
.wz-choice { text-align: left; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-weight: 400; border-radius: 12px; }
.wz-choice b { font-size: 16px; }
.wz-choice span { color: var(--muted); font-size: 14px; }
.wz-choice.on { border-color: var(--accent); background: var(--soft); }
.wz-done { color: var(--ok); font-weight: 600; }
.wz-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.wz-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, .55); } 70% { box-shadow: 0 0 0 12px rgba(45, 212, 191, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); } }
.pulse { animation: pulse-ring 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
@media (max-width: 680px) {
  .wz-body { grid-template-columns: minmax(0, 1fr); }
  .wz-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .wz-nav button .label { display: none; }
  .wz-panel { padding: 18px 16px; }
  .wz-row { grid-template-columns: minmax(0, 1fr); }
}
/* setup card on the dashboard */
.setup-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; border-color: var(--accent); }
.setup-card .bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 6px; width: 220px; max-width: 100%; }
.setup-card .bar i { display: block; height: 100%; background: var(--accent); }
/* dropdown menus in the toolbar */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 250px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.menu-list button, .menu-list .btn { text-align: left; border: 0; background: none; width: 100%; }
@media (hover: hover) and (pointer: fine) { .menu-list button:hover, .menu-list .btn:hover { background: var(--soft); } }

/* QA: readability floor and phone-sized tap targets */
.side-label, .booth-head .tag, .eyebrow, th { font-size: 12px; }
@media (max-width: 680px) {
  .capture .row2 { grid-template-columns: minmax(0, 1fr); }
  input[type="datetime-local"], input[type="date"] { min-width: 0; width: 100%; }
  button, .btn, select, details.menu > summary, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { min-height: 42px; }
  td a, td button { min-height: 40px; display: inline-flex; align-items: center; }
  input[type="checkbox"] { width: 22px !important; height: 22px; }
  details.manual summary { padding: 10px 0; }
  #throttleCard { display: none; }  /* LinkedIn lookups run in the desktop Chrome extension */
}
@media (max-width: 680px) { label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; min-height: 44px; } }

/* How it works guide */
dialog.guide { width: min(860px, calc(100vw - 24px)); padding: 0; }
.g-body { padding: 4px 20px 22px; max-height: calc(100dvh - 120px); overflow: auto; }
.g-body h4 { margin: 22px 0 10px; font-size: 16px; }
.g-rule { background: var(--soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 4px; }
.g-rule p { margin: 0; font-size: 16px; }
.g-video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #0B1120; margin-top: 14px; display: block; }
.g-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.g-stage { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.g-stage ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.45; flex: 1; }
.g-when { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dev { border-radius: 99px; padding: 2px 8px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.dev.pc { background: rgba(240,138,85,.15); color: #9A4318; }
.dev.ph { background: rgba(45,212,191,.15); color: var(--accent); }
.g-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.g-faq { border-bottom: 1px solid var(--line); }
.g-faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.g-faq p { margin: 0 0 12px; color: var(--muted); line-height: 1.5; }
.desk-only { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 14px; }
.g-faq a { display: inline-block; padding: 10px 0; }

/* Booth staff */
.staff-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.checkin-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 14px; }
.checkin-box.on { border: 1px solid var(--accent); background: var(--soft); }
.staff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.staff-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 6px 0; font-size: 14px; }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Dashboards */
.dash-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-top: 12px; min-width: 0; }
.dash-card h4 { margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 600; }
.dash-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: -14px -16px 10px; border-bottom: 1px solid var(--line); }
.dash-tab { text-align: left; background: none; border: 0; border-radius: 0; border-top: 3px solid transparent; padding: 12px 16px; color: var(--fg); min-height: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.dash-tab small { color: var(--muted); font-size: 13px; }
.dash-tab b { font: 800 26px/1.1 'Bricolage Grotesque', sans-serif; }
.dash-tab .dash-sub { font-size: 12px; color: var(--accent); font-weight: 600; }
.dash-tab.on { border-top-color: var(--accent); background: var(--soft); }
.dash-chart-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.dash-svg { width: 100%; height: auto; display: block; color: var(--fg); }
.dash-axis { font-size: 11px; fill: var(--muted); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.dash-grid .dash-card { margin-top: 12px; }
.dash-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 8px; }
.dash-bar i { display: block; height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.dash-bar u { display: block; height: 100%; background: linear-gradient(90deg, #2dd4bf, #14b8a6); border-radius: 6px; }
.dash-bar em { font-style: normal; text-align: right; font-weight: 700; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 0; }
.dash-table td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.dash-table td:nth-child(2) { color: var(--muted); text-align: right; padding-right: 12px; }
.dash-table td:last-child { text-align: right; font-weight: 700; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.dash-head select { width: auto; min-width: 160px; }

.wz-nav .skipped .mark { border-color: var(--signal, #F08A55); color: var(--signal, #F08A55); }
@media (max-width: 680px) { .wz-nav button.on .label { display: inline; white-space: nowrap; } }

.trial-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0 0; font-size: 14px; }
.trial-bar.warn { border-color: #F08A55; background: rgba(240,138,85,.12); }

/* Phone: tables become stacked cards so nothing is cut off at the right edge */
@media (max-width: 680px) {
  .table-wrap { overflow-x: visible; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .table-wrap tr:last-child { border-bottom: none; }
  .table-wrap td { display: block; padding: 4px 0; border: none; }
  .table-wrap td:empty { display: none; }
  .table-wrap td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }
  .table-wrap td:first-child { font-size: 16px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dev.pc { color: #F08A55; } }

/* Telegram event groups picker */
.tg-group { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tg-group input[type="checkbox"] { width: 20px; height: 20px; }
.tg-group-name .pill { margin-top: 4px; }
@media (max-width: 680px) { .tg-group { grid-template-columns: auto minmax(0, 1fr); } .tg-group > select, .tg-group > button { grid-column: 2; } }
.chat-sum { font-size: 13px; line-height: 1.45; margin-bottom: 4px; }

/* ---- UX step 1: calmer main screen ------------------------------------------- */
button.quiet, .btn.quiet { background: none; border-color: transparent; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { button.quiet:hover, .btn.quiet:hover { color: var(--fg); background: var(--soft); } }
button.tint, .btn.tint { background: var(--soft); color: var(--accent); border-color: transparent; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { button.tint:hover { filter: brightness(.97); } }
@media (prefers-color-scheme: light) { button.tint, .btn.tint { color: #0B7F72; } }
:root[data-theme="light"] button.tint { color: #0B7F72; }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); font-weight: 600; cursor: pointer; }
button.icon { background: none; border: 0; font-size: 18px; color: var(--muted); padding: 6px 10px; }
.trial-badge { border: 1px solid var(--accent); background: var(--soft); color: var(--fg); border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 600; }

/* sidebar: plain rows, no boxes */
aside .events button { border: 0; background: none; padding: 9px 10px; border-radius: 8px; margin-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { aside .events button:hover { background: var(--soft); } }
aside .events button.active { background: var(--soft); border: 0; font-weight: 600; }
.add-link { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--accent); font-weight: 600; padding: 9px 10px; }
@media (hover: hover) and (pointer: fine) { .add-link:hover { background: var(--soft); } }
#newBooth { border: 0; background: none; color: var(--accent); text-align: left; padding: 9px 10px; font-weight: 600; }
.li-status { margin-top: 18px; padding: 12px 10px; border-top: 1px solid var(--line); font-size: 14px; }
.li-status-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.li-status details { margin-top: 6px; }
.li-status summary { color: var(--muted); cursor: pointer; font-size: 13px; }
.li-status details p { font-size: 13px; margin: 6px 0; }

/* one quiet stats line */
.statline { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 12px; }
.stat-link { border: 0; background: none; padding: 4px 8px; border-radius: 99px; color: var(--muted); }
.stat-link b { color: var(--fg); }
.stat-link.on { background: var(--soft); color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .stat-link:hover { background: var(--soft); color: var(--fg); } }

/* people list */
.plist { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.person:last-child { border-bottom: 0; }
.person:focus-visible { background: var(--soft); outline: none; }
@media (hover: hover) and (pointer: fine) { .person:hover { background: var(--soft); outline: none; } }
.person.is-done { opacity: .72; }
.person-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.person-name .muted { font-size: 14px; }
.person-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; }
.person-note { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 160px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; object-fit: cover; flex: none; }
.avatar.big { width: 52px; height: 52px; font-size: 18px; }
button.draft { min-width: 76px; }

/* person panel: a sheet from the right (bottom on phones) */
dialog.sheet { margin: 0 0 0 auto; height: 100vh; height: 100dvh; max-height: 100dvh; width: min(460px, 100vw); max-width: 100vw; border-radius: 16px 0 0 16px; padding: 0; }
dialog.sheet #personBody { padding: 20px 22px 28px; }
dialog.sheet section { padding: 14px 0; border-top: 1px solid var(--line); }
dialog.sheet h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
dialog.sheet p { margin: 0; }
.sheet-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sheet-head h3 { margin: 0; }
.sheet-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sheet-actions label.inline { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 14px; }
.sheet-actions select { width: auto; }
.sheet-foot { padding-top: 14px; border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; text-decoration: none; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--soft); } }
@media (max-width: 680px) {
  dialog.sheet { margin: auto 0 0; height: auto; max-height: 88vh; width: 100vw; border-radius: 16px 16px 0 0; }
  .person { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .person button.draft { grid-column: 2; justify-self: start; }
  .statline { margin-top: 0; }
}
@media (max-width: 680px) {
  /* Phone: the sidebar becomes one scrollable row of chips above the list */
  #who { display: none; }
  .topbar .toolbar { gap: 2px; }
  aside { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  aside::-webkit-scrollbar { display: none; }
  aside .events { display: contents; }
  aside .side-label, aside .li-status { display: none; }
  aside .events button, aside .add-link, aside #newBooth { flex: none; width: auto; white-space: nowrap; margin: 0; border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; min-height: 40px; }
  aside .events button.active { border-color: var(--accent); }
}
@media (max-width: 680px) {
  .person { grid-template-columns: auto minmax(0, 1fr) auto; }
  .person button.draft { grid-column: auto; min-width: 0; padding: 8px 12px; }
  .topbar .toolbar button { padding: 6px 8px; min-height: 36px; font-size: 14px; }
}

/* ---- UX step 2: Today · People · Events · Settings ---------------------------- */
.layout { grid-template-columns: minmax(0, 1fr); }
.layout > aside { display: none; }
.appnav { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.appnav button { border: 0; background: none; border-radius: 0; padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
@media (hover: hover) and (pointer: fine) { .appnav button:hover { color: var(--fg); } }
.appnav button.on { color: var(--fg); border-bottom-color: var(--accent); }
.appnav .ico { font-size: 15px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.page-head h2 { margin: 0; font-size: 28px; text-transform: none; letter-spacing: -.01em; color: var(--fg); font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif; }
.page-head select { width: auto; max-width: 100%; }
.back-link { margin: 0 0 12px; }
.today-count { font-size: 17px; margin: 4px 0 14px; }
.today-group { margin: 0 0 18px; }
.today-group h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.today-empty { text-align: center; padding: 36px 16px; }
.today-empty .big { font-size: 40px; }
.today-empty h3 { margin: 8px 0 6px; }
.today-foot { text-align: center; margin: 8px 0 20px; }
#todayView .li-status { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-top: 8px; padding: 12px 16px; }
.ev-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 16px; }
.ev-short { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) { .ev-short:hover { background: var(--soft); } }
.ev-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ev-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ev-main, .ev-booth { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 0; background: none; padding: 14px 16px; }
.ev-main { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (hover: hover) and (pointer: fine) { .ev-main:hover, .ev-booth:hover { background: var(--soft); } }
.ev-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ev-booth { border-top: 1px solid var(--line); padding-left: 32px; font-size: 15px; }
.chev { color: var(--muted); font-size: 20px; line-height: 1; }
@media (max-width: 680px) {
  /* Phone: tab bar at the bottom, like an iPhone app */
  .appnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 0; justify-content: space-around; padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .appnav button { flex-direction: column; gap: 2px; font-size: 12px; padding: 6px 4px; border-bottom: 0; min-height: 48px; flex: 1; }
  .appnav button.on { color: var(--accent); }
  .appnav .ico { font-size: 20px; }
  body { padding-bottom: 76px; }
  .page-head h2 { font-size: 24px; }
  .ev-main { grid-template-columns: minmax(0, 1fr) auto; }
  .ev-main > .muted { grid-column: 1; grid-row: 2; }
  .ev-main > .chev { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---- UX step 3: settings groups and the Connections page ----------------------- */
#settingsTabs { align-items: center; }
.tab-group { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 4px 8px 12px; white-space: nowrap; }
.tab-group:first-child { padding-left: 0; }
.conn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 8px; }
@media (hover: hover) and (pointer: fine) { .conn:hover { background: var(--soft); } }
.conn-ico { font-size: 22px; }
.conn-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conn-main .muted { font-size: 14px; }
.conn-act { color: var(--accent); font-weight: 600; font-size: 14px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dot.on { background: #22c55e; } .dot.part { background: #F08A55; } .dot.off { background: transparent; border: 2px solid var(--muted); width: 8px; height: 8px; }
@media (max-width: 680px) { .conn { grid-template-columns: auto minmax(0, 1fr) auto; } .conn-act { grid-column: 2; } }
dialog.settings { width: min(860px, calc(100vw - 32px)); max-width: none; }

/* ---- Design rules (design-skills master): reach, press feedback, numbers, phone ---------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); }

/* Controls are controls: no double-tap delay, no text selection or callout on long-press */
button, .btn, a, summary, [role="button"] { touch-action: manipulation; }
button, .btn, summary, .chip, .appnav button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Press feedback the moment a finger lands */
button, .btn, .chip {
  transition: transform 120ms var(--ease-out), background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
button:not(:disabled):active, .btn:active, .chip:active { transform: scale(.97); }
.person-open:active, .ev-main:active, .ev-booth:active, .conn:active, .ev-short:active, .stat-link:active { transform: scale(.99); }

/* Numbers that change line up and don't jitter */
.statline, .stat-link, #throttleText, .today-count, .today-group h4, .ev-main .muted, .ev-booth .muted,
.trial-badge, .tg-group .sub, .conn-main .muted, #eventPick { font-variant-numeric: tabular-nums; }

/* Status dots differ in shape and lightness, not only hue */
.dot.on { background: var(--ok); }
.dot.part { background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); border: 2px solid var(--warn); width: 10px; height: 10px; }
.dot.off { background: transparent; border: 2px solid var(--muted); width: 10px; height: 10px; }

/* Dialogs and the person sheet arrive instead of popping in (opened often: kept short) */
dialog[open] { opacity: 1; transform: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
@starting-style { dialog[open] { opacity: 0; transform: scale(.97); } }
dialog.sheet[open] { transition: opacity 220ms var(--ease-drawer), transform 220ms var(--ease-drawer); }
@starting-style { dialog.sheet[open] { opacity: 1; transform: translateX(100%); } }
dialog::backdrop { transition: background-color 180ms ease; }
dialog, dialog.sheet #personBody, .g-body { overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
  @starting-style { dialog[open], dialog.sheet[open] { opacity: 0; transform: none; } }
  button:not(:disabled):active, .btn:active, .chip:active { transform: none; }
}

/* Person row: the whole name area is one real button */
.person { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.person-open { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.person-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.avatar { flex-shrink: 0; }

/* Thumb reach: on a phone, Add person is a button above the tab bar */
.fab { display: none; }
@media (max-width: 680px) {
  .fab { display: inline-flex; align-items: center; justify-content: center; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 31;
         width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-fg); font-size: 28px; line-height: 1; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  .page-head .primary.add-top, #addPerson { display: none; }
  dialog.sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }
  @starting-style { dialog.sheet[open] { transform: translateY(100%); } }
}

/* Phones: 16px inputs (no iOS zoom) and 44px touch targets */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  button, .btn, select, summary, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { min-height: 44px; }
  .topbar .toolbar button, .trial-badge { min-height: 44px !important; }
  button.link, .stat-link, .add-link, #newBooth, .chip, .li-status summary { min-height: 44px; display: inline-flex; align-items: center; }
  .li-status summary { display: list-item; line-height: 44px; }
  td a, td button { min-height: 44px; }
  input[type="checkbox"] { width: 24px !important; height: 24px; }
}

/* break-ui fixes: worst-case names, titles and the phone header */
.stat-link { gap: 4px; }
.person-open { align-items: start; }
.person-open .avatar { margin-top: 2px; }
.person-name b { overflow-wrap: anywhere; }
.person-name .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#personBody:focus { outline: none; }
.phone-only { display: none; }
.brand.logo { display: inline-flex; align-items: center; min-height: 44px; }
#settingsTabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
@media (max-width: 680px) {
  #openGuide, #logout { display: none; }
  .phone-only { display: flex; }
  #todayView, #peopleView { padding-bottom: 72px; }
}

.menu-list { max-width: calc(100vw - 32px); }
.menu-list { z-index: 40; }
@media (max-width: 680px) {
  /* Menus open as an action sheet above the tab bar: always on screen, in thumb reach */
  details.menu[open] > .menu-list { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); min-width: 0; max-width: none; padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
  details.menu[open] > .menu-list button, details.menu[open] > .menu-list .btn { min-height: 48px; font-size: 15px; }
}

/* ===== v2: Today focus card / inbox, capture sheet, person story, event recap ===== */
.today-head .today-date { font-size: 13px; font-weight: 600; }
.today-progress { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; font-variant-numeric: tabular-nums; }
.tp-line { display: flex; justify-content: space-between; font-size: 15px; }
.tp-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tp-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width 300ms var(--ease-out); }
.eyebrow-t { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }

.focus-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.08); margin-bottom: 18px; }
.focus-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.focus-name { display: flex; flex-direction: column; min-width: 0; }
.focus-name b { font-size: 18px; overflow-wrap: anywhere; }
.focus-name .muted { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-where { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.focus-note { margin: 0; font-size: 15px; line-height: 1.5; }
.focus-draft { background: var(--soft); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; max-height: 9.5em; overflow: hidden; }
.focus-send, .pd-send { min-height: 52px; border-radius: 14px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.focus-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.focus-actions button { min-height: 44px; border-radius: 12px; }

.inbox { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 520px; margin-bottom: 18px; }
.inbox-list { border-right: 1px solid var(--line); max-height: 72vh; overflow: auto; overscroll-behavior: contain; }
.inbox-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.inbox-item.on { background: var(--soft); box-shadow: inset 3px 0 0 var(--accent); }
.inbox-main { display: flex; flex-direction: column; min-width: 0; }
.inbox-main .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-src { font-size: 12px; white-space: nowrap; }
.inbox-pane { padding: 24px 28px; max-height: 72vh; overflow: auto; overscroll-behavior: contain; }
.inbox-pane section { padding: 14px 0; border-top: 1px solid var(--line); }
.inbox-pane h4, dialog.sheet h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kbd-hint { font-size: 13px; margin: 10px 0 0; }

.pd-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 4px 0 14px; }
.pd-head h3 { margin: 6px 0 0; font-size: 24px; overflow-wrap: anywhere; }
.pd-head .avatar.big { width: 72px; height: 72px; font-size: 24px; }
.pd-quick { display: flex; gap: 10px; margin-top: 8px; }
.pd-round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); text-decoration: none; font-size: 15px; }
.pd-draft { display: flex; flex-direction: column; gap: 10px; }
.pd-draft-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-draft-text { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; background: var(--soft); border-radius: 12px; padding: 12px 14px; }
.seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; border-radius: 8px; background: none; color: var(--muted); padding: 6px 10px; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.story { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.story li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.story li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.story li .muted { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-ico { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.story-ico.teal { background: var(--soft); color: var(--accent); } .story-ico.blue { background: #e0f2fe; color: #0369a1; }
.story-ico.amber { background: var(--warn-soft); color: var(--warn); } .story-ico.green { background: var(--ok-soft); color: var(--ok); }
.pd-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pd-row label { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg); }
.pd-row select { width: auto; }
dialog.sheet #personBody { position: relative; }
.sheet-close { position: absolute; top: 12px; right: 12px; }

.nav-add { display: none !important; }
@media (max-width: 680px) {
  .nav-add { display: inline-flex !important; align-self: start; justify-self: center; flex: 0 0 56px !important; width: 56px; height: 56px; min-height: 56px !important; margin-top: -22px; border-radius: 50% !important; background: var(--accent) !important; color: var(--accent-fg) !important; font-size: 28px !important; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(15,118,110,.35); }
  .today-head .add-top { display: none; }
  .inbox { display: none; }
}

dialog.capture-sheet { width: min(480px, calc(100vw - 32px)); padding: 18px 20px 22px; border-radius: 20px; }
.cap-head { display: flex; justify-content: space-between; align-items: center; }
.cap-head h3 { margin: 0; font-size: 24px; }
dialog.capture-sheet input, dialog.capture-sheet select, dialog.capture-sheet textarea { min-height: 48px; border-radius: 12px; font-size: 16px; }
.cap-save { width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; margin-top: 6px; }
.cap-foot { text-align: center; font-size: 13px; margin: 8px 0 0; }
@media (max-width: 680px) {
  dialog.capture-sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  @starting-style { dialog.capture-sheet[open] { transform: translateY(100%); opacity: 1; } }
}

.recap-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.recap-q { font-size: 17px; }
.funnel { display: grid; grid-template-columns: 120px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; }
.funnel > b { text-align: right; }
.funnel-bar { height: 14px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; border-radius: 6px; }
.funnel-bar .f0 { background: #134e4a; } .funnel-bar .f1 { background: #0f766e; } .funnel-bar .f2 { background: #2dd4bf; } .funnel-bar .f3 { background: #99f6e4; }
.recap-src > span:first-child { display: flex; flex-direction: column; }
.recap-src { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; }
.recap-src:first-child { border-top: 0; }
.inbox-pane .pd-send { width: auto; align-self: flex-start; padding: 0 28px; }

/* Empty screens: one clear next step */
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.empty-actions button { min-height: 44px; padding: 0 18px; }

/* Wizard: booth / side event / Luma event */
.wz-choices.wz-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 680px) { .wz-choices.wz-three { grid-template-columns: minmax(0, 1fr); } }
.luma-box { display: flex; flex-direction: column; gap: 6px; }
.luma-box input { flex: 1; min-width: 0; }
.luma-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--accent); background: var(--soft); border-radius: 10px; }
.luma-plus { font-size: 13px; margin: 4px 0 0; }

/* ======================= v2.1 look: neutral, quiet, one accent =======================
   Greys carry the interface; teal is for the main action and focus only.
   Surfaces step in tone instead of being boxed in with lines. */
:root {
  --bg: #f6f6f7; --panel: #ffffff; --panel-2: #f0f0f2; --fg: #18181b; --muted: #5f5f6b; --line: rgba(0,0,0,.08);
  --accent: #0f766e; --accent-fg: #ffffff; --soft: #f0f0f2;
  --ok: #15803d; --warn: #b45309; --bad: #b91c1c;
  --funnel-0: #18181b; --funnel-1: #52525b; --funnel-2: #a1a1aa;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e10; --panel: #17171a; --panel-2: #1f1f23; --fg: #ededef; --muted: #a0a0ab; --line: rgba(255,255,255,.07);
    --accent: #2dd4bf; --accent-fg: #062e2a; --soft: #1f1f23;
    --ok: #4ade80; --warn: #fbbf24; --bad: #f87171;
    --funnel-0: #ededef; --funnel-1: #b4b4bd; --funnel-2: #7c7c87;
  }
}
.ic { flex-shrink: 0; vertical-align: -3px; }

/* type: Bricolage for the wordmark and page titles only */
h3, .stat b, .price, dialog h3, .settings-head h3 { font-family: 'Figtree', 'Segoe UI', sans-serif; letter-spacing: -.01em; }
.side-label, th, .eyebrow, .tag, .eyebrow-t, .today-group h4, .inbox-pane h4, dialog.sheet h4, .booth-head .tag, .tab-group, label {
  font-family: 'Figtree', 'Segoe UI', sans-serif; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--muted);
}

/* buttons: neutral fills; the accent is the primary action only */
button, .btn { background: var(--panel-2); border-color: transparent; color: var(--fg); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
button.tint, .btn.tint { background: var(--panel-2); color: var(--fg); }
@media (prefers-color-scheme: light) { button.tint, .btn.tint { color: var(--fg); } }
:root[data-theme="light"] button.tint { color: var(--fg); }
button.quiet, .btn.quiet { background: none; }
button.link, .add-link, #newBooth, .conn-act, a { color: var(--fg); }
button.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { background: var(--panel); border-color: var(--line); }
input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* surfaces instead of boxes */
.card, .plist, .ev-card, .focus-card, .inbox, .recap-card, .ev-short, .conn, .setup-card, .li-status, #todayView .li-status,
dialog, .tg-group, .chip, .pd-round, .seg, .luma-card, .trial-badge { border-color: transparent !important; }
.card, .plist, .ev-card, .inbox, .recap-card, .ev-short, .conn, .setup-card, #todayView .li-status { background: var(--panel); }
.focus-card { box-shadow: none; background: var(--panel); }
.person, .inbox-item, .ev-booth { border-color: var(--line); }
.plist .person { border-bottom: 1px solid var(--line); }
.inbox-list { border-right: 1px solid var(--line); }
.inbox-item.on { background: var(--panel-2); box-shadow: none; }
.person:hover, .person:focus-within, .ev-main:hover, .ev-booth:hover, .ev-short:hover, .conn:hover { background: var(--panel-2); }
.appnav { border-bottom: 0; }
.appnav button { border-radius: 8px; border-bottom: 0; margin: 0; color: var(--muted); padding: 8px 12px; gap: 8px; }
.appnav button.on { background: var(--panel-2); color: var(--fg); }
.trial-badge { background: none; color: var(--muted); font-weight: 500; padding: 4px 6px; }
.setup-card .bar i, .tp-bar i { background: var(--fg); }
.tp-bar, .setup-card .bar { background: var(--panel-2); height: 4px; }
.focus-draft, .pd-draft-text { background: var(--panel-2); }
.avatar { background: var(--panel-2); color: var(--fg); font-weight: 600; }
.stat-link.on, .stat-link:hover { background: var(--panel-2); }
.chip, .pd-round { background: var(--panel-2); color: var(--fg); }
.dot.on { background: var(--ok); } .dot.part { background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); border-color: var(--warn); }

/* badges: a dot and plain text instead of tinted pills */
.pill, .pill.ok, .pill.warn, .pill.bad, .pill.none { background: none !important; border: 0 !important; color: var(--fg); padding: 0; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.pill.ok::before { background: var(--ok); } .pill.warn::before { background: var(--warn); } .pill.bad::before { background: var(--bad); }
.story-ico, .story-ico.teal, .story-ico.blue, .story-ico.amber, .story-ico.green { background: none; color: var(--muted); width: 20px; }

/* funnel: lightness carries meaning; teal only on the outcome */
.funnel-bar { background: var(--panel-2); height: 8px; border-radius: 99px; }
.funnel-bar i { border-radius: 99px; }
.funnel-bar .f0 { background: var(--funnel-0); } .funnel-bar .f1 { background: var(--funnel-1); } .funnel-bar .f2 { background: var(--funnel-2); } .funnel-bar .f3 { background: var(--accent); }

/* bits that were teal for no reason */
.today-progress b, .eyebrow-t { color: var(--fg); }
.notice { background: var(--panel-2); border-color: transparent; color: var(--fg); }
.trial-bar { background: var(--panel-2); border-color: transparent; }
.trial-bar.warn { background: color-mix(in srgb, var(--warn) 14%, var(--panel)); }
.dev.pc, .dev.ph { background: var(--panel-2); color: var(--fg); display: inline-flex; align-items: center; gap: 4px; }
.g-dev { display: flex; align-items: center; gap: 8px; }
.welcome-grid button:hover { border-color: transparent; }
.wz-choice.on { border-color: var(--fg) !important; background: var(--panel-2) !important; }
.ev-short b, .ev-booth-name { display: inline-flex; align-items: center; gap: 8px; }
.nav-add { background: var(--fg) !important; color: var(--bg) !important; box-shadow: none !important; border-radius: 16px !important; }
.sheet-close { background: var(--panel-2); }
.seg button[aria-pressed="true"] { background: var(--panel); }
.today-head .add-top { background: var(--panel-2); border-color: transparent; color: var(--fg); }

/* Settings: a sidebar list on computers (like Apple's Settings), a scrolling row on phones */
#settingsTabs { -webkit-mask-image: none; mask-image: none; }
.tab-group { font-size: 12px; font-weight: 600; color: var(--muted); opacity: .8; }
#settingsTabs button { color: var(--fg); }
#settingsTabs button.active { background: var(--panel-2); border-bottom-color: transparent; }
@media (min-width: 760px) {
  dialog.settings[open] { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: min(940px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 48px)); }
  dialog.settings .settings-head { grid-column: 1 / -1; padding: 16px 20px 12px; }
  dialog.settings #settingsTabs { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; overflow-y: auto; overflow-x: visible; padding: 4px 10px 16px; border-bottom: 0; border-right: 1px solid var(--line); gap: 2px; }
  dialog.settings #settingsTabs button { text-align: left; border-radius: 8px; padding: 9px 12px; min-height: 0; border-bottom: 0; }
  dialog.settings #settingsTabs .tab-group { padding: 14px 12px 4px; }
  dialog.settings #settingsTabs .tab-group:first-child { padding-top: 4px; }
  dialog.settings .tab-panel { grid-column: 2; grid-row: 2; max-height: none; min-height: 0; overflow-y: auto; padding: 4px 28px 24px; }
}
@media (max-width: 759px) {
  #settingsTabs { scroll-padding: 0 20px; }
  #settingsTabs .tab-group { padding: 8px 4px 8px 14px; border-left: 1px solid var(--line); margin-left: 6px; }
  #settingsTabs .tab-group:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
}

/* Plan page: one choice at a time, tidy rows, one accent */
.bill-now { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--panel-2); border-radius: 12px; margin-bottom: 16px; }
.bill-now > div { display: flex; flex-direction: column; gap: 2px; }
.bill-now b { font-size: 16px; }
.bill-switch { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bill-switch .seg button { padding: 8px 14px; font-size: 14px; min-height: 36px; }
.plan-list { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--panel-2); }
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.plan-row:last-child { border-bottom: 0; }
.plan-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plan-main b { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.plan-main .muted { font-size: 14px; }
.plan-buy { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.plan-price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-price small { font-size: 13px; font-weight: 500; margin-left: 2px; }
.plan-buy button { min-width: 112px; background: var(--panel); }
.plan-buy button.primary { background: var(--accent); }
.bill-code { margin: 16px 0 0; }
.bill-code summary { cursor: pointer; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.bill-code input { max-width: 260px; text-transform: uppercase; }
.bill-code input::placeholder { text-transform: none; }
.bill-extras { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.bill-extras .muted { margin-right: auto; font-size: 14px; }
@media (max-width: 560px) { .plan-row { grid-template-columns: minmax(0, 1fr); } .plan-buy { justify-content: space-between; } }

/* Setup: a slim bar with a ring meter, above every tab until it's done */
#setupCard.setup-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 0 0 18px; background: var(--panel); border-radius: 12px; cursor: pointer; flex-wrap: nowrap; }
#setupCard.hidden { display: none; }
#setupCard:hover { background: var(--panel-2); }
.setup-ring { --p: 0%; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--accent) var(--p), var(--panel-2) 0); display: grid; place-items: center; }
.setup-ring > span { width: 31px; height: 31px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
#setupCard:hover .setup-ring > span { background: var(--panel-2); }
.setup-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.setup-text .muted { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-go { display: inline-flex; align-items: center; gap: 6px; background: none !important; font-weight: 600; padding: 8px 4px; }
.tab-group { opacity: 1; }
.setup-ring > span { font-size: 12px; width: 32px; height: 32px; }
.setup-ring { width: 42px; height: 42px; }
/* QA from feedback: sentence-case step labels, booth layout, check-in without a dashed box, draft channel as a segmented choice */
.g-when { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.checkin-box { border: 0 !important; background: var(--panel-2); }
.checkin-box.on { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.capture { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.capture input[type="datetime-local"] { min-width: 0; width: 100%; }
.capture .row2 > div { min-width: 0; }
#draftChannels button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.capture code { border: 0; background: var(--panel-2); }
.capture .row2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Booth page: the three main jobs first, the rest folded away */
.section-title { font-size: 17px; margin: 22px 0 10px; }
details.by-hand, details.more-ways { margin-top: 4px; }
details.by-hand > summary, details.more-ways > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
details.by-hand { display: flex; flex-direction: column; gap: 8px; }
details.more-ways { margin: 4px 0 18px; }
details.more-ways[open] > summary { margin-bottom: 10px; }
details.by-hand > summary, details.more-ways > summary, .bill-code > summary, .li-status summary { list-style: none; gap: 8px; color: var(--fg); }
details.by-hand > summary::-webkit-details-marker, details.more-ways > summary::-webkit-details-marker, .bill-code > summary::-webkit-details-marker { display: none; }
details.by-hand > summary::before, details.more-ways > summary::before, .bill-code > summary::before {
  content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 150ms var(--ease-out); flex-shrink: 0; margin-right: 2px; }
details[open].by-hand > summary::before, details[open].more-ways > summary::before, details[open].bill-code > summary::before { transform: rotate(45deg); }
.bill-code > summary { display: inline-flex; align-items: center; }