/* myOS web layer. Load after tokens/tokens.css and styles/base.css.
   The kit was drawn for a desktop app; this makes it right for a website:
   touch-size controls, page widths, phone layout and safe areas. Tokens only, no new colours. */

/* Breakpoints (media queries can't read custom properties, so they are written out):
     phone   < 600px    one column, sticky actions at the bottom
     tablet  600–1023px
     desktop ≥ 1024px   the app's own layout */

:root {
  --page-max: 1120px;   /* app pages */
  --read-max: 720px;    /* delivery page, portal */
  --gutter: var(--space-16);
  --tap: 44px;          /* the smallest touch target (Apple HIG / WCAG 2.5.5) */
}
@media (min-width: 600px) { :root { --gutter: var(--space-24);
  --brand-band-h: 72px; --size-brand-band-height: 72px;      /* the account's header band */
  --fs-page-title: 32px; --font-size-page-title: 32px;      /* a client-facing page's title */
  --fs-link-title: 32px; --font-size-link-title: 32px; } }  /* the link page's title (the same size) */
@media (min-width: 1024px) { :root { --gutter: var(--space-40); } }
/* Narrow phones (under 360px): the six code cells at 40px, so they fit the column inside the gutter. */
@media (max-width: 359px) { :root { --code-cell-w: 40px; --size-code-cell-width: 40px; } }

/* GENERATED:touch — scripts/build-web-overrides.py; do not hand-edit */
@media (pointer: coarse) {
  :root {
    --ctl-24: 36px; --size-control-xs: 36px;
    --ctl-28: 40px; --size-control-sm: 40px;
    --ctl-32: var(--tap); --size-control-md: var(--tap);
    --ctl-40: 48px; --size-control-lg: 48px;
    --row-28: var(--tap); --size-row-menu: var(--tap);
    --row-32: var(--tap); --size-row-dense: var(--tap);
    --row-40: 52px; --size-row-file: 52px;
    --row-56: 64px; --size-row-double: 64px;
    --fs-field: 16px; --font-size-field: 16px;
  }
}
/* END:touch */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; background: var(--color-bg-board); color: var(--color-text-default); }

.page   { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.read   { width: min(100% - 2 * var(--gutter), var(--read-max)); margin-inline: auto; }

/* Phone: the main action sits at the bottom, clear of the home indicator. */
.action-bar {
  position: sticky; bottom: 0; z-index: 10;
  padding: var(--space-12) var(--gutter) calc(var(--space-12) + env(safe-area-inset-bottom));
  background: var(--color-bg-shell); box-shadow: var(--elevation-3);
}
@media (min-width: 600px) { .action-bar { position: static; padding: 0; background: none; box-shadow: none; } }

/* Embedded (the portal inside someone else's site): no page chrome, transparent ground. */
html[data-embed] body { background: transparent; min-height: 0; }
html[data-embed] .site-header, html[data-embed] .site-footer { display: none; }

/* GENERATED:fallback — scripts/build-web-overrides.py; do not hand-edit */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --board: #0d0d0d; --color-bg-board: #0d0d0d;
    --shell: #131313; --color-bg-shell: #131313;
    --canvas: #171717; --color-bg-canvas: #171717;
    --tile: #1a1a1a; --color-bg-tile: #1a1a1a;
    --raised: #232323; --color-bg-raised: #232323;
    --overlay: #2a2a2a; --color-bg-overlay: #2a2a2a;
    --well: #0e0e0e; --color-bg-well: #0e0e0e;
    --pressed: #1f1f1f; --color-bg-pressed: #1f1f1f;
    --scrim: rgba(0, 0, 0, 0.55); --color-bg-scrim: rgba(0, 0, 0, 0.55);
    --coltint: rgba(255, 255, 255, 0.035); --color-bg-tint: rgba(255, 255, 255, 0.035);
    --hover: #2b2b2b; --color-bg-hover: #2b2b2b;
    --hover2: #333333; --color-bg-hover-strong: #333333;
    --raised-hover: #2b2b2b; --color-bg-raised-hover: #2b2b2b;
    --overlay-hover: #363636; --color-bg-overlay-hover: #363636;
    --disabled-fill: #0e0e0e; --color-bg-disabled: #0e0e0e;
    --strong: #f2f2f2; --color-text-strong: #f2f2f2;
    --text: #d4d4d4; --color-text-default: #d4d4d4;
    --muted: #a3a3a3; --color-text-muted: #a3a3a3;
    --faint: #8a8a8a; --color-text-faint: #8a8a8a;
    --onstrong: #111111; --color-text-on-primary: #111111;
    --onwarn: #111111; --color-text-on-warning: #111111;
    --disabled-text: #5c5c5c; --color-text-disabled: #5c5c5c;
    --strip-text: #a3a3a3; --color-text-strip: #a3a3a3;
    --line: #2a2a2a; --color-border-default: #2a2a2a;
    --overlay-line: #3a3a3a; --color-border-overlay: #3a3a3a;
    --field-edge: #6e6e6e; --color-border-field: #6e6e6e;
    --primary: #f2f2f2; --color-action-primary: #f2f2f2;
    --strong-hover: #ffffff; --color-action-primary-hover: #ffffff;
    --strong-press: #d2d2d2; --color-action-primary-press: #d2d2d2;
    --focus: rgba(255, 255, 255, 0.7); --color-focus-ring: rgba(255, 255, 255, 0.7);
    --sel: #ffffff; --color-selection-ring: #ffffff;
    --multi: rgba(255, 255, 255, 0.32); --color-selection-multi: rgba(255, 255, 255, 0.32);
    --green: #93c29c; --color-signal-success: #93c29c;
    --red: #da7770; --color-signal-danger: #da7770;
    --idle: #6a6a6a; --color-signal-idle: #6a6a6a;
    --warn: #d9a441; --color-signal-warning: #d9a441;
    --red-hover: #de8781; --color-signal-danger-hover: #de8781;
    --red-press: #c26b65; --color-signal-danger-press: #c26b65;
    --silver: #b8b8b8; --color-user-silver: #b8b8b8;
    --fog: #8b98a6; --color-user-fog: #8b98a6;
    --stone: #a69c90; --color-user-stone: #a69c90;
    --lichen: #8e9a8f; --color-user-lichen: #8e9a8f;
    --ash: #757575; --color-user-ash: #757575;
    --pewter: #9c9c9c; --color-user-pewter: #9c9c9c;
    --seg-on: #333333; --color-control-segment-on: #333333;
    --knob-off: #a3a3a3; --color-control-knob-off: #a3a3a3;
    --check-fill: #f2f2f2; --color-control-check-fill: #f2f2f2;
    --check-mark: #111111; --color-control-check-mark: #111111;
    --dot: #2a2a2a; --color-canvas-grid: #2a2a2a;
    --edge: #4d4d4d; --color-canvas-edge: #4d4d4d;
    --picked: rgba(147, 194, 156, 0.75); --color-canvas-branch-picked: rgba(147, 194, 156, 0.75);
    --sug: rgba(255, 255, 255, 0.5); --color-canvas-suggestion: rgba(255, 255, 255, 0.5);
    --vig: rgba(0, 0, 0, 0.3); --color-canvas-vignette: rgba(0, 0, 0, 0.3);
    --zone: rgba(255, 255, 255, 0.07); --color-canvas-drop-zone: rgba(255, 255, 255, 0.07);
    --wave-played: #ffffff; --color-waveform-played: #ffffff;
    --wave-unplayed: #4a4a4a; --color-waveform-unplayed: #4a4a4a;
    --progress-track: #0e0e0e; --color-progress-track: #0e0e0e;
    --progress-fill: #f2f2f2; --color-progress-fill: #f2f2f2;
    --badge-fill: #da7770; --color-badge-fill: #da7770;
    --badge-text: #111111; --color-badge-text: #111111;
    --brand-plate-bg: #232323; --color-brand-plate-bg: #232323;
    --sendbar-bg: #1a1a1a; --color-sendbar-bg: #1a1a1a;
    --sendbar-text: #a3a3a3; --color-sendbar-text: #a3a3a3;
  }
}
/* END:fallback */