/* The site wears the `shoalmark` theme — the Owner's answer on FM-002 (4e00f85, PR 90, 2026-09-26): "the tool ships
   monochrome and shoalmark as starters; shoalmark's own board and site wear the shoalmark theme". Slice A: the site's
   own lines first, then FM-006's two site stylesheets as the aligned mock stacks them (evidence/FM-006/themes/, 9467b83,
   PR 82) — site-monochrome.css, then site-shoalmark.css — every rule as the mock wrote it but one the built site's contrast
   measure added (the foot's link, marked where it stands); no template, no zensical.toml change. The site keeps its
   header; the board's header is inline inside its chart (the Owner, 09:23:58, for the board).
   Fonts are self-hosted by stylesheets/fonts.css; Google Fonts loading is disabled. */

.md-header__ellipsis > .md-header__topic:first-child .md-ellipsis {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}

/* The mark is pixel art on a 16-unit grid: shown at a whole multiple of it, never at the theme's 1.2rem (1.5x). */
.md-header__button.md-logo svg {
  width: 16px;
  height: 16px;
}

/* The slate palette paints the header title white and leaves the logo at the 82 % default: give the mark the name's ink. */
[data-md-color-scheme=slate] .md-header__button.md-logo{color:hsla(var(--md-hue),0%,100%,1)}

/* THE BASE, "monochrome" — the terminal cut on the documentation site, over Zensical's modern theme.
   The site keeps its palettes (default by day, slate by night) and IBM Plex Sans for prose —
   the face is a choice within the ruled Plex family, and prose reads better in Sans. Mono carries everything that is
   the tool's: the name, the navigation, the headings with their markdown marks, tables and code.
   The chart is the board's (monochrome.css), muted: the same sheet of Neuwerk's Watt, the same figures, hung from the
   body, which Zensical positions and which grows with the page. Its three tokens are set per scheme below; the figures
   are never read (alt text ""), and the chart shows only where the margins hold it. */
body[data-md-color-scheme=default][data-md-color-primary]{
  --md-typeset-a-color:var(--md-default-fg-color);--md-accent-fg-color:var(--md-default-fg-color);
  --grat:rgba(0,0,0,.045);--chart:rgba(0,0,0,.26);--chartink:#6b6b6b}
body[data-md-color-scheme=slate][data-md-color-primary]{
  --md-typeset-a-color:var(--md-default-fg-color);--md-accent-fg-color:var(--md-default-fg-color);
  --grat:rgba(240,241,244,.04);--chart:rgba(240,241,244,.24);--chartink:#8f949c}

/* the header: the ground, a rule under it, the name in Mono */
.md-header{border-bottom:1px solid var(--md-default-fg-color--lighter);box-shadow:none}
.md-header__topic,.md-nav,.md-search__input,.md-source,.md-footer,.md-footer-meta,.md-typeset table:not([class]) th{font-family:"IBM Plex Mono",ui-monospace,monospace}
.md-nav{font-size:.66rem}
.md-nav__link--active,.md-nav__link:is(:focus,:hover){color:var(--md-default-fg-color)}
.md-nav__link--active{font-weight:600;background:var(--md-code-bg-color)!important}
.md-nav__link--active::before{content:"> ";content:"> " / "";white-space:pre}

/* headings: Mono, one weight, the markdown marks kept and never read */
.md-typeset h1,.md-typeset h2,.md-typeset h3,.md-typeset h4{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;letter-spacing:-.01em;color:var(--md-default-fg-color)}
.md-typeset h1{font-size:1.9em;line-height:1.2;text-wrap:balance}
.md-typeset h2{font-size:1.2em}.md-typeset h3{font-size:1em}
.md-typeset h2::before{content:"## ";content:"## " / "";color:var(--md-default-fg-color--light);font-weight:400}
.md-typeset h3::before{content:"### ";content:"### " / "";color:var(--md-default-fg-color--light);font-weight:400}
.md-typeset a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--md-default-fg-color--lighter)}
.md-typeset a:hover{text-decoration-color:currentColor}
.md-typeset .headerlink{text-decoration:none}

/* a table is a box, its header row the raised surface; code is flat */
.md-typeset table:not([class]){border:1px solid var(--md-default-fg-color--lighter);border-radius:0;box-shadow:none}
.md-typeset table:not([class]) th{background:var(--md-code-bg-color);font-weight:600}
.md-typeset code{border-radius:0}
.md-typeset pre>code{border:1px solid var(--md-default-fg-color--lightest)}

/* THE CHART — the board's, hung from the body: frame, figures down both sides, longitude along the top */
body{--gx:118.8px;--gy:100.8px;--chart-x:64px;--chart-top:24px}
@media screen and (min-width:1380px){
  .md-main__inner{margin-top:calc(1.5rem + 18px)}
  .md-footer{position:relative;z-index:1}   /* the foot covers the chart, figures and all, as the header does */
  body::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    top:calc(2.4rem + var(--chart-top));bottom:12px;left:var(--chart-x);right:var(--chart-x);padding:5px;
    border:1px solid var(--chart);outline:1px solid var(--chart);outline-offset:-6px;
    background:
      linear-gradient(90deg,var(--grat) 1px,transparent 0) 0 0/var(--gx) 100% content-box,
      linear-gradient(var(--grat) 1px,transparent 0) 0 0/100% var(--gy) content-box,
      repeating-linear-gradient(var(--chart) 0 1px,transparent 0 calc(var(--gy)/10)) 0 0/3px 100% no-repeat content-box,
      repeating-linear-gradient(var(--chart) 0 1px,transparent 0 calc(var(--gy)/10)) 100% 0/3px 100% no-repeat content-box,
      repeating-linear-gradient(90deg,var(--chart) 0 1px,transparent 0 calc(var(--gx)/10)) 0 0/100% 3px no-repeat content-box,
      repeating-linear-gradient(90deg,var(--chart) 0 1px,transparent 0 calc(var(--gx)/10)) 0 100%/100% 3px no-repeat content-box,
      linear-gradient(var(--chart) 50%,transparent 0) 0 5px/5px calc(2*var(--gy)) repeat-y padding-box,
      linear-gradient(var(--chart) 50%,transparent 0) 100% 5px/5px calc(2*var(--gy)) repeat-y padding-box,
      linear-gradient(90deg,var(--chart) 50%,transparent 0) 5px 0/var(--gx) 5px repeat-x padding-box,
      linear-gradient(90deg,var(--chart) 50%,transparent 0) 5px 100%/var(--gx) 5px repeat-x padding-box}
  body::after,.md-container::before,.md-container::after{position:absolute;pointer-events:none;overflow:hidden;white-space:pre;
    font:11px "IBM Plex Mono",ui-monospace,monospace;color:var(--chartink)}
  body::after,.md-container::before{content:"53°57'N\A 56'\A 55'\A 54'\A 53'\A 52'\A 51'\A 53°50'\A 49'\A 48'\A 47'\A 46'\A 45'\A 44'\A 43'\A 42'\A 41'\A 53°40'\A 39'\A 38'\A 37'\A 36'\A 35'\A 34'\A 33'\A 32'\A 31'\A 53°30'\A 29'\A 28'\A 27'\A 26'\A 25'\A 24'\A 23'\A 22'\A 21'\A 53°20'\A 19'\A 18'\A 17'\A 16'\A 15'\A 14'\A 13'\A 12'\A 11'\A 53°10'\A 09'\A 08'\A 07'\A 06'\A 05'\A 04'\A 03'\A 02'\A 01'\A 53°00'\A 59'\A 58'\A 57'\A 56'\A 55'\A 54'" / "";top:calc(2.4rem + var(--chart-top) + 6px - var(--gy)/2);bottom:12px;
    width:calc(var(--chart-x) - 8px);line-height:var(--gy)}
  body::after{left:0;text-align:right}
  .md-container::before{right:0;text-align:left}
  .md-container::after{content:"      8°24'E             26'               28'              8°30'              32'               34'               36'               38'              8°40'              42'               44'               46'               48'              8°50'              52'               54'               56'               58'              9°00'              02'               04'               06'               08'              9°10'              12'               14'               16'               18'              9°20'              22'               24'               26'               28'              9°30'              32'               34'               36'               38'              9°40'              42'        " / "";top:calc(2.4rem + var(--chart-top) - 16px);height:12px;line-height:12px;
    left:calc(var(--chart-x) + 6px - 9ch);right:var(--chart-x);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14ch),transparent calc(100% - 4ch));mask-image:linear-gradient(90deg,#000 calc(100% - 14ch),transparent calc(100% - 4ch))}
}

/* THE THEME "shoalmark" — the brand's own on the documentation site, over its base above. The board's theme carried
   over: the name in the navy band, full width, ending at the drying line; the chart in its blue-grey; the Watt's
   green for the headings' marks and the page you are on; land buff across a table's head; links in the chart's blue.
   Magenta stays unused here: on the board it marks what is owed to the Owner, and the site owes him nothing. */
body[data-md-color-scheme=default][data-md-color-primary]{
  --bg:#fbfbf7;--panel:#ffffff;--shallow:#e3eff7;--contour:#8eb1cc;--ink:#10202e;--dim:#3e4e5b;--mute:#51606c;
  --band:#15293c;--bandink:#f3f6f9;--drying:#9aae57;--watt:#526214;--land:#f1e1b0;--landink:#10202e;--id:#77511a;--blue:#1f5ca8;
  --grat:rgba(31,92,168,.08);--chart:#86a6c2;--chartink:var(--mute)}
body[data-md-color-scheme=slate][data-md-color-primary]{
  --bg:#0d1720;--panel:#111f2c;--shallow:#1a2d3e;--contour:#34546c;--ink:#d9e4ec;--dim:#a9bbc8;--mute:#90a3b1;
  --band:#15293d;--bandink:#d9e4ec;--drying:#b8c98c;--watt:#bccd8f;--land:#e8d4a0;--landink:#0d1720;--id:#e8d4a0;--blue:#8fb9f3;
  --grat:rgba(143,185,243,.07);--chart:#3f6282;--chartink:var(--mute)}
body[data-md-color-scheme][data-md-color-primary]{
  --md-default-bg-color:var(--bg);--md-default-fg-color:var(--ink);--md-default-fg-color--light:var(--dim);
  --md-default-fg-color--lighter:var(--contour);--md-default-fg-color--lightest:var(--shallow);
  --md-primary-fg-color:var(--band);--md-primary-bg-color:var(--bandink);--md-accent-fg-color:var(--watt);
  --md-typeset-a-color:var(--blue);--md-code-bg-color:var(--shallow);--md-code-fg-color:var(--ink);
  --md-footer-bg-color:var(--band);--md-footer-bg-color--dark:var(--band);--md-footer-fg-color:var(--bandink);
  --md-footer-fg-color--light:var(--bandink);--md-footer-fg-color--lighter:var(--bandink);
  --md-typeset-table-color:var(--contour);--chart-top:26px}

/* the band: the name on navy, full width, ending at the drying line */
.md-header{background:var(--band);color:var(--bandink);border-bottom:2px solid var(--drying);-webkit-backdrop-filter:none;backdrop-filter:none}
.md-header .md-header__button,.md-header .md-source{color:var(--bandink)}
.md-header__button.md-logo{color:var(--bandink)!important}
.md-search__form{background:rgba(255,255,255,.08)}.md-search__input::placeholder{color:var(--bandink);opacity:.8}

/* the Watt's green: the headings' marks, the page you are on */
.md-typeset h2::before,.md-typeset h3::before{color:var(--watt)}
.md-nav__link--active,.md-nav__link--active::before{color:var(--watt)}
.md-nav__link--active{background:var(--shallow)!important}
.md-typeset a{color:var(--blue);text-decoration-color:color-mix(in srgb,var(--blue) 40%,transparent)}
.md-typeset :not(pre)>code{color:var(--id)}

/* the record: land buff across the top, rows on the paper */
.md-typeset table:not([class]){background:var(--panel);border-color:var(--contour)}
.md-typeset table:not([class]) th{background:var(--land);color:var(--landink)}
.md-typeset pre>code{border-color:var(--contour);background:var(--panel)}

/* the foot: the band again, the drying line above it */
.md-footer{background:var(--band);color:var(--bandink);border-top:2px solid var(--drying)}
.md-footer-meta,.md-footer-meta :is(a,.md-copyright){background:var(--band);color:var(--bandink)}
/* not the mock's — added on the built site's measure: Zensical's `html .md-footer-meta.md-typeset a:not(:focus,:hover)`
   outranks the rule above and paints the foot's link in the page's ink, 1.12:1 on the band by day; inside the foot the
   page's ink is the band's */
.md-footer-meta{--md-default-fg-color:var(--bandink)}

/* B1 — "How it works": the week's picture, drawn from a real tracker (FM-024), the real board and a real commit (4127dba) of this
   repository. Three cards down the page's column, each a verbatim excerpt (a cut is marked …), the theme's own tokens; the board's
   card keeps the board's magenta for what is owed to the Owner, as the landing's excerpt does. */
.md-typeset .week{margin:2rem 0;display:grid;gap:.2rem;text-align:left}
.md-typeset .week-card{position:relative;margin:.7rem 0 0;border:1px solid var(--contour);background:var(--panel);padding:1.1rem .9rem .7rem}
.md-typeset .week-card>.t{position:absolute;top:-.85em;left:.8rem;margin:0;padding:0 .5rem;background:var(--panel);font:600 .66rem/1.7 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:0}
.md-typeset .week-card>.t::before{content:"## ";content:"## " / "";color:var(--watt);font-weight:400}
.md-typeset .week-card .src{margin:0 0 .5rem;font:400 .6rem/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--mute)}
.md-typeset .week-card pre{margin:0;padding:.55rem .7rem;background:var(--shallow);border-left:3px solid var(--watt);font:400 .62rem/1.65 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.md-typeset .week-card .add{color:var(--watt)}.md-typeset .week-card .del{color:var(--mute);text-decoration:line-through;text-decoration-thickness:1px}
.md-typeset .week-card.board{border-color:#b9559f}
.md-typeset .week-card .wk-board{padding:.55rem .7rem;background:var(--shallow);font:400 .62rem/1.65 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink)}
.md-typeset .week-card .wk-board p{margin:.2rem 0}
.md-typeset .week-card .wk-board i{font-style:normal;color:var(--watt)}
.md-typeset .week-card .wk-board b.hot{color:#a2327f}
.md-typeset .week-card .wk-board .id{background:var(--land);color:var(--landink);padding:0 .3rem}
.md-typeset .week-card .wk-board .chip{margin-left:.5rem;padding:0 .4rem;border:1px solid #b9559f;color:#8d2a6c;font-weight:600}
.md-typeset .week-arrow{margin:.3rem 0 -.3rem;text-align:center;font:400 1rem/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--watt)}
.md-typeset .week figcaption{max-width:none;margin:.8rem 0 0;text-align:left;font-size:.7rem;color:var(--mute)}
body[data-md-color-scheme=slate][data-md-color-primary] .md-typeset .week-card.board{border-color:#ee92d4}
body[data-md-color-scheme=slate][data-md-color-primary] .md-typeset .week-card .wk-board b.hot{color:#ee92d4}
body[data-md-color-scheme=slate][data-md-color-primary] .md-typeset .week-card .wk-board .chip{border-color:#ee92d4;color:#ee92d4}