/*
 * Masterica · flask-web-saas-tool — FROZEN engine stylesheet.
 *
 * Composition contract:
 *   • Header (title + subtitle)
 *   • Workspace = two-column grid (input panel | result panel) on ≥720px,
 *     stacks on <720px.
 *   • Footer (one-line note).
 *
 * Theme tokens (driven by tool-config.json::theme via tool.js bridge):
 *   theme.primary   → --st-primary
 *   theme.secondary → --st-secondary
 *   theme.accent    → --st-accent
 *   theme.mode      → data-theme="light|dark" (controls neutrals)
 *
 * DO NOT modify (this is a Phase-3 frozen file). Brand and content
 * customisation happens via tool-config.json + tool.js' state bridge,
 * never via inline styles or new CSS files.
 */

:root {
  /* Brand tokens — overridden by JS from tool-config.json */
  --st-primary:   #0a84ff;
  --st-secondary: #1c1c1e;
  --st-accent:    #ff9f0a;

  /* Neutrals (light) */
  --st-bg:        #f7f7f9;
  --st-surface:   #ffffff;
  --st-border:    #e6e6ec;
  --st-text:      #18181b;
  --st-text-soft: #5c5c66;
  --st-text-muted:#8a8a96;

  /* Type scale (modular 1.2) */
  --st-fs-xs: 0.75rem;   /* 12 */
  --st-fs-s:  0.875rem;  /* 14 */
  --st-fs-m:  1rem;      /* 16 */
  --st-fs-l:  1.25rem;   /* 20 */
  --st-fs-xl: 1.563rem;  /* 25 */
  --st-fs-2xl:2.25rem;   /* 36 */

  /* Spacing scale */
  --st-sp-1: 4px;
  --st-sp-2: 8px;
  --st-sp-3: 12px;
  --st-sp-4: 16px;
  --st-sp-5: 24px;
  --st-sp-6: 32px;
  --st-sp-8: 48px;

  --st-radius:   12px;
  --st-radius-s: 8px;

  --st-shadow-sm: 0 1px 2px rgba(20,20,28,.06), 0 0 0 1px rgba(20,20,28,.04);
  --st-shadow-md: 0 4px 16px rgba(20,20,28,.08), 0 0 0 1px rgba(20,20,28,.04);

  --st-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

[data-theme="dark"] {
  --st-bg:        #0e0e12;
  --st-surface:   #1a1a22;
  --st-border:    #2a2a34;
  --st-text:      #f4f4f7;
  --st-text-soft: #b4b4be;
  --st-text-muted:#7a7a86;
  --st-shadow-sm: 0 1px 2px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.04);
  --st-shadow-md: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--st-font);
  font-size: var(--st-fs-m);
  line-height: 1.5;
  color: var(--st-text);
  background: var(--st-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.st-header { background: var(--st-surface); border-bottom: 1px solid var(--st-border); }
.st-header__inner { max-width: 1120px; margin: 0 auto; padding: var(--st-sp-5) var(--st-sp-5); }
.st-title {
  font-size: var(--st-fs-xl); font-weight: 700; margin: 0;
  color: var(--st-text); letter-spacing: -0.01em;
}
.st-subtitle {
  font-size: var(--st-fs-s); color: var(--st-text-soft);
  margin: var(--st-sp-2) 0 0; max-width: 56ch;
}

/* ── Workspace grid ─────────────────────────────────────────────────── */
.st-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--st-sp-5);
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: var(--st-sp-5);
}

@media (min-width: 720px) {
  .st-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Panel ──────────────────────────────────────────────────────────── */
.st-panel {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  padding: var(--st-sp-5);
  box-shadow: var(--st-shadow-sm);
  display: flex; flex-direction: column; gap: var(--st-sp-4);
}
.st-panel__title {
  font-size: var(--st-fs-l); font-weight: 600;
  margin: 0; letter-spacing: -0.005em;
}

/* ── Form fields ────────────────────────────────────────────────────── */
.st-field { display: flex; flex-direction: column; gap: var(--st-sp-2); position: relative; }
.st-label {
  font-size: var(--st-fs-s); font-weight: 600;
  color: var(--st-text-soft);
}

.st-textarea {
  width: 100%;
  font-family: inherit; font-size: var(--st-fs-m); line-height: 1.5;
  color: var(--st-text);
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-s);
  padding: var(--st-sp-3) var(--st-sp-3);
  resize: vertical;
  min-height: 96px;
  transition: border-color .15s, box-shadow .15s;
}
.st-textarea:focus-visible {
  outline: none;
  border-color: var(--st-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 18%, transparent);
}
.st-field__counter {
  position: absolute; right: var(--st-sp-2); bottom: var(--st-sp-2);
  font-size: var(--st-fs-xs); color: var(--st-text-muted);
}

/* ── Dropzone ───────────────────────────────────────────────────────── */
.st-dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--st-sp-2);
  padding: var(--st-sp-6) var(--st-sp-4);
  background: var(--st-bg);
  border: 2px dashed var(--st-border);
  border-radius: var(--st-radius);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  min-height: 160px;
}
.st-dropzone:hover,
.st-dropzone:focus-visible,
.st-dropzone[data-state="hover"] {
  outline: none;
  border-color: var(--st-primary);
  background: color-mix(in srgb, var(--st-primary) 6%, var(--st-bg));
}
.st-dropzone[data-state="filled"] {
  border-style: solid;
  border-color: var(--st-primary);
}
.st-dropzone__input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.st-dropzone__icon { width: 36px; height: 36px; color: var(--st-text-soft); }
.st-dropzone[data-state="filled"] .st-dropzone__icon { color: var(--st-primary); }
.st-dropzone__title { font-size: var(--st-fs-m); font-weight: 500; margin: 0; color: var(--st-text); }
.st-dropzone__hint  { font-size: var(--st-fs-s); color: var(--st-text-muted); margin: 0; }
/* UEB-105: thumbnail + filename + size after upload. Before this fix
   the preview was a single line of text — the user could not visually
   confirm they had picked the right photo. We now render a 56×56
   ``object-fit: cover`` thumbnail (driven by URL.createObjectURL on
   the client, no /api/upload round-trip), followed by a vertical
   filename+size block. The image element is hidden on non-image
   uploads via the absence of the ``.st-dropzone__thumb`` node — CSS
   here just lays out whatever children tool.js inserts. */
.st-dropzone__preview {
  display: none;
  margin-top: var(--st-sp-3);
  font-size: var(--st-fs-s);
  color: var(--st-primary);
  align-items: center;
  gap: var(--st-sp-3);
  text-align: left;
}
.st-dropzone[data-state="filled"] .st-dropzone__preview { display: flex; }
.st-dropzone[data-state="filled"] .st-dropzone__title,
.st-dropzone[data-state="filled"] .st-dropzone__hint  { display: none; }
.st-dropzone__thumb {
  width: 56px; height: 56px; flex: 0 0 56px;
  object-fit: cover;
  border-radius: var(--st-radius-s);
  background: color-mix(in srgb, var(--st-primary) 10%, var(--st-bg));
  border: 1px solid color-mix(in srgb, var(--st-primary) 35%, transparent);
}
.st-dropzone__meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1 1 auto;
}
.st-dropzone__filename {
  font-weight: 500; color: var(--st-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-dropzone__size {
  font-size: var(--st-fs-xs); color: var(--st-text-muted);
}

/* ── Format selector (radio cards) ──────────────────────────────────── */
.st-formats { border: 0; padding: 0; margin: 0; }
.st-formats__grid {
  display: grid; gap: var(--st-sp-2);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: var(--st-sp-2);
}
.st-format {
  position: relative; display: block;
  border: 1px solid var(--st-border); border-radius: var(--st-radius-s);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.st-format:hover { border-color: var(--st-primary); }
.st-format__input { position: absolute; opacity: 0; pointer-events: none; }
.st-format__body {
  display: flex; flex-direction: column; gap: var(--st-sp-1);
  padding: var(--st-sp-3) var(--st-sp-4);
}
.st-format__icon { font-size: var(--st-fs-l); color: var(--st-text-soft); }
.st-format__label { font-size: var(--st-fs-m); font-weight: 500; }
.st-format__hint { font-size: var(--st-fs-xs); color: var(--st-text-muted); }
.st-format__input:checked + .st-format__body {
  background: color-mix(in srgb, var(--st-primary) 8%, transparent);
}
.st-format:has(.st-format__input:checked) {
  border-color: var(--st-primary);
  background: color-mix(in srgb, var(--st-primary) 4%, var(--st-surface));
}

/* ── Submit button ──────────────────────────────────────────────────── */
.st-submit {
  font-family: inherit; font-size: var(--st-fs-m); font-weight: 600;
  color: white;
  background: var(--st-primary);
  border: 0; border-radius: var(--st-radius-s);
  padding: var(--st-sp-3) var(--st-sp-5);
  cursor: pointer;
  margin-top: var(--st-sp-2);
  min-height: 44px;
  transition: filter .15s, transform .05s;
}
.st-submit:hover:not(:disabled) { filter: brightness(1.05); }
.st-submit:active:not(:disabled) { transform: translateY(1px); }
.st-submit:disabled { opacity: .45; cursor: not-allowed; }

/* ── Result panel ───────────────────────────────────────────────────── */
.st-result { min-height: 260px; position: relative; }
.st-result__empty,
.st-result__progress,
.st-result__done,
.st-result__error { display: none; }
.st-result[data-state="empty"]    .st-result__empty    { display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: var(--st-sp-2);
  padding: var(--st-sp-6) var(--st-sp-4); color: var(--st-text-muted); }
.st-result[data-state="running"]  .st-result__progress { display: block; padding: var(--st-sp-4) 0; }
.st-result[data-state="done"]     .st-result__done     { display: flex; flex-direction: column; gap: var(--st-sp-4); }
.st-result[data-state="failed"]   .st-result__error    { display: block;
  padding: var(--st-sp-4); border-radius: var(--st-radius-s);
  background: color-mix(in srgb, #ff3b30 6%, var(--st-surface));
  border: 1px solid color-mix(in srgb, #ff3b30 30%, var(--st-border));
  color: #ff3b30; font-size: var(--st-fs-s); }
.st-result__empty-icon { width: 48px; height: 48px; color: var(--st-text-muted); }
.st-result__empty-title { font-size: var(--st-fs-m); font-weight: 500; margin: 0; color: var(--st-text-soft); }
.st-result__empty-hint  { font-size: var(--st-fs-s); margin: 0; max-width: 36ch; }
/* UEB-105: preview slot of the generated artefact. The video element
   now plays inline (autoplay + muted + loop + playsinline, see
   tool.js::renderResult) and we give it a subtle frame + dark
   matte so it reads as a finished player, not a debug placeholder. */
.st-result__preview img,
.st-result__preview video {
  max-width: 100%; height: auto;
  border-radius: var(--st-radius-s);
  display: block;
  background: color-mix(in srgb, var(--st-primary) 4%, var(--st-bg));
  outline: 1px solid var(--st-border);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--st-primary) 8%, transparent);
}
.st-result__preview video { width: 100%; }
.st-result__actions { display: flex; gap: var(--st-sp-2); flex-wrap: wrap; }

/* ── Progress bar ───────────────────────────────────────────────────── */
.st-progress { display: flex; flex-direction: column; gap: var(--st-sp-2); }
.st-progress__bar {
  height: 8px; background: var(--st-border); border-radius: 999px; overflow: hidden;
}
.st-progress__fill {
  height: 100%; background: linear-gradient(90deg, var(--st-primary), var(--st-accent));
  border-radius: inherit;
  transition: width .25s ease-out;
}
.st-progress__meta {
  display: flex; justify-content: space-between;
  font-size: var(--st-fs-s); color: var(--st-text-soft);
}
.st-progress__percent { font-variant-numeric: tabular-nums; color: var(--st-primary); }

/* ── Action buttons (download / restart) ────────────────────────────── */
.st-action {
  font-family: inherit; font-size: var(--st-fs-s); font-weight: 500;
  background: var(--st-bg); color: var(--st-text);
  border: 1px solid var(--st-border); border-radius: var(--st-radius-s);
  padding: var(--st-sp-2) var(--st-sp-4);
  text-decoration: none;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, filter .15s;
}
.st-action:hover { border-color: var(--st-primary); }
.st-action--primary {
  background: var(--st-primary); color: white; border-color: var(--st-primary);
}
.st-action--primary:hover { filter: brightness(1.05); }

/* ── History ────────────────────────────────────────────────────────── */
.st-history { margin-top: var(--st-sp-2); }
.st-history__summary {
  font-size: var(--st-fs-s); color: var(--st-text-soft);
  cursor: pointer; padding: var(--st-sp-2) 0;
  display: flex; gap: var(--st-sp-2); align-items: center;
}
.st-history__count {
  display: inline-block; min-width: 22px; text-align: center;
  background: var(--st-bg); color: var(--st-text-muted);
  border-radius: 999px; font-size: var(--st-fs-xs); padding: 2px 6px;
}
.st-history__list {
  list-style: none; padding: 0; margin: var(--st-sp-2) 0 0;
  display: flex; flex-direction: column; gap: var(--st-sp-1);
}
.st-history__item {
  font-size: var(--st-fs-s); color: var(--st-text-soft);
  padding: var(--st-sp-2) var(--st-sp-3);
  background: var(--st-bg); border-radius: var(--st-radius-s);
  display: flex; justify-content: space-between;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.st-footer { padding: var(--st-sp-5); text-align: center; }
.st-footer__note { font-size: var(--st-fs-xs); color: var(--st-text-muted); margin: 0; }

/* ── Accessibility ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .st-submit, .st-action--primary { border: 1px solid CanvasText; }
}