/* The site's Machine Age look, shared by every renderer: ivory enamel,
   green enamel and brass; Josefin Sans capitals over Source Serif. Pages
   link this and build on its tokens, and load the two fonts themselves.
   Dark tokens apply only
   where the page opts in with <html class="ma-dark">, because older app
   styles still assume a light ground. */

:root {
  --ground: #f4efe4; --panel: #fbf8f1; --strip: #efe7d6;
  --ink: #1d211f; --muted: #5b584f; --faint: #8f8a7c;
  --green: #1f5a4e; --rust: #8e3a26; --gold: #84652c;
  --rule: #d9cfba; --rule-strong: #1f4a42;
  /* brass for lines and ornament; brass-ink where it carries text */
  --brass: #b08d4a; --brass-ink: #7d5f27;
  /* the enamel of the header and the console */
  --enamel: #1f4a42; --on-enamel: #f1e9d6; --on-enamel-muted: #b9c4b5;
  --display: "Josefin Sans", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --serif: "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: var(--serif);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --focus: var(--brass);
  /* chart marks: world model, behind, baseline, rule */
  --wm: #1f6b5a; --lag: #9a3f28; --base: #a8a090; --track: #e3dac7;
  /* the works seen against the sky: a tone a step down from the ground */
  --silhouette: #e1d6bf;
  /* shapes, drawn once and filled with whatever colour wears them */
  --mask-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48'%3E%3Cpath d='M0 48V30l24-12v12l24-12v12l24-12v12l24-12V48zM102 48V6h2V2h8v4h2v42zM120 48V32h8v-8h8v-8h22v8h8v8h8v16zM180 48V18h1v-3h6v3h1v30zM192 48V34h22v-6h26v20z'/%3E%3C/svg%3E");
  --mask-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10.5' y='1' width='3' height='5' transform='rotate%280 12 12%29'/%3E%3Crect x='10.5' y='1' width='3' height='5' transform='rotate%2845 12 12%29'/%3E%3Crect x='10.5' y='1' width='3' height='5' transform='rotate%2890 12 12%29'/%3E%3Crect x='10.5' y='1' width='3' height='5' transform='rotate%28135 12 12%29'/%3E%3Crect x='10.5' y='1' width='3' height='5' transform='rotate%28180 12 12%29'/%3E%3Crect x='10.5' y='1' width='3' height='5' transform='rotate%28225 12 12%29'/%3E%3Crect x='10.5' y='1' width='3' height='5' transform='rotate%28270 12 12%29'/%3E%3Crect x='10.5' y='1' width='3' height='5' transform='rotate%28315 12 12%29'/%3E%3Ccircle cx='12' cy='12' r='6.5' fill='none' stroke='black' stroke-width='3'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  --mask-cornice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10'%3E%3Cpath d='M0 10V7h8V4h8V0h16v4h8v3h8v3z'/%3E%3C/svg%3E");
  /* a stepped rule: three brass lines, each shorter than the last */
  --stepped: linear-gradient(var(--brass), var(--brass)) 0 0 / 96px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) 0 4px / 64px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) 0 8px / 32px 1px no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root.ma-dark:not([data-theme="light"]) {
    --ground: #131719; --panel: #1a2023; --strip: #20282b;
    --ink: #ebe3d0; --muted: #aaa392; --faint: #767163;
    --green: #86c4b1; --rust: #e08a6c; --gold: #d4b170;
    --rule: #2f3634; --rule-strong: #86c4b1;
    --brass: #b8945a; --brass-ink: #d4b170;
    --enamel: #10302a; --on-enamel: #efe6d1; --on-enamel-muted: #9fb3aa;
    --wm: #5fb59b; --lag: #e08a6c; --base: #6b6d66; --track: #2a3133;
    --silhouette: #1d2528;
  }
}
:root.ma-dark[data-theme="dark"] {
  --ground: #131719; --panel: #1a2023; --strip: #20282b;
  --ink: #ebe3d0; --muted: #aaa392; --faint: #767163;
  --green: #86c4b1; --rust: #e08a6c; --gold: #d4b170;
  --rule: #2f3634; --rule-strong: #86c4b1;
  --brass: #b8945a; --brass-ink: #d4b170;
  --enamel: #10302a; --on-enamel: #efe6d1; --on-enamel-muted: #9fb3aa;
  --wm: #5fb59b; --lag: #e08a6c; --base: #6b6d66; --track: #2a3133;
  --silhouette: #1d2528;
}

/* The site toolbar (functions/_lib/site-toolbar.js): a band of green
   enamel edged in a double brass line, the same on every page.
   .company-header shares it because two Company at Work pages are pinned
   by digest and cannot change their markup. Three columns: the brand, the
   menu centred, and page controls (sign-in) at the end. The side columns
   are equal, so the menu stays put from page to page. */
.site-toolbar, .company-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 24px;
  margin: 0 0 4px; padding: 15px 20px 13px;
  background: var(--enamel); color: var(--on-enamel);
  font-family: var(--display); font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 1px solid var(--brass); box-shadow: 0 3px 0 var(--ground), 0 4px 0 var(--brass);
  -webkit-font-smoothing: antialiased;
}
.site-toolbar *, .company-header * { box-sizing: border-box; }
/* Page sheets that style every <header> or "header a" must not reach in. */
.site-toolbar { height: auto; min-height: 0; max-width: none; width: auto; }
.site-toolbar a, .site-toolbar nav { font-size: inherit; line-height: inherit; }
.site-toolbar > a:first-child, .company-header > a:first-child { display: inline-flex; gap: 10px; align-items: center; justify-self: start; color: var(--on-enamel); text-decoration: none; letter-spacing: 0.24em; white-space: nowrap; }
.site-toolbar > a:first-child img, .company-header > a:first-child img { display: block; height: 22px; width: auto; filter: invert(1) sepia(0.4) brightness(1.1); }
.site-toolbar nav, .company-header nav { grid-column: 2; justify-self: center; display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; white-space: nowrap; }
/* html header.site-toolbar outranks page link rules such as ".factory a" and
   "body.company-light a". */
html header.site-toolbar a, .company-header nav a { color: var(--on-enamel-muted); text-decoration: none; }
html header.site-toolbar > a:first-child { color: var(--on-enamel); }
html header.site-toolbar a:hover, .company-header nav a:hover { color: var(--on-enamel); }
header.site-toolbar nav a[aria-current], .company-header nav a[aria-current] { color: var(--on-enamel); border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
.site-toolbar a:focus-visible, .company-header a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* Page controls at the toolbar's end, such as the Factory's sign-in. */
.toolbar-extras { grid-column: 3; justify-self: end; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.toolbar-extras .account { display: inline-flex; gap: 12px; align-items: center; }
.toolbar-extras .who { color: var(--on-enamel); text-transform: none; letter-spacing: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.site-toolbar .toolbar-extras [data-sign-in], header.site-toolbar .toolbar-extras [data-sign-out] { color: var(--brass); }
header.site-toolbar .toolbar-extras [data-sign-in]:hover, header.site-toolbar .toolbar-extras [data-sign-out]:hover { color: var(--on-enamel); }

/* Too narrow for one row: brand and page controls on top, the menu centred
   on its own row beneath. */
@media (max-width: 840px) {
  .site-toolbar, .company-header { grid-template-columns: 1fr auto; }
  .site-toolbar nav, .company-header nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; white-space: normal; }
  .toolbar-extras { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  .site-toolbar nav, .company-header nav { gap: 8px 18px; }
}

/* Small letterspaced capitals for labels, and a stepped brass rule. */
.ma-caps { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.ma-stepped { display: block; height: 9px; background: var(--stepped); }

/* A breadcrumb line under the header band, for decks and sub-pages. */
.ma-subhead { max-width: none; margin: 0; padding: 10px 20px 9px; border-bottom: 1px solid var(--rule); color: var(--muted); font: 600 11px/1.5 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.ma-subhead a { color: var(--brass-ink); text-decoration: none; }
.ma-subhead a:hover { text-decoration: underline; }