/* Copyright 2026 Automate the Cloud Inc.
   SPDX-License-Identifier: Apache-2.0 */

/* The one stylesheet for every page. build-docs.py copies it to
   source/assets/css/site.css and links it with a content hash, so a changed
   file is never served stale from a browser cache.

   Layout and components only. Every color, size, and radius comes from
   tokens.css, which also sets the base typography. Never write a raw hex
   value here: dark mode is a separate set of token values, not an inversion,
   and a hardcoded color breaks it silently. */

/* One column everything shares, up to 1120px. Text fills it, as headings,
   cards and lists do. That is a deliberate choice (October 22, 2026): an
   earlier version capped paragraphs at about 70 characters a line, and it was
   taken out because the text looked too narrow in the wider frame. Phones get
   24px side margins; wide screens 32px. */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--atc-space-5); }
@media (min-width: 900px) { .wrap { padding: 0 var(--atc-space-6); } }

/* Skip link: WCAG 2.4.1. Off-screen until focused. */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--atc-space-5); top: var(--atc-space-3); z-index: 10;
              background: var(--atc-action); color: var(--atc-on-action);
              font-family: var(--atc-font-mono); font-size: 14px;
              padding: 8px 12px; border-radius: var(--atc-radius-sm); }

/* ------------------------------------------------------------------ header */
/* Two rows on a phone (logo and theme button, then the menu), one row from
   720px. A grid rather than flex-wrap, so the theme button stays beside the
   logo instead of wrapping onto a line of its own. */
.site-head { display: grid; grid-template-columns: minmax(0, 1fr) auto;
             grid-template-areas: "brand theme" "nav nav";
             align-items: center; column-gap: var(--atc-space-4);
             row-gap: var(--atc-space-3);
             padding: var(--atc-space-5) 0 var(--atc-space-4);
             border-bottom: 1px solid var(--atc-line); }
.brand { grid-area: brand; justify-self: start; }
.brand img { height: 30px; }                        /* lockup minimum is 24px */
.brand .logo-light { display: block; }
.brand .logo-dark  { display: none; }
.primary { grid-area: nav; }
.site-head .theme { grid-area: theme; }
/* At 320px the 30px lockup is 236px wide, which with the button overflows
   the 272px column. 24px is the lockup's minimum size. */
@media (max-width: 400px) { .brand img { height: 24px; } }
@media (min-width: 720px) {
  .site-head { grid-template-columns: auto minmax(0, 1fr) auto;
               grid-template-areas: "brand nav theme";
               padding-bottom: var(--atc-space-5); }
  .primary ul { justify-content: flex-end; }
}

/* The menu. Plex Mono 14px, slate, with the current section in ink: the
   brand kit's header recipe. The current item also gets an underline in the
   action color, so the state is never carried by color alone (1.4.1). That
   bar is 6.2:1 against the page in light mode and 9.5:1 in dark, over the 3:1
   that 1.4.11 asks for. Items wrap rather than scroll when text is enlarged
   or spaced out (1.4.10, 1.4.12). */
.primary ul { display: flex; flex-wrap: wrap; list-style: none;
              gap: var(--atc-space-1) var(--atc-space-5);
              margin: 0; padding: 0; }
.primary a { display: inline-block; padding: 6px 0;
             font-family: var(--atc-font-mono); font-size: 14px;
             color: var(--atc-slate); text-decoration: none;
             border-bottom: 2px solid transparent; }
.primary a:hover { color: var(--atc-ink); }
.primary a[aria-current] { color: var(--atc-ink);
                           border-bottom-color: var(--atc-action); }

/* Icon-only control. No border, so the icon itself is the thing that
   identifies it: --atc-slate measures 5.44:1, over the 3:1 WCAG 1.4.11 asks
   for a graphical object. 32px square clears the 24px target minimum. */
.theme { display: inline-flex; align-items: center; justify-content: center;
         width: 32px; height: 32px; padding: 0; flex: none;
         background: none; border: 0; border-radius: var(--atc-radius-sm);
         color: var(--atc-slate); cursor: pointer; }
.theme:hover { color: var(--atc-ink); background: var(--atc-tint); }
.theme .ic { width: 18px; height: 18px; display: block; }
/* An author `display` declaration beats the UA rule for [hidden], so the
   hidden icon needs this or both render at once. */
.theme .ic[hidden] { display: none; }
/* The same applies to the button itself: .theme sets display, so without
   this the button would show, dead, when script is off. */
.theme[hidden] { display: none; }

/* Tooltip. No transition or delay: it is there the moment you hover. */
.theme { position: relative; }
.theme::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: var(--atc-ink); color: var(--atc-surface);
  font-family: var(--atc-font-mono); font-size: 12px; line-height: 1.35;
  letter-spacing: 0; padding: 6px 9px; border-radius: var(--atc-radius-sm);
  white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden;
}
/* The little arrow. */
.theme::before {
  content: ""; position: absolute; top: calc(100% + 1px); right: 11px;
  z-index: 21; border: 3px solid transparent;
  border-bottom-color: var(--atc-ink);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.theme:hover::after, .theme:hover::before,
.theme:focus-visible::after, .theme:focus-visible::before {
  opacity: 1; visibility: visible;
}
.theme.tip-off::after, .theme.tip-off::before {
  opacity: 0; visibility: hidden;
}

/* ------------------------------------------------------------- breadcrumbs */
/* Ancestors only; the page's own h1 names where you are. The separators are
   aria-hidden spans rather than CSS content, which some screen readers
   announce. */
.doc .crumbs ol, .crumbs ol { display: flex; flex-wrap: wrap; list-style: none;
             gap: 0 var(--atc-space-2); margin: 0 0 var(--atc-space-4);
             padding: 0; font-family: var(--atc-font-mono); font-size: 13.5px;
             line-height: 1.5; }
.doc .crumbs li { margin: 0; }
.crumbs a { color: var(--atc-action); }
.crumbs .sep { color: var(--atc-slate); margin-left: var(--atc-space-2); }

/* -------------------------------------------------------------- components */
/* Recipes from the brand kit. tokens.css applies the base type system but does
   not ship these. */
.btn { display: inline-block; text-decoration: none;
       background: var(--atc-action); color: var(--atc-on-action);
       font-family: var(--atc-font-mono); font-weight: 500; font-size: 14px;
       padding: 11px 17px; border: 2px solid var(--atc-action);
       border-radius: var(--atc-radius-md); }
/* The kit recipe uses --atc-line-strong here, but at 1.68:1 against the
   surface that border is the button's only boundary and fails WCAG 1.4.11
   (3:1 for UI components). --atc-slate measures 5.44:1. */
.btn-secondary { background: none; color: var(--atc-ink);
                 border-color: var(--atc-slate); }
.badge { display: inline-block;
         background: var(--atc-tint); color: var(--atc-tint-text);
         font-family: var(--atc-font-mono); font-size: 11.5px; font-weight: 500;
         padding: 4px 8px; border-radius: var(--atc-radius-sm); }

.cards { display: grid; grid-template-columns: 1fr; gap: var(--atc-space-4);
         list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
/* Project cards: as many 15rem-or-wider columns as fit, so four projects sit
   four across on a wide screen, two by two on a tablet, and one per row on a
   phone, without leaving one card alone on a row. */
.cards.projects { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
/* Inside a prose page the .doc list and paragraph sizes would otherwise
   win. */
.doc .cards { padding: 0; margin: var(--atc-space-5) 0 0; font-size: inherit; }
.doc .cards > li { margin: 0; }
.doc .card p { font-size: 16px; line-height: 1.55; margin: 0; }
.card { background: var(--atc-card); border: 1px solid var(--atc-line);
        border-radius: var(--atc-radius-lg); padding: var(--atc-space-5); }
.card h2, .card h3, .doc .card h2 { font-size: var(--atc-size-h4);
                     margin: var(--atc-space-3) 0 var(--atc-space-2);
                     padding: 0; border: 0; }
.card p { margin: 0; color: var(--atc-slate); font-size: 16px; line-height: 1.55; }
.card p + p { margin-top: var(--atc-space-3); }
/* A card whose heading is a link: underlined, so it reads as a link without
   relying on color. */
.card h2 a, .card h3 a { color: var(--atc-ink); text-decoration: underline;
                         text-decoration-color: var(--atc-action);
                         text-underline-offset: 3px; }
.card h2 a:hover, .card h3 a:hover { color: var(--atc-action); }

/* ------------------------------------------------------------------ prose */
.doc { padding: var(--atc-space-7) 0 var(--atc-space-8); }
.doc h1 { font-size: clamp(32px, 5vw, var(--atc-size-display));
          margin: 0 0 var(--atc-space-3);
          overflow-wrap: break-word; hyphens: auto; }
.doc h2 { font-size: var(--atc-size-h3); margin: var(--atc-space-7) 0 var(--atc-space-4);
          padding-top: var(--atc-space-5); border-top: 1px solid var(--atc-line);
          scroll-margin-top: var(--atc-space-5); }
.doc h3 { font-size: var(--atc-size-h4); margin: var(--atc-space-6) 0 var(--atc-space-3);
          scroll-margin-top: var(--atc-space-5); }
.doc p, .doc ol, .doc ul, .doc dl { font-size: 20px; line-height: 1.65;
                                    margin: 0 0 var(--atc-space-4); }
.doc ol, .doc ul { padding-left: var(--atc-space-5); }
.doc li { margin-bottom: var(--atc-space-2); }
.doc blockquote { font-size: 18px; }
/* WCAG 1.4.1: a link inside a block of text cannot rely on color alone.
   Action teal measures only 2.75:1 against body ink in light mode and 1.66:1
   in dark, well under the 3:1 that would let color carry it, so prose links
   are underlined. Standalone navigation links are not in a block of text and
   keep the cleaner treatment. */
.doc p a, .doc li a, .doc td a, .doc dd a { text-decoration: underline; }
.doc .meta { font-family: var(--atc-font-mono); font-size: 14px;
             color: var(--atc-slate); margin: 0 0 var(--atc-space-6); }
.doc .lede { font-size: 22px; line-height: 1.6; }

/* Facts as a definition list: label above value on a phone, side by side
   from 620px. */
.doc .facts-list { display: grid; grid-template-columns: 1fr; gap: 0;
                   font-size: 18px; }
.doc .facts-list dt { font-family: var(--atc-font-mono); font-size: 13.5px;
                      color: var(--atc-slate); margin-top: var(--atc-space-3); }
.doc .facts-list dd { margin: 0; }
@media (min-width: 620px) {
  .doc .facts-list { grid-template-columns: 14rem 1fr; gap: var(--atc-space-3) var(--atc-space-4); }
  .doc .facts-list dt { margin-top: 0; padding-top: 3px; }
}

/* Code. The brand kit's recipe: ink background, surface text, which is 17:1
   in both themes because both tokens swap together. A block wider than the
   column scrolls inside itself; code needs its lines intact, which 1.4.10
   allows. tabindex="0" in the markup lets a keyboard user scroll it. */
/* Inline code is often one long token (a package name, a module path) that
   would push a 320px page sideways. Let it break anywhere. */
.doc :not(pre) > code { overflow-wrap: anywhere; }
.doc pre { background: var(--atc-ink); color: var(--atc-surface);
           font-family: var(--atc-font-mono); font-size: 14px; line-height: 1.6;
           border-radius: var(--atc-radius-md); padding: var(--atc-space-4);
           margin: 0 0 var(--atc-space-5); overflow-x: auto; }
.doc pre:focus-visible { outline: 2px solid var(--atc-action); outline-offset: 2px; }
.doc pre code { font-size: inherit; background: none; color: inherit; padding: 0; }

/* Verbatim license text. pre-wrap, not a scroll container: the canonical
   license files are hard-wrapped at 77 characters and the permission notice
   is one line per paragraph, so both reflow on a phone without ever
   scrolling sideways.
   overflow-wrap: anywhere matters here. pre-wrap only breaks at whitespace,
   and these texts contain unbreakable runs (the CC BY-NC file has a
   71-character "=====" separator) which pushed the page into horizontal
   scrolling at 320px. This changes only where lines visually break; the text
   is byte-for-byte the canonical file either way. */
.doc pre.license-text { white-space: pre-wrap; overflow-wrap: anywhere;
                        overflow-x: visible;
                        font-size: 13px; line-height: 1.6; color: var(--atc-ink);
                        background: var(--atc-card); border: 1px solid var(--atc-line);
                        border-radius: var(--atc-radius-md); padding: var(--atc-space-5);
                        margin: 0 0 var(--atc-space-5); }
.plain, .notice { background: var(--atc-tint); color: var(--atc-tint-text);
                  border-radius: var(--atc-radius-lg); padding: var(--atc-space-5);
                  margin: 0 0 var(--atc-space-6); }
.plain p { margin: 0; font-size: 16px; line-height: 1.6; }
.notice p { margin: 0; font-size: 15px; line-height: 1.6; }
.plain p + p, .notice p + p { margin-top: var(--atc-space-3); }
.plain strong, .notice strong { font-family: var(--atc-font-mono); font-weight: 500; }
.plain a, .notice a { color: var(--atc-tint-text); }

.table-wrap { overflow-x: auto; margin: 0 0 var(--atc-space-5); }
.table-wrap:focus-visible { outline: 2px solid var(--atc-action); outline-offset: 2px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 16px; }
.doc th, .doc td { white-space: normal; min-width: 7rem; }
.doc th { background: var(--atc-tint); color: var(--atc-tint-text);
          font-family: var(--atc-font-mono); font-weight: 500; text-align: left;
          padding: var(--atc-space-2) var(--atc-space-3); }
.doc td { padding: var(--atc-space-2) var(--atc-space-3);
          border-bottom: 1px solid var(--atc-line); vertical-align: top; }

.toc { border: 1px solid var(--atc-line); border-radius: var(--atc-radius-lg);
       padding: var(--atc-space-5); margin: 0 0 var(--atc-space-7); }
.doc .toc h2 { font-size: var(--atc-size-h4); margin: 0 0 var(--atc-space-4);
               padding-top: 0; border-top: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.toc li { margin-bottom: var(--atc-space-2); break-inside: avoid; }
.toc a { display: flex; gap: var(--atc-space-3); text-decoration: none;
         color: var(--atc-ink); line-height: 1.5; }
.toc a:hover span:last-child { text-decoration: underline; }
.toc .num { font-family: var(--atc-font-mono); font-weight: 500;
            color: var(--atc-action); min-width: 3.5ch; flex: none; }
@media (min-width: 720px) { .toc ol { columns: 2; column-gap: var(--atc-space-6); } }

/* A list of links with a title and a line of description: the governance
   index, the module list, the posts on Learn. */
.index h2 { font-size: var(--atc-size-h4); margin: var(--atc-space-7) 0 var(--atc-space-4);
            padding-top: var(--atc-space-5); border-top: 1px solid var(--atc-line); }
.index ul.links { list-style: none; margin: 0 0 var(--atc-space-4); padding: 0; }
.index ul.links li { border-bottom: 1px solid var(--atc-line); margin: 0; }
.index ul.links li:last-child { border-bottom: 0; }
.index ul.links > li > a { display: block; text-decoration: none; color: var(--atc-ink);
                    padding: var(--atc-space-4) 0; }
.index .t { font-family: var(--atc-font-mono); font-weight: 500; font-size: 17px;
            display: block; margin-bottom: 4px; overflow-wrap: anywhere; }
.index .d { display: block; color: var(--atc-slate); font-size: 16px; line-height: 1.5; }
.index ul.links > li > a:hover .t { text-decoration: underline; color: var(--atc-action); }
/* A module: its Registry name is the main link, and the GitHub repository is
   a second, separate link, so the item is not one big anchor. */
.index ul.links li.module { padding: var(--atc-space-4) 0; }
.index li.module .t a { color: var(--atc-ink); text-decoration: none; }
.index li.module .t a:hover { color: var(--atc-action); text-decoration: underline; }
.index li.module .src { display: block; margin-top: 4px; font-family: var(--atc-font-mono);
                        font-size: 13.5px; }
.index li.module .src a { color: var(--atc-action); text-decoration: underline; }

/* A project's own logo, above its page title. Each variant is sized by its
   width attribute and scales down on a narrow screen. Dark variants follow
   the same rules as the header logo, so they track the theme button as well
   as the device setting. Below 560px a project may switch to a smaller
   variant, as the BAMF kit asks for its subtitle lockup under 480px. */
.project-logo { margin: 0 0 var(--atc-space-5); }
.project-logo > span { display: block; }
.project-logo img { display: block; max-width: 100%; height: auto; }
.project-logo .pl-dark { display: none; }
.project-logo .pl-narrow { display: none; }
@media (max-width: 560px) {
  .project-logo .pl-wide { display: none; }
  .project-logo .pl-narrow { display: block; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .project-logo .pl-light { display: none; }
  :root:not([data-theme="light"]) .project-logo .pl-dark  { display: block; }
}
[data-theme="dark"] .project-logo .pl-light { display: none; }
[data-theme="dark"] .project-logo .pl-dark  { display: block; }

/* Status pill, from the brand kit: a border and text in one color, and
   always a word as well as the color. */
.status { display: inline-block; font-family: var(--atc-font-mono);
          font-size: 12px; font-weight: 500; letter-spacing: var(--atc-track-label);
          text-transform: uppercase; line-height: 1.4;
          padding: 2px 9px; border: 1px solid currentColor;
          border-radius: var(--atc-radius-pill); color: var(--atc-tint-text);
          background: var(--atc-tint); }

/* The closing license line on an article. The playbook requires it: it is
   what places the article under the additional permission. */
.license-line { margin-top: var(--atc-space-7); padding-top: var(--atc-space-5);
                border-top: 1px solid var(--atc-line); }
.doc .license-line p { font-size: 15px; line-height: 1.6; color: var(--atc-slate); }

/* ------------------------------------------------------------- home page */
.hero { padding: var(--atc-space-8) 0 var(--atc-space-7); }
.hero h1 { font-size: clamp(32px, 6vw, var(--atc-size-display)); margin: 0 0 var(--atc-space-4);
           overflow-wrap: break-word; hyphens: auto; }
.hero .lede { font-size: 22px; line-height: 1.6; margin: 0; }

.facts { list-style: disc; margin: var(--atc-space-5) 0 0;
         padding-left: var(--atc-space-4);
         font-family: var(--atc-font-mono); font-size: 13.5px;
         color: var(--atc-slate); line-height: 1.7; }
.facts li::marker { color: var(--atc-action); }

.band { border-top: 1px solid var(--atc-line);
        padding: var(--atc-space-7) 0 var(--atc-space-8); }
.band > h2 { font-size: var(--atc-size-h3); margin: 0 0 var(--atc-space-3); }
.band > p { margin: 0 0 var(--atc-space-5); font-size: 18px; line-height: 1.6;
            color: var(--atc-slate); }
.band > p a { color: var(--atc-action); text-decoration: underline; }
.band .btn { margin-top: var(--atc-space-2); }
.band .addr { font-family: var(--atc-font-mono); font-size: 14px;
              margin: var(--atc-space-4) 0 0; }

.principle { padding: 0 0 var(--atc-space-8); }
.principle blockquote { margin: 0; }

/* ------------------------------------------------------------------ footer */
footer { border-top: 1px solid var(--atc-line);
         padding: var(--atc-space-6) 0 var(--atc-space-7);
         color: var(--atc-slate); }
.foot-grid { display: grid; gap: var(--atc-space-6);
             grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--atc-space-5); }
}
@media (min-width: 1000px) {
  .foot-grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
}
.foot-col h2 { font-family: var(--atc-font-mono); font-size: 12px;
               font-weight: 500; letter-spacing: var(--atc-track-label);
               text-transform: uppercase; color: var(--atc-ink);
               margin: 0 0 var(--atc-space-3); padding: 0; border: 0; }
.foot-col ul { list-style: none; margin: 0; padding: 0; font-size: 14px;
               line-height: 1.6; }
.foot-col li { margin-bottom: 6px; }
.foot-col a { color: var(--atc-action); text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }
.foot-col .ext { display: inline-flex; align-items: center; gap: 8px;
                vertical-align: top; }
.foot-col .ext-ic { width: 16px; height: 16px; flex: none; }
.foot-col .legal { font-family: var(--atc-font-mono); font-size: 12.5px;
                   font-variant-numeric: tabular-nums; }
.foot-base { border-top: 1px solid var(--atc-line);
             margin: var(--atc-space-6) 0 0; padding-top: var(--atc-space-4);
             font-size: 14px; line-height: 1.6; }
.foot-base a { color: var(--atc-action); }

/* ----------------------------------------------------------- small screens */
@media (max-width: 620px) {
  .doc p, .doc ol, .doc ul, .doc dl { font-size: 17px; }
  .hero .lede, .doc .lede { font-size: 19px; }
}

/* ------------------------------------------------------------- dark logos */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark  { display: block; }
}
[data-theme="dark"] .brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-dark  { display: block; }