/* forecraft — page-level composition that Faqir's tokens and primitives do not
   express. Every value is a token. Each block names the upstream entry that
   would make it unnecessary (FAQIR-UPSTREAM.md). */

/* ── Skip link (FAQIR-UPSTREAM.md #8) ─────────────────────────────────────── */
body > a[href="#main"]:first-child {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: var(--z-max);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-fg);
  transform: translateY(-200%);
}
body > a[href="#main"]:first-child:focus-visible {
  transform: none;
}

/* Accents: Faqir 1.3.0 ships tokens/accent.css (`data-accent` + named hues).
   FAQIR-UPSTREAM.md #9 is fixed upstream — no local hue table here. */

/* ── Public form page ─────────────────────────────────────────────────────── */
[data-form-page] {
  min-block-size: 100dvh;
  padding-block: var(--section-gap-sm) var(--section-gap-md);
  padding-inline: var(--content-gutter);
}
[data-form-head] {
  display: grid;
  gap: var(--space-3);
}
[data-form-cover] {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
[data-form-cover] img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
[data-form-actions] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}
[data-form-actions]:empty {
  display: none;
}
[data-form-thanks] [data-part="body"] {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
[data-form-foot] {
  text-align: center;
}
[data-form-page="split"] > [data-form-cover] {
  margin-block-end: var(--space-6);
}
/* The split layout: the cover takes the left half from the lg tier, pinned while
   the form scrolls beside it. */
@media (min-width: 64rem) {
  [data-form-page="split"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-16);
    padding-block-start: var(--space-8);
  }
  [data-form-page="split"] > [data-form-cover] {
    margin-block-end: 0;
    position: sticky;
    inset-block-start: var(--space-8);
    block-size: calc(100dvh - 2 * var(--space-8));
  }
  [data-form-page="split"] > [data-form-cover] img {
    block-size: 100%;
    aspect-ratio: auto;
  }
}

/* ── Auth and dashboard brand ─────────────────────────────────────────────── */
[data-auth-page] {
  /* The site bar sits above: the card centres in the rest of the window. */
  min-block-size: calc(100dvh - var(--space-16));
  display: grid;
  align-content: center;
  padding: var(--section-gap-sm) var(--content-gutter);
}
[data-app-brand] {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-fg);
  text-decoration: none;
  letter-spacing: var(--heading-tracking);
}

/* The staggered entrance on the form page holds header, cover, form and footer;
   reveal lays out nothing itself, so the page gives the group its rhythm. */
[data-form-page] [data-ui="reveal"][data-stagger] {
  display: grid;
  gap: var(--space-8);
}

/* ── Designer ─────────────────────────────────────────────────────────────────
   A three-pane tool: palette, canvas, properties. Wide screens only; a phone
   gets a note instead (the panes need ~1024px). The pane widths (15rem, 22rem),
   the title input (18rem) and the phone preview frame (24rem) are layout
   decisions of this tool, not design tokens. [data-designer-sr] is the reset's
   visually-hidden pattern, which Faqir ships only as a class (.sr-only). */
[data-designer] {
  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--color-bg-subtle);
}
[data-designer-bar] {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-block-end: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
}
[data-designer-bar] input[data-ui="input"] {
  inline-size: 18rem;
  font-weight: var(--weight-semibold);
}
[data-designer-sr] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-designer-narrow] {
  margin: 0;
  padding: var(--space-6) var(--content-gutter);
}
[data-designer-panes] {
  display: none;
}
@media (min-width: 64rem) {
  [data-designer-narrow] { display: none; }
  [data-designer-panes] {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 22rem;
    align-items: start;
    min-block-size: 0;
  }
}
[data-designer-palette],
[data-designer-props] {
  position: sticky;
  inset-block-start: var(--space-16);
  block-size: calc(100dvh - var(--space-16));
  overflow-y: auto;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  background: var(--color-bg);
}
[data-designer-palette] {
  border-inline-end: var(--border-width) solid var(--color-border);
}
[data-designer-props] {
  border-inline-start: var(--border-width) solid var(--color-border);
}
[data-designer-palette] [data-ui="button"] {
  justify-content: flex-start;
  inline-size: 100%;
  cursor: grab;
}
[data-designer-center] {
  padding: var(--space-6);
  min-inline-size: 0;
}
[data-designer-canvas] {
  display: grid;
  gap: var(--space-5);
  max-inline-size: var(--measure-content);
  margin-inline: auto;
  margin-block-start: var(--space-4);
}
[data-designer-section] {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
[data-designer-section-head] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
[data-designer-section-head] input[data-ui="input"] {
  flex: 1;
}
[data-designer-list] {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-designer-field] {
  cursor: grab;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
[data-designer-field]:hover {
  border-color: var(--color-border-strong);
}
[data-designer-field][aria-current="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-subtle);
}
[data-designer-field]:active {
  cursor: grabbing;
}
[data-designer-grip] {
  color: var(--color-fg-subtle);
}
/* The drop indicator: a bar where the dragged field will land. */
[data-designer-drop] {
  block-size: var(--space-1);
  margin-block: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 var(--space-1) var(--color-primary-subtle);
}
[data-designer-end] {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
}
[data-designer-end]:only-child {
  padding-block: var(--space-8);
  background: var(--color-bg-subtle);
}
[data-designer-json] {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
[data-designer-frame] {
  display: grid;
  justify-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-muted);
}
[data-designer-frame] iframe {
  inline-size: 100%;
  block-size: 75dvh;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  transition: inline-size var(--duration-normal) var(--ease-default);
}
[data-designer-frame][data-device="phone"] iframe {
  inline-size: 24rem;
}
@media (prefers-reduced-motion: reduce) {
  [data-designer-field],
  [data-designer-frame] iframe { transition: none; }
}

/* ── Marketing site (/, /pricing, /for-agents, /docs) ─────────────────────── */

/* Instrument Serif, the project's heading face, ships one weight (400). A theme
   asking for semibold headings gets a synthesised bold, which smears the serif.
   The marketing pages set their headings as the face was cut. */
main[data-site="marketing"],
[data-ui="site-header"],
[data-ui="site-footer"] {
  --heading-weight: var(--weight-normal);
  /* No synthesised bold anywhere: see the body rule at the end of this file. */
}

/* The brand: the mark beside the word, set in the UI face. */
[data-ui="site-header"] > [data-part="brand"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
}

/* A hero inside a backdrop lets the light through (hero manifest: --hero-bg). */
[data-ui="backdrop"] > [data-ui="container"] > [data-ui="hero"] {
  --hero-bg: transparent;
}

/* The split hero's code window: code at the small step so a JSON line fits. */
main[data-site="marketing"] [data-ui="hero"] pre {
  font-size: var(--text-xs);
}

/* The hero headline starts a step up on a phone too. */
main[data-site="marketing"] [data-ui="hero"] [data-part="headline"] {
  font-size: var(--text-4xl);
}

main[data-site="marketing"] [data-ui="hero"] figcaption {
  margin-block-start: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

@media (min-width: 64rem) {
  /* The split hero's headline at display size: the theme's largest step is
     a body-copy theme's idea of large, not a launch page's. */
  main[data-site="marketing"] [data-ui="hero"] [data-part="headline"] {
    font-size: calc(var(--text-4xl) * 1.75);
    line-height: var(--leading-tight);
  }
}

/* The page runs straight under the bar: no rhythm gap between header and main
   (body's flow-space would put one there, and the hero's backdrop would start
   below a band of plain ground). */
main[data-site="marketing"] {
  margin-block-start: 0;
}

/* feature-grid sets its heading in the body face at bold, where every sibling
   pattern (bento, faq, testimonials, cta, pricing) reads the heading voice.
   Bring it in line so the page's section headings match. */
main[data-site="marketing"] [data-ui="feature-grid"] [data-part="heading"] {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
}

@media (min-width: 64rem) {
  /* Section headings one step up from the patterns' 3xl: a launch page talks
     in headlines. */
  main[data-site="marketing"] :is([data-ui="bento"], [data-ui="testimonials"], [data-ui="pricing"]) > [data-part="heading"],
  main[data-site="marketing"] :is([data-ui="feature-grid"], [data-ui="faq"]) [data-part="heading"],
  main[data-site="marketing"] [data-ui="cta"] > [data-part="headline"] {
    font-size: var(--text-4xl);
  }
}

/* A copyable snippet: its label-and-button row sits right on top of the block. */
main[data-site="marketing"] [data-ui="prose"] [l-data] > pre {
  margin-block-start: var(--space-2);
}

/* A docs page: air under the bar, and the docs list stays in view beside a
   long article (the article itself is capped at the prose measure). */
main[data-doc] {
  padding-block: var(--space-12) var(--space-16);
}

@media (min-width: 64rem) {
  main[data-doc] aside {
    position: sticky;
    inset-block-start: var(--space-20);
    min-inline-size: var(--space-48);
  }
}

/* A wide docs table scrolls inside its own focusable region on a phone
   instead of widening the page. */
[data-ui="prose"] [role="region"] {
  overflow-x: auto;
}

/* Card titles in the heading face read small at the card's own step. */
main[data-site="marketing"] [data-ui="card"] > [data-part="header"] > [data-part="title"],
main[data-site="marketing"] [data-ui="bento"] [data-part="item"] > [data-part="title"] {
  font-size: var(--text-xl);
}

/* Instrument Serif ships one weight: never synthesise a bold it does not have,
   on any page (FAQIR-UPSTREAM.md #18). */
body {
  font-synthesis-weight: none;
}

/* A ui:groups fieldset is a card whose title is a <legend>; card does not style
   a fieldset root, so the legend notches the border (FAQIR-UPSTREAM.md #27).
   Floated, the legend leaves the border and sits in the card like a title. */
[data-form-page] fieldset[data-ui="card"] > legend[data-part="title"] {
  float: inline-start;
  inline-size: 100%;
  margin: 0;
  padding: var(--card-padding, var(--space-6)) var(--card-padding, var(--space-6)) var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}
[data-form-page] fieldset[data-ui="card"] > legend[data-part="title"] + * {
  clear: both;
}

/* dashboard-shell docks its sidebar from the md tier but keeps showing the phone
   toggle there (FAQIR-UPSTREAM.md #30). */
@media (min-width: 48rem) {
  [data-app] > [data-part="header"] > [data-part="sidebar-toggle"] {
    display: none;
  }
}
/* The palette is a keyboard affordance; on a phone the header needs the room. */
[data-palette-button] {
  display: none;
}
@media (min-width: 40rem) {
  [data-palette-button] { display: inline-flex; }
}

/* ── Reports: the shelf of real paper, the framed sheet ───────────────────── */

/* A thumbnail is page 1 of the PDF itself, so it is shown as paper: the sheet's
   own proportions, a hairline edge and a soft shadow on the page background. */
[data-report-shelf] { align-items: start; }
[data-report-spine] {
  display: grid;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}
[data-report-paper] {
  margin: 0;
  aspect-ratio: 210 / 297;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: white;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 18px oklch(0 0 0 / 0.07);
  transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
[data-report-paper] img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
[data-report-spine]:hover [data-report-paper],
[data-report-spine]:focus-visible [data-report-paper] {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px oklch(0 0 0 / 0.08), 0 12px 28px oklch(0 0 0 / 0.10);
}
[data-report-unpublished] {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}
[data-report-frame] iframe {
  display: block;
  inline-size: 100%;
  block-size: min(88vh, 1180px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: oklch(0.94 0.004 85);
}
[data-report-link] {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--text-xs);
}
[data-report-json] {
  max-block-size: 24rem;
  overflow: auto;
  white-space: pre;
}
[data-ui="description-list"] code { overflow-wrap: anywhere; }

/* ── Report designer: the page is the canvas ──────────────────────────────
   The desk scrolls; the sheet is the server's own HTML in an iframe at the
   paper's width, scaled by --canvas-zoom (fit, 100 %, 150 %). */
[data-rd-desk] {
  overflow: auto;
  max-block-size: calc(100dvh - 9rem);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-lg);
  background: oklch(0.90 0.004 85);
}
[data-rd-sheet] {
  zoom: var(--canvas-zoom, 1);
  inline-size: max-content;
  margin-inline: auto;
}
[data-rd-sheet] iframe {
  display: block;
  border: 0;
  background: transparent;
}
[data-rd-row] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
[data-rd-theme] {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  text-align: start;
}
[data-rd-theme][aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-subtle);
}
[data-rd-theme] img { inline-size: 100%; }
[data-rd-strip] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-4);
}
[data-rd-finding] {
  inline-size: 100%;
  justify-content: flex-start;
  gap: var(--space-2);
  white-space: normal;
  text-align: start;
  block-size: auto;
  padding-block: var(--space-2);
}
[data-designer-props] [data-ui="field-group"] textarea { font-family: var(--font-mono); font-size: var(--text-xs); }

/* Landing: the documents section shows a real printed page as paper. */
[data-landing-documents] { padding-block: var(--space-16); }
[data-landing-paper] img {
  background: white;
  border: 1px solid oklch(0.85 0 0);
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.12), 0 18px 40px oklch(0 0 0 / 0.18);
  rotate: 1.2deg;
}

/* ux-audit: dashboard */

/* The app bar: the page title sits on the bar's centre line. Body flow space
   gave the title cluster a top margin that pushed it onto the bar's border. A
   long title ellipsises instead of wrapping out of the bar. */
[data-app] > [data-part="header"] > * {
  margin-block: 0;
}
[data-app-title] {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-inline-size: 0;
}
[data-app-title] > h1 {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app-title] > [data-ui="badge"] {
  flex-shrink: 0;
}
[data-app] > [data-part="header"] > [data-part="header-actions"] {
  flex-shrink: 0;
}
/* On a phone a form page's header buttons are icons; the words stay for
   screen readers (the reset's visually-hidden pattern, as [data-designer-sr]). */
@media (max-width: 39.99rem) {
  [data-app-actions] [data-action-label] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The first dashboard's key offer: its buttons a step below the sentence. */
[data-key-cta] [data-part="content"] > [data-ui="cluster"] {
  margin-block-start: var(--space-3);
}

/* The signed-in address: one line, ellipsised; the full address is its title. */
[data-app] [data-part="sidebar-user"] > [data-ui="stack"] {
  min-inline-size: 0;
}
[data-app] [data-part="sidebar-user-name"] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Big numbers in the body face with lining, tabular figures: the heading
   serif's "1" reads as a lowercase "l". */
[data-app] [data-ui="stat"] > [data-part="value"] {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
}

/* A table's quick filter is a control like any other: the input height. */
[data-app] [data-ui="table"] [data-part="filter"] {
  block-size: var(--input-height);
  max-inline-size: 24rem;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--input-radius, var(--radius-md));
}

/* Responses: the search box fits its placeholder; the count and the column
   chooser share a line; an expanded response is a compact grid of answers. */
[data-app] input[data-search] {
  inline-size: 18rem;
  max-inline-size: 100%;
}
[data-responses-bar] {
  justify-content: space-between;
}
[data-column-chooser] {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 14rem;
  max-block-size: 60dvh;
  overflow-y: auto;
}
[data-column-chooser] > legend {
  margin-block-end: var(--space-2);
  padding: 0;
}
[data-app] dl[data-answers] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: var(--space-2) var(--space-1);
}
@media (min-width: 48rem) {
  [data-app] dl[data-answers] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 80rem) {
  [data-app] dl[data-answers] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[data-app] dl[data-answers] > div {
  min-inline-size: 0;
}
[data-app] dl[data-answers] > [data-full-row] {
  grid-column: 1 / -1;
}
[data-app] dl[data-answers] [data-part="term"] {
  margin-block-end: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}
[data-app] dl[data-answers] [data-part="details"] {
  margin: 0;
  overflow-wrap: anywhere;
}
/* Long answers keep the line breaks people typed. */
[data-app] dl[data-answers] [data-answer-text] {
  white-space: pre-line;
}

/* ux-audit: report-designer */
/* A row of a list (a stat, a column, a signature) is a small form: each cell
   has its label above it, two to a line; the remove button closes the row. */
[data-rd-cell] {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
}
[data-rd-row-remove] {
  grid-column: 1 / -1;
  justify-self: end;
}
[data-rd-issue] { display: inline-flex; }
[data-rd-origin] { margin-block-end: var(--space-2); }

/* ux-audit: form-designer */
/* An empty section is a drop target you can see; the one a drag is over lights up. */
[data-designer-section][data-empty] [data-designer-end] {
  padding-block: var(--space-8);
  border: var(--border-width) dashed var(--color-border-strong);
  background: var(--color-bg-subtle);
}
[data-designer-section][data-drop-target] {
  border-color: var(--color-primary);
  border-style: solid;
}
[data-designer-section][data-drop-target][data-empty] [data-designer-end] {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}
/* A label over its control, for the small forms inside a list (rule conditions, row columns). */
[data-designer-pair] {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  min-inline-size: 0;
}
[data-designer-label] {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
[data-designer-condition] {
  align-items: end;
}
[data-designer-columns] {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-designer-column] [data-ui="cluster"] > input[data-ui="input"] {
  flex: 1;
  min-inline-size: 0;
}
/* Themes: a swatch (the page, a card on it, the primary colour) and a name. */
[data-designer-themes] {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
[data-designer-theme-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-2);
}
[data-designer-theme] {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
}
[data-designer-theme]:hover { border-color: var(--color-border-strong); }
[data-designer-theme]:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-subtle);
}
[data-designer-theme]:has(input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--color-ring);
  outline-offset: 2px;
}
[data-designer-theme] input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-designer-swatch] {
  position: relative;
  display: block;
  block-size: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--swatch-bg);
  border: var(--border-width) solid var(--color-border);
  overflow: hidden;
}
[data-swatch-surface] {
  position: absolute;
  inset: 25% 35% 0 10%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--swatch-surface);
  box-shadow: inset 0 3px 0 var(--swatch-fg);
}
[data-swatch-primary] {
  position: absolute;
  inset-block-start: 30%;
  inset-inline-end: 10%;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--swatch-primary);
}
[data-designer-theme-name] {
  font-size: var(--text-sm);
}
[data-designer-toast-link] {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

/* ux-audit: public-form */
/* A date field is as wide as the other fields (the date-picker recipe is
   inline-block for use in running text). */
[data-form-page] [data-ui="field-group"] [data-ui="date-picker"],
[data-form-page] [data-ui="field-group"] [data-ui="date-picker"] > [data-part="trigger"] {
  display: flex;
  inline-size: 100%;
}
[data-form-page] [data-ui="date-picker"] > [data-part="trigger"] > [data-part="input"] {
  cursor: text;
}
/* Month and year selects in the calendar header (public/form.js), between the
   two arrows. */
[data-form-page] [data-fc-month-year] {
  display: flex;
  gap: var(--space-1);
}
[data-form-page] [data-fc-month-year] > select {
  inline-size: auto;
}
/* A closed dropdown cannot wrap: it ends in an ellipsis rather than mid-letter,
   and from the md tier one whose choices do not fit its share of the row takes
   the whole row (data-fc-span, public/form.js). */
[data-form-page] select[data-ui="select"] {
  text-overflow: ellipsis;
}
@media (min-width: 48rem) {
  [data-form-page] [data-ui="field-group"][data-fc-span="6"] { grid-column: 1 / -1; }
}
/* The three panes start right under the bar, level with each other: no flow
   spacing between them, and the bar is exactly as tall as the panes' sticky offset. */
[data-designer-bar] { min-block-size: var(--space-16); }
[data-designer-panes] > * { margin-block: 0; }
[data-designer-center] { padding-block-start: var(--space-4); }
[data-designer-canvas] { margin-block-start: var(--space-5); }
/* A group card after a field keeps the field rhythm (card zeroes its margin, so
   a repeatable group touched the checkbox above it on a phone). In a grid row
   the grid's gap is that step already. */
[data-form-page] * + fieldset[data-ui="card"] {
  margin-block-start: var(--flow-space, var(--space-6));
}
@media (min-width: 48rem) {
  [data-form-page] :has(> [data-ui="field-group"][data-span]) > fieldset[data-ui="card"] {
    margin-block-start: 0;
  }
}
[data-designer-address] a { font-size: var(--text-sm); }
[data-ui="toast"] [data-part="message"] a { color: inherit; text-decoration: underline; }