/* The Design Studio look, from the approved brand package (clients/design-studio/.planning/design-studio/
   rounds/brand-1: the Chalkboard, colourway 22). Loaded only while STUDIO_BRANDING is on, and every rule is
   scoped to body.studio-brand, so with it off nothing here applies.
   The intake form takes the whole look (D-23): the board ground, chalk text, Cabin Sketch headings,
   lavender buttons and slate field borders. A client link takes only quiet touches in its chrome (D-24):
   the package's type, the studio's name in its display face and one accent; the frame where the client's
   own design shows keeps --frame-ground and --frame-line from studio.css, and nothing here touches it. */

@font-face {
  font-family: "Cabin Sketch";
  src: url("/assets/fonts/cabin-sketch-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.studio-brand {
  /* The package's palette (manifest.json "palette"), under its own names. */
  --ds-board: #0e1116;
  --ds-chalk: #e7ebf0;
  --ds-slate: #838c98;
  --ds-lavender: #d2c2ff;
  --ds-cyan: #7cf3ff;
  --ds-blue: #4a8fe0;
  --ds-display: "Cabin Sketch", Georgia, serif;
  --ds-body: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  --ds-radius-hand: 10px 14px 9px 13px;

  --face-body: var(--ds-body);
  --face-display: var(--ds-body);
}

.studio-brand [hidden] { display: none !important; }

/* ------------------------------------------------------------------ the intake form: the whole look */

.intake-page.studio-brand {
  --ground: var(--ds-board);
  --surface: #151a21;          /* a field sits a shade above the board */
  --ink: var(--ds-chalk);
  --ink-2: #b4bcc6;            /* the lede and section notes, between chalk and slate */
  --ink-3: var(--ds-slate);    /* hints */
  --line: rgba(231, 235, 240, 0.22);
  --line-strong: var(--ds-slate);
  --action: var(--ds-lavender);
  --action-ink: var(--ds-board);
  --focus: var(--ds-cyan);
  --good: #8fe3b0;
  --bad: #ff9a9a;
  --wash-good: #13291d;
  --wash-bad: #2b1518;

  color-scheme: dark;
  accent-color: var(--ds-lavender);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.intake-page.studio-brand ::selection { background: var(--ds-lavender); color: var(--ds-board); }

.intake-page.studio-brand h1,
.intake-page.studio-brand h2 {
  font-family: var(--ds-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.04;
}
.intake-page.studio-brand h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem); }
.intake-page.studio-brand .step-n { font-family: var(--ds-body); font-weight: 700; color: var(--ds-slate); }

.intake-page.studio-brand label,
.intake-page.studio-brand fieldset.field legend { font-weight: 700; }
.intake-page.studio-brand .choice { font-weight: 400; }

.intake-page.studio-brand .studio-bar { gap: var(--space-3); padding-top: var(--space-5); color: var(--ink); }
.intake-page.studio-brand .studio-icon { display: block; width: 34px; height: 31px; flex: none; }
.intake-page.studio-brand .studio-name { font-family: var(--ds-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--ds-chalk); }
.intake-page.studio-brand .intake-head { padding-top: var(--space-7); }

/* Rules between rows are chalk dashes, never a solid hairline (spacing.json "rule"). */
.intake-page.studio-brand .progress { border-bottom: 2px dashed var(--line); }
.intake-page.studio-brand .block { border-bottom: 2px dashed var(--line); }
.intake-page.studio-brand .files li { border-bottom: 2px dashed var(--line); }

.intake-page.studio-brand .progress a.done .progress-n { color: var(--ds-board); }

.intake-page.studio-brand .button { border-radius: var(--ds-radius-hand); font-weight: 700; }
.intake-page.studio-brand .button:hover { background: #e2d8ff; border-color: #e2d8ff; }
.intake-page.studio-brand .button.secondary { background: transparent; color: var(--ink); border-color: var(--ds-slate); }
.intake-page.studio-brand .button.secondary:hover { background: var(--surface); border-color: var(--ink); }

.intake-page.studio-brand input:hover,
.intake-page.studio-brand textarea:hover { border-color: var(--ds-chalk); }
.intake-page.studio-brand .field .choice { border-color: var(--ds-slate); }
.intake-page.studio-brand .field .choice:hover { border-color: var(--ds-chalk); }
.intake-page.studio-brand .field .choice:has(input:checked) { border-color: var(--ds-lavender); box-shadow: 0 0 0 1px var(--ds-lavender); }
.intake-page.studio-brand .drop input[type="file"] { border-color: var(--ds-slate); }
.intake-page.studio-brand .drop input[type="file"]:hover { border-color: var(--ds-chalk); }
.intake-page.studio-brand .drop input[type="file"]::file-selector-button { border-radius: var(--ds-radius-hand); border-color: var(--ds-slate); }

/* ------------------------------------------------------------- a client link: quiet touches, chrome only */

.viewer.studio-brand .studio-bar { gap: var(--space-4); padding-top: var(--space-4); }
.viewer.studio-brand .studio-name {
  font-family: var(--ds-display); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--ds-board); white-space: nowrap;
  /* The one accent: a chalk underline in blue chalk, drawn the way the package's mark draws its own. */
  padding-bottom: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4c38-2.2 77-2 116-.4' fill='none' stroke='%234a8fe0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 6px no-repeat;
}
.viewer.studio-brand .studio-project { padding-left: var(--space-4); border-left: 1px solid var(--line-strong); }