/* Generated from kit/tokens/tokens.json by scripts/build-tokens.mjs in
   object-themes. Do not edit: change tokens.json and run `npm run tokens`.
   Layout and motion values (gutter, container, transitions) are hand-written
   in layout.css. The light theme is the default; the dark one applies under
   data-theme="dark" (theme.css). */
:root,
[data-theme="light"] {
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Teal scale: one hue (OKLCH 180.9, the same in CIELAB LCh), lightness from 50 to 975. Step 500 is Object Teal and does not change. Every teal role below takes its value from a step; a teal that is not a step does not belong in an app. */
    --teal-50: #f1f9f7;
    --teal-100: #daf1ec;
    --teal-200: #b4e3d9;
    --teal-300: #8cd5c7;
    --teal-400: #68c4b4;
    --teal-500: #4ab3a2;               /* Object Teal, the brand colour */
    --teal-600: #359586;
    --teal-700: #2c7a6e;
    --teal-800: #215b52;
    --teal-900: #174039;
    --teal-950: #0f2d28;
    --teal-975: #0c211d;

    /* Orange scale: the hue of Object Orange (OKLCH 64), every step at 95% of the chroma sRGB allows at its lightness, so the whole scale is equally vivid. Step 500 is Object Orange. */
    --orange-50: #f9f6f4;
    --orange-100: #f6eae0;
    --orange-200: #f9d7b9;
    --orange-300: #fdc28b;
    --orange-400: #fcb064;
    --orange-500: #fc9a22;             /* Object Orange, the accent colour */
    --orange-600: #e28a1d;
    --orange-700: #c57718;
    --orange-800: #9c5e11;
    --orange-900: #76450a;
    --orange-950: #522e04;

    /* Dark navy scale, a colour of the product family (2026-10-21): the hue of Phenome navy, lightness on the profile of the teal scale. Step 950 is the lead, white text on it 14.4:1; its action colour is saffron 300. */
    --navy-50: #f3f7ff;
    --navy-100: #e2ebff;
    --navy-200: #c4d8ff;
    --navy-300: #a7c4ff;
    --navy-400: #89afff;
    --navy-500: #6c9bff;
    --navy-600: #527edf;
    --navy-700: #4367b7;
    --navy-800: #324d89;
    --navy-900: #223661;
    --navy-950: #1a2949;               /* Dark navy, the lead of the scale */

    /* Terracotta scale, a colour of the product family (2026-10-21). Step 700 is the lead, white text on it 5.0:1; its action colour is cream, saffron 100. Steps 400 and 500 are turned 2 and 1 degrees of hue away from the error colour to keep CIEDE2000 10 from it. */
    --terracotta-50: #fff4f2;
    --terracotta-100: #ffe4de;
    --terracotta-200: #ffc9bc;
    --terracotta-300: #ffad98;
    --terracotta-400: #ff8b74;
    --terracotta-500: #f66f53;
    --terracotta-600: #d0583d;
    --terracotta-700: #b5523b;         /* Terracotta, the lead of the scale */
    --terracotta-800: #803625;
    --terracotta-900: #5b2519;
    --terracotta-950: #411a10;

    /* Petrol scale, a colour of the product family (2026-10-21). Step 800 is the lead, white text on it 6.6:1; its action colour is saffron 300. */
    --petrol-50: #eff9fc;
    --petrol-100: #d4f1fa;
    --petrol-200: #a7e2f6;
    --petrol-300: #75d4f0;
    --petrol-400: #43c2e5;
    --petrol-500: #04b0d5;
    --petrol-600: #0092b1;
    --petrol-700: #017892;
    --petrol-800: #12657a;             /* Petrol, the lead of the scale */
    --petrol-900: #013f4e;
    --petrol-950: #022c37;

    /* Saffron scale, a colour of the product family (2026-10-21). Step 300 is the lead, ink text on it 10.3:1; its action colour is navy 950. Step 100 is cream, the sixth colour of the family: ink on it 14.2:1, its action colour terracotta 700. */
    --saffron-50: #faf7eb;
    --saffron-100: #f5ecc9;            /* Cream, the light companion of saffron: the lead of the cream product and the action colour of terracotta */
    --saffron-200: #ebd790;
    --saffron-300: #e7c952;            /* Saffron, the lead of the scale */
    --saffron-400: #d0ae03;
    --saffron-500: #bb9c02;
    --saffron-600: #9b8102;            /* Saffron as an underline or another graphic on white paper, 3.8:1 (WCAG 3:1 for graphics); not for text, under 4.5:1 */
    --saffron-700: #7f6a01;
    --saffron-800: #5f4f01;
    --saffron-900: #433701;
    --saffron-950: #302600;

    --bg-base: #215b52;                /* Top of the page gradient: teal 800 in light, teal 900 in dark */
    --bg-top: #4ab3a2;                 /* Bottom of the page gradient: Object Teal (teal 500) in light, teal 700 in dark */
    --bg-surface: rgba(16, 16, 17, 0.65); /* Fill of inputs and controls on the teal page */
    --bg-surface-hover: rgba(16, 16, 17, 0.8); /* Fill of a control on the teal page, on hover */
    --bg-panel: rgba(16, 16, 17, 0.8); /* Dark panel on the teal page: the website chat, side panels of apps */
    --bg-grid-opacity: 1;              /* Triangle field (GridBlobBackground) */

    --color-primary: #4ab3a2;          /* Object Teal */
    --color-primary-hover: #68c4b4;    /* Teal fill on hover: teal 400 */
    --color-primary-light: rgba(74, 179, 162, 0.15); /* Teal tint behind a highlighted item, such as a chat message */

    /* Paleta pomarańczy: baza / 90% / 80% */
    --color-accent: #fc9a22;           /* Object Orange (orange 500): buttons, download links, the marker of the active tab */
    --color-accent-hover: #e28a1d;     /* Orange fill on hover: orange 600 */
    --color-accent-active: #c57718;    /* Orange fill pressed, and large orange text on paper: orange 700 */
    --color-accent-highlight: #fdc28b; /* Highlight behind ink text and the fill of an orange badge: orange 300, ink on it 10.6:1 */
    --color-on-accent: #0c211d;        /* Text on orange and on Object Teal: teal 975 */
    --color-warn: #e08a5c;             /* Wyłącznie stany błędu */

    --border-light: rgba(255, 255, 255, 0.5); /* Lines and outlines on the teal page */
    --border-focus: #ffffff;           /* Outline of a hovered or focused control on the teal page */

    --glass-fill: rgba(255, 255, 255, 0.08); /* Glass fill on the teal page: header buttons, the theme switch */
    --glass-fill-hover: rgba(255, 255, 255, 0.16); /* Glass fill on hover */
    --glass-blur: 4px;

    --text-main: #ffffff;              /* Text on the teal page */
    --text-muted: rgba(255, 255, 255, 0.82); /* Secondary text on the teal page */
    --text-dark: #0c211d;              /* Text on the sheet: teal 975 in light, teal 50 on the dark sheet */
    --text-on-teal: #ffffff;           /* White on teal, also inside paper: paper does not re-point it */

    /* Papier arkusza i karty wewnątrz niego. */
    --paper: rgba(241, 249, 247, 0.96); /* The sheet laid over the page: teal 50 in light, teal 975 in dark */
    --paper-text-muted: rgba(12, 33, 29, 0.72); /* Secondary text on paper */
    --paper-line: rgba(12, 33, 29, 0.20); /* Lines and outlines on paper */
    --paper-line-focus: rgba(12, 33, 29, 0.45); /* Outline of a hovered or focused control on paper */
    --paper-card: rgba(12, 33, 29, 0.04); /* Card fill inside paper */
    --paper-card-hover: rgba(12, 33, 29, 0.08); /* Card fill inside paper, on hover */
    --paper-teal: #215b52;             /* Teal text on the sheet (links, headings in an editor): teal 800 in light (7:1 on paper, 6.6:1 on a card), Object Teal in dark */
    --paper-orange: #9c5e11;           /* Orange text on the sheet: orange 800 in light (4.5:1 on paper), Object Orange in dark */
    --paper-tabs: rgba(12, 33, 29, 0.08); /* Tab strip at the top of a sheet, a shade below the sheet: ink at 8% in light, in dark the fill of controls on the teal page (as --bg-surface) */
    --paper-tab-active: #f1f9f7;       /* The open tab in the strip: the sheet colour in both themes (teal 50 / teal 975) */
}

[data-theme="dark"] {
    --bg-base: #174039;
    --bg-top: #2c7a6e;
    --bg-grid-opacity: 0.5;
    --text-dark: #f1f9f7;
    --paper: rgba(12, 33, 29, 0.94);
    --paper-text-muted: rgba(241, 249, 247, 0.72);
    --paper-line: rgba(241, 249, 247, 0.20);
    --paper-line-focus: rgba(241, 249, 247, 0.48);
    --paper-card: rgba(241, 249, 247, 0.05);
    --paper-card-hover: rgba(241, 249, 247, 0.09);
    --paper-teal: #4ab3a2;
    --paper-orange: #fc9a22;
    --paper-tabs: rgba(16, 16, 17, 0.65);
    --paper-tab-active: #0c211d;
}


/* Light and dark theme. tokens.css declares the light values on :root and the
   dark ones under [data-theme="dark"], re-pointing the same names, so no
   component carries code per theme. theme/themeInit.js puts the attribute on
   <html> before the first paint; without it a page stays light, which is how
   object.pl, the print templates and the PDF service see it.

   data-theme="light" on any other element keeps the light theme inside a
   dark page: print and PDF previews, the brand field, e-mail signatures. Such
   an element starts from the theme's canvas, white text on teal; a light
   sheet inside it is a .paper of its own or sets its colours from the paper
   tokens (--paper, --text-dark, --paper-line), as the letterhead does. */
:root,
[data-theme="light"] {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

/* An element with its own theme does not inherit the page's text colour.
   Zero specificity: any class that sets a colour wins, wherever it loads. */
:where([data-theme]) {
    color: var(--text-main);
}


/* Layout and motion values of the kit, hand-written: they change at breakpoints
   or are built with calc(), which tokens.json does not describe. Brand colours
   and fonts are in tokens.css, generated from tokens.json. */
:root {
    --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-medium: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* Siatka strony. Jeden kontener dla nagłówka, treści i stopki:
         S  < 640       gutter 16
         M  640–1023    gutter 24
         L  ≥ 1024      gutter 32, kontener zatrzymany na 1200px (XL od 1440)
       Progi stoją literalnie w @media, bo var() nie działa w warunku. */
    --gutter: 16px;
    --container: min(100% - 2 * var(--gutter), 1200px);
}

@media (width >= 640px) {
    :root { --gutter: 24px; }
}

@media (width >= 1024px) {
    :root { --gutter: 32px; }
}


/* Reset, the page frame and the background layers. The window scrolls; there
   is no viewport-high frame and no scroll region inside a card. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-base);
}

body {
    font-family: var(--font-sans);
    background-color: transparent;
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

#root {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    width: 100%;
}

.container {
    width: var(--container);
    margin-inline: auto;
}

/* The page background, the same in every app on the kit
   (https://ci.apps.object.pl/imagery/page-background/):
     1. the gradient below, from --bg-top at the bottom to --bg-base at 78% of
        the height, with --bg-base on html as the solid colour under it;
     2. the triangle field, GridBlobBackground's SVG in React or the canvas of
        mountGridBlob() (components/layout/gridBlobCanvas.ts) without it.
   The gradient sits on a fixed pseudo-element of html, not on
   background-attachment: fixed, which iOS Safari ignores and which would
   stretch the gradient over the whole length of a long page. Its height is
   100lvh, the window with Safari's toolbars retracted, so no strip of the
   solid colour shows at the bottom while they slide away. There is no dot
   grid: the 24 px dots of the earlier layer beat against the 20 px triangles. */
html::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    height: 100lvh;
    z-index: -5;
    pointer-events: none;
    background: linear-gradient(0deg, var(--bg-top) 0%, var(--bg-base) 78%);
}

/* A fixed element repeats on every printed sheet; print gets no page background. */
@media print {
    html::before {
        content: none;
    }
}

.grid-blob-svg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -3;
    opacity: var(--bg-grid-opacity);
}

/* Content always starts 32px under the header; nothing is centred vertically. */
.site-main {
    flex: 1;
    padding-block: 32px 64px;
}

/* One section is shown at a time. Inactive ones leave the flow so lazy images
   inside them do not load until the section is opened. */
.slide {
    display: none;
}

.slide.active {
    display: block;
    animation: slide-in 0.24s ease-in;
}

/* Visible by default: the animation only adds the fade, the resting state is
   opacity 1 whether or not it runs. */
@keyframes slide-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .slide.active { animation: none; }
}

/* Utilities */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* Shared controls: the orange button, the glass panel and the paper token set. */

/* Orange action button. Also used as a plain link (<a class="btn-secondary">). */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 44px;
    padding: 0 24px;
    border: 1px solid var(--color-accent);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover {
    border-color: var(--color-accent-hover);
    background-color: var(--color-accent-hover);
    color: #ffffff;
}

.btn-secondary:active {
    border-color: var(--color-accent-active);
    background-color: var(--color-accent-active);
    color: #ffffff;
}

.btn-secondary i {
    font-size: 15px;
}

.glass-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0;
    box-shadow: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.glass-panel:hover {
    border-color: var(--border-focus);
    background: var(--bg-surface-hover);
}

/* Paper: every sheet on the site. Text and line tokens inside it are re-pointed
   to the dark palette, so components read the same variable names on paper and
   on teal. */
.paper {
    --text-main: var(--text-dark);
    --text-muted: var(--paper-text-muted);
    --border-light: var(--paper-line);
    --border-focus: var(--paper-line-focus);
    --bg-surface: var(--paper-card);
    --bg-surface-hover: var(--paper-card-hover);
    background: var(--paper);
    color: var(--text-dark);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}

/* Cards on paper do not blur a second time and carry no outline: the lighter
   fill is enough to read them. */
.paper .glass-panel {
    border: none;
}

/* Desaturated so photos sit quietly next to the teal and white UI. */
.paper img.frame-photo {
    filter: saturate(0.5);
}


/* Site header: one component for every page, the landing pages included
   (scripts/prerender.mjs inlines this file there).
     < 880       row 1: logo + tagline | AI      row 2: menu button + actions
     880–1279    row 1: logo + tagline | AI      row 2: sections | actions
     ≥ 1280      one row: logo | sections | actions | AI
   Compact (site-header-inner--compact): < 640 menu button + actions; ≥ 640 one row. */
.site-header { position: relative; z-index: 30; padding-top: var(--gutter); }
.site-header-inner {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand brand ai" "toggle actions actions";
    align-items: center; column-gap: 8px; row-gap: 16px;
}
.brand {
    --logo-w: 128px; grid-area: brand; justify-self: start;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.logo-link { display: block; text-decoration: none; }
.logo-image { width: var(--logo-w); height: auto; display: block; }

/* A product site's name beside the logo (SiteHeader's brandName). */
.brand--named {
    display: grid; grid-template-columns: auto auto; grid-template-areas: "logo name" "tagline .";
    align-items: center; column-gap: 16px; row-gap: 8px;
}
.brand--named .logo-link { grid-area: logo; }
.brand--named .logo-tagline { grid-area: tagline; }
.brand-name {
    grid-area: name; align-self: stretch; display: flex; align-items: center;
    padding-left: 16px; border-left: 1px solid var(--border-light); color: var(--text-main);
    font-family: var(--font-sans); font-size: 30px; font-weight: 300; line-height: 1;
    letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
}
.brand-name:hover { border-left-color: var(--border-focus); }
@media (width < 360px) {
    .brand--named { column-gap: 12px; }
    .brand-name { padding-left: 12px; font-size: 24px; }
}

/* The triad under the logo, spread over the logo's width. */
.logo-tagline {
    display: flex; width: var(--logo-w); justify-content: space-between;
    font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 1px;
    text-transform: uppercase; line-height: 1.2; color: var(--text-muted);
    white-space: nowrap; pointer-events: none;
}
.logo-tagline-word { animation: logo-tagline-cycle 13.6s ease-in-out infinite; }
.logo-tagline-word:nth-child(2) { animation-delay: 0.4s; }
.logo-tagline-word:nth-child(3) { animation-delay: 0.8s; }
@keyframes logo-tagline-cycle {
    0%, 73.53% { opacity: 1; }
    77.21%, 90.44% { opacity: 0; }
    94.12%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .logo-tagline-word { animation: none; } }

/* Sections */
.site-nav { grid-area: nav; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; }
.nav-link {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    height: 36px; padding: 0 7px; border: 1px solid var(--border-light);
    background: var(--glass-fill); color: var(--text-muted); font-family: var(--font-mono);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.nav-link:hover { border-color: var(--border-focus); background: var(--glass-fill-hover); color: var(--text-main); }
.nav-link.active { border-color: var(--border-focus); background: var(--color-primary); color: #fff; }
.nav-link.active:hover { background: var(--color-primary-hover); }

/* Actions: demos, software, the audit. */
.nav-actions { grid-area: actions; justify-self: start; display: flex; align-items: center; gap: 8px; }
.nav-cta {
    display: inline-flex; align-items: center; flex-shrink: 0; height: 36px; padding: 0 10px;
    border: 1px solid var(--color-accent); font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent);
    text-decoration: none; white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.nav-cta:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); border-color: var(--color-accent-hover); }
.nav-cta:active { background: var(--color-accent); color: var(--color-on-accent); }

.nav-toggle, .ai-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; flex-shrink: 0;
    border: 1px solid var(--border-light); background: var(--glass-fill); color: var(--text-main);
    line-height: 1; cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.nav-toggle:hover, .ai-toggle:hover { border-color: var(--border-focus); background: var(--glass-fill-hover); }
.nav-toggle { grid-area: toggle; font-size: 20px; }
.ai-toggle { grid-area: ai; justify-self: end; align-self: start; color: var(--text-muted); font-size: 18px; }
.ai-toggle.is-open { border-color: var(--border-focus); background: var(--color-primary); color: var(--color-on-accent); }

/* Below 880 the sections live in a list under the menu button. */
@media (width < 880px) {
    .site-nav {
        grid-area: toggle; display: none; position: absolute; top: calc(100% + 8px); left: var(--gutter);
        flex-direction: column; align-items: stretch; gap: 6px; min-width: 200px; padding: 8px;
        border: 1px solid var(--paper-line); background: var(--paper);
        box-shadow: 0 8px 24px rgba(12, 33, 29, 0.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .site-nav.is-open { display: flex; }
    .nav-link {
        height: auto; padding: 10px 16px; justify-content: flex-start;
        border-color: var(--paper-line); background: var(--paper-card); color: var(--paper-text-muted);
    }
    .nav-link:hover { border-color: var(--paper-line-focus); background: var(--paper-card-hover); color: var(--text-dark); }
    .nav-link.active { border-color: var(--color-primary); color: var(--text-on-teal); }
}

@media (880px <= width < 1280px) {
    .site-header-inner { grid-template-columns: 1fr auto; grid-template-areas: "brand ai" "nav actions"; }
    .nav-toggle { display: none; }
}

@media (width >= 1280px) {
    .site-header-inner {
        grid-template-columns: auto 1fr auto auto; grid-template-areas: "brand nav actions ai";
        align-items: start; column-gap: 32px;
    }
    .nav-toggle { display: none; }
    .nav-link { font-size: 13px; padding: 0 13px; }
    .nav-actions { gap: 10px; }
    .nav-cta { font-size: 12px; padding: 0 14px; }
    .ai-toggle { margin-left: -16px; }
    .site-header-inner--no-ai { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav actions"; }
}

/* Compact header from 640: one row at every width. */
@media (width >= 640px) {
    .site-header-inner.site-header-inner--compact {
        grid-template-columns: auto 1fr auto auto; grid-template-areas: "brand nav actions ai";
        align-items: start; column-gap: 24px;
    }
    .site-header-inner--compact.site-header-inner--no-ai { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav actions"; }
    .site-header-inner--compact .nav-toggle { display: none; }
}

@media (640px <= width < 880px) {
    .site-header-inner--compact .site-nav {
        grid-area: nav; display: flex; position: static; flex-direction: row; align-items: center;
        gap: 8px; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .site-header-inner--compact .nav-link {
        height: 36px; padding: 0 7px; justify-content: center;
        border-color: var(--border-light); background: var(--glass-fill); color: var(--text-muted);
    }
    .site-header-inner--compact .nav-link:hover { border-color: var(--border-focus); background: var(--glass-fill-hover); color: var(--text-main); }
    .site-header-inner--compact .nav-link.active { border-color: var(--border-focus); background: var(--color-primary); color: #fff; }
}

@media (width >= 1280px) { .site-header-inner.site-header-inner--compact { column-gap: 32px; } }
@media (width < 360px) { .nav-actions { gap: 4px; } .nav-cta { padding: 0 8px; } }

/* Product site header (.site-header-inner--product: phenome, fraxin, tila .object.pl). */
.site-header-inner--product { --product-button-height: 36px; }
.site-header-inner--product :is(.nav-link, .nav-cta, .nav-toggle, .theme-toggle, .lang-switch) { height: var(--product-button-height); }
.site-header-inner--product .brand--own .brand-name { align-self: start; height: var(--product-button-height); padding-left: 0; border-left: 0; }
.site-header-inner--product .brand--own .brand-name svg { display: block; width: auto; height: var(--product-button-height); overflow: visible; }
.site-header-inner--product .logo-end {
    grid-area: ai; justify-self: end; align-self: start; display: block;
    height: var(--product-button-height); transition: opacity var(--transition-fast);
}
.site-header-inner--product .logo-end:hover { opacity: 0.8; }
.site-header-inner--product .logo-end .logo-image {
    width: auto; height: calc(var(--product-button-height) * 100 / 69.999375);
    transform: translateY(calc(var(--product-button-height) * -0.000001 / 69.999375));
}

.site-header-inner--product :is(.nav-link, .nav-toggle, .theme-toggle, .lang-switch) {
    border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #ffffff;
}
.site-header-inner--product :is(.nav-link, .nav-toggle, .theme-toggle, .lang-switch):hover {
    border-color: #ffffff; background: transparent; color: #ffffff;
}
.site-header-inner--product .nav-link.active, .site-header-inner--product .nav-link.active:hover {
    background: transparent; color: #ffffff; text-decoration: underline;
    text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.site-header-inner--product .nav-link.active { border-color: rgba(255, 255, 255, 0.5); }
.site-header-inner--product .nav-cta, .site-header-inner--product .nav-cta:active {
    border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent);
}
.site-header-inner--product .nav-cta:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); }

@media (1280px <= width < 1440px) {
    .site-header-inner--product:not(.site-header-inner--compact) {
        grid-template-columns: 1fr auto; grid-template-areas: "brand ai" "nav actions"; align-items: start; column-gap: 8px;
    }
}
@media (width >= 1440px) {
    .site-header-inner--product:not(.site-header-inner--compact) { column-gap: 16px; }
    .site-header-inner--product:not(.site-header-inner--compact) .nav-link { padding: 0 10px; font-size: 12px; }
    .site-header-inner--product:not(.site-header-inner--compact) .nav-cta { padding: 0 10px; }
}
@media (880px <= width < 1024px) {
    .site-header-inner.site-header-inner--product.site-header-inner--compact {
        grid-template-columns: 1fr auto; grid-template-areas: "brand ai" "nav actions"; column-gap: 8px;
    }
}
@media (width < 880px) {
    .site-header-inner--product .nav-toggle { display: inline-flex; }
    .site-header-inner--product .site-nav {
        grid-area: toggle; display: none; position: absolute; top: calc(100% + 8px); left: var(--gutter);
        flex-direction: column; align-items: stretch; gap: 6px; min-width: 200px; padding: 8px;
        border: 1px solid var(--paper-line); background: var(--paper);
        box-shadow: 0 8px 24px rgba(12, 33, 29, 0.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .site-header-inner--product .site-nav.is-open { display: flex; }
    .site-header-inner--product .nav-link { padding: 0 16px; justify-content: flex-start; }
    .site-header-inner.site-header-inner--product {
        grid-template-columns: auto 1fr auto; grid-template-areas: "brand brand brand" "toggle actions ai";
    }
    .site-header-inner.site-header-inner--product .nav-link { border-color: var(--paper-line-focus); background: transparent; color: var(--text-dark); }
    .site-header-inner.site-header-inner--product .nav-link:hover { border-color: var(--text-dark); color: var(--text-dark); }
    .site-header-inner.site-header-inner--product .nav-link.active, .site-header-inner.site-header-inner--product .nav-link.active:hover {
        border-color: var(--paper-line-focus); color: var(--text-dark); text-decoration-color: var(--ph-action-line, var(--color-accent));
    }
}
@media (width < 400px) {
    .site-header-inner--product { column-gap: 4px; }
    .site-header-inner--product .nav-actions { gap: 4px; }
    .site-header-inner--product .nav-cta { padding: 0 8px; }
}
@media (width < 380px) {
    .site-header-inner.site-header-inner--product { grid-template-areas: "brand brand brand" "toggle . ai" "actions actions actions"; }
}


/* Site footer. A solid band above the triangle grid, so the background dots
   never draw over the link text; the rule on top spans exactly the container.

     ≥ 1024   links left, icons right, one row
     < 1024   links wrap, icons on their own row */
.site-footer {
    position: relative;
    z-index: 1;
    background: var(--bg-base);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block: 14px;
    border-top: 1px solid var(--border-light);
}

.footer-links,
.footer-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.footer-icons {
    gap: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.social-link:hover {
    color: var(--text-main);
}

.social-link i {
    font-size: 20px;
}

@media (width >= 1024px) {
    .site-footer-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-height: 44px;
        padding-block: 8px;
    }

    .footer-links {
        flex-wrap: nowrap;
        gap: 24px;
    }
}


/* The theme switch: a 36 px square like the header's menu and AI buttons,
   with the sun in the light theme and the moon in the dark one. The icon
   follows the attribute on <html>, so it is right before any script runs.
   Kept apart from header.css: pages without the kit's header use it too. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
    background: var(--glass-fill);
    color: var(--text-main);
    cursor: pointer;
    transition: border-color var(--transition-fast, 0.15s), background-color var(--transition-fast, 0.15s);
}

.theme-toggle:hover {
    border-color: var(--border-focus);
    background: var(--glass-fill-hover);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.theme-toggle-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.theme-toggle-moon,
:root[data-theme="dark"] .theme-toggle-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-moon {
    display: block;
}


/* The sheet: the paper card every section page sits on. Always the full width
   of the container (Contact is the one exception, see pages/contact.css), as
   tall as its content, never a scroll region of its own. */
.sheet {
    position: relative;
    width: 100%;
    --sheet-pad: 16px;
}

@media (width >= 640px) {
    .sheet { --sheet-pad: 24px; }
}

/* Header band: title and lead.
     < 1024   stacked: title, lead, action
     ≥ 1024   fixed 4fr / 8fr columns with a rule between them — the split no
              longer depends on how long the title happens to be. */
.sheet-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--sheet-pad);
    border-bottom: 1px solid var(--border-light);
}

.sheet-title {
    font-family: var(--font-sans);
    font-size: 35px;
    font-weight: 300;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--text-main);
}

.sheet-lead-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

/* Short headline beside the title. */
.frame-tagline {
    font-size: 20px;
    line-height: 1.35;
    color: var(--text-muted);
}

/* Multi-sentence lead (Stories, Demos) and the intro paragraph above cards. */
.slide-lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
}

.slide-lead strong {
    font-weight: 500;
}

/* The action under the lead (DEMO, GET IT ON FOOD4RHINO). A plain button in the
   flow, never a badge pinned to a corner. Full width on a phone. */
.sheet-cta {
    align-self: stretch;
}

@media (width >= 640px) {
    .sheet-title { font-size: 36px; }
    .sheet-cta { align-self: flex-start; }
}

@media (width >= 1024px) {
    .sheet-head {
        display: grid;
        grid-template-columns: 4fr 8fr;
        gap: 0;
        padding: 0;
    }

    .sheet-head > .sheet-title {
        padding: var(--sheet-pad);
        border-right: 1px solid var(--border-light);
    }

    .sheet-head > .sheet-lead-col {
        justify-content: center;
        padding: var(--sheet-pad);
    }
}


/* Second level: the tab strip at the top of a sheet. Never scrolls sideways.
     ≥ 640   one row, equal widths; every set of 3–6 tabs fits from 640 up
     < 640   a 48px button naming the active tab ("1/6 MESHWORKS ▾") that opens
             all tabs in place as a two-column grid, pushing the content down */
.card-tabs {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-light);
}

/* On a sheet the strip has its own token: the card fill in light (what
   --bg-surface resolves to on paper), and in dark a shade below the sheet, so
   the active tab, which shows the sheet itself, reads as the open one. */
.paper .card-tabs {
    background: var(--paper-tabs);
}

.card-tabs-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--sheet-pad);
    border: none;
    border-top: 4px solid var(--color-accent);
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    cursor: pointer;
}

.card-tabs-count {
    color: var(--paper-teal);
}

.card-tabs-caret {
    margin-left: auto;
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.card-tabs-toggle[aria-expanded="true"] .card-tabs-caret {
    transform: rotate(180deg);
}

.card-tabs-list {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border-light);
}

.card-tabs-list.is-open {
    display: grid;
}

.card-tab {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 48px;
    padding: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.35;
    color: var(--text-muted);
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.card-tab:nth-child(2n) {
    border-right: none;
}

.card-tab:hover {
    color: var(--text-main);
}

.card-tab.active {
    background: var(--paper);
    color: var(--text-main);
}

@media (width >= 640px) {
    .card-tabs-toggle {
        display: none;
    }

    .card-tabs-list,
    .card-tabs-list.is-open {
        display: flex;
        border-top: none;
    }

    /* 4px marker on the active tab, orange like the action on the same sheet. */
    .card-tab {
        flex: 1 1 0;
        min-height: 44px;
        border-bottom: none;
        border-top: 4px solid transparent;
    }

    .card-tab:nth-child(2n) {
        border-right: 1px solid var(--border-light);
    }

    .card-tab:last-child {
        border-right: none;
    }

    .card-tab.active {
        background: var(--paper-tab-active);
        border-top-color: var(--color-accent);
    }
}

/* A strip with a single tab has nothing to choose between: no orange marker,
   in either layout. */
.card-tab.active:only-child {
    border-top-color: transparent;
}

.card-tabs:has(.card-tab:only-child) .card-tabs-toggle {
    border-top-color: transparent;
}


/* Section & landing page sheets (HeroSheet, SectionSheet, SheetCard, DocPanel).
   Derived from object.pl's landing pages (scripts/landing.css) and shared across
   phenome.object.pl, fraxin.object.pl, tila.object.pl and standalone document pages. */
:root {
    --ph-pad: 16px;
    --ph-ink-82: color-mix(in srgb, var(--text-dark) 82%, transparent);
    --ph-action-line: var(--paper-orange);
}

@media (width >= 640px) {
    :root { --ph-pad: 24px; }
}

@media (width >= 1024px) {
    :root { --ph-pad: 32px; }
}

.ph-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ph-stack > .sheet { scroll-margin-top: 16px; }

/* ---- HeroSheet: kicker and title on top, the lead under a rule ---- */
.ph-hero-top {
    padding: 28px var(--ph-pad) 24px;
}

.ph-kicker,
.ph-eyebrow {
    margin-bottom: 12px;
    color: var(--paper-teal);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.ph-title {
    max-width: 22em;
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.ph-hero-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px var(--ph-pad) 28px;
    border-top: 1px solid var(--paper-line);
}

.ph-lead p {
    max-width: 44em;
    color: var(--paper-text-muted);
    font-size: 19px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* ---- SectionSheet: title | text, 4fr / 8fr with a rule from 1024 ---- */
.ph-band-title { padding: 24px var(--ph-pad) 12px; }
.ph-band-text { padding: 0 var(--ph-pad) 24px; }
.ph-band--title .ph-band-title { padding-bottom: 24px; }

.ph-h2 {
    color: var(--text-dark);
    font-size: 27px;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

@media (width >= 1024px) {
    .ph-band {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }

    .ph-band--title { display: block; }

    .ph-band-title,
    .ph-band-text,
    .ph-band--title .ph-band-title {
        padding: 30px var(--ph-pad);
    }

    .ph-band-text { border-left: 1px solid var(--paper-line); }

    .ph-h2 { font-size: 30px; }
}

.ph-wide {
    padding: 24px var(--ph-pad);
    border-top: 1px solid var(--paper-line);
}

@media (width >= 1024px) {
    .ph-wide { padding: 30px var(--ph-pad); }
}

.ph-prose {
    color: var(--ph-ink-82);
    font-size: 16px;
    line-height: 1.65;
}

.ph-prose p,
.ph-prose ul,
.ph-prose ol {
    max-width: 46em;
    margin-bottom: 14px;
    text-wrap: pretty;
}

.ph-prose > :last-child { margin-bottom: 0; }
.ph-prose ul,
.ph-prose ol { padding-left: 22px; }
.ph-prose li { margin-bottom: 6px; }
.ph-prose li::marker { color: var(--paper-text-muted); }

/* ---- Standalone Document Sheet (.doc-panel, privacy policy / code of conduct) ---- */
body.doc {
    display: block;
}

.doc-panel {
    max-width: 820px;
    margin: 56px auto 72px;
    padding: 48px;
    background: var(--paper);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    color: var(--text-dark);
}

.doc-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--paper-teal);
    transition: color var(--transition-fast);
}

.doc-back:hover {
    color: var(--text-dark);
}

.doc-panel h1 {
    font-family: var(--font-sans);
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--text-dark);
    padding-bottom: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--paper-line);
}

.doc-panel h2 {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
    margin-top: 36px;
    margin-bottom: 10px;
}

.doc-panel p,
.doc-panel li {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--paper-text-muted);
}

.doc-panel p { margin-bottom: 14px; }
.doc-panel ul { padding-left: 20px; margin-bottom: 14px; }
.doc-panel li { margin-bottom: 6px; }

.doc-panel a:not(.doc-back) {
    color: var(--paper-teal);
    text-underline-offset: 2px;
}

@media (max-width: 768px) {
    .doc-panel {
        margin: 24px auto 40px;
        padding: 24px;
    }
    .doc-panel h1 { font-size: 28px; }
}


/* The brand field and the 88 px band of print and screen formats (handoff of
   2026-10-05, "Design tokens" and "Logo construction"): the letterhead and
   Odoo band, the flyer top, the business card front, slides and social images.
   Moved here from object-ci on 2026-10-14, so the CI portal, its print
   templates and md2pdf draw the same band.

   Sizes are artboard px times --u. Without --u they are CSS px (1 artboard px
   = 1 px at 96 dpi), as in the print templates and md2pdf; object-ci's
   mock-ups set --u to fit a format into a column. --grid sets the cell in
   artboard px; a print template in mm sets --brand-cell itself (4mm on the
   business card). Text and logo on the field are white, also when the field
   sits on a .paper sheet.

   The field takes its colours from the teal scale, not from the page roles
   (--bg-base, --bg-top): flat teal 700, or the gradient from teal 500 at the
   bottom to teal 700 at 78% of the height. The page gradient of the UI may
   change; the brand field and everything printed from it stay as they are. */
.brand-field {
    --brand-cell: calc(var(--grid, 20) * var(--u, 1px));
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background: var(--teal-700);
}

.brand-field--gradient {
    background: linear-gradient(0deg, var(--teal-500) 0%, var(--teal-700) 78%);
}

/* The triangle grid: a white right triangle with 3 px legs, right angle top
   left, every 20 px (legs and cell scale together), rows offset by half a
   cell, faded from 18% at the left to 60% at the right edge (35% of the
   width at 18%, then rising). */
.brand-field::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0h3L0 3z' fill='%23fff'/%3E%3C/svg%3E");
    background-size: var(--brand-cell) var(--brand-cell);
    background-position: calc(var(--brand-cell) / 2) 0;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.6) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.6) 100%);
}

/* A centred logo sits on its construction centre line, 1 unit (a tenth of
   its height) below the box centre; the tagline hangs under it. */
.brand-field-centre {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(16 * var(--u, 1px));
}

.brand-field-logo {
    width: auto;
    transform: translateY(10%);
}

.brand-field-tagline {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The band: logo 40 px tall, 28 px from the top, so its centre line sits at
   44 px; the tagline in Plex Mono 500, 10 px, 1 px tracking, its baseline on
   the logo's O baseline at 56 px; 56 px of padding on both sides. */
.brand-band {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: calc(var(--band-height, 88) * var(--u, 1px));
    padding: calc(28 * var(--u, 1px)) calc(56 * var(--u, 1px)) 0;
}

.brand-band-logo {
    display: block;
    height: calc(40 * var(--u, 1px));
    width: auto;
}

.brand-band-tagline {
    padding-top: calc(19 * var(--u, 1px));
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: calc(10 * var(--u, 1px));
    line-height: 1;
    letter-spacing: calc(1 * var(--u, 1px));
    text-transform: uppercase;
    white-space: nowrap;
}


.ph-portal-root { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-base, #0b1020); color: var(--text-main, #f4f4f5); font-family: var(--font-sans, 'IBM Plex Sans', sans-serif); }
.ph-portal-main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; }
.ph-portal-header-actions { display: flex; align-items: center; gap: 12px; }
.ph-portal-license-pill { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 11px; padding: 4px 8px; border: 1px solid var(--border-light, rgba(231,201,82,0.35)); color: var(--color-primary, #e7c952); }
.ph-portal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ph-portal-search { flex: 1; padding: 8px 12px; background: var(--bg-panel, rgba(20,31,56,0.9)); color: inherit; border: 1px solid var(--border-light, rgba(231,201,82,0.35)); font-family: inherit; }
.ph-portal-count, .ph-portal-mono { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 12px; }
.ph-portal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ph-portal-table th, .ph-portal-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light, rgba(231,201,82,0.22)); text-align: left; vertical-align: top; }
.ph-portal-doc-btn, .ph-portal-link { background: none; border: 0; color: var(--color-primary, #e7c952); cursor: pointer; font: inherit; font-weight: 600; text-align: left; padding: 0; text-decoration: underline; }
.ph-portal-code { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.92em; padding: 1px 5px; background: rgba(255,255,255,0.08); }
.ph-portal-pre { padding: 12px; overflow-x: auto; background: rgba(0,0,0,0.28); border: 1px solid var(--border-light, rgba(231,201,82,0.22)); font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 12px; }
.ph-portal-hr { border: 0; border-top: 1px solid var(--border-light, rgba(231,201,82,0.22)); margin: 16px 0; }
/* Portal integration: long document labels need more room than product links. */
.ph-portal-root .site-header-inner {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "brand brand" "toggle actions";
  align-items: center;
  column-gap: 16px;
}

.ph-portal-root .brand--named {
  min-width: 0;
  max-width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
}

.ph-portal-root .brand-name {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
  font-size: clamp(20px, 2.2vw, 30px);
}

.ph-portal-root .nav-actions {
  min-width: 0;
  justify-self: end;
}

.ph-portal-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ph-portal-license-pill {
  overflow-wrap: anywhere;
}

.ph-portal-root .site-nav {
  min-width: 0;
}

.ph-portal-root .nav-link {
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
  min-height: 36px;
}

/* The standalone build does not depend on the host site's icon font. */
.ph-portal-root .nav-toggle {
  width: auto;
  padding-inline: 8px;
  font: inherit;
}

.ph-portal-root .nav-toggle::before {
  content: "Menu";
}

.ph-portal-main,
.ph-portal-root .ph-wide,
.ph-portal-reader-body {
  min-width: 0;
}

.ph-portal-toolbar {
  flex-wrap: wrap;
}

.ph-portal-search {
  min-width: 0;
  flex-basis: 220px;
}

.ph-portal-root .ph-eyebrow,
.ph-portal-reader-body {
  overflow-wrap: anywhere;
}

/* Keep wide tables scrollable in their own region, not beyond the page. */
.ph-portal-root .ph-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

@media (width >= 880px) {
  .ph-portal-root .site-header-inner {
    grid-template-areas: "brand actions" "nav nav";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ph-portal-root .site-nav {
    flex-wrap: wrap;
  }

  .ph-portal-root .nav-link {
    padding-block: 8px;
  }
}

@media (width < 880px) {
  .ph-portal-root .site-nav {
    right: var(--gutter);
  }
}

@media (width < 480px) {
  .ph-portal-root .brand {
    --logo-w: 96px;
  }

  .ph-portal-license-pill {
    flex-basis: 100%;
  }
}