/*
 * Wizard SEO Hub — one stylesheet, no build step.
 *
 * How it is organised:
 *   1. Tokens      every colour, radius and size used anywhere. Change a colour here, nowhere else.
 *   2. Base        page defaults.
 *   3. Layout      containers, stacks, rows, grids.
 *   4. Components  card, pill, button, avatar, meter and friends. Views only combine these.
 *
 * Rule for changes: do not write colours or pixel values in views. Add or reuse a class here.
 */

/* 1. Tokens ---------------------------------------------------------------- */
/* Colours: a pale cool ground, white surfaces, slate ink. Blue is for links and for where you are;
   green is for the one main action of a screen; yellow asks for attention; red is late or broken. */
:root {
  --ground: #F3F5F7;
  --surface: #FFFFFF;
  --line: #DFE4E9;
  --line-soft: #ECEFF2;
  --control: #8B98A1;
  --edge: #CFD6DC;
  --ink: #1D2B34;
  --muted: #5A6872;
  --on-dark-muted: #C3CDD4;

  --primary: #1F66CC;
  --link: #1B5FBF;
  --action: #1B7F4F;
  --committed: #A9C4EE;

  --info-bg: #E4EEFB;
  --info-fg: #17468C;
  --warn-bg: #FFF0B8;
  --warn-fg: #5C4300;
  --warn-strong: #FFD84D;
  --warn-surface: #FFF7DA;
  --warn-line: #EFD98C;
  --good-bg: #DDF3E4;
  --good-fg: #14532D;
  --good: #1E7A4C;
  --bad: #B42318;

  /* The stages of a board, each with its own quiet colour: the column and the line on top of it */
  --stage-1: #F1EDFB; --stage-1-line: #8E7AD8;
  --stage-2: #FCF0E3; --stage-2-line: #E0913A;
  --stage-3: #E7F0FB; --stage-3-line: #4E8FDD;
  --stage-4: #E3F4E8; --stage-4-line: #3F9E68;

  --radius: 12px;
  --radius-small: 8px;
  --radius-pill: 60px;
  --page: 1160px;

  /* Sizes. Things to press are compact under a mouse and 44px under a finger (see the end of the tokens). */
  --pad: 20px;
  --press: 36px;
  --press-small: 30px;
  --field: 38px;
}
@media (pointer: coarse) {
  :root { --press: 44px; --press-small: 40px; --field: 46px; }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { font-size: inherit; }
code { padding: 2px 6px; border-radius: 6px; background: var(--line-soft); font-size: 0.9em; }
ul, ol { padding-left: 20px; }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* 3. Layout ---------------------------------------------------------------- */
.page { max-width: var(--page); margin: 0 auto; padding: 32px 28px 56px; display: flex; flex-direction: column; gap: 24px; }
.page--medium { max-width: 960px; }
.page--narrow { max-width: 820px; }
.page--detail { padding-top: 20px; gap: 20px; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack--tight { gap: 4px; }
.stack--snug { gap: 8px; }
.stack--loose { gap: 20px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.row--baseline { align-items: baseline; }
.row--end { align-items: flex-end; }
.row--top { align-items: flex-start; }
.row--tight { gap: 6px; }
.row--loose { gap: 20px; }
.row--nowrap { flex-wrap: nowrap; }
.grow { flex: 1 1 0; min-width: 0; }
.grow-wide { flex: 1 1 360px; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }

.grid { display: grid; gap: 16px; align-items: start; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; align-items: stretch; }
.grid--panels { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.grid--stats { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.grid--four { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); align-items: stretch; }
.grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.grid--columns { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.grid--fields { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.grid--facts { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 16px; }

.split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.split__main { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.split__side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* 4. Components ------------------------------------------------------------ */

/* Text */
.h1 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.6px; }
.h1--small { font-size: 24px; line-height: 1.2; letter-spacing: -0.4px; }
.h1--section { font-size: 20px; line-height: 1.25; letter-spacing: -0.2px; }
.h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.1px; }
.h4 { font-size: 14px; font-weight: 700; }
.lead { font-size: 15.5px; color: var(--muted); }
.title { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.figure { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.figure--large { font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -0.6px; }
.figure--medium { font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -0.4px; }
.nowrap { white-space: nowrap; }
.plain-link { color: var(--ink); }
.text-link { display: inline-block; padding: 6px 0; font-weight: 600; }
.back-link { align-self: flex-start; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.back-link:hover { color: var(--ink); text-decoration: none; }
.good-text { color: var(--good-fg); font-weight: 700; }
.bad-text { color: var(--bad); font-weight: 700; }
.ink { color: var(--ink); }
.strike { text-decoration: line-through; color: var(--muted); }
.break { overflow-wrap: anywhere; }
/* One line, cut with … when it does not fit (the whole of it is one click away) */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Something that opens in place, without JavaScript (<details>) */
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary.text-link { color: var(--link); }
.disclosure > summary:hover { text-decoration: underline; }
.disclosure > summary.link-button { display: inline-block; }

/* A group that is closed until someone asks for it: a plus on the right, a minus when open */
.fold > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 20px; line-height: 1; }
.fold[open] > summary::after { content: "–"; }

/* The tasks that came out of a comment, and the list of points to pick from */
.comment-tasks { list-style: none; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--ground); border-radius: var(--radius-small); }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }
.disclosure[open] > summary { margin-bottom: 14px; }

/* Top bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar__inner { max-width: var(--page); margin: 0 auto; padding: 8px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 8px; min-height: var(--press); color: var(--ink); font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.brand__name { font-weight: 800; letter-spacing: 1.5px; }
.brand__product { font-weight: 500; color: var(--muted); }
.topbar__count { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--primary); color: var(--surface); font-size: 12px; line-height: 20px; text-align: center; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; }
.nav__link { display: inline-flex; align-items: center; min-height: var(--press); padding: 4px 12px; border-radius: var(--radius-pill); color: var(--muted); font-size: 14.5px; font-weight: 600; }
.nav__link:hover { color: var(--ink); text-decoration: none; }
.nav__link[aria-current="page"] { background: var(--info-bg); color: var(--info-fg); font-weight: 700; }
/* The member at the top right. The name opens their account; with the mouse
   over it (or reached with the keyboard) a menu drops under it: the comments
   that name them, their account, the settings of the Hub, sign out. On a
   touch screen there is no hover, so the name simply opens the account. */
.user-menu { position: relative; margin-left: auto; }
.user-menu__name { display: inline-flex; align-items: center; gap: 8px; min-height: var(--press); padding: 1px 13px 1px 1px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; font-size: 14.5px; }
.user-menu__name:hover { border-color: var(--control); text-decoration: none; }
.user-menu__name[aria-current="page"] { background: var(--info-bg); border-color: var(--info-bg); color: var(--info-fg); }
.user-menu__avatar { position: relative; display: inline-flex; }
.user-menu__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The panel starts right under the name (its top padding is the gap), so the mouse never leaves the menu on its way down. */
.user-menu__panel { position: absolute; z-index: 20; top: 100%; right: 0; width: min(360px, calc(100vw - 32px)); padding-top: 8px; visibility: hidden; opacity: 0; transition: opacity 0.12s ease, visibility 0s linear 0.25s; }
.user-menu:has(:focus-visible) .user-menu__panel { visibility: visible; opacity: 1; transition-delay: 0s; }
@media (hover: hover) {
  .user-menu:hover .user-menu__panel { visibility: visible; opacity: 1; transition-delay: 0s; }
}
.user-menu__box { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(31, 27, 22, 0.14); }
.user-menu__links { display: flex; flex-direction: column; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.user-menu__item { display: flex; align-items: center; width: 100%; min-height: var(--press); padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.user-menu__item:hover, .user-menu__item[aria-current="page"] { background: var(--ground); text-decoration: none; }
.user-menu__item--link { color: var(--link); font-size: 14px; }
/* One comment that names the member, as a line that opens it */
.mention-line { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); }
.mention-line:hover { text-decoration: none; }
.mention-line:hover .mention-line__text { color: var(--ink); }
.mention-line__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); overflow-wrap: anywhere; }
.mention-line__dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--primary); }
.mention-line--menu { padding: 8px 10px; border-radius: 10px; background: var(--ground); }
.mention-line--menu:hover { background: var(--info-bg); }

/* Card */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card--roomy { padding: 24px; }
/* A card that is one of many on a page: a client among the clients */
.card--compact { padding: 14px 16px; gap: 10px; }
.card--flush { padding: 0; gap: 0; }
.card--link { color: var(--ink); }
.card--link:hover { border-color: var(--control); text-decoration: none; }
/* The top line of a card: its title, and one quiet link on the right */
.card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.card__head a, .card__head .link-button { font-size: 14px; font-weight: 600; }
.card--dark { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.card--dark .muted { color: var(--on-dark-muted); }
.card--warn { background: var(--warn-surface); border-color: var(--warn-line); }
.card--alert { border: 2px solid var(--bad); }
.card--highlight { background: var(--warn-strong); border-color: var(--warn-strong); }
.card--highlight .muted { color: var(--warn-fg); }
.card__inset { background: var(--surface); color: var(--ink); border-radius: var(--radius-small); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.card__inset--line { border: 1px solid var(--warn-line); }
.card__footer { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.panel { background: var(--ground); border-radius: var(--radius-small); padding: 12px 14px; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ink); color: var(--surface); border-radius: var(--radius); }
.banner--good { background: var(--good-bg); color: var(--good-fg); }
.note { padding: 14px 18px; border: 1px dashed var(--control); border-radius: var(--radius); color: var(--muted); }

/* Rows inside a card, separated by hairlines */
.rows > * + * { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.rows { display: flex; flex-direction: column; gap: 10px; }
.rows--tight { gap: 6px; }
.rows--tight > * + * { padding-top: 6px; }
.rows--flush > * { padding: 14px var(--pad); }
.rows--flush { gap: 0; }
.rows--flush > * + * { padding-top: 14px; }

/* Pill */
.pill { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--line-soft); color: var(--ink); }
.pill--bad { background: var(--bad); color: var(--surface); }
.pill--warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill--info { background: var(--info-bg); color: var(--info-fg); }
.pill--good { background: var(--good-bg); color: var(--good-fg); }
.pill--light { background: var(--surface); color: var(--ink); }
/* A pill whose text may be long: it breaks into lines inside its box instead of sticking out of it. */
.pill--wrap { white-space: normal; overflow-wrap: anywhere; border-radius: var(--radius-small); padding: 3px 9px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--press); padding: 6px 15px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--action); color: var(--surface); }
.btn--primary:hover { color: var(--surface); filter: brightness(0.92); }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--edge); }
.btn--secondary:hover { border-color: var(--control); }
.btn--dark { background: var(--ink); color: var(--surface); }
.btn--dark:hover { color: var(--surface); }
.btn--light { background: var(--surface); color: var(--ink); }
.btn--warn { background: var(--surface); color: var(--warn-fg); border-color: var(--warn-fg); }
.btn--small { padding: 4px 12px; font-size: 13px; min-height: var(--press-small); }
.btn--icon { width: var(--press); padding: 0; border-radius: 50%; }
.btn--yellow { background: var(--warn-strong); color: var(--ink); }
.btn--danger { background: var(--surface); color: var(--bad); border-color: var(--bad); }
/* A button that reads as a link, for small actions inside a row */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs__link { display: inline-flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--ground); }
.thumbs__link:hover { border-color: var(--control); }
.thumbs__image { display: block; width: 132px; height: 88px; object-fit: cover; }
/* A picture opened over the page (zoom.js) */
.thumbs__link, .report__image a { cursor: zoom-in; }
.zoom { max-width: 96vw; max-height: 96vh; padding: 0; border: 0; background: none; overflow: visible; }
.zoom::backdrop { background: rgba(29, 43, 52, 0.82); }
.zoom__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zoom__image { display: block; max-width: 94vw; max-height: 84vh; border-radius: var(--radius-small); background: var(--surface); }
.zoom__caption { max-width: 70ch; color: var(--surface); font-size: 15px; text-align: center; }
.zoom__caption[hidden] { display: none; }
.zoom__close { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
@media print { .zoom { display: none; } }
.mention { padding: 1px 5px; border-radius: 6px; background: var(--info-bg); color: var(--info-fg); font-weight: 600; white-space: nowrap; }
.mention-field { position: relative; }
.mention-menu { position: absolute; z-index: 5; left: 0; right: 0; max-width: 340px; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-small); box-shadow: 0 8px 24px rgba(31, 27, 22, 0.12); }
.mention-menu[hidden] { display: none; }
.mention-menu__option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--press); padding: 6px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.mention-menu__option[hidden] { display: none; }
.mention-menu__option:hover, .mention-menu__option[aria-selected="true"] { background: var(--info-bg); }
.link-button { display: inline-block; padding: 6px 0; border: 0; background: none; color: var(--link); font-weight: 600; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.link-button--quiet { color: var(--muted); font-weight: 500; }
.link-button--inline { padding: 0; }
.pill--link { background: var(--surface); border: 1px solid var(--edge); padding: 4px 11px; }
.pill--link:hover { border-color: var(--control); text-decoration: none; }
/* Keywords, a few to a row: each with the page it should bring up, on lines that meet across the columns */
.keyword-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 0 32px; }
.keyword-list > li { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.keyword-list__phrase { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.keyword-list__page { font-size: 14px; color: var(--muted); }
.keyword-list__page--path { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.plain-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plain-list--tight { gap: 6px; }
.button-form { display: contents; }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: var(--press); padding: 5px 13px; border-radius: var(--radius-pill); border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; }
.chip:hover { border-color: var(--control); text-decoration: none; }
.chip--quiet { border-color: var(--line); font-size: 13px; padding: 5px 12px; }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* Avatar and client tile */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.avatar:hover { text-decoration: none; }
.avatar--small { width: 20px; height: 20px; font-size: 10px; }
.avatar--large { width: 32px; height: 32px; font-size: 14px; }
.avatar--huge { width: 64px; height: 64px; font-size: 26px; }
.avatar--photo { object-fit: cover; background: var(--line-soft); }
.avatar--photo[hidden] { display: none; }
.tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-small); font-size: 18px; font-weight: 800; }
.tile--large { width: 52px; height: 52px; border-radius: var(--radius); font-size: 22px; }
/* A client's logo in the place of the tile: whole, never cropped, on white */
.tile--logo { background: #fff; border: 1px solid var(--line); object-fit: contain; padding: 5px; }
.logo-field { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.tone-blue { background: var(--info-bg); color: var(--info-fg); }
.tone-ink { background: var(--ink); color: var(--surface); }
.tone-yellow { background: var(--warn-bg); color: var(--warn-fg); }
.tone-claude { background: var(--warn-strong); color: var(--ink); }

/* Meters */
.meter { height: 10px; border-radius: var(--radius-pill); background: var(--line-soft); overflow: hidden; }
.meter--thin { height: 8px; }
.meter--thick { height: 14px; }
.meter__fill { height: 100%; border-radius: var(--radius-pill); background: var(--primary); }
.meter__fill--good { background: var(--good); }
.meter--stacked { display: flex; gap: 2px; height: 12px; }
.meter--stacked .meter__fill { border-radius: 0; }
.meter__fill--committed { background: var(--committed); }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--primary); }
.legend__swatch--committed { background: var(--committed); }

/* Distance from target, one bar per week: above the line is over target, below is under */
.deviation { position: relative; display: flex; align-items: center; gap: 4px; height: 44px; width: 96px; flex-shrink: 0; }
.deviation::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--control); }
.deviation__slot { position: relative; width: 8px; height: 100%; }
.deviation__bar { position: absolute; left: 0; width: 8px; min-height: 2px; background: var(--primary); }
.deviation__bar--up { bottom: 50%; border-radius: 3px 3px 0 0; }
.deviation__bar--down { top: 50%; border-radius: 0 0 3px 3px; background: var(--bad); }

/* The client's stage, as a bar of four segments with a caption under each */
.track { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.track__step { display: flex; flex-direction: column; gap: 2px; padding-right: 10px; font-size: 14px; color: var(--muted); }
.track__step::before { content: ""; height: 4px; margin-bottom: 8px; margin-right: -10px; border-radius: 2px; background: var(--line); }
.track__step--done::before { background: var(--ink); }
.track__step--current::before { background: var(--primary); }
.track__step--done .track__name { color: var(--ink); }
.track__step--current .track__name { color: var(--ink); font-weight: 700; }
.track__name { font-weight: 600; }
@media (max-width: 700px) { .track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 6px; } }

/* The sections of one client: Επισκόπηση, Tasks, Σχόλια ... The same on every page of the client. */
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: var(--press); padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; white-space: nowrap; font-size: 14.5px; }
.tab:first-child { padding-left: 0; }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
.tab__count { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--line-soft); color: var(--ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tab[aria-current="page"] .tab__count { background: var(--info-bg); color: var(--info-fg); }

/* The quiet column next to the work: reference, not things to do. One surface, sections divided by hairlines. */
.aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0; min-width: 0; }
.aside__section { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aside__section + .aside__section { border-top: 1px solid var(--line-soft); }
/* A label on the left, its value on the right */
.facts { display: flex; flex-direction: column; gap: 8px; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* A few headline numbers on one surface, divided by hairlines */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.summary > div { display: flex; flex-direction: column; gap: 6px; padding: 16px var(--pad); background: var(--surface); }

/* One client that needs someone, on the home screen: who, why, and where to go */
.attention { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.attention__who { flex: 0 0 220px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.attention__what { flex: 1 1 320px; min-width: 0; }
@media (max-width: 700px) { .attention__who { flex-basis: 100%; } }

/* Two halves side by side when there is room: what the team wrote, and what was decided */
.halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px 36px; align-items: start; }

/* What needs someone on this client, at the top of the client's page */
.alerts { display: flex; flex-direction: column; border: 1px solid var(--warn-line); border-radius: var(--radius); background: var(--warn-surface); }
.alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; }
.alert + .alert { border-top: 1px solid var(--warn-line); }

/* Status marks in lists */
.mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px; border: 2px solid var(--control); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.mark--done { background: var(--good); border-color: var(--good); color: var(--surface); }
.mark--now { border-color: var(--primary); background: linear-gradient(90deg, var(--surface) 50%, var(--primary) 50%); }
.mark--bad { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.number { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* Checkbox that completes a task */
.check { appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--control); border-radius: 6px; background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.check:hover { border-color: var(--ink); }
.check--done { background: var(--ink); border-color: var(--ink); color: var(--surface); font-size: 14px; font-weight: 800; }
.check--large { width: 28px; height: 28px; margin-top: 6px; }

/* A list of things to do. One line each: the tick, what it is, whose it is and by when. No lines between
   them; the one under the mouse lights up. */
.rows--todo { gap: 0; }
.rows--todo > * + * { padding-top: 6px; border-top: 0; }
.task-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: var(--radius-small); }
.task-row:hover { background: var(--ground); }
.task-row__what { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.task-row__title { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.task-row__about { font-size: 13px; color: var(--muted); }
.task-row__when { flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }

/* A board: one column per stage, each with its own quiet colour and a line on top, and small cards in it.
   A card is a title and a line or two; what you do with it is one small row at its foot. */
.column { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-top: 3px solid var(--edge); border-radius: var(--radius-small); background: var(--line-soft); }
.column--1 { background: var(--stage-1); border-top-color: var(--stage-1-line); }
.column--2 { background: var(--stage-2); border-top-color: var(--stage-2-line); }
.column--3 { background: var(--stage-3); border-top-color: var(--stage-3-line); }
.column--4 { background: var(--stage-4); border-top-color: var(--stage-4-line); }
.column--warn { background: var(--warn-surface); border-top-color: var(--warn-strong); }
.column__head { padding: 2px 4px; font-size: 14px; font-weight: 700; }
.column__count { color: var(--muted); font-weight: 500; }
.column__empty { padding: 2px 4px 6px; }
.column__card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; background: var(--surface); border-radius: 6px; box-shadow: 0 1px 2px rgba(29, 43, 52, 0.08); }
a.column__card:hover { box-shadow: 0 0 0 1px var(--control); text-decoration: none; }
.column__actions { margin-top: 4px; }
.column__card a.title:hover { text-decoration: underline; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 13px; font-weight: 600; }
.input { min-height: var(--field); padding: 7px 12px; border: 1px solid var(--control); border-radius: var(--radius-small); background: var(--surface); color: var(--ink); width: 100%; }
.input--narrow { max-width: 120px; }
.input--pill { border-radius: var(--radius-pill); padding: 0 16px; border-color: var(--surface); }
textarea.input { resize: vertical; }
/* A text box with buttons (editor_controller.js): the bar sits on top of the box it belongs to. */
.editor { display: flex; flex-direction: column; }
.editor__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--control); border-bottom: 0; border-radius: var(--radius-small) var(--radius-small) 0 0; background: var(--ground); }
.editor__bar[hidden], .editor__surface[hidden] { display: none; }
.editor__button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--press-small); min-height: var(--press-small); padding: 2px 10px; border: 1px solid transparent; border-radius: 6px; background: none; font-size: 14px; font-weight: 600; cursor: pointer; }
.editor__button:hover { background: var(--surface); border-color: var(--edge); }
.editor__button[aria-pressed="true"] { background: var(--info-bg); border-color: var(--committed); color: var(--info-fg); }
.editor__bar:not([hidden]) + .editor__surface { border-radius: 0 0 var(--radius-small) var(--radius-small); }
.editor__surface { overflow-wrap: anywhere; cursor: text; }
.editor__surface > * + * { margin-top: 8px; }
.editor__surface ul, .text-list { padding-left: 22px; }
.editor__surface li + li, .text-list li + li { margin-top: 4px; }
.errors { padding: 14px 18px; border: 2px solid var(--bad); border-radius: var(--radius-small); background: var(--surface); }
.flash { max-width: var(--page); margin: 12px auto 0; padding: 0 28px; }
.flash__message { padding: 9px 14px; border-radius: var(--radius-small); background: var(--good-bg); color: var(--good-fg); font-weight: 600; }
.flash__message--alert { background: var(--warn-bg); color: var(--warn-fg); }

/* Tables */
.table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 8px; }
.table td { padding: 10px 8px; border-top: 1px solid var(--line-soft); }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table-scroll { overflow-x: auto; position: relative; }

/* The weekly numbers of every client: one row per client, one box per metric */
.kpi-table { min-width: 760px; }
.kpi-table th, .kpi-table td { padding: 10px 10px; vertical-align: top; }
.kpi-table thead th { border-bottom: 1px solid var(--line); }
.kpi-table tbody th { text-align: left; font-weight: 400; min-width: 180px; border-top: 1px solid var(--line-soft); }
.kpi-table th:first-child, .kpi-table td:first-child { padding-left: var(--pad); }
.kpi-table td:last-child, .kpi-table th:last-child { padding-right: var(--pad); }
.kpi-table .input { min-width: 110px; margin-bottom: 4px; }
.table--min { min-width: 440px; }

/* The table of a keyword research: numbers to the right, one block of rows per topic */
.keyword-table { min-width: 860px; }
.keyword-table th, .keyword-table td { padding: 9px 10px; vertical-align: top; }
.keyword-table th:first-child, .keyword-table td:first-child { padding-left: var(--pad); width: 1%; }
.keyword-table th:last-child, .keyword-table td:last-child { padding-right: var(--pad); }
.keyword-table thead th { border-bottom: 1px solid var(--line); white-space: nowrap; }
.keyword-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.keyword-table__topic th { background: var(--ground); color: var(--ink); font-size: 14px; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--line); }
.keyword-table input[type="checkbox"], .topic-head input[type="checkbox"], .rows--indented input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }
.card__head--padded { padding: 16px var(--pad) 0; }
.card__footer--padded { padding: 12px var(--pad) 16px; }
.card__body { padding: 16px var(--pad); }
.rows--indented { padding-left: 30px; }
.topic-head { cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* What the columns of the research mean, for the client */
.research-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 8px 24px; }
.research-key dt { display: inline; font-weight: 700; color: var(--ink); margin-right: 6px; }
.research-key dd { display: inline; }
.keyword-table--client th:first-child, .keyword-table--client td:first-child { padding-left: 0; }
.keyword-table--client .page-cell { min-width: 170px; overflow-wrap: anywhere; }

/* The months of the backlink plan, each with the topics chosen for it */
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; }
.plan__month { display: flex; flex-direction: column; gap: 4px; min-height: var(--press); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); color: var(--ink); }
.plan__month:hover { border-color: var(--control); text-decoration: none; }
.plan__month[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Goals list: one row per client */
.goal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px var(--pad); border-top: 1px solid var(--line-soft); color: var(--ink); }
.goal-row:hover, .budget-row:hover { text-decoration: none; }
.goal-row--head { border-top: 0; padding: 10px var(--pad); font-size: 12px; font-weight: 700; color: var(--muted); }
.goal-row__client { flex: 1 1 220px; min-width: 0; }
.goal-row__value { flex: 0 0 170px; }
.goal-row__meter { flex: 1 1 180px; min-width: 0; }
.goal-row__trend { flex: 0 0 96px; }
.goal-row__status { flex: 0 0 170px; }
.goal-row__owner { flex: 0 0 32px; }
@media (max-width: 700px) { .goal-row--head { display: none; } }

/* Budget rows */
.budget-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px var(--pad); border-top: 1px solid var(--line-soft); color: var(--ink); }
.budget-row__name { flex: 1 1 200px; }
.budget-row__meter { flex: 2 1 280px; }
.budget-row__amount { flex: 0 0 150px; }
.budget-row__status { flex: 0 0 170px; }
/* Under them, the amount of the month: a bar and a number that say the same. */
.budget-row__set { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.budget-row__bar { flex: 1 1 180px; max-width: 360px; min-height: var(--press-small); accent-color: var(--primary); cursor: pointer; }
.budget-row__set [hidden] { display: none; }
.budget-row__set .input { min-height: var(--press-small); padding-top: 3px; padding-bottom: 3px; max-width: 96px; }
.rows--pad { padding: 16px var(--pad); }

/* Sign-in page */
.center-screen { min-height: 100vh; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.center-screen__card { width: 100%; max-width: 440px; padding: 40px; }
.sign-in-as { width: 100%; justify-content: flex-start; gap: 12px; text-align: left; }

/* Client portal */
.portal { font-size: 17px; line-height: 1.5; }
.portal .page { max-width: 1040px; padding-top: 48px; gap: 36px; }
.portal .topbar__inner { max-width: 1040px; padding: 14px 32px; gap: 16px; }
.preview-bar { margin: 0; padding: 8px 16px; background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 700; text-align: center; }
/* A code, typed or shown: letters that cannot be mistaken for each other. */
.input--code, .code-shown { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1px; }
.code-shown { font-size: 26px; font-weight: 700; user-select: all; overflow-wrap: anywhere; }
.code-shown--small { font-size: 15px; font-weight: 600; letter-spacing: 0; }

@media (max-width: 600px) {
  .page { padding: 28px 16px 48px; }
  .topbar__inner, .portal .topbar__inner { padding: 12px 16px; gap: 8px 12px; }
  /* The name goes up next to the brand; the navigation takes the lines under them. */
  .user-menu { order: 2; }
  .nav { order: 3; flex-basis: 100%; }
  .nav__link { padding: 4px 10px; }
  /* A task in a list: what it is takes the whole line, the date and the person go under it. */
  .task-row { flex-wrap: wrap; row-gap: 2px; }
  .task-row__what { flex-basis: calc(100% - 40px); }
  .task-row__when { flex-basis: 100%; padding-left: 30px; }
  .h1 { font-size: 34px; }
}

/* 5. The audit report on the client's page ---------------------------------- */
/* One white sheet that reads from top to bottom: what we looked at, the headline numbers, the conclusion,
   a map with one square for each finding, the findings by how much they matter, then the order of the work
   and what happens next. Red, yellow and grey mean the same on the whole sheet: a square is a finding,
   a circle is a step. */
.report { gap: 14px; }
.report [hidden] { display: none !important; }
.report__sheet { --sheet-pad: 64px; display: flex; flex-direction: column; gap: 44px; padding: 56px var(--sheet-pad) 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.report__head { display: flex; flex-direction: column; gap: 14px; }
.report__meta { font-size: 15px; font-weight: 600; color: var(--muted); }
.report__title { max-width: 24ch; font-size: clamp(30px, 5vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -0.8px; text-wrap: balance; }
.report__intro { max-width: 68ch; font-size: 18px; line-height: 1.6; display: flex; flex-direction: column; gap: 10px; }
.report__aside { font-size: 14.5px; color: var(--muted); }

.report__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.report__stat { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.report__figure { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.report__caption { font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.report-tone--bad { color: var(--bad); }
.report-tone--warn { color: var(--warn-fg); }
.report-tone--good { color: var(--good); }
.report-tone--neutral { color: var(--ink); }

.report__section { display: flex; flex-direction: column; gap: 12px; }
.report__heading { font-size: 20px; font-weight: 800; letter-spacing: -0.2px; }
.report__summary { max-width: 68ch; font-size: 18px; line-height: 1.65; display: flex; flex-direction: column; gap: 12px; }

/* The Core Web Vitals: each page that was measured is a line of three numbers, and under each number a scale of
   three equal parts (good, needs work, poor) with a mark where the number falls. */
.report__vitals { gap: 14px; }
.report__vitals-note { max-width: 68ch; font-size: 16.5px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; }
.report__vital-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); }
.report__vital { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px 24px; padding: 20px 22px; break-inside: avoid; }
.report__vital + .report__vital { border-top: 1px solid var(--line); }
.report__vital-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.report__vital-title { font-size: 17px; line-height: 1.3; font-weight: 800; }
.report__verdict { margin-top: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.report__verdict--good { background: var(--good-bg); color: var(--good-fg); }
.report__verdict--bad { background: var(--bad); color: var(--surface); }
.report__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.report__metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.report__metric-name { font-size: 14.5px; font-weight: 700; color: var(--muted); }
.report__metric-value { font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.report__vital-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px 24px; font-size: 14.5px; color: var(--muted); }
.report__vital-keys dt { display: inline; margin-right: 6px; font-weight: 700; color: var(--ink); }
.report__vital-keys dd { display: inline; }
.vital-scale { position: relative; display: flex; gap: 3px; height: 8px; margin: 8px 0 6px; }
.vital-scale__zone { flex: 1 1 0; border-radius: 4px; }
.vital-scale__zone--good { background: var(--good); }
.vital-scale__zone--warn { background: var(--warn-strong); }
.vital-scale__zone--bad { background: var(--bad); }
.vital-scale__mark { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--surface); background: var(--ink); box-shadow: 0 0 0 1px var(--ink); transform: translate(-50%, -50%); }

/* The map: every finding as a square to press. */
.report__map { gap: 16px; padding: 24px 26px; background: var(--ground); border-radius: var(--radius); }
.report__map-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.report__dots { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.report__dot, .report__number { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-small); font-weight: 800; font-variant-numeric: tabular-nums; }
.report__dot { width: 44px; height: 44px; font-size: 16px; transition: transform 0.12s ease, opacity 0.12s ease; }
.report__dot:hover { text-decoration: none; transform: translateY(-2px); }
.report__dot.is-dimmed { opacity: 0.25; }
.report__dot--high, .report__number--high, .report__key--high { background: var(--bad); color: var(--surface); }
.report__dot--medium, .report__number--medium, .report__key--medium { background: var(--warn-strong); color: var(--warn-fg); }
.report__dot--low, .report__number--low, .report__key--low { background: var(--edge); color: var(--ink); }
.report__dot--done, .report__number--done { background: var(--good-bg); color: var(--good-fg); }
.report__key--done { background: var(--good); }
.report__legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14.5px; font-weight: 600; }
.report__legend li { display: inline-flex; align-items: center; gap: 8px; }
.report__key { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px; }

/* The findings, and above them the choice of whose work to show. It stays in sight while the findings scroll. */
.report__findings { display: flex; flex-direction: column; gap: 36px; }
.report__filter { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 calc(-1 * var(--sheet-pad)); padding: 10px var(--sheet-pad); background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.report__filter-label { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.report__tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--line-soft); border-radius: 22px; }
.report__tab { display: inline-flex; align-items: center; gap: 8px; min-height: var(--press); padding: 4px 14px; border-radius: var(--radius-pill); color: var(--ink); font-size: 15px; font-weight: 700; }
.report__tab:hover { text-decoration: none; background: var(--surface); }
.report__tab-count { font-size: 13px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.report__tab[aria-current="true"], .report__tab[aria-current="true"]:hover { background: var(--primary); color: var(--surface); }
.report__tab[aria-current="true"] .report__tab-count { opacity: 0.85; }
.report__showing { display: none; }

.report__group { display: flex; flex-direction: column; gap: 6px; }
.report__group-head, .report__closing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.report__group-head .report__key { align-self: center; flex-basis: 14px; width: 14px; height: 14px; }
.report__group-title { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.report__group-note { max-width: 68ch; font-size: 15.5px; color: var(--muted); }
.report__group-note strong { color: var(--ink); }

.report__entry { display: flex; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.report__group-note + .report__entry { margin-top: 14px; }
/* The finding somebody just jumped to, from the map or from the priorities. */
.report__entry:target .report__number { outline: 3px solid var(--primary); outline-offset: 3px; }
.report__number { flex: 0 0 40px; height: 40px; font-size: 16px; }
.report__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.report__entry-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.report__entry-title { flex: 1 1 320px; padding-top: 6px; font-size: 20px; line-height: 1.3; font-weight: 800; letter-spacing: -0.2px; }
.report__entry--done .report__entry-title { color: var(--muted); }
.report__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 7px; }
.report__tag { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--line-soft); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.report__tag--fixer { background: var(--info-bg); color: var(--info-fg); }
.report__tag--done { background: var(--good-bg); color: var(--good-fg); }
.report__rows { display: flex; flex-direction: column; gap: 12px; }
.report__row { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 4px 18px; }
.report__row dt { padding-top: 2px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.report__row dd { max-width: 68ch; display: flex; flex-direction: column; gap: 8px; font-size: 16.5px; line-height: 1.6; }
/* What somebody has to do is the line a developer looks for: it stands on its own ground. */
.report__row--action { margin: 0 -16px; padding: 14px 16px; background: var(--ground); border-radius: var(--radius-small); }
.report__row--action dt { color: var(--ink); }
.report__url-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.45; }
.report__url { overflow-wrap: anywhere; }
.urls-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.urls-search .input { flex: 1 1 240px; }
.report__images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.report__image { margin: 0; display: flex; flex-direction: column; gap: 8px; break-inside: avoid; }
.report__image img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-small); }

/* The end of the report: the order of the work and what happens next. */
.report__closing { gap: 18px; padding-top: 36px; border-top: 2px solid var(--ink); }
.report__steps { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 12px; max-width: 76ch; }
.report__steps li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; font-size: 16.5px; line-height: 1.6; }
.report__steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 800; }
.report__steps p { padding-top: 2px; }
.report__stages { display: flex; flex-direction: column; gap: 22px; }
.report__stage { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 18px; }
.report__stage-title { display: flex; align-items: center; gap: 10px; align-self: start; min-height: var(--press); font-size: 17px; font-weight: 800; }
.report__todo { list-style: none; padding: 0; display: flex; flex-direction: column; }
.report__todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.report__todo-link { display: inline-flex; align-items: baseline; gap: 12px; min-height: var(--press); padding: 7px 0; color: var(--ink); font-size: 16px; font-weight: 600; }
.report__ref { flex: 0 0 22px; text-align: right; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.report__who { font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.report__foot { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.report__sources-box { display: flex; flex-direction: column; gap: 8px; }
.report__foot-title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.report__sources { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 4px 24px; }
.report__credit strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .report__dot { transition: none; } }

@media screen and (max-width: 700px) {
  .report__sheet { --sheet-pad: 18px; gap: 34px; padding-top: 28px; padding-bottom: 28px; }
  .report__intro, .report__summary { font-size: 17px; }
  .report__map { margin: 0 -6px; padding: 18px 16px; }
  .report__figure { font-size: 28px; }
  .report__stat { padding: 16px; }
  .report__group-title { font-size: 22px; }
  /* The number sits beside the title; everything under them takes the whole width. */
  .report__entry { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px 12px; padding: 22px 0; }
  .report__body { display: contents; }
  .report__number { width: 34px; height: 34px; font-size: 15px; }
  .report__entry-title { flex-basis: 100%; padding-top: 4px; font-size: 19px; }
  .report__tags { padding-top: 0; }
  .report__rows, .report__images { grid-column: 1 / -1; }
  .report__filter-label { display: none; }
  .report__tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
  .report__tab { gap: 5px; padding: 4px 8px; font-size: 14px; white-space: nowrap; }
  .report__row { grid-template-columns: minmax(0, 1fr); }
  .report__row--action { margin: 0 -10px; padding: 12px 10px; }
  .report__stage { grid-template-columns: minmax(0, 1fr); }
  .report__vital { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .report__vital-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .report__verdict { margin-top: 0; }
  .report__metrics { gap: 14px 12px; }
  .report__metric-value { font-size: 20px; }
}

/* Saving the report as a PDF from the browser's print window */
@media print {
  body, .portal { background: #fff; font-size: 13px; }
  .topbar, .no-print, .back-link { display: none !important; }
  .page, .portal .page { max-width: none; padding: 0; gap: 24px; }
  .fold > summary::after { display: none; }
  .table-scroll { overflow: visible; }
  .keyword-table { min-width: 0; font-size: 11px; }
  .keyword-table th, .keyword-table td { padding: 6px 6px; }
  .rows > * { break-inside: avoid; }
  .report { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .report__sheet { --sheet-pad: 0px; gap: 22px; padding: 0; border: 0; }
  .report__title { font-size: 30px; }
  .report__intro, .report__summary { font-size: 13.5px; }
  .report__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .report__stat { padding: 12px 14px; }
  .report__figure { font-size: 24px; }
  .report__caption, .report__aside, .report__legend, .report__foot, .report__foot-title, .report__group-note { font-size: 11px; }
  .report__heading { font-size: 15px; }
  .report__map { padding: 14px 16px; break-inside: avoid; }
  .report__vitals-note { font-size: 13.5px; }
  .report__vital { grid-template-columns: 150px minmax(0, 1fr); padding: 12px 14px; }
  .report__vital-title { font-size: 13.5px; }
  .report__metric-name, .report__vital-keys, .report__verdict { font-size: 11px; }
  .report__metric-value { font-size: 17px; }
  .report__dot { width: 30px; height: 30px; font-size: 12px; }
  .report__findings { gap: 22px; }
  .report__showing { display: block; font-size: 13px; font-weight: 700; }
  .report__group-title { font-size: 18px; }
  .report__group-head, .report__group-note, .report__closing-head, .report__stage-title { break-after: avoid; }
  .report__entry { gap: 14px; padding: 16px 0; break-inside: avoid; }
  .report__entry:target .report__number { outline: 0; }
  .report__number { flex-basis: 30px; height: 30px; font-size: 12px; }
  .report__entry-title { padding-top: 4px; font-size: 15px; }
  .report__tags { padding-top: 4px; }
  .report__tag, .report__who { font-size: 10px; }
  .report__row { grid-template-columns: 100px minmax(0, 1fr); }
  .report__row dt { font-size: 11px; }
  .report__row dd, .report__steps li, .report__todo-link { font-size: 12.5px; }
  .report__row--action { margin: 0 -10px; padding: 8px 10px; }
  .report__closing { padding-top: 20px; break-inside: avoid; }
  .report__steps li { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  .report__steps li::before { width: 22px; height: 22px; font-size: 11px; }
  .report__todo-link { min-height: 0; padding: 4px 0; }
  .report__todo li { break-inside: avoid; }
}
}

/* A row of the audit form: value, caption, colour */
.grid--stat-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1.2fr); gap: 12px; }
@media (max-width: 600px) { .grid--stat-row { grid-template-columns: minmax(0, 1fr); } }
/* A row of the Core Web Vitals in the audit form: page, device, then the three numbers */
.grid--vital-row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) {
  .grid--vital-row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
  .grid--vital-row > :first-child { grid-column: 1 / 3; }
}