/* Wiggle BOS application components (the UX level-up, docs/plans/2026-10-02-ux-levelup.md, section 16).
   Built on the ds.css tokens (dark navy, cyan primary, teal good, amber attention, red problem); each token has its
   value as a fallback so a page outside UI_V2 still reads. Markup comes from public/ui-kit.js (window.UK).
   Three surfaces: level 0 the page canvas, level 1 a section (.uk-sec), level 2 a highlight (.uk-l2). Borders and
   small tonal steps, no glows or heavy shadows. Every colour pair here meets WCAG AA on its surface. */

.uk {
  --uk-app: var(--c-app, #061A2E); --uk-s1: var(--c-surface-1, #0A2540); --uk-s2: var(--c-surface-2, #0F2F50); --uk-s3: var(--c-surface-3, #15395F);
  --uk-line: var(--c-border, #16385A); --uk-line-2: var(--c-border-strong, #275482);
  --uk-text: var(--c-text, #F2F6FA); --uk-text-2: var(--c-text-2, #A9BFD3); --uk-text-3: var(--c-text-3, #7F9BB6);
  --uk-primary: var(--c-primary, #00B4FF); --uk-on-primary: var(--c-on-primary, #0A2540);
  --uk-good: var(--c-success, #22E3A7); --uk-warn: var(--c-warning, #FFB547); --uk-bad: var(--c-danger, #FF6B6B); --uk-info: var(--c-info, #7CC4FF);
  /* A section stands a step further off the canvas than surface 1 (UX round 2 section 5): a little lighter, a firmer
     border and the faintest lift, so boundaries hold on a dim or cheap screen. No heavy shadows. */
  --uk-sec-bg: #0C2948; --uk-sec-line: #1F4770; --uk-lift: 0 1px 2px rgba(0,0,0,.28);
  --uk-r: var(--r-lg, 8px); --uk-r-sm: var(--r-md, 6px);
  color: var(--uk-text); font-size: var(--t-body, 14px); line-height: 1.45;
}
.uk *, .uk *::before, .uk *::after { box-sizing: border-box; }
.uk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Page actions: the row under the page title (status of the data, primary and secondary actions) ── */
.uk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.uk-actions .uk-meta { color: var(--uk-text-2); font-size: var(--t-small, 13px); margin-right: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uk-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-control, 32px); padding: 0 14px; border-radius: 999px; border: 1px solid var(--uk-line-2); background: transparent; color: var(--uk-text); font: inherit; font-size: var(--t-small, 13px); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.uk-btn:hover { border-color: var(--uk-primary); color: var(--uk-text); }
.uk-btn.primary { background: var(--uk-primary); border-color: var(--uk-primary); color: var(--uk-on-primary); }
.uk-btn.primary:hover { filter: brightness(1.08); color: var(--uk-on-primary); }
.uk-btn.quiet { border-color: transparent; color: var(--uk-text-2); padding: 0 8px; }
.uk-btn.quiet:hover { color: var(--uk-text); border-color: transparent; text-decoration: underline; }
.uk-btn[disabled] { opacity: .6; cursor: default; }
.uk-btn.sm { min-height: var(--h-control-sm, 28px); padding: 0 11px; font-size: var(--t-meta, 12px); }

/* ── Status: one small vocabulary for the whole app ── */
.uk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: var(--t-meta, 12px); font-weight: 600; line-height: 18px; white-space: nowrap; border: 1px solid transparent; }
.uk-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.uk-pill.good { color: var(--uk-good); background: rgba(34,227,167,.10); border-color: rgba(34,227,167,.28); }
.uk-pill.info { color: var(--uk-info); background: rgba(124,196,255,.10); border-color: rgba(124,196,255,.28); }
.uk-pill.warn { color: var(--uk-warn); background: rgba(255,181,71,.10); border-color: rgba(255,181,71,.30); }
.uk-pill.bad { color: #FF8585; background: rgba(255,107,107,.10); border-color: rgba(255,107,107,.32); }
.uk-pill.neutral { color: var(--uk-text-2); background: rgba(169,191,211,.08); border-color: var(--uk-line); }
.uk-trend { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-small, 13px); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.uk-trend.good { color: var(--uk-good); } .uk-trend.bad { color: var(--uk-bad); } .uk-trend.flat { color: var(--uk-text-2); }
.uk-trend .uk-vs { color: var(--uk-text-3); font-weight: 400; }

/* ── Metric strip: 3 to 5 compact figures across the top ── */
/* The strip reflows for two to six figures (UX round 2 section 4): each row's figures share its width, so a short last
   row stretches instead of leaving empty cells. */
.uk-strip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--uk-sec-line); border: 1px solid var(--uk-sec-line); box-shadow: var(--uk-lift); border-radius: var(--uk-r); overflow: hidden; margin: 0 0 18px; }
.uk-metric { flex: 1 1 170px; background: var(--uk-sec-bg); padding: 14px 16px 12px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.uk-metric .uk-label { color: var(--uk-text-2); font-size: var(--t-meta, 12px); font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: 6px; }
.uk-metric .uk-value { font-size: var(--t-kpi, 24px); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
/* A value in words (Not enough yet, Not connected): a state, smaller and muted, allowed to wrap. */
.uk-metric .uk-value.dim { color: var(--uk-text-2); font-weight: 600; font-size: var(--t-section, 18px); line-height: 1.3; white-space: normal; padding-top: 4px; }
.uk-metric .uk-sub { color: var(--uk-text-2); font-size: var(--t-meta, 12px); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.uk-metric a.uk-value { color: inherit; text-decoration: none; }
.uk-metric.l2 { background: var(--uk-s2); }

/* ── Sections: level 1 surfaces, in a grid that can split 2/3 + 1/3 or 1/2 + 1/2 ── */
.uk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; align-items: start; }
.uk-grid > .uk-sec { margin: 0; }
.uk-span-full { grid-column: span 6; } .uk-span-2of3 { grid-column: span 4; } .uk-span-1of3 { grid-column: span 2; } .uk-span-half { grid-column: span 3; }
@media (max-width: 980px) { .uk-span-2of3, .uk-span-1of3, .uk-span-half { grid-column: span 6; } }
.uk-sec { background: var(--uk-sec-bg); border: 1px solid var(--uk-sec-line); box-shadow: var(--uk-lift); border-radius: var(--uk-r); padding: 16px 18px; margin: 0 0 16px; min-width: 0; }
.uk-sec.l2 { background: var(--uk-s2); border-color: var(--uk-line-2); }
.uk-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.uk-sec-title { margin: 0; font-size: var(--t-section, 18px); font-weight: 700; letter-spacing: -.01em; color: var(--uk-text); }
.uk-sec-kicker { color: var(--uk-text-2); font-size: var(--t-meta, 12px); }
.uk-sec-head .uk-sec-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uk-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.uk-big b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.uk-note { color: var(--uk-text-2); font-size: var(--t-small, 13px); margin: 10px 0 0; line-height: 1.5; }
.uk-note.warn { color: var(--uk-warn); } .uk-note.bad { color: var(--uk-bad); }
.uk-muted { color: var(--uk-text-2); } .uk-dim { color: var(--uk-text-3); }

/* ── Charts: inline SVG; every chart has a text equivalent ── */
.uk-chart { display: block; width: 100%; height: auto; overflow: visible; }
.uk-chart text { fill: var(--uk-text-3); font-size: 11px; font-family: inherit; }
.uk-chart .bar { fill: var(--uk-primary); opacity: .55; } .uk-chart .bar.now { opacity: 1; } .uk-chart .bar.part { opacity: .3; }
.uk-chart .base { stroke: var(--uk-line-2); }
.uk-spark { display: inline-block; vertical-align: middle; }
.uk-spark path.line { fill: none; stroke: var(--uk-primary); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.uk-spark path.area { fill: var(--uk-primary); opacity: .10; }
.uk-spark circle { fill: var(--uk-primary); }
.uk-spark.good path.line { stroke: var(--uk-good); } .uk-spark.good path.area, .uk-spark.good circle { fill: var(--uk-good); }
.uk-spark.bad path.line { stroke: var(--uk-bad); } .uk-spark.bad path.area, .uk-spark.bad circle { fill: var(--uk-bad); }
.uk-spark.warn path.line { stroke: var(--uk-warn); } .uk-spark.warn path.area, .uk-spark.warn circle { fill: var(--uk-warn); }

/* Aging and other stacked bars, with the legend as the text equivalent */
.uk-stack { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; margin: 6px 0 12px; }
.uk-stack .t0 { fill: var(--uk-good); } .uk-stack .t1 { fill: var(--uk-info); } .uk-stack .t2 { fill: var(--uk-warn); } .uk-stack .t3 { fill: #FF9A6B; } .uk-stack .t4 { fill: var(--uk-bad); } .uk-stack .empty { fill: var(--uk-s3); }
.uk-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px 14px; }
.uk-legend li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uk-legend .k { display: flex; align-items: center; gap: 6px; color: var(--uk-text-2); font-size: var(--t-meta, 12px); }
.uk-legend .k i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.uk-legend .k i.t0 { background: var(--uk-good); } .uk-legend .k i.t1 { background: var(--uk-info); } .uk-legend .k i.t2 { background: var(--uk-warn); } .uk-legend .k i.t3 { background: #FF9A6B; } .uk-legend .k i.t4 { background: var(--uk-bad); }
.uk-legend .v { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Progress and share bars (SVG, so no inline styles) */
.uk-meter { display: block; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; }
.uk-meter .track { fill: var(--uk-s3); } .uk-meter .fill { fill: var(--uk-primary); }
.uk-meter.good .fill { fill: var(--uk-good); } .uk-meter.warn .fill { fill: var(--uk-warn); } .uk-meter.bad .fill { fill: var(--uk-bad); }

/* ── Tables and operational lists ── */
.uk-table-wrap { overflow-x: auto; margin: 0 -4px; }
.uk-table-wrap:focus-visible { outline: 2px solid var(--uk-primary); outline-offset: 2px; }
/* The app makes every table scroll by itself on a phone (admin.css); here the wrapper scrolls, so the table stays a table. */
body .uk table.uk-table { display: table; overflow: visible; }
.uk-table { width: 100%; border-collapse: collapse; font-size: var(--t-body, 14px); font-variant-numeric: tabular-nums; }
.uk-table th, .uk-table td { padding: 8px 6px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--uk-line); }
.uk-table thead th { color: var(--uk-text-3); font-size: var(--t-label, 11px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--uk-line-2); white-space: nowrap; }
.uk-table tbody tr:last-child > * { border-bottom: 0; }
.uk-table tbody tr:hover > * { background: rgba(124,196,255,.04); }
.uk-table .num { text-align: right; white-space: nowrap; }
.uk-table .rank { color: var(--uk-text-3); width: 1%; white-space: nowrap; }
.uk-table .name { overflow-wrap: anywhere; min-width: 120px; }
/* Long names stop at two lines (UX round 2 section 7); the full name is in the title and on the record. */
.uk-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A row's name cell is a th for screen readers; it reads like any other cell (the app's th styles are for headers). */
.uk .uk-table tbody th[scope="row"] { font-weight: 400 !important; font-size: var(--t-body, 14px) !important; color: var(--uk-text) !important; text-transform: none !important; letter-spacing: 0 !important; background: transparent !important; padding: 8px 6px !important; border-bottom: 1px solid var(--uk-line) !important; }
.uk .uk-table tbody tr:last-child > th[scope="row"] { border-bottom: 0 !important; }
.uk-table tr.go { cursor: pointer; }
.uk-table tr.go a { text-decoration: underline; text-decoration-color: rgba(0,180,255,.55); }
.uk-table tr.go:hover > * { background: rgba(124,196,255,.08); }
.uk-table .share { width: 28%; min-width: 70px; }
.uk-table tr.total > * { font-weight: 700; border-top: 1px solid var(--uk-line-2); }
.uk-table a { color: var(--uk-text); text-decoration-color: var(--uk-line-2); text-underline-offset: 3px; }
.uk-table a:hover { color: var(--uk-primary); }

/* A table that stacks on a phone (o.stack): each row a short block, each cell led by its column's name, so a wide
   comparison never scrolls sideways. */
@media (max-width: 560px) {
  body .uk table.uk-table.stack, .uk .uk-table.stack tbody, .uk .uk-table.stack tr, .uk .uk-table.stack th, .uk .uk-table.stack td { display: block; width: 100%; }
  .uk .uk-table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .uk .uk-table.stack tbody tr { padding: 8px 0; border-bottom: 1px solid var(--uk-line); }
  .uk .uk-table.stack tbody tr:last-child { border-bottom: 0; }
  .uk .uk-table.stack th, .uk .uk-table.stack td, .uk .uk-table.stack tbody th[scope="row"] { border: 0 !important; padding: 2px 0 !important; text-align: left; white-space: normal; }
  .uk .uk-table.stack tbody th[scope="row"] { font-weight: 600 !important; }
  .uk .uk-table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--uk-text-2); }
}

/* ── Plan cards (Settings, Plan & usage): one plan each, the same rows in the same order so they compare at a glance;
   three across on a wide screen, stacked on a phone. Words and rows, no icons. ── */
.uk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 12px; }
.uk-plans > .uk-plan-li { display: grid; min-width: 0; }   /* the list item around each card; the card fills it */
.uk-plan { background: var(--uk-sec-bg); border: 1px solid var(--uk-sec-line); box-shadow: var(--uk-lift); border-radius: var(--uk-r); padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.uk-plan.current { border-color: var(--uk-primary); }
.uk-plan h3 { margin: 0; font-size: var(--t-section, 18px); font-weight: 700; color: var(--uk-text); overflow-wrap: anywhere; }
.uk-plan .uk-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.uk-plan .uk-plan-price { margin: 0; font-size: 1.5rem; line-height: 1.2; color: var(--uk-text); font-variant-numeric: tabular-nums; }
.uk-plan .uk-plan-price b { font-weight: 700; }
.uk-plan .uk-plan-price span { font-size: var(--t-body, 14px); color: var(--uk-text-2); }
.uk-plan .uk-plan-alt, .uk-plan .uk-plan-tag { margin: 0; color: var(--uk-text-2); font-size: var(--t-small, 13px); line-height: 1.45; }
.uk-plan ul { list-style: none; margin: 4px 0 0; padding: 0; }
.uk-plan ul > li { padding: 7px 0; border-top: 1px solid var(--uk-line); overflow-wrap: anywhere; }
.uk-plan .uk-plan-adds { margin: 0; color: var(--uk-text-2); font-size: var(--t-small, 13px); line-height: 1.45; overflow-wrap: anywhere; }
.uk-plan .uk-plan-foot { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.uk-list { list-style: none; margin: 0; padding: 0; }
.uk-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--uk-line); }
.uk-list > li:last-child { border-bottom: 0; }
.uk-list .main { min-width: 0; overflow-wrap: anywhere; }
.uk-list .main .sub { color: var(--uk-text-2); font-size: var(--t-small, 13px); margin-top: 2px; }
.uk-list .side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .uk-list > li { grid-template-columns: 1fr; } .uk-list .side { justify-content: flex-start; } }

/* ── Disclosure: supporting detail folded away ── */
.uk-more { margin: 12px 0 0; }
.uk-more > summary { cursor: pointer; color: var(--uk-primary); font-size: var(--t-small, 13px); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.uk-more > summary::-webkit-details-marker { display: none; }
.uk-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.uk-more[open] > summary::before { transform: rotate(45deg); }
.uk-more > .uk-more-body { margin-top: 10px; }

/* ── Empty states: designed, with the next step ── */
.uk-empty { border: 1px dashed var(--uk-line-2); border-radius: var(--uk-r); padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
.uk-empty .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--uk-s2); border: 1px solid var(--uk-line-2); flex: none; display: grid; place-items: center; color: var(--uk-primary); font-weight: 700; }
.uk-empty h3 { margin: 0 0 4px; font-size: var(--t-panel, 15px); font-weight: 700; }
.uk-empty p { margin: 0 0 12px; color: var(--uk-text-2); font-size: var(--t-small, 13px); max-width: 60ch; }
.uk-empty .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* The empty state's picture variant: a real screen of the sample business, marked Example (the demo's off modules). */
.uk-example { border: 1px solid var(--uk-line-2); border-radius: var(--uk-r); padding: 24px; display: grid; gap: 20px; margin: 8px 0 24px; }
.uk-example .kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--uk-primary); }
.uk-example h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--uk-text); }
.uk-example-copy p { margin: 0 0 16px; color: var(--uk-text-2); font-size: 16px; line-height: 1.55; max-width: 64ch; }
.uk-example .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.uk-example-shot { position: relative; margin: 0; border: 1px solid var(--uk-line-2); border-radius: var(--uk-r); overflow: hidden; background: var(--uk-s2); }
.uk-example-shot img { display: block; width: 100%; height: auto; }
.uk-example-shot .tag { position: absolute; top: 12px; left: 12px; background: rgba(10, 37, 64, .92); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
@media (max-width: 640px) { .uk-example { padding: 16px; } .uk-example h2 { font-size: 19px; } }
/* A demo page whose module is off: only its heading stays, above the example (public/gate.js demoExample). */
.wg-demo-off > :not(.page-head) { display: none !important; }

/* ── Romey: the intelligence layer, restrained ── */
.uk-romey { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(0deg, rgba(0,180,255,.05), rgba(0,180,255,.05)), var(--uk-s2); border: 1px solid rgba(0,180,255,.35); border-radius: var(--uk-r); padding: 12px 14px; margin: 0 0 16px; }
.uk-romey img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.uk-romey .who { font-size: var(--t-meta, 12px); font-weight: 700; color: var(--uk-primary); margin: 0 0 2px; }
.uk-romey .say { margin: 0; color: var(--uk-text); }
.uk-romey .acts { display: flex; gap: 6px 12px; flex-wrap: wrap; margin-top: 6px; }
.uk-romey .acts a { color: var(--uk-primary); font-size: var(--t-small, 13px); font-weight: 600; text-decoration: none; }
.uk-romey .acts a:hover { text-decoration: underline; }
.uk-romey .acts .first { border: 1px solid var(--uk-primary); border-radius: 999px; padding: 3px 12px; }
.uk-romey .acts .first:hover { background: rgba(0,180,255,.12); text-decoration: none; }
.uk-romey .acts button { background: none; border: 0; padding: 0; color: var(--uk-primary); font: inherit; font-size: var(--t-small, 13px); font-weight: 600; cursor: pointer; }
.uk-romey .acts button:hover { text-decoration: underline; }

/* ── Action panel: tasks that want a decision ── */
.uk-actpanel { border-left: 3px solid var(--uk-warn); }
.uk-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(255,181,71,.15); color: var(--uk-warn); font-size: var(--t-meta, 12px); font-weight: 700; }

/* ── Scorecard rows, strategy cards, meeting brief, monitoring cards (shared by the other pages) ── */
.uk-score { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(70px, .8fr) minmax(70px, .8fr) minmax(96px, 1fr) minmax(90px, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--uk-line); }
.uk-score:last-child { border-bottom: 0; }
.uk-score .num { font-variant-numeric: tabular-nums; text-align: right; }
.uk-score .num b { font-size: 17px; }
.uk-score .lbl { display: none; color: var(--uk-text-3); font-size: var(--t-label, 11px); }
.uk-score-head { color: var(--uk-text-3); font-size: var(--t-label, 11px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--uk-line-2); padding-top: 0; }
@media (max-width: 760px) { .uk-score { grid-template-columns: 1fr 1fr; } .uk-score .name { grid-column: span 2; } .uk-score-head { display: none; } .uk-score .lbl { display: block; } .uk-score .num { text-align: left; } }
.uk-strategy > h3 { margin: 0 0 2px; font-size: var(--t-label, 11px); letter-spacing: .08em; text-transform: uppercase; color: var(--uk-primary); }
.uk-strategy .q { color: var(--uk-text-2); font-size: var(--t-small, 13px); margin: 0 0 10px; }
/* A monitored site: its name and status on one line, then any number of figures reflowing, then its actions. */
.uk-monitor { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px 18px; align-items: start; }
.uk-monitor .site, .uk-monitor .acts { grid-column: 1 / -1; }
.uk-monitor .site { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.uk-monitor .acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.uk-monitor .site { font-weight: 700; overflow-wrap: anywhere; }
.uk-monitor .kv .k { color: var(--uk-text-3); font-size: var(--t-label, 11px); text-transform: uppercase; letter-spacing: .06em; }
.uk-monitor .kv .v { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .uk-monitor { grid-template-columns: 1fr 1fr; } }

/* Skeleton while loading */
.uk-skel { background: linear-gradient(90deg, var(--uk-s1), var(--uk-s2), var(--uk-s1)); background-size: 200% 100%; border-radius: var(--uk-r); min-height: 84px; animation: uk-sh 1.4s ease-in-out infinite; border: 1px solid var(--uk-line); }
@keyframes uk-sh { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .uk-skel { animation: none; } }

/* The page's help bar (public/ui.js): Ask Romey as a quiet branded button, What is this? subordinate. */
.ui-tools .ui-romey-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(0,180,255,.45) !important; background: rgba(0,180,255,.08) !important; color: var(--c-text, #F2F6FA) !important; border-radius: 999px !important; padding: 4px 12px 4px 5px !important; font-weight: 600; text-decoration: none !important; }
.ui-tools .ui-romey-btn::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: url("/brand/romey-face-256.1683471eab.webp") center/cover no-repeat, var(--c-surface-2, #0F2F50); flex: none; }
.ui-tools .ui-romey-btn:hover { background: rgba(0,180,255,.16) !important; }
.ui-tools .ui-help-btn { color: var(--c-text-2, #A9BFD3) !important; font-size: var(--t-meta, 12px) !important; }

/* The "?" beside a field (ui-kit.js helpTip): its help on hover, focus or a tap; within the screen on a phone. On the
   ds.css tokens directly (as .uk does, with the same fallbacks): a field's "?" sits on pages with no .uk container. */
.uk-help { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.uk-help-q { width: 20px; height: 20px; min-width: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--c-border-strong, #275482); background: var(--c-surface-2, #0F2F50); color: var(--c-text-2, #A9BFD3); font: 700 12px/18px inherit; cursor: help; text-transform: none; letter-spacing: 0; }
.uk-help-q:hover, .uk-help.open .uk-help-q { color: var(--c-text, #F2F6FA); border-color: var(--c-primary, #00B4FF); }
.uk-help-q:focus-visible { outline: 2px solid var(--c-primary, #00B4FF); outline-offset: 2px; }
.uk-help-pop { display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: -8px; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid var(--c-border-strong, #275482); border-radius: var(--r-md, 6px); background: var(--c-surface-3, #15395F); color: var(--c-text, #F2F6FA); box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: 13px; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
.uk-help.open .uk-help-pop { display: block; }
.uk-help-p { display: block; }
.uk-help-p + .uk-help-p { margin-top: 6px; color: var(--c-text-2, #A9BFD3); }
.uk-help-pop a { display: inline-block; margin-top: 6px; color: var(--c-primary, #00B4FF); }