/* =============================================================================
   Ligga fritt — app-specific styling
   Depends on styles/brand.css, which is the shared Svenska CP-Tjänst design
   system and is byte-identical to the copy in thebanfinator. Only semantic
   tokens (--color-*) below the ramps layer — never a raw ramp (brand-book §2.1).

   Class names that script.js depends on: .drop-zone, .dragover, .loaded,
   .is-busy, .is-active, .ground-swatch, and the [data-ground] / [data-view]
   attributes.
   ========================================================================== */

[hidden] { display: none !important; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.brand-mark {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  border-radius: var(--radius-sm);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 599px) {
  .header-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

/* ── Drop zone ────────────────────────────────────────────────────────────── */

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 220px;
  padding: 32px 20px;
  text-align: center;
  border: 1px dashed var(--color-border-primary);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.drop-zone:hover {
  border-color: var(--color-action);
  background: var(--color-background-tertiary);
}

.drop-zone.dragover {
  border-style: solid;
  border-color: var(--color-action);
  background: var(--color-background-tertiary);
  box-shadow: 0 0 0 2px var(--color-focus);
}

/* Work in progress: not clickable, and it says so rather than looking idle. */
.drop-zone.is-busy {
  cursor: progress;
  pointer-events: none;
  opacity: 0.6;
}

.drop-zone__title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-text-primary);
}

.drop-zone__hint {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.drop-zone__loaded { display: none; }
.drop-zone.loaded .drop-zone__hint { display: none; }
.drop-zone.loaded .drop-zone__loaded { display: inline-flex; }

/* Once an image is in, the zone stops being the main event and shrinks to a
   bar that says what is loaded and invites the next one. */
.drop-zone.loaded {
  border-style: solid;
  border-color: var(--color-good);
  background: var(--color-background-tertiary);
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 0;
  padding: 14px 20px;
}

.drop-zone.loaded .drop-zone__title { font-size: 15px; }

/* ── Status ───────────────────────────────────────────────────────────────── */

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.status__label {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.status__detail {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* §2.4: a status colour never stands alone — the label carries the word. */
[data-tone='critical'] .status__label { color: var(--color-critical); }

.progress {
  margin-top: 12px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border-primary);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-action);
  transition: width 0.2s ease-out;
}

/* ── Result ───────────────────────────────────────────────────────────────── */

.result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.result-title {
  font-size: 18px;
  margin-bottom: 2px;
}

.about-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  background: var(--color-background-tertiary);
}

.segmented__option {
  appearance: none;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented__option:hover { color: var(--color-text-primary); }

.segmented__option.is-active {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

/* ── Canvas ───────────────────────────────────────────────────────────────────
   The frame carries the ground, not the canvas, so switching what you judge the
   matte against never touches the pixels themselves.
   ------------------------------------------------------------------------- */

.canvas-frame {
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 12px;
}

.canvas-frame[data-ground='checker'] {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #d8d4d0 25%, transparent 25%, transparent 75%, #d8d4d0 75%),
    linear-gradient(45deg, #d8d4d0 25%, transparent 25%, transparent 75%, #d8d4d0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.canvas-frame[data-ground='white'] { background: #ffffff; }
.canvas-frame[data-ground='black'] { background: #111111; }
.canvas-frame[data-ground='cream'] { background: var(--brown-100); }

#previewCanvas {
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Ground picker + actions ──────────────────────────────────────────────── */

.ground-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}

.ground-row__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ground-swatches {
  display: flex;
  gap: 6px;
}

/* A 10px radius on a small square reads as a circle, which is a different mark
   (§4.1), so the swatches stay at 3px. */
.ground-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-border-primary);
  border-radius: 3px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ground-swatch:hover { border-color: var(--color-text-muted); }

.ground-swatch.is-active {
  border-color: var(--color-action);
  box-shadow: 0 0 0 2px var(--color-focus);
}

.ground-swatch[data-ground='checker'] {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #d8d4d0 25%, transparent 25%, transparent 75%, #d8d4d0 75%),
    linear-gradient(45deg, #d8d4d0 25%, transparent 25%, transparent 75%, #d8d4d0 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

.ground-swatch[data-ground='white'] { background: #ffffff; }
.ground-swatch[data-ground='black'] { background: #111111; }
.ground-swatch[data-ground='cream'] { background: var(--brown-100); }

/* ── About ────────────────────────────────────────────────────────────────── */

.prose + .prose { margin-top: 10px; }

.facts {
  margin: 16px 0 0;
  border-top: 1px solid var(--color-border-secondary);
  padding-top: 14px;
}

.facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
}

.facts__row + .facts__row { margin-top: 6px; }

.facts dt {
  min-width: 90px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.facts dd {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer p { margin: 0; }
.footer-meta { margin-top: 6px; }


.drop-zone__name {
  display: none;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.drop-zone.loaded .drop-zone__name { display: inline; }

.facts__note {
  color: var(--color-text-muted);
}

/* ── Article-header preview ───────────────────────────────────────────────────
   Measured off the live article rather than guessed: the H1 is Sueca Hd at the
   light weight, 42/46px with no tracking; the writer's name is a colon prefix
   in #C3C2C1 (the same grey in both schemes); the section tag is Ester Blenda
   700 in the action blue; and the portrait is a square box, bottom-flush with
   the 1px rule that closes the block, overflow hidden so the figure is cropped
   by it.

   This is the one place that uses fixed colours rather than semantic tokens.
   Deliberate: it reproduces the article's own light and dark schemes, which do
   not follow this tool's theme. Everywhere else, §2.1 holds.
   ------------------------------------------------------------------------- */

.artikel {
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 900px;
}

/* SvD's own two schemes. Dark is #0B2337 — the same navy as --blue-700. */
.artikel[data-scheme='light'] {
  --a-bg: #FFFFFF;
  --a-title: #1D1D1B;
  --a-tag: #0D4C80;
  --a-rule: #F2EFEE;
  --a-caption: #605E5D;
}

.artikel[data-scheme='dark'] {
  --a-bg: #0B2337;
  --a-title: #F7F6F5;
  --a-tag: #42C0F0;
  --a-rule: rgba(255, 255, 255, 0.16);
  --a-caption: #B9C7D4;
}

.artikel__block {
  position: relative;
  background: var(--a-bg);
  padding: 22px 28px 0;
  border-bottom: 1px solid var(--a-rule);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.artikel__tags {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--a-title);
}

.artikel__tag { font-weight: 600; }
.artikel__tag--section { font-weight: 700; color: var(--a-tag); }
.artikel__sep { color: var(--a-rule); font-weight: 400; }

/* Sueca Hd light — weight 300 here reaches the same woff2 the article loads. */
.artikel__h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  max-width: 60%;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 34px;
  line-height: 1.095;
  letter-spacing: normal;
}

.artikel__author { color: #C3C2C1; display: block; }
.artikel__title { color: var(--a-title); }

/* Bottom-anchored and clipped, so the figure exits through the rule rather
   than floating above it. */
/* Square, and flush with the rule: the article shows the whole uploaded square
   in a 200x200 box whose bottom edge is the rule. Nothing is cropped there —
   the framing that matters is inside the square itself. */
.artikel__portrait {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 176px;
  height: 176px;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
}

.artikel__portrait:active { cursor: grabbing; }
.artikel__portrait canvas { display: block; width: 100%; height: 100%; }


.artikel[data-viewport='mobile'] { max-width: 375px; }
.artikel[data-viewport='mobile'] .artikel__block { padding: 16px 16px 0; min-height: 215px; }
.artikel[data-viewport='mobile'] .artikel__h1 { font-size: 26px; max-width: 56%; }
.artikel[data-viewport='mobile'] .artikel__tags { font-size: 13px; margin-bottom: 16px; }
.artikel[data-viewport='mobile'] .artikel__portrait { right: 16px; width: 132px; height: 132px; }

@media (max-width: 599px) {
  .artikel__block { padding: 16px 16px 0; }
  .artikel__h1 { font-size: 26px; max-width: 56%; }
  .artikel__portrait { right: 16px; width: 132px; height: 132px; }
}

/* The big preview is the same framing at working size, so it drags too. */
#previewCanvas { cursor: grab; touch-action: none; }
#previewCanvas:active { cursor: grabbing; }

/* ── Byline fields ────────────────────────────────────────────────────────── */

.byline-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 768px) {
  .byline-fields { grid-template-columns: 1fr 1fr; }
}

/* ── Author-page preview ──────────────────────────────────────────────────────
   The same square as the article header, rendered the way the author page does
   it: a 180px circle, object-fit cover at 50% 50%, on a #EBEBEB plate. Measured
   off the live page, as is the name — Sueca Hd 700 at 30px, centred — and the
   follow pill in Ester Blenda 700 on #42C0F0.
   ------------------------------------------------------------------------- */

.forfattare {
  margin-top: 16px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  padding: 26px 24px 22px;
  text-align: center;
  max-width: 570px;
}

.forfattare[data-scheme='light'] {
  --f-bg: #FFFFFF;
  --f-text: #1D1D1B;
  --f-plate: #EBEBEB;
  --f-bio: #2E2E2E;
}

.forfattare[data-scheme='dark'] {
  --f-bg: #0B2337;
  --f-text: #F7F6F5;
  --f-plate: #12314B;
  --f-bio: #B9C7D4;
}

.forfattare { background: var(--f-bg); }

.forfattare__plate {
  width: 132px;
  height: 132px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--f-plate);
  cursor: grab;
  touch-action: none;
}

.forfattare__plate:active { cursor: grabbing; }
.forfattare__plate canvas { display: block; width: 100%; height: 100%; }

.forfattare__name {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--f-text);
}

.forfattare__follow { margin: 0 0 14px; }

.forfattare__follow span {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 999px;
  background: #42C0F0;
  color: #1D1D1B;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.forfattare__bio {
  margin: 0 auto;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--f-bio);
}