/*
 * caliber_intro.css - Caliber Studio: the landing (Projects), the engine boot screen and its error states, and the
 * project cards. [cal-visual-2] Carbon tokens only; both themes come from the theme zone. Scoped to .cal-intro,
 * .cal-boot, .cal-pcard and the engine-wait gates, so the other screens are untouched.
 */

/* ---------------------------------------------------------------- Fit to the window
   The landing and the boot screen size the studio frame to what the window has left (CALIBER.intro.fit sets
   --cal-fit-h and data-fit): the page does not scroll, the rail and the pane scroll on their own. As for the
   architecture view (shell.css, body:has(#nx-root)), the main area stops claiming the window's full height. */
body:has(.cal-root .cal-intro[data-fit]) cds-theme, body:has(.cal-root .cal-intro[data-fit]) #main-content, body:has(.cal-root .cal-intro[data-fit]) #view-container,
body:has(.cal-root .cal-boot[data-fit]) cds-theme, body:has(.cal-root .cal-boot[data-fit]) #main-content, body:has(.cal-root .cal-boot[data-fit]) #view-container,
/* A gate (engine down, not available, retry) is one short card: the page ends below it rather than scrolling by the footer */
body:has(.cal-root .cal-pane > .cal-gate) cds-theme, body:has(.cal-root .cal-pane > .cal-gate) #main-content, body:has(.cal-root .cal-pane > .cal-gate) #view-container { min-height: 0 !important; }
.cal-root:has(.cal-intro[data-fit]) .cal-work, .cal-root:has(.cal-boot[data-fit]) .cal-work { height: var(--cal-fit-h, auto); min-height: 0; grid-template-rows: minmax(0, 1fr); }
.cal-root:has(.cal-intro[data-fit]) .cal-pane, .cal-root:has(.cal-boot[data-fit]) .cal-pane { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
@media (min-width: 1056px) {
  .cal-root:has(.cal-intro[data-fit]) .cal-rail { position: relative; top: auto; align-self: stretch; max-height: none; overflow-y: auto; }
}
/* while the engine starts (or cannot be reached) the frame does not hold a fixed tall box under a short message */
.cal-root[data-engine] .cal-work, .cal-root[data-gate] .cal-work { min-height: 0; }

/* ---------------------------------------------------------------- The mark and the hero pattern */
.cal-mark { flex: none; display: block; }
.cal-mark__tile { fill: var(--cds-interactive); }
.cal-mark__jaw, .cal-mark__bar { stroke: var(--cds-text-on-color); }
.cal-mark__bar { opacity: .72; }
.cal-mark__node { fill: var(--cds-text-on-color); }
.cal-art { display: block; color: var(--cds-border-strong-01); }
.cal-art__edges line { stroke: currentColor; stroke-width: 1; }
.cal-art__nodes :is(rect, circle) { fill: var(--cds-layer-01); stroke: currentColor; stroke-width: 1.2; }
.cal-art__hot circle { fill: var(--cds-interactive); stroke: none; opacity: .85; }

/* ---------------------------------------------------------------- Landing */
.cal-intro { display: flex; flex-direction: column; gap: var(--cds-spacing-05); min-width: 0; }
.cal-intro__hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-04) var(--cds-spacing-06);
  padding: var(--cds-spacing-05) var(--cds-spacing-06); background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); border-left: 3px solid var(--cds-interactive); }
.cal-intro__hero .cal-art { position: absolute; z-index: -1; right: 0; top: 0; height: 100%; width: min(42%, 400px); opacity: .35; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 45%); mask-image: linear-gradient(90deg, transparent, black 45%); }
/* [K1] the brand asks for room enough to say its one sentence whole; the actions wrap under it rather than clip it */
.cal-intro__brand { display: flex; align-items: center; gap: var(--cds-spacing-04); min-width: 0; flex: 1 1 26rem; }
.cal-intro__text { min-width: 0; }
.cal-intro__eyebrow { margin: 0; font-size: var(--f-sm); color: var(--cds-text-secondary); letter-spacing: .32px; }
.cal-root .cal-intro__title { margin: 0; font-size: var(--f-xl); line-height: var(--lh-snug, 1.3); font-weight: var(--fw-regular); }
.cal-intro__value { margin: var(--cds-spacing-01) 0 0; color: var(--cds-text-secondary); font-size: var(--f-ms); max-width: 64ch; } /* [K1] the purpose sentence is never clipped */
.cal-intro__actions { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); align-items: center; flex: 0 1 auto; }
.cal-intro__actions .hx-btn { white-space: nowrap; }
.cal-intro__recent-key { font-family: var(--mono); font-size: var(--f-sm); opacity: .8; }

/* glanceable figures: four in a row, a hairline between them */
.cal-intro__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--cds-border-subtle-01); border: 1px solid var(--cds-border-subtle-01); }
.cal-intro__stats > li:not(.cal-stat) { display: flex; min-width: 0; background: var(--cds-layer-01); }
.cal-intro__stats > li > .cal-stat { flex: 1 1 auto; }
.cal-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-05); background: var(--cds-layer-01); min-width: 0; color: var(--cds-text-primary); text-decoration: none; }
a.cal-stat { transition: background-color 150ms var(--cds-ease-productive, ease); }
a.cal-stat:hover { background: var(--cds-layer-hover-01); }
a.cal-stat:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: calc(-1 * var(--hx-focus-ring-width)); }
.cal-stat__label { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--cds-spacing-02); font-size: var(--f-sm); color: var(--cds-text-secondary); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-stat__label .hx-i { flex: none; color: var(--cds-icon-secondary); }
.cal-stat__value { grid-column: 1; font-size: 28px; line-height: 36px; font-weight: var(--fw-light, 300); font-variant-numeric: tabular-nums; }
.cal-stat__note { grid-column: 1 / -1; font-size: var(--f-xs, 12px); color: var(--cds-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-stat__viz { grid-column: 2; grid-row: 2; align-self: center; }
.cal-stat__viz .cal-stack { width: 64px; }
.cal-stat__viz .cal-pring svg { width: 36px; height: 36px; }
.cal-stat.is-pending .cal-stat__value { color: var(--cds-text-secondary); }

/* the projects section */
.cal-intro__section { display: flex; flex-direction: column; gap: var(--cds-spacing-04); min-width: 0; }
.cal-intro__section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-03) var(--cds-spacing-04); }
.cal-root .cal-intro__h { margin: 0; font-size: var(--f-md); font-weight: var(--fw-semibold); display: flex; align-items: baseline; gap: var(--cds-spacing-03); }
.cal-intro__count { font-size: var(--f-sm); font-weight: var(--fw-regular); color: var(--cds-text-secondary); font-variant-numeric: tabular-nums; }
.cal-intro__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-03); margin: 0 0 0 auto; min-width: 0; }
.cal-intro__tools .hx-input, .cal-intro__tools .hx-select { min-height: 32px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: var(--f-ms); }
.cal-intro__tools .cal-intro__q { width: clamp(140px, 13vw, 240px); }
.cal-intro__tools .hx-icon-btn { width: 32px; height: 32px; }
.cal-intro__tools .hx-select { width: auto; max-width: 200px; }
.cal-intro__tools .hx-check { white-space: nowrap; font-size: var(--f-ms); }
/* the projects page's icon-only Cards/List switch: scoped to its toolbar, because .cal-seg is also the labeled segmented
   switch of caliber.css (the requirements Table/Board switch was squeezed to 32px buttons and its labels overlapped) */
.cal-intro__tools .cal-seg { display: inline-flex; border: 1px solid var(--cds-border-strong-01); }
.cal-intro__tools .cal-seg button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--cds-icon-secondary); cursor: pointer; }
.cal-intro__tools .cal-seg button + button { border-left: 1px solid var(--cds-border-subtle-01); }
.cal-intro__tools .cal-seg button:hover { background: var(--cds-layer-hover-01); color: var(--cds-icon-primary); }
.cal-intro__tools .cal-seg button[aria-pressed="true"] { background: var(--cds-layer-selected-01); color: var(--cds-icon-primary); }
.cal-intro__tools .cal-seg button:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: calc(-1 * var(--hx-focus-ring-width)); }
.cal-intro__more { margin: 0; font-size: var(--f-sm); color: var(--cds-text-secondary); }

/* ---------------------------------------------------------------- Project cards */
.cal-pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--cds-spacing-04); }
.cal-root .cal-pcard { position: relative; display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-05); background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  transition: border-color 150ms var(--cds-ease-productive, ease), background-color 150ms var(--cds-ease-productive, ease), box-shadow 150ms var(--cds-ease-productive, ease); }
.cal-root .cal-pcard:hover { background: var(--cds-layer-hover-01); border-color: var(--cds-border-strong-01); }
.cal-root .cal-pcard:focus-within { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: calc(-1 * var(--hx-focus-ring-width)); }
.cal-root .cal-pcard.is-archived { background: var(--cds-background); }
.cal-pcard > * { margin: 0; }
.cal-pcard__top { display: flex; align-items: center; gap: var(--cds-spacing-03); min-width: 0; }
.cal-pcard__key { font-family: var(--mono); font-size: var(--f-xs, 12px); line-height: 18px; padding: 0 var(--cds-spacing-03); background: var(--cds-tag-blue-bg); color: var(--cds-tag-blue-color); white-space: nowrap; }
.cal-pcard__role { margin-left: auto; font-size: var(--f-xs, 12px); color: var(--cds-text-secondary); white-space: nowrap; }
.cal-pcard__role[data-role="owner"] { color: var(--cds-text-primary); }
.cal-root .cal-pcard__name { font-size: var(--f-md); line-height: 22px; font-weight: var(--fw-semibold); min-width: 0; }
.cal-root .cal-pcard__link { color: var(--cds-text-primary); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cal-pcard__link::after { content: ""; position: absolute; inset: 0; }
.cal-pcard__link:focus-visible { outline: none; }
.cal-root .cal-pcard:hover .cal-pcard__link { color: var(--cds-link-primary); }
.cal-root .cal-pcard .cal-pcard__desc { -webkit-line-clamp: 2; min-height: calc(2 * 20px); font-size: var(--f-ms); line-height: 20px; color: var(--cds-text-secondary); }
.cal-pcard__desc.is-none { font-style: italic; }
.cal-pcard__health { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--cds-spacing-02) var(--cds-spacing-03); align-items: center; padding: var(--cds-spacing-03) 0 0; border-top: 1px solid var(--cds-border-subtle-01); }
.cal-pcard__metric { display: contents; }
.cal-pcard__metric-text { font-size: var(--f-sm); color: var(--cds-text-secondary); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pcard__metric-text strong { color: var(--cds-text-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cal-pcard__health .cal-stack { width: 28px; }
.cal-pcard__foot { display: flex; align-items: center; gap: var(--cds-spacing-04); margin-top: auto; font-size: var(--f-sm); color: var(--cds-text-secondary); min-width: 0; }
.cal-pcard__who, .cal-pcard__when, .cal-pcard__folder { display: inline-flex; align-items: center; gap: var(--cds-spacing-02); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pcard__who > span:last-child, .cal-pcard__folder > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cal-pcard__when .hx-i, .cal-pcard__folder .hx-i { flex: none; width: 14px; height: 14px; }
.cal-pcard__tools { margin-left: auto; display: inline-flex; position: relative; z-index: 1; }
.cal-pcard__tools .hx-icon-btn { width: 32px; height: 32px; }
.cal-avatar { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--hx-radius-round, 50%); background: var(--cds-layer-accent-01); color: var(--cds-text-primary); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .2px; }

/* the small health visuals */
.cal-pring { display: inline-flex; flex: none; }
.cal-pring svg { display: block; transform: rotate(0deg); }
.cal-pring__track { fill: none; stroke: var(--cds-layer-accent-01); stroke-width: 4; }
.cal-pring__fill { fill: none; stroke: var(--cds-interactive); stroke-width: 4; transition: stroke-dasharray 240ms var(--cds-ease-productive, ease); }
.cal-pring[data-tone="good"] .cal-pring__fill { stroke: var(--cds-support-success); }
.cal-pring[data-tone="mid"] .cal-pring__fill { stroke: var(--cds-interactive); }
.cal-pring[data-tone="low"] .cal-pring__fill { stroke: var(--cds-support-warning); }
.cal-pring[data-tone="none"] .cal-pring__track { stroke-dasharray: 2 2; }
.cal-stack { display: flex; height: 8px; min-width: 24px; background: var(--cds-layer-accent-01); overflow: hidden; }
.cal-stack > span { display: block; height: 100%; }
.cal-stack__ok { background: var(--cds-support-success); }
.cal-stack__rv { background: var(--cds-interactive); }
.cal-stack__rest { background: var(--cds-border-strong-01); }
.cal-stack.is-empty { background: transparent; border: 1px dashed var(--cds-border-strong-01); }
.cal-skel { display: block; background: var(--cds-skeleton-background, var(--cds-layer-accent-01)); position: relative; overflow: hidden; }
.cal-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--cds-skeleton-element, var(--cds-layer-hover-01)), transparent); transform: translateX(-100%); animation: cal-shimmer 1.6s var(--cds-ease-productive, ease) infinite; }
.cal-pcard .cal-skel { height: 8px; width: 28px; }
@keyframes cal-shimmer { to { transform: translateX(100%); } }

/* the list view */
.cal-plist { width: 100%; }
.cal-plist .cal-plist__name { display: flex; flex-direction: column; min-width: 0; max-width: 42ch; }
.cal-plist .cal-plist__name a { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-plist .cal-plist__desc { font-size: var(--f-sm); color: var(--cds-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-plist .cal-plist__health { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); white-space: nowrap; }
.cal-plist .cal-stack { width: 48px; }
.cal-plist .cal-pring svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- First use */
.cal-intro__section > [data-ref]:empty { display: none; }
.cal-root .cal-onboard__lead { margin: 0 0 var(--cds-spacing-04); font-size: var(--f-ms); color: var(--cds-text-secondary); }
.cal-onboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cds-spacing-04); list-style: none; margin: 0; padding: 0; counter-reset: cal-step; }
.cal-onboard__step { display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-05); background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); border-top: 3px solid var(--cds-border-strong-01); min-width: 0; counter-increment: cal-step; }
.cal-onboard__step.is-first { border-top-color: var(--cds-interactive); }
.cal-onboard__step > * { margin: 0; }
.cal-onboard__num { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); font-size: var(--f-sm); color: var(--cds-text-secondary); }
.cal-onboard__num::before { content: counter(cal-step); display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--cds-border-strong-01); border-radius: var(--hx-radius-round, 50%); font-variant-numeric: tabular-nums; color: var(--cds-text-primary); }
.cal-onboard__step.is-first .cal-onboard__num::before { background: var(--cds-interactive); border-color: var(--cds-interactive); color: var(--cds-text-on-color); }
.cal-root .cal-onboard__title { font-size: var(--f-md); font-weight: var(--fw-semibold); }
.cal-onboard__text { font-size: var(--f-ms); color: var(--cds-text-secondary); flex: 1; }
.cal-onboard__step .hx-btn { align-self: flex-start; }
.cal-onboard__lead { margin: 0; color: var(--cds-text-secondary); font-size: var(--f-ms); }

/* ---------------------------------------------------------------- Engine boot screen */
.cal-boot { display: flex; flex-direction: column; gap: var(--cds-spacing-05); min-height: 100%; }
.cal-boot__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-06) var(--cds-spacing-07);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); border-left: 3px solid var(--cds-interactive); }
.cal-boot__card > * { margin: 0; }
.cal-boot__art { position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: min(48%, 440px); opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 50%); mask-image: linear-gradient(90deg, transparent, black 50%); }
.cal-boot__art .cal-art { width: 100%; height: 100%; }
.cal-boot__brand { display: flex; align-items: center; gap: var(--cds-spacing-03); font-size: var(--f-ms); font-weight: var(--fw-semibold); }
.cal-root .cal-boot__title { font-size: var(--f-xl); line-height: var(--lh-snug, 1.3); font-weight: var(--fw-regular); margin-top: var(--cds-spacing-02); }
.cal-boot__msg { color: var(--cds-text-secondary); font-size: var(--f-ms); max-width: 64ch; min-height: 20px; }
.cal-boot__progress { position: relative; height: 4px; max-width: 420px; background: var(--cds-layer-accent-01); overflow: hidden; margin: var(--cds-spacing-02) 0; }
.cal-boot__progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: var(--cds-interactive); animation: cal-boot-run 1.4s var(--cds-ease-productive, ease) infinite; }
@keyframes cal-boot-run { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.cal-boot__steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cds-spacing-04); max-width: 880px; }
.cal-boot__step { display: flex; gap: var(--cds-spacing-03); align-items: flex-start; min-width: 0; color: var(--cds-text-secondary); }
.cal-boot__step-text { display: flex; flex-direction: column; min-width: 0; font-size: var(--f-sm); }
.cal-boot__step-text strong { font-weight: var(--fw-semibold); font-size: var(--f-ms); }
.cal-boot__step.is-on, .cal-boot__step.is-done { color: var(--cds-text-primary); }
.cal-boot__step.is-on .cal-boot__step-text span, .cal-boot__step.is-done .cal-boot__step-text span { color: var(--cds-text-secondary); }
.cal-boot__dot { flex: none; position: relative; width: 16px; height: 16px; margin-top: 2px; border-radius: var(--hx-radius-round, 50%); border: 1.5px solid var(--cds-border-strong-01); }
.cal-boot__step.is-done .cal-boot__dot { border-color: var(--cds-support-success); background: var(--cds-support-success); }
.cal-boot__step.is-done .cal-boot__dot::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--cds-text-on-color); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cal-boot__step.is-on .cal-boot__dot { border-color: var(--cds-interactive); border-right-color: transparent; animation: cal-boot-spin 900ms linear infinite; }
@keyframes cal-boot-spin { to { transform: rotate(360deg); } }
.cal-boot__foot { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-02) var(--cds-spacing-04); font-size: var(--f-sm); color: var(--cds-text-secondary); margin-top: var(--cds-spacing-02); }
.cal-boot__foot [data-ref="boot-time"]:empty { display: none; }
.cal-boot__foot [data-ref="boot-time"] { font-variant-numeric: tabular-nums; color: var(--cds-text-primary); }
.cal-boot.is-slow .cal-boot__card { border-left-color: var(--cds-support-warning); }
.cal-boot__ghost { display: flex; flex-direction: column; gap: var(--cds-spacing-05); flex: 1 1 auto; min-height: 0; overflow: hidden; opacity: .9; }
.cal-boot__ghost-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--cds-border-subtle-01); border: 1px solid var(--cds-border-subtle-01); }
.cal-boot__ghost-tile { display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-05); background: var(--cds-layer-01); }
.cal-boot__ghost-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--cds-spacing-04); }
.cal-boot__ghost-card { display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-05); background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); }
.cal-skel--label { height: 10px; width: 40%; }
.cal-skel--value { height: 22px; width: 30%; }
.cal-skel--chip { height: 14px; width: 44px; }
.cal-skel--title { height: 14px; width: 70%; }
.cal-skel--line { height: 10px; width: 100%; }
.cal-skel--short { width: 60%; }

/* the engine's error states (not running, switched off, not in the plan, not available) in the same frame */
.cal-root[data-engine] .cal-gate, .cal-root[data-gate] .cal-gate { position: relative; max-width: 880px; padding: var(--cds-spacing-06) var(--cds-spacing-07) var(--cds-spacing-06) calc(var(--cds-spacing-07) + 48px);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); border-left: 3px solid var(--cds-support-warning); }
.cal-root[data-engine] .cal-gate[data-cal-gate="unavailable"], .cal-root[data-engine] .cal-gate[data-cal-gate="plan"], .cal-root[data-gate] .cal-gate { border-left-color: var(--cds-border-strong-01); }
.cal-root[data-engine] .cal-gate::before, .cal-root[data-gate] .cal-gate::before { content: ""; position: absolute; left: var(--cds-spacing-07); top: var(--cds-spacing-06); width: 32px; height: 32px; background: var(--cds-interactive);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' fill-rule='evenodd' d='M0 0h32v32H0zM9 7v18h9v-2.4h-6.6V9.4H18V7zm4 4.6v1.8h10v-1.8zm0 3.5v1.8h7v-1.8zm0 3.5v1.8h10v-1.8zM23 6.6a2.4 2.4 0 100 4.8 2.4 2.4 0 000-4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' fill-rule='evenodd' d='M0 0h32v32H0zM9 7v18h9v-2.4h-6.6V9.4H18V7zm4 4.6v1.8h10v-1.8zm0 3.5v1.8h7v-1.8zm0 3.5v1.8h10v-1.8zM23 6.6a2.4 2.4 0 100 4.8 2.4 2.4 0 000-4.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cal-root[data-engine] .cal-gate .hd-state, .cal-root[data-gate] .cal-gate .hd-state { padding: 0; background: none; border: 0; }
.cal-root[data-engine] .cal-gate .hx-row, .cal-root[data-gate] .cal-gate .hx-row { margin: var(--cds-spacing-05) 0 0; }

/* ---------------------------------------------------------------- Narrow and short windows */
@media (max-width: 1311px) {
  .cal-stat { padding: var(--cds-spacing-03) var(--cds-spacing-04); }
  .cal-stat__value { font-size: 24px; line-height: 30px; }
  .cal-stat__viz .cal-stack { width: 40px; }
  .cal-intro__hero .cal-art { opacity: .22; }
  .cal-stat__viz .cal-pring svg { width: 28px; height: 28px; }
}
@media (max-width: 1055px) {
  .cal-intro__tools { margin-left: 0; flex: 1 1 100%; }
  .cal-intro__tools .cal-intro__q { flex: 1 1 160px; width: auto; }
  .cal-boot__art { width: 36%; opacity: .3; }
}
@media (max-width: 671px) {
  .cal-intro__hero { padding: var(--cds-spacing-05); }
  .cal-intro__hero .cal-art { display: none; }
  .cal-intro__actions { width: 100%; }
  .cal-intro__stats, .cal-boot__ghost-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-stat__viz { display: none; }
  .cal-onboard, .cal-boot__steps { grid-template-columns: minmax(0, 1fr); }
  .cal-boot__card { padding: var(--cds-spacing-05); }
  .cal-boot__art { display: none; }
  .cal-root[data-engine] .cal-gate, .cal-root[data-gate] .cal-gate { padding: calc(var(--cds-spacing-06) + 40px) var(--cds-spacing-05) var(--cds-spacing-05); }
  .cal-root[data-engine] .cal-gate::before, .cal-root[data-gate] .cal-gate::before { left: var(--cds-spacing-05); top: var(--cds-spacing-05); }
  .cal-intro__tools .hx-select { max-width: none; flex: 1 1 140px; }
}
/* a short window (a 720px laptop): the hero drops its pattern's weight and the figures go one line tighter */
@media (max-height: 800px) {
  .cal-intro { gap: var(--cds-spacing-04); }
  .cal-intro__hero { padding-top: var(--cds-spacing-04); padding-bottom: var(--cds-spacing-04); }
  .cal-intro__eyebrow { display: none; }
  .cal-intro__brand .cal-mark { width: 32px; height: 32px; }
  .cal-boot__card { padding-top: var(--cds-spacing-05); padding-bottom: var(--cds-spacing-05); }
  .cal-boot__ghost-cards .cal-boot__ghost-card:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-boot__progress span, .cal-boot__step.is-on .cal-boot__dot, .cal-skel::after { animation: none; }
  .cal-boot__progress span { width: 100%; opacity: .5; }
  .cal-pcard, a.cal-stat, .cal-pring__fill { transition: none; }
}