/*
 * SITE-ONLY — the /prd generator. Stripped from kit releases; see delivery/deny.txt.
 *
 * Its own file, not a block in 04-components.css, for the reason showcase.css is its own file:
 * the deny-list strips whole FILES, so rules for a denied page living in a shared stylesheet
 * would ship to every buyer as dead CSS. `stylesheet_link_tag :app` links every file in this
 * directory, so nothing has to name it and its absence costs a buyer one <link>, not an error.
 *
 * Unprefixed like blog.css and docs.css: the 0N- prefixes are the cascade, and page styles load
 * after the components they lean on.
 */

/* ------------------------------------------------------------------ Form ----- */
/* The questions are the page, so they get a little more room than a settings form. */
.prd-form .field { margin-bottom: 26px; }

.prd-form textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

/* Composed with .label rather than restating it: the mono/uppercase/tracking treatment lives in
   02-base.css, and a copy here would go on rendering correctly after that one changed. Only the
   deltas belong in this file. .label (0,1,0) outranks the bare `label` rule in 04-components.css,
   so the element default does not need overriding. */
/* --ink-3, not .label's --muted. 11.5px is the text floor and --muted is the darkest allowed
   there, but the floor is a floor: these nine questions are the page's primary prose, and left at
   --muted each one sat dimmer than the 13px hint underneath it -- the reading order backwards. */
.prd-q { display: block; margin-bottom: 10px; color: var(--ink-3); }
.prd-q__n { color: var(--dim); margin-right: 10px; }

/* Question 4 is the one people skip and the one that changes the result most, so it is the one
   thing on the page wearing the accent. Gold is the CTA colour and this is, in effect, the CTA. */
.prd-field--key { border-left: 2px solid var(--gold); padding-left: 18px; }
.prd-field--key .prd-q { color: var(--gold); }
.prd-field--key .prd-q__n { color: var(--gold); }

.prd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }

/* ---------------------------------------------------------------- Output ----- */
/* Not composed with .card: this is a card whose bar and body own their own padding, so sharing
   .card would mean setting its 24px back to 0 and then re-adding it twice. Everything else about
   it -- the 1px rule, the raised background, the square corners -- is the card's, by hand. */
.prd-panel { border: 1px solid var(--rule); background: var(--bg-raised); }

.prd-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}

.prd-panel__name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  /* The filename is the visitor's product name, slugged. Long ones must not push the buttons off. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.prd-panel__actions { display: flex; gap: 8px; flex-shrink: 0; }

.prd-out {
  margin: 0;
  padding: 18px 16px;
  max-height: 62vh;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
  /* The file is markdown: its own line breaks are the structure, and a long answer still has to
     wrap rather than scroll sideways. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prd-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
/* The no-JS note sits INSIDE the panel, where the file would otherwise be. */
.prd-note--inset { margin: 0; padding: 18px 16px; }

/* Follow the form down the page while reading, but only where there are two columns to follow.
   Below the grid's 900px collapse the panel is simply the next block in the stack, and a sticky
   element there pins itself over the questions it is meant to be answering. */
@media (min-width: 900px) {
  .prd-sticky { position: sticky; top: 24px; }
}