/* ==========================================================================
   KnowToYes report portals: the ordering pages under /static/frontend/docs/.
   Loads after kty-tokens.css and kty-band.css, which are copied unchanged
   from the kty-brand skill (v2.6.0). This file adds only what an ordering
   page needs and the Band layer does not carry: the order form, its status
   messages, the build progress list and the download panel. Tokens only.

   Class names .msg/.ok/.info/.err and li.done/li.active are set by each
   page's script and must keep those names.
   ========================================================================== */

/* Headings inside a dark block take white; the Band layer only sets h1. */
.kty-on-dark h2, .kty-on-dark h3 { color: var(--kty-white); }
.kty-hero .kty-hero__eyebrow { margin: 0 0 var(--kty-space-4); }
.kty-hero__price {
  font-family: var(--kty-font-data);
  font-size: var(--kty-size-data);
  color: var(--kty-blue-200);
  font-variant-numeric: tabular-nums;
  margin: var(--kty-space-5) 0 0;
  padding-bottom: var(--kty-space-8);
}

/* Header link to the site's report list. */
.kty-header__nav a.kty-header__back { color: var(--kty-white); }

/* Order layout: the form, then what the report holds. */
.kty-portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--kty-space-7);
  align-items: start;
}
@media (max-width: 900px) { .kty-portal-grid { grid-template-columns: 1fr; } }

.kty-form { display: flex; flex-direction: column; gap: var(--kty-space-4); }
.kty-form .kty-input, .kty-form .kty-select, .kty-form textarea.kty-input { width: 100%; }
.kty-form textarea.kty-input { min-height: 110px; padding: var(--kty-space-3) 14px; resize: vertical; }
.kty-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kty-space-4); }
@media (max-width: 560px) { .kty-field-row { grid-template-columns: 1fr; } }
.kty-field > label .kty-optional { text-transform: none; letter-spacing: 0; color: var(--kty-slate); }
.kty-hint { font-size: var(--kty-size-small); color: var(--kty-slate); margin: 0; }
.kty-form__actions { display: flex; flex-wrap: wrap; gap: var(--kty-space-3); margin-top: var(--kty-space-2); }
.kty-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Status line under the form. Colour is never the only carrier: each state
   also has a word prefix set by its bar and the message text itself. */
.msg { font-size: var(--kty-size-ui); line-height: var(--kty-leading-ui); }
.msg:empty { display: none; }
.msg.ok, .msg.info, .msg.err {
  padding: var(--kty-space-3) var(--kty-space-4);
  border-left: 4px solid currentColor;
}
.msg.ok   { background: var(--kty-approved-fill); color: var(--kty-approved); }
.msg.info { background: var(--kty-pending-fill);  color: var(--kty-pending); }
.msg.err  { background: var(--kty-denied-fill);   color: var(--kty-denied); }
.msg a { color: inherit; }

/* What the report holds: a list set as record rows. */
.kty-contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kty-border); }
.kty-contents li {
  padding: var(--kty-space-3) 0;
  border-bottom: 1px solid var(--kty-border);
  font-size: var(--kty-size-ui);
}
.kty-fine { font-size: var(--kty-size-small); color: var(--kty-slate); margin: var(--kty-space-5) 0 0; }

/* Build progress. Static state, no spinner: the list itself is the progress. */
.kty-steps { list-style: none; margin: var(--kty-space-5) 0 0; padding: 0; border-top: 1px solid var(--kty-border); }
.kty-steps li {
  display: flex; align-items: center; gap: var(--kty-space-3);
  padding: var(--kty-space-3) 0;
  border-bottom: 1px solid var(--kty-border);
  color: var(--kty-slate);
}
.kty-steps .dot {
  flex: 0 0 12px; width: 12px; height: 12px;
  border: 2px solid var(--kty-blue-300);
  border-radius: var(--kty-radius-pill);
}
.kty-steps li.active { color: var(--kty-text); font-weight: 600; }
.kty-steps li.active .dot { border-color: var(--kty-blue-500); background: var(--kty-blue-500); }
.kty-steps li.done { color: var(--kty-text); }
.kty-steps li.done .dot { border-color: var(--kty-green-text); background: var(--kty-green-text); }
.kty-steps li.done::after {
  content: "Done";
  margin-left: auto;
  font-family: var(--kty-font-data);
  font-size: var(--kty-size-label);
  text-transform: uppercase;
  letter-spacing: var(--kty-tracking-label);
  color: var(--kty-green-text);
}

/* A single-column state panel: building, ready. */
.kty-panel { max-width: 680px; }
.kty-panel .kty-prose { margin-bottom: var(--kty-space-5); }
.kty-download { display: flex; flex-wrap: wrap; gap: var(--kty-space-3); margin-top: var(--kty-space-5); }

/* Product index cards: the price and the way in sit on one ruled line. */
.kty-product { display: flex; flex-direction: column; height: 100%; }
.kty-product .kty-card__body { display: flex; flex-direction: column; }
.kty-product__reads {
  font-family: var(--kty-font-data);
  font-size: var(--kty-size-label);
  text-transform: uppercase;
  letter-spacing: var(--kty-tracking-label);
  color: var(--kty-text-secondary);
  margin: 0 0 var(--kty-space-3);
}
.kty-product p { flex: 0 0 auto; }
.kty-product__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--kty-space-4);
  padding-top: var(--kty-space-4);
  border-top: 1px solid var(--kty-border);
}
.kty-product__price { font-family: var(--kty-font-data); font-variant-numeric: tabular-nums; color: var(--kty-text); }

/* Footer layout. */
.kty-footer__cols { display: flex; flex-wrap: wrap; gap: var(--kty-space-7); margin-top: var(--kty-space-5); }
.kty-footer__cols p { margin: 0 0 var(--kty-space-2); max-width: 46ch; }
.kty-footer__links { display: flex; flex-wrap: wrap; gap: var(--kty-space-5); }

/* kty-band.css sets `.kty-on-dark a` to Green Bright, which outranks the button
   colour on any button written as a link inside a dark block. Buttons keep their
   own text colour; the secondary variant already carries its own on-dark rule. */
.kty-on-dark a.kty-btn:not(.kty-btn--secondary),
.kty-on-dark a.kty-btn:not(.kty-btn--secondary):hover { color: var(--kty-white); }