/* Embed widget — vertical layout: rubrik → mätare → kort (se Figma-mockup) */

:root {
  --c-teal:        #008984;
  --c-teal-dark:   #00617E;
  --c-teal-light:  #B3DBD2;
  --c-teal-pale:   #DAEDE7;
  --c-mint:        #6AC6C1;
  --c-orange:      #F19F04;
  --c-yellow:      #F3BC39;
  --c-cream:       #FAF6D8;
  --c-warm-gray:   #E9E7DE;
  --c-text:        #003a4a;
  --c-text-muted:  #4a6970;
  --c-bg:          #ffffff;

  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-teal);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.embed {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 2.5rem;
}

.embed-heading {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: clamp(1.5rem, 5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}

/* ── Layout: stacked by default, two columns from 700px ──────────────── */

.embed-layout {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

@media (min-width: 700px) {
  .embed {
    max-width: 1200px;
  }
  .embed-layout {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.25rem;
  }
  .embed-panel {
    order: -1;
    flex: 1 1 0;
    min-width: 0;
  }
  .embed-gauge-shell {
    flex: 2 1 0;
    min-width: 0;
    margin-bottom: 0;
  }
  /* The gauge artwork itself doesn't fill its aspect-ratio box all the way
     to the bottom edge (the dome's white rim sits ~10% up from the box's
     true bottom) — a plain flex align-items:flex-end lines the card up
     with that empty box edge instead of the visible rim. Negative margin
     crops the box's contribution to the flex row's height without
     clipping the SVG's own paint, so flex-end now lands on the rim. */
  .embed-gauge-shell .sm-gauge-stage {
    margin-bottom: -9%;
  }
}

/* Force the stacked layout regardless of viewport width when the iframe is
   loaded with ?layout=col — the extra class gives each selector higher
   specificity than its >=700px counterpart above, so it wins independent of
   source order or breakpoint match. */
.embed.layout-col {
  max-width: 640px;
}

.embed.layout-col .embed-layout {
  flex-direction: column;
  align-items: stretch;
  gap: 1.75rem;
}

.embed.layout-col .embed-panel {
  order: 0;
  flex: initial;
  min-width: 0;
}

.embed.layout-col .embed-gauge-shell {
  flex: initial;
  margin-bottom: 1.75rem;
}

.embed.layout-col .embed-gauge-shell .sm-gauge-stage {
  margin-bottom: 0;
}

/* ── Gauge ─────────────────────────────────────────────────────────── */

.embed-gauge-shell {
  text-align: center;
  margin-bottom: 1.75rem;
}

/* ── Panel: form or result cards ──────────────────────────────────── */

.embed-panel {
  position: relative;
  container-type: inline-size;
  container-name: embed-panel;
}

.embed-mute {
  /* Hidden for now — may bring the toggle back later, so keep the markup
     and its wiring in embed.js intact rather than removing them. */
  display: none;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 32px 0 0;
}

.embed-mute-label {
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.embed-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.embed-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.embed-switch-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .3);
  border-radius: 999px;
  transition: background .2s ease;
  pointer-events: none;
}

.embed-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}

.embed-switch input:checked + .embed-switch-track {
  background: var(--c-teal-dark);
}

.embed-switch input:checked + .embed-switch-track::after {
  transform: translateX(18px);
}

.embed-switch input:focus-visible + .embed-switch-track {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.embed-disclaimer {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
}

.embed-consent {
  margin: .5rem auto 0;
  max-width: 480px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}

.embed-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: .75rem .85rem;
  box-shadow: 0 14px 34px -10px rgba(10, 30, 30, .2);
}

.embed-paused {
  text-align: center;
  padding: 1.5rem 1.25rem;
}

.embed-paused p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
}

.embed-lede {
  font-size: .85rem;
  font-weight: 400;
  color: var(--c-text);
  margin: 0 0 1.25rem 0;
  line-height: 1.55;
}

.embed-textarea {
  width: 100%;
  border: 0 solid var(--c-warm-gray);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-text);
  background: #fff;
  resize: vertical;
  height: 110px;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.embed-textarea::placeholder {
  color: var(--c-text-muted);
  opacity: 1;
}

.embed-textarea:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(0, 137, 132, .18);
}

.embed-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .85rem;
}

.embed-counter {
  font-size: .8rem;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.embed-counter.warn { color: var(--c-orange); }
.embed-counter.danger { color: #d33; font-weight: 600; }

.embed-error {
  margin: .85rem 0 0;
  font-size: .875rem;
  font-weight: 600;
  color: #8a1f12;
}

/* ── Link-style button (mockupens "Skicka →" / "Skryt igen →") ──────── */

.embed-link-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--c-teal-dark);
  padding: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: color .15s ease, transform .1s ease;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.embed-link-btn:hover:not(:disabled) {
  color: var(--c-teal);
}

.embed-link-btn:active:not(:disabled) {
  transform: translateX(1px);
}

.embed-link-btn:disabled {
  color: var(--c-text-muted);
  cursor: not-allowed;
}

.embed-link-btn svg {
  display: block;
}

/* ── Step 2: result cards ─────────────────────────────────────────── */

.embed-result {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Kept in the DOM (still populated with the submitted text in embed.js) but
   hidden from view during loading and the result — only the verdict card
   is shown to the user. */
.embed-card-brag {
  display: none;
}

.embed-card-verdict {
  display: flex;
  flex-direction: column;
}

.embed-brag-label {
  margin: 0 0 .35rem;
  font-size: .8rem;
  color: var(--c-text-muted);
}

.embed-card-brag blockquote {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-text);
}

.embed-status {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .85rem;
  color: var(--c-text-muted);
}

.embed-status .spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--c-warm-gray);
  border-top-color: var(--c-teal);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}

.embed-status.done .spinner {
  display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

.embed-verdict-text {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-text);
}

.embed-highlight-text {
  margin: 0 0 1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--c-text-muted);
  white-space: pre-line;
}

.embed-verdict-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.embed-cta-link {
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-teal-dark);
  text-decoration: none;
}

.embed-cta-link:hover {
  color: var(--c-teal);
  text-decoration: underline;
}

.is-hidden { display: none !important; }