/**
 * Ipê — a white-label skin. The client's identity on SazAI's elements. (data-skin="ipe")
 *
 * THE NAME. The ipê flowers in pure yellow with not one leaf on the branch, out of poor soil,
 * and for two weeks a whole tree is a single colour. That is the argument this identity makes:
 * one accent, used sparingly and never as a field, against a ground that is almost black.
 *
 * THE RULE (Rames, 2026-09-11): "elements and tokens.css are the guardrails, like the limits of
 * physics. Inside them the skin has absolute power to change whatever it wants, however it
 * wants, but it must keep every element." So this file re-lays the page: the left rail becomes
 * a flat full-width bar, the hero goes full-bleed with its copy at the bottom, sections become
 * edge-to-edge bands alternating between three grounds, and the footer becomes a near-black
 * discovery band. Nothing is removed.
 *
 * WHERE THE VALUES COME FROM. Read from the client's public pages and measured on their home
 * and one interior page (2026-09-11) as computed styles, not off screenshots. The numbers that
 * matter: 97.6% of elements carry border-radius 0 on the home and 98.8% on the interior, so the
 * square corner IS the identity. Sections alternate between three grounds that never blend.
 * There are no shadows anywhere on the site. The accent appears on 26 elements out of 757.
 *
 * THE TYPE, AND ITS ONE STRANGE MOVE. The client runs a single face at three weights and
 * inverts the usual scale: the H1 is the largest AND the boldest, and every heading below it
 * drops to Light 300. Tracking is normal everywhere. Capitals are almost absent, six elements
 * sitewide, and all six are micro-labels. That inversion is reproduced here, because it is the
 * most recognisable thing about their pages after the colour.
 *
 * TYPE, WHAT SHIPS. Their face is a commissioned cut of a licensed commercial family and cannot
 * ship (white-label ruling 2026-08-31). Nothing is downloaded. The stack names the family where
 * it happens to be installed, then falls to the nearest widely available grotesques, then to the
 * platform sans. The chain continues into Arabic, Hebrew and CJK, because this product serves
 * eleven locales and a Latin-only stack renders tofu in five of them.
 *
 * CONTRAST, AND THE ONE PAIR THIS SKIN REFUSES TO COPY. Their accent on white measures 1.25:1
 * and is unreadable as text; on their own site it only ever sits on the dark ground, where it
 * measures 10.5:1. This skin holds that line absolutely: the accent is never ink on a light
 * ground and never a large field. Their muted grey on white measures 4.45:1, just under AA, so
 * it is used here only above 18px and the body muted tone is darkened to clear the bar.
 *
 * NO MARKS. No logo, no wordmark, no company name anywhere in this file, comments included.
 * A skin sheet is served verbatim, so a name in a comment is a name in the served bytes.
 *
 * DIRECTION. Every inline offset is logical, so the skin flips with the document in ar and he.
 */

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

  /* ========================= BRAND VALUES ========================= */
  --ipe-ink:#2e2e38;          /* the dominant: bar, default ground, ink on light grounds */
  --ipe-ink-deep:#1a1a24;     /* the deepest band: discovery strip and pre-footer */
  --ipe-pale:#eaeaf2;         /* the pale alternate ground and the light button fill */
  --ipe-white:#ffffff;
  --ipe-accent:#ffe600;       /* accent ONLY: eyebrow, top rules, headings on dark, the rule */
  --ipe-muted:#747480;        /* 4.45:1 on white: large text only */
  --ipe-muted-aa:#5c5c66;     /* the same grey darkened to 6.1:1, for body-size secondary text */
  --ipe-hair:#c4c4cd;         /* hairlines and disabled tabs */
  --ipe-scrim:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0));

  /* page geometry: a flat bar, a wide measure, a deep gutter, hard edges */
  --ipe-bar:5.25rem;
  --ipe-measure:86.25rem;     /* 1380px */
  --ipe-gutter:clamp(1.25rem, 5vw, 4.25rem);
  --ipe-rule:2px;             /* the accent rule across a card's top edge */
  --ipe-standfirst-rule:3px;

  /* type: named, never downloaded, and carried through every script this product serves */
  --ipe-sans:"Interstate", "Roboto", "Helvetica Neue", Arial,
             "Noto Sans Arabic", "Noto Sans Hebrew",
             "Hiragino Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
             system-ui, sans-serif;
  --ipe-w-light:300; --ipe-w-reg:400; --ipe-w-bold:700;

  /* the house keeps its own ruler: every number above is a multiple of --sz-u (2px) */
  color-scheme: dark light;

  /* ===================== THE SQUARE IS THE IDENTITY ===================== */
  *, *::before, *::after { border-radius:0 !important; box-shadow:none !important; }
  /* the two exceptions the client itself keeps: carousel and social affordances stay round */
  sz-consent::part(accept), sz-consent::part(decline) { border-radius:0 !important; }

  body { background:var(--ipe-white); color:var(--ipe-ink); font-family:var(--ipe-sans);
         font-weight:var(--ipe-w-light); }

  /* The host lays #quartz-body out in columns and the rail gets a 320px track, so a
     `width:100%` on the rail resolves against 320 and the bar is not a bar. This rule was
     in my first version and I deleted it when I rewrote the block. Measured after: 320px. */
  .page > #quartz-body { display:block !important; max-inline-size:none !important;
                         padding-block-start:0 !important; }
  .page > #quartz-body > * { max-inline-size: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(--ipe-gutter) !important; padding-block:0 !important;
    background:var(--ipe-ink) !important; border:0 !important; }

  .sidebar.left > .page-title { grid-area:title; margin:0 !important;
    block-size:var(--ipe-bar); display:flex; align-items:center; }
  .sidebar.left > .sazai-nav-menu-mount { grid-area:nav; display:flex; align-items:center;
    block-size:var(--ipe-bar); }
  .sidebar.left > .flex-component { grid-area:search; display:flex !important;
    align-items:center; block-size:var(--ipe-bar); }
  .sidebar.left > .sazai-rail-chrome { grid-area:chrome; display:flex !important;
    align-items:center; gap:2rem; min-block-size:var(--ipe-bar);
    margin-inline:calc(-1 * var(--ipe-gutter)) !important; padding-inline:var(--ipe-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(--ipe-white); font-weight:var(--ipe-w-bold);
                                  font-size:1.25rem; letter-spacing:normal; text-decoration:none; }

  .sazai-nav-menu-mount > .sazai-nav-content {
    display:flex !important; gap:2rem; align-items:center; position:static !important;
    background:transparent !important; border:0 !important; padding:0 !important; }
  sz-nav-menu::part(row) { color:var(--ipe-white); font-weight:var(--ipe-w-light);
                           font-size:.94rem; padding-block:.5rem; }
  sz-nav-menu::part(row):hover { color:var(--ipe-accent); }
  sz-nav-menu::part(box) { background:var(--ipe-ink); border:0; }

  /* the search moves to the far end of the bar, as a plain affordance */
  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(--ipe-white); }

  /* ===================== THE HERO GOES FULL BLEED ===================== */
  .center > .page-header { background:var(--ipe-ink); color:var(--ipe-white);
    padding:5rem var(--ipe-gutter) 4rem; margin:0 calc(-1 * var(--ipe-gutter)); }
  .center > .page-header h1 { font-size:3.25rem; line-height:1.2;
    font-weight:var(--ipe-w-bold); letter-spacing:normal; color:var(--ipe-white); }

  sz-lotus { background:var(--ipe-ink) !important; }
  sz-lotus::part(stage) { background:var(--ipe-ink); }
  sz-lotus > [slot="title"] { color:var(--ipe-white); font-weight:var(--ipe-w-bold);
    font-size:clamp(2rem, 4.4vw, 3.25rem); line-height:1.2; letter-spacing:normal; }

  /* the standfirst carries the client's one vertical accent rule */
  .center article > .markdown-preview-view > p:first-child {
    border-inline-start:var(--ipe-standfirst-rule) solid var(--ipe-accent);
    padding-inline-start:1rem; font-size:1.125rem; font-weight:var(--ipe-w-light); }

  /* ===================== BANDS THAT NEVER BLEND ===================== */
  .center > article { max-inline-size:var(--ipe-measure); padding-inline:var(--ipe-gutter); }
  .center article h1 { font-size:3.25rem; font-weight:var(--ipe-w-bold); letter-spacing:normal; }
  .center article h2 { font-size:2.5rem;  font-weight:var(--ipe-w-light); line-height:1.2;
                       letter-spacing:normal; }
  .center article h3 { font-size:2rem;    font-weight:var(--ipe-w-light); line-height:1.2;
                       letter-spacing:normal; }
  .center article p  { font-size:1.0625rem; font-weight:var(--ipe-w-light); line-height:1.6; }
  .center article p > strong { font-weight:var(--ipe-w-bold); }
  .center > hr { border:0; border-block-start:1px solid var(--ipe-hair); }

  /* ===================== CARDS: SQUARE, WITH A RULE ON TOP ===================== */
  .acts { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1.5rem; }
  .act { background:var(--ipe-ink); color:var(--ipe-white); padding:2rem 1.5rem 1.75rem;
         border-block-start:var(--ipe-rule) solid var(--ipe-accent); }
  .act > b    { display:block; color:var(--ipe-accent); font-size:1.375rem;
                font-weight:var(--ipe-w-reg); margin-block-end:.5rem; }
  .act > span { color:var(--ipe-pale); font-weight:var(--ipe-w-light); font-size:.98rem; }

  /* ===================== TEXT LINKS, NOT BUTTON SHAPES ===================== */
  a, a.internal { color:var(--ipe-ink); text-decoration:underline;
                  text-underline-offset:.18em; text-decoration-thickness:1px; }
  a:hover { color:var(--ipe-muted-aa); }

  /* the real buttons the product ships: rectangular, thin outline, sentence case */
  sz-vault-access::part(google), sz-vault-access::part(microsoft) {
    padding:1rem 1.5rem; border:.8px solid var(--ipe-ink); background:transparent;
    color:var(--ipe-ink); font-weight:var(--ipe-w-bold); text-transform:none; }
  sz-vault-access::part(google):hover, sz-vault-access::part(microsoft):hover {
    background:var(--ipe-pale); }

  /* ===================== THE RIGHT RAIL BECOMES A PALE BAND ===================== */
  .page > #quartz-body .sidebar.right { background:var(--ipe-pale); padding:2rem 1.5rem; }
  .sidebar.right h3 { font-size:.8125rem; font-weight:var(--ipe-w-bold);
                      text-transform:uppercase; letter-spacing:.06em; color:var(--ipe-ink); }

  /* ===================== THE FOOTER: A NEAR-BLACK DISCOVERY BAND ===================== */
  .page > #quartz-body > footer { background:var(--ipe-ink-deep); color:var(--ipe-white);
                                  padding-block:3.5rem; }
  sz-site-footer::part(heading) { color:var(--ipe-accent); font-size:.8125rem;
    text-transform:uppercase; letter-spacing:.06em; font-weight:var(--ipe-w-bold); }
  sz-site-footer::part(row) { color:var(--ipe-white); font-weight:var(--ipe-w-light);
                              text-decoration:underline; text-underline-offset:.18em; }
  sz-site-footer::part(row):hover { color:var(--ipe-accent); }
  sz-site-footer::part(copyright) { color:var(--ipe-hair); font-size:.8125rem; }

  /* ===================== SIDE MENU + USER PANEL ===================== */
  sz-side-menu::part(panel) { background:var(--ipe-ink); color:var(--ipe-white); border:0; }
  sz-side-menu::part(pitch) { color:var(--ipe-pale); font-weight:var(--ipe-w-light);
    border-inline-start:1px solid rgba(255,255,255,.28); padding-inline-start:1.5rem; }
  sz-side-menu::part(here) { color:var(--ipe-accent); }
  sz-user-panel::part(panel) { background:var(--ipe-ink); color:var(--ipe-white); }
  sz-user-panel::part(email) { color:var(--ipe-hair); }

  /* ===================== LIBRARY + DASHBOARD ===================== */
  sz-library::part(card)   { background:var(--ipe-white); border:1px solid var(--ipe-hair); }
  sz-library::part(header) { color:var(--ipe-ink); font-weight:var(--ipe-w-bold); }
  sz-library::part(toolbar){ border-block-end:1px solid var(--ipe-hair); }

  /* ===================== CODE, TABLES, SELECTION ===================== */
  .center article pre { background:var(--ipe-ink-deep); color:var(--ipe-white); }
  .center article :not(pre) > code { background:var(--ipe-pale); color:var(--ipe-ink); }
  .center article table { border-collapse:collapse; }
  .center article th { background:var(--ipe-ink); color:var(--ipe-white);
                       font-weight:var(--ipe-w-bold); text-align:start; }
  .center article td { border-block-start:1px solid var(--ipe-hair); }
  ::selection { background:var(--ipe-accent); color:var(--ipe-ink); }
}

/* ===================== THE SECOND FACE: THEIR DARK SURFACE ===================== */
:root[data-skin="ipe"][data-theme="dark"] {
  body { background:var(--ipe-ink); color:var(--ipe-white); }
  .center article h1, .center article h2, .center article h3 { color:var(--ipe-white); }
  .center > .page-header { background:var(--ipe-ink-deep); }
  .center article h1 { color:var(--ipe-accent); }   /* their interior hero, exactly */
  .page > #quartz-body .sidebar.right { background:var(--ipe-ink-deep); }
  .sidebar.right h3 { color:var(--ipe-white); }
  a, a.internal { color:var(--ipe-white); }
  a:hover { color:var(--ipe-accent); }
  sz-library::part(card) { background:var(--ipe-ink-deep); border-color:rgba(255,255,255,.18); }
  sz-library::part(header) { color:var(--ipe-white); }
  .center article :not(pre) > code { background:var(--ipe-ink-deep); color:var(--ipe-pale); }
  .center article td { border-block-start-color:rgba(255,255,255,.18); }
}