/* ============================================================================
   mv-google.css — the Search Console page
   ----------------------------------------------------------------------------
   A dedicated stylesheet rather than additions to css/app.css, which is shared
   with index.html and is one of the files two developers must coordinate on
   (CLAUDE.md). Nothing here is referenced by any other page, so it cannot
   affect the homepage or another tool.

   Tokens only, radius from the scale, no left-accent stripes, no per-tool
   accent colour — state gets a colour, the tool does not. See
   docs/DESIGN-CONSTITUTION.md.
   ========================================================================== */

/* Surface and line come straight from the shared tokens, which are already
   theme-aware. mvr.css defines its own pair with a [data-theme="light"]
   override and a literal hex; copying that here would mean a second place to
   keep in step and a hardcoded colour the constitution forbids. */
.mvg{--mvg-surface:var(--panel);--mvg-line:var(--hairline);color:var(--text);}

/* The .mvr-* components used here (kpi tiles, section headers) read
   --mvr-surface / --mvr-line, which mvr.css defines only under .mvr. Without
   these the KPI tiles render with no background and no border — caught by
   screenshotting the page, not by any logic test. Re-declared rather than
   adding .mvr to the host, so this page does not also inherit .mvr's layout. */
.mvg{--mvr-surface:var(--panel);--mvr-line:var(--hairline);}

/* ---- toolbar: property picker + range ---------------------------------- */
.mvg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;}
.mvg-bar-sp{margin-left:auto;}

/* Whose account, which property, what access, last sync. Sits above the
   toolbar so it is the first thing read on the page. */
.mvg-conn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:14px;padding:11px 14px;
  background:var(--bg-2);border:1px solid var(--hairline);border-radius:var(--radius);}
.mvg-conn-i{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3);}
.mvg-conn-i b{color:var(--text-2);font-weight:600;}
.mvg-conn-i svg{width:13px;height:13px;color:var(--muted);flex:none;}
.mvg-conn-note{flex-basis:100%;margin:2px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6;}
.mvg-conn-note.mvg-conn-bad{color:var(--red);}
.mvg-sel{appearance:none;font:inherit;font-size:13px;font-weight:600;color:var(--text);
  background:var(--mvg-surface);border:1px solid var(--mvg-line);border-radius:9px;
  padding:9px 30px 9px 12px;cursor:pointer;max-width:100%;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.mvg-sel:focus-visible{outline:2px solid var(--purple);outline-offset:1px;}

/* ---- range segmented control ------------------------------------------- */
.mvg-seg{display:inline-flex;background:var(--mvg-surface);border:1px solid var(--mvg-line);border-radius:9px;padding:2px;gap:2px;}
.mvg-seg button{font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:0;
  border-radius:6px;padding:7px 12px;cursor:pointer;transition:.15s;}
.mvg-seg button:hover{color:var(--text);}
.mvg-seg button[aria-pressed="true"]{background:var(--purple);color:var(--on-brand);}

/* ---- deltas: state gets a colour --------------------------------------- */
.mvg-delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.mvg-delta.up{color:var(--green);}
.mvg-delta.down{color:var(--red);}
.mvg-delta.flat{color:var(--muted);}

/* ---- tabs --------------------------------------------------------------- */
.mvg-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--mvg-line);margin:20px 0 0;}
.mvg-tabs button{font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:none;border:0;
  border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;transition:.15s;margin-bottom:-1px;}
.mvg-tabs button:hover{color:var(--text);}
.mvg-tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--purple);}

/* ---- table -------------------------------------------------------------- */
.mvg-tablewrap{overflow-x:auto;margin-top:14px;}
.mvg-table{width:100%;border-collapse:collapse;font-size:13px;}
.mvg-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--mvg-line);white-space:nowrap;}
.mvg-table th.num,.mvg-table td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.mvg-table td{padding:11px 12px;border-bottom:1px solid var(--mvg-line);color:var(--text);vertical-align:top;}
.mvg-table tbody tr:hover{background:var(--mvg-surface);}
.mvg-key{word-break:break-word;max-width:520px;display:block;}

/* ---- states ------------------------------------------------------------- */
.mvg-panel{background:var(--mvg-surface);border:1px solid var(--mvg-line);border-radius:12px;padding:22px;}
.mvg-note{font-size:12.5px;color:var(--muted);line-height:1.6;}
.mvg-empty{text-align:center;padding:38px 22px;}
.mvg-empty-t{font-size:15px;font-weight:700;color:var(--text);margin:10px 0 6px;}
.mvg-err{color:var(--red);font-size:13px;}

/* ---- backfill progress -------------------------------------------------- */
.mvg-prog{height:6px;border-radius:999px;background:var(--mvg-line);overflow:hidden;margin-top:9px;}
.mvg-prog-fill{height:100%;background:var(--purple);border-radius:999px;transition:width .4s;}

/* ---- chart holder ------------------------------------------------------- */
.mvg-chart{position:relative;height:280px;margin-top:6px;}

@media (max-width:640px){
  .mvg-bar-sp{margin-left:0;width:100%;}
  .mvg-chart{height:220px;}
}

/* Breakdown charts sit above their table, so they are shorter than the main
   trend chart — enough to read the shape without pushing the data off screen. */
.mvg-chart--sm{height:230px;}
@media (max-width:640px){ .mvg-chart--sm{height:190px;} }

/* ---- Core Web Vitals ---------------------------------------------------- */
/* Three metrics side by side rather than a table: each carries a value, a
   verdict and the good/poor split, which reads badly as columns. */
.mvg-cwvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px;}
.mvg-cwv{border:1px solid var(--mvg-line);border-radius:var(--radius);padding:16px;}
.mvg-cwv-h{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:8px;}
.mvg-cwv-v{font-size:24px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:6px;}
@media (max-width:820px){ .mvg-cwvgrid{grid-template-columns:1fr;} }