@layer reset, tokens, frame, modules, states, utilities;

@layer modules {
  [data-ui="guide"], [data-ui="legal"], [data-ui="contact-page"] { background: var(--black); color: var(--white); }
  [data-ui="article-intro"] { max-inline-size: 1720px; margin-inline: auto; padding-block: 120px 96px; }
  [data-ui="article-intro"] p { max-inline-size: 70ch; font-size: 20px; }
  [data-ui="guide-body"] { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .8fr); gap: 64px; max-inline-size: 1720px; margin-inline: auto; padding-block: 0 140px; }
  [data-ui="guide-body"] > article { min-inline-size: 0; }
  [data-ui="guide-body"] > article > :where(h2, h3) { margin-block-start: 56px; }
  [data-ui="guide-body"] > article > :where(h2:first-child) { margin-block-start: 0; }
  [data-ui="guide-body"] > aside, [data-ui="guide-note"], [data-ui="legal-note"] { align-self: start; padding: 32px; border-block-start: 6px solid var(--yellow); background: var(--paper); color: var(--black); }
  [data-ui="guide-note"] h2, [data-ui="legal-note"] h2 { font-size: 32px; }
  [data-ui="guide-note"] ul, [data-ui="legal-note"] ul { padding-inline-start: 1.1em; }
  [data-ui="key-list"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-block: 32px; background: #777; }
  [data-ui="key-list"] div { min-block-size: 100%; padding: 24px; background: var(--paper); color: var(--black); }
  [data-ui="key-list"] dt { color: var(--red); font-weight: 700; }
  [data-ui="key-list"] dd { margin-block-start: 8px; }
  [data-ui="process"] { display: grid; gap: 18px; margin-block: 32px; padding-inline-start: 1.5em; }
  [data-ui="process"] li::marker { color: var(--yellow); font-weight: 700; }
  [data-ui="quote-line"] { margin-block: 32px; padding: 24px; border-inline-start: 6px solid var(--red); background: #292929; font-size: 22px; }
  disclosure-ledger { display: block; margin-block: 32px; border-block: 1px solid #666; }
  disclosure-ledger details { padding-block: 16px; border-block-end: 1px solid #666; }
  disclosure-ledger details:last-child { border-block-end: 0; }
  disclosure-ledger summary { display: flex; min-block-size: 44px; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; font-weight: 700; }
  disclosure-ledger summary::after { content: "+"; color: var(--yellow); font-size: 28px; }
  disclosure-ledger details[open] summary::after { content: "−"; }
  disclosure-ledger details > div { padding-block: 16px 8px; }
  [data-ui="long-table"] { inline-size: 100%; margin-block: 32px; font-size: 16px; }
  [data-ui="long-table"] :where(th, td) { padding: 16px; border-block-end: 1px solid #777; text-align: start; vertical-align: top; }
  [data-ui="long-table"] thead th { background: var(--yellow); color: var(--black); }
  [data-ui="long-table"] tbody th { background: #292929; }
  [data-ui="matrix"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-block: 32px; background: #777; }
  [data-ui="matrix"] article { min-block-size: 100%; padding: 24px; background: var(--paper); color: var(--black); }
  [data-ui="matrix"] article:nth-child(3n + 2) { background: var(--yellow); }
  [data-ui="matrix"] article:nth-child(3n) { background: var(--red); color: var(--white); }
  [data-ui="matrix"] h3 { font-size: 22px; }
  [data-ui="change-log"] { margin-block: 32px; padding: 20px; border-inline-start: 6px solid var(--yellow); background: #292929; }
  [data-ui="legal"] [data-ui="article-copy"] { max-inline-size: 1020px; margin-inline: auto; padding-block: 0 140px; }
  [data-ui="legal"] [data-ui="article-copy"] > :where(h2, h3) { margin-block-start: 56px; }
  [data-ui="legal"] [data-ui="article-copy"] > :where(h2:first-child) { margin-block-start: 0; }
  [data-ui="legal"] [data-ui="article-copy"] > :where(ul, ol) { padding-inline-start: 1.4em; }
  [data-ui="legal"] [data-ui="article-copy"] a { overflow-wrap: anywhere; }
  [data-ui="contact-addresses"] { display: grid; gap: 1px; margin-block: 32px; background: #777; }
  [data-ui="contact-addresses"] div { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.8fr); gap: 24px; padding: 20px; background: var(--paper); color: var(--black); }
  [data-ui="contact-addresses"] dt { color: var(--red); font-weight: 700; }
  [data-ui="contact-addresses"] dd { margin: 0; }
  [data-ui="form-status"] { margin-block-end: 24px; }
  [data-ui="form-layout"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block-start: 32px; }
  [data-ui="form-layout"] label { display: grid; gap: 8px; }
  [data-ui="form-layout"] label > span:first-child { font-weight: 700; }
  [data-ui="form-layout"] input:not([type="checkbox"]), [data-ui="form-layout"] select, [data-ui="form-layout"] textarea { inline-size: 100%; min-block-size: 56px; padding: 16px; border-color: var(--white); background: transparent; color: var(--white); }
  [data-ui="form-layout"] select option { color: var(--black); }
  [data-ui="form-layout"] textarea { min-block-size: 180px; resize: vertical; }
  [data-ui="check-row"] { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; grid-column: 1 / -1; align-items: start; }
  [data-ui="check-row"] input { inline-size: 20px; block-size: 20px; margin-block-start: 4px; accent-color: var(--yellow); }
  [data-ui="check-row"] label { display: block; }
  [data-ui="form-layout"] [data-ui="honeypot"] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-ui="reopen-consent"] { min-block-size: 54px; margin-block-start: 24px; padding: 10px 18px; border: 1px solid var(--black); background: var(--yellow); color: var(--black); }
}

@layer states {
  [data-ui="form-layout"] [data-ui="field-error"][hidden], [data-ui="contact-page"] [data-ui="delivery-error"][hidden] { display: none; }
  @media (max-width: 850px) {
    [data-ui="guide-body"] { grid-template-columns: 1fr; gap: 40px; }
    [data-ui="guide-body"] > aside { order: -1; }
    [data-ui="key-list"], [data-ui="matrix"] { grid-template-columns: 1fr; }
  }
  @media (max-width: 620px) {
    [data-ui="article-intro"] { padding-block: 72px 56px; }
    [data-ui="article-intro"] p { font-size: 17px; }
    [data-ui="form-layout"] { grid-template-columns: 1fr; }
    [data-ui="check-row"] { grid-column: auto; }
    [data-ui="long-table"], [data-ui="long-table"] tbody, [data-ui="long-table"] tr, [data-ui="long-table"] th, [data-ui="long-table"] td { display: block; inline-size: 100%; }
    [data-ui="long-table"] thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    [data-ui="long-table"] tr { margin-block: 24px; border: 1px solid #777; }
    [data-ui="long-table"] tbody td { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.6fr); gap: 12px; }
    [data-ui="long-table"] tbody td::before { content: attr(data-label); color: var(--yellow); font-size: 13px; font-weight: 700; text-transform: uppercase; }
    [data-ui="contact-addresses"] div { grid-template-columns: 1fr; gap: 8px; }
  }
}