/* ===========================================================================
   ConvertDash — the application stylesheet.

   Material 3 in spirit rather than by import: tonal surfaces, a state layer on
   every interactive thing, pill shaped selection, 1dp and 2dp elevations, and
   type that steps rather than drifts. Hand written, no framework, no build.

   Light is the original palette. Dark is the warm one that matches the pages
   that sell the product: near-black warm surfaces and a burnt rust key colour.

   Naming. Two prefixes live here on purpose. `cnwa-` is the vocabulary the
   screens were already written in and is kept so a redesign does not mean
   editing every view; `cd-` is for components that did not exist before. They
   share the same tokens, so the two read as one design.

   Theming. Dark mode is a class on <html> (`cnwa-dark`), never
   prefers-color-scheme alone, because a person who pinned light on a laptop
   that flips dark at sunset means it. The pre-paint script in the shell
   resolves the stored preference before the first frame.

   Tokens are on :root so anything on the page can use them, including the
   signed out screens, which do not carry the app wrapper.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */

:root {
  /* Brand ramp. 40 is the key colour; 80 is its dark mode counterpart. */
  --cd-primary-10: #001b3d;
  --cd-primary-20: #002f66;
  --cd-primary-30: #004494;
  --cd-primary-40: #1e6bff;
  --cd-primary-50: #4a87ff;
  --cd-primary-60: #77a3ff;
  --cd-primary-80: #b8cfff;
  --cd-primary-90: #dbe6ff;
  --cd-primary-95: #eef3ff;

  --cd-accent-40: #7c4dff;
  --cd-accent-90: #e8defd;

  --cd-teal-40: #00857a;
  --cd-teal-90: #cdf1ec;

  /* Roles */
  --cd-primary: var(--cd-primary-40);
  --cd-on-primary: #ffffff;
  --cd-primary-container: var(--cd-primary-90);
  --cd-on-primary-container: var(--cd-primary-20);

  --cd-surface: #ffffff;
  --cd-surface-dim: #f2f4f8;
  --cd-surface-1: #f7f9fc;
  --cd-surface-2: #eff3f9;
  --cd-surface-3: #e7edf6;
  --cd-background: #f4f6fa;

  --cd-on-surface: #121417;
  --cd-on-surface-variant: #5a6270;
  --cd-outline: #cbd2dd;
  --cd-outline-variant: #e4e8ef;

  --cd-success: #0f7a4d;
  --cd-success-container: #d6f3e4;
  --cd-warn: #9a5b00;
  --cd-warn-container: #ffeacc;
  --cd-error: #b3261e;
  --cd-error-container: #fbdad7;
  --cd-info: var(--cd-primary-40);
  --cd-info-container: var(--cd-primary-95);

  /* State layers. Material puts a translucent wash over a component rather
     than swapping its colour, which keeps hover legible on every surface. */
  --cd-state-hover: rgba(18, 20, 23, .055);
  --cd-state-press: rgba(18, 20, 23, .10);
  --cd-state-primary-hover: rgba(30, 107, 255, .10);
  --cd-state-primary-press: rgba(30, 107, 255, .16);

  /* Elevation */
  --cd-e1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .07);
  --cd-e2: 0 2px 4px rgba(16, 24, 40, .06), 0 4px 10px rgba(16, 24, 40, .08);
  --cd-e3: 0 6px 12px rgba(16, 24, 40, .09), 0 12px 28px rgba(16, 24, 40, .11);

  /* Shape */
  --cd-r-xs: 6px;
  --cd-r-sm: 10px;
  --cd-r-md: 14px;
  --cd-r-lg: 20px;
  --cd-r-xl: 28px;
  --cd-r-full: 999px;

  /* Type */
  /* A system stack, not a web font. An analytics product whose pitch is that
     nothing leaves your server should not make every page load call out to a
     font host, and the stack below is already installed on every machine that
     will open this. */
  --cd-font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --cd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Motion. Material's standard easing; short enough not to be in the way. */
  --cd-ease: cubic-bezier(.2, 0, 0, 1);
  --cd-fast: 120ms;
  --cd-base: 200ms;

  /* Layout */
  --cd-side-w: 268px;
  --cd-head-h: 64px;

  /* Legacy aliases, so markup written against the old vocabulary still
     resolves. Kept as aliases rather than duplicated values: one place to
     change a colour. */
  --cnwa-accent: var(--cd-primary);
  --cnwa-ink-1: var(--cd-on-surface);
  --cnwa-ink-2: var(--cd-on-surface-variant);
  --cnwa-line: var(--cd-outline-variant);
  --cnwa-card: var(--cd-surface);
  --cnwa-warn: var(--cd-warn);
  --cnwa-heat: var(--cd-primary);
  --cnwa-code-bg: var(--cd-surface-2);
  --cnwa-code-fg: var(--cd-on-surface);
  --cnwa-mono: var(--cd-mono);
}

html.cnwa-dark {
  /* Dark redeclares the key ramp warm. Light keeps the original blue one in
     :root, so the two themes are different palettes rather than one palette
     inverted, and everything downstream still reads a single token name. */
  --cd-primary-10: #2b0f02;
  --cd-primary-20: #4a1a05;
  --cd-primary-30: #6d2707;
  --cd-primary-40: #c2410c;
  --cd-primary-50: #dd5a1c;
  --cd-primary-60: #e8873f;
  --cd-primary-80: #f5bd91;
  --cd-primary-90: #fbe3d4;
  --cd-primary-95: #fdf1e9;

  --cd-accent-40: #7c3aed;
  --cd-accent-90: #e9ddfd;
  --cd-teal-40: #0d9488;
  --cd-teal-90: #cdeeea;

  --cd-primary: var(--cd-primary-60);
  --cd-on-primary: #14120f;
  --cd-primary-container: #6d2707;
  --cd-on-primary-container: var(--cd-primary-90);

  --cd-surface: #211e1a;
  --cd-surface-dim: #14120f;
  --cd-surface-1: #1c1917;
  --cd-surface-2: #26221d;
  --cd-surface-3: #2e2922;
  --cd-background: #14120f;

  --cd-on-surface: #f5f1ea;
  --cd-on-surface-variant: #b5aba0;
  --cd-outline: #4a433a;
  --cd-outline-variant: #332e28;

  --cd-success: #4ade80;
  --cd-success-container: #10361f;
  --cd-warn: #fbbf24;
  --cd-warn-container: #3d2c07;
  --cd-error: #f87171;
  --cd-error-container: #451514;
  --cd-info: var(--cd-primary-60);
  --cd-info-container: #35271c;

  --cd-state-hover: rgba(245, 241, 234, .07);
  --cd-state-press: rgba(245, 241, 234, .12);
  --cd-state-primary-hover: rgba(232, 135, 63, .14);
  --cd-state-primary-press: rgba(232, 135, 63, .22);

  --cd-e1: 0 1px 2px rgba(0, 0, 0, .4);
  --cd-e2: 0 2px 6px rgba(0, 0, 0, .45);
  --cd-e3: 0 10px 30px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   2. Ground
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/*
 * The hidden attribute wins over any display this sheet sets.
 *
 * Its default is display:none at the very bottom of the cascade, so any rule
 * here giving an element display:flex or display:block silently defeats it.
 * The screens toggle notices and the drawer scrim with hidden, so this one
 * line is what makes that work at all.
 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cd-background);
  color: var(--cd-on-surface);
  font-family: var(--cd-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05", "ss01";
}

a { color: var(--cd-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.012em; color: var(--cd-on-surface); }
h1 { font-size: 24px; line-height: 1.25; }
h2 { font-size: 17px; line-height: 1.35; }
h3 { font-size: 15px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

code, kbd, samp { font-family: var(--cd-mono); font-size: .92em; }

hr { border: 0; border-top: 1px solid var(--cd-outline-variant); margin: 20px 0; }

::selection { background: var(--cd-primary-container); color: var(--cd-on-primary-container); }

:focus-visible {
  outline: 2px solid var(--cd-primary);
  outline-offset: 2px;
  border-radius: var(--cd-r-xs);
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.cd-icon { flex: none; vertical-align: -.18em; }

.muted, .description, .hint, .sub { color: var(--cd-on-surface-variant); }
.description, .hint { font-size: 13px; }

.cnwa-num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Custom scrollbars. The sidebar scrolls, and a default Windows scrollbar
   inside a 268px drawer takes a visible bite out of it. */
.cd-scroll { scrollbar-width: thin; scrollbar-color: var(--cd-outline) transparent; }
.cd-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.cd-scroll::-webkit-scrollbar-track { background: transparent; }
.cd-scroll::-webkit-scrollbar-thumb {
  background: var(--cd-outline); border-radius: var(--cd-r-full);
  border: 2px solid transparent; background-clip: content-box;
}
.cd-scroll::-webkit-scrollbar-thumb:hover { background-clip: border-box; }

/* ---------------------------------------------------------------------------
   3. Application frame

   The header and the menu on the account screens (Sites and tags, Team,
   Account, Plan and billing, Documentation) are the dashboard's own: the same
   markup, printed by the same code. These rules are the plugin stylesheet's
   rules for that chrome, carried over and scoped to .cd-shell, so the account
   screens and the dashboard look and behave the same while the screens below
   the header keep this sheet's own components. When the plugin chrome
   changes, this block changes with it.
   ------------------------------------------------------------------------ */

body.cd-shell-body { background: #f0f0f1; }
html.cnwa-dark body.cd-shell-body { background: #14120f; }

.cd-shell-body #wpcontent { padding: 0; }
.cd-shell-body #wpbody-content { padding-bottom: 40px; }


.cd-shell {
  margin: 10px 20px 0 0;
}
@media (max-width: 782px) { .cd-shell { margin-right: 0; } }

.cd-shell .cnwa-app { width: 100%; max-width: none; }

/* The plugin's tokens, on the chrome only, so the screens keep theirs. */
.cd-shell .cnwa-head,
.cd-shell .cnwa-side,
.cd-shell .cnwa-foot {
  --cnwa-surface: #ffffff;
  --cnwa-sunken: #f6f7f7;
  --cnwa-line: #dcdcde;
  --cnwa-line-soft: #f0f0f1;
  --cnwa-ink: #1d2327;
  --cnwa-ink-2: #50575e;
  --cnwa-ink-3: #646970;
  --cnwa-accent: #1b4dd1;
  --cnwa-accent-hover: #123a9e;
  --cnwa-accent-tint: #eaf0ff;
  --cnwa-good: #0a7c53;
  --cnwa-control-line: #8c8f94;
  --cnwa-radius: 14px;
  --cnwa-radius-xs: 8px;
  --cnwa-radius-pill: 999px;
  --cnwa-shade-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --cnwa-ease: cubic-bezier(.2, 0, 0, 1);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cnwa-ink);
}

html.cnwa-dark .cd-shell .cnwa-head,
html.cnwa-dark .cd-shell .cnwa-side,
html.cnwa-dark .cd-shell .cnwa-foot {
  --cnwa-surface: #211e1a;
  --cnwa-sunken: #26221d;
  --cnwa-line: #4a433a;
  --cnwa-line-soft: #2a2622;
  --cnwa-ink: #f5f1ea;
  --cnwa-ink-2: #b5aba0;
  --cnwa-ink-3: #8f867b;
  --cnwa-accent: #f0b657;
  --cnwa-accent-hover: #f7cf8e;
  --cnwa-accent-tint: #38301f;
  --cnwa-good: #4cc38a;
  --cnwa-control-line: #5a5249;
}

.cd-shell .cnwa-head a,
.cd-shell .cnwa-side a { color: var(--cnwa-accent); text-decoration: none; }

/* --- header --- */

.cd-shell .cnwa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--cnwa-line-soft);
}

.cd-shell .cnwa-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cd-shell .cd-head-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cnwa-ink); text-decoration: none; }
.cd-shell .cd-head-brand:hover { text-decoration: none; }
.cd-shell .cd-head-brand:hover h1 { color: var(--cnwa-accent); }
.cd-shell .cnwa-head-title h1 {
  font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: normal;
  margin: 0; padding: 0; color: var(--cnwa-ink);
}
.cd-shell .cnwa-logo { display: block; width: 34px; height: 34px; flex: 0 0 auto; }
.cd-shell .cnwa-site { color: var(--cnwa-ink-2); font-size: 13px; }
.cd-shell .cnwa-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cd-shell .cnwa-head .cnwa-select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--cnwa-line);
  background: var(--cnwa-surface);
  color: var(--cnwa-ink);
  border-radius: var(--cnwa-radius-xs);
  padding: 6px 30px 6px 12px;
  font: inherit;
  font-size: 13px;
  width: auto;
  height: auto;
  min-height: 38px;
  line-height: 1.4;
  box-shadow: var(--cnwa-shade-1);
  cursor: pointer;
  transition: border-color .15s var(--cnwa-ease), box-shadow .15s var(--cnwa-ease);
}
.cd-shell .cnwa-head .cnwa-select:hover { border-color: var(--cnwa-ink-3); }
.cd-shell .cnwa-head .cd-site-select { margin-left: 8px; max-width: 220px; }

.cd-shell .cnwa-icon-btn {
  border: 1px solid var(--cnwa-line);
  background: var(--cnwa-surface);
  color: var(--cnwa-ink-2);
  border-radius: var(--cnwa-radius-xs);
  box-shadow: var(--cnwa-shade-1);
  transition: background .15s var(--cnwa-ease), color .15s var(--cnwa-ease), border-color .15s var(--cnwa-ease);
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  place-content: center;
  cursor: pointer;
  text-decoration: none;
}
.cd-shell .cnwa-icon-btn svg { width: 16px; height: 16px; display: block; }
.cd-shell .cnwa-icon-btn:hover { color: var(--cnwa-accent); border-color: var(--cnwa-accent); text-decoration: none; }
.cd-shell .cnwa-icon-btn:focus-visible,
.cd-shell .cnwa-select:focus-visible { outline: 2px solid var(--cnwa-accent); outline-offset: 1px; }

.cd-shell .cnwa-theme-btn .cnwa-moon { display: none; }
html.cnwa-dark .cd-shell .cnwa-theme-btn .cnwa-sun { display: none; }
html.cnwa-dark .cd-shell .cnwa-theme-btn .cnwa-moon { display: block; }

.cd-shell .cd-appnav { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.cd-shell .cd-appnav .cnwa-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.cd-shell .cnwa-head .cd-plan {
  position: static;
  display: inline-flex; flex-direction: row; align-items: center; gap: 5px;
  padding: 4px 11px; margin: 0 6px 0 0;
  border: 0; border-radius: 999px; box-shadow: none;
  background: var(--cnwa-accent-tint);
  color: var(--cnwa-accent);
  font-weight: 600; font-size: 12px; line-height: 1.55; text-decoration: none; white-space: nowrap;
}
.cd-shell .cnwa-head .cd-plan::before { content: none; }
.cd-shell .cnwa-head .cd-plan .cd-icon { width: 14px; height: 14px; }
.cd-shell .cnwa-head .cd-plan-free,
.cd-shell .cnwa-head .cd-plan-free:hover { background: linear-gradient(135deg, #1b4dd1, #7a3bd8); color: #fff; }
.cd-shell .cnwa-head .cd-plan:hover { filter: brightness(1.05); }
@media (max-width: 782px) {
  .cd-shell .cd-appnav .cnwa-icon-btn[href="/docs"], .cd-shell .cnwa-head .cd-plan { display: none; }
}

/* --- shell and menu --- */

.cd-shell .cnwa-shell {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.cd-shell .cnwa-main { min-width: 0; }

/* An account with no sites has no report menu; without this the main column
   fell into the 208px menu track and every account screen was a sliver. */
.cd-shell .cnwa-shell.cd-shell-nomenu { grid-template-columns: minmax(0, 1fr); }

/* The site picker in the header shrinks on a phone rather than pushing the
   page sideways once an account has more than one site. */
.cd-shell .cnwa-head-title .cd-site-select { min-width: 0; max-width: 100%; flex: 0 1 auto; }
@media (max-width: 480px) {
  .cd-shell .cnwa-head-title .cd-site-select { max-width: 42vw; }
}

.cd-shell .cnwa-side {
  position: sticky;
  top: 16px;
  background: var(--cnwa-surface);
  border: 1px solid rgba(16, 24, 40, .06);
  border-radius: var(--cnwa-radius);
  box-shadow: var(--cnwa-shade-1);
  padding: 0 0 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.cd-shell .cnwa-side-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--cnwa-line-soft);
  background: var(--cnwa-sunken);
}

.cd-shell .cnwa-side-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cnwa-ink-2);
  white-space: nowrap;
}

.cd-shell .cnwa-side-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--cnwa-line) transparent;
}
.cd-shell .cnwa-side-nav::-webkit-scrollbar { width: 8px; }
.cd-shell .cnwa-side-nav::-webkit-scrollbar-track { background: transparent; }
.cd-shell .cnwa-side-nav::-webkit-scrollbar-thumb {
  background: var(--cnwa-line); border-radius: 4px;
  border: 2px solid transparent; background-clip: content-box;
}

.cd-shell .cnwa-side-group { margin-bottom: 10px; }
.cd-shell .cnwa-side-group + .cnwa-side-group { border-top: 1px solid var(--cnwa-line-soft); padding-top: 10px; }

.cd-shell .cnwa-side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cnwa-ink-3);
  white-space: nowrap;
}

.cd-shell .cnwa-side-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  color: var(--cnwa-ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}
.cd-shell .cnwa-side-toggle:hover { background: var(--cnwa-sunken); color: var(--cnwa-ink); }
.cd-shell .cnwa-side-toggle:focus-visible { outline: 2px solid var(--cnwa-accent); outline-offset: -2px; }
.cd-shell .cnwa-side-ico { width: 15px; height: 15px; flex: 0 0 auto; }
.cd-shell .cnwa-side-chev {
  width: 14px; height: 14px; margin-left: auto; flex: 0 0 auto;
  transition: transform .18s var(--cnwa-ease);
}
.cd-shell .cnwa-side-toggle[aria-expanded="true"] .cnwa-side-chev { transform: rotate(90deg); }
.cd-shell .cnwa-side-group.has-active .cnwa-side-toggle { color: var(--cnwa-accent); }
.cd-shell .cnwa-side-group:not(.is-open):not(.is-bare) .cnwa-side-list { display: none; }

.cd-shell .cnwa-side-list { margin: 0; padding: 0; list-style: none; }

.cd-shell .cnwa-side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  margin: 0;
  border-radius: var(--cnwa-radius-pill);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cnwa-ink-2);
  text-decoration: none;
  transition: background .15s var(--cnwa-ease), color .15s var(--cnwa-ease);
}
.cd-shell .cnwa-side-link:hover,
.cd-shell .cnwa-side-link:focus { background: var(--cnwa-sunken); color: var(--cnwa-ink); text-decoration: none; }
.cd-shell .cnwa-side-link:focus-visible { outline: 2px solid var(--cnwa-accent); outline-offset: -2px; }
.cd-shell .cnwa-side-glyph { width: 17px; height: 17px; flex: 0 0 auto; opacity: .78; }
.cd-shell .cnwa-side-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-shell .cnwa-side-link.is-active { background: var(--cnwa-accent-tint); color: var(--cnwa-accent); font-weight: 600; }
.cd-shell .cnwa-side-link.is-active .cnwa-side-glyph { opacity: 1; }
.cd-shell .cnwa-side-link.is-glance { font-weight: 600; color: var(--cnwa-ink); }
.cd-shell .cnwa-side-link.is-glance .cnwa-side-glyph { opacity: .9; }

/* A report or screen the plan does not include. The same mark the dashboard draws. */
.cd-shell .cnwa-side-link.is-locked { opacity: .72; }
.cd-shell .cnwa-side-link.is-locked::after {
  content: ""; width: 12px; height: 12px; margin-left: auto; flex: none;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 1 0-8 0v2z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 1 0-8 0v2z"/></svg>') center / contain no-repeat;
}

.cd-shell .cnwa-side .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.cd-shell .cnwa-nav-toggle { display: none; }

/* --- footer --- */

.cd-shell .cnwa-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 28px 0 0; padding: 14px 2px 0;
  border-top: 1px solid var(--cnwa-line-soft);
  color: var(--cnwa-ink-3); font-size: 12.5px;
}
.cd-shell .cnwa-foot-links { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cd-shell .cnwa-foot-links a { color: var(--cnwa-ink-2); text-decoration: none; }
.cd-shell .cnwa-foot-links a:hover { color: var(--cnwa-accent); text-decoration: underline; }

/* --- the phone menu: the same button and drop down the dashboard uses --- */

@media screen and (max-width: 960px) {
  .cd-shell .cnwa-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .cd-shell .cnwa-side {
    position: relative;
    z-index: 30;
    display: block;
    max-height: none;
    overflow: visible;
    top: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .cd-shell .cnwa-side-bar { padding: 0; border-bottom: 0; background: none; }
  .cd-shell .cnwa-side-heading { display: none; }

  .cd-shell .cnwa-nav-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 9px 14px;
    border: 1px solid var(--cnwa-line);
    border-radius: 8px;
    background: var(--cnwa-surface);
    color: var(--cnwa-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .cd-shell .cnwa-nav-toggle:focus-visible { outline: 2px solid var(--cnwa-accent); outline-offset: 1px; }

  .cd-shell .cnwa-nav-toggle-eyebrow {
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--cnwa-ink-3); flex: 0 0 auto;
  }
  .cd-shell .cnwa-nav-toggle-name {
    font-size: 14.5px; font-weight: 600; color: var(--cnwa-ink);
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cd-shell .cnwa-nav-caret {
    width: 18px; height: 18px; flex: 0 0 auto; color: var(--cnwa-ink-3);
    transition: transform .15s ease;
  }
  .cd-shell .cnwa-app[data-nav="open"] .cnwa-nav-caret { transform: rotate(180deg); }

  .cd-shell .cnwa-side-nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: min(66vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px;
    border: 1px solid var(--cnwa-line);
    border-radius: 10px;
    background: var(--cnwa-surface);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
  }
  .cd-shell .cnwa-app[data-nav="open"] .cnwa-side-nav { display: block; }

  .cd-shell .cnwa-side-group { margin-bottom: 8px; }
  .cd-shell .cnwa-side-group + .cnwa-side-group { padding-top: 8px; }
  .cd-shell .cnwa-side-link { min-height: 40px; padding: 7px 10px; }
  .cd-shell .cnwa-side-list li + li { margin-top: 1px; }
}

@media screen and (max-width: 700px) {
  .cd-shell .cnwa-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin: 4px 0 14px;
  }
  .cd-shell .cnwa-head-title { gap: 8px; }
  .cd-shell .cnwa-head-title h1 { font-size: 18px; }
  .cd-shell .cnwa-head-title .cnwa-logo { width: 26px; height: 26px; }
  .cd-shell .cnwa-site { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cd-shell .cnwa-head-tools { gap: 8px; }
  .cd-shell .cnwa-icon-btn { width: 40px; height: 40px; flex: 0 0 auto; }
}

@media screen and (max-width: 380px) {
  .cd-shell .cnwa-head-title h1 { font-size: 17px; }
}

/* --- the screens inside the frame --- */

.cnwa-page-head { margin-bottom: 20px; }
.cnwa-page-head h1 { display: flex; align-items: center; gap: 10px; }
.cnwa-page-head p { margin-top: 6px; max-width: 70ch; }

/* ---------------------------------------------------------------------------
   4. Surfaces
   ------------------------------------------------------------------------ */

.cnwa-card, .cnwa-panel, .card, .tile {
  background: var(--cd-surface);
  border: 1px solid var(--cd-outline-variant);
  border-radius: var(--cd-r-lg);
  box-shadow: var(--cd-e1);
}

.cnwa-card { padding: 20px; margin-bottom: 18px; }
.cnwa-card > h2 { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.cnwa-card > h2 + .description { margin-bottom: 14px; }

.cnwa-panel { overflow: hidden; margin-bottom: 18px; }
.cnwa-panel-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cd-outline-variant);
  background: var(--cd-surface-1);
  font-size: 14px; font-weight: 650;
}
.cnwa-panel-head .cd-spacer { flex: 1 1 auto; }

.cd-section-title {
  display: flex; align-items: center; gap: 9px;
  margin: 26px 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cd-on-surface-variant);
}
.cd-section-title::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--cd-outline-variant);
}

.cd-grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cd-grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ---------------------------------------------------------------------------
   5. Metrics
   ------------------------------------------------------------------------ */

.cnwa-metrics {
  display: grid; gap: 14px;
  /* Six metrics, so six columns when there is room. auto-fit with a wider
     minimum left one card stranded on its own second row, which reads as an
     error rather than as a layout. */
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  margin-bottom: 20px;
}

.cnwa-metric {
  position: relative; overflow: hidden;
  padding: 18px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-outline-variant);
  border-radius: var(--cd-r-lg);
  box-shadow: var(--cd-e1);
  transition: box-shadow var(--cd-base) var(--cd-ease), transform var(--cd-base) var(--cd-ease);
}
.cnwa-metric:hover { box-shadow: var(--cd-e2); transform: translateY(-1px); }

/* A tonal wash in the corner, so a row of cards is not a row of white
   rectangles. Decorative only, and behind the numbers. */
.cnwa-metric::after {
  content: "";
  position: absolute; top: -50px; right: -50px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, var(--cd-primary) 0%, transparent 70%);
  opacity: .1;
  pointer-events: none;
}

.cnwa-metric-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cd-on-surface-variant);
}
.cnwa-metric-value {
  display: block;
  margin-top: 8px;
  font-size: 30px; font-weight: 680; line-height: 1.1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.cnwa-metric-delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  padding: 2px 9px 2px 7px;
  border-radius: var(--cd-r-full);
  font-size: 12px; font-weight: 650;
  background: var(--cd-surface-2); color: var(--cd-on-surface-variant);
}
.cnwa-metric-delta.is-up { background: var(--cd-success-container); color: var(--cd-success); }
.cnwa-metric-delta.is-down { background: var(--cd-error-container); color: var(--cd-error); }

/* ---------------------------------------------------------------------------
   6. Tables and bars
   ------------------------------------------------------------------------ */

.cnwa-table, table.cd-table, .form-table { width: 100%; border-collapse: collapse; }

.cnwa-table th, .cnwa-table td { padding: 10px 18px; text-align: left; }
.cnwa-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--cd-surface-1);
  border-bottom: 1px solid var(--cd-outline-variant);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cd-on-surface-variant);
}
.cnwa-table tbody tr { border-bottom: 1px solid var(--cd-outline-variant); }
.cnwa-table tbody tr:last-child { border-bottom: 0; }
.cnwa-table tbody tr:hover { background: var(--cd-state-hover); }
.cnwa-table td { font-size: 13.5px; }

/* The inline bar behind a row's label: proportion without a second chart. */
.cnwa-bar-cell { position: relative; min-width: 0; }
.cnwa-bar {
  position: absolute; left: 0; top: 4px; bottom: 4px;
  border-radius: var(--cd-r-xs);
  background: var(--cd-primary);
  opacity: .12;
  pointer-events: none;
}
.cnwa-bar-label {
  position: relative;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.form-table th {
  width: 210px; padding: 14px 16px 14px 0; vertical-align: top;
  /* th defaults to centre, which reads as a mistake beside left aligned
     values. */
  text-align: left;
  font-size: 13px; font-weight: 650; color: var(--cd-on-surface);
}
.form-table td { padding: 12px 0; vertical-align: top; }
.form-table tr + tr th, .form-table tr + tr td { border-top: 1px solid var(--cd-outline-variant); }

.cnwa-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 44px 20px; text-align: center;
  color: var(--cd-on-surface-variant);
}
.cnwa-empty .cd-icon { width: 34px; height: 34px; opacity: .45; }

.cnwa-chart {
  min-height: 240px;
  padding: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cd-on-surface-variant);
}

/* ---------------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------------ */

.button, button.button, .btn, .cd-btn, button[type="submit"] {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px;
  border: 1px solid var(--cd-outline);
  border-radius: var(--cd-r-full);
  background: var(--cd-surface);
  color: var(--cd-on-surface);
  font: inherit; font-size: 13.5px; font-weight: 650;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--cd-fast) var(--cd-ease),
              box-shadow var(--cd-base) var(--cd-ease),
              border-color var(--cd-fast) var(--cd-ease);
}
.button:hover, .btn:hover, .cd-btn:hover { background: var(--cd-state-hover); text-decoration: none; }
.button:active, .btn:active, .cd-btn:active { background: var(--cd-state-press); }
.button:disabled, .cd-btn:disabled { opacity: .45; cursor: not-allowed; }

button.button-primary, .button-primary, .cd-btn-primary, button[type="submit"] {
  border-color: transparent;
  background: var(--cd-primary);
  color: var(--cd-on-primary);
  box-shadow: var(--cd-e1);
}
.button-primary:hover, .cd-btn-primary:hover, button[type="submit"]:hover {
  background: var(--cd-primary);
  filter: brightness(1.08);
  box-shadow: var(--cd-e2);
}
.button-primary:active, .cd-btn-primary:active { filter: brightness(.96); box-shadow: var(--cd-e1); }

button.cd-btn-tonal, .cd-btn-tonal {
  border-color: transparent;
  background: var(--cd-primary-container);
  color: var(--cd-on-primary-container);
}
.cd-btn-tonal:hover { background: var(--cd-primary-container); filter: brightness(.97); }

button.cd-btn-text, .cd-btn-text, .button-link {
  height: 36px; padding: 0 12px;
  border-color: transparent; background: transparent;
  color: var(--cd-primary);
}
.cd-btn-text:hover { background: var(--cd-state-primary-hover); }

button.cd-btn-danger, .cd-btn-danger {
  border-color: transparent;
  background: var(--cd-error-container);
  color: var(--cd-error);
}
button.cd-btn-danger:hover, .cd-btn-danger:hover {
  background: var(--cd-error-container); filter: brightness(.96);
}

.cd-btn-sm { height: 32px; padding: 0 14px; font-size: 12.5px; }
.cd-btn-block { width: 100%; }


/* ---------------------------------------------------------------------------
   8. Form controls
   ------------------------------------------------------------------------ */

label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--cd-outline);
  border-radius: var(--cd-r-sm);
  background: var(--cd-surface);
  color: var(--cd-on-surface);
  font: inherit; font-size: 14px;
  transition: border-color var(--cd-fast) var(--cd-ease), box-shadow var(--cd-fast) var(--cd-ease);
  appearance: none;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: var(--cd-on-surface-variant); opacity: .8; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--cd-on-surface-variant);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cd-primary);
  box-shadow: 0 0 0 3px var(--cd-state-primary-hover);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--cd-surface-2); color: var(--cd-on-surface-variant); cursor: not-allowed;
}
input[aria-invalid="true"] { border-color: var(--cd-error); }

select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
html.cnwa-dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a2acba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
}

input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-height: 0;
  margin: 0 8px 0 0; padding: 0;
  accent-color: var(--cd-primary);
  vertical-align: -.2em; cursor: pointer;
}

.regular-text { max-width: 420px; }

/* The header controls: a site picker and a range picker that read as chips
   rather than as form fields, because they are filters, not input. */
.cnwa-date {
  width: auto; min-height: 38px; height: 38px;
  padding: 0 34px 0 14px;
  border-radius: var(--cd-r-full);
  background-color: var(--cd-surface-2);
  border-color: transparent;
  font-size: 13px; font-weight: 600;
  max-width: 210px;
}
.cnwa-date:hover { background-color: var(--cd-surface-3); border-color: transparent; }

.cnwa-inline-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.cnwa-inline-form input { width: auto; flex: 0 1 300px; min-width: 160px; }
#cd-lic-key { flex-basis: 340px; font-family: var(--cd-mono); letter-spacing: .02em; }

.cnwa-status { font-size: 13px; color: var(--cd-on-surface-variant); }
.cnwa-status.is-error { color: var(--cd-error); }
.cnwa-status.is-ok { color: var(--cd-success); }

.cd-field { margin-bottom: 16px; }
.cd-field:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   9. Notices, chips, code
   ------------------------------------------------------------------------ */

.notice, .cd-notice {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px;
  margin: 0 0 16px;
  border: 1px solid transparent;
  border-radius: var(--cd-r-md);
  font-size: 13.5px;
}
.notice p { margin: 0; }
.notice p + p { margin-top: 6px; }
.notice > .cd-icon { margin-top: 2px; }

.notice-info, .cd-notice-info {
  background: var(--cd-info-container); border-color: var(--cd-primary-80); color: var(--cd-on-surface);
}
.notice-success, .cd-notice-success {
  background: var(--cd-success-container); border-color: var(--cd-success); color: var(--cd-on-surface);
}
.notice-warning, .cd-notice-warning {
  background: var(--cd-warn-container); border-color: var(--cd-warn); color: var(--cd-on-surface);
}
.notice-error, .cd-notice-error, .error {
  background: var(--cd-error-container); border-color: var(--cd-error); color: var(--cd-on-surface);
}
.ok { background: var(--cd-success-container); border-color: var(--cd-success); }
html.cnwa-dark .notice-info { border-color: var(--cd-primary-40); }

.cnwa-pill, .cd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px;
  border-radius: var(--cd-r-full);
  background: var(--cd-surface-2); color: var(--cd-on-surface-variant);
  font-size: 12px; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap;
}
.cd-chip-primary { background: var(--cd-primary-container); color: var(--cd-on-primary-container); }
.cd-chip-success { background: var(--cd-success-container); color: var(--cd-success); }
.cd-chip-warn { background: var(--cd-warn-container); color: var(--cd-warn); }
.cd-chip-error { background: var(--cd-error-container); color: var(--cd-error); }
.cnwa-plan-badge .cnwa-pill { background: rgba(255, 255, 255, .6); color: var(--cd-on-primary-container); }
html.cnwa-dark .cnwa-plan-badge .cnwa-pill { background: rgba(255, 255, 255, .12); }

.cnwa-code, pre {
  margin: 0;
  padding: 14px 16px;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-outline-variant);
  border-radius: var(--cd-r-md);
  font-family: var(--cd-mono); font-size: 12.5px; line-height: 1.6;
  color: var(--cd-on-surface);
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}
:not(pre) > code {
  padding: 2px 6px;
  border-radius: var(--cd-r-xs);
  background: var(--cd-surface-2);
  color: var(--cd-on-surface);
}

.cd-copy-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* ---------------------------------------------------------------------------
   10. Signed out screens
   ------------------------------------------------------------------------ */

/* The signed out screens are styled by front.css (1.3.5). */
.cd-logo { display: block; flex: none; }

/* Older signed out pages that still use the centred card. */
.narrow { max-width: 460px; margin: 8vh auto; padding: 0 16px; }
.card { padding: 24px; }
.card + .card { margin-top: 16px; }
.brand-stack { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wrap:not(.cnwa-wrap) { width: 100%; max-width: none; margin: 0; padding: 24px clamp(16px, 1.6vw, 32px); box-sizing: border-box; }
header.bar { background: var(--cd-surface); border-bottom: 1px solid var(--cd-outline-variant); }
header.bar .wrap { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.spacer { flex: 1; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 18px; }
.tile { padding: 16px; }
.tile .k { color: var(--cd-on-surface-variant); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.tile .v { font-size: 26px; font-weight: 670; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .d { font-size: 12px; margin-top: 2px; }
.up { color: var(--cd-success); }
.down { color: var(--cd-error); }

/* ---------------------------------------------------------------------------
   11. Plan and pricing
   ------------------------------------------------------------------------ */

.cd-plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.cd-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 20px;
  border: 1px solid var(--cd-outline-variant);
  border-radius: var(--cd-r-lg);
  background: var(--cd-surface);
  box-shadow: var(--cd-e1);
}
.cd-plan.is-current { border-color: var(--cd-primary); box-shadow: var(--cd-e2); }
.cd-plan.is-current::before {
  content: "Your plan";
  position: absolute; top: -11px; left: 18px;
  padding: 2px 11px; border-radius: var(--cd-r-full);
  background: var(--cd-primary); color: var(--cd-on-primary);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.cd-plan-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.cd-plan-price { margin-top: 10px; font-size: 27px; font-weight: 680; letter-spacing: -.025em; }
.cd-plan-price small { font-size: 13px; font-weight: 550; color: var(--cd-on-surface-variant); }
.cd-plan ul { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.cd-plan li { display: flex; align-items: flex-start; gap: 9px; }
.cd-plan li .cd-icon { flex: none; margin-top: 2px; color: var(--cd-success); }
.cd-plan .cd-btn, .cd-plan .button { margin-top: auto; }

/* Self hosted Lifetime: one wide card under the yearly plans. */
.cd-plan-lifetime {
  margin-top: 16px;
  display: grid; gap: 4px 28px; align-items: center;
  grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) auto;
  background: linear-gradient(135deg, #10172a, #1d2a4d); color: #eef2ff; border-color: transparent;
}
.cd-plan-lifetime[hidden] { display: none; }
.cd-plan-lifetime .description, .cd-plan-lifetime .muted, .cd-plan-lifetime .cd-plan-price small { color: #b9c3e6; }
.cd-plan-lifetime ul { margin: 0; }
.cd-plan-lifetime li .cd-icon { color: #7ee2a8; }
.cd-plan-lifetime .button { margin-top: 0; }
.cd-plan-lifetime-buy { display: grid; gap: 8px; justify-items: start; }
.cd-plan-lifetime-buy a.description { color: #cdd7ff; font-size: 12.5px; }
@media (max-width: 900px) {
  .cd-plan-lifetime { grid-template-columns: 1fr; gap: 14px; }
}

.cd-kv { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cd-kv-item { padding: 14px 16px; border-radius: var(--cd-r-md); background: var(--cd-surface-1); }
.cd-kv-k {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cd-on-surface-variant);
}
.cd-kv-v { margin-top: 5px; font-size: 16px; font-weight: 650; }

/* A usage bar, for sites used out of sites allowed. */
.cd-meter { height: 8px; border-radius: var(--cd-r-full); background: var(--cd-surface-3); overflow: hidden; margin-top: 10px; }
.cd-meter span { display: block; height: 100%; border-radius: inherit; background: var(--cd-primary); }
.cd-meter.is-full span { background: var(--cd-warn); }

/* ---------------------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 640px) {
  .cnwa-date { font-size: 12px; padding: 0 28px 0 10px; }
  .cnwa-main h1 { font-size: 20px; }
  .cnwa-metric-value { font-size: 25px; }
  .cnwa-card { padding: 16px; border-radius: var(--cd-r-md); }
  .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td { display: block; width: auto; }
  .form-table th { padding-bottom: 4px; }
  .form-table tr + tr td { border-top: 0; }
  .form-table tr + tr th { border-top: 1px solid var(--cd-outline-variant); padding-top: 14px; }
}

@media print {
  .cnwa-side, .cnwa-head, .cnwa-foot { display: none !important; }
  .cd-shell .cnwa-shell { grid-template-columns: minmax(0, 1fr); }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   13. The chart
   ------------------------------------------------------------------------ */

.cnwa-chart {
  display: block;
  min-height: 0;
  padding: 16px 18px 12px;
  color: var(--cd-primary);
}

.cd-chart-wrap { position: relative; }

.cd-chart-svg {
  display: block;
  width: 100%;
  height: 260px;
  overflow: visible;
}

.cd-chart-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The viewBox is stretched to the panel width, so a plain stroke would be
     squashed horizontally with it. This keeps the line an even thickness at
     any panel size. */
  vector-effect: non-scaling-stroke;
}

.cd-chart-area { fill: url(#cd-chart-fill); stroke: none; }

.cd-chart-grid {
  stroke: var(--cd-outline-variant);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.cd-chart-tick {
  fill: var(--cd-on-surface-variant);
  font-size: 11px;
  font-family: var(--cd-font);
  font-variant-numeric: tabular-nums;
}

.cd-chart-marker {
  fill: var(--cd-surface);
  stroke: currentColor;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.cd-chart-hit { fill: transparent; pointer-events: none; }

.cd-chart-axis {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  color: var(--cd-on-surface-variant);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.cd-chart-readout {
  position: absolute; top: 0; right: 0; z-index: 2;
  padding: 5px 12px;
  border-radius: var(--cd-r-full);
  background: var(--cd-surface-2);
  color: var(--cd-on-surface);
  font-size: 12.5px; font-weight: 600;
  opacity: 0;
  transition: opacity var(--cd-fast) var(--cd-ease);
  pointer-events: none;
  white-space: nowrap;
}
.cd-chart-readout.is-on { opacity: 1; }

/* ---------------------------------------------------------------------------
   14. Buying a plan
   ------------------------------------------------------------------------ */

.cd-buy-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}

.cd-plan-price small { display: inline-block; margin-left: 2px; }

.cd-plan .cd-buy-btn { margin-top: auto; width: 100%; }
.cd-plan .cd-chip { margin-top: auto; align-self: flex-start; }

#cd-buy-done-key {
  font-size: 15px; font-weight: 650; letter-spacing: .06em; text-align: center;
}

/* ---------------------------------------------------------------------------
   15. Wide screens
   ------------------------------------------------------------------------ */

/*
 * The application is a tool, not an article, so it takes the whole window
 * rather than sitting in a centred column. What changes on a wide screen is
 * density: more cards per row, more of the page visible without scrolling,
 * rather than the same three cards stretched until each one is mostly empty.
 */
@media (min-width: 1600px) {
  .cnwa-metrics { grid-template-columns: repeat(6, 1fr); }
  .cd-grid-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
  .cnwa-chart .cd-chart-svg { height: 300px; }
}

@media (min-width: 2200px) {
  .cd-grid-2 { grid-template-columns: repeat(4, 1fr); }
}

/* A table inside a panel should reach the panel's edges, not float in it. */
.cnwa-panel > .cnwa-table { margin: 0; }
.cnwa-panel > div > .cnwa-table { margin: 0; }

/* ---------------------------------------------------------------------------
   16. Report controls
   ------------------------------------------------------------------------ */

.cd-report-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cd-outline-variant);
  background: var(--cd-surface-1);
}

.cd-search {
  position: relative;
  display: flex; align-items: center;
  flex: 0 1 320px;
}
.cd-search .cd-icon {
  position: absolute; left: 12px;
  color: var(--cd-on-surface-variant);
  pointer-events: none;
}
.cd-search input {
  height: 36px; min-height: 0;
  padding: 0 12px 0 36px;
  border-radius: var(--cd-r-full);
  background: var(--cd-surface);
  font-size: 13.5px;
}
.cd-search input::-webkit-search-cancel-button { cursor: pointer; }

.cd-report-count {
  margin-left: auto;
  color: var(--cd-on-surface-variant);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}

/*
 * A sortable heading is a button, not a div with a click handler.
 *
 * It has to be reachable by keyboard and announce itself as pressable, and
 * the cheapest way to get both right is to use the element that already does.
 */
.cd-sort {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 6px; margin: -2px -6px;
  border: 0; border-radius: var(--cd-r-xs);
  background: transparent;
  color: inherit; font: inherit;
  text-transform: inherit; letter-spacing: inherit;
  cursor: pointer;
  transition: background var(--cd-fast) var(--cd-ease), color var(--cd-fast) var(--cd-ease);
}
.cd-sort:hover { background: var(--cd-state-hover); color: var(--cd-on-surface); }
.cd-sort.is-active { color: var(--cd-primary); }

/* Numeric headers align right, so their sort control has to follow the text. */
.cnwa-table th.cnwa-num .cd-sort { flex-direction: row-reverse; }

.cd-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--cd-outline-variant);
  font-size: 13px;
}
.cd-pager .muted { font-variant-numeric: tabular-nums; }

/* A composite draws panels inside the report host, so they need their own
   spacing rather than inheriting the single table's. */
#cd-report .cnwa-panel { margin: 18px; }
#cd-report .cnwa-panel h3 {
  padding: 13px 18px;
  margin: 0;
  border-bottom: 1px solid var(--cd-outline-variant);
  background: var(--cd-surface-1);
  font-size: 14px;
}
#cd-report .cnwa-panel p.description { padding: 16px 18px; }
#cd-report .cnwa-metrics { padding: 18px 18px 0; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   17. Installation check
   ------------------------------------------------------------------------ */

.cd-check-box {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cd-outline-variant);
}

.cd-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.cd-check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--cd-r-md);
  background: var(--cd-surface-1);
}
.cd-check > .cd-icon { flex: none; margin-top: 1px; }
.cd-check strong { font-size: 13.5px; }
.cd-check .description { margin: 3px 0 0; }

.cd-check.is-ok > .cd-icon { color: var(--cd-success); }
.cd-check.is-bad { background: var(--cd-error-container); }
.cd-check.is-bad > .cd-icon { color: var(--cd-error); }
.cd-check.is-info > .cd-icon { color: var(--cd-primary); }

#cd-settings textarea { max-width: 520px; font-family: var(--cd-mono); font-size: 13px; }
#cd-settings label + label { margin-top: 8px; }
#cd-settings label input[type="checkbox"] { margin-right: 8px; }
#cd-settings td > label { font-weight: 500; }

.cd-muted { color: var(--cd-muted, #6b7280); font-size: .92em; }

/* The front door (landing page) is styled by front.css (1.3.5). */


.cd-auth-panel { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }