/* ============================================================================
   preflight.css — the artwork checker's own styling.
   ============================================================================

   Extracted verbatim from the <style> block of the standalone harness when it
   moved inside the WordPress theme. The harness's own <header> went with it —
   the theme supplies header, mega-menu and footer now.
   ========================================================================= */

:root { --ink:#141414; --muted:#6b6660; --line:#e2ddd6; --bg:#f7f6f4;
          --pass:#2f7a3f; --warn:#9a6b00; --fail:#a32020; }
  * { box-sizing:border-box }
  body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif }
  header { background:#fff; border-bottom:1px solid var(--line); padding:14px 20px }
  header strong { font-size:15px } header span { color:var(--muted); margin-left:8px }
  .wrap { display:grid; gap:20px; padding:20px; align-items:start }
  .card { background:#fff; border:1px solid var(--line); border-radius:6px; padding:16px }
  label { display:block; font-weight:600; margin:10px 0 4px }
  #samples button { width:100%; text-align:left; margin:0 0 5px; padding:7px 9px; background:#fff;
    color:var(--ink); border:1px solid var(--line); font-weight:500; font-size:13px }
  #samples button:hover { border-color:var(--ink) }
  #samples b { font-weight:700 }
  #samples .exp { float:right; font-size:11px; text-transform:uppercase; letter-spacing:.04em }
  #samples .pass{color:var(--pass)} #samples .warn{color:var(--warn)} #samples .fail{color:var(--fail)}
  select,input[type=file] { width:100%; padding:8px; border:1px solid var(--line); border-radius:4px; background:#fff }
  button { margin-top:12px; width:100%; padding:10px; border:0; border-radius:4px; background:var(--ink); color:#fff; font-weight:600; cursor:pointer }
  button:disabled { opacity:.45; cursor:default }
  .verdict { font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-radius:4px; margin-bottom:12px }
  .verdict.pass{background:#e8f3ea;color:var(--pass)} .verdict.warn{background:#fdf3e0;color:var(--warn)} .verdict.fail{background:#fbeaea;color:var(--fail)}
  .chk { border-top:1px solid var(--line); padding:9px 0 }
  .chk:first-of-type { border-top:0 }
  .chk .row { display:flex; gap:8px; align-items:baseline }
  .tag { font-size:11px; font-weight:700; padding:2px 6px; border-radius:3px; text-transform:uppercase }
  .tag.pass{background:#e8f3ea;color:var(--pass)} .tag.warn{background:#fdf3e0;color:var(--warn)} .tag.fail{background:#fbeaea;color:var(--fail)}
  .chk small { display:block; color:var(--muted); margin-top:3px }
  .tabs { display:flex; gap:6px; margin-bottom:10px }
  .tabs button { width:auto; padding:6px 14px; background:#fff; color:var(--ink); border:1px solid var(--line) }
  .tabs button[aria-selected=true] { background:var(--ink); color:#fff; border-color:var(--ink) }
  #stage { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:6px; padding:16px; text-align:center }
  canvas { max-width:100%; height:auto; box-shadow:0 1px 6px rgba(0,0,0,.15) }
  .legend { display:flex; gap:16px; justify-content:center; margin-top:10px; color:var(--muted); font-size:12px }
  .legend i { display:inline-block; width:14px; height:0; border-top-width:2px; margin-right:5px; vertical-align:middle }
  .note { color:var(--muted); font-size:13px; margin-top:10px }

/* ============================================================================
   Controls, in the theme's language
   ============================================================================

   The checker predates the approved design and styled its own buttons — a flat
   dark rectangle that looked nothing like the rest of the site. These follow the
   theme's `.tsp-btn`: pill radius, uppercase, letterspaced, plum, with the
   theme's own shadow.

   They are NOT named `.tsp-btn`. The theme owns that class, and if its author
   changes the padding or the shadow these should follow — but a checker-specific
   disabled state and a full-width variant do not belong in their file. So the
   values are read from the theme's variables (--tsp-plum, --tsp-radius-pill,
   --tsp-shadow-pill) and fall back to the token layer when rendered outside
   WordPress.

   Worth moving into the theme if it grows: a `.tsp-btn--block` and a disabled
   state are general, and every form on the site will eventually want them.
   ========================================================================= */

.pf-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--tsp-radius-pill, 999px);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--tsp-track-wide, 0.18em);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--tsp-shadow-pill, 0 2px 6px rgba(65, 41, 57, 0.14));
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* The primary action. Plum, because that is what a primary action is on this
   site — see .tsp-btn--primary in the theme. */
.pf-btn--primary {
  background: var(--tsp-plum, #412939);
  color: var(--tsp-white, #fff);
}
.pf-btn--primary:hover:not(:disabled) {
  background: var(--tsp-plum-dark, #2e1b28);
}

/* Choosing a file is a step, not the goal — outlined so it reads as secondary to
   "Check file" sitting under it. */
.pf-btn--outline {
  background: var(--tsp-white, #fff);
  color: var(--tsp-plum, #412939);
  border: 2px solid var(--tsp-plum, #412939);
  padding: 13px 26px;        /* less, to offset the border and match height */
}
.pf-btn--outline:hover {
  background: var(--tsp-cream, #faf9f5);
  color: var(--tsp-steel, #4c748d);
  border-color: var(--tsp-steel, #4c748d);
}

/* Disabled must look unavailable, not merely faded: a 45%-opacity pill still
   reads as a button you can press. Flat, no shadow, no pointer. */
.pf-btn:disabled {
  background: var(--tsp-surface-2, #eef2f5);
  color: var(--tsp-steel-muted, #5d6b74);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* The native input is hidden, not removed — the label needs it in the DOM to
   target, and a removed input cannot be focused by keyboard. Clipped rather than
   display:none so it stays in the tab order. */
#file {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Keyboard users get the focus ring on the label, since that is what they see. */
#file:focus-visible + .pf-btn--outline {
  outline: 2px solid var(--tsp-steel, #4c748d);
  outline-offset: 2px;
}

/* Samples are a testing aid and now sit below the real controls. Quieter, and
   separated by a rule so they read as a different kind of thing. */
#samples-block {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
#samples button {
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 6px;
}

/* Drop target. The whole card, because people aim at the panel rather than at a
   button, and a target the size of a button is a target people miss. */
.wrap .card { transition: border-color 0.12s ease, background 0.12s ease; }
.wrap .card[data-drag="over"] {
  border-color: var(--tsp-steel, #4c748d);
  background: var(--tsp-cream, #faf9f5);
  box-shadow: inset 0 0 0 2px var(--tsp-steel, #4c748d);
}
/* An affordance nobody can see is not an affordance. */
.pf-drophint {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ============================================================================
   Two states, one grid
   ============================================================================

   The page was a fixed `380px 1fr` in both states. That is right while a
   customer is choosing a file and wrong the moment the results arrive: the
   controls card is short, so 380px x ~600px of the left column sat empty, and
   the preview — the thing people actually came to look at — was squeezed to
   440px below a five-item findings list on a 1500px page.

   So the grid changes shape instead. `data-state` is set by preflight.js, and
   everything else about the page is untouched.
   ========================================================================= */

/* Before a check: one card, centred. No stranded second column. */
.wrap[data-state="empty"] {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}
.wrap[data-state="empty"] #summary,
.wrap[data-state="empty"] #headline { display: none; }

/* The result state takes the theme's WIDE width, not its content width.
 *
 * The child theme sets contentSize 960px and wideSize 1200px (theme.json), and
 * .tsp-container caps pages at 960. That cap — not the old dead left column —
 * is what actually kept the preview small: at 960 the page is 912px wide, so
 * splitting it between findings and artwork gains almost nothing.
 *
 * Breaking out with symmetric negative margins rather than editing the theme:
 * no theme file is touched, and the width used is one the theme already
 * defines, so the checker stays inside its design language instead of becoming
 * the one page that ignores the container.
 *
 * min() keeps it safe below 1200px of viewport — the break-out shrinks to zero
 * rather than pushing the page sideways.
 */
.wrap[data-state="result"] {
  --pf-breakout: min(120px, max(0px, calc((100vw - 960px) / 2)));
  margin-inline: calc(-1 * var(--pf-breakout));
  width: calc(100% + 2 * var(--pf-breakout));
}

/* After a check: a full-width summary row, then findings beside the preview.
   The findings column is bounded because its content is short labelled lines —
   past ~440px they stop scanning as a list. Everything left over is preview. */
.wrap[data-state="result"] {
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  grid-template-areas:
    "summary  summary"
    "headline headline"
    "results  stage";
}
.wrap[data-state="result"] > .card:first-child { display: none; }  /* the controls */
.wrap[data-state="result"] #summary  { grid-area: summary; }
.wrap[data-state="result"] #headline { grid-area: headline; }
.wrap[data-state="result"] #col-findings { grid-area: results; }
.wrap[data-state="result"] #col-preview  { grid-area: stage; }

/* The summary row: context on the left, the one remaining action on the right. */
#summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
}
#summary-line { margin: 0; font-size: 15px; }
#summary-product { color: var(--tsp-plum, #412939); }
#summary-file {
  color: var(--muted);
  overflow-wrap: anywhere;   /* customer filenames can be very long */
}
#summary-file::before { content: " · "; }
/* The pill button is full-width by default — here it is one control in a row. */
#summary #again { width: auto; margin-top: 0; flex: 0 0 auto; }

/* The verdict and the page tabs sit above both columns, so one headline covers
   the findings and the artwork it describes. */
#headline { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
#headline .verdict { margin: 0; flex: 1 1 auto; }
#headline .tabs { margin: 0; flex: 0 0 auto; }

/* The preview gets the room it was always short of. It keeps its own scroll so
   a wide page never pushes the document sideways. */
.wrap[data-state="result"] #stage { margin-top: 0; }

/* One column on a narrow screen, in reading order: what it is, the verdict,
   what is wrong, then the artwork. */
@media (max-width: 860px) {
  .wrap[data-state="result"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary" "headline" "results" "stage";
  }
  #summary { justify-content: flex-start; }
  #summary #again { width: 100%; }
}