/* Moxie360 app UI (Monthly Reports, Client SEO Projects, Prospects, login).
   Every rule is scoped under body.ui, and only shell.html loads this file, so the
   client-facing report pages (report.html, pitch.html: base.html + app.css /
   report.css / pitch.css) and their PDFs are never affected. See CLAUDE.md "App design system". */

/* Self-hosted Poppins, WOFF2 subset to Latin (~9 KB each). The app uses 400/500/600 only.
   (The pitch report has its own @font-face rules in pitch.css, incl. Bold.) */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/static/fonts/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/static/fonts/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/static/fonts/Poppins-SemiBold.woff2") format("woff2"); }

body.ui {
  /* Colors (contrast checked against the lightest and darkest glass over the dot grid) */
  --bg: #f3f5f9; --dot: #c9d1e0;
  --ink: #151b33; --muted: #545d73;
  --navy: #14339b; --navy-hover: #0f2878;
  --blue: #3675c4;          /* fills, borders, chart marks: never text on glass */
  --link: #2a5fa8;          /* text links / secondary emphasis */
  --lime: #a2d343;          /* accent only, never text */
  --red: #c23b3b; --red-text: #b02f2f; --red-tint: #fbeeee;
  --amber: #d98a1f; --amber-text: #9a5a00; --amber-tint: #fdf3e4;
  --green-text: #2f6b12; --green-tint: #eef6e2;
  --blue-tint: #eaf1fa;
  --line: #e3e7ef; --line-strong: #cfd6e3; --flat: #f6f8fb;
  /* Glass levels */
  --glass-nav: rgba(255, 255, 255, .72);
  --glass-panel: rgba(255, 255, 255, .62);
  --glass-border: rgba(255, 255, 255, .85);
  --surface: rgba(255, 255, 255, .94);
  --glass-fallback: rgba(255, 255, 255, .92);
  --shadow-panel: 0 8px 24px rgba(20, 27, 51, .06);
  /* Shape and space */
  --r-panel: 16px; --r-surface: 10px; --r-btn: 8px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --ease: 150ms ease;

  margin: 0; min-height: 100vh;
  font: 400 14px/22px "Poppins", Arial, sans-serif; color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.5px, transparent 1.6px);
  background-size: 22px 22px; background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body.ui *, body.ui *::before, body.ui *::after { box-sizing: border-box; }

/* ---------- Type ---------- */
body.ui h1, body.ui .t-page { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--navy); margin: 0; letter-spacing: -.01em; }
body.ui h2, body.ui .t-section { font-size: 19px; line-height: 28px; font-weight: 600; color: var(--ink); margin: 0 0 var(--s3); }
body.ui h3, body.ui .t-sub { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); margin: 0 0 var(--s2); }
body.ui p { margin: 0 0 var(--s3); }
body.ui .small, body.ui small { font-size: 12.5px; line-height: 18px; }
body.ui .muted { color: var(--muted); }
body.ui .num { font-variant-numeric: tabular-nums; font-weight: 500; }
body.ui .big-num { font-size: 30px; line-height: 36px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
body.ui a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(54, 117, 196, .45); text-underline-offset: 3px; }
body.ui a:hover { text-decoration-color: currentColor; }
body.ui strong, body.ui b { font-weight: 600; }
body.ui code { font: 12.5px ui-monospace, Menlo, monospace; background: var(--flat); padding: 1px 5px; border-radius: 4px; }

/* ---------- Focus, motion ---------- */
body.ui :focus { outline: none; }
body.ui :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { body.ui *, body.ui *::before, body.ui *::after { transition: none !important; animation: none !important; } }

/* ---------- Skip link ---------- */
body.ui .skip { position: absolute; left: var(--s4); top: -60px; z-index: 50; background: var(--navy); color: #fff; padding: var(--s2) var(--s4); border-radius: var(--r-btn); font-weight: 500; text-decoration: none; }
body.ui .skip:focus { top: var(--s3); }

/* ---------- Glass level 1: navigation ---------- */
body.ui .nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s2) var(--s5); background: var(--glass-nav); border-bottom: 1px solid rgba(20, 51, 155, .08);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
body.ui .nav-brand { display: flex; align-items: center; padding: var(--s1) 0; }
body.ui .nav-brand img { height: 30px; display: block; }
body.ui .nav-areas { display: flex; gap: var(--s1); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
body.ui .nav-areas a { display: block; position: relative; padding: 10px 14px; color: var(--ink); font-weight: 500; text-decoration: none; border-radius: var(--r-btn); transition: background var(--ease); }
body.ui .nav-areas a:hover { background: rgba(20, 51, 155, .06); }
body.ui .nav-areas a[aria-current="page"] { color: var(--navy); font-weight: 600; }
body.ui .nav-areas a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--lime); }
body.ui .nav-user { margin-left: auto; display: flex; align-items: center; gap: var(--s3); font-size: 13px; color: var(--muted); }
body.ui .nav-user form { margin: 0; }

/* ---------- Page layout ---------- */
body.ui main { display: block; max-width: 1500px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); }
/* Reading width: wide content (tables, charts, lists) uses the full 1500px; running text keeps
   ~75 characters per line. Use .prose (or .measure) for any new block of text, e.g. AI summaries. */
body.ui { --measure: 75ch; }
body.ui .prose, body.ui .measure,
body.ui .panel > p, body.ui .panel > .small, body.ui .surface.pad > p, body.ui section > p,
body.ui .msg p, body.ui .field .help, body.ui .tile .sub { max-width: var(--measure); }
body.ui .prose p { max-width: var(--measure); }
body.ui textarea { max-width: calc(var(--measure) + 4ch); }
body.ui .page-head .desc { max-width: var(--measure); }
body.ui .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
body.ui .page-head .desc { color: var(--muted); margin: var(--s1) 0 0; }
body.ui .page-head .actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
body.ui .crumb { display: inline-block; font-size: 13px; margin-bottom: var(--s1); }
body.ui .stack > * + * { margin-top: var(--s5); }
body.ui .row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
body.ui .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s5); }

/* ---------- Glass level 2: panels ---------- */
body.ui .panel { background: var(--glass-panel); border: 1px solid var(--glass-border); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, .9); padding: var(--s5);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
body.ui .panel + .panel { margin-top: var(--s5); }
body.ui .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
body.ui .panel-head h2 { margin: 0; }
body.ui .panel-head .meta { color: var(--muted); font-size: 12.5px; }

/* ---------- Level 3: solid data surfaces ---------- */
body.ui .surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface); }
body.ui .surface.pad { padding: var(--s4); }
body.ui .scroll-x { overflow-x: auto; }

/* Nested: flat tiles (no glass, no shadow) */
body.ui .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--s3); }
body.ui .tile { background: var(--flat); border-radius: var(--r-surface); padding: var(--s4); }
body.ui .tile .label { color: var(--muted); font-size: 12.5px; line-height: 18px; }
body.ui .tile .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* No backdrop-filter support: solid, slightly translucent surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.ui .nav, body.ui .panel { background: var(--glass-fallback); }
}

/* ---------- Tables ---------- */
body.ui table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 20px; }
body.ui table.data caption { text-align: left; padding: var(--s3) var(--s3) var(--s2); color: var(--muted); font-size: 12.5px; }
body.ui table.data th { text-align: left; font-weight: 600; color: var(--ink); padding: 10px 12px; border-bottom: 1px solid var(--line-strong); background: var(--flat); white-space: nowrap; }
body.ui table.data thead th:first-child { border-top-left-radius: var(--r-surface); }
body.ui table.data thead th:last-child { border-top-right-radius: var(--r-surface); }
body.ui table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
body.ui table.data tbody tr:last-child td { border-bottom: 0; }
body.ui table.data tbody tr:hover td { background: #fafbfd; }
body.ui table.data .r, body.ui table.data th.r { text-align: right; }
body.ui table.data .r { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.ui table.data tr.dim td { color: var(--muted); }
body.ui table.data.compact td, body.ui table.data.compact th { padding: 7px 10px; }

/* ---------- Buttons ---------- */
body.ui .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 16px;
  font: 500 14px/20px "Poppins", Arial, sans-serif; border-radius: var(--r-btn); border: 1px solid var(--line-strong);
  background: #fff; color: var(--navy); text-decoration: none; cursor: pointer; transition: background var(--ease), border-color var(--ease), transform var(--ease); }
body.ui .btn:hover { background: var(--blue-tint); border-color: #b9c8e4; }
body.ui .btn:active { transform: translateY(1px); }
body.ui .btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
body.ui .btn-primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
body.ui .btn-quiet { background: transparent; border-color: transparent; color: var(--link); padding-left: 8px; padding-right: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(54, 117, 196, .45); }
body.ui .btn-quiet:hover { background: rgba(20, 51, 155, .05); border-color: transparent; }
body.ui .btn-danger { color: var(--red-text); border-color: #e6bcbc; }
body.ui .btn-danger:hover { background: var(--red-tint); border-color: var(--red); }
body.ui .btn-sm { min-height: 30px; padding: 4px 10px; font-size: 13px; }
body.ui .btn[disabled], body.ui .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
body.ui .btn.is-busy { cursor: progress; }

/* ---------- Forms ---------- */
body.ui .form { display: grid; gap: var(--s4); }
body.ui .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s4); }
body.ui .field { display: grid; gap: 6px; align-content: start; }
body.ui .field > label, body.ui .field > .label, body.ui legend { font-weight: 500; font-size: 13.5px; color: var(--ink); }
body.ui .field .help { color: var(--muted); font-size: 12.5px; line-height: 18px; }
body.ui .field .error-text, body.ui .error-text { color: var(--red-text); font-size: 12.5px; font-weight: 500; }
body.ui .field .error-text::before, body.ui .error-text::before { content: "⚠ "; }
body.ui input[type=text], body.ui input[type=search], body.ui input[type=date], body.ui input[type=email], body.ui input[type=password], body.ui input[type=number], body.ui input[type=url], body.ui input[type=month], body.ui input:not([type]), body.ui select, body.ui textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; font: 400 14px/22px "Poppins", Arial, sans-serif; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-surface); transition: border-color var(--ease), box-shadow var(--ease); }
body.ui textarea { min-height: 96px; resize: vertical; }
body.ui input:hover, body.ui select:hover, body.ui textarea:hover { border-color: #aab5c9; }
body.ui input:focus-visible, body.ui select:focus-visible, body.ui textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 0; box-shadow: 0 0 0 4px rgba(20, 51, 155, .12); border-color: var(--navy); border-radius: var(--r-surface); }
body.ui [aria-invalid="true"] { border-color: var(--red) !important; }
body.ui input[type=file] { font: inherit; font-size: 13px; }
body.ui fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
body.ui legend { padding: 0; margin-bottom: var(--s2); }
body.ui .choices { display: flex; gap: var(--s2) var(--s5); flex-wrap: wrap; }
body.ui .choice { display: inline-flex; align-items: flex-start; gap: var(--s2); cursor: pointer; line-height: 20px; }
body.ui .choice input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--navy); flex: none; }
body.ui .form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
body.ui .inline-form { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; margin: 0; }
body.ui .inline-form .field { min-width: 160px; }
body.ui details > summary { cursor: pointer; list-style: none; }
body.ui details > summary::-webkit-details-marker { display: none; }
body.ui details > summary .chev { display: inline-block; transition: transform var(--ease); margin-right: 6px; color: var(--muted); }
body.ui details[open] > summary .chev { transform: rotate(90deg); }

/* ---------- Badges ---------- */
body.ui .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); font-size: 12.5px; line-height: 20px; font-weight: 500; white-space: nowrap; background: var(--flat); color: var(--muted); border: 1px solid var(--line); }
body.ui .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
body.ui .badge.plain::before { display: none; }
body.ui .badge.queued, body.ui .badge.running { background: var(--blue-tint); color: var(--navy); border-color: #cddbf0; }
body.ui .badge.running::before { background: var(--blue); box-shadow: 0 0 0 3px rgba(54, 117, 196, .2); }
body.ui .badge.done, body.ui .badge.approved, body.ui .badge.final, body.ui .badge.completed, body.ui .badge.active { background: var(--green-tint); color: var(--green-text); border-color: #d3e7b8; }
body.ui .badge.done::before, body.ui .badge.approved::before, body.ui .badge.final::before, body.ui .badge.completed::before, body.ui .badge.active::before { background: var(--lime); box-shadow: 0 0 0 1px #7da12a inset; }
body.ui .badge.failed, body.ui .badge.blocked { background: var(--red-tint); color: var(--red-text); border-color: #efc9c9; }
body.ui .badge.draft, body.ui .badge.completed_with_errors { background: var(--amber-tint); color: var(--amber-text); border-color: #f1d9b3; }
body.ui .badge.prospect, body.ui .badge.none, body.ui .badge.cancelled, body.ui .badge.paused, body.ui .badge.former { background: var(--flat); color: var(--muted); }
/* Severity (issues) */
body.ui .sev { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: 12px; line-height: 18px; font-weight: 600; }
body.ui .sev.error, body.ui .sev.critical { background: var(--red); color: #fff; }
body.ui .sev.warning, body.ui .sev.serious { background: var(--amber-tint); color: var(--amber-text); box-shadow: inset 0 0 0 1px var(--amber); }
body.ui .sev.moderate { background: var(--blue-tint); color: var(--navy); }
body.ui .sev.notice, body.ui .sev.minor { background: var(--flat); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
body.ui .change.up { color: var(--green-text); font-weight: 500; }
body.ui .change.down { color: var(--muted); font-weight: 500; }

/* ---------- Messages ---------- */
body.ui .msg { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-surface); border: 1px solid var(--line); background: var(--surface); margin-bottom: var(--s5); }
body.ui .msg::before { font-weight: 600; flex: none; }
body.ui .msg.ok { border-color: #d3e7b8; background: #f6fbef; } body.ui .msg.ok::before { content: "✓"; color: var(--green-text); }
body.ui .msg.error { border-color: #efc9c9; background: #fdf6f6; } body.ui .msg.error::before { content: "!"; color: var(--red-text); }
body.ui .msg.warn { border-color: #f1d9b3; background: #fefaf2; } body.ui .msg.warn::before { content: "!"; color: var(--amber-text); }
body.ui .msg.info { border-color: #cddbf0; background: #f5f8fd; } body.ui .msg.info::before { content: "i"; color: var(--navy); }
body.ui .msg p:last-child { margin: 0; }

/* ---------- Empty state ---------- */
body.ui .empty { text-align: center; padding: var(--s6) var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--r-surface); background: rgba(255, 255, 255, .7); }
body.ui .empty h3 { margin-bottom: var(--s1); }
body.ui .empty p { color: var(--muted); max-width: 52ch; margin: 0 auto var(--s4); }

/* ---------- Jobs ---------- */
body.ui .jobs { list-style: none; margin: 0; padding: 0; }
body.ui .jobs li { display: grid; grid-template-columns: minmax(140px, 1.2fr) auto minmax(0, 3fr) auto; gap: var(--s3); align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
body.ui .jobs li:last-child { border-bottom: 0; }
body.ui .jobs .job-name { font-weight: 500; }
body.ui .jobs .job-detail { color: var(--muted); font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
body.ui .jobs .job-detail.err { color: var(--red-text); }
body.ui .jobs .job-who { color: var(--muted); font-size: 12.5px; }
@media (max-width: 720px) { body.ui .jobs li { grid-template-columns: 1fr auto; } body.ui .jobs .job-detail, body.ui .jobs .job-who { grid-column: 1 / -1; } }

/* ---------- Workspace (Client SEO Projects) ---------- */
body.ui .workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); align-items: start; }
body.ui .side { position: sticky; top: 76px; padding: var(--s3); }
body.ui .side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.ui .side a { display: block; padding: 8px 12px; border-radius: var(--r-btn); color: var(--ink); text-decoration: none; font-weight: 500; }
body.ui .side a:hover { background: rgba(20, 51, 155, .06); }
body.ui .side a[aria-current="page"] { background: #fff; color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--lime), 0 1px 2px rgba(20, 27, 51, .06); }
@media (max-width: 900px) {
  body.ui .workspace { grid-template-columns: minmax(0, 1fr); }
  body.ui .side { position: static; overflow-x: auto; }
  body.ui .side ul { display: flex; gap: var(--s1); }
  body.ui .side a { white-space: nowrap; }
}

/* ---------- Steps (Prospects) ---------- */
body.ui .step-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; margin-right: var(--s2); flex: none; }
body.ui .step-num.done { background: #fff; color: var(--green-text); box-shadow: inset 0 0 0 2px var(--lime); }

/* ---------- Charts (server SVG) ---------- */
body.ui .chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface); padding: var(--s3) var(--s4); }
body.ui .chart h3 { font-size: 13.5px; margin-bottom: var(--s1); }
body.ui .chart svg { display: block; }

/* ---------- Login ---------- */
body.ui .auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); }
body.ui .auth .panel { width: 100%; max-width: 400px; }
body.ui .auth img { height: 36px; display: block; margin-bottom: var(--s5); }

/* ---------- Style guide ---------- */
body.ui .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
body.ui .swatch { border-radius: var(--r-surface); overflow: hidden; border: 1px solid var(--line); background: #fff; font-size: 12.5px; }
body.ui .swatch .chip { height: 56px; }
body.ui .swatch div:last-child { padding: 8px 10px; }

@media (max-width: 640px) {
  body.ui main { padding: var(--s5) var(--s4) var(--s6); }
  body.ui .nav { padding: var(--s2) var(--s4); gap: var(--s2); }
  body.ui .panel { padding: var(--s4); }
  body.ui h1, body.ui .t-page { font-size: 24px; line-height: 32px; }
}

/* Screen-reader-only text */
body.ui .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.ui .panel > .surface + .surface, body.ui .panel > .surface + .form, body.ui .panel > .form + .surface { margin-top: var(--s4); }
body.ui .panel > p + .surface, body.ui .panel > .tiles + .surface, body.ui .panel > .tiles + .grid-2 { margin-top: var(--s4); }

/* Signed-in person (nav) */
body.ui .nav-who { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); }
body.ui .nav-who strong { font-weight: 500; }
body.ui .badge.role-admin { background: var(--navy); color: #fff; border-color: var(--navy); }
body.ui .badge.role-team { background: var(--blue-tint); color: var(--navy); border-color: #cddbf0; }

/* Service badges (why a client appears in a list) */
body.ui .badge.service { background: #fff; color: var(--navy); border-color: #cddbf0; font-size: 12px; }
body.ui .badge.service.pending { color: var(--muted); border-style: dashed; }

/* Sub-navigation (tabs inside an area, e.g. Clients lists) */
body.ui .subnav { margin: 0 0 var(--s4); }
body.ui .subnav ul { list-style: none; margin: 0; padding: 4px; display: inline-flex; flex-wrap: wrap; gap: 2px;
  background: var(--glass-panel); border: 1px solid var(--glass-border); border-radius: var(--r-panel);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.ui .subnav a { display: block; padding: 8px 14px; border-radius: 12px; color: var(--ink); font-weight: 500; text-decoration: none; }
body.ui .subnav a:hover { background: rgba(20, 51, 155, .06); }
body.ui .subnav a[aria-current="page"] { background: #fff; color: var(--navy); font-weight: 600; box-shadow: inset 0 -3px 0 var(--lime), 0 1px 2px rgba(20, 27, 51, .06); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.ui .subnav ul { background: var(--glass-fallback); } }

/* Filters bar */
body.ui .filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
body.ui .filters .field { min-width: 150px; flex: 1 1 150px; }
body.ui .filters .field.grow { flex: 2 1 240px; }

/* Definition lists (client page details) */
body.ui dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s3) var(--s5); margin: 0; }
body.ui dl.facts div { min-width: 0; }
body.ui dl.facts dt { color: var(--muted); font-size: 12.5px; line-height: 18px; }
body.ui dl.facts dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }

/* Service status grid (client page, add client) */
body.ui .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--s3) var(--s4); }

/* In-page confirmation (instead of browser pop-ups) */
body.ui details.confirm > summary { display: inline-flex; }
body.ui details.confirm[open] > summary { opacity: .7; }

/* Row headers inside data tables (e.g. Access) read as data, not column headers */
body.ui table.data tbody th { background: transparent; border-bottom: 1px solid var(--line); white-space: normal; }
body.ui table.data tbody tr:last-child th { border-bottom: 0; }

/* ---------- Keyword research ---------- */
body.ui .tier { display: inline-block; padding: 1px 9px; border-radius: var(--r-pill); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; color: var(--ink); background: var(--flat); border: 1px solid var(--line); }
body.ui .tier.t1 { background: #eef7dc; border-color: #c9e39a; }
body.ui .tier.t1b { background: #e6effa; border-color: #b9cfee; }
body.ui .tier.t2 { background: #efeaf8; border-color: #d3c6ec; }
body.ui .tier.t3 { background: #fbf1e1; border-color: #f0d6a8; }
body.ui .tier.excluded { color: var(--muted); }
body.ui table.data th button.sort { all: unset; cursor: pointer; font: inherit; color: inherit; border-radius: 4px; }
body.ui table.data th button.sort::after { content: "↕"; margin-left: 4px; color: var(--muted); font-size: 11px; }
body.ui table.data th[aria-sort="ascending"] button.sort::after { content: "▲"; color: var(--navy); }
body.ui table.data th[aria-sort="descending"] button.sort::after { content: "▼"; color: var(--navy); }
body.ui table.data th button.sort:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
body.ui button.star { all: unset; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; border-radius: 6px; color: var(--muted); }
body.ui button.star[aria-pressed="true"] { color: #8a5a00; }
body.ui button.star:hover { background: rgba(20, 51, 155, .06); }
body.ui button.star:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; }
body.ui .kr-table select { padding: 4px 6px; font-size: 12.5px; min-width: 0; width: 7.5em; }
body.ui .kr-table td.kw { min-width: 13em; }
body.ui .kr-table abbr { text-decoration: none; }
body.ui .kr-table tr:target td { background: var(--blue-tint); }
body.ui .kr-table tr { scroll-margin-top: 120px; }
body.ui .kr-table td { vertical-align: middle; }
body.ui svg.spark { display: block; }

/* ---------- Tooltips (details.tip): a "?" that opens a short explanation ---------- */
body.ui details.tip { display: inline-block; position: relative; margin-left: 4px; vertical-align: middle; }
body.ui details.tip > summary { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 11px; font-weight: 600; line-height: 1; }
body.ui details.tip > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
body.ui details.tip .tip-body { position: absolute; right: 0; top: 24px; z-index: 5; width: 300px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgba(20, 27, 51, .12); color: var(--ink); font-size: 12.5px; line-height: 18px; font-weight: 400; text-align: left; white-space: normal; }