/*! © 2015–2026 YourWeb (yourweb.se). All rights reserved. Proprietary – see LICENSE.md */
/* Google-förhandsvisning (/verktyg/google-forhandsvisning/). Styles only this tool uses, prefix .serp-.
   Linked after /verktyg/verktyg.css.

   The two boxes that imitate a search result use px on purpose: the script measures the text in
   px with canvas and breaks the lines itself, so each box has to be exactly as wide as the script
   assumes. They never use the page's own font. */

/* ───────────────────────── Hero: a long H1, the workspace sits below it ───────────────────────── */

.tool--t4 .tool-hero {
  padding-block: 1rem 0.25rem;
}

.tool--t4 .tool-hero__copy {
  gap: 0.6rem;
}

.tool--t4 .tool-hero h1 {
  max-width: none;
  font-size: clamp(1.5rem, 6.4vw, 2.6rem);
}

.tool--t4 .assure {
  margin-top: 1.1rem;
  padding-bottom: 2.25rem;
}

@media (min-width: 40rem) {
  .tool--t4 .tool-hero {
    padding-block: 1.35rem 0.5rem;
  }

  .tool--t4 .tool-hero__copy {
    gap: 0.85rem;
  }
}

@media (min-width: 64rem) {
  .tool--t4 .tool-hero {
    padding-block: 2.25rem 1.25rem;
  }

  .tool--t4 .tool-hero__copy {
    gap: 1.1rem;
  }

  .tool--t4 .tool-hero h1 {
    font-size: clamp(2rem, 3.4vw, 3rem);
  }

  .tool--t4 .tool-hero__side .art {
    height: 10.5rem;
  }
}

/* ───────────────────────── Workspace ───────────────────────── */

.tool-panel.serp {
  gap: 0;
  padding: 0.85rem;
}

.serp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}

.serp-grid > * {
  min-width: 0;
}

.serp-fields,
.serp-address {
  max-width: 40rem;
}

.serp-fields {
  display: grid;
  gap: 0.95rem;
}

.serp-filled:empty {
  display: none;
}

/* The address of a fetched page can be one long word. */
.serp-filled .notice__title {
  overflow-wrap: anywhere;
}

.serp .field {
  gap: 0.35rem;
}

.serp-term {
  color: var(--text-dim);
  font-weight: 600;
}

.serp textarea.input {
  min-height: 5.25rem;
  padding-block: 0.6rem;
}

/* Length meter under a field: a thin bar, then advice on the left and the numbers on the right. */
.serp-meter {
  display: grid;
  gap: 0.3rem;
}

.serp-meter__bar {
  display: block;
  height: 0.25rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
}

.serp-meter__bar > span {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--st);
}

.serp-meter__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.05rem 0.9rem;
  font-size: 0.84rem;
  line-height: 1.4;
}

.serp-meter__advice {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--st);
  font-weight: 800;
}

.serp-meter__advice .st-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.serp-meter__advice .st-icon .icon {
  width: 0.8rem;
  height: 0.8rem;
}

.serp-meter__nums {
  color: var(--text-dim);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .serp-meter__bar > span {
    transition: width 160ms var(--ease-out);
  }
}

/* ───────────────────────── Preview blocks ───────────────────────── */

.serp-result,
.serp-share {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.serp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.serp-head .chip {
  padding-inline: 0.8rem;
}

.serp-h {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.serp-note {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* The frame the white result sits in. On phones it runs edge to edge inside the panel. */
.serp-stage {
  display: grid;
  gap: 0.55rem;
  margin-inline: -0.85rem;
  padding: 0.7rem 0.4rem 0.8rem;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px) 0 0 / 18px 18px,
    var(--surface-sunken);
}

.serp-stage__label {
  padding-inline: 0.45rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.serp-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.serp-scroll[tabindex="0"] {
  border-radius: 0.5rem;
}

/* The result. Colours and sizes follow a plain search result; nothing here is a brand asset.
   The content box is a few px wider than the line width the script uses, so a line that the
   script measured as fitting is never clipped by a rounding difference. */
.serp-card {
  --serp-link: #1a0dab;
  --serp-site: #202124;
  --serp-text: #4d5156;
  --serp-muted: #70757a;
  --serp-fav: #e3e5e8;
  flex: none;
  width: 640px;
  padding: 16px 12px 18px 20px;
  border-radius: 12px;
  background: #fff;
  color: var(--serp-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-kerning: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 22px;
  text-align: left;
  text-rendering: auto;
}

.serp-card--mobile {
  width: 360px;
  padding: 14px 4px 16px 10px;
}

.serp-site {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.serp-fav {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--serp-fav);
}

.serp-card--mobile .serp-fav {
  width: 26px;
  height: 26px;
}

.serp-site__text {
  display: grid;
  min-width: 0;
}

.serp-site__name,
.serp-site__url {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serp-site__name {
  color: var(--serp-site);
  font-size: 14px;
  line-height: 20px;
}

.serp-site__url {
  color: var(--serp-text);
  font-size: 12px;
  line-height: 18px;
}

.serp-title {
  margin: 0;
  color: var(--serp-link);
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

.serp-card--mobile .serp-title {
  font-size: 18px;
  line-height: 24px;
}

.serp-desc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 22px;
}

.serp-card--mobile .serp-desc {
  line-height: 20px;
}

/* One computed line per element: the script decides where a line ends, not the browser. */
.serp-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serp-ph {
  color: var(--serp-muted);
}

/* A single word wider than its box is cut at the box: the script's line width plus 4px, so a
   sub-pixel difference between canvas and layout in another browser never clips a line that fits. */
.serp-card--desktop .serp-title .serp-line {
  max-width: 584px;
}

.serp-card--desktop .serp-desc .serp-line {
  max-width: 604px;
}

.serp-card--mobile .serp-line {
  max-width: 344px;
}

.serp-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.serp-actions .btn {
  width: 100%;
}

/* Sharing card: a neutral frame with a placeholder where the image would be. */
.serp-og-card {
  --og-image: #e5e7eb;
  --og-line: #d1d5db;
  --og-ink: #111827;
  --og-strong: #1f2937;
  --og-text: #4b5563;
  --og-muted: #6b7280;
  max-width: 30rem;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  color: var(--og-text);
  font-family: Arial, Helvetica, sans-serif;
}

.serp-og-img {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.3rem;
  aspect-ratio: 1.91 / 1;
  padding: 1rem;
  background: var(--og-image);
  color: var(--og-strong);
  text-align: center;
}

.serp-og-img .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--og-muted);
}

.serp-og-img p {
  max-width: 100%;
  margin: 0;
}

.serp-og-img__title {
  color: var(--og-strong);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.serp-og-img__addr {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.serp-og-img__note {
  color: var(--og-text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.serp-og-body {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 1rem 0.95rem;
  border-top: 1px solid var(--og-line);
}

.serp-og-body p {
  margin: 0;
  overflow-wrap: anywhere;
}

.serp-og-domain {
  color: var(--og-muted);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
}

.serp-og-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--og-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.serp-og-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--og-text);
  font-size: 0.88rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.serp-og-body .serp-ph {
  color: var(--og-muted);
  font-weight: 400;
}

/* ───────────────────────── Address, fetch, extra texts ───────────────────────── */

.serp-address {
  display: grid;
  gap: 1rem;
}

.serp-fetchrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
}

.serp-fetchrow .btn {
  min-width: 6.25rem;
  padding-inline: 1.15rem;
}

.serp-feedback:empty {
  display: none;
}

.serp-feedback {
  display: grid;
  gap: 0.75rem;
}

.serp-cooldown {
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 700;
}

.serp-og {
  max-width: 30rem;
  margin-top: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.serp-og summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.serp-og summary::-webkit-details-marker {
  display: none;
}

.serp-og summary:focus-visible {
  border-radius: var(--radius-sm);
  outline-offset: 3px;
}

.serp-og summary .icon {
  color: var(--accent);
}

.serp-og[open] summary .icon {
  transform: rotate(180deg);
}

.serp-og__body {
  display: grid;
  gap: 1rem;
  padding: 0.35rem 0.9rem 1rem;
}

/* ───────────────────────── From 34rem: the buttons sit in a row ───────────────────────── */

@media (min-width: 34rem) {
  .serp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .serp-actions .btn {
    width: auto;
  }
}

/* ───────────────────────── From 40rem: the frame is a box again ───────────────────────── */

@media (min-width: 40rem) {
  .tool-panel.serp {
    padding: 1.25rem;
  }

  .serp-grid {
    gap: 1.5rem;
  }

  .serp-stage {
    margin-inline: 0;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .serp-stage__label {
    padding-inline: 0;
  }
}

/* ───────────────────────── Wide: fields left, preview right ───────────────────────── */

/* From 80rem the preview column is wide enough for the desktop result at its true size. */
@media (min-width: 80rem) {
  .tool-panel.serp {
    padding: 1.5rem;
  }

  .serp-grid {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    grid-template-areas:
      "fields  result"
      "address share";
    align-items: start;
    column-gap: 2.5rem;
    row-gap: 1.75rem;
  }

  .serp-fields { grid-area: fields; }
  .serp-result { grid-area: result; }
  .serp-address { grid-area: address; }
  .serp-share { grid-area: share; }

  .serp-fields,
  .serp-address {
    max-width: none;
  }

  .serp-fields textarea.input {
    min-height: 8rem;
  }
}