/*
 * TikTok safe-zone checker.
 * The page shell, hero, sections, FAQ and footer come from nod.css; so do
 * .upload-zone, .segmented, .primary-button, .ghost-button and .error-box.
 * Only the preview stage and the check list are defined here.
 */

.sz-wrap { position: relative; z-index: 1; padding-bottom: 56px; }

.sz-tool {
  overflow: hidden;
  border: 1px solid var(--nod-border);
  border-radius: var(--nod-large-radius);
  background: var(--nod-surface);
  box-shadow: 0 16px 44px rgba(31, 25, 55, 0.14);
}

.sz-tool__head {
  padding: 18px 34px;
  border-bottom: 1px solid var(--nod-border);
  background: var(--nod-surface-quiet);
}

.sz-tool__head h2 { margin: 0; color: var(--nod-text-strong); font-size: 15px; font-weight: 660; }
.sz-tool__head p { margin: 4px 0 0; color: var(--nod-text-secondary); font-size: 13px; }

/* The preview is 9:16, so a wide stage column can only turn into dead space.
   The stage takes just enough room for the phone and the panel gets the rest. */
.sz-tool__body {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  align-items: stretch;
}

/* ------------------------------------------------------------- the stage */

/* Filled with the page surface rather than black: the preview is 9:16, so the
   column always has room left over, and a dark slab draws attention to the
   leftover space instead of to the phone. */
.sz-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 20px;
  background: var(--nod-surface-subtle);
}

/* Size by height, not width: an explicit height plus `aspect-ratio` gives an
   exact 9:16 box, so the media fills it instead of letterboxing inside it. */
.sz-frame {
  position: relative;
  block-size: min(66dvh, 640px);
  inline-size: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--nod-card-radius);
  background: #17181f;
}

/* Media and overlay share the asset's aspect ratio, so `contain` lands them
   on exactly the same box — the mask stays registered to the frame. */
.sz-media,
.sz-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sz-canvas { pointer-events: none; }

.sz-frame .upload-empty { position: relative; z-index: 1; padding: 24px 18px; }
.sz-frame .upload-empty h2 { font-size: 16px; }
.sz-frame .upload-empty p { margin: 8px 0 16px; font-size: 13px; }

[data-sz-state='loaded'] .sz-placeholder { display: none; }

.sz-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px dashed var(--nod-border-strong);
  border-radius: var(--nod-card-radius);
  background: var(--nod-surface-quiet);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sz-placeholder.is-dragging { border-color: var(--nod-brand); background: var(--nod-brand-tint); }

.sz-meta {
  margin: 12px 0 0;
  color: var(--nod-text-secondary);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  word-break: break-all;
}

/* ------------------------------------------------------------- the panel */

.sz-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
  padding: 24px 22px;
  border-inline-start: 1px solid var(--nod-border);
  background: var(--nod-surface-quiet);
}

.sz-control > label,
.sz-control > .sz-control__label {
  display: block;
  margin-bottom: 7px;
  color: var(--nod-text-strong);
  font-size: 13px;
  font-weight: 620;
}

.sz-control small {
  display: block;
  margin-top: 6px;
  color: var(--nod-text-secondary);
  font-size: 12px;
  line-height: 18px;
}

.segmented--two { grid-template-columns: repeat(2, 1fr); }
.segmented--four { grid-template-columns: repeat(4, 1fr); }

.sz-range { width: 100%; accent-color: var(--nod-brand); }

.sz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.sz-actions .primary-button { flex: 1 1 auto; }

/* Labels standing in for buttons still need the pointer affordance. */
label.primary-button,
label.secondary-button { cursor: pointer; }
label.primary-button:focus-within,
label.secondary-button:focus-within { outline: 2px solid var(--nod-brand); outline-offset: 2px; }

/* Only offer "choose another file" once something is loaded. */
.sz-swap { display: none; }
[data-sz-state='loaded'] .sz-swap { display: inline-flex; }

.sz-tool__head p { max-width: 68ch; }

/* ------------------------------------------------------------ the report */

.sz-report { border-top: 1px solid var(--nod-border); padding-top: 16px; }
.sz-report__title { margin: 0 0 10px; color: var(--nod-text-strong); font-size: 13px; font-weight: 660; }
.sz-report__list { margin: 0; padding: 0; list-style: none; }

.sz-report__note {
  margin: 12px 0 0;
  color: var(--nod-text-secondary);
  font-size: 12px;
  line-height: 18px;
}

.sz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--nod-border);
  font-size: 12px;
  line-height: 20px;
}

.sz-row:last-child { border-bottom: 0; }
.sz-row__label { color: var(--nod-text-secondary); }
.sz-row__value { grid-column: 1; color: var(--nod-text-strong); font-variant-numeric: tabular-nums; }

.sz-row__badge {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.sz-row--pass .sz-row__badge { background: var(--nod-success-soft); color: var(--nod-success-strong); }
.sz-row--fail .sz-row__badge { background: var(--nod-danger-soft); color: var(--nod-danger); }
.sz-row--warn .sz-row__badge { background: var(--nod-warning-soft); color: var(--nod-warning); }
.sz-row--info .sz-row__badge { background: var(--nod-surface-subtle); color: var(--nod-text-secondary); }

/* ---------------------------------------------------------- provenance */

.sz-source {
  padding: 10px 12px;
  border: 1px solid var(--nod-border);
  border-radius: var(--nod-control-radius);
  background: var(--nod-surface);
  color: var(--nod-text-secondary);
  font-size: 12px;
  line-height: 19px;
}

.sz-source p { margin: 0; }
.sz-source p + p { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--nod-border); }
.sz-source [data-sz-source] { color: var(--nod-text-strong); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- compact */

/* These tools are used on a desktop; narrow widths only need to not break. */
@media (max-width: 900px) {
  .sz-tool__body { grid-template-columns: minmax(0, 1fr); }
  .sz-panel { border-inline-start: 0; border-block-start: 1px solid var(--nod-border); }
  .sz-stage { padding: 16px; }
  .sz-frame { block-size: min(58dvh, 480px); }
  .sz-tool__head { padding: 16px 18px; }
}