/* ===========================================================================
   Promo.Build — the approved design system.

   "A studio that happens to run on AI."
   "The system is quiet so the user's promo is the loudest thing on screen."

   Every value below comes from the approved Claude Design canvas, kept in
   design/approved-canvas.html. Two rules hold the identity together and are
   worth stating where they can be seen:

     Pine carries every action and every "done".
     Clay appears ONLY on audio — waveforms, voice, music — so sound has a
     colour of its own. Never use clay for a button, a badge, or a link.

   Nothing glows, nothing sparkles, nothing is purple.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Petrona:wght@300;400;500&family=Familjen+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper:       #F7F4EE;
  --card:        #FFFDF9;
  --ink:         #241F1A;
  --pine:        #2F5B48;
  --clay:        #E7A17A;
  --mint:        #8FBFA8;

  --line:        #E6DFD3;
  --line-soft:   #EFE9DE;
  --line-strong: #DDD5C7;
  --line-chip:   #E1DACD;
  --line-dash:   #D3CABA;

  --muted:       #5C5449;
  --soft:        #8C8378;
  --meta:        #A79E92;

  --ink-2:       #332D26;
  --ink-3:       #3A332B;
  --on-dark:     #F7F4EE;
  --on-dark-dim: #BDB5A8;
  --on-dark-meta:#8B8377;

  --serif: Petrona, 'Iowan Old Style', Georgia, serif;
  --sans:  'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell:  1180px;
  --narrow: 820px;
  --lift: 0 24px 60px -34px rgba(36, 31, 26, 0.35);
}

/* The canvas is committed to warm paper. It is the product's identity, not a
   theme, so it does not invert — but the viewport chrome should agree with it
   rather than flashing white or black around the edges. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------- type */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

/* The question is always the biggest thing on the screen. It scales with the
   viewport rather than stepping at breakpoints, so it stays the loudest
   element on a phone without a separate rule. */
.display  { font-size: clamp(42px, 7.4vw, 88px); line-height: 1; letter-spacing: -0.025em; }
.title    { font-size: clamp(34px, 5vw, 52px); }
.title-sm { font-size: clamp(28px, 3.6vw, 46px); }
.h-sec    { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }

.lede { margin: 16px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); max-width: 54ch; }

/* Timing, duration, meta. Uppercase and tracked — the machine speaks quietly
   and in a different typeface than the person. */
.meta {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
}
.meta-plain { font: 500 12px/1 var(--mono); color: var(--meta); letter-spacing: 0; text-transform: none; }
.meta-pine  { color: var(--pine); }

.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.soft  { color: var(--soft); }

/* ----------------------------------------------------------- wordmark */

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 25px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
/* The dot is the logo — it never moves. */
.wordmark .dot { color: var(--pine); }
.wordmark-sm { font-size: 21px; }

/* ------------------------------------------------------------ surface */

.shell  { max-width: var(--shell); margin: 0 auto; padding: 0 40px; }
.narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 40px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.card-sm  { border-radius: 14px; }
.card-md  { border-radius: 16px; }
.card-pad { padding: 24px; }
.card-pad-lg { padding: 38px 40px; }

/* --------------------------------------------------------------- form */

.field {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 22px 24px;
}
.field:focus-within { border-color: var(--ink); }

textarea.plain, input.plain {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  padding: 0;
}
textarea.plain::placeholder, input.plain::placeholder { color: var(--meta); }

/* The hero ask. Deliberately the only lifted surface on the page. */
.ask {
  margin: 44px auto 0;
  max-width: 760px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: var(--lift);
  padding: 8px;
  text-align: left;
}
.ask textarea { font-size: 21px; line-height: 1.5; padding: 22px 20px 8px; }
.ask-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 12px 12px 20px;
}

.label-stack { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; }

.field-error {
  margin: 10px 0 0;
  font-size: 14px;
  /* Failure is stated in ink, not in red. Red is a colour this system does not
     own, and an error is information, not an alarm. */
  color: var(--ink);
  border-left: 2px solid var(--clay);
  padding-left: 12px;
}

/* ------------------------------------------------------------- button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 13px;
  background: var(--ink); color: var(--on-dark);
  padding: 16px 28px;
  font-family: var(--sans); font-size: 17px; font-weight: 500;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background 140ms ease;
}
/* Ink becomes pine on the way to being pressed: the action colour is where
   the action is going. */
.btn:hover  { background: var(--pine); }
.btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--ink); }

.btn-sm { border-radius: 11px; padding: 12px 20px; font-size: 15px; }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); padding: 15px 24px; font-size: 16px;
}
.btn-ghost:hover { background: var(--line-soft); }

.btn-quiet {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line-chip); border-radius: 999px;
  padding: 9px 16px; font-size: 14px; font-weight: 400;
}
.btn-quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* Pills — the selected-state control used for length and tone. */
.pill {
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--muted);
  padding: 9px 17px; font-family: var(--sans); font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.pill[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.pill:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

.chip {
  display: inline-block;
  border: 1px solid var(--line-chip); border-radius: 999px;
  padding: 5px 11px; font: 500 11px/1 var(--mono); color: var(--muted);
}

/* --------------------------------------------------------------- nav */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px 40px; max-width: 1280px; margin: 0 auto;
}
.topbar nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }

/* The step rail. Progressive disclosure made visible: seven steps, the one
   you are on is the only one with a ground. */
.appbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 40px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.appbar-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.appbar-id .sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.appbar-name {
  font-size: 15px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}
.rail { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail a {
  border: none; border-radius: 999px; background: transparent; color: var(--meta);
  padding: 8px 14px; font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.rail a[aria-current='page'] { background: var(--line-soft); color: var(--ink); }
.rail a[data-locked] { opacity: 0.55; cursor: not-allowed; }

/* -------------------------------------------------------------- lists */

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Direction: label / value / edit. The value is set in the serif because it is
   the user's own words coming back, not the interface talking. */
.dir-row {
  display: grid; grid-template-columns: 150px 1fr 80px; gap: 24px;
  align-items: start; padding: 24px 28px; border-bottom: 1px solid var(--line-soft);
}
.dir-row:last-of-type { border-bottom: none; }
.dir-row .val { font-family: var(--serif); font-size: 21px; line-height: 1.4; color: var(--ink); }
.dir-row .val:empty::before { content: '—'; color: var(--meta); }
.dir-row .edit { text-align: right; font-size: 14px; font-weight: 500; color: var(--pine); background: none; border: none; cursor: pointer; font-family: var(--sans); }
.dir-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 22px 28px; background: var(--paper); }

/* Project cards. The thumbnail is a woven ink field until a real promo exists
   to put there — a placeholder that looks intentional rather than missing. */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.proj {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit; display: block;
  transition: border-color 140ms ease;
}
.proj:hover { border-color: var(--ink); }
.proj-thumb {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  padding: 18px; text-align: center;
  background: var(--ink);
  background-image: repeating-linear-gradient(135deg, var(--ink-2) 0 8px, #2B2620 8px 16px);
}
.proj-thumb span {
  font-family: var(--serif); font-size: 20px; line-height: 1.2; color: var(--on-dark);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-body { padding: 16px 18px 18px; }
.proj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proj-name { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  flex: none; border-radius: 999px; padding: 5px 10px;
  font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.badge-draft { border: 1px solid var(--line-chip); color: var(--muted); }
/* Pine carries every "done". */
.badge-ready { background: var(--pine); color: var(--on-dark); }

.empty {
  border: 1px dashed var(--line-dash); border-radius: 16px;
  padding: 48px 32px; text-align: center; color: var(--soft);
}

.dropzone {
  margin-top: 14px; border: 1px dashed var(--line-dash); border-radius: 10px;
  min-height: 40px; display: flex; align-items: center; justify-content: center;
  font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta);
  padding: 12px; text-align: center;
}

/* -------------------------------------------------------------- audio */

/* Clay lives here and nowhere else. */
.wave { display: flex; align-items: flex-end; gap: 4px; height: 52px; }
.wave i {
  flex: 1; height: 100%; border-radius: 3px; background: var(--clay);
  transform-origin: bottom; animation: pbwave 1.2s ease-in-out infinite;
}
.wave.idle i { background: #E3D9C9; animation: none; transform: scaleY(0.4); }

@keyframes pbwave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes pbrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.rise { animation: pbrise 420ms ease both; }

/* ------------------------------------------------------------ notices */

.notice {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start;
}
/* An unconfigured provider is an honest state, not a failure. It gets clay's
   neighbour-in-warmth as a left rule and says plainly what is missing. */
.notice-setup { border-left: 3px solid var(--clay); }
.notice h3 { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: 0; }
.notice p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.notice code { font: 500 12px/1.4 var(--mono); color: var(--pine); }

.divider { height: 1px; background: var(--line-soft); border: none; margin: 0; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.gap-8   { gap: 8px; }  .gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.gap-16  { gap: 16px; } .gap-20 { gap: 20px; }
.wrap    { flex-wrap: wrap; }
.mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; } .mt-26 { margin-top: 26px; } .mt-30 { margin-top: 30px; }
.mt-32 { margin-top: 32px; } .mt-38 { margin-top: 38px; } .mt-56 { margin-top: 56px; }
.center { text-align: center; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--on-dark); padding: 12px 18px; border-radius: 0 0 11px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* ----------------------------------------------------------- responsive
   "Thumb-first, one decision per screen." On phones the rails become a
   scrolling strip, the grids collapse to a stack, and the question stays the
   biggest thing on the screen. */

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .shell, .narrow { padding: 0 20px; }
  .topbar { padding: 18px 20px; }
  .topbar nav { gap: 18px; }
  /* Marketing links stand down on a phone; the one action stays. */
  .topbar nav .nav-secondary { display: none; }

  .appbar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 20px; }
  .appbar-id { justify-content: flex-start; }
  .rail { margin: 0 -20px; padding: 0 20px; }

  .grid-4, .grid-3, .proj-grid { grid-template-columns: 1fr; }

  .ask { padding: 6px; border-radius: 16px; }
  .ask textarea { font-size: 18px; padding: 16px 14px 6px; }
  .ask-foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 6px 8px 8px 14px; }
  /* Checklist of what can still be added — noise next to the one real action
     on a phone. It reappears inside the Brief step, where it is the point. */
  .ask-foot .ask-hints { display: none; }
  .ask-foot .btn { width: 100%; }

  .field { padding: 16px; border-radius: 16px; }
  textarea.plain, input.plain { font-size: 16px; }

  /* Direction rows stop being a table and become label-over-value. */
  .dir-row { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 20px; }
  .dir-row .val { grid-column: 1; font-size: 19px; }
  .dir-row .edit { grid-row: 1; grid-column: 2; }
  .dir-foot { padding: 20px; }

  .btn { width: 100%; padding: 17px 20px; }
  .btn-inline { width: auto; }
  .row-actions { flex-direction: column; align-items: stretch; gap: 12px; }

  .card-pad-lg { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .wave i { transform: scaleY(0.6); }
}