/* ==========================================================================
   pf-mechanical.css - the "Mechanical" (Machine Shop) portfolio template, public pages.
   Ported from docs/mechanical-portfolio-v2.html. EVERY rule is scoped under .pf-me so nothing leaks into Default,
   Editorial, Architect, Pharmacy or the rest of the site. Class names carry an me- prefix because Bootstrap is loaded
   site-wide (.btn, .lead, .nav, .tile ... would collide).

   Wrapper (written by _PortfolioMechanical in Step 3b):
     <div class="pf-page pf-me" id="pf-top" data-pf-template="mechanical"> ... </div>

   Tokens (on the wrapper, NOT on :root):  --bg --ink --acc --onacc  (+ derived --mut --line --card).
   The four base tokens are written INLINE on the wrapper by the server (Helpers/MechanicalHtml.cs, Step 4) for every look: the
   six presets (table in PortfolioPaletteRules.MechanicalPresets) and the Custom palette. The values below are only the Graphite
   fallback for a page opened without them. --mut / --line / --card are mixed from the four with color-mix, as in the prototype,
   so a preset and a Custom palette use the same rules. The wrapper also carries data-theme (preset slug or custom) and
   data-mode (dark or light).

   Works with the animated drawings: the draw-in / dash / label rules of motion-scenes.js live in motion-picture.css
   (under .mp). The one rule that file does not hold is the hero gears' own spin (.rot.auto), which is here.

   Step 3a: tokens, page frame, shared atoms (eyebrow, name, lead, buttons) and the hero.
   Step 3b: draft banner, top bar, section headers, tiles and the 12-column grid, About, Skills, Experience, Projects cards,
   Education, Contact, footer, edit button.
   Step 3c: the project page (header, stats, picture, case study, specifications, media embed, pictures, diagram).
   ========================================================================== */

@keyframes me-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* ---------- tokens: Graphite fallback (the real colors come inline from the server) ---------- */
.pf-me {
    --bg: #0e0f11;
    --ink: #e8e8e6;
    --acc: #ff8a1f;
    --onacc: #0b0b0b;
    --mut: color-mix(in srgb, var(--ink) 62%, var(--bg));
    --line: color-mix(in srgb, var(--acc) 38%, var(--bg));
    --card: color-mix(in srgb, var(--acc) 8%, var(--bg));
    --me-r: 18px;
    --me-disp: 'Anton', Impact, 'Arial Narrow', sans-serif;
    --me-body: 'DM Sans', system-ui, sans-serif;
    --me-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --me-top: 84px;                 /* height of the top bar (Step 3b); the hero fills the screen below it */
    --mp-muted: var(--mut);         /* drawing labels (motion-picture.css) */
}

/* ---------- page frame ---------- */
/* Full-bleed (escape the layout container) and the site body painted in the template color so no other-colored strip
   shows around the page. The body cannot read the wrapper's variables, hence the literal color for the default look; every
   rendered page also writes a more specific body rule with its own page color (MechanicalHtml.BodyStyle). */
body:has(.pf-me) { background: #0e0f11; overflow-x: hidden; transition: background .4s; }
html:has(.pf-me) { scroll-behavior: smooth; scroll-padding-top: 72px; }

.pf-me {
    position: relative; isolation: isolate;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top, 0px);
    background-color: var(--bg);
    /* the 64px drafting grid of the prototype */
    background-image:
        linear-gradient(color-mix(in srgb, var(--acc) 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--acc) 8%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    color: var(--ink);
    font: 400 14.5px/1.6 var(--me-body);
    overflow-x: clip;
    text-align: start;
    transition: background-color .4s;
}
/* accent glow in the top right corner, fixed to the screen, behind the content */
.pf-me::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2;   /* 6a: under the machine background (z-index -1) */
    background: radial-gradient(50% 40% at 80% 0, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%);
}
/* the strip above the page (under the safe area / behind an overscroll) in the page color */
.pf-me::before { content: ""; position: absolute; left: 0; right: 0; top: -200px; height: 200px; background: var(--bg); z-index: -1; pointer-events: none; }

.pf-me *, .pf-me *::before, .pf-me *::after { box-sizing: border-box; }
.pf-me * { margin: 0; }
.pf-me a { color: inherit; text-decoration: none; }
.pf-me a:focus-visible, .pf-me button:focus-visible, .pf-me [tabindex]:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.pf-me img { max-width: 100%; }
.pf-me ul, .pf-me ol { padding: 0; }
.pf-me [hidden] { display: none !important; }
.pf-me .me-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; position: relative; }

/* ---------- atoms ---------- */
.pf-me .me-ey { font: 700 11px var(--me-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
/* The name is as big as the prototype's (12.5vw, at most 176px), but never wider than its column: --me-nl is the letter
   count of the longest word of the name (written by _MechanicalHero), and a letter of Anton is about .46em wide, so the
   longest word fits the column (100cqi) whatever the name. Browsers without container units keep the first font-size. */
.pf-me .me-name { font: 400 clamp(60px, 12.5vw, 176px)/.9 var(--me-disp); text-transform: uppercase; overflow-wrap: anywhere; }
.pf-me .me-name { font-size: clamp(40px, min(12.5vw, calc(100cqi / (var(--me-nl, 6) * .46))), 176px); }
.pf-me .me-name em { color: var(--acc); font-style: normal; }
.pf-me .me-lead { color: var(--mut); max-width: 48ch; margin: 16px 0 22px; font-size: 16px; }
.pf-me .me-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-me .me-btn {
    display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 30px; padding: 11px 20px;
    font: 700 12px var(--me-body); letter-spacing: .06em; text-transform: uppercase; color: inherit; background: none; cursor: pointer; transition: .2s;
}
.pf-me .me-btn:hover { border-color: var(--acc); color: var(--acc); }
.pf-me .me-btn--p { background: var(--acc); color: var(--onacc); border-color: var(--acc); }
.pf-me .me-btn--p:hover { color: var(--onacc); opacity: .85; }

/* ---------- hero: name on the left, the gearbox drawing on the right, its gears turning by themselves ---------- */
.pf-me .me-hero { min-height: calc(100vh - var(--me-top)); min-height: calc(100svh - var(--me-top)); display: grid; align-items: center; }
.pf-me .me-stick {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center;
    width: 100%; max-width: 1180px; margin: 0 auto; padding: 30px 22px 60px;
}
.pf-me .me-stick > * { min-width: 0; }
.pf-me .me-stick > div:first-child { container-type: inline-size; }   /* the name measures itself against this column */
.pf-me .me-loc { margin-top: -12px; margin-bottom: 18px; }
/* without JavaScript the drawing box stays empty (motion-picture.css hides it): the text takes the whole width */
.pf-me .me-stick:has(.me-hero-art:empty) { grid-template-columns: minmax(0, 1fr); }

/* The hero gears turn by themselves. motion-scenes.js writes class="rot auto" and --k / --ka / --dir on each gear;
   30 seconds per turn at ratio 1, the other gears faster or slower and in the opposite direction by their ratio. */
.pf-me .rot.auto { rotate: none; animation: me-spin calc(30s / var(--ka)) linear infinite; animation-direction: var(--dir); }

@media (max-width: 860px) {
    .pf-me .me-stick { grid-template-columns: minmax(0, 1fr); align-content: center; }
}

/* ==========================================================================
   Step 3b - the rest of the portfolio page
   ========================================================================== */

/* ---------- draft banner + edit button ---------- */
.pf-me .me-draft { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 10px 16px; background: var(--acc); color: var(--onacc); font-size: 13px; }
.pf-me .me-draft form { display: inline; }
.pf-me .me-draft .me-btn { border-color: var(--onacc); color: var(--onacc); }
.pf-me .me-editrow { display: flex; justify-content: center; padding: 6px 0 40px; }

/* ---------- top bar: round logo + name, section links (its height is --me-top, which the hero subtracts) ---------- */
.pf-me .me-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; min-height: var(--me-top); padding: 20px 22px; max-width: 1180px; margin: 0 auto; }
.pf-me .me-brand { display: flex; gap: 10px; align-items: center; font: 700 13px var(--me-body); letter-spacing: .14em; text-transform: uppercase; min-width: 0; }
.pf-me .me-brand b { flex: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--acc); font: 400 15px var(--me-disp); }
.pf-me .me-brand span { overflow-wrap: anywhere; }
.pf-me .me-nav nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.pf-me .me-nav nav a:hover { color: var(--acc); }

/* ---------- sections, tiles, grid ---------- */
.pf-me .me-sec { padding: 70px 0 10px; }
.pf-me .me-sh { margin-bottom: 26px; }
.pf-me .me-sh h2 { font: 400 clamp(30px, 4.6vw, 52px)/1 var(--me-disp); text-transform: uppercase; margin-top: 6px; overflow-wrap: anywhere; }
.pf-me .me-lead--sec { margin: -8px 0 24px; }
.pf-me .me-tile {
    border: 1px solid var(--line); border-radius: var(--me-r); padding: 22px; min-width: 0;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 7%, transparent), color-mix(in srgb, var(--ink) 1.5%, transparent));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pf-me .me-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.pf-me .me-g--dense { grid-auto-flow: row dense; }
.pf-me .me-g > * { min-width: 0; }
.pf-me .me-c4 { grid-column: span 4; } .pf-me .me-c5 { grid-column: span 5; } .pf-me .me-c7 { grid-column: span 7; }
.pf-me .me-c8 { grid-column: span 8; } .pf-me .me-c12 { grid-column: span 12; }

/* ---------- About ---------- */
.pf-me .me-para { max-width: 70ch; }
.pf-me .me-para + .me-para { margin-top: 12px; }
.pf-me .me-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-top: 16px; }
.pf-me .me-facts b { display: block; font: 400 30px/1.1 var(--me-disp); color: var(--acc); overflow-wrap: anywhere; }
.pf-me .me-pr { list-style: none; margin-top: 8px; }
.pf-me .me-pr li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.pf-me .me-pr li:last-child { border-bottom: 0; }

/* ---------- Skills: groups of lines on the left, the crank drawing (decorative) on the right ---------- */
.pf-me .me-skg + .me-skg { margin-top: 18px; }
.pf-me .me-sk { list-style: none; margin-top: 6px; }
.pf-me .me-sk li { padding: 9px 0 9px 18px; position: relative; border-bottom: 1px solid var(--line); font-size: 13px; }
.pf-me .me-sk li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 2px; background: var(--acc); }
.pf-me .me-deco { display: grid; place-items: center; }
.pf-me .me-deco .mp { width: 100%; max-width: 320px; }

/* ---------- Experience ---------- */
.pf-me .me-xp > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.pf-me .me-xp > div:first-child { padding-top: 0; }
.pf-me .me-xp > div:last-child { padding-bottom: 0; border-bottom: 0; }
.pf-me .me-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.pf-me .me-row b { color: var(--acc); }
.pf-me .me-org { color: var(--mut); }
.pf-me .me-pts { margin-top: 8px; padding-inline-start: 18px; color: var(--mut); }

/* ---------- Project cards ---------- */
.pf-me .me-pc { display: block; transition: transform .25s, border-color .25s; }
.pf-me .me-pc:hover, .pf-me .me-pc:focus-visible { transform: translateY(-5px); border-color: var(--acc); }
.pf-me .me-thumb {
    aspect-ratio: 16 / 10; position: relative; display: block; overflow: hidden;
    border-bottom: 1px solid var(--line); margin: -22px -22px 16px;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}
/* the wide lead card keeps a lower picture, so the card next to it is not stretched into a tall empty box */
@media (min-width: 861px) { .pf-me .me-pc.me-c8 .me-thumb { aspect-ratio: 2 / 1; } }
/* an uploaded picture shows whole unless the owner chose "Fill" (the card CSS of motion-picture.css only knows the two classes) */
.pf-me .me-thumb .mp-img { object-fit: contain; }
.pf-me .me-thumb .mp-fit-fill .mp-img { object-fit: cover; }
/* no picture at all: the project's first letter, large and faint */
.pf-me .me-thumb--empty { display: grid; place-items: center; }
.pf-me .me-thumb--empty::after { content: attr(data-initial); font: 400 72px/1 var(--me-disp); text-transform: uppercase; color: color-mix(in srgb, var(--acc) 40%, transparent); }
.pf-me .me-pc h3 { font: 400 24px/1.1 var(--me-disp); text-transform: uppercase; margin-top: 4px; overflow-wrap: anywhere; }
.pf-me .me-desc { color: var(--mut); margin-top: 8px; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pf-me .me-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pf-me .me-tags span { border: 1px solid var(--line); border-radius: 30px; padding: 2px 10px; font-size: 11px; color: var(--mut); }

/* ---------- Education ---------- */
.pf-me .me-tl > div { display: grid; grid-template-columns: minmax(120px, 280px) 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pf-me .me-tl > div:first-child { padding-top: 0; }
.pf-me .me-tl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.pf-me .me-tl b { color: var(--acc); font-weight: 700; }
.pf-me .me-tl small { display: block; color: var(--mut); font-size: 12px; margin-top: 4px; }

/* ---------- Contact ---------- */
.pf-me .me-ct > a, .pf-me .me-ct > div { display: grid; grid-template-columns: minmax(80px, 140px) 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; overflow-wrap: anywhere; }
.pf-me .me-ct > :first-child { padding-top: 0; }
.pf-me .me-ct > :last-child { padding-bottom: 0; border-bottom: 0; }
.pf-me .me-ct > a:hover { color: var(--acc); }

/* ---------- footer ---------- */
.pf-me .me-foot { padding: 70px 22px 60px; text-align: center; color: var(--mut); font-size: 12px; }

@media (max-width: 860px) {
    .pf-me .me-c4, .pf-me .me-c5, .pf-me .me-c7, .pf-me .me-c8 { grid-column: span 12; }
    .pf-me .me-tl > div, .pf-me .me-ct > a, .pf-me .me-ct > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .pf-me .me-sec { padding-top: 50px; }
}

/* ==========================================================================
   Step 3c - the project page (_ProjectMechanical)
   ========================================================================== */
.pf-me .me-pg { padding-top: 8px; padding-bottom: 20px; }
.pf-me .me-phead { margin: 30px 0 26px; }
.pf-me .me-pname { font-size: clamp(40px, 7vw, 92px); margin-top: 8px; }
.pf-me .me-phead .me-lead { max-width: 60ch; margin-bottom: 0; }
.pf-me .me-credit { margin-top: 10px; color: var(--mut); font-size: 13px; overflow-wrap: anywhere; }
.pf-me .me-credit a { text-decoration: underline; }
.pf-me .me-c6 { grid-column: span 6; }
.pf-me .me-pg .me-tile + .me-tile { margin-top: 14px; }
.pf-me .me-pg .me-g > .me-tile { margin-top: 0; }
.pf-me .me-pg .me-sec { padding-top: 56px; }
.pf-me .me-ey--gap { display: block; margin-top: 18px; }
.pf-me .me-tile .me-ey { display: block; margin-bottom: 6px; }

/* the stats row: big numbers */
.pf-me .me-kp { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px; }
.pf-me .me-kp b { display: block; font: 400 clamp(28px, 4vw, 40px)/1.1 var(--me-disp); color: var(--acc); overflow-wrap: anywhere; }

/* the project picture: the drawing (with its callout labels) or the uploaded image, shown whole */
.pf-me .me-pic { margin: 14px 0 0; padding: 14px; }
.pf-me .me-pg .me-pic + .me-tile, .pf-me .me-pg .me-tile + .me-pic { margin-top: 14px; }
.pf-me .me-pic .mp { margin: 0 auto; }

/* case study */
.pf-me .me-steps { list-style: none; counter-reset: s; margin-top: 4px; }
.pf-me .me-steps li { counter-increment: s; position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid var(--line); }
.pf-me .me-steps li:last-child { border-bottom: 0; }
.pf-me .me-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 10px; font: 400 18px var(--me-disp); color: var(--acc); }
.pf-me .me-beside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pf-me .me-beside > * { min-width: 0; }
.pf-me .me-mfig { margin: 0 0 14px; }
.pf-me .me-mfig--below { margin: 14px 0 0; }
.pf-me .me-beside .me-mfig { margin: 0; }
.pf-me .me-mfig .me-ey { display: block; margin-bottom: 8px; }
.pf-me figcaption { color: var(--mut); font-size: 12px; margin-top: 8px; }

/* specifications table */
.pf-me .me-spec { width: 100%; border-collapse: collapse; }
.pf-me .me-spec td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.pf-me .me-spec td:first-child { color: var(--mut); width: 42%; }
.pf-me .me-spec tr:last-child td { border-bottom: 0; }
.pf-me .me-tags--spec { margin-top: 14px; }
.pf-me .me-spec + .me-tags--spec { padding-top: 14px; border-top: 1px solid var(--line); }

/* pictures and diagram */
.pf-me .me-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pf-me .me-shots figure, .pf-me .me-sec figure { margin: 0; }
.pf-me .me-shot { display: block; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--me-r); background: var(--card); overflow: hidden; transition: .3s; }
.pf-me .me-shot:hover { transform: scale(1.02); border-color: var(--acc); }
.pf-me .me-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-me .me-shot--wide { aspect-ratio: 21 / 9; }
.pf-me .me-shot--wide img { object-fit: contain; }
.pf-me .me-shot--free { aspect-ratio: auto; }
.pf-me .me-shot--free img { height: auto; object-fit: contain; }
.pf-me .me-pic .me-shot { border: 0; background: none; }
.pf-me .me-pic .me-shot:hover { transform: none; }

.pf-me .me-links { margin-top: 14px; }
.pf-me .me-back2 { margin-top: 40px; }
.pf-me .me-foot a { text-decoration: underline; }

/* the shared _MediaEmbed partial (embed, video, 3D model, downloads) keeps its class names; these scoped rules give it the
   Mechanical look, like pf-pharmacy.css does for .pf-ph */
.pf-me .case-label { font: 700 11px var(--me-body); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.pf-me .pf-muted, .pf-me .text-muted { color: var(--mut) !important; }
.pf-me .hfe-media-stack { display: flex; flex-direction: column; gap: 26px; }
.pf-me .hfe-media-block { display: flex; flex-direction: column; min-width: 0; }
.pf-me .hfe-media-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.pf-me .hfe-media-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.pf-me .case-embed-wrap { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--me-r); overflow: hidden; background: var(--card); }
.pf-me .case-embed-wrap iframe, .pf-me .case-embed-wrap video, .pf-me .case-embed-wrap model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; display: block; background: var(--card); }
.pf-me .case-embed-wrap video { object-fit: contain; }
.pf-me .case-embed-wrap:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.pf-me .case-embed-wrap.hfe-media-placeholder { aspect-ratio: auto; min-height: 120px; }
.pf-me .pf-btn {
    display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 30px; padding: 11px 20px;
    font: 700 12px var(--me-body); letter-spacing: .06em; text-transform: uppercase; color: inherit; background: none; cursor: pointer; transition: .2s;
}
.pf-me .pf-btn:hover { border-color: var(--acc); color: var(--acc); }
.pf-me .pf-btn-primary { background: var(--acc); color: var(--onacc); border-color: var(--acc); }
.pf-me .pf-btn-primary:hover { color: var(--onacc); opacity: .85; }

@media (max-width: 860px) {
    .pf-me .me-c6 { grid-column: span 12; }
    .pf-me .me-beside { grid-template-columns: minmax(0, 1fr); }
    .pf-me .me-pg .me-sec { padding-top: 44px; }
    .pf-me .me-spec td:first-child { width: 38%; }
}

/* ---------- reduced motion: nothing turns, nothing slides, the drawing is shown complete ---------- */
@media (prefers-reduced-motion: reduce) {
    html:has(.pf-me) { scroll-behavior: auto; }
    .pf-me *, .pf-me *::before, .pf-me *::after { transition: none !important; }
    .pf-me .rot.auto { animation: none; }
    .pf-me .me-pc:hover, .pf-me .me-pc:focus-visible, .pf-me .me-shot:hover { transform: none; }
}

/* ==========================================================================
   Step 6a: the machine background (script: wwwroot/js/mechanical-bg.js). The wrapper carries data-bg="off|subtle|bold"
   (MechanicalHtml.BackgroundAttribute); the script builds .me-bgm (gears, chain, hydraulic lines, pistons), .me-ruler and
   .me-xh (the CAD crosshair, Bold + mouse only) as the first children of the wrapper. They sit at z-index -1 inside the
   wrapper's own stacking context (it has isolation: isolate), so they paint above the wrapper's grid and glow and below every
   piece of content, and none of them takes a click (pointer-events: none). Colors come from the wrapper's --acc / --bg.
   ========================================================================== */
.pf-me { --me-bgo: 1; }
.pf-me[data-bg="subtle"] { --me-bgo: .7; }
.pf-me[data-bg="off"] .me-bgm, .pf-me[data-bg="off"] .me-ruler, .pf-me[data-bg="off"] .me-xh { display: none; }

.pf-me .me-bgm {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: var(--me-bgo);
}
.pf-me .me-bgm * { fill: none; stroke: var(--acc); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pf-me .me-bgm .gg { opacity: .3; }
.pf-me .me-bgm .ch { opacity: .4; }
.pf-me .me-bgm .tr { opacity: .28; }
.pf-me .me-bgm .pi { opacity: .42; }
.pf-me .me-bgm .cl { stroke-dasharray: 8 4 2 4; opacity: .6; stroke-width: 1; }
.pf-me .me-bgm .lk { stroke-width: 9; stroke-dasharray: 11 7; opacity: .55; }
.pf-me .me-bgm .pn2 { stroke-width: 2.4; stroke-dasharray: 1 17; stroke-linecap: round; }
.pf-me .me-bgm .fw { stroke-width: 2.6; stroke-dasharray: 16 244; stroke-linecap: round; opacity: .95; animation: me-flow 5.5s linear infinite; }
@keyframes me-flow { to { stroke-dashoffset: -260; } }
.pf-me .me-bgm .nd { fill: var(--bg); stroke-width: 1.4; }
.pf-me .me-bgm .sp { fill: var(--acc); stroke: none; }
.pf-me .me-bgm text { fill: var(--acc); stroke: none; font: 500 10px var(--me-mono); letter-spacing: .12em; opacity: .7; }

/* the ruler on the right edge: small ticks every 10px, long ticks every 50px, moved by the script with the scroll */
.pf-me .me-ruler {
    position: fixed; top: 0; right: 0; bottom: 0; width: 16px; z-index: -1; pointer-events: none; opacity: calc(var(--me-bgo) * .55);
    background:
        linear-gradient(to bottom, var(--acc) 1px, transparent 1px) right 0 top var(--ry, 0px) / 6px 10px repeat-y,
        linear-gradient(to bottom, var(--acc) 1px, transparent 1px) right 0 top var(--ry, 0px) / 14px 50px repeat-y;
}

/* the CAD crosshair: only in Bold, only after the mouse has moved. Above the content (it never takes a click). */
.pf-me .me-xh { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .3s; }
.pf-me[data-bg="bold"] .me-xh.on { opacity: .55; }
.pf-me .me-xh line { stroke: var(--acc); stroke-width: 1; stroke-dasharray: 3 6; }
.pf-me .me-xh circle { fill: none; stroke: var(--acc); }
.pf-me .me-xh text { fill: var(--acc); font: 500 10px var(--me-mono); letter-spacing: .12em; }

@media (pointer: coarse), (max-width: 760px) { .pf-me .me-xh, .pf-me .me-ruler { display: none; } }
@media (prefers-reduced-motion: reduce) { .pf-me .me-bgm .fw { animation: none; } }
@media print { .pf-me .me-bgm, .pf-me .me-ruler, .pf-me .me-xh { display: none; } }

/* ==========================================================================
   Step 6b: the wrench cursor (script: wwwroot/js/mechanical-cursor.js). The wrapper carries data-cursor="on|off"
   (MechanicalHtml.CursorAttribute). Only for "on" does the script add .me-wrench to the wrapper, and only after the first real
   mouse move does it add .me-wr-on, which hides the native cursor INSIDE the wrapper (the site's top bar and footer keep the
   normal arrow). Text fields keep the text cursor. Touch / pen never get any of this. The wrench never takes a click.
   Colors come from the wrapper's --acc / --bg. The jaw centre is the pointer (the script positions it).
   ========================================================================== */
.pf-me.me-wr-on,
.pf-me.me-wr-on *,
.pf-me.me-wr-on *::before,
.pf-me.me-wr-on *::after { cursor: none !important; }
.pf-me.me-wr-on :is(textarea, [contenteditable]:not([contenteditable="false"]), input:not([type]), input[type="text"], input[type="email"],
                    input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"]) { cursor: text !important; }

.pf-me .me-wrench {
    position: fixed; left: 0; top: 0; width: 48px; height: 48px; z-index: 10000; pointer-events: none;
    opacity: 0; transition: opacity .15s; will-change: transform; transform-origin: 0 0;
}
.pf-me .me-wrench.on { opacity: 1; }
.pf-me .me-wrench svg { display: block; width: 48px; height: 48px; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.pf-me .me-wrench path.jw { fill: color-mix(in srgb, var(--bg) 82%, var(--acc)); stroke: var(--acc); stroke-width: 1.8; stroke-linejoin: round; }
.pf-me .me-wrench circle { fill: var(--bg); stroke: var(--acc); stroke-width: 1.4; }
.pf-me .me-wrench path.ln { fill: none; stroke: var(--acc); stroke-width: 1; opacity: .5; }

@media (pointer: coarse) { .pf-me .me-wrench { display: none; } }
@media print { .pf-me .me-wrench { display: none; } }