/* The client app shell: Home, Findings, Connections, Your data
   (docs/findings.md section 5, logs/2026-09-25-findings-mock.html and its
   screenshots). Reuses web/admin.css's tokens (--hairline, --muted,
   --accent, --accent-tint, --good/--warn, --sans, --radius, ...) rather
   than inventing new ones; this file only names the shell/nav/card layout
   admin.css doesn't already cover. Class names (m-shell, m-nav, m-kpi,
   m-f, m-c) match the wireframe file's own classes 1:1 so the mock and
   the real app stay directly comparable. Kept out of admin.css itself
   (CLAUDE.md: admin.css is the admin surface's own stylesheet).

   Breakpoint: sidebar nav at >= 641px, a horizontal tab strip below 641px
   (docs/findings.md section 5's "sidebar on desktop, tab strip on phone"). */

/* U4 goal 5: one type scale for the whole client surface -- a page title,
   a section title, body text, and small/meta text -- so the shell, Home,
   Findings, Connections and sign-in stop drifting between one-off sizes
   (12/12.5/13/13.5/14/14.5/15/16/22/24px) that read as accidental rather
   than designed. Values are the sizes already most common in this file, so
   normalizing to them is not a visual redesign. */
/* This file's own --fs-page-title/section-title/body/small are now defined
   once in web/tokens.css, on the shared 13/15/16/17/24/30 scale, so this
   surface stops drifting from admin.css's scale (22/14.5/12.5 moved onto
   24/16/13 respectively; the readability-pass rationale in admin.css
   applies here too). No local :root needed. */

.m-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.m-topbar {
  padding: var(--sp-12) var(--sp-32) 0;
}

/* LEE-469: the side menu is a full-height flex column, sticky at the top, so
   Connections, Your data and the account button sit at its foot. */
.m-nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--rail);
  border-right: 1px solid var(--hairline);
  padding: var(--sp-16) var(--sp-12);
}
.m-bar,
.m-scrim {
  display: none;
}
.m-co {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  box-sizing: border-box;
  padding: var(--sp-6) var(--sp-8);
  border: 0;
  border-radius: var(--radius-ctl);
  background: transparent;
  font: inherit;
  color: var(--text);
  text-align: left;
}
button.m-co,
.m-acct-btn {
  cursor: pointer;
}
button.m-co:hover,
button.m-co[aria-expanded="true"],
.m-acct-btn:hover,
.m-acct-btn[aria-expanded="true"] {
  background: var(--accent-tint);
}
.m-co .co {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: var(--fs-15);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.m-mono {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-13);
  font-weight: 600;
}
.m-mono.sm {
  width: 24px;
  height: 24px;
}
.m-ico {
  flex: 0 0 auto;
  color: var(--faint);
}
.m-setup {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin: var(--sp-12) 0 0;
  padding: 10px;
  border-radius: var(--radius-ctl);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-13);
}
.m-setup:hover {
  background: var(--accent-tint);
}
.m-setup-bar {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  overflow: hidden;
}
.m-setup-bar > span {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.m-setup-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-8);
}
.m-setup-title {
  font-weight: 500;
}
.m-setup-count {
  color: var(--muted);
}
.m-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.m-group-main {
  margin-top: var(--sp-12);
}
.m-spacer {
  flex: 1;
}
.m-nav-label {
  margin: var(--sp-20) 10px var(--sp-6);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--faint);
}
.m-item,
.m-pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-ctl);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-15);
  font-weight: 400;
}
.m-item:hover,
.m-pop-row:hover {
  background: var(--accent-tint);
}
.m-item.on {
  background: var(--accent-tint);
  font-weight: 600;
}
.m-item.on .m-ico {
  color: var(--text);
}
.m-item-label {
  flex: 1;
  min-width: 0;
}
.m-count {
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.m-nav a:focus-visible,
.m-nav button:focus-visible,
.m-menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.m-rule,
.m-pop-rule {
  height: 1px;
  border: 0;
  background: var(--hairline);
}
.m-rule {
  margin: 10px 0 var(--sp-8);
}
.m-pop-rule {
  margin: var(--sp-6) 0;
}
.m-acct-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  box-sizing: border-box;
  padding: var(--sp-6) var(--sp-8);
  border: 0;
  border-radius: var(--radius-ctl);
  background: transparent;
  font: inherit;
  color: var(--text);
  text-align: left;
}
.m-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  font-size: var(--fs-13);
  font-weight: 600;
}
.m-acct-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.m-acct-email {
  font-size: var(--fs-13);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-acct-role {
  font-size: var(--fs-13);
  color: var(--faint);
}
/* Disclosure panels: a button and a panel of links, not role="menu". */
.m-pop {
  position: absolute;
  left: var(--sp-12);
  width: 216px;
  box-sizing: border-box;
  padding: var(--sp-6);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 20;
}
.m-pop[hidden] {
  display: none;
}
.m-pop-co {
  top: 64px;
}
.m-pop-acct {
  bottom: 72px;
}
.m-pop-head {
  margin: var(--sp-6) var(--sp-8) var(--sp-4);
  font-size: var(--fs-13);
  color: var(--faint);
}
.m-pop-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-pop-row {
  min-height: 40px;
  padding: 0 var(--sp-8);
}
.m-pop-row[aria-current="true"] {
  background: var(--accent-tint);
}
.m-pop-name {
  flex: 1;
  min-width: 0;
}
/* LEE-461: marks a company an operator is viewing but does not belong to. */
.co-tag {
  margin-left: var(--sp-4);
  color: var(--faint);
  font-size: var(--fs-13);
  font-weight: 400;
  white-space: nowrap;
}
/* LEE-461: "Show every company" is a button styled as a panel row. */
.m-pop-row.co-more {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.m-pop-row.co-more:hover {
  background: var(--accent-tint);
}

.m-main {
  padding: var(--sp-32) var(--sp-32);
  max-width: 860px;
}
.m-main h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-page-title);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
  /* REACH.md: a long unbroken name (a domain, say) wraps, never overflows. */
  overflow-wrap: anywhere;
}
.m-main h2 {
  font-size: var(--fs-section-title);
  margin: var(--sp-24) 0 var(--sp-12);
  color: var(--muted);
  font-weight: 600;
}
.m-sub {
  color: var(--muted);
  margin: 0 0 var(--sp-24);
  font-size: var(--fs-body);
}
/* GROUPING.md: Home's progress counts and read date are one header, not
   two separate items. */
.m-sub:has(+ .m-sub) {
  margin-bottom: var(--sp-2);
}


.m-f {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  padding: var(--sp-16) var(--sp-16);
  margin-bottom: var(--sp-12);
  background: var(--card);
}
.m-f h3 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-page-title);
  font-weight: 600;
}
.m-f .eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.m-f .st,
.f-row .st {
  float: right;
  font-size: var(--fs-13);
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
}
.m-f .st.open,
.f-row .st.open {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--warn);
}
.m-f .st.ver,
.f-row .st.ver {
  background: var(--good-bg);
  border-color: var(--good);
  color: var(--good);
}
.m-f .st.sent,
.f-row .st.sent {
  background: var(--accent-tint);
  border-color: var(--hairline);
}
.m-f .st.fixed,
.f-row .st.fixed {
  background: var(--good-bg);
  border-color: var(--good);
  color: var(--good);
}
.m-f .st.dismissed,
.f-row .st.dismissed {
  background: var(--canvas);
  border-color: var(--hairline);
  color: var(--muted);
}
.m-f p {
  margin: var(--sp-6) 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.m-f .ev {
  color: var(--muted);
}
.m-f .ev a {
  color: inherit;
}
.m-f .acts {
  margin-top: var(--sp-12);
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  align-items: center;
}
.m-f .acts button {
  font: inherit;
  font-size: var(--fs-15);
  height: var(--ctl-h-sm);
  padding: 0 var(--sp-12);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ctl);
  color: var(--text);
  background: var(--card);
  cursor: not-allowed;
}
.m-f .acts button.pri {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  /* REACH.md: the one main action is bigger than the buttons beside it. */
  height: var(--ctl-h);
  padding: 0 var(--sp-16);
}
.m-f .acts button:disabled {
  opacity: 0.55;
}
.m-f .acts button:not(:disabled) {
  cursor: pointer;
}
.m-f .status-msg {
  color: var(--muted);
  font-size: var(--fs-small);
  margin: var(--sp-6) 0 0;
}
/* MOMENTUM.md, the peak moment: a verified retest reads as a result, not a
   status line, and points at the next open finding. */
.m-f .acts.verified-result {
  display: block;
  margin-top: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  background: var(--good-bg);
  border: 1px solid var(--good);
  border-radius: var(--radius-ctl);
}
.m-f .verified-head {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--good);
}
.m-f .verified-result .status-msg {
  color: var(--text);
}
.m-f .next-link {
  display: inline-block;
  margin-top: var(--sp-12);
  font-weight: 600;
  color: var(--text);
}
.m-f .steps {
  margin: var(--sp-8) 0 0;
  padding-left: var(--sp-20);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text);
}
/* LEE-536: the trust points, after Dropbox Dash's connect screen. Icon,
   short bold heading, one muted line, hairlines between. */
.m-f .trust {
  list-style: none;
  margin: var(--sp-20) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.m-f .trust li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-12) 0;
}
.m-f .trust li + li {
  border-top: 1px solid var(--hairline);
}
.m-f .trust-ico {
  flex: 0 0 auto;
  margin-top: var(--sp-2);
  color: var(--text);
}
.m-f .trust-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--muted);
}
.m-f .trust-text strong {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text);
}
.m-f .snippet-box {
  margin-top: var(--sp-12);
}
.m-f .tag-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-f .tag-check {
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--hairline);
}
.m-f .tag-check:first-child {
  border-top: 0;
}
.m-f .tag-check-head {
  margin: 0;
}
.m-f .tag-check-mark {
  display: inline-block;
  width: var(--sp-16);
  color: var(--muted);
}
.m-f .tag-check.done .tag-check-mark {
  color: var(--good);
}
.m-f .tag-check-state {
  margin-left: var(--sp-8);
  font-size: var(--fs-small);
  color: var(--muted);
}
.m-f .snippet-box summary {
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--accent);
}
.m-f .snippet {
  margin: var(--sp-8) 0;
  padding: var(--sp-12) var(--sp-12);
  border-radius: var(--radius-ctl);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--fs-13);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}
.m-f .tag-check-result {
  color: var(--muted);
  font-size: var(--fs-small);
  margin: var(--sp-6) 0 0;
}
/* Stripe, GA4, Google Ads and Meta's own connect box (S4b goal 3): one
   input, one primary button, one result line -- same shape as the site
   tag's .snippet-box minus the snippet itself. `.err` marks a rejected
   key or a needs_attention/400 result in the warn color; a plain or
   `pending` result stays muted so waiting never reads as failing. */
.m-f .conn-box {
  margin-top: var(--sp-12);
}
.m-f .conn-input {
  font: inherit;
  font-size: var(--fs-small);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
}
.m-f .conn-result {
  color: var(--muted);
  font-size: var(--fs-small);
  margin: var(--sp-6) 0 0;
}
.m-f .conn-result.err {
  color: var(--warn);
}
.m-f .conn-result:empty {
  display: none;
}
/* LEE-473: the one line shown when Google sends the person back. */
.m-main .conn-notice {
  margin: 0 0 var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  font-size: var(--fs-small);
}
.m-main .conn-notice.err {
  color: var(--warn);
}
.m-f .sc-g-result {
  margin-bottom: var(--sp-8);
}
/* LEE-416: the Search Console export form. Reuses .conn-box/.conn-input;
   these only size the textareas and set the small labels and help lines. */
.m-f .sc-label {
  display: block;
  margin: var(--sp-16) 0 var(--sp-4);
  font-size: var(--fs-small);
  font-weight: 600;
}
.m-f .sc-csv {
  display: block;
  max-width: none;
  min-height: 88px;
  resize: vertical;
}
.m-f .sc-files {
  font-size: var(--fs-small);
}
.m-f .sc-help {
  color: var(--muted);
  font-size: var(--fs-small);
  margin: var(--sp-4) 0 0;
}
.m-f .sc-add-row {
  margin: var(--sp-12) 0 0;
  font-size: var(--fs-small);
}
.m-f .sc-add {
  color: var(--accent);
}
/* LEE-473: the connected screen. The not-indexed note sits apart from
   Refresh. (Disconnect moved to the header in LEE-536.) */
.m-f .sc-note {
  margin-top: var(--sp-20);
}
.m-f .sc-idx-item .sc-reason {
  margin-bottom: var(--sp-8);
}
.m-f .dismiss-form,
.m-f .later-form {
  display: none;
  margin-top: var(--sp-12);
  gap: var(--sp-8);
  align-items: center;
  flex-wrap: wrap;
}
.m-f.show-dismiss-form .dismiss-form,
.m-f.show-later-form .later-form {
  display: flex;
}
.m-f .later-form .later-line {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--fs-13);
  color: var(--muted);
}
/* The Later and Not relevant forms use the card's button style, not the
   browser's. The field gets its own row, the buttons sit under it. */
.m-f .later-form .form-btns,
.m-f .dismiss-form .form-btns {
  display: flex;
  gap: var(--sp-8);
  flex: 1 1 100%;
}
.m-f .later-form button,
.m-f .dismiss-form button {
  font: inherit;
  font-size: var(--fs-15);
  height: var(--ctl-h-sm);
  padding: 0 var(--sp-12);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ctl);
  color: var(--text);
  background: var(--card);
  cursor: pointer;
}
.m-f .later-form button:disabled,
.m-f .dismiss-form button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.m-f .later-note-input,
.m-f .dismiss-reason-input {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  height: var(--ctl-h-sm);
  border-radius: var(--radius-ctl);
  font: inherit;
  font-size: var(--fs-13);
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  flex: 1 1 220px;
}
.m-f .later-error,
.m-f .dismiss-error {
  width: 100%;
  margin: 0;
  font-size: var(--fs-13);
  color: var(--warn);
}
.m-f .retest-error {
  width: 100%;
  margin: 0;
  font-size: var(--fs-13);
  color: var(--warn);
}
.m-f .retest-error:empty {
  display: none;
}
/* MOMENTUM.md: the retest wait line shares the slot but is not a warning. */
.m-f .retest-error.is-wait {
  color: var(--muted);
}
/* The finding detail page (U1 goal 3): one finding, full width, built on
   top of the .m-f card rules above for its status pill and action row. */
.m-detail {
  max-width: 640px;
}
.m-detail .back-link {
  display: inline-block;
  margin-bottom: var(--sp-16);
  font-size: var(--fs-small);
  color: var(--accent);
  text-decoration: none;
}
.m-detail .det-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-bottom: var(--sp-4);
}
.m-detail .det-head h1 {
  margin: 0;
}
.m-detail .st {
  float: none;
  flex-shrink: 0;
}
.m-detail section {
  margin-top: var(--sp-20);
}
.m-detail .det-citations {
  margin: var(--sp-6) 0 0;
  padding-left: var(--sp-20);
  font-size: var(--fs-small);
}
.m-detail .det-citations a {
  color: var(--accent);
}
.m-detail .det-history {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--hairline);
}
.m-detail .acts {
  margin-top: var(--sp-16);
}
.m-detail .acts button:not(.pri) {
  border-color: transparent;
  background: none;
  color: var(--accent);
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
/* GROUPING.md: "Not relevant" hides the finding, unlike the three actions
   that help fix it, so it sits apart at the far end of the row. */
.m-detail .acts button.act-away {
  margin-left: auto;
  color: var(--muted);
}
.m-detail .acts button:not(.pri):disabled {
  color: var(--muted);
}
.m-detail .det-history ul {
  margin: var(--sp-6) 0 0;
  padding-left: var(--sp-20);
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.6;
}

/* The Findings list: tabs, then one row per finding (U1 goal 2). Rows
   replace the old expanded m-f cards on this screen; the card styles
   above stay in use only on the finding detail page (goal 3) and Home's
   "Do these three first" (goal 4). */
.f-tabs {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-6);
}
.f-tab {
  font: inherit;
  font-size: var(--fs-body);
  padding: var(--sp-8) var(--sp-12);
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.f-tab.on {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.f-tab-count {
  color: var(--muted);
  font-size: var(--fs-13);
}
.f-tab.on .f-tab-count {
  color: inherit;
}
.f-panel[hidden] {
  display: none;
}
.f-empty {
  color: var(--muted);
  font-size: var(--fs-body);
  padding: var(--sp-16) 0;
}
.f-row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
.f-row:hover {
  background: var(--canvas);
}
.f-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.f-title {
  font-size: var(--fs-body);
  color: var(--text);
}
.f-cat {
  font-size: var(--fs-small);
  color: var(--muted);
}
.f-do-first {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.f-row .st {
  float: none;
  flex-shrink: 0;
}
/* Group headings inside a list (decision-load pass): the Open tab's
   "Do these first" and its areas, and Connections' "Not available yet".
   Same eyebrow as .f-do-first; muted except the first group. */
.f-group {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: var(--sp-16) 0 0;
  padding: 0 var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.f-group-first {
  color: var(--accent);
  margin-top: var(--sp-12);
}
.f-date {
  font-size: var(--fs-small);
  color: var(--muted);
  flex-shrink: 0;
}
.f-row.static {
  cursor: default;
}
.f-row.static:hover {
  background: none;
}
.c-soon {
  font-size: var(--fs-small);
  color: var(--muted);
  flex-shrink: 0;
}
/* LEE-536: the Connections list, after Claude's connector settings and
   Dropbox Dash's app grid. Each group is one card; every row leads with the
   source's logo, the name sits over its one line of value, and the right
   side holds either the state or one button. Every Connect is the same
   size; only the first is filled. */
.c-intro {
  font-size: var(--fs-small);
  color: var(--muted);
  margin: var(--sp-4) 0 0;
}
.conn-group {
  max-width: 760px;
  margin-top: var(--sp-24);
}
.conn-group .f-group {
  margin: 0 0 var(--sp-8);
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.conn-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.conn-card > .f-row,
.conn-card > .f-row.m-f {
  gap: var(--sp-16);
  margin: 0;
  padding: var(--sp-16) var(--sp-20);
  border: 0;
  border-radius: 0;
  background: none;
}
.conn-card > .f-row:not(:first-child) {
  border-top: 1px solid var(--hairline);
}
.conn-card > a.f-row:hover,
.conn-card > .f-row.m-f:hover {
  background: var(--bg-page);
}
.conn-card > .f-row.m-f {
  cursor: pointer;
}
.conn-card .f-row-main {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.conn-card .f-title {
  font-size: var(--fs-15);
  font-weight: 500;
}
.conn-card .f-row.m-f .acts {
  margin: 0;
  flex-shrink: 0;
}
.conn-card .f-row.m-f .acts button.pri,
.c-connect {
  height: var(--ctl-h-sm);
  padding: 0 var(--sp-12);
  font-size: var(--fs-small);
  font-weight: 500;
}
.c-connect {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-ctl);
  background: var(--card);
  color: var(--text);
  flex-shrink: 0;
}
.conn-card > a.f-row:hover .c-connect {
  border-color: var(--faint);
}
.conn-row-notice:empty {
  display: none;
}
.conn-row-notice .conn-notice {
  margin: 0 var(--sp-20) var(--sp-12);
}
.c-right {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-shrink: 0;
  text-align: right;
}
.c-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
}
.c-state {
  font-size: var(--fs-small);
  color: var(--muted);
}
.c-state.ok {
  color: var(--good);
  font-weight: 500;
}
.c-state.warn {
  color: var(--warn);
}
.c-sub {
  font-size: var(--fs-small);
  color: var(--muted);
}
.c-soon {
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
}
.conn-group.soon .f-title,
.conn-group.soon .c-logo {
  opacity: 0.6;
}
/* The logo tile: a hairline square with the brand mark inside. */
.c-logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
}
.c-logo svg {
  width: 22px;
  height: 22px;
}
.c-logo.lg {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
}
.c-logo.lg svg {
  width: 26px;
  height: 26px;
}
.c-logo-search_console { color: var(--brand-search-console); }
.c-logo-ga4 { color: var(--brand-ga4); }
.c-logo-stripe { color: var(--brand-stripe); }
.c-logo-google_ads { color: var(--brand-google-ads); }
.c-logo-meta { color: var(--brand-meta); }
/* Detail header. Before connecting: the company mark and the source logo
   joined by dots. Connected: logo, name and state, Disconnect at the right. */
.c-bridge {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
}
.c-bridge .m-mono {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  font-size: var(--fs-17);
}
.c-dots {
  display: inline-flex;
  gap: var(--sp-4);
}
.c-dots i {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--dot-none);
}
/* Before connecting, the page reads like Dash's connect screen: narrower,
   the marks and title centered, the input and button full width. The
   "Not connected" pill is hidden there (the title already says Connect) and
   shows again once the handler flips it to Connected. */
.m-detail:has(.c-connect-head) {
  max-width: 560px;
}
.c-connect-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: var(--sp-8);
}
.c-connect-head .det-head {
  flex-direction: column;
  gap: var(--sp-8);
}
.c-connect-head .st.dismissed {
  display: none;
}
.c-connect-head + .ev {
  text-align: center;
  color: var(--muted);
}
.m-detail:has(.c-connect-head) .conn-input {
  max-width: none;
}
.m-f .c-facts {
  margin: var(--sp-8) 0 0;
  border-top: 1px solid var(--hairline);
}
.m-f .c-facts > div {
  display: flex;
  gap: var(--sp-16);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small);
}
.m-f .c-facts dt {
  flex: 0 0 120px;
  color: var(--muted);
}
.m-f .c-facts dd {
  margin: 0;
  color: var(--text);
}
.m-detail:has(.c-connect-head) .conn-box .acts button.pri,
.m-detail:has(.c-connect-head) section > .acts button.pri,
.m-detail:has(.c-connect-head) > .acts button.pri {
  flex: 1;
}
.m-detail .det-head.c-head {
  justify-content: flex-start;
  gap: var(--sp-16);
}
.c-head-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.m-f .c-disc {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  height: var(--ctl-h-sm);
  padding: 0 var(--sp-12);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ctl);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.m-f .c-disc:hover {
  border-color: var(--bad-border);
  color: var(--bad);
}
.m-f .c-disc:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .conn-card > .f-row,
  .conn-card > .f-row.m-f {
    gap: var(--sp-12);
    padding: var(--sp-12) var(--sp-16);
  }
  .conn-card .c-right {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-4);
  }
  .conn-card .c-state.warn {
    max-width: 120px;
  }
}
.f-unknowns {
  margin-top: var(--sp-16);
  font-size: var(--fs-small);
}
.f-unknowns a {
  color: var(--accent);
}
.f-tools {
  margin-top: var(--sp-24);
  font-size: var(--fs-small);
}
.f-tools h2 {
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0 0 var(--sp-8);
}
.f-tools ul {
  margin: 0;
  padding-left: var(--sp-16);
}
.f-tools a {
  color: var(--accent);
}
.m-hist {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--sp-8);
}

/* Your data screen (S5a): the list of rows uses .f-row/.f-row-main/
   .f-title/.f-cat above, same as Connections. This is just the one
   primary action underneath it and its quiet result line. */
/* LEE-488: the email-updates checkbox, on the request form and Your data. */
.email-updates-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  font-size: var(--fs-small);
  color: var(--muted);
  margin: var(--sp-12) 0;
  cursor: pointer;
}
.email-updates-row input {
  margin-top: var(--sp-4);
  flex: none;
}
.email-updates {
  margin-top: var(--sp-24);
}
.email-updates h2 {
  font-size: var(--fs-body);
  margin: 0;
}
.email-updates-result {
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0;
}
.email-updates-result.err {
  color: var(--warn);
}
.email-updates-result:empty {
  display: none;
}
.data-download {
  margin-top: var(--sp-16);
}
.data-download-result {
  font-size: var(--fs-small);
  color: var(--muted);
  margin: var(--sp-8) 0 0;
}
.data-download-result.err {
  color: var(--warn);
}
.data-download-result:empty {
  display: none;
}

.m-c {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  padding: var(--sp-16) var(--sp-16);
  margin-bottom: var(--sp-12);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  background: var(--card);
}
.m-c small {
  color: var(--muted);
  display: block;
  font-size: var(--fs-small);
}

@media (max-width: 640px) {
  .m-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .m-topbar {
    padding: var(--sp-12) var(--sp-16) 0;
  }
  /* LEE-469: a 56px top bar, and the menu as a 240px drawer over a scrim. */
  .m-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    height: 56px;
    padding: 0 var(--sp-8);
    border-bottom: 1px solid var(--hairline);
  }
  .m-menu-btn {
    flex: 0 0 auto;
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-ctl);
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .m-menu-btn .m-ico {
    color: currentColor;
  }
  .m-bar-co {
    min-width: 0;
    font-size: var(--fs-15);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-scrim:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 30;
  }
  .m-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* The desktop align-self: start would shrink a fixed box to its content. */
    align-self: stretch;
    width: 240px;
    height: auto;
    overflow-y: auto;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  .m-nav.open {
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .m-nav,
    .m-nav.open {
      transition: none;
    }
  }
  .m-item,
  .m-pop-row {
    min-height: var(--tap);
  }
  .m-main {
    padding: var(--sp-20) var(--sp-16);
  }
  .m-c {
    grid-template-columns: 1fr;
  }
}

/* POLISH.md: the screen heading takes focus after navigation so screen
   readers announce it; it is not a control, so it gets no ring. */
#screen h1[tabindex="-1"]:focus { outline: none; }

/* In preview every action is off. Make that visible without a hover. */
body.viewas-active button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Responsive slice 2: 44px tap targets on phones and tablets. The action
   buttons are 28px tall at desktop width, which is fine with a mouse. */
@media (max-width: 900px) {
  .m-f .acts button,
  .m-f .c-disc,
  a.btn-link.pri,
  .fixes-all {
    height: auto;
    min-height: var(--tap);
  }
  /* LEE-536: on Connections the whole row is the tap target, so its one
     filled Connect stays the size of the bordered ones beside it. */
  .conn-card .f-row.m-f .acts button.pri {
    height: var(--ctl-h-sm);
    min-height: 0;
  }
  /* REACH.md: 16px text in a box stops iPhone Safari zooming the page when
     the owner taps it to paste an ID. */
  .m-f .conn-input,
  .m-f .sc-csv,
  .m-f .dismiss-reason-input,
  .m-f .later-note-input {
    font-size: var(--fs-16);
    min-height: var(--tap);
  }
  .f-tab {
    min-height: var(--tap);
  }
}
/* Three tabs fit one line at 375px. */
@media (max-width: 480px) {
  .f-tabs {
    gap: 0;
  }
  .f-tab {
    flex: 1 1 auto;
    padding: var(--sp-8) var(--sp-6);
    white-space: nowrap;
  }
}

/* MOMENTUM.md, the last moment: the one next step when nothing is open,
   drawn like the .pri buttons above but as a link (it opens email). */
a.btn-link.pri {
  display: inline-flex;
  align-items: center;
  height: var(--ctl-h);
  padding: 0 var(--sp-16);
  border-radius: var(--radius-ctl);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-15);
  text-decoration: none;
}
.m-f.all-handled p {
  margin: 0 0 var(--sp-8);
}

/* F1, request a read: the website box takes the same look as the email box
   on the sign-in card (app.html's .field input[type="email"]). */
.field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ctl);
  height: var(--ctl-h);
  padding: 0 var(--sp-12);
  font: inherit;
  color: var(--text);
  font-size: var(--fs-body);
}
.field input[type="text"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* F2b, Fixes: impact chips, list rows, Home's Casco layout and the fix
   detail. Chip colours are the --chip-* token pairs in tokens.css. */
.chip {
  flex-shrink: 0;
  display: inline-block;
  min-width: 72px;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: 1.5;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--radius-pill);
}
.chip-high { background: var(--chip-high-bg); color: var(--chip-high-fg); }
.chip-medium { background: var(--chip-med-bg); color: var(--chip-med-fg); }
.chip-low { background: var(--chip-low-bg); color: var(--chip-low-fg); }
.f-cat-right {
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
}
/* The row's status pill or date, when shown, sits before the area. */
.f-row .st + .f-cat-right,
.f-row .f-date + .f-cat-right {
  margin-left: 0;
}

.home-lead {
  margin: 0 0 var(--sp-16);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.home-lead a {
  color: var(--accent);
}
.home-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
  padding: var(--sp-12) var(--sp-16);
  margin-bottom: var(--sp-12);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.home-status-text {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-15);
}
.home-status .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--dot-ok);
  flex-shrink: 0;
}
/* LEE-517: on a connection's detail page a fold is the secondary path, so it
   sits a step below the primary button and carries no shadow. */
.m-detail .m-fold {
  margin-top: var(--sp-20);
  box-shadow: none;
}
.m-fold {
  margin-bottom: var(--sp-12);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.m-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
  min-height: var(--tap);
  padding: var(--sp-12) var(--sp-16);
  cursor: pointer;
  list-style: none;
}
.m-fold summary::-webkit-details-marker { display: none; }
.m-fold summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: var(--sp-4);
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.m-fold[open] summary::after { transform: rotate(-135deg); }
.m-fold summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius);
}
.m-fold-title {
  font-size: var(--fs-16);
  font-weight: 600;
  flex-grow: 1;
}
.m-fold-sum {
  font-size: var(--fs-15);
  color: var(--muted);
}
.m-fold-body {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-12) var(--sp-16);
}
.m-fold-body p {
  margin: var(--sp-6) 0;
  font-size: var(--fs-15);
  line-height: 1.5;
}
.plan-bars {
  display: flex;
  gap: var(--sp-4);
  margin: var(--sp-12) 0;
}
.plan-bars span {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
}
.plan-bars span.now { background: var(--faint); }
.plan-bars span.done { background: var(--dot-ok); }
.plan-list {
  margin: 0;
  padding-left: var(--sp-16);
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.6;
}

.fixes-card {
  margin-bottom: var(--sp-16);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0 var(--sp-16) var(--sp-4);
}
.fixes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
  padding: var(--sp-12) 0 var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.m-main .fixes-head h2 {
  margin: 0;
  font-size: var(--fs-16);
  color: var(--text);
}
.fixes-head span {
  font-size: var(--fs-15);
  color: var(--muted);
}
.fixes-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
  padding: var(--sp-12) 0;
}
.fixes-all {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: var(--fs-15);
}
.fixes-all:hover {
  color: var(--text);
}
/* LEE-418: Home shows three fixes, then this link to the full list. */
.fixes-more {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-15);
}

/* Fix detail: back link, chip line, title, then cards and a facts panel. */
.m-f.fix-detail {
  max-width: none;
  border: 0;
  background: none;
  padding: 0;
}
.fix-detail .det-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-8);
  color: var(--muted);
  font-size: var(--fs-15);
}
.fix-detail h1 {
  margin-bottom: var(--sp-16);
}
.det-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.fix-detail .det-card {
  margin: 0;
  padding: var(--sp-16);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.fix-detail .det-card h2 {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-16);
  color: var(--text);
}
.fix-detail .det-history {
  margin: 0;
}
.det-why {
  margin: 0 0 var(--sp-16);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}
/* Status, effort and level in one compact row, not a column. */
.det-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-24);
  margin: 0 0 var(--sp-16);
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.det-facts dt {
  font-size: var(--fs-13);
  color: var(--muted);
}
.det-facts dd {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--text);
}
/* One primary button; the other actions are plain links under it. */
.fix-detail .acts {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
}
.fix-detail .acts-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-16);
}
.fix-detail .acts-more button {
  padding: 0;
  height: auto;
  min-height: var(--ctl-h-sm);
  font-size: var(--fs-15);
  text-decoration: underline;
  color: var(--muted);
}
.fix-detail .acts-more button.act-away {
  margin-left: 0;
}
/* On a phone the area drops under the title, so titles get the full width. */
@media (max-width: 640px) {
  .f-row {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .f-row .f-cat-right {
    order: 5;
    flex-basis: 100%;
    margin-left: 0;
    padding-left: calc(var(--sp-64) + var(--sp-12));
    text-align: left;
  }
  /* LEE-486: with a why line the area would be a third grey line under the
     title; the fix itself still names the area. */
  .f-row:has(.f-why) .f-cat-right {
    display: none;
  }
}

/* Messages (MS1): the list, the read and the line screens. Reuses the Fixes
   list and detail classes; only what they lack is here. */
.msg-now {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
}
.msg-now:hover {
  background: var(--canvas);
}
.msg-eyebrow {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.msg-now-line {
  font-size: var(--fs-17);
  color: var(--text);
}
.msg-num {
  flex-shrink: 0;
  text-align: right;
}
.msg-st-proposed,
.msg-st-waiting,
.msg-st-watching {
  color: var(--muted);
}
.msg-st-testing,
.msg-st-directional {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
.msg-st-decided {
  color: var(--good);
  background: var(--good-bg);
  border-color: var(--good);
}
.msg-st-nodiff {
  color: var(--text);
  background: var(--accent-tint);
}
.msg-claims {
  margin: 0;
  padding: 0;
  list-style: none;
}
.msg-claim,
.msg-item {
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--hairline);
}
.msg-claim:last-child,
.msg-item:last-child {
  border-bottom: 0;
}
.msg-claim-text {
  font-size: var(--fs-body);
  color: var(--text);
}
.msg-item p {
  margin: 0 0 var(--sp-4);
}
.msg-quote {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-12);
  border-left: 2px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.msg-src a {
  color: var(--accent);
}
.msg-fix {
  display: inline-block;
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--accent);
}
.msg-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-12);
}
.msg-soon {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.msg-soon-label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--muted);
}
.msg-chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-16);
  margin: var(--sp-12) 0;
}
.msg-chart-title {
  margin-top: 0;
}
.msg-bar-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-4) 0;
  font-size: var(--fs-small);
}
.msg-bar-label {
  color: var(--muted);
}
.msg-bar-track {
  display: block;
  height: var(--sp-8);
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.msg-bar {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
}
.msg-bar-a {
  background: var(--rule);
}
.msg-bar-b {
  background: var(--accent);
}
.msg-checks {
  margin: 0;
  padding-left: var(--sp-16);
}
@media (max-width: 640px) {
  .msg-compare,
  .msg-chart {
    grid-template-columns: minmax(0, 1fr);
  }
  .msg-row .msg-num {
    order: 5;
    flex-basis: 100%;
    text-align: left;
  }
}

/* LEE-343, LEE-423: the first-sign-in questions, and the line Home keeps. */
.pq { margin: var(--sp-16) 0; }
.onb .pq-q {
  margin: 0 0 var(--sp-8);
  font-weight: 600;
}
.pq-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}
.pq-opt {
  min-height: var(--tap);
  padding: var(--sp-8) var(--sp-12);
  font: inherit;
  font-size: var(--fs-15);
  text-align: left;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  cursor: pointer;
}
.pq-opt[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.pq-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pq-opt:disabled { cursor: default; opacity: .6; }
.onb .pq-saved {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-13);
  color: var(--faint);
}
.onb .pq-saved:empty { margin: 0; }
.onb .pq-saved.is-error { color: var(--bad); }
.pq-cannot { margin: 0 0 var(--sp-16); color: var(--muted); }
.pq-cannot p { margin: 0; }
.pq-cannot ul { margin: var(--sp-8) 0 0; padding-left: var(--sp-24); }
.onb {
  max-width: 720px;
  padding: var(--sp-24);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.onb h1 { margin-top: 0; }
.onb-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-16);
  margin-top: var(--sp-16);
}
.onb-primary {
  min-height: var(--tap);
  padding: 0 var(--sp-24);
  font: inherit;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.onb-skip,
.onb-link {
  padding: var(--sp-8) 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.onb-primary:focus-visible,
.onb-skip:focus-visible,
.onb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onb-primary:disabled,
.onb-skip:disabled { cursor: default; opacity: .6; }
.home-profile {
  margin: 0 0 var(--sp-12);
  color: var(--muted);
  font-size: var(--fs-15);
}
.home-profile .onb-link { padding: 0; }
.onb-guess {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  background: var(--bg-page);
  border-left: 3px solid var(--accent);
}
/* Search (LEE-414 S1): a KPI row, rows with a path over a truncated title,
   and a "good" chip for In Google. Tokens only. */
.chip-good { background: var(--good-bg); color: var(--good); }
/* The Search page's Connect card, shown until Search Console is connected. */
.s-connect {
  margin-bottom: var(--sp-16);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.s-connect-lead {
  margin: 0;
}
.s-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-12);
}
.s-kpi {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-16);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.s-kpi strong {
  font-size: var(--fs-24);
  color: var(--text);
}
.s-kpi span {
  font-size: var(--fs-small);
  color: var(--muted);
}
.s-main {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  flex-wrap: nowrap;
}
.s-path,
.s-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-imp,
.s-fixes {
  flex-shrink: 0;
}
.s-h1 {
  overflow-wrap: anywhere;
}
.fix-detail .det-card p {
  margin: 0 0 var(--sp-6);
}
.fix-detail .det-card .f-row:last-child {
  border-bottom: 0;
}
/* LEE-474: the queries screen, a page's queries. LEE-529: the Search diagnosis. */
/* LEE-543: the result of a press sits at the bottom of the viewport, so it shows on a long list. */
.s-q-notice {
  position: fixed;
  left: var(--sp-16);
  right: var(--sp-16);
  bottom: var(--sp-16);
  margin: 0 auto;
  max-width: calc(var(--sp-64) * 8);
  box-sizing: border-box;
  padding: var(--sp-12) var(--sp-16);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-small);
  z-index: 20;
}
.s-ff-thin { margin: var(--sp-8) 0; font-size: var(--fs-small); color: var(--muted); }
.s-dx { margin: var(--sp-16) 0; padding: 0; }
.s-dx-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--sp-4) var(--sp-16);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--hairline);
}
.s-dx-row dt { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.s-dx-row dd { margin: 0; overflow-wrap: anywhere; }
.s-dx-ask { margin: var(--sp-16) 0 0; padding: var(--sp-12) var(--sp-16); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); }
.s-head { margin-bottom: 0; }
.s-todo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-8) var(--sp-16); padding: var(--sp-12) 0; }
.s-todo-held { color: var(--muted); }
.s-links { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-24); margin: var(--sp-8) 0 0; }
.s-links a { display: inline-block; min-height: var(--tap); line-height: var(--tap); font-weight: 500; text-decoration-color: var(--text); }
@media (max-width: 640px) {
  .s-dx-row { grid-template-columns: 1fr; }
}
.s-ql { list-style: none; margin: 0 0 var(--sp-16); padding: 0; }
.s-q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6) var(--sp-12);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--hairline);
}
.s-q-text { flex: 1 1 100%; font-weight: 600; overflow-wrap: anywhere; }
.s-q-num, .s-q-page { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.s-q-mark { flex: 1 1 100%; font-size: var(--fs-small); font-weight: 500; color: var(--text); text-decoration-color: var(--text); }
.s-q-opts { flex: 1 1 100%; }
.s-qt { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.s-qt th, .s-qt td { padding: var(--sp-6) var(--sp-8) var(--sp-6) 0; text-align: left; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .s-q-text { flex: 1 1 240px; }
  .s-q-opts { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .s-row {
    flex-wrap: wrap;
  }
  .s-row .s-main {
    flex-basis: 100%;
  }
}

/* LEE-421, LEE-443: the Funnel screen on the company's stages. One column of
   stages with a join row between each pair; each stage is one link, at least
   44px tall. */
.m-main:has(.st-list) {
  max-width: 900px;
}
.fn-window {
  display: flex;
  gap: var(--sp-8);
  margin: var(--sp-12) 0 var(--sp-16);
}
.fn-window .btn {
  min-height: 44px;
}
.fn-window .btn[aria-pressed="true"] {
  background: var(--accent-tint);
  border-color: var(--faint);
  font-weight: 600;
}
.st-now {
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: var(--radius);
  padding: var(--sp-16);
  margin: 0 0 var(--sp-24);
}
.st-now.gap {
  border-color: var(--bad-border);
  background: var(--bad-bg);
}
.st-now .k {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--warn);
  margin: 0 0 var(--sp-4);
}
.st-now.gap .k {
  color: var(--bad);
}
.st-now p {
  margin: 0;
  font-size: var(--fs-17);
  line-height: var(--lh-normal);
}
.st-now a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.st-now .d-next {
  margin: var(--sp-12) 0 0;
  padding: var(--sp-12) 0 0;
  border-left: 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-15);
}
.st-now .d-next .k,
.st-now.gap .d-next .k {
  color: var(--muted);
  margin: 0;
}
.st-now .d-next a {
  font-weight: 600;
}
.st-list {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.st-list .st {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-4) var(--sp-16);
  align-items: center;
  padding: var(--sp-12) var(--sp-16);
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
}
.st-list .st:hover .st-label {
  text-decoration: underline;
}
.st-list .st.stuck {
  box-shadow: inset 3px 0 0 var(--warn);
  background: var(--warn-bg);
}
.st-list .st.stuck.gapk {
  box-shadow: inset 3px 0 0 var(--bad);
  background: var(--bad-bg);
}
.st-label {
  font-size: var(--fs-body);
  font-weight: 500;
}
.st-barrow {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-width: 0;
}
.st-bar {
  height: var(--sp-24);
  background: var(--faint);
  border-radius: var(--radius-sm);
  min-width: var(--sp-4);
}
.st-bar.off {
  background: repeating-linear-gradient(45deg, var(--hairline) 0 6px, transparent 6px 12px);
  border: 1px dashed var(--rule);
  width: 30%;
}
.st-num {
  font-size: var(--fs-17);
  font-weight: 600;
  white-space: nowrap;
}
.st-num.off {
  font-size: var(--fs-15);
  font-weight: 400;
  color: var(--faint);
}
.st-flag {
  grid-column: 2;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--warn);
}
.gapk .st-flag {
  color: var(--bad);
}
.st-from {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--muted);
}
.st-from b {
  font-weight: 500;
}
.st-from .gap {
  color: var(--bad);
}
.st-join {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-16);
  padding: var(--sp-4) var(--sp-16);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-page);
  font-size: var(--fs-small);
  color: var(--muted);
}
.st-join .rate {
  grid-column: 1;
}
.st-join .how {
  grid-column: 2;
}
.tag {
  display: inline-block;
  padding: 0 var(--sp-6);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-small);
}
.tag.observed {
  color: var(--good);
  background: var(--good-bg);
}
.tag.untracked {
  color: var(--warn);
  background: var(--warn-bg);
}
.tag.none {
  color: var(--faint);
  background: var(--accent-tint);
}
.st-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8) var(--sp-16);
  margin: var(--sp-12) 0 0;
}
.st-acts .btn {
  min-height: var(--tap);
}
.st-alt {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text);
  font-size: var(--fs-small);
}
.st-next {
  padding: var(--sp-12) var(--sp-16);
  border-top: 1px solid var(--hairline);
}
.st-next.dashed {
  border: 1px dashed var(--faint);
  border-radius: var(--radius);
  margin: var(--sp-8);
}
.st-next h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-17);
}
.st-next p {
  margin: 0;
  color: var(--muted);
  line-height: var(--lh-normal);
}
.st-next .st-acts {
  margin-top: var(--sp-8);
}
.st-acts.quiet .st-alt:first-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.st-needs {
  margin: var(--sp-24) 0 0;
  font-size: var(--fs-small);
  color: var(--muted);
}
.st-needs .k {
  margin: 0 0 var(--sp-4);
  font-weight: 500;
}
.st-needs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.st-needs a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-16);
  min-height: var(--tap);
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  border-top: 1px solid var(--hairline);
}
.st-needs a:hover {
  color: var(--text);
}
.st-needs .how {
  color: var(--faint);
}
.d-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: var(--fs-15);
}
.d-big {
  font-size: var(--fs-30);
  font-weight: 600;
  margin: var(--sp-4) 0 0;
}
.d-of {
  color: var(--muted);
  margin: 0 0 var(--sp-24);
}
.d-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-16);
  margin: 0 0 var(--sp-16);
}
.d-card h2 {
  margin: 0 0 var(--sp-8);
  color: var(--text);
  font-size: var(--fs-17);
}
.d-card p {
  margin: 0 0 var(--sp-12);
  line-height: var(--lh-normal);
}
.d-card p:last-child {
  margin-bottom: 0;
}
.d-next {
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-12);
}
.d-next .k,
.d-wait .k {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted);
}
.d-next a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
}
.d-wait {
  color: var(--muted);
}
.d-quiet {
  font-size: var(--fs-15);
  color: var(--muted);
}
.d-quiet p {
  margin: 0 0 var(--sp-8);
}
.d-split {
  list-style: none;
  padding: 0;
  margin: var(--sp-16) 0 0;
  font-size: var(--fs-15);
  color: var(--muted);
}
.d-split li {
  margin: 0 0 var(--sp-4);
}
@media (max-width: 640px) {
  .st-list .st,
  .st-join {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .st-flag,
  .st-from,
  .st-join .how,
  .st-join .rate {
    grid-column: 1;
  }
}

/* Tap targets for controls defined after the responsive block above, so
   this has to come after them to win. */
@media (max-width: 900px) {
  .fix-detail .acts-more button,
  .onb-skip {
    min-height: var(--tap);
  }
  .home-profile .onb-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
}

/* LEE-463: the approved wording on the fix detail. */
.fix-detail .wording {
  margin: var(--sp-12) 0;
}
.fix-detail .det-card .wording p {
  margin: 0 0 var(--sp-4);
}
.fix-detail .wording-page,
.fix-detail .wording-label {
  font-size: var(--fs-13);
  color: var(--muted);
}
/* LEE-539: a Search fix's wording is one group per field (title, heading, description). */
.fix-detail .det-card .wording .wording-field-name {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text);
}
.fix-detail .wording-field + .wording-field {
  margin-top: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--hairline);
}
.fix-detail .wording-page + .wording-field {
  margin-top: var(--sp-8);
}
.fix-detail .wording-now {
  margin: 0 0 var(--sp-12);
  padding: var(--sp-8) var(--sp-12);
  border-left: 3px solid var(--hairline);
  background: var(--bg-page);
  overflow-wrap: anywhere;
}
.fix-detail .wording-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.fix-detail .wording-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
}
.fix-detail .wording-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.fix-detail .wording-copy {
  flex: none;
  min-height: var(--ctl-h-sm);
  padding: 0 var(--sp-12);
  font: inherit;
  font-size: var(--fs-13);
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  cursor: pointer;
}
.fix-detail .fix-note {
  font-size: var(--fs-13);
  color: var(--muted);
}

/* LEE-489: the Experiments screens. Rows reuse .f-row and the Messages state
   chips; this is only the empty state, the detail text and the method panel. */
.exp-row .f-row-main {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--sp-2);
}
/* The Search page's .st (a grid row) shares the class name with the state chip. */
.exp-row .st {
  display: inline-block;
  flex: none;
  align-self: center;
  min-height: 0;
  padding: var(--sp-2) var(--sp-8);
}
.exp-empty h2 {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-20);
}
.exp-empty p {
  margin: 0 0 var(--sp-12);
}
.exp-steps {
  margin: 0 0 var(--sp-12);
  padding-left: var(--sp-24);
}
.exp-steps li {
  margin-bottom: var(--sp-4);
}
.exp-fixes {
  margin-top: var(--sp-8);
}
.exp-detail .exp-state,
.exp-detail .exp-measure {
  margin: var(--sp-12) 0;
}
.exp-detail .exp-reading-note {
  color: var(--muted);
  font-size: var(--fs-13);
}
.exp-method {
  margin-top: var(--sp-16);
}
.exp-method summary {
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font-weight: 600;
}
.exp-method summary::before {
  content: "\25B8";
  margin-right: var(--sp-8);
  color: var(--muted);
}
.exp-method[open] summary::before {
  content: "\25BE";
}
.exp-go {
  color: var(--muted);
}
.exp-method dt {
  margin-top: var(--sp-12);
  font-weight: 600;
}
.exp-method dd {
  margin: var(--sp-2) 0 0;
  color: var(--muted);
}

/* LEE-486: the why line under a fix's title in a list row. */
.f-why {
  flex-basis: 100%;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.f-row[aria-current="true"] {
  background: var(--accent-tint);
}

/* LEE-486: at 901px and wider a fix opens in a panel on the right edge and
   the list stays visible, undimmed, beside it. */
@media (min-width: 901px) {
  .m-main.has-panel {
    max-width: none;
    padding-right: calc(var(--sp-64) * 8 + var(--sp-8) + var(--sp-32));
  }
  .m-f.fix-detail.fix-panel {
    position: fixed;
    top: var(--panel-top, 0);
    right: 0;
    bottom: 0;
    width: calc(var(--sp-64) * 8 + var(--sp-8));
    max-width: 100vw;
    box-sizing: border-box;
    overflow-y: auto;
    padding: var(--sp-48) var(--sp-24) var(--sp-32);
    background: var(--card);
    border: 0;
    border-left: 1px solid var(--hairline);
    z-index: 5;
  }
  .fix-panel-close {
    position: absolute;
    top: var(--sp-12);
    right: var(--sp-12);
    width: var(--ctl-h-sm);
    height: var(--ctl-h-sm);
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fs-24);
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius);
  }
  .fix-panel-close:hover {
    background: var(--accent-tint);
    color: var(--text);
  }
  .m-main .fix-panel .fix-panel-title {
    margin: 0 0 var(--sp-12);
    font-size: var(--fs-20);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
  }
  .fix-panel-title:focus { outline: none; }
}

/* LEE-486 style pass: the Fixes list and fix panel read as a work tool
   (AirOps list, Peec actions, Canny idea panel). Scoped to .fix-row,
   .fix-list (the Fixes tab panels) and .fix-view (the fix panel and phone
   detail) so Messages, Search, Connections and Your data keep their look. */

/* Impact: three bars plus the word, ink on rule. */
.f-impact {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
}
.impact-bars {
  flex: none;
}
.impact-bars rect {
  fill: var(--rule);
}
.impact-bars rect.on {
  fill: var(--text);
}
/* Impact leads the meta line: a heavier word, bars toned by level. */
.f-meta .f-impact {
  font-weight: 500;
  color: var(--muted);
}
.f-impact[data-impact="medium"] .impact-bars rect.on {
  fill: var(--muted);
}
.f-impact[data-impact="low"] .impact-bars rect.on {
  fill: var(--faint);
}

/* A fix row: title, why line, one quiet meta line, chevron. */
.fix-row {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
}
.fix-row:hover {
  background: var(--accent-tint);
}
.fix-row .f-row-main {
  display: block;
  flex: 1;
  min-width: 0;
}
.fix-row .f-title {
  display: block;
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.fix-row .f-why {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: var(--sp-2);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--muted);
}
.f-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--sp-6);
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--faint);
}
.f-meta > span + span::before {
  content: "\00B7";
  margin: 0 var(--sp-6);
  color: var(--rule);
}
.f-chev {
  flex: none;
  color: var(--faint);
}
.fix-row[aria-current="true"] {
  background: var(--accent-tint);
  box-shadow: inset 2px 0 0 var(--text);
}

/* Each group of rows is one bordered list; rows ruled inside it. */
.fix-group {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.fix-group .fix-row:last-child {
  border-bottom: 0;
}
.fix-list .f-group {
  font-size: var(--fs-13);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--faint);
  margin: 0;
  padding: var(--sp-24) 0 var(--sp-8);
  border-bottom: 0;
}
.fix-list .f-group-first {
  padding-top: var(--sp-12);
}

/* The fix panel and phone detail. */
.fix-view h1,
.m-main .fix-view .fix-panel-title {
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 var(--sp-8);
  text-transform: none;
  letter-spacing: normal;
}
.fix-view .det-why {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--muted);
}
/* Facts as a label and value list. */
.fix-view .det-facts {
  display: grid;
  gap: var(--sp-8);
  margin: var(--sp-20) 0 0;
  padding: var(--sp-16) 0 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 0;
}
.fix-view .det-facts > div {
  display: grid;
  grid-template-columns: calc(var(--sp-64) * 2) 1fr;
  align-items: baseline;
  gap: var(--sp-12);
}
.fix-view .det-facts dt {
  font-size: var(--fs-13);
  color: var(--faint);
}
.fix-view .det-facts dd {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--text);
}
.fix-view .det-main {
  gap: 0;
}
.fix-view .det-card {
  margin: 0;
  padding: var(--sp-24) 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.fix-view .det-card h2 {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-15);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}
.fix-view .det-card p {
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text);
}
/* What we saw sits in a tinted block: it is evidence, not advice. */
.fix-view .det-evidence {
  padding: var(--sp-12) var(--sp-16);
  background: var(--accent-tint);
  border-radius: var(--radius-ctl);
}
.fix-view .det-evidence p {
  margin: 0;
}
/* The fix sits in an outlined white block: grey is what we saw, outlined
   is what to do. */
.fix-view .det-do {
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ctl);
}
.fix-view .det-do > :first-child {
  margin-top: 0;
}
.fix-view .det-do > :last-child {
  margin-bottom: 0;
}
.fix-view .det-citations {
  list-style: none;
  margin: var(--sp-12) 0 0;
  padding: var(--sp-8) 0 0;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-13);
  overflow-wrap: anywhere;
}
.fix-view .det-citations li + li {
  margin-top: var(--sp-4);
}
.fix-view .det-citations a {
  color: var(--faint);
  text-decoration: underline;
}
/* Actions in a footer with a hairline above, primary first. */
.fix-view .fix-foot {
  position: sticky;
  bottom: 0;
  margin: var(--sp-24) calc(var(--sp-24) * -1) 0;
  padding: var(--sp-12) var(--sp-24);
  background: var(--card);
  border-top: 1px solid var(--hairline);
}
.fix-view .fix-foot .acts {
  margin-top: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
}
.fix-view .fix-foot .status-msg:first-child {
  margin: 0 0 var(--sp-8);
}
.fix-view .fix-foot .acts-more {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-4);
}
.fix-view .acts-more button,
.m-detail.fix-view .acts button:not(.pri) {
  height: var(--ctl-h);
  padding: 0 var(--sp-8);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ctl);
  background: var(--card);
  font-size: var(--fs-15);
  color: var(--text);
  text-decoration: none;
}
.fix-view .acts-more button:hover:not(:disabled),
.m-detail.fix-view .acts button:not(.pri):hover:not(:disabled) {
  background: var(--accent-tint);
  color: var(--text);
}
.fix-view .acts button.pri {
  width: 100%;
  height: var(--sp-40);
  border-radius: var(--radius-ctl);
}
.fix-view .acts button.pri:not(:disabled) {
  background: var(--accent);
  color: var(--on-accent);
}
@media (max-width: 900px) {
  .fix-view .fix-foot {
    margin: var(--sp-24) calc(var(--sp-16) * -1) 0;
    padding: var(--sp-12) var(--sp-16);
  }
  .fix-view .fix-foot .acts button.pri {
    height: calc(var(--sp-40) + var(--sp-4));
  }
  .fix-view .fix-foot {
    margin-bottom: calc(var(--sp-20) * -1);
    padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom));
  }
  .fix-view .fix-foot .acts-more button {
    height: calc(var(--sp-40) + var(--sp-4));
    padding: 0 var(--sp-4);
    font-size: var(--fs-13);
    white-space: nowrap;
  }
  /* Phone facts: tighter rows and a narrower label column. */
  .fix-view .det-facts {
    gap: var(--sp-4);
    padding-top: var(--sp-12);
  }
  .fix-view .det-facts > div {
    grid-template-columns: calc(var(--sp-48) * 2 + var(--sp-8)) 1fr;
  }
}

/* The panel's top bar: the area on the left, close on the right. */
@media (min-width: 901px) {
  /* A flex column, so the footer sits at the panel's foot when the fix is
     short and stays pinned there when it scrolls. */
  .m-f.fix-detail.fix-panel {
    display: flex;
    flex-direction: column;
    padding: 0 var(--sp-24);
  }
  .m-f.fix-detail.fix-panel > * {
    flex-shrink: 0;
  }
  .fix-panel .det-main {
    padding-bottom: var(--sp-24);
  }
  .fix-panel .fix-foot {
    margin-top: auto;
  }
  .fix-panel-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(var(--sp-48) + var(--sp-8));
    margin: 0 calc(var(--sp-24) * -1) var(--sp-20);
    padding: 0 var(--sp-12) 0 var(--sp-24);
    background: var(--card);
    border-bottom: 1px solid var(--hairline);
  }
  .fix-panel-area {
    font-size: var(--fs-15);
    font-weight: 500;
    color: var(--muted);
  }
  /* With the panel open the list is narrow: one line of why per row. */
  .m-main.has-panel .fix-row .f-why {
    -webkit-line-clamp: 1;
  }
  .fix-panel-bar .fix-panel-close {
    position: static;
  }
}

/* Home's fix rows line up with the card's heading and button. */
.fixes-card .fix-row {
  padding-left: 0;
  padding-right: 0;
}

/* Phone rows: impact and effort only, and room for the whole why line. */
@media (max-width: 640px) {
  .f-meta .f-meta-area {
    display: none;
  }
  .fix-row .f-why {
    -webkit-line-clamp: 3;
  }
}

/* LEE-556: "Checked:" label over the page list, and the "Found in the read of" line. */
.fix-view .det-checked {
  margin: var(--sp-12) 0 0;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-13);
  color: var(--muted);
}
.fix-view .det-checked + .det-citations {
  margin-top: var(--sp-4);
  padding-top: 0;
  border-top: 0;
}
.fix-view .det-found {
  margin: var(--sp-12) 0 0;
  font-size: var(--fs-13);
  color: var(--muted);
}