/* The console's components: everything but the colour tokens (tokens.css). Flat: no gradients, glows or heavy shadows. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.5 Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
a { color: inherit; }
a.link { color: var(--accent); text-decoration: none; font-weight: 550; }
a.link:hover { text-decoration: underline; }
svg { flex: none; }
code { font: 12.5px/1.5 var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line2); overflow-wrap: anywhere; }
td code { white-space: nowrap; overflow-wrap: normal; }
.app { display: grid; grid-template-columns: var(--side-w, 224px) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; z-index: 50; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 12px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; }
.side-head { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 12px; font-size: 15px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand b { display: flex; flex-direction: column; gap: 2px; font-weight: 650; }
.brand .logo { flex: none; width: 30px; height: 30px; }
.brand span { font-size: 11.5px; font-weight: 500; color: var(--ink3); letter-spacing: 0; }
.side-head form { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 6px; color: var(--ink2); text-decoration: none; font-weight: 500; font-size: 13px; transition: background .12s, color .12s; }
.nav a svg { color: var(--ink3); transition: color .12s; }
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav a[aria-current="page"] svg { color: var(--accent); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--ink2); font-size: 11.5px; font-weight: 600; text-align: center; line-height: 18px; font-variant-numeric: tabular-nums; }
.nav .count.soft { color: var(--ink3); }
.nav-group { padding: 16px 12px 6px; font-size: 11px; font-weight: 650; color: var(--ink3); text-transform: uppercase; letter-spacing: .09em; }
.nav .dot { width: 18px; display: grid; place-items: center; }
.nav .dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--accent)); box-shadow: none; }
.nav a.add { color: var(--ink3); font-size: 13.5px; }
.side-sep { height: 1px; background: var(--line); margin: 8px; }
.nav { flex: 1 1 auto; }
.nav .side-sep.push { margin-top: auto; }
.side-foot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.side-foot button, .side-head button { width: 100%; justify-content: flex-start; gap: 12px; color: var(--ink3); border-color: transparent; background: none; box-shadow: none; padding: 10px 12px; font-weight: 550; }
.side-foot button:hover, .side-head button:hover { background: var(--soft); color: var(--ink); }
.main { padding: 18px 24px 40px; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin: -18px -24px 16px; padding: 8px 24px; min-height: 48px;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar .lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h1 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0 8px 0 0; min-width: 0; }
.topbar h1 .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--dot, var(--accent)); flex: none; }
.app-switch { position: relative; }
.app-switch > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.app-switch > summary::-webkit-details-marker { display: none; }
.app-switch > summary:hover { border-color: #cfd4df; }
.app-switch[open] > summary { border-color: var(--accent); }
.app-switch .sw-dot { width: 9px; height: 9px; margin: 0 4.5px; border-radius: 50%; background: var(--dot, var(--ink3)); flex: none; }
.app-switch .sw-icon { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: none; }
.app-switch .caret, .profile .caret { display: inline-flex; color: var(--ink3); }
.app-switch > summary:hover .caret, .profile > summary:hover .caret { color: var(--ink2); }
.app-switch .menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 240px; max-width: calc(100vw - 32px); max-height: 60vh; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); }
.app-switch .menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-size: 13.5px; font-weight: 550; }
.app-switch .menu a:hover { background: var(--soft); color: var(--ink); }
.app-switch .menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.app-switch .menu .sep { height: 1px; margin: 5px 4px; background: var(--line); }
.topbar .tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px 12px; flex-wrap: wrap; flex: 1; }
.settings-tabs { margin: 0 0 18px; }
.topbar .grow { flex: 1; }
.topbar .field input { min-width: 150px; width: 180px; }
.topbar .tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.topbar .tabs::-webkit-scrollbar { display: none; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--ink3); font-size: 13.5px; margin-bottom: 16px; }
.crumbs a { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.crumbs a:hover { color: var(--ink); }
.hero { position: relative; overflow: hidden; background: var(--hero); border-radius: 20px; padding: 34px 36px 30px; margin-bottom: 20px; }
.hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: none; display: none; pointer-events: none; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.hero h1, .hero h2 { font-size: 30px; line-height: 1.18; font-weight: 700; letter-spacing: -.03em; margin: 0 0 10px; max-width: 760px; }
.hero p { margin: 0 0 18px; color: var(--ink2); font-size: 15.5px; max-width: 760px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
/* Stacked blocks — cards, card grids, KPI rows — always 18 px apart (the .grid gap), whichever follows which; inside a
   grid the gap does it. */
:is(.card, .grid, .kpis, .sec-grid) + :is(.card, .grid, .kpis, .sec-grid) { margin-top: 12px; }
:is(.grid, .kpis, .sec-grid) > :is(.card, .grid, .kpis, .sec-grid) { margin-top: 0; }
.card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
.card h2 .count { padding: 0 8px; border-radius: 999px; background: var(--soft); color: var(--ink2); font-size: 11.5px; font-weight: 700; line-height: 21px; }
.card h2 .more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 550; color: var(--ink3); text-decoration: none; }
.card h2 .more:hover { color: var(--accent); }
.card h2 > .btn:last-child { margin-left: auto; font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.card h2 .note { font-weight: 500; font-size: 13px; color: var(--ink3); }
.card h2 .tabs { margin-left: auto; box-shadow: none; padding: 2px; border-radius: 10px; }
.card h2 .tabs a { padding: 2px 8px; font-size: 12px; border-radius: 5px; }
.card.danger { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.grid { display: grid; gap: 12px; margin-bottom: 12px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.g2e { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g2, .g3, .g2e { grid-template-columns: 1fr; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
/* Six KPIs: one row of six on wide screens, three by two below, two by three on a phone (never 5 + 1). */
.kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid > .col { min-width: 0; }
table.compact th, table.compact td { padding: 10px 8px; }
.stat { display: flex; flex-direction: column; }
.stat .label { display: flex; align-items: center; gap: 6px; color: var(--ink3); font-size: 12px; font-weight: 500; }
.stat .value { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 3px 0 1px; line-height: 1.1; }
.stat .sub, .stat .hint { color: var(--ink3); font-size: 11.5px; }
.stat svg.spark { display: block; width: 100%; height: 24px; margin-top: 8px; }
.delta { display: inline-flex; align-items: center; gap: 3px; width: fit-content; padding: 1px 7px; border-radius: 7px; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; background: var(--soft); color: var(--ink3); }
.delta.good { background: var(--good-soft); color: var(--good); }
.delta.bad { background: var(--bad-soft); color: var(--bad); }
a.stat, a.card { text-decoration: none; transition: border-color .12s; }
a.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.split-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.split-stats > div { padding: 2px 0 2px 14px; border-left: 3px solid var(--c, var(--line)); }
.split-stats b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.split-stats span { color: var(--ink3); font-size: 13px; }
.btn, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 500; font-size: 13px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none; box-shadow: none; transition: border-color .12s, filter .12s, background .12s; white-space: nowrap; }
.btn:hover, button:hover { border-color: #cfd4df; }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn.primary:hover, button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.sm, button.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn.danger, button.danger { color: var(--bad); }
.btn.danger.solid, button.danger.solid { background: var(--bad); color: var(--on-bad); border-color: transparent; }
.btn.ghost, button.ghost { background: none; box-shadow: none; border-color: transparent; color: var(--ink3); }
form.inline { display: inline; margin: 0; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 7px; font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--soft); color: var(--ink2); }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge svg { width: 13px; height: 13px; }
.badge.kind { min-width: 92px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.chip b { font-weight: 700; }
.chip .x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; }
.chip:hover .x { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.muted { color: var(--ink3); font-size: 13px; }
.dim { color: var(--ink3); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); font-weight: 600; padding-top: 2px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap { white-space: nowrap; }
td a.title { font-weight: 600; text-decoration: none; }
td a.title:hover { color: var(--accent); }
tr.done a.title { color: var(--ink3); font-weight: 550; }
.list { display: flex; flex-direction: column; margin: 0 -10px; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 10px; border-top: 1px solid var(--line2); border-radius: 10px; text-decoration: none; transition: background .1s; }
.item:first-child { border-top: 0; }
.item:hover { background: var(--soft); }
.item:hover .t { color: var(--accent); }
.item .t { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .when { color: var(--ink3); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars-list { display: flex; flex-direction: column; gap: 3px; }
.bars-head { display: flex; justify-content: space-between; gap: 12px; padding: 0 10px 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); font-weight: 650; }
.bars-head span:last-child { display: flex; gap: 12px; }
.bar-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 28px; padding: 3px 8px; border-radius: 5px; text-decoration: none; font-size: 13px; isolation: isolate; }
.bar-row .bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: color-mix(in srgb, var(--accent) 13%, transparent); z-index: -1; transition: background .12s; }
a.bar-row:hover .bar-fill { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.bar-row .bar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.bar-row .bar-extra { color: var(--ink3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.bar-row .bar-value { min-width: 48px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.bars .b { display: grid; grid-template-columns: 96px 1fr 40px; gap: 12px; align-items: center; padding: 7px 0; font-size: 13.5px; font-weight: 550; }
.bars .track, .bars .fill { display: block; }
.bars .track { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.bars .fill { height: 100%; border-radius: 99px; background: var(--accent); }
.bars .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink2); }
.progress { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; margin: 4px 0 18px; }
.progress span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.empty { padding: 30px 8px; text-align: center; color: var(--ink3); }
.empty .btn { margin-top: 14px; }
.tabs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); width: fit-content; max-width: 100%; overflow-x: auto; box-shadow: var(--shadow); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 4px 10px; border-radius: 6px; text-decoration: none; color: var(--ink3); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.tabs a .n { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: .75; }
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.search { display: flex; gap: 8px; }
.field { display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink3); box-shadow: 0 1px 2px rgba(15,21,37,.04); }
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field input { border: 0; outline: 0; background: none; padding: 5px 0; min-width: 200px; font: inherit; color: var(--ink); }
.rangebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.range { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); color: var(--ink3); font-size: 13px; white-space: nowrap; margin: 0; }
.range input[type=date] { font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; padding: 4px 2px; }
.range input[type=date]:focus { outline: 2px solid var(--accent); border-radius: 6px; }
.range button { padding: 5px 12px; font-size: 13px; border-radius: 9px; }
.form { display: grid; gap: 16px; max-width: 640px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* A side sheet (sheet()): a modal <dialog> on the right edge; without scripts the opener's #id link shows it (:target). */
dialog.sheet { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); height: 100%; max-width: 100vw; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); }
dialog.sheet[open], html:not(.sheet-js) dialog.sheet:target { display: flex; flex-direction: column; z-index: 100; }
dialog.sheet[open] { animation: sheet-in .16s ease-out; }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }
dialog.sheet::backdrop { background: rgba(10,12,18,.32); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.sheet-head .sheet-close { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; box-shadow: none; color: var(--ink3); }
.sheet-head .sheet-close:hover { background: var(--soft); color: var(--ink); }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; }
.sheet .form-grid { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-field > span { font-size: 12.5px; font-weight: 500; color: var(--ink2); }
.form-field small { color: var(--ink3); font-size: 12.5px; }
.form-field.check-field { flex-direction: row; align-items: center; gap: 9px; }
input:not([type]), input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=date], textarea, select {
  width: 100%; font: inherit; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(15,21,37,.04); }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
textarea.mono { font: 13px/1.6 var(--mono); }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Keyboard focus: a 2 px accent ring on everything that takes focus (fields get border + 1 px ring = 2 px). */
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The box is the .field around it: the input inside has no border or ring of its own. */
.field input, .field input:focus { border: 0; outline: 0; box-shadow: none; background: none; border-radius: 0; padding: 5px 0; }
.form-field.invalid input, .form-field.invalid textarea { border-color: var(--bad); }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; background: var(--accent-soft); color: var(--ink); font-size: 14px; }
.notice svg { color: var(--accent); margin-top: 2px; }
.notice.good { background: var(--good-soft); } .notice.good svg { color: var(--good); }
.notice.bad { background: var(--bad-soft); } .notice.bad svg { color: var(--bad); }
.notice.warn { background: var(--warn-soft); } .notice.warn svg { color: var(--warn); }
.secret { display: block; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); font: 600 14px/1.5 var(--mono); word-break: break-all; user-select: all; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pager .row { gap: 8px; }
.pager .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.stars { color: var(--amber); letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: var(--line); }
h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); font-weight: 650; margin: 24px 0 10px; }
.card > h3:first-child { margin-top: 0; }
pre { position: relative; white-space: pre-wrap; word-break: break-word; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line2); font: 13px/1.6 var(--mono); }
pre code { padding: 0; border: 0; background: none; font: inherit; word-break: normal; }
pre.snippet { white-space: pre; overflow-x: auto; padding-right: 74px; }
pre .copy, .pre-wrap > .copy { position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.pre-wrap { position: relative; }
/* The Copy button shows while the pointer is over the code (or it has focus); touch screens always show it. */
.pre-wrap > .copy { opacity: 0; transition: opacity .12s; }
.pre-wrap:hover > .copy, .pre-wrap:focus-within > .copy { opacity: 1; }
@media (hover: none) { .pre-wrap > .copy { opacity: 1; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.snippets > h3 { margin-top: 28px; }
.snippets > p { margin: 0 0 10px; color: var(--ink2); }
.snippets > pre + p { margin-top: 12px; }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0; font-size: 13.5px; }
dt { color: var(--ink3); font-weight: 550; }
dd { margin: 0; word-break: break-word; }
img.shot { max-width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; }
.error { color: var(--bad); margin: 6px 0 0; font-size: 13.5px; }
/* Signing in (and joining): what LogSure is, on a deep merlot panel, beside the form; on a phone a slim header. The
   panel keeps its colour in dark mode too, so the white on it always reads. */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; background: var(--bg); }
.login-side { display: flex; align-items: center; justify-content: center; padding: 48px; background: #7a1226; color: #fff; }
.login-side-in { width: 100%; max-width: 380px; }
.login-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.login-mark img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 8px 24px -8px rgb(0 0 0 / .45); }
.login-mark b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.login-pitch { margin: 0 0 26px; font-size: 19px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; color: rgb(255 255 255 / .94); }
.login-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.login-points li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgb(255 255 255 / .86); }
.login-points svg { flex: none; padding: 7px; width: 32px; height: 32px; border-radius: 9px; background: rgb(255 255 255 / .12); color: #fff; }
.login { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.login-in { width: 100%; max-width: 380px; }
.login h1, .login h2 { font-size: 26px; font-weight: 650; margin: 0 0 6px; letter-spacing: -.02em; }
.login p.muted { margin: 0 0 26px; font-size: 14.5px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .form-field > span { font-size: 13px; font-weight: 600; color: var(--ink2); }
.login input[type=text], .login input[type=password], .login input:not([type]) { width: 100%; height: 42px; font-size: 15px; }
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 44px; }
.pw-eye { position: absolute; top: 50%; right: 4px; translate: 0 -50%; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink3); box-shadow: none; }
.pw-eye:hover { color: var(--ink); background: var(--soft); }
.pw-eye[aria-pressed="true"] { color: var(--accent); }
.login .check { margin: 0; }
.login .error { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-size: 13.5px; }
.login button.primary { width: 100%; height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; }
.login .form { gap: 14px; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink3); font-size: 12.5px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-passkey { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 15px; font-weight: 600; }
.login-passkey svg { color: var(--accent); }
.login-passkey:hover:not(:disabled) { border-color: var(--accent); }
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-side { justify-content: flex-start; padding: 18px 20px; }
  .login-mark { margin: 0; gap: 10px; }
  .login-mark img { width: 36px; height: 36px; border-radius: 9px; }
  .login-mark b { font-size: 19px; }
  .login-pitch, .login-points { display: none; }
  .login { align-items: flex-start; padding: 32px 20px 40px; }
}
.check { display: flex; align-items: center; gap: 9px; margin: 14px 0 16px; color: var(--ink2); font-size: 13.5px; }
.lc { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 26px; padding-top: 6px; box-sizing: border-box; }
.lc svg { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; grid-column: 2; grid-row: 1; }
.lc-y, .lc-x { position: relative; color: var(--ink3); font-size: 11px; font-variant-numeric: tabular-nums; }
.lc-y { grid-column: 1; grid-row: 1; }
.lc-y span { position: absolute; right: 10px; transform: translateY(-50%); }
.lc-x { grid-column: 2; grid-row: 2; }
.lc-x span { position: absolute; bottom: 4px; transform: translateX(-50%); white-space: nowrap; }
.lc-x span.start { transform: none; }
.lc-x span.end { transform: translateX(-100%); }
.chart .gl { stroke: var(--line); stroke-dasharray: 4 5; }
.chart .hit { fill: transparent; }
.chart .hit:hover { fill: var(--accent); fill-opacity: .07; }
.chart.wide svg { height: 240px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink2); font-weight: 550; margin: -6px 0 10px; }
.legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.map { display: block; width: 100%; height: auto; }
.map path { fill: var(--map); stroke: var(--panel); stroke-width: .7; stroke-linejoin: round; transition: fill-opacity .12s; }
.map path.on { fill: var(--accent); }
.map path:hover { stroke: var(--ink); stroke-width: 1.2; }
.scale { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink3); font-size: 12px; }
.scale .sw { display: flex; gap: 2px; width: 120px; height: 8px; }
.scale .sw i { flex: 1; border-radius: 2px; background: var(--accent); }
.bar { display: inline-block; height: 8px; border-radius: 99px; background: var(--accent); vertical-align: middle; }
@media (max-width: 780px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; gap: 8px; padding: 10px 12px 10px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .side-head form { display: block; } .side-head button { width: auto; min-height: 40px; padding: 8px 12px; } .side-head button span { display: none; }
  .brand { padding: 0 4px; font-size: 17px; flex-direction: row; align-items: center; gap: 8px; }
  .brand .logo { width: 26px; height: 26px; } .brand span { display: none; }
  /* Every section stays in view: the links wrap onto a second row instead of scrolling out of sight. */
  .nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .nav a { flex: none; min-height: 40px; padding: 8px 12px; gap: 8px; font-size: 14px; background: var(--soft); }
  .nav a svg { display: none; }
  .nav .count { font-size: 12px; }
  .nav a[aria-current="page"]::before { display: none; }
  .nav-group, .side-sep, .nav a.add { display: none; }
  .side-foot { margin: 0; padding: 0; flex: 1 1 100%; } .profile .menu { left: 0; right: auto; }
  .main { padding: 18px 16px 44px; }
  .topbar { position: static; margin: -18px -16px 18px; padding: 12px 16px; min-height: 0; gap: 10px; }
  .topbar .lead { width: 100%; }
  .topbar h1 { font-size: 19px; margin: 0; }
  .topbar .tools { justify-content: flex-start; flex: 1 1 100%; }
  .topbar .grow { display: none; }
  .topbar .field, .topbar .search { width: 100%; } .topbar .field input { min-width: 0; width: 100%; }
  .rangebar { flex-wrap: nowrap; gap: 8px; max-width: 100%; } .rangebar .tabs a { padding: 9px 9px; }
  .range { flex-wrap: wrap; white-space: normal; } .range input[type=date] { width: 124px; }
  .hero { padding: 24px 20px; } .hero h1, .hero h2 { font-size: 24px; }
  .g4 { grid-template-columns: 1fr 1fr; } .kpis, .kpis.six { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 18px 16px; border-radius: 14px; } .stat .value { font-size: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .item { grid-template-columns: auto minmax(0, 1fr); } .item .when { grid-column: 2; }
  dl { grid-template-columns: 1fr; gap: 2px 0; } dd { margin-bottom: 8px; }
  th, td { padding: 11px 8px; }
  th, h3, .bars-head { font-size: 12.5px; } .lc-y, .lc-x { font-size: 12px; }
  /* Tabs wrap rather than hide items past the edge; tap targets are at least 40 px tall. */
  .tabs { flex-wrap: wrap; }
  .tabs a, .card h2 .tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; }
  .btn.sm, button.sm, .bar-row, .pager .btn { min-height: 40px; }
  .card h2 .more, a.more { min-height: 40px; padding: 8px 0; }
  td a.title { display: inline-block; padding: 8px 0; }
  .check, .form-field.check-field { min-height: 40px; }
  pre .copy, .pre-wrap > .copy { min-height: 36px; }
  /* iOS zooms into any field under 16 px. */
  :root body :is(input, select, textarea) { font-size: 16px; }
}

ls-range { position: relative; display: inline-flex; }
ls-range.ready > form { display: none; }
.cr-trigger { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow); cursor: pointer; white-space: nowrap; }
.cr-trigger svg { color: var(--accent); }
.cr-trigger .arrow { color: var(--ink3); font-weight: 500; }
.cr-trigger .short { display: none; }
.cr-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cr-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; max-width: calc(100vw - 32px); display: grid; grid-template-columns: 168px 300px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); overflow: hidden; }
.cr-panel[hidden] { display: none; }
.cr-quick { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--line); background: var(--soft); }
.cr-quick button { justify-content: flex-start; padding: 7px 10px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--ink2); font-size: 13px; font-weight: 550; }
.cr-quick button:hover { background: var(--panel); color: var(--ink); }
.cr-quick button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.cr-main { padding: 14px 16px 12px; }
.cr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cr-head b { font-size: 14px; }
.cr-head button { width: 30px; height: 30px; padding: 0; border-radius: 8px; box-shadow: none; }
.cr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; }
.cr-grid .dow { font-size: 11px; font-weight: 650; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0 6px; }
.cr-grid button { height: 34px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; }
.cr-grid button:hover:not(:disabled) span { background: var(--soft); }
.cr-grid button span { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto; border-radius: 9px; }
.cr-grid button.in { background: var(--accent-soft); }
.cr-grid button.start { background: linear-gradient(90deg, transparent 50%, var(--accent-soft) 50%); }
.cr-grid button.end { background: linear-gradient(90deg, var(--accent-soft) 50%, transparent 50%); }
.cr-grid button.start.end { background: none; }
.cr-grid button.start span, .cr-grid button.end span { background: var(--accent); color: var(--on-accent, #fff); }
.cr-grid button.today span { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cr-grid button:disabled { color: var(--ink3); opacity: .4; cursor: default; }
.cr-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cr-time { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 650; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; }
.cr-time .hm { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; width: fit-content; }
.cr-time .hm:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cr-time input { width: 34px; padding: 5px 0; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; outline: 0; }
.cr-time input:focus { background: var(--accent-soft); color: var(--accent); }
.cr-time .colon { color: var(--ink3); font-weight: 700; }
.cr-time .day { font-size: 12px; font-weight: 550; color: var(--ink2); text-transform: none; letter-spacing: 0; }
.cr-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cr-foot .sum { margin-right: auto; font-size: 12px; color: var(--ink3); }
.cr-foot button { padding: 7px 14px; font-size: 13px; }
@media (max-width: 780px) {
  /* A sheet over the page: it fits the screen and scrolls inside, so Apply is always reachable. */
  .cr-panel { position: fixed; left: 12px; right: 12px; top: 12px; max-width: none; max-height: calc(100dvh - 24px); overflow: auto; grid-template-columns: 1fr; }
  .cr-quick { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .cr-quick button { min-height: 40px; } .cr-main { padding: 12px; }
  .cr-head button { width: 40px; height: 40px; } .cr-grid button { height: 40px; } .cr-grid .dow { font-size: 12px; }
  .cr-foot { position: sticky; bottom: -12px; background: var(--panel); padding: 10px 0; } .cr-foot button { min-height: 40px; }
  .cr-trigger .long { display: none; } .cr-trigger .short { display: inline; } .cr-trigger { padding: 9px 12px; }
}


.map-zoom { position: relative; }
.map-zoom svg.map { touch-action: none; cursor: grab; outline: none; }
.map-zoom svg.map.panning { cursor: grabbing; }
/* Country outlines stay hairlines at any zoom. */
.map-zoom svg.map path { vector-effect: non-scaling-stroke; }
.map-zoom svg.map:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); border-radius: 8px; }
.map-zoom .mz-tools { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.map-zoom .mz-tools button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink2); font-size: 16px; font-weight: 600; line-height: 1; }
.map-zoom .mz-tools button + button { border-top: 1px solid var(--line); }
.map-zoom .mz-tools button:hover { background: var(--soft); color: var(--ink); }
.map-zoom .mz-tools button:disabled { color: var(--ink3); opacity: .5; cursor: default; }

/* The notification bell (top bar, right): a plain count badge, a <details> dropdown like the app switcher. */
.bell { position: relative; flex: none; }
.bell > summary { list-style: none; position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink2); cursor: pointer; }
.bell > summary::-webkit-details-marker { display: none; }
.bell > summary:hover { color: var(--ink); border-color: #cfd4df; }
.bell[open] > summary { border-color: var(--accent); }
.bell .bell-n { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.bell .bell-n[hidden] { display: none; }
.bell .menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 360px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); }
.bell .menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; font-weight: 650; }
.bell .menu-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 8px 4px; border-top: 1px solid var(--line2); margin-top: 4px; font-size: 13px; }
.nt-list { list-style: none; margin: 0; padding: 0; }
a.nt-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13.5px; }
a.nt-item:hover { background: var(--soft); }
a.nt-item .what { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.nt-item .sub { grid-column: 1; color: var(--ink3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.nt-item .when { grid-column: 2; grid-row: 1; color: var(--ink3); font-size: 12px; white-space: nowrap; }
a.nt-item.old { color: var(--ink3); }
a.nt-item.old .what { font-weight: 500; }
.nt-empty { padding: 14px 10px; color: var(--ink3); font-size: 13.5px; }
@media (max-width: 780px) { .bell > summary { width: 36px; height: 36px; } .topbar .tools .tabs, .topbar .tools .range, .topbar .cr-trigger { height: 36px; } }
/* The profile menu at the foot of the sidebar. */
.profile { position: relative; }
.profile > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 6px; cursor: pointer; color: var(--ink2); font-size: 13px; font-weight: 500; }
.profile > summary::-webkit-details-marker { display: none; }
.profile > summary:hover, .profile[open] > summary { background: var(--soft); color: var(--ink); }
.profile .avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 600; flex: none; }
.profile .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile .caret { margin-left: auto; }
.profile .menu { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; min-width: 200px; z-index: 40; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); }
.profile .menu .who { display: flex; flex-direction: column; padding: 6px 8px 8px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; }
.profile .menu .who b { font-size: 13px; font-weight: 600; } .profile .menu .who span { font-size: 11.5px; color: var(--ink3); }
.profile .menu a, .profile .menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 5px 8px; border: 0; border-radius: 5px; background: none; box-shadow: none; color: var(--ink2); text-decoration: none; font: inherit; font-size: 13px; font-weight: 500; justify-content: flex-start; }
.profile .menu a:hover, .profile .menu button:hover { background: var(--soft); color: var(--ink); }
.profile .menu .sep { height: 1px; margin: 4px; background: var(--line2); }
.profile .menu form { margin: 0; }
/* The sidebar's right edge: drag to resize, click (or Enter) to collapse to an icon rail and back (desktop only;
   both remembered per browser). */
.side-resize { position: fixed; z-index: 60; top: 0; bottom: 0; left: calc(var(--side-w, 224px) - 4px); width: 8px; cursor: col-resize; touch-action: none; }
.side-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .12s .08s; }
.side-resize:hover::after, .side-resize:focus-visible::after, .side-resizing .side-resize::after { background: var(--accent); }
.side-resize:focus-visible { outline: none; }
.side-resizing, .side-resizing * { cursor: col-resize !important; user-select: none; }
/* The rail is for wide screens only: on a phone the sidebar is the top bar, collapsed or not. */
@media (min-width: 781px) {
.side-collapsed .side-resize { left: 52px; cursor: e-resize; }
.side-collapsed .app { grid-template-columns: 56px minmax(0, 1fr); }
.side-collapsed .side { padding-left: 8px; padding-right: 8px; align-items: stretch; }
.side-collapsed .side-head { flex-direction: column; gap: 8px; }
.side-collapsed .brand { padding: 0 0 6px; justify-content: center; } .side-collapsed .brand b { display: none; }
.side-collapsed .nav a, .side-collapsed .app-switch > summary, .side-collapsed .profile > summary { justify-content: center; padding-left: 0; padding-right: 0; }
.side-collapsed .nav .label, .side-collapsed .profile .label, .side-collapsed .caret, .side-collapsed .sw-name { display: none; }
.side-collapsed .nav .count { position: absolute; top: 2px; right: 6px; min-width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; }
.side-collapsed .nav a[aria-current="page"]::before { left: -8px; }
.side-collapsed .side-sep { margin: 8px 4px; }
/* Collapsed: the menus open beside the rail at full width (fixed, so the rail's scroll box cannot clip them), with
   ordinary left-aligned rows rather than the rail's centred icons. */
html.side-collapsed .side .app-switch .menu { position: fixed; left: 62px; right: auto; top: auto; margin-top: -34px; min-width: 240px; max-height: 70vh; }
html.side-collapsed .side .profile .menu { position: fixed; left: 62px; right: auto; bottom: 12px; top: auto; min-width: 220px; }
html.side-collapsed .side .app-switch .menu a, html.side-collapsed .side .profile .menu a, html.side-collapsed .side .profile .menu button { justify-content: flex-start; padding: 5px 8px; }
}
@media (max-width: 780px) { .side-resize { display: none !important; } }
/* The top bar's controls — quick ranges, the date picker, the bell — share one height and one radius. */
.topbar .tools .tabs { height: 30px; align-items: center; border-radius: 8px; box-sizing: border-box; }
.topbar .tools .tabs a { padding: 3px 9px; line-height: 20px; }
.topbar .tools .range { height: 30px; border-radius: 8px; box-sizing: border-box; }
/* The app switcher in the sidebar: full width, its menu under it. */
.side .app-switch { margin: 0 0 4px; }
.side .app-switch > summary { display: flex; width: 100%; padding: 5px 8px; border-color: transparent; border-radius: 6px; background: none; font-size: 13px; font-weight: 600; }
.side .app-switch > summary:hover { border-color: var(--line); background: var(--soft); }
.side .app-switch[open] > summary { border-color: var(--line); }
.side .app-switch .caret { margin-left: auto; }
.side .app-switch .menu { left: 0; right: 0; min-width: 0; }
/* Phones: the app switcher gets its own row and its menu the full width (never clipped by the nav row). */
@media (max-width: 780px) { .nav { flex-wrap: wrap; overflow: visible; } .side { overflow: visible; } .side .app-switch { flex: 1 1 100%; margin: 0; } .side .app-switch .menu { left: 0; right: 0; max-height: 70vh; } .side .app-switch .menu a { background: none; } }
/* Phones, compact: the profile photo at the right of the brand row; the sections as one row of small links
   (the current one filled); in the top bar the bell beside the title, the range tabs and dates on one row. */
@media (max-width: 780px) {
  .app { grid-template-rows: auto 1fr; }
  .side { position: relative; gap: 8px; padding: 10px 16px; }
  .side-foot { position: absolute; top: 6px; right: 16px; flex: none; }
  .profile > summary { padding: 2px; } .profile > summary .label, .profile > summary .caret { display: none; }
  .profile .menu { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); }
  .nav { gap: 2px; row-gap: 6px; }
  .nav { margin: 0 -6px; }
  .nav a { min-height: 32px; padding: 5px 5px; gap: 4px; font-size: 13px; background: none; border-radius: 6px; }
  .nav .app-switch { margin: 0 6px; }
  .nav a[aria-current="page"] { background: var(--soft); color: var(--ink); }
  .topbar { position: relative; padding: 10px 16px; gap: 10px; }
  .topbar .lead { padding-right: 46px; min-height: 36px; }
  .topbar .tools > .bell { position: absolute; top: 10px; right: 16px; }
  .topbar .tools { justify-content: flex-start; gap: 8px; }
  .topbar .tools:has(ls-range) { flex-wrap: nowrap; }
  .topbar .tools .tabs { flex: none; }
  .topbar .tools .tabs a { min-height: 0; padding: 0 9px; }
  .topbar .tools ls-range { flex: 1 1 auto; min-width: 0; }
  .topbar .cr-trigger { width: 100%; min-width: 0; justify-content: flex-start; }
  .topbar .cr-trigger .short { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}
/* Charts (ls-chart, uPlot), sparklines and the world map. */
.lc { position: relative; }
.lc[hidden], .legend[hidden] { display: none; }
.lc-tip { position: absolute; z-index: 5; pointer-events: none; padding: 8px 11px; border-radius: 10px; background: var(--ink); color: var(--panel); font-size: 12.5px; line-height: 1.5; white-space: nowrap; box-shadow: var(--shadow); }
.lc-tip[hidden] { display: none; }
.lc-tip b { display: block; font-weight: 650; margin-bottom: 2px; }
.lc-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.lc-tip i.dash { width: 10px; height: 0; border-radius: 0; border-top: 2px dashed; vertical-align: 3px; }
.lc-tip.map-tip { position: fixed; z-index: 40; }
.lc-guide { position: absolute; top: 6px; bottom: 26px; width: 1px; background: var(--ink3); opacity: .45; pointer-events: none; }
.lc-guide[hidden] { display: none; }
.uc { position: relative; width: 100%; min-width: 0; }
.uc .uplot { font-family: inherit; width: 100%; }
.uc .u-over { cursor: crosshair; }
.uc .u-select { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.uc .u-hz .u-cursor-x { border-right: 1px dashed var(--ink3); }
.uc .u-hz .u-cursor-y { border-bottom: 1px dashed var(--line); }
.uc .u-legend { margin: 8px 0 0; text-align: left; font-size: 13px; color: var(--ink2); }
.uc .u-legend table { width: auto; }
.uc .u-legend th, .uc .u-legend td { padding: 2px 4px; border: 0; font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink2); font-weight: 550; }
.uc .u-legend .u-series th:hover { color: var(--ink); }
.uc .u-legend tr:hover { background: none; }
.uc .u-hz .u-cursor-y { opacity: .8; }
.uc .u-legend .u-marker { width: 12px; height: 3px; margin-right: 7px; border-radius: 0; }
.uc .u-legend .u-series:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.uc .hint { margin: 4px 0 0; color: var(--ink3); font-size: 12px; }
.map a path.on { cursor: pointer; }
/* Analytics pages: the overview and an app's dashboard. */
.event-name { font-size: 18px; font-weight: 650; letter-spacing: -.015em; margin: 28px 0 14px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.live.off::before { background: var(--ink3); }
/* Name and "N now" stay on one line: a long name ends in an ellipsis (its whole text in the title). */
.app-card h2 { flex-wrap: nowrap; }
.app-card h2 a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.app-card h2 a .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-card h2 .live { flex: none; white-space: nowrap; }
.app-card h2 a:hover { color: var(--accent); }
.app-card h2 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.app-card h2 .app-icon { width: 18px; height: 18px; border-radius: 5px; object-fit: contain; flex: none; }
.app-card .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-card .pair .label { color: var(--ink3); font-size: 12.5px; font-weight: 600; }
.app-card .pair .value { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 2px 0; }
.view-switch { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.app-table table { width: 100%; }
.app-table a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
.app-table a.sort.on { color: var(--ink); }
.app-table .app-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; min-width: 0; }
.app-table .app-link .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.app-table .app-link:hover { color: var(--accent); }
.app-table .app-icon { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; flex: none; }
.app-table .spark-cell { width: 140px; }
.app-table .spark-cell svg.spark { width: 120px; height: 28px; }
@media (max-width: 780px) { .app-table .spark-cell { display: none; } }
.ev-pick { position: relative; margin-left: auto; }
.ev-pick > summary { list-style: none; cursor: pointer; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--ink2); }
.ev-pick > summary::-webkit-details-marker { display: none; }
.ev-pick .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); }
.ev-pick .menu > a, .ev-pick .menu > span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; font-size: 12.5px; line-height: 18px; text-decoration: none; color: var(--ink2); }
.ev-pick .menu > span.muted { color: var(--ink3); cursor: default; }
.ev-pick .menu .tick { flex: none; width: 14px; text-align: center; color: var(--accent); }
.ev-pick .menu > .clear { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 5px 5px; padding-left: 28px; }
.ev-pick .menu a:hover { background: var(--soft); color: var(--ink); }
.app-card .foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line2); }
.quiet { display: flex; align-items: center; gap: 8px; color: var(--ink3); font-size: 13px; margin: 6px 2px 0; }
.rating-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rating-head b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
tr.on td { background: var(--accent-soft); }
/* The inbox and a request. */
.app-tag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 550; text-decoration: none; }
/* An app's mark in front of its name: its icon, or its colour dot. */
:is(.app-tag, .wl-app) .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--accent)); flex: none; }
:is(.app-tag, .wl-app) .tag-icon { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; flex: none; }
.who { color: var(--ink3); font-size: 12.5px; margin-top: 2px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.who svg { vertical-align: -2px; }
td .title { display: block; max-width: 56ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0; }
.ticket-meta { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; color: var(--ink3); font-size: 13px; }
.timeline { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.timeline li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.timeline .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink3); }
.timeline li.note .ic { background: var(--accent-soft); color: var(--accent); }
.timeline li.system .ic { background: var(--warn-soft); color: var(--warn); }
.timeline .when { color: var(--ink3); font-size: 12.5px; }
.timeline .txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.timeline li.status .txt { color: var(--ink2); }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 12px; }
.shots figure { margin: 0; }
.shots figcaption { color: var(--ink3); font-size: 12.5px; margin-top: 6px; overflow-wrap: anywhere; }
.status-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.filters select { width: auto; min-width: 130px; padding: 7px 10px; }
.props { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; }
.props dt { font-family: var(--mono); }
.props dd { font-family: var(--mono); }
/* A page address on one line: host and path, cut with an ellipsis (the whole URL in its title), never mid-word. */
a.page-url { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.inbox-table td:first-child { width: 1%; }
.who .when-inline { display: none; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.inbox-table td.col-act { width: 1%; text-align: right; }
@media (max-width: 780px) {
  td .title { max-width: none; white-space: normal; } .filters select { min-width: 0; flex: 1; }
  /* On a phone a row is the kind, the request and its meta line (who, rating, when); other columns go. */
  .inbox-table .col-app, .inbox-table .col-status, .inbox-table .col-when, .inbox-table .col-act { display: none; }
  .who .when-inline { display: inline; }
  .badge.kind { min-width: 0; }
}
/* The waitlist. */
.wl-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.wl-filters select { width: auto; min-width: 150px; }
.wl-filters .field { flex: 1; min-width: 200px; }
.wl-filters .field input { min-width: 0; width: 100%; }
.wl-table td { white-space: nowrap; }
.wl-table .cut { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.wl-actions { display: flex; gap: 6px; justify-content: flex-end; }
.wl-table input.wl-unsub { width: 100%; min-width: 260px; margin-top: 6px; padding: 4px 8px; font: 12px/1.4 var(--mono); color: var(--ink2); }
.wl-link { margin-top: 2px; font-size: 12.5px; color: var(--ink3); }
.wl-link > summary { cursor: pointer; width: fit-content; }
.wl-name { display: block; color: var(--ink3); font-size: 12.5px; }
.wl-table .wl-actions { justify-content: flex-start; flex-wrap: wrap; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.wl-actions .btn.ghost { padding: 6px 8px; }
.wl-app { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 780px) {
  .wl-filters select, .wl-filters .field { width: 100%; flex: auto; }
  /* On a phone each signup is a small card: email and name, list and status, the buttons, the date. */
  .wl-table, .wl-table tbody, .wl-table tr, .wl-table td { display: block; }
  .wl-table thead, .wl-table .wl-extra { display: none; }
  .wl-table tr { padding: 12px 0; border-bottom: 1px solid var(--line2); }
  .wl-table td { border: 0; padding: 3px 0; white-space: normal; }
  .wl-table td.wl-inline { display: inline-block; margin-right: 10px; }
  .wl-table input.wl-unsub { min-width: 0; }
}
/* The web console's own elements: the custom elements in the page, and what used to be inline styles. */
ls-chart, ls-map { display: block; }
ls-bell { display: contents; }
ls-sheet { display: contents; }
ls-code { display: block; }
.app-card h2 .live.push { margin-left: auto; }
.error-text { font-size: 15px; color: var(--ink2); margin: 10px 0 0; }
.empty.roomy { padding: 24px 8px; }
.row.centered { justify-content: center; }
.lc-tip .tip-hint { opacity: .7; }
html.busy, html.busy * { cursor: progress; }
.login .error[hidden] { display: none; }
.chip.plain { background: none; color: var(--ink3); }
.card .muted.after { margin: 10px 0 0; }
.foot-note { margin-top: 14px; }
.grid.spaced { margin-top: 18px; }
.seg-tabs { margin: 0 0 14px; }
@media (max-width: 780px) { .topbar .tools > ls-bell > .bell { position: absolute; top: 10px; right: 16px; } }
.muted.flush { margin-top: 0; }
.chips.inbox-chips { margin: 0 0 16px; }
.chips .clear-all { align-self: center; font-size: 13px; }
.muted.flush-all { margin: 0; }
.fields-list dd { overflow-wrap: anywhere; white-space: pre-wrap; }
.empty.tall { padding: 28px 8px 18px; }
.empty .empty-title { font-size: 16px; color: var(--ink); font-weight: 650; margin: 12px 0 4px; }
.empty .empty-text { max-width: 560px; margin: 0 auto 16px; }
.empty .empty-code { text-align: left; max-width: 560px; margin: 0 auto; }
.muted.centered-text { text-align: center; margin: 8px 0 0; }
/* The two-factor code (ls-code): six digit boxes. */
.otp-boxes { display: flex; gap: 8px; margin: 4px 0 6px; }
.otp-boxes input { width: 44px; height: 52px; padding: 0; text-align: center; font: 600 22px/1 var(--mono); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); caret-color: var(--accent); }
.otp-boxes input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.otp-boxes input:nth-child(3) { margin-right: 10px; }
.otp-boxes.bad input { border-color: var(--bad); }
.otp .otp-switch { display: inline-block; margin: 2px 0 8px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.otp .otp-switch:hover { text-decoration: underline; }
@media (max-width: 380px) { .otp-boxes { gap: 6px; } .otp-boxes input { width: 40px; height: 48px; font-size: 20px; } }
.login .otp-help { margin: 14px 0 0; }
/* Settings › Profile and Devices. */
.profile-row { display: flex; align-items: center; gap: 14px; }
.profile-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.profile-photo.initial { display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 26px; font-weight: 600; }
.profile-photo[hidden] { display: none; }
.profile-pick { display: flex; flex-direction: column; gap: 6px; }
.profile-pick .btn { width: fit-content; }
.qr { display: inline-block; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); line-height: 0; }
.qr svg { display: block; width: 220px; height: 220px; max-width: 100%; }
.token { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--soft); font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; }
.devices { width: 100%; border-collapse: collapse; font-size: 13px; }
.devices td, .devices th { padding: 7px 8px; border-bottom: 1px solid var(--line2); text-align: left; }
.devices th { color: var(--ink3); font-weight: 500; font-size: 12px; }
.devices td:last-child { text-align: right; }
/* Privacy. */
.narrow { max-width: 980px; }
.muted.lead-in { margin-top: -6px; }
.search.wrap { flex-wrap: wrap; }
.search .grow-field { flex: 1; min-width: 0; }
.search .grow-field input { min-width: 0; width: 100%; }
/* Settings › Apps: the list, an app's status tiles, routes, the advanced fold. */
.tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.tile { display: inline-flex; flex-direction: column; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink3); font-size: 12.5px; }
.tile b { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.route-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.advanced > summary { cursor: pointer; font-weight: 600; color: var(--ink2); }
.advanced .advanced-body { margin-top: 14px; }
.apps-table .id-under { display: none; }
.apps-table a.app-title { display: inline-flex; align-items: center; gap: 8px; }
.apps-table .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); flex: none; }
.apps-table .app-icon { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; flex: none; }
@media (max-width: 780px) { .apps-table .col-id, .apps-table .col-domains { display: none; } .apps-table .id-under { display: block; font-size: 12.5px; } }
.row.spaced-row { margin-top: 16px; }
.muted.to-line { margin: 10px 0 6px; }
.gap { height: 14px; }
.key-card .key-note { font-size: 14px; margin-top: 0; }
.card h3.first { margin-top: 0; }
.muted.lead-in-tight { font-size: 13.5px; margin-top: 0; }
/* The segment editor. */
.seg-rule { display: grid; grid-template-columns: 1.1fr .8fr .9fr 1.6fr; gap: 8px; align-items: center; max-width: 760px; margin-top: 8px; }
.seg-rule select, .seg-rule input { width: 100%; }
/* The property key only matters for "Event property…". */
.seg-rule .seg-key { opacity: .55; }
.seg-rule:has(select[name="field"] option[value="prop"]:checked) .seg-key { opacity: 1; }
.seg-rule:has(select[name="field"] option[value="prop"]:not(:checked)) .seg-key { visibility: hidden; }
.seg-list .seg { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line2); }
.seg-list .seg:first-child { border-top: 0; }
.seg-list .seg .rules { flex-basis: 100%; color: var(--ink2); font-size: 13.5px; }
.seg-list .seg .acts { margin-left: auto; display: flex; gap: 6px; }
.form.seg-form { max-width: none; }
.row.seg-names { align-items: flex-start; }
.seg-caption { font-size: 13px; font-weight: 600; }
.muted.seg-help { margin: 0; font-size: 13px; }
@media (max-width: 720px) {
  .seg-rule { grid-template-columns: 1fr; padding: 10px 0; border-top: 1px solid var(--line2); }
  .seg-rule:has(select[name="field"] option[value="prop"]:not(:checked)) .seg-key { display: none; }
}
/* The form-field editor. */
.ff-form { margin-top: 14px; }
.ff-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; display: grid; gap: 10px 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) 90px 90px; align-items: end; }
.ff-row.new { border-style: dashed; }
.ff-row .form-field { margin: 0; }
.ff-row .wide { grid-column: span 2; }
.ff-row .tools { grid-column: span 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ff-row .tools .grow { flex: 1; }
.muted.ff-help { font-size: 13px; }
@media (max-width: 780px) { .ff-row { grid-template-columns: 1fr 1fr; } .ff-row .wide, .ff-row .tools { grid-column: span 2; } }
/* Support notes, rendered: plain text sizes, headings a step apart, code blocks scroll. */
.md { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md h3, .md h4, .md h5, .md h6 { margin: 18px 0 6px; line-height: 1.3; }
.md h3 { font-size: 16px; } .md h4 { font-size: 15px; } .md h5 { font-size: 14px; } .md h6 { font-size: 13px; color: var(--ink2); }
.md p, .md ul, .md ol, .md pre, .md blockquote { margin: 0 0 10px; }
.md ul, .md ol { padding-left: 22px; }
.md li + li { margin-top: 4px; }
.md pre { white-space: pre; overflow-x: auto; }
.md blockquote { padding-left: 12px; border-left: 3px solid var(--line); color: var(--ink2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.notes-edit textarea { font: 13px/1.55 var(--mono); min-height: 260px; }
.notes-preview { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.notes-preview[hidden] { display: none; }
/* An app's support notes beside a request. */
details.support-notes > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 650; }
details.support-notes > summary::-webkit-details-marker { display: none; }
details.support-notes > summary .note { font-size: 13px; font-weight: 500; }
details.support-notes > summary .caret { margin-left: auto; color: var(--ink3); font-size: 13px; }
details.support-notes[open] > summary { margin-bottom: 14px; }
details.support-notes[open] > summary .caret { transform: rotate(180deg); }
details.support-notes .md { max-height: 70vh; overflow-y: auto; }
details.support-notes .edit-notes { font-size: 12.5px; margin: 10px 0 0; }
/* Settings › Security. */
.sec-status { display: flex; gap: 18px; align-items: flex-start; }
.sec-status .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--soft); color: var(--ink3); flex: none; }
.sec-status .ic.on { background: var(--good-soft); color: var(--good); }
.sec-status h2 { margin: 0 0 6px; }
.sec-status p { margin: 0 0 10px; color: var(--ink2); max-width: 640px; }
.sec-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sec-steps.from-three { counter-reset: s 2; }
.sec-steps > li { position: relative; padding: 0 0 22px 40px; counter-increment: s; }
.sec-steps > li:last-child { padding-bottom: 0; }
.sec-steps > li::before { content: counter(s); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.sec-steps h3 { margin: 2px 0 8px; font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.sec-steps p { margin: 0 0 10px; color: var(--ink2); }
.sec-steps p.after-qr { margin-top: 12px; }
.sec-steps .key-facts { margin-top: 12px; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0 0 18px; padding: 16px 18px 16px 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); font: 600 15px/1.6 var(--mono); }
.codes li { user-select: all; }
.codes-lead { margin: 0 0 14px; color: var(--ink2); max-width: 640px; }
.sec-info { color: var(--ink2); margin: 0 0 18px; max-width: 720px; }
@media (max-width: 480px) { .codes { grid-template-columns: 1fr; } }
.code-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.code-form + .error { margin-top: 8px; }
.code-form .form-field { flex: 1 1 180px; max-width: 360px; }
.sec-rows { display: flex; flex-direction: column; margin: -4px 0; }
.sec-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line2); }
.sec-row:first-child { border-top: 0; }
.sec-row > div { flex: 1; min-width: 0; }
.sec-row b { display: block; font-weight: 600; }
.sec-row span { color: var(--ink3); font-size: 12.5px; }
.sec-row .btn, .sec-row button { flex: none; }
.sheet .sheet-lead { margin: 0 0 16px; color: var(--ink2); }
.muted.locked { margin: 0 0 14px; font-size: 14px; }
.form-actions.spaced { margin-top: 18px; }
.error[hidden] { display: none; }
.muted.no-camera { margin: 10px 0 0; }
@media (max-width: 560px) { .sec-row { flex-wrap: wrap; } }
/* Settings › AI access, and the consent page an AI client sends the browser to. */
.ai-lead { margin: 0 0 10px; }
.ai-url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 2px; }
.ai-url code { font-size: 13px; padding: 5px 9px; user-select: all; }
.ai-how { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ai-how li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; }
.ai-how li > div { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-how b { font-weight: 600; }
.ai-how p { margin: 0; color: var(--ink2); }
.ai-key .pre-wrap { margin-top: 6px; }
.ai-key code.secret { display: block; padding: 8px 10px; word-break: break-all; user-select: all; }
.muted.key-other { margin: 12px 0 0; }
.ai-consent { max-width: 520px; margin: 24px auto; }
.ai-consent h2 { font-size: 16px; }
.scopes { display: grid; gap: 8px; margin: 14px 0 18px; }
.scopes .check-field { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; }
.scopes small { display: block; color: var(--ink3); font-size: 12px; margin: -6px 0 0 24px; }
@media (max-width: 640px) { .ai-how li { grid-template-columns: 1fr; } }
.devices td.device-acts { white-space: nowrap; } .devices td.device-acts button + button { margin-left: 6px; }
/* An app's extra file types, in its Rules card. */
.extra-types { gap: 8px; }
.types-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; }
.types-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-top: 1px solid var(--line2); }
.types-list li:first-child { border-top: 0; }
.types-list .what { flex: 1 1 200px; color: var(--ink2); font-size: 12.5px; }
.types-list .acts { margin-left: auto; display: flex; gap: 6px; }
/* A goal's name and its arrow to the event's page, on one line: the name cut with an ellipsis, the arrow always shown. */
.goal-line { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 56ch; }
td .goal-line .title { display: block; min-width: 0; max-width: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-line a.muted { display: inline-flex; flex: none; align-items: center; }
@media (max-width: 780px) { .goal-line { max-width: 60vw; } td .goal-line .title { padding: 8px 0; } .goal-line a.muted { padding: 8px 4px; } }
/* The picked app's own pages, right under the app switcher. */
.nav .app-pages { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; padding-left: 10px; border-left: 1px solid var(--line); margin-left: 16px; }
.side-collapsed .nav .app-pages { padding-left: 0; margin-left: 0; border-left: 0; }
/* An app page's marker sits on the guide line beside it, not at the panel's edge (in the rail, at the edge again). */
.nav .app-pages a[aria-current="page"]::before { left: -12px; top: 6px; bottom: 6px; border-radius: 3px; }
html.side-collapsed .nav .app-pages a[aria-current="page"]::before { left: -8px; top: 8px; bottom: 8px; border-radius: 0 3px 3px 0; }
@media (max-width: 780px) { .nav .app-pages { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; margin: 0 0 4px; padding: 0; border: 0; } }
/* Funnels: each funnel's totals, its steps as bars, and what happens between them. */
.funnel-sum { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; }
.funnel-sum > div { display: flex; flex-direction: column; }
.funnel-sum .label { color: var(--ink3); font-size: 12px; font-weight: 500; }
.funnel-sum b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* A segmented switch between a few fixed choices: radio buttons on a grey track, the chosen one raised. */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.seg label { position: relative; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 7px; color: var(--ink3); font-size: 13px; font-weight: 550; white-space: nowrap; cursor: pointer; }
.seg label:hover { color: var(--ink); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 0 0 1px var(--line); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A timeline of steps, shared by a funnel's view and its designer: a numbered circle per step with an accent outline,
   a thin line through the circles from the first to the last, and between two steps a row of what happened. */
.step-line { list-style: none; margin: 0; padding: 0; }
.step-line > li { position: relative; padding-left: 44px; }
.step-line > li::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.step-line > li:first-child::before { top: 18px; }
.step-line > li:last-child::before { bottom: auto; height: 18px; }
.step-line > li:only-child::before { display: none; }
.tl-dot { position: absolute; z-index: 1; left: 0; top: 4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-gap { display: flex; align-items: center; min-height: 34px; padding-top: 2px; padding-bottom: 2px; }
.tl-rates { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; color: var(--ink3); font-size: 12.5px; }
.tl-rates b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
/* In a funnel's view, each step is its bar beside the circle, its middle level with the circle's; the row's padding (not
   a margin, which would collapse) holds the whole circle, so a container that clips its overflow never cuts it off. */
.funnel-steps .tl-step { padding-top: 4px; padding-bottom: 4px; }
.funnel-steps .tl-step:last-child { padding-bottom: 0; }

/* The funnel designer: a toolbar of step kinds above the canvas; the steps top to bottom, joined by arrows. */
.fd-name { display: block; margin: 0; }
.fd-name input { font: inherit; letter-spacing: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px dashed var(--line2); border-radius: 0; padding: 0 2px; width: min(420px, 100%); height: auto; box-shadow: none; }
.fd-name input:focus { outline: none; border-bottom: 1px solid var(--accent); }
.fd-name input::placeholder { color: var(--ink3); }
.fd { display: flex; flex-direction: column; gap: 12px; }
.fd-toolbar .fd-tool { flex: none; }
.fd-toolbar { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.fd-tool { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 600; cursor: grab; white-space: nowrap; }
.fd-tool svg { color: var(--accent); }
.fd-tool:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.fd-tool:disabled { opacity: .45; cursor: not-allowed; }
.fd-tb-note { margin: -4px 2px 0; font-size: 12.5px; }
.fd-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -4px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.fd-settings > label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.fd-settings input[type="checkbox"] { margin: 0; }
.fd-window { margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.fd-flow { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 560px; transition: opacity .12s; }
.fd-flow.loading { opacity: .7; }
/* The line, a piece per row: from the first point down to the last (the "add" point). */
.fd-node.unfilled .tl-dot { border-style: dashed; color: var(--ink3); border-color: var(--ink3); }
.fd-slot .tl-dot { border: 2px dashed var(--line2); color: var(--ink3); }
.fd-node { border-radius: 10px; }
.fd-node:focus-visible { outline: none; }
.fd-node:focus-visible .fd-row { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-node.dragging { opacity: .4; }
.fd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 6px 10px 8px; margin-left: -10px; border-radius: 10px; cursor: pointer; }
.fd-row:hover, .fd-node.open .fd-row { background: var(--soft); }
.fd-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.fd-node-label { font-weight: 650; font-size: 14.5px; overflow-wrap: anywhere; }
.fd-node.unfilled .fd-node-label { color: var(--ink3); font-weight: 500; }
.fd-kind { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; color: var(--ink3); font-size: 12px; font-weight: 550; }
.fd-kind code { font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.fd-row-n { color: var(--ink3); font-size: 12.5px; white-space: nowrap; }
.fd-row-n b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.fd-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fd-bar > span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width .25s; }
.fd-node .fd-edit { margin: 6px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.fd-link { flex-wrap: wrap; gap: 6px 10px; }
.fd-insert { width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center; opacity: 0; background: var(--panel); border: 1px solid var(--accent); color: var(--accent); transition: opacity .12s; }
.fd-link:hover .fd-insert, .fd-link.drop .fd-insert, .fd-link.target .fd-insert, .fd-insert:focus-visible { opacity: 1; }
.fd-link.drop, .fd-slot.drop { background: var(--accent-soft); border-radius: 10px; }
.fd-link .fd-adders { flex-basis: 100%; }
.fd-slot { padding-top: 6px; padding-bottom: 4px; min-height: 36px; }
.fd-slot-body { display: flex; flex-direction: column; gap: 6px; padding-top: 7px; }
.fd-slot-title { color: var(--ink3); font-size: 12.5px; font-weight: 600; }
.fd-full { display: block; padding-top: 9px; font-size: 12.5px; }
.fd-adders { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-add { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink2); font-size: 12.5px; font-weight: 600; }
.fd-add svg { color: var(--accent); }
.fd-add:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.fd-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.fd-edit .form-field { margin: 0; }
.fd-edit .form-actions { margin: 2px 0 0; }
.fd-combo { position: relative; }
.fd-combo-list { list-style: none; margin: 4px 0 0; padding: 4px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.fd-combo-list [role="option"] { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.fd-combo-list [role="option"]:hover { background: var(--soft); }
.fd-combo-list [role="option"][aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.fd-opt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.fd-opt-n { flex: none; color: var(--ink3); font-size: 12px; font-variant-numeric: tabular-nums; }
.fd-combo-none { padding: 6px 8px; color: var(--ink3); font-size: 12.5px; }
.fd-combo-note { margin: 4px 8px 6px; color: var(--ink3); font-size: 12px; line-height: 1.6; }
.fd-combo-note code { font-family: var(--mono); font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: var(--soft); color: var(--ink2); }
/* Quick picks: a kind of step's top options, opened by resting the pointer on its chip. */
.fd-quick { position: fixed; z-index: 30; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow), 0 8px 24px rgb(0 0 0 / .12); animation: fd-quick-in .08s ease-out; }
@keyframes fd-quick-in { from { opacity: 0; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .fd-quick { animation: none; } }
.fd-quick-title { margin: 4px 8px 4px; color: var(--ink3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fd-quick [role="menuitem"] { display: flex; align-items: baseline; gap: 12px; width: 100%; height: auto; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--ink); font-size: 13px; font-weight: 550; text-align: left; }
.fd-quick [role="menuitem"]:hover, .fd-quick [role="menuitem"]:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.fd-quick-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fd-quick-n { flex: none; color: var(--ink3); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fd-quick-none { margin: 4px 8px 6px; color: var(--ink3); font-size: 12.5px; }
.fd-quick .fd-quick-more { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; color: var(--ink2); }
.fd-quick-more span { margin-left: auto; color: var(--ink3); font-size: 12px; font-weight: 500; }
.fd-keys { margin: 18px auto 0; max-width: 560px; font-size: 12px; }
@media (hover: none) { .fd-insert { opacity: 1; } }
@media (max-width: 780px) {
  .fd-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 4px; }
  .fd-row { grid-template-columns: minmax(0, 1fr); }
  .fd-toolbar::-webkit-scrollbar { display: none; }
  .fd-tb-note, .fd-keys { display: none; }
}
.funnel-card + .funnel-card { margin-top: 12px; }
/* A funnel card's header opens and closes it; closed, the totals sit on one compact row. */
.funnel-card .fc-head { flex-wrap: nowrap; }
.fc-toggle { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 8px; height: auto; margin: -4px 0 -4px -6px; padding: 4px 6px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; box-shadow: none; }
.fc-toggle:hover { background: var(--soft); }
.fc-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fc-toggle > svg { flex: none; align-self: center; color: var(--ink3); transform: rotate(90deg); transition: transform .14s ease-out; }
.fc-toggle[aria-expanded="false"] > svg { transform: none; }
.fc-name { font-weight: 600; }
.fc-body { overflow: hidden; }
.funnel-card.collapsed .fc-head { margin-bottom: 6px; }
.funnel-card.collapsed .funnel-sum { gap: 4px 20px; margin: 0 0 0 23px; }
.funnel-card.collapsed .funnel-sum > div { flex-direction: row; align-items: baseline; gap: 6px; }
.funnel-card.collapsed .funnel-sum b { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .fc-toggle > svg { transition: none; } }
/* Settings › Team. */
.row-acts { display: flex; gap: 6px; justify-content: flex-end; }
.app-boxes { border: 0; padding: 0; margin: 0; gap: 6px; }
.app-boxes .check-field { min-height: 0; }
.audit td { font-size: 12.5px; }
.audit .audit-detail { font-family: var(--mono); font-size: 11.5px; }
.join-form { gap: 14px; }
@media (max-width: 780px) { td.team-apps, th.team-apps { display: none; } }

/* Dashboards: panels on a twelve-column grid, each as wide as its layout says; a header that opens and closes it. */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.dash-panel { grid-column: span var(--w, 12); position: relative; min-width: 0; margin: 0; }
/* Panels in a row share a top and, open, the tallest one's height; a folded one stays as short as its header. */
.dash-panel.collapsed { align-self: start; }
.dash-panel.bare { padding: 0; border: 0; background: none; box-shadow: none; }
.dash-panel.bare .kpis { margin-bottom: 0; }
.dash-panel.dp-ghost { display: none; }
.dp-head { flex-wrap: nowrap; align-items: center; min-height: 30px; }
/* Every panel's header is one 30px row, tabs or not: the tab groups keep one height, a long note shortens. */
.dp-head > .tabs { height: 28px; box-sizing: border-box; align-items: center; }
.dash-panel.bare .dp-head { margin-bottom: 8px; }
.dash-panel.collapsed .dp-head { margin-bottom: 0; }
.dp-toggle { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; align-items: baseline; overflow: hidden; white-space: nowrap; justify-content: flex-start; gap: 2px 8px; height: auto; margin: -4px 0 -4px -6px; padding: 4px 6px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; box-shadow: none; }
.dp-toggle:hover { background: var(--soft); }
.dp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-toggle > svg { flex: none; align-self: center; color: var(--ink3); transform: rotate(90deg); transition: transform .14s ease-out; }
.dp-toggle[aria-expanded="false"] > svg { transform: none; }
.dp-title { font-weight: 600; }
.dp-toggle .note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dp-head > .tabs, .dp-head > .more, .dp-head > .ev-pick { flex: none; }
.dp-body.dp-anim { overflow: hidden; }
.dp-spark { margin-top: 8px; }
.dp-spark svg { width: 100%; height: 48px; }
.dash-panel.unknown { border-style: dashed; }
.dash-empty { margin-bottom: 12px; }

/* The dashboard picker in the title. */
.dash-pick { position: relative; display: inline-flex; }
.dash-pick > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.dash-pick > summary::-webkit-details-marker { display: none; }
.dash-pick > summary svg { color: var(--ink3); }
.dash-pick > summary:hover { background: var(--soft); }
.dash-pick.mini { margin-left: 4px; }
.dash-pick .menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.dash-pick .menu a, .dash-pick .menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: auto; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--ink2); font: inherit; text-align: left; text-decoration: none; box-shadow: none; }
.dash-pick .menu a:hover, .dash-pick .menu button:hover { background: var(--soft); color: var(--ink); }
.dash-pick .menu a[aria-current="page"] { color: var(--accent); font-weight: 650; }
.dash-pick .menu .danger { color: var(--bad); }
.dash-pick .menu .sep { height: 1px; margin: 4px; background: var(--line); }
.dash-from { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-from legend { padding: 0; margin-bottom: 4px; font-size: 13px; color: var(--ink2); }

/* Customizing: a bar of its own, and each panel's arranging tools; the right edge resizes. */
.dash-edit-bar { position: sticky; top: var(--bar-top, 64px); z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.dash-edit-bar[hidden] { display: none; }
.dash-edit-title { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; font-size: 13px; }
.dash-edit-title svg { vertical-align: -2px; }
.dash-edit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dash-edit-bar [data-edit-say] { flex-basis: 100%; }
.dash-edit-bar [data-edit-say]:empty { display: none; }
.dash-lib { position: relative; }
.dash-lib > summary { list-style: none; }
.dash-lib > summary::-webkit-details-marker { display: none; }
.lib-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 320px; max-height: 560px; overflow: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.lib-menu.up { top: auto; bottom: calc(100% + 6px); }
.lib-h { margin: 8px 10px 2px; color: var(--ink3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.lib-h:first-child { margin-top: 4px; }
.lib-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; height: auto; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--ink); font-size: 13px; text-align: left; box-shadow: none; }
.lib-item .mi-ic { color: var(--accent); }
.lib-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lib-txt b { font-weight: 550; }
.lib-txt small { color: var(--ink3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.lib-item:hover:not(:disabled), button.lib-item:focus-visible { background: var(--accent-soft); outline: none; }
.lib-item:disabled { opacity: .55; cursor: default; }
.lib-added { padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--ink3); font-size: 11px; font-weight: 600; white-space: nowrap; }
.lib-label { cursor: default; }
.lib-sub { padding-top: 5px; padding-bottom: 5px; }
.lib-sub .lib-txt b { font-weight: 500; color: var(--ink2); }
.lib-note { display: block; padding: 4px 10px 6px 40px; font-size: 12.5px; }
.seg > button { height: auto; padding: 3px 9px; border: 0; border-radius: 6px; background: none; color: var(--ink3); font-size: 12.5px; font-weight: 550; box-shadow: none; cursor: pointer; }
.seg > button:hover { color: var(--ink); }
.seg > button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 0 0 1px var(--line); }
.seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

[data-customize][hidden] { display: none !important; }
/* A panel's corner: settings (a wrench, on hover or focus) and, while customizing, remove (×). */
.dp-corner { display: flex; align-items: center; gap: 2px; margin-left: 4px; flex: none; }
.dp-wrench, .dp-x { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink3); box-shadow: none; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.dash-panel:hover .dp-wrench, .dp-wrench:focus-visible, .dp-wrench[aria-expanded="true"] { opacity: 1; }
.dp-wrench:hover { background: var(--soft); color: var(--ink); }
.dp-x { display: none; }
.dash-editing .dp-x { display: grid; }
.dash-editing .dash-panel:hover .dp-x, .dp-x:focus-visible { opacity: 1; }
.dp-x:hover { background: var(--bad-soft); color: var(--bad); }
@media (hover: none) { .dp-wrench, .dash-editing .dp-x { opacity: .8; } }

/* Customizing by hand: a panel lifts by its header, the others make room around a dashed gap; the grips size it. */
.dash-editing .dash-panel { outline: 1px dashed var(--line2); outline-offset: 2px; }
.dash-editing .dash-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-editing .dash-panel.bare { padding: 8px; }
.dash-editing .dash-panel.dp-ghost { display: block; opacity: .65; }
.dash-editing .dp-head { cursor: grab; }
.dash-editing .dp-head :is(button, a, .tabs, details) { cursor: pointer; }
.dash-editing .dp-body { pointer-events: none; }
.dash-panel.lifted { position: fixed; z-index: 60; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 16px 40px -8px rgb(15 21 37 / .35); outline: 2px solid var(--accent); outline-offset: 0; will-change: transform; }
.dash-ph { grid-column: span var(--w, 12); border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
html.dash-dragging, html.dash-dragging * { cursor: grabbing !important; user-select: none; }
.dash-panel.resizing { outline: 2px solid var(--accent) !important; }
.dp-size-tag { position: absolute; right: 18px; bottom: 18px; z-index: 3; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--panel); font-size: 12px; font-weight: 650; pointer-events: none; }
/* The grips: dotted, in the accent; faint at rest, clear on hover, focus or while dragging. */
.dp-grip { display: none; }
.dash-editing .dp-grip { display: block; position: absolute; z-index: 2; opacity: .35; touch-action: none; background: radial-gradient(circle, var(--accent) 1.2px, transparent 1.6px) 0 0 / 4px 4px; transition: opacity .12s; }
.dash-editing .dash-panel:hover .dp-grip { opacity: .65; }
.dash-editing .dp-grip:hover, .dash-editing .dp-grip:focus-visible, .dash-panel.resizing .dp-grip { opacity: 1; outline: none; }
.dp-grip-e { top: 50%; right: 3px; width: 8px; height: 32px; margin-top: -16px; cursor: ew-resize; background-position: center; }
.dp-grip-s { left: 50%; bottom: 3px; width: 32px; height: 8px; margin-left: -16px; cursor: ns-resize; background-position: center; }
.dp-grip-se { right: 3px; bottom: 3px; width: 14px; height: 14px; cursor: nwse-resize; clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .6; }
.dash-editing .dp-grip-e:not(:hover):not(:focus-visible), .dash-editing .dp-grip-s:not(:hover):not(:focus-visible) { opacity: 0; }
.dash-editing .dash-panel:hover .dp-grip-e, .dash-editing .dash-panel:hover .dp-grip-s { opacity: .55; }
.dash-editing .dp-grip-e:hover, .dash-editing .dp-grip-s:hover { opacity: 1; }

/* The context menu, the settings popover and the undo toast. */
.dash-menu, .dash-pop { position: fixed; z-index: 70; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 2px 4px rgb(0 0 0 / .06), 0 14px 36px -10px rgb(15 21 37 / .3); }
.dash-menu { min-width: 190px; padding: 4px; font-size: 13px; }
.dash-menu button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: auto; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; box-shadow: none; }
.dash-menu button:hover:not(:disabled), .dash-menu button:focus-visible { background: var(--accent-soft); outline: none; }
.dash-menu button:disabled { color: var(--ink3); }
.dash-menu button.danger { color: var(--bad); }
.dash-menu .dm-h { margin: 4px 8px 2px; color: var(--ink3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dash-menu .sep { height: 1px; margin: 4px; background: var(--line); }
.dash-pop { width: 320px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pop-close { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--ink3); box-shadow: none; }
.pop-row { display: flex; flex-direction: column; gap: 5px; }
.pop-label { color: var(--ink3); font-size: 12px; font-weight: 600; }
.pop-row input[type="text"], .pop-row select { width: 100%; height: 32px; font-size: 13px; }
.pop-row .seg { align-self: flex-start; flex-wrap: wrap; }
.pop-checks { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow: auto; }
.pop-actions .btn { justify-content: center; }
.pop-actions { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.dash-toast { position: fixed; z-index: 80; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--ink); color: var(--panel); font-size: 13.5px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .4); }
.dash-toast .btn { background: transparent; border-color: color-mix(in srgb, var(--panel) 35%, transparent); color: var(--panel); }
@media (prefers-reduced-motion: reduce) { .dp-toggle > svg, .dp-grip, .dp-wrench, .dp-x { transition: none; } }
@media (max-width: 780px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-panel { grid-column: auto; }
  .dash-editing .dp-grip-e, .dash-editing .dp-grip-se { display: none; }
  .dash-pop { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 75vh; overflow: auto; }
  .dash-customize span { display: none; }
  .lib-menu { right: auto; left: 0; width: min(320px, calc(100vw - 32px)); }
  /* On a phone the bar docks at the bottom, slim, so it covers no panel. */
  .dash-editing { padding-bottom: 96px; }
  .dash-edit-bar { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; margin: 0; padding: 8px 10px; }
  .dash-edit-title { display: none; }
  .dash-edit-tools { flex: 1; }
  .dash-edit-tools [data-done] { margin-left: auto; }
}

/* Settings › Security: the passkeys, each with its icon, where it lives and its actions. */
.pk-row { align-items: center; }
.pk-row > div:not(.row-acts) { flex: 1; min-width: 0; }
.pk-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }


/* Menus everywhere: items start at the left, with one 20px column for an icon or a check, so text lines up whether or
   not an item has one; buttons in menus don't take the centred look of ordinary buttons. */
:is(.menu, .dash-menu, [role="menu"]) :is(a, button) { justify-content: flex-start; text-align: left; }
.mi-ic { flex: none; display: grid; place-items: center; width: 20px; color: var(--ink3); }
.dash-pick .menu a[aria-current="page"] .mi-ic, .dash-menu [aria-checked="true"] .mi-ic { color: var(--accent); }
.dash-pick .menu .danger .mi-ic, .dash-menu .danger .mi-ic { color: var(--bad); }
.dash-pick .menu a, .dash-pick .menu button, .dash-menu button { min-height: 32px; padding: 6px 10px 6px 6px; }
.dash-pick .menu .sep, .dash-menu .sep { margin: 4px 6px; }

/* Customizing: said by a quiet label in the title (and the panels' outlines and grips), not by colour. */
.dash-mode { margin-left: 10px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink3); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.link-btn { height: auto; padding: 4px 6px; border: 0; background: none; box-shadow: none; color: var(--ink3); font-size: 13px; font-weight: 550; }
.link-btn:hover { color: var(--ink); text-decoration: underline; }
/* Settings › Apps › one app: importing from Google Analytics; the progress bar fills as the months come in. */
.imp-conn { border-top: 0; padding-top: 0; }
.imp-run { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.imp-bar { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.imp-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent); transition: width .4s ease-out; }
.imp-facts { margin: 8px 0; color: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.imp-form { margin-top: 10px; }
.imp-delete { margin: 14px 0 0; font-size: 13px; }
.imp-delete .link-btn { padding: 0; color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .imp-fill { transition: none; } }

/* Days imported from Google Analytics: a quiet line on the dashboard, a small tag on the overview. */
.imported-line { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--ink3); font-size: 12.5px; }
.imported-line svg { flex: none; }
.imported-line.small { margin: 8px 0 0; font-size: 12px; }
.imported-tag { flex: none; display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: var(--soft); color: var(--ink3); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; line-height: 1; vertical-align: middle; }
/* An app's icon, name and GA tag on one centred line. */
.app-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.app-cell .imported-tag { margin-left: 0; }
.app-card h2 .imported-tag { align-self: center; }

/* A panel with a height of its own (rows of 40px, gaps included): its body scrolls when the content is longer.
   Folded, it is as short as its header whatever its height. */
.dash-panel.fixed-h:not(.collapsed) { display: flex; flex-direction: column; height: calc(var(--rows) * 40px - 12px); align-self: start; }
.dash-panel.fixed-h:not(.collapsed) > .dp-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.dash-panel.fixed-h.bare:not(.collapsed) > .dp-body { overflow: visible; }

/* Errors: the list (type and message, where in the code, trend, counts) and one issue (its stack, facts, occurrences). */
.err-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.err-title b { font-weight: 650; margin-right: 4px; }
.err-culprit { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); }
.err-table .col-spark { width: 96px; }
.err-table .col-spark svg { width: 88px; height: 24px; }
.err-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.err-head-main { min-width: 0; flex: 1 1 360px; }
.err-type { margin: 0 0 4px; color: var(--ink3); font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.card .err-message { display: block; margin: 0 0 6px; font-size: 18px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.err-actions { display: flex; gap: 8px; }
.err-ignore { position: relative; }
.err-ignore > summary { list-style: none; }
.err-ignore > summary::-webkit-details-marker { display: none; }
.err-ignore .lib-menu { width: 300px; }
.crumb { color: var(--ink3); text-decoration: none; font-weight: 550; }
.crumb:hover { color: var(--accent); }
.crumb-sep { color: var(--ink3); margin: 0 6px; }
.frames { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.frame { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-top: 1px solid var(--line); color: var(--ink3); }
.frames > :first-child { border-top: 0; }
.frame .fn { overflow-wrap: anywhere; }
.frame .at { flex: none; color: var(--ink3); }
.frame.in-app { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.frame.in-app .fn { font-weight: 650; }
.frame-fold { border-top: 1px solid var(--line); }
.frame-fold summary { padding: 6px 10px; color: var(--ink3); cursor: pointer; font-family: var(--font, inherit); font-size: 12px; }
.frame-fold .frames { border: 0; border-radius: 0; border-top: 1px solid var(--line); }
.stack-raw code { font-size: 12px; white-space: pre-wrap; }
.err-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 14px; font-size: 13px; }
.err-facts dt { color: var(--ink3); }
.err-facts dd { margin: 0; overflow-wrap: anywhere; }
.occs { list-style: none; margin: 0; padding: 0; }
.occs > li + li { border-top: 1px solid var(--line); }
.occ > summary { display: flex; gap: 14px; padding: 8px 2px; cursor: pointer; list-style: none; font-size: 13px; }
.occ > summary::-webkit-details-marker { display: none; }
.occ-when { flex: none; width: 90px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.occ-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ[open] { padding-bottom: 12px; }
@media (max-width: 780px) { .err-table .col-spark, .err-table .col-users { display: none; } .err-title { max-width: none; white-space: normal; } }
.err-toggles { display: flex; flex-direction: column; gap: 8px; }
.err-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.err-toggle input { margin: 3px 0 0; flex: none; }
.err-toggle span { display: flex; flex-direction: column; gap: 1px; }
.err-toggle b { font-weight: 550; }
.err-toggle small { color: var(--ink3); font-size: 12.5px; }
.err-toggle:has(input:disabled) { opacity: .55; }

/* Settings that read first: a section's summary as label / value rows, its form behind Edit. */
.sec-facts { display: flex; flex-direction: column; margin: 0; font-size: 13.5px; }
.sec-facts .fact { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2px 20px; padding: 9px 0; border-top: 1px solid var(--line2); scroll-margin-top: 72px; }
.sec-facts .fact:first-child { border-top: 0; padding-top: 2px; }
.sec-facts .fact:last-child { padding-bottom: 0; }
.sec-facts dt { color: var(--ink3); }
.sec-facts dd { margin: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 3px; }
.sec-facts .fact-v { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sec-facts .fact-help { color: var(--ink3); font-size: 12.5px; }
.sec-facts code { font-size: 12px; }
.edit-sec h2 > .btn:last-child svg { margin-right: 2px; }
.sec-edit { margin-top: 2px; }
.notes-read { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.ff-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; }
.ff-chip code { font-size: 11.5px; color: var(--ink3); }
[data-seg-start] { margin-top: 12px; }
@media (max-width: 560px) { .sec-facts .fact { grid-template-columns: minmax(0, 1fr); } }

/* Tracing: traces, one trace's waterfall and its span sheet, logs (with the live tail), services. */
.svc { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.svc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--ink3)); flex: none; }
.tr-tools { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dur-field { width: 170px; }
.dur-field input { padding-left: 10px; }
.tr-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.tr-method { font: 650 11.5px/1 var(--mono); color: var(--ink3); margin-right: 8px; }
.tr-id { font-size: 11px; padding: 0 5px; color: var(--ink3); }
.tr-table .col-dur { width: 190px; }
.tr-dur { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.tr-dur > span:last-child { flex: none; min-width: 58px; text-align: right; }
.tr-bar { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--w, 0%), var(--soft) var(--w, 0%)); }
.tr-failed .tr-bar { background: linear-gradient(90deg, var(--bad) var(--w, 0%), var(--soft) var(--w, 0%)); }
.tr-table .col-status { width: 96px; }
@media (max-width: 780px) { .tr-table .col-spans, .tr-table .col-when { display: none; } .tr-table .col-dur { width: 120px; } .tr-title { max-width: none; white-space: normal; } .dur-field { width: 140px; } }

.trace-id { padding: 6px 70px 6px 10px; }
.trace-id code { font-size: 12px; }
.wf { --name-w: minmax(180px, 34%); font-size: 13px; }
.wf-head, .wf-row { display: grid; grid-template-columns: var(--name-w) minmax(0, 1fr); gap: 12px; align-items: center; }
.wf-head { padding: 0 8px 8px; border-bottom: 1px solid var(--line); color: var(--ink3); font-size: 12px; }
.wf-axis { position: relative; height: 16px; }
.wf-axis span { position: absolute; left: var(--l); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-axis span:first-child { transform: none; }
.wf-axis span:last-child { transform: translateX(-100%); }
.wf-rows { list-style: none; margin: 0; padding: 0; }
.wf-row { width: 100%; padding: 4px 8px; border: 0; border-radius: 6px; background: none; box-shadow: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.wf-row:hover { background: var(--soft); }
.wf-row.picked { background: var(--accent-soft); }
.wf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wf-name { display: flex; align-items: center; gap: 7px; min-width: 0; padding-left: calc(var(--d, 0) * 14px); }
.wf-head .wf-name { padding-left: 0; }
.wf-label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wf-label b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-label small { color: var(--ink3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-row.failed .wf-label b { color: var(--bad); }
.wf-track { position: relative; height: 22px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line2) calc(25% - 1px) 25%); }
.wf-bar { position: absolute; top: 6px; left: var(--l); width: var(--w); min-width: 2px; height: 10px; border-radius: 3px; background: var(--svc, var(--ink3)); }
.wf-row.failed .wf-bar { background: repeating-linear-gradient(135deg, var(--bad) 0 5px, color-mix(in srgb, var(--bad) 55%, var(--panel)) 5px 10px); }
.wf-ev { position: absolute; top: 3px; left: var(--l); width: 3px; height: 16px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--panel); }
.wf-dur { position: absolute; top: 3px; left: var(--l); margin-left: 6px; font-size: 11.5px; color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-dur.before { margin-left: 0; transform: translateX(calc(-100% - 6px)); }
.wf-dur.inside { margin-left: 0; transform: translateX(calc(-100% - 6px)); top: 4px; padding: 0 4px; border-radius: 3px; background: var(--panel); color: var(--ink2); }
@media (max-width: 780px) { .wf { --name-w: minmax(120px, 42%); } .wf-name { padding-left: calc(var(--d, 0) * 8px); } .wf-axis span:nth-child(2n) { display: none; } }

#span-sheet dialog.sheet { width: min(600px, 100vw); }
.sheet-body h3 { margin: 18px 0 8px; font-size: 13px; }
.attrs { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 3px 14px; margin: 0; font: 12px/1.5 var(--mono); }
.attrs dt { color: var(--ink3); overflow-wrap: anywhere; }
.attrs dd { margin: 0; overflow-wrap: anywhere; }
.span-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.span-issues li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.span-issues a { display: inline-flex; gap: 6px; align-items: center; }
.span-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

.log-lines, .log-rows { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.log-line, .log-rows summary { display: grid; grid-template-columns: max-content 46px minmax(90px, 140px) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 6px; border-radius: 6px; }
.log-line + .log-line, .log-rows > li + li { border-top: 1px solid var(--line2); }
.log-line.has-span { cursor: pointer; }
.log-line.has-span:hover, .log-rows summary:hover { background: var(--soft); }
.log-rows summary { cursor: pointer; list-style: none; }
.log-rows summary::-webkit-details-marker { display: none; }
.log-at { color: var(--ink3); font: 12px/1.5 var(--mono); white-space: nowrap; }
.log-svc { min-width: 0; overflow: hidden; color: var(--ink2); font-size: 12px; }
.log-svc .svc { max-width: 100%; }
.log-body { min-width: 0; font: 12.5px/1.5 var(--mono); overflow-wrap: anywhere; }
.log-rows details:not([open]) .log-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-more { padding: 6px 6px 12px calc(6px + 10px); display: flex; flex-direction: column; gap: 10px; }
.log-more .row { gap: 10px; align-items: center; flex-wrap: wrap; }
.log-more code { font-size: 11px; }
.sev { display: inline-block; font: 650 10.5px/1.6 var(--mono); letter-spacing: .02em; color: var(--ink3); }
.sev-info { color: var(--ink2); }
.sev-warn { color: var(--warn); }
.sev-error, .sev-fatal { color: var(--bad); }
.sev-row-error, .sev-row-fatal { box-shadow: inset 3px 0 0 var(--bad); }
.log-rows > li.fresh { animation: log-in 1.6s ease-out; }
@keyframes log-in { from { background: var(--accent-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .log-rows > li.fresh { animation: none; } }
[data-live][aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
[data-live][aria-pressed="true"] svg { animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }
.live-note { margin: -6px 0 12px; font-size: 13px; }
@media (max-width: 780px) { .log-line, .log-rows summary { grid-template-columns: max-content 40px minmax(0, 1fr); } .log-svc { display: none; } }

.svc-head { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; font-size: 16px; font-weight: 650; }
.svc-head .svc-dot { width: 10px; height: 10px; }
.svc-table tr.picked td { background: var(--accent-soft); }
.svc-table .col-spark { width: 96px; }
.svc-table .col-spark svg { width: 88px; height: 24px; }
.bad-text { color: var(--bad); }
@media (max-width: 780px) { .svc-table .col-p, .svc-table .col-spark { display: none; } }
.occ-trace { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; color: var(--ink3); font-size: 12px; }
.occ .row { margin: 0 0 12px; }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis.five { grid-template-columns: 1fr 1fr; } }

/* One app's settings: the sections (with the search) on the left, one section's page beside them. */
.set-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.set-nav { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 80px); overflow-y: auto; padding-bottom: 8px; }
.set-search .field { position: relative; display: flex; align-items: center; }
.set-search .field > svg { position: absolute; left: 10px; color: var(--ink3); pointer-events: none; }
.set-search input { width: 100%; padding: 8px 34px 8px 34px; }
.set-search kbd { position: absolute; right: 8px; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; font: 11px/18px var(--mono); color: var(--ink3); background: var(--soft); }
.set-search input:focus + kbd, .set-search input:not(:placeholder-shown) + kbd { display: none; }
.set-groups, .set-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.set-groups a, .set-results a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink2); text-decoration: none; }
.set-groups a > svg:first-child { flex: none; color: var(--ink3); }
.set-groups a > svg:last-child { display: none; margin-left: auto; color: var(--ink3); }
.set-groups a span, .set-results a { min-width: 0; }
.set-groups a b, .set-results b { display: block; font-weight: 550; font-size: 13.5px; color: var(--ink); }
.set-groups a small { display: none; }
.set-groups a:hover, .set-results a:hover { background: var(--soft); }
.set-groups a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
.set-groups a[aria-current="page"] > svg:first-child { color: var(--accent); }
.set-groups a.danger b, .set-groups a.danger > svg:first-child { color: var(--bad); }
.set-results a { flex-direction: column; align-items: flex-start; gap: 1px; }
.set-results small { color: var(--ink3); font-size: 12px; }
.set-results [aria-selected="true"] a { background: var(--accent-soft); }
.set-none { padding: 8px 10px; color: var(--ink3); font-size: 13px; }
.set-main { min-width: 0; }
.set-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; }
.set-title h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.set-title .muted { font-size: 13px; }
.set-back { display: none; }
.set-main .card { scroll-margin-top: 64px; }
.flash { animation: set-flash 2.2s ease-out; }
@keyframes set-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--accent); background-color: var(--accent-soft); } 100% { box-shadow: 0 0 0 2px transparent; } }
.sec-facts .fact.flash { border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; box-shadow: 0 0 0 2px var(--accent); } }
.on-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 12.5px; font-weight: 550; text-decoration: none; }
.on-chip:hover { text-decoration: underline; }
.sec-facts .dom { display: inline-flex; gap: 4px; align-items: center; }
.sec-facts .app-icon { width: 22px; height: 22px; border-radius: 5px; }
@media (max-width: 860px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); }
  .set-nav { position: static; max-height: none; overflow: visible; }
  .set-layout:not(.set-index) .set-nav { display: none; }
  .set-index .set-main { display: none; }
  .set-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--ink3); text-decoration: none; font-size: 13.5px; font-weight: 550; }
  .set-groups { gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
  .set-groups li + li { border-top: 1px solid var(--line2); }
  .set-groups a { padding: 12px 14px; border-radius: 0; }
  .set-groups a small { display: block; color: var(--ink3); font-size: 12.5px; }
  .set-groups a > svg:last-child { display: block; }
  .set-groups a[aria-current="page"] { background: none; }
  .set-search kbd { display: none; }
}
.set-groups[hidden], .set-results[hidden] { display: none; }
@media (max-width: 860px) { .set-groups a[aria-current="page"] > svg:first-child { color: var(--ink3); } }

/* Feature switches: the server's page, an app's section, and a page of a feature that is off. */
.feature-off > svg { color: var(--ink3); }
.sec-facts .badge + .link { font-size: 12.5px; }
.sec-facts .on-chip { cursor: default; }
.sec-facts a.on-chip { cursor: pointer; }

/* Compact feature switches: a dense row per feature (name, what it covers on one line, a hint, a switch). */
.fs-list { list-style: none; margin: 0; padding: 0; }
.fs-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 38px; padding: 4px 0; border-top: 1px solid var(--line2); scroll-margin-top: 72px; }
.fs-row:first-child { border-top: 0; }
.fs-name { font-weight: 550; font-size: 13.5px; }
.fs-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink3); font-size: 13px; }
.fs-hint { color: var(--ink3); font-size: 12px; white-space: nowrap; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; }
.fs-hint:empty { display: none; }
.fs-ro { font-size: 13px; color: var(--ink2); white-space: nowrap; }
.fs-row.is-off .fs-name { color: var(--ink2); }
.fs-row > button { justify-self: end; }
.fs-say:not(:empty) { margin-top: 10px; }
.switch { position: relative; display: inline-flex; flex: none; width: 34px; height: 20px; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.switch-track { width: 34px; height: 20px; border-radius: 999px; background: var(--line); transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:has(input:disabled) { cursor: not-allowed; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }
@media (max-width: 640px) {
  .fs-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name ctl" "desc ctl" "hint ctl"; gap: 0 12px; padding: 7px 0; }
  .fs-name { grid-area: name; }
  .fs-desc { grid-area: desc; }
  .fs-hint { grid-area: hint; justify-self: start; margin-top: 3px; }
  .fs-row > :last-child { grid-area: ctl; }
}

/* The apps × features matrix: compact marks, the header stays while it scrolls. */
.fm-wrap { max-height: 70vh; overflow: auto; margin: 0 -4px; }
.fm { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.fm th { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink3); font-size: 11.5px; font-weight: 600; text-align: center; white-space: nowrap; }
.fm th:first-child { text-align: left; }
.fm td { padding: 5px 8px; border-bottom: 1px solid var(--line2); text-align: center; height: 30px; }
.fm td:first-child { text-align: left; }
.fm tr:last-child td { border-bottom: 0; }
.fm td { position: relative; }
.fm-on { color: var(--good); display: inline-flex; vertical-align: middle; }
.fm-off { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--line); vertical-align: middle; }
@media (max-width: 640px) { .fm th:not(:first-child) { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 4px; } .fm td { padding: 5px 4px; } }

/* The Lab: the experiments, one experiment's results (uplift intervals drawn on a shared scale), the editor. */
.lab-table .col-goal { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-table .who code { font-size: 11.5px; }
@media (max-width: 780px) { .lab-table .col-goal, .lab-table .col-when { display: none; } }
.xp-hyp { margin: 0 0 8px; color: var(--ink2); font-size: 14px; max-width: 70ch; }
.xp-vars { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.xp-vars li, .xp-var { display: inline-flex; align-items: center; gap: 7px; }
.xp-vars code { font-size: 11.5px; }
.xp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ink3)); flex: none; display: inline-block; }
.xp-table, .xp-seg { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.xp-table th, .xp-seg th { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink3); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.xp-table td, .xp-seg td { padding: 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.xp-table tr:last-child td, .xp-seg tr:last-child td { border-bottom: 0; }
.xp-table .num, .xp-seg .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-seg th.num { text-align: right; }
.xp-seg th .xp-dot { margin-right: 6px; }
.xp-table .pos, .xp-seg .pos { color: var(--good); }
.xp-table .neg, .xp-seg .neg { color: var(--bad); }
.xp-table tr.harmed td { background: var(--bad-soft); }
.xp-table .col-ci { width: 200px; }
.xp-table .col-ci small { display: block; margin-top: 3px; color: var(--ink3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ci { position: relative; display: block; height: 12px; }
.ci-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink3); opacity: .5; }
.ci-range { position: absolute; top: 4px; height: 4px; left: var(--l); right: var(--r); border-radius: 2px; background: color-mix(in srgb, var(--c) 45%, transparent); }
.ci-point { position: absolute; top: 2px; left: var(--x); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--panel); }
.ci.up .ci-point { background: var(--good); }
.ci.down .ci-point { background: var(--bad); }
.xp-foot { margin: 12px 0 0; font-size: 12.5px; }
.xp-srm { display: flex; gap: 6px; align-items: center; margin: -6px 0 12px; color: var(--bad); font-size: 13px; }
.harmed-card { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
@media (max-width: 780px) { .xp-table .col-ci { width: 120px; } .xp-table :is(th, td):nth-child(3) { display: none; } }
@media (max-width: 560px) { .xp-table :is(th, td):is(:nth-child(2), :nth-child(6), :nth-child(7)) { display: none; } .xp-table { font-size: 12.5px; } .xp-table td, .xp-table th { padding: 8px 4px; } .xp-table th, .xp-table th.num { white-space: normal; } .xp-var .badge { display: none; } }
.xv-head, .xv-row { display: grid; grid-template-columns: 74px minmax(0, 1.4fr) minmax(0, 1fr) 70px 32px; gap: 8px; align-items: center; }
.xv-head { color: var(--ink3); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.xv-row { margin-bottom: 8px; }
.xv-row input { width: 100%; min-width: 0; }
.xv-tag { font-size: 12.5px; color: var(--ink3); font-weight: 600; }
.xv-row:first-child .xv-tag { color: var(--ink2); }
.xv-share { margin: 10px 0 0; font-size: 12.5px; }
.xg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.xg-row select { width: auto; }
.xg-row input, .xg-row select[name="gvalue"] { flex: 1 1 220px; min-width: 0; }
.xp-form .card + .card { margin-top: 12px; }
@media (max-width: 640px) {
  .xv-head { display: none; }
  .xv-row { grid-template-columns: minmax(0, 1fr) 64px 32px; grid-template-areas: "tag tag drop" "name name name" "key weight weight"; padding-bottom: 10px; border-bottom: 1px solid var(--line2); }
  .xv-tag { grid-area: tag; } .xv-row [name="vname"] { grid-area: name; } .xv-row [name="vkey"] { grid-area: key; } .xv-row [name="vweight"] { grid-area: weight; } .xv-row [data-drop-variant] { grid-area: drop; justify-self: end; }
}
.xp-form button[hidden] { display: none; }
/* "New experiment" with several apps: a menu of the apps to make it in. */
.new-in { position: relative; }
.new-in > summary { list-style: none; }
.new-in > summary::-webkit-details-marker { display: none; }
.new-in > .menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 220px; max-height: 60vh; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 24px -8px rgba(15,21,37,.18); }
.new-in > .menu a { display: flex; padding: 8px 10px; border-radius: 8px; color: var(--ink2); text-decoration: none; }
.new-in > .menu a:hover { background: var(--soft); color: var(--ink); }
.empty .new-in { display: inline-block; margin-top: 14px; }
.empty .new-in > .menu { right: auto; left: 50%; transform: translateX(-50%); text-align: left; }
.lab-table .col-app { white-space: nowrap; }

/* Feature flags: the list, a flag's steps and test box, the editor. */
.topbar .lead .tabs { margin-left: 4px; }
.fl-key { font-size: 12.5px; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; }
.fl-key.big { font-size: 16px; }
.fl-table .col-type { width: 80px; }
.fl-table .col-switch { width: 76px; }
.fl-table tr.fl-off .fl-key { color: var(--ink2); }
.fl-serves { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.fv { display: inline-flex; align-items: center; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 8px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line2); font: 12px/1.6 var(--mono); }
.fv-on { background: var(--good-soft); color: var(--good); border-color: transparent; font-weight: 600; }
.fv-off { color: var(--ink2); }
.fr { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.fs-score { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; }
@media (max-width: 780px) { .fl-table .col-type, .fl-table .col-when { display: none; } }
.fl-actions { align-items: center; }
.fl-switch { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-size: 13px; font-weight: 550; }
.fl-grid { align-items: start; }
.fl-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.fl-steps li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 10px 9px 34px; border-radius: 8px; border: 1px solid transparent; counter-increment: st; font-size: 13px; }
.fl-steps li + li { margin-top: 2px; }
.fl-steps li::before { content: counter(st); position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--soft); color: var(--ink3); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.fl-steps .st-when { min-width: 0; overflow-wrap: anywhere; color: var(--ink2); }
.fl-steps .st-when code { font-size: 11.5px; }
.fl-steps .st-note { display: flex; gap: 4px; align-items: center; margin-top: 3px; color: var(--warn); font-size: 12px; }
.fl-steps li.st-warn { background: var(--warn-soft); }
.fl-steps li.hit { border-color: var(--accent); background: var(--accent-soft); }
.fl-steps li.hit::before { background: var(--accent); color: var(--on-accent); }
.fl-test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fl-test .form-field small { color: var(--ink3); font-weight: 400; }
.fl-attrs { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 8px; }
.fl-attr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fl-attr input { min-width: 0; }
.fl-result { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--soft); font-size: 13px; }
.fl-result:empty { display: none; }
.fl-gets { font-weight: 650; }
.fl-result code { font-size: 11.5px; }
.fl-form .card { max-width: 860px; }
.fvr { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.4fr) 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.fvr input, .fvr textarea { min-width: 0; width: 100%; }
.fvr textarea { resize: vertical; min-height: 36px; }
.fl-defaults { margin-top: 12px; }
.fr-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fr-rule { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.fr-head { display: flex; align-items: center; gap: 8px; }
.fr-head input { flex: 1; min-width: 0; }
.fr-n { width: 22px; height: 22px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink2); flex: none; }
.fr-tools { display: inline-flex; gap: 2px; }
.fr-match, .fr-serve { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); flex-wrap: wrap; }
.fr-match select, .fr-serve select { width: auto; }
.fc-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1.4fr) 32px; gap: 6px; align-items: center; }
.fc-row input, .fc-row select { min-width: 0; width: 100%; }
.fl-usescore { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin-bottom: 12px; }
.fl-usescore > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.fl-usescore small { color: var(--ink3); font-size: 12.5px; }
.fg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.fg-row input { width: 70px; }
.fg-row select { width: auto; }
.fg-warn { flex-basis: 100%; color: var(--warn); font-size: 12px; }
.fl-form [hidden] { display: none !important; }
@media (max-width: 640px) {
  .fl-test-grid, .fl-attr { grid-template-columns: 1fr; }
  .fvr { grid-template-columns: 1fr 32px; } .fvr [name="vname"] { display: none; }
  .fc-row { grid-template-columns: 1fr 1fr; } .fc-row [name="cval"] { grid-column: 1 / -1; }
}
.xp-flagline { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; color: var(--ink2); }
.xp-flag { margin-bottom: 14px; }
/* Errors grouped by title: the toggle, and an error's variants. */
.err-tools { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.err-variants { list-style: none; margin: 0 0 10px; padding: 0; }
.err-variants li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line2); font-size: 13px; }
.err-variants li:first-child { border-top: 0; padding-top: 0; }
.err-variants li .title { min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.err-variants .num { font-variant-numeric: tabular-nums; }
a.badge { text-decoration: none; }
.nt-times { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--ink2); font-size: 11px; font-weight: 650; vertical-align: 1px; }

/* Settings › Storage: the disk bar, the kinds as bars, the next clean-up. */
.st-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--soft); border: 1px solid var(--line2); }
.st-bar > span { width: var(--w); min-width: 2px; }
.st-ours, .st-legend i.st-ours { background: var(--accent); }
.st-rest, .st-legend i.st-rest { background: var(--ink3); opacity: .45; }
.st-legend i.st-free { background: var(--soft); border: 1px solid var(--line); }
.st-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--ink2); }
.st-legend li { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.st-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.st-kinds li { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(60px, 2fr) 72px 80px; gap: 10px; align-items: center; }
.st-track { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.st-track > span { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 4px; }
.st-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.st-rows { font-size: 12px; text-align: right; }
.st-next { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 560px) { .st-kinds li { grid-template-columns: 1fr 64px; } .st-track, .st-rows { display: none; } }
.nt-more { display: flex; justify-content: center; padding: 6px 0 2px; }