/*
 * Every --jorar-bot-* token in the product is written here, once. The desktop
 * renderer, the public web app and the mobile app all @import this file; none of
 * them declares a token of its own. That was not true until recently - the same
 * names lived in three files that no single commit had ever touched together, so
 * the web palette was a frozen snapshot of a desktop palette that had moved on by
 * two hundred tokens, and a token added for one surface was simply absent on the
 * other two. Keep this file the only declaration site.
 *
 * The values here are the base, dark palette. The desktop app and the web client
 * layer tokens-light.css on top of this file for their light appearance; mobile
 * layers tokens-native.css. Both change values only; neither declares a new token.
 */

:root {
  --jorar-bot-provider-current: currentcolor;
  /* Main screen canvas and drawer, used by the native app. The desktop also uses the sidebar, the
     sheet (its menus) and the grouped tokens, so tokens-light.css sets them too. */
  --jorar-bot-bg-native-canvas: #06111f;
  --jorar-bot-bg-native-sidebar: #071522;
  /* Grouped sheet surfaces, used by the native app. */
  --jorar-bot-bg-sheet: #071522;
  --jorar-bot-bg-grouped: #0f2134;
  --jorar-bot-text-grouped-secondary: #9aacbf;
  --jorar-bot-border-grouped: #233b53;
  --jorar-bot-radius-grouped: 16px;
  /* The milky chrome of the native app where it has no Liquid Glass: the search field and bar buttons. */
  --jorar-bot-bg-chrome-glass: rgba(7, 21, 34, 0.96);
  --jorar-bot-border-chrome-glass: rgba(255, 255, 255, 0.08);
  /* The fill of that chrome over a real blur, lighter than the solid glass. */
  --jorar-bot-bg-chrome-blur: rgba(7, 21, 34, 0.72);

  /* Neutral color system. Keep UI colors here, not in components. */
  --jorar-bot-bg-canvas: #06111f;
  /* The window frame around the page card, darker than the card, so the card comes forward. */
  --jorar-bot-bg-frame: #040c17;
  /* A rail inside a menu, a step darker than the menu sheet. */
  --jorar-bot-bg-sheet-inset: #040c17;
  --jorar-bot-bg-canvas-clear: rgba(6, 17, 31, 0);
  --jorar-bot-bg-sidebar: #071522;
  --jorar-bot-marketplace-detail-bg: #111111;
  --jorar-bot-bg-surface: #0f2134;
  --jorar-bot-bg-surface-raised: #152b42;
  --jorar-bot-bg-control: #0f2134;
  --jorar-bot-bg-control-hover: #152b42;
  --jorar-bot-bg-control-active: #1b3550;
  --jorar-bot-tabs-bar-bg: #212121;
  --jorar-bot-tabs-pill-bg: #2a2a2a;
  --jorar-bot-bg-overlay: rgba(7, 21, 34, 0.96);
  --jorar-bot-dialog-overlay: rgba(0, 0, 0, 0.1);
  --jorar-bot-dialog-ring: rgba(255, 255, 255, 0.1);
  --jorar-bot-bg-glass: rgba(15, 33, 52, 0.9);

  /* Translucent glass surfaces: the landing page, and the browser dock and previews of the desktop. */
  --jorar-bot-glass-surface: rgba(255, 255, 255, 0.07);
  --jorar-bot-glass-surface-hover: rgba(255, 255, 255, 0.11);
  --jorar-bot-glass-border: rgba(255, 255, 255, 0.18);
  --jorar-bot-glass-highlight: rgba(255, 255, 255, 0.12);
  --jorar-bot-glass-shadow: rgba(0, 0, 0, 0.28);
  --jorar-bot-hero-grid-line: rgba(214, 173, 242, 0.09);

  /* The landing price figure, and nothing else: a dark glass "$0" lit by one soft
     iridescent band. These are a material, not aliases of the neutral palette -
     the body sits a shade either side of the canvas so the glyph reads as a solid
     object, and the band is the only warm/cool pair on the page. */
  --jorar-bot-price-metal-high: #4c4c4c;
  --jorar-bot-price-metal-core: #1f1f1f;
  --jorar-bot-price-metal-low: #343434;
  --jorar-bot-price-sheen-cool: rgba(150, 196, 255, 0.92);
  --jorar-bot-price-sheen-light: rgba(240, 244, 250, 0.98);
  --jorar-bot-price-sheen-warm: rgba(255, 184, 132, 0.94);
  /* The band has to fade out through its own hue. Fading to --jorar-bot-transparent
     would interpolate towards transparent *black* and leave a dirty grey halo
     above and below the light. */
  --jorar-bot-price-sheen-cool-soft: rgba(150, 196, 255, 0.26);
  --jorar-bot-price-sheen-warm-soft: rgba(255, 184, 132, 0.28);
  --jorar-bot-price-sheen-cool-clear: rgba(150, 196, 255, 0);
  --jorar-bot-price-sheen-warm-clear: rgba(255, 184, 132, 0);
  --jorar-bot-price-rim: rgba(255, 255, 255, 0.28);
  --jorar-bot-price-rim-under: rgba(255, 255, 255, 0.1);
  --jorar-bot-price-glow: rgba(180, 200, 255, 0.22);
  --jorar-bot-bg-host-inset: #101216;
  --jorar-bot-bg-notch: #000000;
  --jorar-bot-mask-solid: #000000;
  --jorar-bot-transparent: rgba(0, 0, 0, 0);
  --jorar-bot-drawer-scrim: #000000;
  --jorar-bot-scroll-edge-overlay: rgba(0, 0, 0, 0.72);
  --jorar-bot-queue-surface: var(--jorar-bot-bg-surface);
  --jorar-bot-queue-border: var(--jorar-bot-border-strong);
  --jorar-bot-queue-text: var(--jorar-bot-text-primary);
  --jorar-bot-queue-action: var(--jorar-bot-text-muted);
  --jorar-bot-border: rgba(164, 195, 221, 0.14);
  --jorar-bot-border-strong: rgba(164, 195, 221, 0.24);
  /* The square cards that ask for an answer, and the agent setup: a thick border that reads at a glance. */
  --jorar-bot-border-bold: rgba(164, 195, 221, 0.5);
  --jorar-bot-image-outline: rgba(255, 255, 255, 0.1);
  /* Focus is neutral: a grey border or a thin grey ring, never blue and never a halo. */
  --jorar-bot-border-focus: var(--jorar-bot-text-muted);
  --jorar-bot-text-primary: #f5f7fb;
  --jorar-bot-text-on-light: #141414;
  --jorar-bot-surface-light: #f0f0f0;
  /* Not a duplicate of surface-light/text-on-light: tokens-native.css swaps this pair
     between the mobile light and dark themes, so it is the high-contrast button that
     inverts with the theme. Only mobile's uniwind mapping reads it. */
  --jorar-bot-action: #0950c5;
  --jorar-bot-action-foreground: #ffffff;
  --jorar-bot-qr-background: #ffffff;
  /* Ink on paper that is always light, in both themes: a QR code, the onboarding drawing of a
     computer, the profile image that is shared. The on-light tokens above turn dark in the light
     theme, because there they are the inverted element; these never change. */
  --jorar-bot-paper: #f0f0f0;
  --jorar-bot-paper-text: #141414;
  --jorar-bot-paper-text-muted: rgba(20, 20, 20, 0.52);
  --jorar-bot-paper-text-dim: rgba(20, 20, 20, 0.36);
  --jorar-bot-paper-border: rgba(20, 20, 20, 0.14);
  --jorar-bot-onboarding-desktop-mist: #dbe9ff;
  --jorar-bot-onboarding-desktop-blue: #7eb4f2;
  --jorar-bot-onboarding-desktop-indigo: #6f7de8;
  --jorar-bot-onboarding-window: #f3f5f8;
  --jorar-bot-text-secondary: #c6d3e0;
  --jorar-bot-text-muted: #9aacbf;
  --jorar-bot-text-dim: #74889f;
  --jorar-bot-text-readable: rgba(255, 255, 255, 0.52);
  --jorar-bot-text-muted-on-light: rgba(20, 20, 20, 0.52);
  --jorar-bot-text-dim-on-light: rgba(20, 20, 20, 0.36);
  --jorar-bot-download-card-muted: rgba(20, 20, 20, 0.68);
  --jorar-bot-download-card-chip: rgba(20, 20, 20, 0.1);
  --jorar-bot-download-card-border: rgba(20, 20, 20, 0.16);
  --jorar-bot-download-card-focus: rgba(242, 242, 242, 0.86);
  --jorar-bot-text-placeholder: #bfbfbf;
  --jorar-bot-text-on-accent: #ffffff;
  --jorar-bot-text-on-status: #07130c;
  /* Hue 210, sampled from the reference UIs rather than picked: their status dot is
     #007cf7 and their link and section headings are #42a0ff, both hue 210. The palette
     sat at hue 206, which reads cyan next to them, and accent-text was 71% light,
     which reads washed out. */
  --jorar-bot-accent: #0950c5;
  --jorar-bot-accent-hover: #1264e5;
  --jorar-bot-accent-text: #86b6ff;
  --jorar-bot-accent-soft: rgba(9, 80, 197, 0.18);
  --jorar-bot-accent-strong: rgba(9, 80, 197, 0.38);
  --jorar-bot-settings-text-muted: rgba(255, 255, 255, 0.59);
  --jorar-bot-provider-codex: var(--jorar-bot-text-primary);
  --jorar-bot-provider-claude: #d97757;
  --jorar-bot-provider-grok: var(--jorar-bot-text-primary);
  /* The Gemini brand colour that Simple Icons gives. */
  --jorar-bot-provider-antigravity: #8e75b2;
  /* A chart series needs a hue of its own: the logo colours above give codex and grok the
     same white, which no reader can tell apart in two overlaid areas. Validated together
     with the dataviz skill's checker -
     node scripts/validate_palette.js "#d6adf2,#d97757,#6bc7d9" --mode dark --surface "#1a1a1a"
     - for colour-vision separation and contrast on the canvas. */
  --jorar-bot-chart-series-codex: #d6adf2;
  --jorar-bot-chart-series-claude: var(--jorar-bot-provider-claude);
  --jorar-bot-chart-series-grok: #6bc7d9;
  --jorar-bot-chart-series-other: var(--jorar-bot-text-muted);
  /* The storage bar: five hues in this fixed order, then neutral app data. Validated with
     node scripts/validate_palette.js "#3987e5,#d95926,#199e70,#9085e9,#c98500" --mode dark --surface "#1a1a1a"
     and again on #212121. */
  --jorar-bot-chart-storage-workspaces: #3987e5;
  --jorar-bot-chart-storage-files: #d95926;
  --jorar-bot-chart-storage-chats: #199e70;
  --jorar-bot-chart-storage-downloads: #9085e9;
  --jorar-bot-chart-storage-runtimes: #c98500;
  --jorar-bot-chart-storage-app: var(--jorar-bot-text-dim);
  --jorar-bot-logo-production: #06111f;
  --jorar-bot-logo-eye: #f5f7fb;
  /* The eyes of the release logo. The logo color setting changes it with `--jorar-bot-logo-production`;
     a dev or preview logo keeps `--jorar-bot-logo-eye`. */
  --jorar-bot-logo-production-eye: var(--jorar-bot-logo-eye);
  /* The build colors of the logo match the app icons in `build/icon-*.png`, so the Dock, the app
     and the Dynamic Island show one color for each build. They are brand colors, not status
     colors: a change to warning or success does not change them. */
  --jorar-bot-logo-dev: #e3b866;
  --jorar-bot-logo-preview: #61c985;
  --jorar-bot-unread-surface: #74b9ff;
  --jorar-bot-unread-text: #07131f;
  /* The last hue that had not been retuned with the rest. #61c985 was OKLCH chroma
     0.139 while accent, warning and danger now average 0.205, so green was the one
     family member that still read as a disabled tint beside them. Matching 0.205 is
     not possible: sRGB tops out at 0.195 along this hue, and that ceiling value
     (#00d271) is a neon with no headroom, which every renderer clips differently.
     0.180 is the usable step, and lightness is held at the old 0.756 so contrast on
     the canvas is unchanged at 8.5:1 and no text legibility moves. */
  --jorar-bot-success: #2ee6c5;
  /* Status text sits on neutral surfaces; status fills have separate contrast needs. */
  --jorar-bot-success-text: #2ee6c5;
  --jorar-bot-warning-text: #ff9412;
  --jorar-bot-danger-text: #ff6069;
  --jorar-bot-success-soft: rgba(49, 207, 118, 0.12);
  --jorar-bot-success-wash: rgba(49, 207, 118, 0.045);
  /* Both warning marks in the reference measure hue 33 at full saturation (#ff9917 on
     the triangle, #ff9412 on the heading). The palette's #e3b866 was a desaturated gold
     at hue 39, which reads as a disabled state rather than as something needing attention. */
  --jorar-bot-warning: #ff9412;
  --jorar-bot-warning-soft: rgba(255, 148, 18, 0.12);
  --jorar-bot-question-option: #6bc7d9;
  --jorar-bot-question-option-soft: rgba(107, 199, 217, 0.14);
  --jorar-bot-question-option-hover: rgba(107, 199, 217, 0.2);
  --jorar-bot-question-option-pressed: rgba(107, 199, 217, 0.26);
  --jorar-bot-island-identity-name: var(--jorar-bot-text-primary);
  --jorar-bot-question-badge-text: #8bdee8;
  --jorar-bot-question-badge-soft: rgba(107, 199, 217, 0.16);
  --jorar-bot-message-badge-text: #91c8ff;
  --jorar-bot-message-badge-soft: rgba(116, 185, 255, 0.16);
  /* The "new thing is available" pill. It is deliberately not --jorar-bot-accent: an
     announcement is not an action. */
  --jorar-bot-badge-new: #ff1e5e;
  --jorar-bot-badge-new-soft: rgba(255, 30, 94, 0.16);
  /* The moving border of an offer, such as the hosted server offer: teal, blue, then pink. */
  --jorar-bot-beam-teal: var(--jorar-bot-file-teal);
  --jorar-bot-beam-blue: var(--jorar-bot-accent-text);
  --jorar-bot-beam-pink: var(--jorar-bot-file-pink);
  --jorar-bot-approval-badge-soft: rgba(255, 148, 18, 0.18);
  /* One red. The palette carried four families - danger (#e47d75), danger-strong
     (#ff4058), settings-danger (#eb4145) and button-destructive (oklch, #ff6467) -
     all between hue 352 and 359, i.e. the same red at four saturations, and the
     settings family existed only to re-override button-destructive inside one modal.
     #fd2f3b is the reference's count badge. The five steps below are roles, not
     shades: solid fill, its hover, tinted fill, its hover, ring, border. */
  --jorar-bot-danger: #fd2f3b;
  --jorar-bot-danger-hover: #fd5d67;
  --jorar-bot-danger-soft: rgba(253, 47, 59, 0.16);
  --jorar-bot-danger-soft-hover: rgba(253, 47, 59, 0.28);
  --jorar-bot-danger-focus: rgba(253, 47, 59, 0.4);
  --jorar-bot-danger-border: rgba(253, 47, 59, 0.5);
  /* Literal values: the mobile themes repeat these in tokens-native.css, where var() resolves to
   * nothing. They equal warning, question-option, success, danger and accent-text. */
  --jorar-bot-file-blue: #74b9ff;
  --jorar-bot-file-blue-soft: rgba(116, 185, 255, 0.14);
  --jorar-bot-file-yellow: #ff9412;
  --jorar-bot-file-yellow-soft: rgba(255, 148, 18, 0.12);
  --jorar-bot-file-orange: #f0a06a;
  --jorar-bot-file-orange-soft: rgba(240, 160, 106, 0.14);
  --jorar-bot-file-teal: #6bc7d9;
  --jorar-bot-file-teal-soft: rgba(107, 199, 217, 0.14);
  --jorar-bot-file-green: #31cf76;
  --jorar-bot-file-green-soft: rgba(49, 207, 118, 0.12);
  --jorar-bot-file-red: #fd2f3b;
  --jorar-bot-file-red-soft: rgba(253, 47, 59, 0.16);
  --jorar-bot-file-pink: #d98ac9;
  --jorar-bot-file-pink-soft: rgba(217, 138, 201, 0.14);
  --jorar-bot-file-default: #42a0ff;
  --jorar-bot-file-default-soft: rgba(0, 124, 247, 0.14);
  --jorar-bot-data-table-border: #303030;
  --jorar-bot-data-table-header-text: #a1a1a1;
  --jorar-bot-data-table-text: #f5f5f5;
  --jorar-bot-data-table-outer-border: rgba(255, 255, 255, 0);
  --jorar-bot-data-table-ring: rgba(255, 255, 255, 0.12);
  --jorar-bot-shadow-popover-ambient: rgba(0, 0, 0, 0.1);
  --jorar-bot-shadow-dialog: rgba(0, 0, 0, 0.48);
  --jorar-bot-shadow-menu: rgba(0, 0, 0, 0.45);
  --jorar-bot-shadow-dynamic-island: rgba(0, 0, 0, 0.6);
  --jorar-bot-shadow-ring: rgba(228, 228, 228, 0.04);
  --jorar-bot-border-on-light: rgba(20, 20, 20, 0.14);
  --jorar-bot-hover: rgba(255, 255, 255, 0.06);
  --jorar-bot-font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jorar-bot-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  /* Six steps, one line-height each, named for the step it pairs with. The scale had
   * sixteen sizes and eight line-heights, four of them a single call site, which is how
   * an 11px size ended up paired with a 26px line-height. scripts/ui-foundation-check.ts
   * holds "untokenized font-size" at zero, so a size that is not here has nowhere to go. */
  --jorar-bot-text-sm: 12px;
  --jorar-bot-text-md: 13px;
  --jorar-bot-text-lg: 14px;
  --jorar-bot-text-xl: 16px;
  --jorar-bot-text-2xl: 18px;
  --jorar-bot-text-3xl: 24px;
  --jorar-bot-leading-sm: 16px;
  --jorar-bot-leading-md: 18px;
  --jorar-bot-leading-lg: 20px;
  --jorar-bot-leading-xl: 22px;
  --jorar-bot-leading-2xl: 24px;
  --jorar-bot-leading-3xl: 30px;

  /* Not scale steps, and named for their surface so they do not read as one. Three
   * full-bleed screens (login wordmark, first-run setup, onboarding) and the public
   * landing page carry type above 24px; .landing-hero-logo is sized in em off
   * --jorar-bot-text-hero, so that token is layout, not just type. */
  --jorar-bot-text-display: 32px;
  --jorar-bot-text-usage-total: clamp(2rem, 5cqi, 3.5rem);
  --jorar-bot-leading-display: 38px;
  --jorar-bot-text-hero: clamp(3rem, 8vw, 6.5rem);

  /* Glyphs, not copy: a file-extension string inside a fixed 16-24px chip. Below the
   * scale's floor because the container is fixed, not because the text is small. Outside
   * the text-* namespace so text-* means exactly the six steps above. */
  --jorar-bot-glyph-xs: 7px;
  --jorar-bot-glyph-sm: 8px;

  --jorar-bot-weight-regular: 400;
  --jorar-bot-weight-medium: 500;
  --jorar-bot-weight-semibold: 600;
  --jorar-bot-weight-bold: 700;
  --jorar-bot-tracking-tight: -0.1px;
  --jorar-bot-tracking-normal: 0;
  --jorar-bot-tracking-wide: 0.02em;
  --jorar-bot-space-0-5: 2px;
  --jorar-bot-space-1: 4px;
  --jorar-bot-space-1-5: 6px;
  --jorar-bot-space-2: 8px;
  --jorar-bot-space-3: 12px;
  --jorar-bot-space-4: 16px;
  --jorar-bot-space-6: 24px;
  --jorar-bot-space-8: 32px;
  --jorar-bot-scrollbar-size: 8px;
  --jorar-bot-radius-xs: 4px;
  --jorar-bot-radius-sm: 6px;
  --jorar-bot-radius-md: 8px;
  --jorar-bot-radius-lg: 12px;
  --jorar-bot-radius-card: 14px;
  --jorar-bot-radius-xl: 20px;
  --jorar-bot-radius-bubble: 22px;
  --jorar-bot-radius-bubble-inset: calc(var(--jorar-bot-radius-bubble) - var(--jorar-bot-space-3) - 1px);
  --jorar-bot-radius-modal: 30px;
  --jorar-bot-radius-media-preview: calc(var(--jorar-bot-radius-lg) - 1px);
  --jorar-bot-radius-pill: 999px;
  /* Avatars and small status dots. They stay round where every other corner is square. */
  --jorar-bot-radius-round: 999px;
  --jorar-bot-radius-logo: 20%;
  --jorar-bot-control-xs: 24px;
  --jorar-bot-control-sm: 28px;
  --jorar-bot-control-md: 32px;
  --jorar-bot-control-lg: 36px;
  --jorar-bot-control-xl: 40px;
  /* The switch follows the same compact pill proportions across desktop and web.
   * Keep its geometry named so the motion code can measure the same inset and travel
   * that CSS paints. */
  --jorar-bot-switch-width: 36px;
  --jorar-bot-switch-height: 20px;
  --jorar-bot-switch-thumb: 16px;
  --jorar-bot-switch-inset: 2px;
  --jorar-bot-switch-sm-width: 24px;
  --jorar-bot-switch-sm-height: 14px;
  --jorar-bot-switch-sm-thumb: 12px;
  --jorar-bot-switch-sm-inset: 1px;
  /* Unitless on purpose. Lucide icons carry viewBox="0 0 24 24", so CSS stroke-width
   * resolves in user units, not px: a literal 1px paints 1 * (16/24) = 0.67 device px at
   * the 16px default size and reads blurry. 1.5 user units is the 1px the design asks for.
   *
   * Which is also why three kinds of SVG keep a weight of their own rather than reading
   * this: the hand-written icons under src/renderer/src/features draw on a 16- or 20-unit
   * viewBox, so the same number paints a different device weight there; the onboarding
   * computer is a drawing, not an icon; and the checkbox tick would come out at 0.75
   * device px inside its 12px box. Every lucide icon in the renderer reads this token. */
  --jorar-bot-icon-stroke: 1.5;
  --jorar-bot-icon-xs: 12px;
  --jorar-bot-icon-sm: 14px;
  --jorar-bot-icon-md: 16px;
  --jorar-bot-icon-lg: 20px;
  --jorar-bot-chat-entry-gap: var(--jorar-bot-space-3);
  --jorar-bot-chat-marker-gap: var(--jorar-bot-space-1);
  --jorar-bot-chat-marker-height: var(--jorar-bot-control-xs);
  --jorar-bot-chat-marker-avatar: var(--jorar-bot-icon-md);
  /* Keep container-relative calculations at the CSS use site for native consumers. */
  --jorar-bot-chat-marker-width: 680px;
  --jorar-bot-duration-fast: 120ms;
  --jorar-bot-duration-hover: 0ms;
  --jorar-bot-duration-dialog: 100ms;
  --jorar-bot-duration-normal: 160ms;
  --jorar-bot-duration-slow: 200ms;
  --jorar-bot-duration-overlay: 240ms;
  --jorar-bot-duration-toast-enter: 340ms;
  --jorar-bot-duration-toast-exit: 220ms;
  --jorar-bot-duration-island-content: 340ms;
  --jorar-bot-duration-island-content-exit: 220ms;
  --jorar-bot-agent-activity-exit-delay: 500ms;
  /* A loading indicator waits this long, so a fast answer replaces it before it shows. */
  --jorar-bot-loading-indicator-delay: 400ms;
  --jorar-bot-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --jorar-bot-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --jorar-bot-shadow-raised: 0 12px 32px var(--jorar-bot-shadow-popover-ambient);
  --jorar-bot-shadow-card: 0 0 0 transparent;
  /* The square cards: a border twice the usual width, and a hard shadow with no blur. */
  --jorar-bot-border-width-bold: 2px;
  --jorar-bot-shadow-hard: 4px 4px 0 var(--jorar-bot-border-bold);
  /* The square style of the app: the border of a control, a field, a card, a row and a bubble. */
  --jorar-bot-border-width-ui: var(--jorar-bot-border-width-bold);
  /* The same edge drawn as a shadow, for a surface whose size must not change: a flat ring, and a
     raised ring with the hard shadow under it. */
  --jorar-bot-ring-ui: 0 0 0 var(--jorar-bot-border-width-ui) var(--jorar-bot-border-bold);
  --jorar-bot-shadow-hard-ring:
    var(--jorar-bot-ring-ui), 4px 4px 0 var(--jorar-bot-border-width-ui) var(--jorar-bot-border-bold);
  /* A pressed raised control: it loses its hard shadow and moves this far down and to the end. */
  --jorar-bot-shadow-press: 0 0 0 transparent;
  --jorar-bot-press-offset: var(--jorar-bot-space-0-5);
  --jorar-bot-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --jorar-bot-focus-ring: 0 0 0 1px var(--jorar-bot-border-focus);
  --jorar-bot-layer-dropdown: 40;
  --jorar-bot-layer-popover: 60;
  --jorar-bot-layer-dialog: 100;
  /* A dialog that opens other surfaces over itself, such as the marketplace. Its own menus take
     one above it, and a dialog it opens takes two, so the order is stated once here instead of
     being re-derived by arithmetic at each surface - where a tie is decided by insertion order,
     and the surface opened last wins only by accident. */
  --jorar-bot-layer-dialog-host: calc(var(--jorar-bot-layer-dialog) + var(--jorar-bot-layer-popover));
  --jorar-bot-layer-toast: 120;
  /* A tooltip names the control under the pointer. It shows above every other layer, also above
     a dialog or a menu that holds the control. */
  --jorar-bot-layer-tooltip: 240;
}

/*
 * The square style of the desktop app and the web client: every corner is square, except avatars and
 * small status dots, which use radius-round. Each desktop window (the Dynamic Island too), the web
 * client and Storybook set data-jorar-bot-color-scheme on the root element, in both themes. The public
 * site and the phone app never set it, so they keep the rounded scale above.
 */
:root[data-jorar-bot-color-scheme] {
  --jorar-bot-radius-grouped: 0;
  --jorar-bot-radius-xs: 0;
  --jorar-bot-radius-sm: 0;
  --jorar-bot-radius-md: 0;
  --jorar-bot-radius-lg: 0;
  --jorar-bot-radius-card: 0;
  --jorar-bot-radius-xl: 0;
  --jorar-bot-radius-bubble: 0;
  --jorar-bot-radius-bubble-inset: 0;
  --jorar-bot-radius-modal: 0;
  --jorar-bot-radius-media-preview: 0;
  --jorar-bot-radius-pill: 0;
  /* A focused control or field: its edge turns to the text color, at the width of the square border. */
  --jorar-bot-border-focus: var(--jorar-bot-text-primary);
  --jorar-bot-focus-ring: 0 0 0 var(--jorar-bot-border-width-ui) var(--jorar-bot-text-primary);
}

/* Every surface that paints a provider - the picker mark, the update toast and its progress bar,
   the usage icon, the account picker, the landing page - used to carry one rule per provider per
   surface, so a new provider meant ten new rules across five stylesheets before it had a colour.
   These rules are the only place a provider id meets its colour; a surface writes
   `data-provider` on the element and reads `--jorar-bot-provider-current`. A provider with no rule
   here falls back to the current text colour rather than to another provider's brand. */
[data-provider] {
  --jorar-bot-provider-current: currentcolor;
}

[data-provider="codex"] {
  --jorar-bot-provider-current: var(--jorar-bot-provider-codex);
}

[data-provider="claude"] {
  --jorar-bot-provider-current: var(--jorar-bot-provider-claude);
}

[data-provider="grok"] {
  --jorar-bot-provider-current: var(--jorar-bot-provider-grok);
}

[data-provider="opencode"] {
  --jorar-bot-provider-current: var(--jorar-bot-text-primary);
}

[data-provider="antigravity"] {
  --jorar-bot-provider-current: var(--jorar-bot-provider-antigravity);
}

[data-provider="cursor"] {
  --jorar-bot-provider-current: var(--jorar-bot-text-primary);
}

[data-provider="cline"] {
  --jorar-bot-provider-current: var(--jorar-bot-text-primary);
}

[data-provider="acp"] {
  --jorar-bot-provider-current: var(--jorar-bot-text-primary);
}

/* The stylesheet of https://bot.jorar.ai (Qaris AI). Brutalist: flat navy, square corners, hard borders,
   hard offset shadows, uppercase mono labels. The build puts packages/brand/src/tokens.css before it. */
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
:root {
  --site-max: 1180px;
  --site-pad: clamp(18px, 4vw, 48px);
  --ink: #06111f;
  --panel: #0b1a2b;
  --panel-2: #0f2134;
  --line: #5f7f9e;
  --line-soft: #233b53;
  --text: #e8f1fa;
  --muted: #9aacbf;
  --accent: #5ad1e6;
  --accent-ink: #04202a;
  --hot: #ffd24a;
  --ok: #3ddc97;
  --shadow: 6px 6px 0 var(--accent);
  --shadow-small: 4px 4px 0 var(--accent);
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}
* {
  box-sizing: border-box;
  border-radius: 0 !important;
}
html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: "Figtree", system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    linear-gradient(rgba(95, 127, 158, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 127, 158, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}
a {
  color: var(--accent);
}
img,
svg {
  display: block;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
:focus-visible {
  outline: 3px solid var(--hot);
  outline-offset: 2px;
}
/* Header ------------------------------------------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--site-pad);
  background: var(--ink);
  border-bottom: 2px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.brand img {
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
}
.nav {
  display: flex;
  gap: 4px;
}
.nav a {
  color: var(--text);
  text-decoration: none;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 2px solid transparent;
}
.nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.bar-actions {
  display: flex;
  gap: 8px;
}
/* Buttons ------------------------------------------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  border: 2px solid var(--text);
  box-shadow: var(--shadow-small);
  transition:
    transform 80ms ease,
    box-shadow 80ms ease;
}
.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--text);
}
.button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--text);
}
.button.ghost {
  background: transparent;
  color: var(--text);
}
.button.small {
  padding: 8px 14px;
  font-size: 0.78rem;
}
.button.large {
  padding: 16px 28px;
  font-size: 1rem;
  box-shadow: var(--shadow);
}
.button.full {
  width: 100%;
}
.only-android,
.is-android .only-desktop,
.is-android .only-windows {
  display: none;
}
.is-android .only-android {
  display: inline;
}
.is-android svg.only-android {
  display: block;
}
/* Sections ----------------------------------------------------------------------------------- */
main {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-pad);
}
section {
  padding: clamp(48px, 8vw, 96px) 0;
}
.section-head {
  max-width: 760px;
  margin-bottom: 36px;
}
h1,
h2,
h3 {
  line-height: 1.05;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-weight: 900;
}
h2 {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  display: inline;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.section-head h2 {
  display: inline;
}
.section-head p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}
h3 {
  font-size: 1.2rem;
}
.eyebrow,
.pill,
.chip,
.badge-available,
.side-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}
/* Hero --------------------------------------------------------------------------------------- */
.hero {
  padding-top: clamp(48px, 9vw, 110px);
  text-align: left;
}
.hero-glow,
.hero-grid {
  display: none;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 2px solid var(--line);
  color: var(--text);
  text-decoration: none;
  background: var(--panel);
}
.pill-new {
  background: var(--hot);
  color: #1b1500;
  padding: 1px 6px;
  font-weight: 800;
}
.pill .icon {
  width: 1em;
  height: 1em;
}
.hero-title {
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 0.95;
  margin: 28px 0 24px;
  display: flex;
  align-items: center;
  gap: 0.2em;
  flex-wrap: wrap;
}
.hero-mark {
  width: 1em !important;
  height: 1em !important;
  border: 3px solid var(--text);
  box-shadow: var(--shadow);
}
.gradient-text {
  color: var(--accent);
  text-shadow: 5px 5px 0 var(--panel-2);
}
.hero-lead {
  max-width: 720px;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--text);
  border-left: 6px solid var(--accent);
  padding-left: 18px;
  margin: 0 0 32px;
}
.inline-provider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}
.provider-logo {
  width: 1.1em;
  height: 1.1em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.hero-meta {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rise,
.js .reveal {
  opacity: 1;
}
.js .reveal {
  transform: translateY(14px);
  opacity: 0;
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* App preview -------------------------------------------------------------------------------- */
.window {
  border: 3px solid var(--text);
  background: var(--panel);
  box-shadow: 10px 10px 0 var(--accent);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 3px solid var(--text);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
}
.dots {
  display: flex;
  gap: 6px;
}
.dots i {
  width: 12px;
  height: 12px;
  border: 2px solid var(--text);
  display: block;
}
.window-title {
  font-weight: 800;
}
.window-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.status-dot,
.queue-dot {
  width: 10px;
  height: 10px;
  background: var(--ok);
  display: inline-block;
  flex: none;
}
.app {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  min-height: 430px;
}
.app-side,
.app-panel {
  padding: 14px;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-side {
  border-right: 3px solid var(--text);
}
.app-panel {
  border-left: 3px solid var(--text);
}
.side-label {
  color: var(--muted);
  margin: 10px 0 4px;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px;
  background: transparent;
  border: 2px solid transparent;
}
.side-item:hover {
  border-color: var(--line);
}
.side-item.active {
  border-color: var(--accent);
  background: var(--panel-2);
  box-shadow: 3px 3px 0 var(--accent);
}
.side-name {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  flex: 1;
}
.side-name small,
.queue-item small {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.75rem;
}
.side-provider {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.side-unread {
  background: var(--hot);
  color: #1b1500;
  min-width: 20px;
  height: 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 20px;
  padding: 0 4px;
}
.side-unread[hidden] {
  display: none;
}
.side-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted);
}
.hash {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  font-family: var(--mono);
  font-weight: 800;
}
.avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 900;
  color: #06111f;
  background: var(--accent);
  border: 2px solid var(--text);
}
.avatar-tendai {
  background: #ffd24a;
}
.avatar-rudo {
  background: #3ddc97;
}
.avatar-farai {
  background: #ff8a65;
}
.avatar-you {
  background: #e8f1fa;
}
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line-soft);
}
.app-head div {
  display: flex;
  flex-direction: column;
}
.app-head span {
  color: var(--muted);
  font-size: 0.8rem;
}
.chip {
  border: 2px solid var(--hot);
  color: var(--hot);
  padding: 2px 8px;
}
.messages {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  overflow: auto;
  max-height: 340px;
}
.msg {
  display: flex;
  gap: 10px;
}
.msg-body {
  border: 2px solid var(--line-soft);
  background: var(--panel-2);
  padding: 8px 12px;
  max-width: 560px;
}
.msg-body p {
  margin: 0;
}
.msg-meta {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 2px !important;
}
.msg-meta b {
  color: var(--text);
}
.composer {
  border-top: 2px solid var(--line-soft);
  padding: 12px 16px;
}
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.suggestions button {
  padding: 5px 10px;
  background: transparent;
  border: 2px solid var(--line);
  font-size: 0.85rem;
}
.suggestions button:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}
.composer-form {
  display: flex;
  border: 2px solid var(--text);
}
.composer-form input {
  flex: 1;
  background: var(--ink);
  color: var(--text);
  border: 0;
  padding: 10px 12px;
  font: inherit;
  min-width: 0;
}
.send {
  width: 46px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-left: 2px solid var(--text);
  display: grid;
  place-items: center;
}
.queue,
.files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.queue-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  border: 2px solid var(--line-soft);
  padding: 8px;
  font-size: 0.88rem;
}
.queue-item span:nth-child(2) {
  display: flex;
  flex-direction: column;
}
.queue-dot {
  background: var(--line);
}
.queue-item.running {
  border-color: var(--accent);
}
.queue-item.running .queue-dot {
  background: var(--hot);
}
.queue-item.done .queue-dot {
  background: var(--ok);
}
.queue-bar {
  grid-column: 1 / -1;
  height: 8px;
  border: 2px solid var(--line);
  display: block;
}
.queue-bar i {
  display: block;
  height: 100%;
  width: 55%;
  background: var(--accent);
}
.files li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.78rem;
}
/* Features ----------------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-small);
  transition:
    transform 80ms ease,
    box-shadow 80ms ease;
}
.feature:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--accent);
  border-color: var(--text);
}
.feature.wide {
  grid-column: span 2;
}
.feature-visual {
  min-height: 150px;
  padding: 18px;
  border-bottom: 3px solid var(--line);
  background: var(--ink);
  display: grid;
  align-content: center;
  overflow: hidden;
}
.feature-copy {
  padding: 18px;
}
.feature-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: 10px;
}
.feature-copy p {
  margin: 0;
  color: var(--muted);
}
.handoff-row,
.switch-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.handoff-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}
.handoff-line {
  flex: 1;
  max-width: 90px;
  height: 4px;
  background: var(--line);
  display: block;
}
.handoff-line i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--accent);
}
.handoff-notes {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--muted);
}
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: 10px;
  animation: slide 30s linear infinite;
}
.marquee.reverse .marquee-track {
  animation-direction: reverse;
  margin-top: 8px;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 2px solid var(--line);
  font-size: 0.85rem;
}
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}
.local-box {
  border: 2px dashed var(--line);
  padding: 12px;
}
.local-box p {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent);
}
.local-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.local-box li,
.handoff-notes span,
.switch-chip span {
  border: 2px solid var(--line-soft);
  padding: 2px 8px;
  font-size: 0.8rem;
}
.switch-chip span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.switch-b {
  display: none !important;
}
.switch-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 10px 0 0;
}
.mini-browser {
  border: 2px solid var(--line);
}
.mini-url {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 2px solid var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.mini-page {
  padding: 12px;
  display: grid;
  gap: 6px;
}
.mini-page i {
  display: block;
  height: 8px;
  background: var(--line-soft);
}
.mini-button {
  justify-self: start;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 2px 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
}
.mini-cursor {
  display: none;
}
.queue-visual ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
}
.queue-visual li {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 2px solid var(--line-soft);
  padding: 4px 8px;
}
.queue-visual li span {
  width: 10px;
  height: 10px;
  background: var(--accent);
  display: block;
}
.skill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: center;
}
.skill-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border: 2px solid var(--text);
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.8rem;
  background: var(--panel-2);
  box-shadow: 3px 3px 0 var(--accent);
}
.skill-chip .icon {
  color: var(--hot);
}
/* Mobile ------------------------------------------------------------------------------------- */
.mobile {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 2px solid var(--hot);
  color: var(--hot);
  padding: 3px 10px;
  margin-bottom: 14px;
}
.mobile-copy p {
  color: var(--muted);
  font-size: 1.1rem;
}
.mobile-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 10px;
}
.mobile-steps li {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 2px solid var(--line-soft);
  padding: 10px 14px;
  background: var(--panel);
}
.mobile-steps b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  flex: none;
}
.mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.qr {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-transform: uppercase;
}
.qr small {
  display: block;
  color: var(--muted);
}
.qr-code {
  width: 112px;
  height: 112px;
  border: 3px solid var(--text);
  background: #fff;
  box-shadow: var(--shadow-small);
}
.qr-code svg {
  width: 100%;
  height: 100%;
}
.phone-stage {
  display: grid;
  place-items: center;
}
.pair-line {
  display: none;
}
.phone {
  width: 270px;
  border: 4px solid var(--text);
  background: var(--panel);
  box-shadow: 10px 10px 0 var(--accent);
  padding: 14px;
}
.phone-notch {
  width: 60px;
  height: 6px;
  background: var(--text);
  margin: 0 auto 12px;
}
.phone-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  font-weight: 800;
}
.phone-head span {
  display: flex;
  flex-direction: column;
}
.phone-head small {
  font-weight: 400;
  color: var(--muted);
}
.bubble {
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.88rem;
  border: 2px solid var(--line);
  max-width: 90%;
}
.bubble.out {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--text);
}
.bubble.in {
  background: var(--panel-2);
}
.typing-bubble {
  display: flex;
  gap: 4px;
  width: 56px;
}
.typing-bubble i {
  width: 8px;
  height: 8px;
  background: var(--muted);
  display: block;
}
.phone-input {
  margin: 12px 0 0;
  border: 2px solid var(--line-soft);
  padding: 6px 10px;
  color: var(--muted);
  font-size: 0.85rem;
}
/* Downloads ---------------------------------------------------------------------------------- */
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.download-card {
  border: 3px solid var(--text);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 22px;
}
.download-card.recommended {
  border-color: var(--hot);
  box-shadow: 6px 6px 0 var(--hot);
}
.download-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.download-logo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid var(--text);
  background: var(--panel-2);
}
.download-logo svg {
  width: 26px;
  height: 26px;
}
.badge-available {
  background: var(--ok);
  color: #02200f;
  padding: 3px 8px;
  font-weight: 800;
}
.download-req {
  color: var(--muted);
  margin: 0 0 14px;
}
.download-facts {
  display: flex;
  gap: 12px;
  margin: 0 0 18px;
}
.download-facts div {
  flex: 1;
  border: 2px solid var(--line-soft);
  padding: 8px 10px;
}
.download-facts dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--muted);
}
.download-facts dd {
  margin: 0;
  font-weight: 900;
  font-size: 1.15rem;
}
.download-note {
  color: var(--muted);
  font-size: 0.85rem;
}
.checksum {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px dashed var(--line-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
}
.checksum > span:first-child {
  text-transform: uppercase;
  color: var(--muted);
}
.checksum code {
  word-break: break-all;
  color: var(--accent);
}
.checksum .status {
  grid-column: 1 / -1;
  color: var(--ok);
}
.icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid var(--line);
}
.icon-button:hover,
.icon-button.done {
  border-color: var(--accent);
  color: var(--accent);
}
.downloads-later {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--muted);
}
/* FAQ ---------------------------------------------------------------------------------------- */
.faq-list {
  display: grid;
  gap: 14px;
  max-width: 860px;
}
.faq-item {
  border: 3px solid var(--line);
  background: var(--panel);
}
.faq-item[open] {
  border-color: var(--text);
  box-shadow: var(--shadow-small);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary i {
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent);
  position: relative;
  flex: none;
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  background: var(--accent);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.faq-item summary i::before {
  width: 10px;
  height: 2px;
}
.faq-item summary i::after {
  width: 2px;
  height: 10px;
}
.faq-item[open] summary i::after {
  display: none;
}
.faq-item p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
}
/* Final call --------------------------------------------------------------------------------- */
.cta {
  text-align: center;
  border: 3px solid var(--text);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 10px 10px 0 var(--panel-2);
  padding: clamp(32px, 6vw, 64px) 24px;
  margin-bottom: 64px;
}
.cta img {
  margin: 0 auto 16px;
  border: 3px solid var(--accent-ink);
}
.cta h2 {
  background: var(--accent-ink);
  color: var(--accent);
}
.cta p {
  max-width: 600px;
  margin: 18px auto 28px;
  font-weight: 600;
}
.cta .hero-actions {
  justify-content: center;
}
.cta .button {
  background: var(--accent-ink);
  color: var(--text);
  border-color: var(--accent-ink);
  box-shadow: 5px 5px 0 var(--text);
}
/* Footer ------------------------------------------------------------------------------------- */
.footer {
  border-top: 3px solid var(--line);
  background: var(--ink);
  padding: 40px var(--site-pad) 24px;
}
.footer-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
.footer-brand p {
  color: var(--muted);
  max-width: 380px;
}
.footer nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer h2 {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  background: none;
  color: var(--hot);
  padding: 0;
  display: block;
  margin-bottom: 8px;
}
.footer nav a {
  color: var(--text);
  text-decoration: none;
}
.footer nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.footer-note {
  max-width: var(--site-max);
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--mono);
}
/* Small screens ------------------------------------------------------------------------------ */
@media (max-width: 960px) {
  .app {
    grid-template-columns: 180px 1fr;
  }
  .app-panel {
    display: none;
  }
  .bento {
    grid-template-columns: 1fr 1fr;
  }
  .mobile {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .nav {
    display: none;
  }
  .app {
    grid-template-columns: 1fr;
  }
  .app-side {
    border-right: 0;
    border-bottom: 3px solid var(--text);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .side-label,
  .side-foot {
    display: none;
  }
  .side-item {
    width: auto;
  }
  .bento {
    grid-template-columns: 1fr;
  }
  .feature.wide {
    grid-column: auto;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: clamp(2.6rem, 16vw, 5rem);
  }
}