/* ==========================================================================
   AdCheckLab · Ad Copy Checker
   Fields use the shared FORM CONTROLS look from style.css; this sheet only
   sets their width and height. Motion uses the tokens from :root.
   ========================================================================== */


/* Verdict colours come from the shared tokens in style.css (--color-pass-ink
   and friends), which carry their own dark values. Only the search result
   mock keeps a palette of its own: it imitates Google's result page, which
   has a light and a dark look of its own. */
:root {
  --ac-serp-bg: #ffffff;
  --ac-serp-ink: #202124;
  --ac-serp-muted: #4d5156;
  --ac-serp-link: #1a0dab;
  --ac-serp-chip: #f1f3f4;
}

@media screen {
  :root[data-theme="dark"] {
    --ac-serp-bg: #202124;
    --ac-serp-ink: #e8eaed;
    --ac-serp-muted: #bdc1c6;
    --ac-serp-link: #99c3ff;
    --ac-serp-chip: #303134;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ac-serp-bg: #202124;
    --ac-serp-ink: #e8eaed;
    --ac-serp-muted: #bdc1c6;
    --ac-serp-link: #99c3ff;
    --ac-serp-chip: #303134;
  }
}

.adcopy-page main.editor-workbench {
  max-width: 1160px;
}

.adcopy-page .editor-hero-title {
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.adcopy-page .editor-hero-desc {
  max-width: 700px;
  font-size: 15px;
}

.ac-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.ac-panel {
  animation: panelIn var(--dur-base) var(--ease-entrance);
}

.ac-panel[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- toolbar */
.ac-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
}

.ac-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 180px;
  min-width: 0;
}

.ac-control-wide {
  flex: 2 1 240px;
}

.ac-control label,
.ac-bulk-box label,
.ac-domain-row label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-mid-gray);
}

.ac-control select {
  width: 100%;
}

.ac-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ac-toolbar-actions .btn-primary {
  min-height: 42px;
  padding: 0 20px;
  font-size: 13px;
}

.ac-toolbar-actions .bulk-btn {
  min-height: 42px;
}

.ac-toolbar-actions .ico {
  width: 15px;
  height: 15px;
  margin-right: 6px;
}

/* ------------------------------------------------------------------ grid */
.ac-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 18px;
  align-items: start;
}

.ac-editor {
  min-width: 0;
}

.ac-counting {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-mid-gray);
  line-height: 1.5;
}

.ac-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The fields, the summary and the preview are built by ad-copy-ui.js, which
   runs after the static page has painted. Empty, they hold the room the
   default format (Google responsive search ad) takes, so filling them does
   not push the rest of the page down (CLS 0.17 to 0.26 before). */
.ac-counting:empty {
  min-height: 39px;
}

.ac-fields:empty {
  min-height: 890px;
}

.ac-summary:empty {
  min-height: 105px;
}

.ac-preview:empty {
  min-height: 146px;
}

.ac-field {
  padding: 16px 18px 14px;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-nested);
}

.ac-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ac-field-head label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
}

.ac-field-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 4px 0 10px;
  font-size: 12px;
  color: var(--color-mid-gray);
}

.ac-source,
.ac-issue a {
  color: var(--color-ink);
  font-weight: 600;
  text-underline-offset: 3px;
}

.ac-field input,
.ac-field textarea {
  width: 100%;
}

.ac-field textarea {
  min-height: 96px;
}

/* Counter and meter */
.ac-counter {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-badges);
  background: var(--color-surface-alt);
  color: var(--color-mid-gray);
  transition: var(--tx-interactive);
}

.ac-counter:empty {
  display: none;
}

.ac-counter.is-pass { color: var(--color-pass-ink); background: var(--color-pass-bg); }
.ac-counter.is-warn { color: var(--color-warn-ink); background: var(--color-warn-bg); }
.ac-counter.is-fail { color: var(--color-fail-ink); background: var(--color-fail-bg); }

.ac-meter {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  background: var(--color-surface-alt);
  border-radius: 4px;
}

.ac-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-pass);
  border-radius: 4px;
  transition: width var(--dur-base) var(--ease-standard), background-color var(--dur-quick) var(--ease-standard);
}

.ac-meter span.is-warn { background: var(--color-warn); }
.ac-meter span.is-fail { background: var(--color-ember); }
.ac-meter span.is-empty { background: transparent; }

/* Per line results */
.ac-field-results:empty {
  display: none;
}

.ac-field-results {
  margin-top: 10px;
}

.ac-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ac-item {
  padding: 8px 10px;
  border-radius: var(--radius-small);
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-pass);
}

.ac-item.is-warn { border-left-color: var(--color-warn); }
.ac-item.is-fail { border-left-color: var(--color-ember); }

.ac-item-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
}

.ac-item-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-mid-gray);
}

.ac-item.is-fail .ac-item-count {
  color: var(--color-fail-ink);
}

.ac-item-text {
  font-size: 13px;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.ac-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: var(--radius-badges);
}

.ac-chip:empty { display: none; }
.ac-chip.is-pass { color: var(--color-pass-ink); background: var(--color-pass-bg); }
.ac-chip.is-warn { color: var(--color-warn-ink); background: var(--color-warn-bg); }
.ac-chip.is-fail { color: var(--color-fail-ink); background: var(--color-fail-bg); }

.ac-issues {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ac-issue {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-ink);
  padding-left: 14px;
  position: relative;
}

.ac-issue::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-mid-gray);
}

.ac-issue.is-fail::before { background: var(--color-ember); }
.ac-issue.is-warn::before { background: var(--color-warn); }
.ac-issue.is-info { color: var(--color-mid-gray); }

/* ------------------------------------------------------------------- side */
.ac-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: calc(var(--header-h, 58px) + 16px);
  min-width: 0;
}

.ac-card {
  padding: 16px 18px;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.ac-preview-card {
  padding: 16px 18px;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
}

.ac-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.ac-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}

.ac-card-note {
  font-size: 12px;
  color: var(--color-mid-gray);
  line-height: 1.4;
}

.ac-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-badges);
  background: var(--color-surface-alt);
  color: var(--color-mid-gray);
}

.ac-badge.is-pass { color: var(--color-pass-ink); background: var(--color-pass-bg); }
.ac-badge.is-warn { color: var(--color-warn-ink); background: var(--color-warn-bg); }
.ac-badge.is-fail { color: var(--color-fail-ink); background: var(--color-fail-bg); }

.ac-summary-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-mid-gray);
}

.ac-domain-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.ac-domain-row[hidden] {
  display: none;
}

.ac-domain-row input {
  width: 100%;
}

/* Google search sample */
.ac-serp {
  padding: 14px;
  background: var(--ac-serp-bg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-nested);
  font-family: Arial, var(--sans);
  overflow-wrap: anywhere;
}

.ac-serp-sponsored {
  font-size: 12px;
  font-weight: 700;
  color: var(--ac-serp-ink);
  margin-bottom: 8px;
}

.ac-serp-site {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ac-serp-favicon {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ac-serp-chip);
  color: var(--ac-serp-muted);
  font-size: 12px;
  font-weight: 700;
}

.ac-serp-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ac-serp-brand {
  font-size: 13px;
  color: var(--ac-serp-ink);
}

.ac-serp-url {
  font-size: 12px;
  color: var(--ac-serp-muted);
}

.ac-serp-headline {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ac-serp-link);
}

.ac-serp-desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ac-serp-muted);
}

/* Meta feed sample */
.ac-meta {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-nested);
  overflow: hidden;
  font-family: var(--sans);
}

.ac-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 6px;
  font-size: 13px;
}

.ac-meta-top span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ac-meta-top small {
  font-size: 11.5px;
  color: var(--color-mid-gray);
}

.ac-meta-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-hairline);
}

.ac-meta-primary {
  margin: 0;
  padding: 2px 12px 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.ac-meta-more {
  color: var(--color-mid-gray);
  font-weight: 600;
}

.ac-meta-media {
  aspect-ratio: 1.91 / 1;
  background:
    linear-gradient(135deg, rgb(var(--ink-rgb) / 0.04) 25%, transparent 25%) 0 0 / 16px 16px,
    var(--color-surface-alt);
}

.ac-meta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface-alt);
}

.ac-meta-footer-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.ac-meta-domain {
  font-size: 11px;
  color: var(--color-mid-gray);
  overflow-wrap: anywhere;
}

.ac-meta-headline {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.ac-meta-desc {
  font-size: 12.5px;
  color: var(--color-mid-gray);
}

.ac-meta-cta {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--color-hairline);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-ink);
}

/* Generic preview */
.ac-generic-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.ac-generic-row:last-child {
  border-bottom: 0;
}

.ac-generic-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-mid-gray);
}

.ac-generic-text {
  font-size: 13.5px;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- bulk */
.ac-bulk-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
}

.ac-bulk-box textarea {
  width: 100%;
  min-height: 180px;
}

.ac-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-mid-gray);
}

.ac-bulk-summary {
  margin: 16px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}

.ac-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-nested);
  background: var(--color-paper);
}

.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ac-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-mid-gray);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-hairline);
  white-space: nowrap;
}

.ac-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: top;
  color: var(--color-ink);
}

.ac-table tbody tr:last-child td {
  border-bottom: 0;
}

.ac-cell-text {
  min-width: 200px;
  overflow-wrap: anywhere;
}

.ac-cell-num {
  font-family: var(--mono);
  white-space: nowrap;
}

.ac-table .ac-issues {
  margin: 0;
}

/* ------------------------------------------------------------------ guide */
.ac-guide {
  padding: 64px 20px 72px;
  background: var(--color-paper);
  border-top: 1px solid var(--color-hairline);
}

.ac-guide-inner {
  max-width: 780px;
  margin: 0 auto;
}

.ac-guide .section-label {
  color: var(--color-ember-text);
}

.ac-guide h2 {
  margin: 32px 0 10px;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.ac-guide h2:first-of-type {
  margin-top: 8px;
}

.ac-guide p,
.ac-guide li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.ac-guide ul {
  padding-left: 20px;
  margin: 10px 0 0;
}

.ac-guide li + li {
  margin-top: 6px;
}

.ac-guide a {
  color: var(--color-ink);
  font-weight: 600;
  text-underline-offset: 3px;
}

.ac-guide code {
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-hairline);
}

.ac-guide .ac-table-wrap {
  margin: 14px 0;
}

.ac-faq {
  margin-top: 40px;
}

.ac-faq .faq-accordion {
  margin-top: 14px;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .ac-grid {
    grid-template-columns: 1fr;
  }

  .ac-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .ac-toolbar,
  .ac-bulk-box {
    padding: 14px;
  }

  .ac-toolbar-actions {
    width: 100%;
  }

  .ac-toolbar-actions .btn-primary {
    flex: 1 1 auto;
  }

  .ac-field {
    padding: 14px;
  }

  .ac-item-row {
    grid-template-columns: 1fr auto;
  }

  .ac-item-text {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* The bulk table becomes one labelled card per line. */
  #ac-bulk-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  #ac-bulk-table,
  #ac-bulk-table tbody,
  #ac-bulk-table tr,
  #ac-bulk-table td {
    display: block;
    width: 100%;
  }

  #ac-bulk-table tr {
    border-bottom: 1px solid var(--color-hairline);
    padding: 6px 0;
  }

  #ac-bulk-table td {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    border-bottom: 0;
    padding: 4px 12px;
  }

  #ac-bulk-table td::before {
    content: attr(data-label);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-mid-gray);
  }

  .ac-cell-text {
    min-width: 0;
  }

  .ac-guide {
    padding: 48px 16px 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ac-panel {
    animation: none;
  }

  .ac-meter span {
    transition: background-color var(--dur-quick) var(--ease-standard);
  }
}