/* ── CREATE PAGE ───────────────────────────────────────
   A threshold page: you arrive, you start one thing, you leave. It holds the
   centre of the screen and carries almost no furniture.

   Everything below is scoped to #view-create. That is not tidiness — it is
   required. css/light-theme.css loads last and its `body.light input/textarea/
   select` rules would otherwise win on specificity and hand these controls
   back their default form chrome, which is what left the template picker
   wearing an OS dropdown for two commits.

   The page also owns its own row style (.cr-row) rather than reusing .vc-row:
   that class is defined twice, and the winner (css/all-videos.css, which loads
   after command-center.css) is a full-bleed table row — square corners, no
   border, a bottom rule, 24px side padding — not the card it looks like on the
   dashboard. */

#view-create .cr-wrap {
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6);
}

/* ONE child with auto block margins. That is what centres the stack, and it
   is deliberately not `align-items/justify-content: center` — those make
   overflow unreachable above the fold once the content grows taller than the
   viewport, whereas an auto margin simply resolves to 0 and top-aligns.

   The page used to have a second child (.cr-foot) pinned below this one, and
   the two anchors fighting each other are what produced ~290px of dead band
   above and below the content. The footer is gone; its two controls moved to
   the things they configure. */
#view-create .cr-mid {
  margin: auto 0;
  width: 100%;
  max-width: 660px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Hero ──
   Instrument Serif at 400, the same treatment as .cc-hero-title and the Slate
   AI empty state. One italic accent word: at 46px it clears the 3:1 large-text
   floor (measured 3.49:1 on the page background) — which is exactly why the
   accent must not be reused for any small text on this page. */
#view-create .cr-hero { text-align: center; margin-bottom: var(--s-6); }
#view-create .cr-title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(32px, 4.2vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--tx);
}
#view-create .cr-title em { font-style: italic; color: var(--accent); }
#view-create .cr-sub {
  margin: var(--s-3) auto 0;
  max-width: 54ch;
  font: var(--fw-regular) var(--fs-14) / var(--lh-normal) var(--ff-sans);
  color: var(--t3);
}

/* ── The one field ── */
#view-create .cr-box {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  background: var(--bg2);
  border: 1px solid var(--b2);
  border-radius: var(--r-5);
  padding: 13px 13px 13px var(--s-5);
  box-shadow: var(--sh-1);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
/* branddesign.md §8, the signature interaction. The previous version used
   --accent-line (25%) for the border and --accent-bg (8%) for the halo — about
   a third of spec — and since the field autofocuses, that washed-out pink was
   the page's resting appearance rather than a state.
   Note this lives on the wrapper via :focus-within, so light-theme.css's
   `body.light textarea:focus { box-shadow: none !important }` does not match
   it; the inner textarea has border:0, so that rule's !important border-color
   lands on a zero-width border and is invisible. */
#view-create .cr-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
#view-create .cr-input {
  flex: 1;
  min-width: 0;
  display: block;
  min-height: 30px;
  max-height: 200px;
  resize: none;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 4px 0;
  color: var(--tx);
  font: var(--fw-regular) var(--fs-15) / 1.45 var(--ff-sans);
}
/* --t4 measured 1.98:1 and is gone from this file entirely. --t3 (3.65:1)
   is the deliberate choice for the placeholder specifically: a --t2
   placeholder reads as a value already typed. */
#view-create .cr-input::placeholder { color: var(--t3); }

#view-create .cr-go {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--fill, var(--tx));
  color: var(--fill-ink);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
#view-create .cr-go svg { width: 15px; height: 15px; }
#view-create .cr-go:hover:not(:disabled) { background: var(--t2); }
#view-create .cr-go:active:not(:disabled) { transform: scale(0.94); }
#view-create .cr-go:disabled { background: var(--bg4); color: var(--t3); cursor: default; }

/* What Slate has understood the input to mean — the page's main feedback, so
   it reads as a sentence directly under the field it describes. */
#view-create .cr-read {
  margin: var(--s-3) 0 0;
  min-height: 16px;
  text-align: center;
  font: var(--fw-regular) var(--fs-12) / var(--lh-snug) var(--ff-sans);
  color: var(--t3);
  transition: color var(--t-base) var(--ease);
}
/* --warning is ~2.1:1 on this background and --danger ~3.8:1 — neither can
   carry body text. The state is carried by weight and the wording; the colour
   token stays out of the text layer. */
#view-create .cr-read.is-warn { color: var(--t2); font-weight: var(--fw-medium); }

/* ── The same two actions, named ── */
#view-create .cr-cards {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: stretch;
}
#view-create .cr-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: var(--r-4);
  cursor: pointer;
  font-family: var(--ff-sans);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease);
}
#view-create .cr-card:hover { border-color: var(--b3); box-shadow: var(--sh-1); }
#view-create .cr-card:active { transform: translateY(1px); }
#view-create .cr-card-ic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  background: var(--bg3);
  color: var(--t2);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
#view-create .cr-card-ic svg { width: 17px; height: 17px; }
/* branddesign.md §3/§9: one muted icon set, brightening to --tx. Never
   accent-tinted — the previous version turned these orange on hover. */
#view-create .cr-card:hover .cr-card-ic { background: var(--bg4); color: var(--tx); }
#view-create .cr-card-tx { display: block; min-width: 0; }
#view-create .cr-card-title {
  display: block;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  letter-spacing: -0.005em;
  color: var(--tx);
}
#view-create .cr-card-sub {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--t3);
}

/* ── Creation settings: destination + starting template ──
   One line, directly under the cards it governs. */
#view-create .cr-set {
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
}
#view-create .cr-set-part { display: inline-flex; align-items: center; gap: 6px; }
#view-create .cr-set-lbl {
  font: var(--fw-regular) var(--fs-12)/1.4 var(--ff-sans);
  color: var(--t2);
}
#view-create .cr-set-sep {
  width: 1px; height: 12px; background: var(--b2); flex-shrink: 0;
}

/* The destination channel. This page hides both the sidebar and the topbar, so
   without this there is nothing on screen naming the channel a blank project
   lands in. */
#view-create .cr-dest-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px 3px 7px;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: var(--r-2);
  color: var(--tx);
  font: var(--fw-medium) var(--fs-12)/1.4 var(--ff-sans);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
#view-create .cr-dest-btn:hover,
#view-create .cr-dest-btn.open { border-color: var(--b3); background: var(--bg3); }
#view-create .cr-dest-btn:disabled { color: var(--t3); cursor: default; }
#view-create .cr-dest-ic { display: inline-flex; color: var(--t3); }
#view-create .cr-dest-ic svg { width: 12px; height: 12px; }
#view-create .cr-dest-cv { width: 12px; height: 12px; color: var(--t3); flex-shrink: 0; }
#view-create .cr-dest-note {
  font: var(--fw-regular) var(--fs-11)/1.4 var(--ff-sans);
  color: var(--t2);
}

/* ── Pick up where you left off ── */
#view-create .cr-cont { margin-top: var(--s-7); }
#view-create .cr-cont:empty { display: none; }
#view-create .cr-sec-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
#view-create .cr-sec-t {
  font: var(--fw-semi) var(--fs-13)/1.3 var(--ff-sans);
  letter-spacing: -0.005em;
  color: var(--tx);
}
#view-create .cr-sec-all {
  background: none; border: 0; padding: 0;
  font: var(--fw-medium) var(--fs-12)/1.3 var(--ff-sans);
  color: var(--t2);
  cursor: pointer;
  transition: color var(--t-base) var(--ease);
}
#view-create .cr-sec-all:hover { color: var(--tx); }

#view-create .cr-rows { display: flex; flex-direction: column; gap: var(--s-2); }
#view-create .cr-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: var(--r-4);
  cursor: pointer;
  font-family: var(--ff-sans);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
#view-create .cr-row:hover { border-color: var(--b3); box-shadow: var(--sh-1); }
#view-create .cr-row-thumb {
  position: relative;
  width: 72px;
  height: 41px;
  flex-shrink: 0;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--bg3);
}
#view-create .cr-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#view-create .cr-row-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.28);
}
/* Ink, not SCOLS[stage] — those are hardcoded hex in state.js and do not
   respond to the theme. */
#view-create .cr-row-bar > span { display: block; height: 100%; background: var(--tx); }
#view-create .cr-row-tx { flex: 1; min-width: 0; }
#view-create .cr-row-title {
  display: block;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-create .cr-row-meta {
  display: block;
  margin-top: 3px;
  font: var(--fw-regular) var(--fs-11)/1.3 var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t2);
}
#view-create .cr-row-go { display: inline-flex; color: var(--t3); flex-shrink: 0; }
#view-create .cr-row-go svg { width: 15px; height: 15px; }
#view-create .cr-row:hover .cr-row-go { color: var(--tx); }

/* The shared empty state (css/empty.css) is padded for a dashboard widget.
   This view wants it tighter and its glyphs a notch smaller, and an id beats
   the primitive's own selector, so both overrides land without !important. */
#view-create .empty { min-height: 0; padding: var(--s-5) var(--s-4); }
#view-create .empty-glyph svg { width: 20px; height: 20px; }

/* ── Secondary row: these leave the page, so they are links ── */
#view-create .cr-more {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
}
#view-create .cr-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px var(--s-3);
  background: none;
  border: 0;
  border-radius: var(--r-2);
  color: var(--t2);
  font: var(--fw-medium) var(--fs-13)/1 var(--ff-sans);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
#view-create .cr-more-btn:hover { background: var(--bg3); color: var(--tx); }
#view-create .cr-more-ic { display: inline-flex; color: var(--t2); transition: color var(--t-base) var(--ease); }
#view-create .cr-more-ic svg { width: 15px; height: 15px; }
#view-create .cr-more-btn:hover .cr-more-ic { color: var(--tx); }

/* ── The template a blank project starts from ──
   Part of the sentence, not a form control. The chevron is this rule's own
   background image and appearance:none removes the engine's: `body.light
   select` paints a chevron on every select in the app and loads after this
   file, so without an explicit background-image here that arrow lands on top
   of whatever else is drawn — which is how it ended up with two. */
#view-create .cr-set select.cr-tpl-sel {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5' stroke='%2382828B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 1px 16px 2px 0;
  color: var(--tx);
  font: var(--fw-medium) var(--fs-12)/1.4 var(--ff-sans);
  cursor: pointer;
  outline: 0;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-base) var(--ease);
}
#view-create .cr-set select.cr-tpl-sel:hover { text-decoration-color: var(--b3); }
/* The option list is drawn by the OS and does not inherit the transparent
   background above — say what it should be. */
#view-create .cr-set select.cr-tpl-sel option { background: var(--bg2); color: var(--tx); }

/* ── Focus visibility for everything that isn't the field (branddesign.md §8) ── */
#view-create .cr-go:focus-visible,
#view-create .cr-card:focus-visible,
#view-create .cr-row:focus-visible,
#view-create .cr-more-btn:focus-visible,
#view-create .cr-sec-all:focus-visible,
#view-create .cr-dest-btn:focus-visible,
#view-create .cr-set select.cr-tpl-sel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-line);
}

/* ── View-only ── */
#view-create .cr-locked .cr-mid { max-width: 46ch; text-align: center; }

/* ── Narrow ── */
@media (max-width: 640px) {
  #view-create .cr-wrap { padding: var(--s-6) var(--s-4); }
  #view-create .cr-cards { grid-template-columns: 1fr; margin-top: var(--s-6); }
  #view-create .cr-cont { margin-top: var(--s-6); }
  #view-create .cr-more { margin-top: var(--s-5); }
}