/**
* Orchid — a white-label skin. The client's identity on SazAI's elements. (data-skin="orchid")
*
* THE NAME, AND WHY IT IS A PLANT (Ramés, ratified 2026-09-12: every lead skin takes a plant or
* flower name, never a company name). An orchid is an epiphyte: it lives on another plant and
* takes nothing from it, only the light, air and rain that were already there. That is the whole
* white-label argument in one sentence about a flower, and it is the reason the name is the one
* safe thing to publish here. The largest family of flowering plants on earth, ~28,000 species.
*
* The name is FREE and the identity is PERMANENT, and they are different things. `Orchid` is a
* label a reader sees and it can change without touching a byte of CSS. `orchid` is the identity:
* it rides in the `sazai_skin` cookie, is stamped on the document before any CSS paints, and is
* published in a in the of EVERY page — so the whole skin set is readable from
* view-source without opening a stylesheet. THAT is why identities are botanical rather than
* anonymous-by-luck, and why renaming one after it ships costs every reader their chosen skin.
*
* THIS FILE WAS RENAMED from a placeholder slug on 2026-09-12, before it had shipped to anyone,
* which was the last free moment. The same commit removed a client's name from a comment below:
* a skin sheet is served VERBATIM, no minification, so every comment in this file is public bytes.
* Do not write a company name here, not even in a comment, not even as an example.
*
* WHAT THIS IS FOR (Ramés, 2026-09-11). The client licensed SazAI Corpus and runs it on their
* own VPS. A user who opens it must see THEIR product — their colours, their type, their page
* anatomy — with SazAI's behaviour underneath. The 90s skin is the precedent: it is not SazAI
* with new ink, it is another site built from the same elements. Orchid is that, for a brand.
*
* THE RULE, RULED THE SAME DAY: "elements and tokens.css are the guardrails, like the limits
* of physics. Inside them Orchid has absolute power to change whatever it wants, however it
* wants, but it must keep every element." So this file DOES reach into structure: it re-lays
* the Quartz grid, turns the left rail into a top bar, makes the hero full-bleed, moves the
* footer into a mega-nav band. It hides nothing: every element the page ships is still on the
* page, somewhere the brand would have put it. `!important` is used wherever the baked Quartz
* sheet or a component's own stylesheet would otherwise win — that is the one lever a skin
* has over a shadow tree, and it is used, not apologised for.
*
* AN EARLIER VERSION OF THIS FILE FORBADE STRUCTURE SELECTORS and its test enforced it. That
* produced SazAI's three columns in the client's colours — "timid", Ramés said, and he was
* right: the same layout in new ink is a costume, not a product. The ban is gone; what
* survives is the SCOPE rule — every selector starts at `:root[data-skin="orchid"]`, so nothing
* here can leak into `sazai` or `90s`. The test checks that, not the old ban.
*
* WHERE THE VALUES COME FROM. Read from the client's brand page and measured on their home
* (2026-09-11): wine #690037 and navy #000050 fields, coral #fa5a50 for buttons and the
* bottom band, pink #fab9ff and sky #b4dcfa sections, white/navy 1px-bordered cards, a
* high-contrast serif display in capitals with one line picked out in pink or coral, a
* geometric sans for everything else, a coral progress rule under the hero, translucent
* squares over the field, and square corners everywhere (border-radius 0 on 1191 of 1194
* elements). No logo, no wordmark, no company name — identity only; the test checks that too.
*
* TWO FACES, both theirs: LIGHT is the white page with the wine hero; DARK is their navy
* home — navy bar, navy hero, white display with the second line in coral.
*
* TYPE: `Noto Serif Display` where installed, else the platform serif; nothing is downloaded
* (white-label ruling 2026-08-31). Their own display face is licensed and could not ship.
*
* CONTRAST: every colour pair used for text is measured in `orchid.contrast.test.js`. Two of
* their own pairs fail AA (white on coral, coral on white at body size) and are not copied:
* coral blocks carry navy ink; coral links use the deeper coral. The look is mimicked, the
* accessibility defect is not.
*/
/* ============================== BRAND VALUES =============================== */
:root[data-skin="orchid"] {
--orc-wine:#690037; --orc-magenta:#802655; --orc-mauve:#994d74; --orc-lilac:#c785cc;
--orc-navy:#000050; --orc-indigo:#393973; --orc-indigo-2:#242459; --orc-navy-2:#0a0a5e;
--orc-coral:#fa5a50; --orc-coral-2:#fa8982; --orc-coral-3:#d94a41; --orc-coral-4:#a63832; --orc-coral-tint:#fab8b4;
--orc-pink:#fab9ff; --orc-sky:#b4dcfa; --orc-blue:#8cb3d9; --orc-blue-2:#6b8fb3;
--orc-ink:#181819; --orc-ink-2:#606062; --orc-ink-3:#9a9ea6; --orc-line:#d2d4dc;
--orc-square:rgba(255,255,255,.14);
/* page geometry, theirs: a tall bar, a wide inset, hard edges */
--orc-bar:8.5rem;
--orc-inset:clamp(1.25rem, 12.4vw, 15rem);
--orc-band:3.5rem;
--orc-serif:"Noto Serif Display", ui-serif, Georgia, "Times New Roman", serif;
/* ---- tokens: light face (white page) ---- */
--bg:#ffffff; --surface:#ffffff; --surface-2:#f4eef1;
--text:var(--orc-ink); --text-muted:var(--orc-ink-2); --text-faint:var(--orc-ink-3);
--border:var(--orc-line); --border-strong:var(--orc-navy);
--primary:var(--orc-coral); --on-primary:var(--orc-navy);
--focus-ring:var(--orc-coral-4);
--shadow-sm:none; --shadow-md:none; --shadow-lg:none; --shadow-xl:none;
--scrim:rgba(0,0,80,.6);
--info:var(--orc-blue-2); --success:#2f6b4f; --warning:#8a6a1f; --danger:var(--orc-coral-4);
--accent:var(--orc-coral); --accent-2:var(--orc-navy); --g-accent:var(--orc-coral); --hue2:var(--orc-pink);
--hue-analysis:var(--orc-navy); --hue-reprocess:var(--orc-wine); --hue-output:var(--orc-coral-4);
--hue-upload:var(--orc-coral); --hue-amber:#8a6a1f; --hue-danger:var(--orc-coral-4); --hue-lineage:var(--orc-indigo);
--brand-see:var(--orc-navy); --brand-talk:var(--orc-wine); --brand-translate:var(--orc-coral-4);
--brand-create:var(--orc-magenta); --brand-trust:var(--orc-indigo);
--verb-see:var(--orc-navy); --verb-talk:var(--orc-wine); --verb-translate:var(--orc-coral-4);
--verb-create:var(--orc-magenta); --verb-trust:var(--orc-indigo);
--sz-link-h:3; --sz-link-s:54%; --sz-link-l:42%; --sz-link-step:8;
--titleFont:var(--orc-serif); --headerFont:var(--orc-serif);
--sz-heading-chrome-weight:500;
--r-sm:0; --r-md:0; --r-lg:0; --r-xl:0; --r-2xl:0; --r-full:0;
--sz-glass-fill:var(--surface); --sz-glass-blur:0px; --sz-glass-radius:0;
--light:#ffffff; --lightgray:var(--orc-line); --gray:var(--orc-ink-3); --darkgray:var(--orc-ink);
--dark:var(--orc-navy); --secondary:var(--orc-coral-4); --tertiary:var(--orc-wine);
--highlight:var(--orc-pink); --textHighlight:var(--orc-navy);
--graph-current:var(--orc-coral); --graph-visited:var(--orc-navy); --graph-unvisited:var(--orc-blue-2); --graph-tag:var(--orc-wine);
--sz-vault-context-hue:var(--orc-navy); --sz-share-hue:var(--orc-coral);
--sz-gauge-track:var(--orc-line); --sz-gauge-fill:var(--orc-coral); --sz-gauge-ink:var(--orc-navy);
}
/* ---- tokens: dark face (their navy home) ---- */
:root[data-skin="orchid"][data-theme="dark"] {
--bg:var(--orc-navy); --surface:var(--orc-navy-2); --surface-2:#161670;
--text:#ffffff; --text-muted:var(--orc-coral-tint); --text-faint:var(--orc-lilac);
--border:#2a2a7a; --border-strong:#ffffff;
--primary:var(--orc-coral); --on-primary:var(--orc-navy);
--focus-ring:var(--orc-pink);
--scrim:rgba(0,0,0,.6);
--info:var(--orc-sky); --success:#7fb79a; --warning:#d9b45a; --danger:var(--orc-coral-tint);
--accent:var(--orc-coral-2); --accent-2:var(--orc-pink); --g-accent:var(--orc-coral); --hue2:var(--orc-pink);
--hue-analysis:var(--orc-sky); --hue-reprocess:var(--orc-pink); --hue-output:var(--orc-coral-2);
--hue-upload:var(--orc-coral); --hue-amber:#d9b45a; --hue-danger:var(--orc-coral-tint); --hue-lineage:var(--orc-lilac);
--brand-see:var(--orc-sky); --brand-talk:var(--orc-pink); --brand-translate:var(--orc-coral-2);
--brand-create:var(--orc-lilac); --brand-trust:var(--orc-blue);
--verb-see:var(--orc-sky); --verb-talk:var(--orc-pink); --verb-translate:var(--orc-coral-2);
--verb-create:var(--orc-lilac); --verb-trust:var(--orc-blue);
--sz-link-h:3; --sz-link-s:88%; --sz-link-l:84%;
--light:var(--orc-navy); --lightgray:#2a2a7a; --gray:var(--orc-lilac); --darkgray:#ffffff;
--dark:#ffffff; --secondary:var(--orc-coral-tint); --tertiary:var(--orc-pink);
--highlight:var(--orc-wine); --textHighlight:#ffffff;
--graph-current:var(--orc-coral); --graph-visited:#ffffff; --graph-unvisited:var(--orc-blue); --graph-tag:var(--orc-pink);
--sz-vault-context-hue:var(--orc-sky); --sz-gauge-track:#2a2a7a; --sz-gauge-fill:var(--orc-coral); --sz-gauge-ink:#ffffff;
--orc-square:rgba(255,255,255,.08);
}
/* ============================== PAGE FRAME =============================== */
/* Quartz's three-column grid becomes their single column: bar / hero+content / section / footer.
The elements are the same four grid children, in the same DOM order — only the geometry moves. */
:root[data-skin="orchid"] body { background:var(--bg); color:var(--text); margin:0; }
:root[data-skin="orchid"] .page { max-width:none !important; margin:0 !important; }
:root[data-skin="orchid"] .page > #quartz-body {
display:flex !important; flex-direction:column !important;
gap:0 !important; padding:0 !important; margin:0 !important; max-width:none !important;
}
:root[data-skin="orchid"] .page > #quartz-body > * { grid-area:auto !important; min-width:0; }
/* ---- the bar: the left rail laid out as their header ---- */
:root[data-skin="orchid"] .page > #quartz-body .sidebar.left {
order:0; position:sticky !important; top:0; z-index:120;
display:grid !important; grid-template-columns:auto 1fr auto; grid-template-areas:"title nav search" "chrome chrome chrome";
align-items:center; column-gap:3.5rem; row-gap:0;
height:auto !important; padding:0 var(--orc-inset) !important; margin:0 !important;
background:var(--bg) !important; border-bottom:1px solid var(--border);
}
:root[data-skin="orchid"] .sidebar.left > .page-title {
grid-area:title; margin:0 !important; height:var(--orc-bar); display:flex; align-items:center;
font-family:var(--orc-serif); font-weight:600; font-size:2rem; letter-spacing:-.01em;
}
:root[data-skin="orchid"] .sidebar.left > .page-title a { color:var(--orc-coral); text-decoration:none; }
/* nav: the five verbs run horizontally, like their menu row */
:root[data-skin="orchid"] .sidebar.left > .sazai-nav-menu-mount { grid-area:nav; display:flex; align-items:center; height:var(--orc-bar); }
:root[data-skin="orchid"] .sazai-nav-menu-mount > .sazai-nav-content {
position:static !important; visibility:visible !important; transform:none !important;
width:auto !important; height:auto !important; max-height:none !important; padding:0 !important;
background:transparent !important; overflow:visible !important;
}
:root[data-skin="orchid"] sz-nav-menu::part(box) { background:transparent; border:0; padding:0; margin:0; height:auto; max-height:none; overflow:visible; }
:root[data-skin="orchid"] .sazai-nav-menu-mount { --sz-glass-fill:transparent; --surface:transparent; --surface-2:transparent; }
:root[data-skin="orchid"] sz-nav-menu::part(head) { font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin:0 1.5rem 0 0; padding:0; }
:root[data-skin="orchid"] sz-nav-menu::part(list) {
display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 1.75rem; margin:0; padding:0; list-style:none;
overflow:visible; height:auto; max-height:none; flex:none;
}
:root[data-skin="orchid"] sz-nav-menu::part(row) {
background:transparent; border:0; padding:.35rem 0; margin:0; border-radius:0;
font-size:.9375rem; font-weight:500; color:var(--text); text-decoration:none;
}
:root[data-skin="orchid"] sz-nav-menu::part(row):hover { color:var(--orc-coral); }
:root[data-skin="orchid"] sz-nav-menu::part(credit) { font-size:.6875rem; color:var(--text-muted); margin:0 0 0 1.5rem; text-decoration:none; }
/* search: their magnifier, icon only, at the right of the bar */
:root[data-skin="orchid"] .sidebar.left > .flex-component { grid-area:search; display:flex !important; align-items:center; height:var(--orc-bar); }
:root[data-skin="orchid"] .sidebar.left .search,
:root[data-skin="orchid"] body > .search { display:block !important; max-width:none; }
:root[data-skin="orchid"] body > .search { position:fixed; top:calc(var(--orc-bar) / 2 - .9rem); right:var(--orc-inset); z-index:130; }
:root[data-skin="orchid"] .sidebar.left .search-button,
:root[data-skin="orchid"] body > .search .search-button {
background:transparent !important; border:0; padding:.25rem; width:auto; height:auto; display:flex !important; align-items:center; color:var(--orc-coral);
}
/* the label stays for assistive tech; the eye gets the magnifier, as on their bar */
:root[data-skin="orchid"] .search-button p { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
:root[data-skin="orchid"] .search-button svg { width:1.5rem; height:1.5rem; stroke:var(--orc-coral); }
:root[data-skin="orchid"] .search-path { stroke:var(--orc-coral) !important; stroke-width:1.6; }
/* the second row: a navy band carrying the lockup (mark + pitch), the ways and the controls.
The client's bar has a "flag" cluster at the right; ours is the interface toolbar. */
:root[data-skin="orchid"] .sidebar.left > .sazai-rail-chrome {
grid-area:chrome; display:flex; align-items:center; gap:2.5rem; min-height:var(--orc-band);
margin:0 calc(-1 * var(--orc-inset)) !important; padding:.35rem var(--orc-inset) !important;
background:var(--orc-navy); color:#fff;
--text:#fff; --text-muted:var(--orc-coral-tint); --text-faint:var(--orc-lilac); --border:#2a2a7a; --surface:var(--orc-navy); --bg:var(--orc-navy);
--surface-2:rgba(255,255,255,.08); --sz-glass-fill:transparent; --info:var(--orc-sky);
}
:root[data-skin="orchid"][data-theme="dark"] .sidebar.left > .sazai-rail-chrome { background:#000038; --surface:#000038; --bg:#000038; }
:root[data-skin="orchid"] .sazai-rail-chrome > .sazai-side-menu-mount { flex:1 1 auto; min-width:0; }
:root[data-skin="orchid"] sz-side-menu::part(menu),
:root[data-skin="orchid"] sz-side-menu::part(panel),
:root[data-skin="orchid"] sz-side-menu::part(variable),
:root[data-skin="orchid"] sz-side-menu::part(vault),
:root[data-skin="orchid"] sz-side-menu::part(pitch) {
display:flex; flex-direction:row; align-items:center; gap:1.5rem; flex:0 1 auto; min-width:0; min-height:0; height:auto;
background:transparent; border:0; outline:0; box-shadow:none; padding:0; margin:0; border-radius:0;
}
:root[data-skin="orchid"] sz-side-menu::part(menu) { gap:2.5rem; }
:root[data-skin="orchid"] sz-side-menu::part(panel) { flex:1 1 auto; }
:root[data-skin="orchid"] sz-side-menu::part(variable) { flex:1 1 auto; }
:root[data-skin="orchid"] sz-side-menu::part(pitch) { gap:.875rem; padding-left:1.5rem; border-left:1px solid rgba(255,255,255,.28); }
:root[data-skin="orchid"] sz-side-menu::part(variable)::before { display:none; }
:root[data-skin="orchid"] sz-side-menu::part(lockup) { display:flex; align-items:center; gap:.75rem; margin:0; padding:0; flex:0 0 auto; min-width:0; order:2; }
:root[data-skin="orchid"] sz-side-menu::part(mark) { width:1.25rem; height:1.25rem; flex:0 0 auto; opacity:.9; }
:root[data-skin="orchid"] sz-side-menu::part(pitch) {
font-size:.8125rem; line-height:1.45; font-style:italic; color:#fff; opacity:.9; max-width:64ch;
}
:root[data-skin="orchid"] sz-side-menu::part(ways) { display:flex; gap:1.5rem; margin:0; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
:root[data-skin="orchid"] sz-side-menu::part(here) { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--orc-pink); }
/* icon toolbars keep their label for assistive tech, as the search does; the eye gets the icons */
:root[data-skin="orchid"] sz-side-menu::part(controls-label),
:root[data-skin="orchid"] sz-side-menu::part(vault-controls-label) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
:root[data-skin="orchid"] sz-side-menu::part(controls),
:root[data-skin="orchid"] sz-user-panel::part(toolbar) { border:0; background:transparent; }
:root[data-skin="orchid"] sz-user-panel::part(panel) { display:flex; align-items:center; gap:1rem; background:transparent; border:0; padding:0; margin:0; }
:root[data-skin="orchid"] sz-user-panel::part(identity) { gap:.5rem; }
:root[data-skin="orchid"] sz-user-panel::part(welcome),
:root[data-skin="orchid"] sz-user-panel::part(email) { font-size:.6875rem; color:var(--orc-coral-tint); }
:root[data-skin="orchid"] sz-user-panel::part(name) { font-size:.8125rem; color:#fff; }
:root[data-skin="orchid"] .sazai-rail-chrome a { color:var(--orc-pink); text-decoration:none; }
/* ============================== HERO (the wine field) =============================== */
:root[data-skin="orchid"] .page > #quartz-body .center { order:1; max-width:none !important; margin:0 !important; padding:0 !important; min-width:0 !important; }
:root[data-skin="orchid"] .center > * { margin-left:0; margin-right:0; }
/* the search line sits on the field, right-aligned, drawn as a white underline */
:root[data-skin="orchid"] .center > sz-search-field {
display:block; width:auto !important; margin:0 !important;
padding:1.75rem var(--orc-inset) 0; background:var(--orc-wine);
--text:#fff; --text-muted:rgba(255,255,255,.75); --text-faint:rgba(255,255,255,.6); --border:rgba(255,255,255,.5);
--sz-glass-fill:transparent; --surface:transparent; --sz-search-field-bleed:0;
}
:root[data-skin="orchid"] sz-search-field::part(field) {
max-width:22rem; margin-left:auto; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.55); border-radius:0; color:#fff;
}
:root[data-skin="orchid"] sz-search-field::part(text) { color:#fff; }
:root[data-skin="orchid"] sz-search-field::part(veil) { background:transparent; }
/* the page header on inner pages is their hero: title in white serif capitals on the field */
:root[data-skin="orchid"] .center > .page-header {
margin:0 !important; padding:0 var(--orc-inset) !important; background:var(--orc-wine); color:#fff;
background-image:
linear-gradient(var(--orc-square), var(--orc-square)), linear-gradient(var(--orc-square), var(--orc-square)),
linear-gradient(var(--orc-square), var(--orc-square)), linear-gradient(var(--orc-square), var(--orc-square));
background-repeat:no-repeat; background-size:12rem 12rem, 12rem 12rem, 12rem 12rem, 12rem 12rem;
background-position:calc(100% - 24rem) 0, calc(100% - 12rem) 12rem, 100% 0, calc(100% - 12rem) -6rem;
}
:root[data-skin="orchid"] .center > .page-header h1 {
/* the padding rides on the h1, not the box: the marketing page hides its h1 (the lotus carries the
title) and a padded empty box would be a band of nothing */
margin:0; padding:3.5rem 0 4.5rem; font-family:var(--orc-serif); font-weight:500; text-transform:uppercase; letter-spacing:-.02em;
font-size:clamp(2.6rem, 5vw, 5.5rem); line-height:1.02; color:#fff; max-width:18ch;
}
:root[data-skin="orchid"] .center > .page-header:empty,
:root[data-skin="orchid"] .center > .page-header:not(:has(h1)) { display:none; }
/* the marketing hero: the lotus field, full-bleed wine, squares over it, display in white
with the FIRST line picked out in pink -- the client's own " / " pattern */
:root[data-skin="orchid"] .center > article { padding:0 !important; margin:0 !important; max-width:none !important; }
:root[data-skin="orchid"] .center > article > .markdown-preview-view { padding:0 var(--orc-inset) 4rem; }
:root[data-skin="orchid"] sz-lotus {
display:block; margin:0 calc(-1 * var(--orc-inset)) 0 !important; padding:1rem var(--orc-inset) 4rem !important;
background-color:var(--orc-wine) !important;
background-image:
linear-gradient(var(--orc-square), var(--orc-square)), linear-gradient(var(--orc-square), var(--orc-square)),
linear-gradient(var(--orc-square), var(--orc-square)), linear-gradient(var(--orc-square), var(--orc-square)),
linear-gradient(var(--orc-square), var(--orc-square));
background-repeat:no-repeat; background-size:12rem 12rem, 12rem 12rem, 12rem 12rem, 12rem 12rem, 12rem 12rem;
background-position:calc(100% - 24rem) 0, calc(100% - 12rem) 12rem, 100% 0, calc(100% - 12rem) 30rem, 9rem 100%;
border:0 !important; border-radius:0 !important;
--sz-field-surface:transparent; --sz-field-border:transparent;
--sz-field-title-size:clamp(2.4rem, 3.8vw, 4.75rem); --sz-field-title-weight:500; --sz-field-title-leading:1.02;
--sz-field-title-font:var(--orc-serif); --sz-field-title-transform:uppercase; --sz-field-title-tracking:-.02em;
--sz-field-title-color:transparent; --sz-field-min-height:0;
--verb-see:var(--orc-sky); --verb-talk:var(--orc-pink); --verb-translate:var(--orc-coral-2); --verb-create:var(--orc-lilac); --verb-trust:var(--orc-blue);
--gray:rgba(255,255,255,.7); --lightgray:rgba(255,255,255,.25);
/* the lotus takes at least half the viewport (Ramés): the stage column is the wider one and its
svg bleeds under the gutter and out to the right edge, the way their mosaic does */
display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); align-items:center; column-gap:0;
min-height:calc(100svh - var(--orc-bar) - var(--orc-band) - 4.5rem);
}
:root[data-skin="orchid"] sz-lotus > [slot="title"] { hyphens:none; overflow-wrap:normal; word-break:keep-all; }
:root[data-skin="orchid"] sz-lotus::part(side) { order:-1; padding:0; min-height:0; }
:root[data-skin="orchid"] sz-lotus::part(stage) { min-height:0; width:calc(100% + var(--orc-inset) + 8rem); margin-left:-8rem; }
:root[data-skin="orchid"] sz-lotus > [slot="title"] {
background-image:linear-gradient(var(--orc-pink) 0 1.02em, #fff 1.02em 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
:root[data-skin="orchid"][data-theme="dark"] sz-lotus,
:root[data-skin="orchid"][data-theme="dark"] .center > .page-header,
:root[data-skin="orchid"][data-theme="dark"] .center > sz-search-field { background-color:var(--orc-navy) !important; }
:root[data-skin="orchid"][data-theme="dark"] sz-lotus > [slot="title"] {
background-image:linear-gradient(#fff 0 1.02em, var(--orc-coral) 1.02em 100%);
}
/* under the hero: their coral progress rule, then the four acts as their four-column row */
:root[data-skin="orchid"] .acts {
display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:3rem 2.5rem;
margin:0 !important; padding:2.5rem 0 3rem !important;
border-top:4px solid; border-image:linear-gradient(90deg, var(--orc-coral) 0 68%, var(--orc-line) 68% 100%) 1;
}
:root[data-skin="orchid"] .act { background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; border-radius:0 !important; box-shadow:none !important; }
:root[data-skin="orchid"] .act > b {
display:block; margin:0 0 .75rem; font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text);
}
:root[data-skin="orchid"] .act > span { display:block; font-size:.9375rem; line-height:1.55; color:var(--text-muted); }
:root[data-skin="orchid"] .center > hr { border:0; border-top:1px solid var(--border); margin:0 var(--orc-inset); }
:root[data-skin="orchid"] .center > .page-footer:empty { display:none; }
/* ============================== THE PINK SECTION =============================== */
/* the right rail becomes their pink band: the graph and the vault access as navy-bordered cards */
:root[data-skin="orchid"] .page > #quartz-body .sidebar.right {
order:2; position:static !important; height:auto !important; max-height:none !important;
display:grid !important; grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr)); gap:2.5rem; align-items:start;
padding:5rem var(--orc-inset) !important; margin:0 !important; width:auto !important;
background:var(--orc-pink); color:var(--orc-navy);
--text:var(--orc-navy); --text-muted:var(--orc-indigo); --text-faint:var(--orc-indigo); --border:var(--orc-navy); --surface:var(--orc-pink); --bg:var(--orc-pink);
--sz-glass-fill:transparent; --light:var(--orc-pink); --darkgray:var(--orc-navy); --lightgray:rgba(0,0,80,.25);
--sz-link-h:240; --sz-link-s:100%; --sz-link-l:16%; --secondary:var(--orc-navy); /* the coral link measures 4.16:1 on pink; navy clears it */
}
:root[data-skin="orchid"][data-theme="dark"] .page > #quartz-body .sidebar.right {
background:var(--orc-wine); --text:#fff; --text-muted:var(--orc-coral-tint); --text-faint:var(--orc-lilac); --border:#fff; --surface:var(--orc-wine); --bg:var(--orc-wine);
--light:var(--orc-wine); --darkgray:#fff; --lightgray:rgba(255,255,255,.3); color:#fff;
--sz-link-h:3; --sz-link-s:88%; --sz-link-l:84%; --secondary:#ffffff; /* the navy link of the light face measures 1.48:1 on wine */
}
:root[data-skin="orchid"] .sidebar.right > * { flex:none !important; max-height:none !important; }
:root[data-skin="orchid"] .sidebar.right h3 {
margin:0 0 1.25rem; font-family:var(--orc-serif); font-weight:500; text-transform:uppercase; letter-spacing:-.01em; font-size:2rem; line-height:1.05; color:inherit;
}
:root[data-skin="orchid"] .sidebar.right .graph-outer { border:1px solid var(--border) !important; border-radius:0 !important; background:transparent !important; box-shadow:none; }
:root[data-skin="orchid"] .sidebar.right .graph-outer::before { display:none; }
:root[data-skin="orchid"] .sidebar.right .backlinks ul { padding:0; margin:0; }
:root[data-skin="orchid"] sz-vault-access::part(heading) {
font-family:var(--orc-serif); font-weight:500; text-transform:uppercase; font-size:2rem; line-height:1.05; letter-spacing:-.01em; margin:0 0 1.25rem; color:inherit;
}
:root[data-skin="orchid"] sz-vault-access::part(box) { display:grid; gap:.75rem; padding:0; border:0; background:transparent; border-radius:0; }
:root[data-skin="orchid"] sz-vault-access::part(google),
:root[data-skin="orchid"] sz-vault-access::part(microsoft) {
display:inline-flex; align-items:center; gap:.75rem; justify-content:center;
background:var(--orc-coral); color:var(--orc-navy); border:0; border-radius:0; padding:1rem 2rem;
font-weight:600; font-size:1rem; text-decoration:none; width:max-content; min-width:14rem;
}
:root[data-skin="orchid"] sz-vault-access::part(google):hover,
:root[data-skin="orchid"] sz-vault-access::part(microsoft):hover { background:var(--orc-coral-3); }
:root[data-skin="orchid"] sz-vault-access::part(note) { font-size:.875rem; line-height:1.5; color:inherit; opacity:.85; margin:1rem 0 0; max-width:38ch; }
/* ============================== THE FOOTER: NAVY MEGA-NAV + CORAL BAND =============================== */
:root[data-skin="orchid"] .page > #quartz-body > footer {
order:3; margin:0 !important; padding:4.5rem var(--orc-inset) 0 !important; opacity:1 !important;
background:var(--orc-navy); color:#fff; position:relative;
--text:#fff; --text-muted:var(--orc-coral-tint); --text-faint:var(--orc-lilac); --border:#2a2a7a; --surface:var(--orc-navy); --bg:var(--orc-navy);
--sz-link-h:3; --sz-link-s:88%; --sz-link-l:84%;
}
:root[data-skin="orchid"][data-theme="dark"] .page > #quartz-body > footer { background:#000038; --surface:#000038; --bg:#000038; }
:root[data-skin="orchid"] footer::after { content:""; display:block; height:var(--orc-band); margin:4.5rem calc(-1 * var(--orc-inset)) 0; background:var(--orc-coral); }
:root[data-skin="orchid"] sz-site-footer::part(footer) { gap:3rem; }
:root[data-skin="orchid"] sz-site-footer::part(columns) { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:2.5rem; }
:root[data-skin="orchid"] sz-site-footer::part(column) { padding:0; }
:root[data-skin="orchid"] sz-site-footer::part(heading) {
font-family:var(--orc-serif); font-weight:500; text-transform:uppercase; font-size:1.375rem; letter-spacing:-.01em; color:#fff; margin:0 0 .75rem;
}
:root[data-skin="orchid"] sz-site-footer::part(row) { color:var(--orc-pink); font-size:.9375rem; text-decoration:none; }
:root[data-skin="orchid"] sz-site-footer::part(row):hover { color:#fff; text-decoration:underline; }
:root[data-skin="orchid"] sz-site-footer::part(home) { border-top:1px solid #2a2a7a; padding-top:1.5rem; font-size:.8125rem; color:var(--orc-coral-tint); }
:root[data-skin="orchid"] sz-site-footer::part(copyright) { margin:0; }
/* ============================== CONTENT TYPE (ui + vault pages) =============================== */
:root[data-skin="orchid"] .center article h1,
:root[data-skin="orchid"] .center article h2 {
font-family:var(--orc-serif); font-weight:500; text-transform:uppercase; letter-spacing:-.015em; line-height:1.05; color:var(--orc-navy);
}
:root[data-skin="orchid"][data-theme="dark"] .center article h1,
:root[data-skin="orchid"][data-theme="dark"] .center article h2 { color:#fff; }
:root[data-skin="orchid"] .center article h2 { font-size:clamp(1.75rem, 2.6vw, 2.75rem); margin:3.5rem 0 1.25rem; color:var(--orc-coral); }
:root[data-skin="orchid"][data-theme="dark"] .center article h2 { color:var(--orc-coral-2); }
:root[data-skin="orchid"] .center article h3 { font-weight:700; color:var(--orc-navy); }
:root[data-skin="orchid"][data-theme="dark"] .center article h3 { color:var(--orc-sky); }
:root[data-skin="orchid"] .center article > .markdown-preview-view > p:first-child { font-size:1.125rem; line-height:1.55; max-width:64ch; }
:root[data-skin="orchid"] .center article p > strong { color:var(--orc-navy); }
:root[data-skin="orchid"][data-theme="dark"] .center article p > strong { color:#fff; }
:root[data-skin="orchid"] a { text-decoration:underline; text-underline-offset:.15em; }
/* Quartz chips internal links on `--highlight`; the client underlines links on the page colour,
and the coral link on that pink chip measures 4.16:1 -- so the chip goes, not the colour */
:root[data-skin="orchid"] a.internal { background:transparent !important; padding:0; border-radius:0; }
:root[data-skin="orchid"] .center article pre { border:1px solid var(--border); border-radius:0; }
:root[data-skin="orchid"] .center article :not(pre) > code { border-radius:0; background:var(--surface-2); }
:root[data-skin="orchid"] .center article table { border-collapse:collapse; }
:root[data-skin="orchid"] .center article th { border-bottom:2px solid var(--orc-navy); text-transform:uppercase; font-size:.75rem; letter-spacing:.06em; }
:root[data-skin="orchid"][data-theme="dark"] .center article th { border-bottom-color:#fff; }
:root[data-skin="orchid"] .center article td { border-bottom:1px solid var(--border); }
:root[data-skin="orchid"] ::selection { background:var(--orc-pink); color:var(--orc-navy); }
:root[data-skin="orchid"][data-theme="dark"] ::selection { background:var(--orc-coral); color:var(--orc-navy); }
/* the vault dashboard: navy-bordered cards on the page, their stat-card pattern */
:root[data-skin="orchid"] .sazai-dashboard-hold { display:block; width:100%; }
:root[data-skin="orchid"] .center article p:has(> sz-vault-dashboard) { max-width:none !important; }
:root[data-skin="orchid"] sz-vault-dashboard { display:block; width:100%; }
:root[data-skin="orchid"] sz-library { display:block; width:100%; max-width:none; }
:root[data-skin="orchid"] sz-library::part(card) { border:1px solid var(--orc-navy); border-radius:0; box-shadow:none; }
:root[data-skin="orchid"][data-theme="dark"] sz-library::part(card) { border-color:#fff; }
:root[data-skin="orchid"] sz-library::part(header) { font-family:var(--font-sans); text-transform:none; }
:root[data-skin="orchid"] sz-library::part(toolbar),
:root[data-skin="orchid"] sz-library::part(shelf) { border-radius:0; }
/* the vault context strip above the page: their navy top band */
:root[data-skin="orchid"] .sazai-vault-context-mount { background:var(--orc-navy); color:#fff; padding:0 var(--orc-inset); --text:#fff; --text-muted:var(--orc-coral-tint); --surface:var(--orc-navy); --bg:var(--orc-navy); --border:#2a2a7a; }
:root[data-skin="orchid"] sz-vault-context::part(bar) { background:transparent; border:0; border-radius:0; }
/* consent: square, navy, coral accept */
:root[data-skin="orchid"] sz-consent::part(notice) { background:var(--orc-navy); color:#fff; border:0; border-radius:0; box-shadow:none; --text:#fff; --text-muted:var(--orc-coral-tint); }
:root[data-skin="orchid"] sz-consent::part(accept) { background:var(--orc-coral); color:var(--orc-navy); border:0; border-radius:0; font-weight:600; }
:root[data-skin="orchid"] sz-consent::part(decline) { background:transparent; color:#fff; border:1px solid #fff; border-radius:0; }
:root[data-skin="orchid"] sz-consent::part(configure) { color:var(--orc-pink); }
/* the stars canvas is the sazai skin's field; on the client's page it would be noise */
:root[data-skin="orchid"] canvas#stars { opacity:0; }
/* ============================== NARROW =============================== */
@media (max-width: 900px) {
:root[data-skin="orchid"] { --orc-bar:4.5rem; }
:root[data-skin="orchid"] .page > #quartz-body .sidebar.left {
grid-template-columns:auto 1fr auto; grid-template-areas:"title search nav" "chrome chrome chrome"; column-gap:1rem;
}
:root[data-skin="orchid"] .sidebar.left > .page-title { font-size:1.5rem; }
:root[data-skin="orchid"] .sazai-nav-menu-mount > .sazai-nav-burger { display:flex; }
:root[data-skin="orchid"] .sazai-nav-menu-mount > .sazai-nav-content {
position:fixed !important; visibility:hidden !important; transform:translate(-100dvw) !important;
width:100dvw !important; height:100dvh !important; padding:4rem 1rem 2rem !important; background:var(--bg) !important;
}
:root[data-skin="orchid"] .sazai-nav-menu-mount.open > .sazai-nav-content { visibility:visible !important; transform:none !important; }
:root[data-skin="orchid"] sz-nav-menu::part(list) { flex-direction:column; align-items:stretch; gap:.25rem; }
:root[data-skin="orchid"] .sidebar.left > .sazai-rail-chrome { flex-wrap:wrap; gap:.75rem 1.5rem; }
:root[data-skin="orchid"] sz-side-menu::part(pitch) { font-size:.75rem; }
:root[data-skin="orchid"] .acts { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
:root[data-skin="orchid"] .acts { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
:root[data-skin="orchid"] * { transition:none !important; }
}