/**
 * Baobab — a white-label skin. The client's identity on SazAI's elements. (data-skin="baobab")
 *
 * THE NAME. The baobab is enormous, very old, stores its own water, and is the tree everyone
 * gathers under. It does not need to be decorated to be the largest thing in the landscape,
 * which is the argument this identity makes with almost no colour at all.
 *
 * THE RULE (Rames, 2026-09-11): elements and tokens.css are the guardrails; inside them the
 * skin may change whatever it wants, but it must keep every element. This file re-lays the
 * page: the rail becomes a black bar on a black page, the hero becomes a very large display
 * head, cards become near-black fields separated from the ground by one step rather than by a
 * border, and no button carries a background. Nothing is removed.
 *
 * WHERE THE VALUES COME FROM. There is no public brand book: the guidelines return 401 and the
 * client publishes no hex value at all. Absence recorded, not filled. Every value here is a
 * computed style measured on the home and one interior page (2026-09-11).
 *
 * THE MOST LITERAL MEASUREMENT IN THIS SET. Nothing is rounded: 526 of 526 elements on the home
 * and 604 of 604 on the interior compute zero radius. There are no gradients on either page and
 * no button has a background. This is the most disciplined system of the eleven and the skin
 * does not soften it.
 *
 * COLOUR IS PUNCTUATION, NOT A SCHEME. The single accent appears on one element of the entire
 * home page. It is a mark, a short rule above a card eyebrow, and the solid square that holds a
 * chevron. Everywhere else is white on black, with cards separated by one near-black step. Used
 * as a field it would be a different brand.
 *
 * THE SERIF HAS EXACTLY ONE JOB. A light serif carries the standfirst that follows a headline,
 * five elements per page, and nothing else. That reservation is reproduced literally.
 *
 * TYPE. Both faces are paid commercial licences that forbid redistribution, so nothing is
 * downloaded (white-label ruling 2026-08-31). The stacks name the nearest widely available
 * grotesque and transitional serif and continue into Arabic, Hebrew and CJK for the five
 * locales a Latin-only stack would leave as tofu.
 *
 * NO MARKS. No logo, no wordmark, no company name anywhere, comments included.
 * DIRECTION. Every inline offset is logical, so the skin flips with the document in ar and he.
 */

:root[data-skin="baobab"] {

  /* ========================= BRAND VALUES ========================= */
  --bao-black:#000000;        /* the page */
  --bao-card:#202020;         /* the one step that separates a card from the ground */
  --bao-paper:#ffffff;        /* everything that is not the accent */
  --bao-body:#c8c8c8;
  --bao-hair:#333333;
  --bao-accent:#a100ff;       /* punctuation: a mark, a rule, a square. never a field of text */
  /* the inverted face: declared, because this client publishes no light surface of its own */
  --bao-inv-ink:#3a3a3a; --bao-inv-hair:#e0e0e0; --bao-inv-card:#f4f4f4;       /* punctuation: a mark, a rule, a square. never a field of text */

  --bao-bar:4.5rem;
  --bao-measure:84rem;
  --bao-gutter:clamp(1.25rem, 5.5vw, 5rem);

  --bao-sans:"Graphik", "Inter", "Helvetica Neue", Arial,
             "Noto Sans Arabic", "Noto Sans Hebrew",
             "Hiragino Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
             system-ui, sans-serif;
  --bao-serif:"Source Serif 4", "Charter", Georgia, "Times New Roman",
              "Noto Naskh Arabic", "Noto Serif Hebrew",
              "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif KR", "Noto Serif SC", serif;
  --bao-w-light:300; --bao-w-reg:400; --bao-w-med:500; --bao-w-bold:700;

  color-scheme: dark;

  *, *::before, *::after { border-radius:0 !important; box-shadow:none !important; }

  body { background:var(--bao-black); color:var(--bao-body); font-family:var(--bao-sans);
         font-weight:var(--bao-w-reg); font-size:1rem; }

  .page > #quartz-body { display:block !important; max-width:none !important;
                         padding-block-start:var(--bao-bar) !important; }
  .page > #quartz-body > * { max-width:none !important; }

  /* ===================== THE RAIL BECOMES A BAR, AND IT IS A GRID =====================
     Corrected 2026-09-11 after rendering the first skin on a served page and measuring it.
     My first version made the rail `display:flex` with a fixed `block-size`, and the children
     spilled down the page: `.flex-component` landed at y=354 and the nav mount at y=414 with
     the bar ending at y=84. The cause is one line of the HOST's own CSS: `.sazai-rail-chrome`
     computes `display: contents`, so it is not a box — its descendants are promoted into
     whatever formatting context the rail declares, they bring their own height, and 84px does
     not hold them. The reference skin solved this before me and I had read the file:
     a GRID with named areas, so the chrome gets a row of its OWN below the bar row, every
     child is placed explicitly, and the chrome is given a real `display` so it stops being
     `contents`. No fixed height on the rail: the rows size themselves. */
  .page > #quartz-body .sidebar.left {
    order:0; position:sticky !important; inset-block-start:0; z-index:120;
    inline-size:100% !important; max-inline-size:none !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"title nav search" "chrome chrome chrome";
    column-gap:1.5rem; row-gap:0; align-items:center;
    /* The host gives the rail a height of its own and the grid rows then stretch to fill
       it: measured 842px, two rows of 431 and 411, with nothing inside taller than 120.
       A bar has to say so. */
    block-size:auto !important; margin:0 !important;
    padding-inline:var(--bao-gutter) !important; padding-block:0 !important;
    background:var(--bao-black) !important; border:0 !important; }

  .sidebar.left > .page-title { grid-area:title; margin:0 !important;
    block-size:var(--bao-bar); display:flex; align-items:center; }
  .sidebar.left > .sazai-nav-menu-mount { grid-area:nav; display:flex; align-items:center;
    block-size:var(--bao-bar); }
  .sidebar.left > .flex-component { grid-area:search; display:flex !important;
    align-items:center; block-size:var(--bao-bar); }
  .sidebar.left > .sazai-rail-chrome { grid-area:chrome; display:flex !important;
    align-items:center; gap:2rem; min-block-size:var(--bao-bar);
    margin-inline:calc(-1 * var(--bao-gutter)) !important; padding-inline:var(--bao-gutter); }
  .sazai-rail-chrome > .sazai-side-menu-mount { flex:1 1 auto; min-inline-size:0; }

  /* ============ THE SIDE MENU LIES DOWN, AND THIS IS THE OTHER HALF OF THE BAR ============
     Measured 2026-09-11: with the grid alone the bar rendered 842px tall. The chrome row got a
     row of its own, correctly, and then the side-menu component kept its own vertical layout
     inside it. A bar is not a bar until the component in it lies down. 48 of the reference
     skin's 139 rules are this conversion, and it is brand-independent: what follows is that
     structure, parameterised by this skin's own tokens. Every part below is one the component
     publishes; nothing reaches into its internals. */
  sz-side-menu::part(menu), sz-side-menu::part(panel), sz-side-menu::part(variable),
  sz-side-menu::part(vault), sz-side-menu::part(pitch) {
    display:flex; flex-direction:row; align-items:center; gap:1.5rem;
    flex:0 1 auto; min-inline-size:0; min-block-size:0; block-size:auto;
    background:transparent; border:0; outline:0; box-shadow:none; padding:0; margin:0; }
  sz-side-menu::part(menu) { gap:2.5rem; }
  sz-side-menu::part(panel) { flex:1 1 auto; }
  sz-side-menu::part(variable) { flex:1 1 auto; }
  sz-side-menu::part(variable)::before { display:none; }
  sz-side-menu::part(lockup) { display:flex; align-items:center; gap:.75rem;
    margin:0; padding:0; flex:0 0 auto; min-inline-size:0; order:2; }
  sz-side-menu::part(mark) { inline-size:1.25rem; block-size:1.25rem; flex:0 0 auto; opacity:.9; }
  sz-side-menu::part(ways) { display:flex; gap:1.5rem; margin:0; font-size:.75rem;
    text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
  /* the two labels are for a screen reader, not for a bar: hidden visually, never removed */
  sz-side-menu::part(controls-label), sz-side-menu::part(vault-controls-label) {
    position:absolute; inline-size:1px; block-size:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; margin:0; }
  sz-side-menu::part(controls), sz-user-panel::part(toolbar) { border:0; background:transparent; }
  sz-user-panel::part(panel) { display:flex; align-items:center; gap:1rem;
    background:transparent; border:0; padding:0; margin:0; }
  sz-user-panel::part(identity) { gap:.5rem; }
  sz-user-panel::part(welcome), sz-user-panel::part(email) { font-size:.6875rem; }
  sz-user-panel::part(name) { font-size:.8125rem; }

  .sidebar.left > .page-title a { color:var(--bao-paper); font-weight:var(--bao-w-bold);
    font-size:1.0625rem; letter-spacing:-.02em; text-decoration:none; }
  .sidebar.left > .page-title a::after { content:""; display:inline-block;
    inline-size:.55rem; block-size:.55rem; margin-inline-start:.4rem;
    background:var(--bao-accent); }

  .sazai-nav-menu-mount > .sazai-nav-content {
    display:flex !important; gap:1.75rem; align-items:center; position:static !important;
    background:transparent !important; border:0 !important; padding:0 !important; }
  sz-nav-menu::part(row) { color:var(--bao-paper); font-weight:var(--bao-w-reg);
                           font-size:.9375rem; }
  sz-nav-menu::part(row):hover { color:var(--bao-accent); }
  sz-nav-menu::part(box) { background:var(--bao-black); border:1px solid var(--bao-hair); }

  body > .search, .sidebar.left .search { margin-inline-start:auto; }
  .search-button { background:transparent !important; border:0 !important; }
  .search-button p, .search-button svg { color:var(--bao-paper); }

  /* ===================== THE HEAD IS THE WHOLE DESIGN ===================== */
  .center > .page-header { background:var(--bao-black); padding:7rem var(--bao-gutter) 2rem; }
  .center > .page-header h1, .center article h1 {
    color:var(--bao-paper); font-size:clamp(2.75rem, 7.6vw, 6.375rem); line-height:1;
    letter-spacing:-.03em; font-weight:var(--bao-w-med); }

  sz-lotus { background:var(--bao-black) !important; }
  sz-lotus::part(stage) { background:var(--bao-black); }
  sz-lotus > [slot="title"] { color:var(--bao-paper); font-weight:var(--bao-w-med);
    font-size:clamp(2.25rem, 6vw, 5rem); line-height:1; letter-spacing:-.03em; }

  /* the serif, and its one job */
  .center article > .markdown-preview-view > p:first-child {
    font-family:var(--bao-serif); font-weight:var(--bao-w-light);
    font-size:1.375rem; line-height:1.45; color:var(--bao-paper); }

  .center > article { max-inline-size:var(--bao-measure); padding-inline:var(--bao-gutter); }
  .center article h2 { color:var(--bao-paper); font-size:2.75rem; line-height:1.05;
                       letter-spacing:-.025em; font-weight:var(--bao-w-med); }
  .center article h3 { color:var(--bao-paper); font-size:1.375rem; line-height:1.25;
                       letter-spacing:-.01em; font-weight:var(--bao-w-med); }
  .center article p  { font-size:1rem; line-height:1.6; color:var(--bao-body); }
  .center article p > strong { color:var(--bao-paper); font-weight:var(--bao-w-bold); }
  .center > hr { border:0; border-block-start:1px solid var(--bao-hair); }

  /* a card is one step off the ground, with the accent as a short rule above its eyebrow */
  .acts { display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:1rem; }
  .act { background:var(--bao-card); padding:2.25rem 1.75rem; border:0; }
  .act > b { display:block; color:var(--bao-paper); font-size:1.25rem;
             font-weight:var(--bao-w-med); letter-spacing:-.015em; margin-block-end:.5rem; }
  .act > b::before { content:""; display:block; inline-size:1.75rem; block-size:2px;
                     background:var(--bao-accent); margin-block-end:1rem; }
  .act > span { color:var(--bao-body); font-size:.9375rem; }

  a, a.internal { color:var(--bao-paper); text-decoration:underline;
                  text-underline-offset:.22em; text-decoration-thickness:1px; }
  a:hover { color:var(--bao-accent); }

  /* no button carries a background here: it is a label, a rule, and an accent square */
  sz-vault-access::part(google), sz-vault-access::part(microsoft) {
    background:transparent; color:var(--bao-paper); border:0;
    border-block-end:1px solid var(--bao-paper); padding:.65rem 0;
    font-weight:var(--bao-w-med); }
  sz-vault-access::part(google):hover, sz-vault-access::part(microsoft):hover {
    border-block-end-color:var(--bao-accent); color:var(--bao-accent); }
  sz-vault-access::part(heading) { color:var(--bao-paper); font-weight:var(--bao-w-med);
                                   letter-spacing:-.02em; }

  .page > #quartz-body .sidebar.right { background:var(--bao-black);
    border-inline-start:1px solid var(--bao-hair); padding:2rem 1.5rem; }
  .sidebar.right h3 { color:var(--bao-paper); font-size:.8125rem;
                      font-weight:var(--bao-w-med); }

  .page > #quartz-body > footer { background:var(--bao-black); color:var(--bao-paper);
    padding-block:4rem; border-block-start:1px solid var(--bao-hair); }
  sz-site-footer::part(heading) { color:var(--bao-paper); font-size:.8125rem;
                                  font-weight:var(--bao-w-bold); }
  sz-site-footer::part(row) { color:var(--bao-body); font-weight:var(--bao-w-reg); }
  sz-site-footer::part(row):hover { color:var(--bao-accent); }
  sz-site-footer::part(copyright) { color:var(--bao-hair); font-size:.8125rem; }

  sz-side-menu::part(panel) { background:var(--bao-card); color:var(--bao-paper); border:0; }
  sz-side-menu::part(pitch) { color:var(--bao-body);
    border-inline-start:1px solid var(--bao-hair); padding-inline-start:1.5rem; }
  sz-side-menu::part(here) { color:var(--bao-accent); }
  sz-user-panel::part(panel) { background:var(--bao-card); color:var(--bao-paper); }
  sz-user-panel::part(email) { color:var(--bao-body); }

  sz-library::part(card) { background:var(--bao-card); border:0; }
  sz-library::part(header) { color:var(--bao-paper); font-weight:var(--bao-w-med); }

  .center article pre { background:var(--bao-card); color:var(--bao-paper); }
  .center article :not(pre) > code { background:var(--bao-card); color:var(--bao-paper); }
  .center article table { border-collapse:collapse; }
  .center article th { background:var(--bao-card); color:var(--bao-paper);
                       font-weight:var(--bao-w-bold); text-align:start; }
  .center article td { border-block-start:1px solid var(--bao-hair); }
  ::selection { background:var(--bao-accent); color:var(--bao-paper); }
}

/* The light face is the same system inverted, because this client has no light surface: the
   inversion is declared rather than invented, so a reader who forces light is not left unstyled. */
:root[data-skin="baobab"][data-theme="light"] {
  body { background:var(--bao-paper); color:var(--bao-inv-ink); }
  .page > #quartz-body .sidebar.left { background:var(--bao-paper) !important;
    border-block-end:1px solid var(--bao-inv-hair) !important; }
  .sidebar.left > .page-title a, sz-nav-menu::part(row) { color:var(--bao-black); }
  .search-button p, .search-button svg { color:var(--bao-black); }
  .center > .page-header { background:var(--bao-paper); }
  sz-lotus, sz-lotus::part(stage) { background:var(--bao-paper) !important; }
  .center > .page-header h1, .center article h1, .center article h2, .center article h3,
  sz-lotus > [slot="title"] { color:var(--bao-black); }
  .center article > .markdown-preview-view > p:first-child { color:var(--bao-black); }
  .center article p { color:var(--bao-inv-ink); }
  .act { background:var(--bao-inv-card); }
  .act > b { color:var(--bao-black); }
  .act > span { color:var(--bao-inv-ink); }
  a, a.internal { color:var(--bao-black); }
  .page > #quartz-body .sidebar.right { background:var(--bao-paper);
                                        border-inline-start-color:var(--bao-inv-hair); }
  .sidebar.right h3 { color:var(--bao-black); }
  .page > #quartz-body > footer { background:var(--bao-paper); color:var(--bao-black);
                                  border-block-start-color:var(--bao-inv-hair); }
  sz-site-footer::part(heading) { color:var(--bao-black); }
  sz-site-footer::part(row) { color:var(--bao-inv-ink); }
  sz-library::part(card) { background:var(--bao-inv-card); }
  sz-library::part(header) { color:var(--bao-black); }
  .center article pre, .center article :not(pre) > code { background:var(--bao-inv-card);
                                                          color:var(--bao-black); }
  .center article th { background:var(--bao-inv-card); color:var(--bao-black); }
  .center article td { border-block-start-color:var(--bao-inv-hair); }
}