/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/*
 * House system: a technical manual. Graphite field, ivory ink, one brass
 * accent, hairline rules. Token contract lives in DIRECTION.md.
 */
:root {
  color-scheme: dark;

  /* brand: brass is the only accent */
  --brand-1: #c8a35a;
  --brand-2: #dcbd7c;
  --brand-3: #e9d3a3;
  --brand-soft: rgb(200 163 90 / 12%);
  --brand-border: rgb(200 163 90 / 35%);

  /* field and plates */
  --background-color: #17181a;
  --surface-color: #1f2124;
  --surface-elevated: #25282c;
  --code-bg: #121315;

  /* ink. --text-faint is 56% (not 48%) so labels clear 4.5:1 on every plate */
  --text-color: #ece6d8;
  --text-muted: rgb(236 230 216 / 72%);
  --text-faint: rgb(236 230 216 / 56%);

  /* legacy compatibility (boilerplate blocks expect these) */
  --light-color: var(--surface-color);
  --dark-color: var(--surface-elevated);
  --link-color: var(--brand-1);
  --link-hover-color: var(--brand-2);

  /* rules */
  --border-color: rgb(236 230 216 / 16%);
  --divider-color: rgb(236 230 216 / 9%);
  --rule: 1px solid var(--border-color);
  --focus-ring: 2px solid var(--brand-1);

  /* fonts: Plex with metric-matched local fallbacks (styles/fonts.css) */
  --heading-font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans Condensed Fallback', 'IBM Plex Sans Condensed Fallback Wide', 'Arial Narrow', sans-serif;
  --body-font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', arial, sans-serif;
  --mono-font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, menlo, consolas, monospace;

  /* body sizes */
  --body-font-size-m: 1.0625rem;
  --body-font-size-s: 0.9375rem;
  --body-font-size-xs: 0.8125rem;
  --label-font-size: 0.75rem;
  --label-tracking: 0.12em;

  /* heading sizes: condensed display can be set large */
  --heading-font-size-xxl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --heading-font-size-xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
  --heading-font-size-l: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --heading-font-size-m: 1.5rem;
  --heading-font-size-s: 1.25rem;
  --heading-font-size-xs: 1.125rem;

  /* layout */
  --nav-height: 64px;
  --gutter: 24px;
  --content-max: 1200px;
  --section-space: clamp(3rem, 2rem + 4vw, 6rem);
}

@media (width >= 900px) {
  :root {
    --body-font-size-m: 1rem;
    --body-font-size-s: 0.875rem;
    --gutter: 32px;
  }
}

html {
  scrollbar-color: var(--border-color) var(--background-color);
}

body {
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  block-size: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

/* type */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0.8em 0.3em;
  font-family: var(--heading-font-family);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
  scroll-margin-block-start: calc(var(--nav-height) + 1rem);
  color: var(--text-color);
}

h1 {
  font-size: var(--heading-font-size-xxl);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-block: 0.8em 0.3em;
}

strong,
b {
  font-weight: 600;
}

hr {
  margin-block: 2em;
  border: 0;
  border-block-start: var(--rule);
}

/* callouts are margin notes, not tinted boxes */
blockquote {
  margin-inline: 0;
  border-inline-start: 2px solid var(--brand-1);
  padding-block: 0.25em;
  padding-inline: 1.25rem 0;
  color: var(--text-muted);
}

code,
pre,
kbd,
samp {
  font-family: var(--mono-font-family);
  font-size: var(--body-font-size-s);
}

:not(pre) > code {
  border: 1px solid var(--divider-color);
  padding: 0.05em 0.35em;
  background-color: var(--surface-color);
  color: var(--text-color);
  font-size: 0.875em;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
}

pre {
  border: var(--rule);
  padding: 1rem 1.25rem;
  background-color: var(--code-bg);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.55;
  color: var(--text-color);
}

pre code {
  font-size: inherit;
}

:is(h1, h2, h3, h4, h5, h6) > code {
  border: 0;
  padding: 0;
  background: none;
  font-size: 0.85em;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links: brass with an offset underline */
a:any-link {
  color: var(--link-color);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--brand-border);
  text-underline-offset: 0.22em;
  overflow-wrap: break-word;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration-color: currentcolor;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

::selection {
  background: var(--brand-1);
  color: var(--background-color);
}

/* mono uppercase label: section kickers, figure numbers, spec captions */
.kicker {
  display: block;
  margin-block: 0 0.75rem;
  font-family: var(--mono-font-family);
  font-size: var(--label-font-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brand-3);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  transform: translateY(-160%);
  border: 1px solid var(--brand-1);
  padding: 8px 12px;
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--mono-font-family);
  font-size: var(--label-font-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* buttons: primary is a brass-outlined plate, secondary is an arrowed text link */
p.button-wrapper {
  margin-block: 12px;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  max-inline-size: 100%;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.85em 1.4em;
  background: transparent;
  font-family: var(--mono-font-family);
  font-size: var(--body-font-size-xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

a.button.primary,
button.button.primary {
  border-color: var(--brand-1);
  color: var(--brand-3);
}

a.button.primary:hover,
button.button.primary:hover {
  background-color: var(--brand-soft);
  color: var(--brand-3);
}

a.button.accent,
button.button.accent {
  border-color: var(--brand-1);
  background-color: var(--brand-1);
  color: var(--background-color);
}

a.button.accent:hover,
button.button.accent:hover {
  border-color: var(--brand-2);
  background-color: var(--brand-2);
  color: var(--background-color);
}

a.button.secondary,
button.button.secondary {
  padding-inline: 0;
  color: var(--text-color);
}

a.button.secondary::after,
button.button.secondary::after {
  content: '';
  flex: none;
  inline-size: 1.25em;
  block-size: 0.75em;
  background-color: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 0.15s ease;
}

a.button.secondary:hover,
button.button.secondary:hover {
  color: var(--brand-2);
}

a.button.secondary:hover::after,
button.button.secondary:hover::after {
  translate: 4px 0;
}

main img {
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
}

.icon {
  display: inline-block;
  block-size: 24px;
  inline-size: 24px;
}

.icon img {
  block-size: 100%;
  inline-size: 100%;
}

/* sections own the page rhythm */
main > .section {
  margin-block: var(--section-space);
}

main > .section > div {
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main > .section:first-of-type {
  margin-block-start: 0;
}

/* prose: chapters are separated by a hairline */
main .default-content-wrapper > h2 {
  margin-block-start: 1.6em;
  border-block-start: var(--rule);
  padding-block-start: 0.6em;
}

main .default-content-wrapper > :first-child {
  margin-block-start: 0;
}

main .default-content-wrapper > .kicker + h2 {
  margin-block-start: 0;
}

/* doc-page layout: left rail + content + right rail */
html.docs-page {
  --section-space: clamp(2rem, 1.5rem + 2vw, 3rem);
}

html.docs-page main {
  padding-block-start: var(--section-space);
  counter-reset: chapter;
}

html.docs-page main .default-content-wrapper > h2 {
  counter-increment: chapter;
}

html.docs-page main .default-content-wrapper > h2::before {
  content: counter(chapter, decimal-leading-zero) / '';
  display: block;
  margin-block-end: 0.5rem;
  font-family: var(--mono-font-family);
  font-size: var(--label-font-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  color: var(--brand-1);
}

@media (width >= 1024px) {
  html.docs-page main {
    padding-inline-start: 280px;
  }

  html.docs-page main > .section > div {
    max-inline-size: 880px;
  }
}

@media (width >= 1280px) {
  html.docs-page main {
    padding-inline-end: 240px;
  }

  html.docs-page main > .section > div {
    max-inline-size: 760px;
  }
}

/* Reserve authored visual space before lazy block decoration to prevent CLS. */
main .flow-graph {
  min-block-size: 240px;
}

main .mermaid.sequence {
  min-block-size: 170px;
}

main .mermaid.state {
  min-block-size: 400px;
}

main .mermaid.wide {
  min-block-size: 190px;
}

main .picture.system-map {
  inline-size: min(100%, 800px);
  aspect-ratio: 1600 / 1320;
  margin-inline: auto;
}

main .picture.landscape {
  inline-size: min(100%, 800px);
  aspect-ratio: 7 / 4;
  margin-inline: auto;
}

@media (width >= 900px) {
  main .flow-graph {
    min-block-size: 420px;
  }

  main .mermaid.sequence {
    min-block-size: 300px;
  }
}

/* section metadata */
main .section.light,
main .section.highlight {
  margin-block: 0;
  border-block: var(--rule);
  padding-block: var(--section-space);
  background-color: var(--surface-color);
}

/*
 * Section style: manual-hero. Default content (kicker, H1, lede, CTAs) on the
 * left, the exploded-commit figure on the right from 900px; stacked below.
 * The section owns height and the gap between its two regions.
 */
main > .section.manual-hero {
  box-sizing: border-box;
  display: grid;
  align-content: start;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  max-inline-size: calc(var(--content-max) + 2 * var(--gutter));
  min-block-size: calc(100svh - var(--nav-height));
  margin-block: 0 var(--section-space);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 1rem + 8vh, 7rem) clamp(2rem, 1rem + 4vw, 4.5rem);
  padding-inline: var(--gutter);
}

/*
 * The first section paints before its blocks decorate (LCP). Rows are
 * top-aligned so the text never moves when the figure replaces the raw rows,
 * and the figure's region stays hidden until the block's first settled layout.
 * Never in Canvas: authors always see the block, whatever the editor does.
 */
html:not([quick-edit]) main > .section.manual-hero > .exploded-commit-wrapper:not(:has(> .is-ready)) {
  visibility: hidden;
}

main > .section.manual-hero > div {
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

main > .section.manual-hero :is(.default-content-wrapper, .prosemirror-editor, [class~='ProseMirror']) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2rem;
}

main > .section.manual-hero :is(.default-content-wrapper, .prosemirror-editor, [class~='ProseMirror']) > * {
  flex: 1 0 100%;
}

main > .section.manual-hero :is(.default-content-wrapper, .prosemirror-editor, [class~='ProseMirror']) > .button-wrapper {
  flex: 0 0 auto;
  margin-block: 1.5rem 0;
}

main > .section.manual-hero :is(.default-content-wrapper, .prosemirror-editor, [class~='ProseMirror']) > p:has(+ h1) {
  margin-block: 0 1.25rem;
  font-family: var(--mono-font-family);
  font-size: var(--label-font-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brand-3);
}

main > .section.manual-hero h1 {
  margin-block: 0 1.5rem;
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4rem);
}

main > .section.manual-hero :is(.default-content-wrapper, .prosemirror-editor, [class~='ProseMirror']) > h1 + p {
  max-inline-size: 38rem;
  margin-block: 0;
  color: var(--text-muted);
}

@media (width >= 900px) {
  main > .section.manual-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }

  main > .section.manual-hero > .exploded-commit-wrapper {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}