@import url('tokens.css');

/* ============================================================================
   Welcome page (WelcomeEntry). The whole program, one area at a time: the head with the tour, the
   trail of every stop under the names of its stretches, the stage that explains the stop on the
   trail beside its drawing, and a quiet foot with the help and the way out.
   Global wel-* classes (no CSS isolation: the embedded host does not serve the scoped bundle).
   Every themed value reads a token, so light and dark both hold; the bare px are structural
   dimensions.

   It is the first thing a new station shows, so it takes the whole window: the trail runs across
   the width, and the stage takes every pixel of height left, so the drawing grows with the window.
   It still scrolls on its own when the window is shorter than the page.

   The drawings (Components/WelcomeScenes) stand on a canvas of fixed proportion, 16 by 10, laid out
   on a 160 by 100 grid. The canvas is a size container: its type size is a share of its own width,
   so every part, word and line of a drawing grows and shrinks together, like one picture.
   ============================================================================ */

/* The page stands in the shell's content row that stretches (the one every page root takes), so
   its height is the window's and the stage below can grow into it. */
.wel-page {
    grid-row: 2;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    display: flex;
    padding: 24px 36px 18px;
}

.wel-inner {
    width: 100%;
    max-width: 1760px;
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---- The head --------------------------------------------------------------------------- */
.wel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-8);
}

.wel-head-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.wel-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;   /* display tracking (docs/brand/brand.md) */
    color: var(--color-text);
    text-wrap: balance;
}

.wel-lead {
    margin: 0;
    font-size: 16px;
    color: var(--color-text-secondary);
}

/* The visitor showcase's one line about languages, under the lead: the size of the page's other
   secondary lines and their ink, with no border, fill or mark, because it explains the
   demonstration rather than warning about anything. */
.wel-visitor-note {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* The program tour's way in, at the head's end: the page's one accent command. */
.wel-tour {
    display: flex;
    flex: 0 0 auto;
}

/* The page's commands, a step larger than a working page's. */
.wel-btn {
    min-height: 40px;
    padding: 0 20px;
    font-size: 15px;
    gap: var(--space-3);
}

/* ---- The trail -------------------------------------------------------------------------- */
/* One column per stop: the names of the stretches above, the stops under them, a line from each
   stop to the next. A container, so a narrow window keeps only the stop on screen named. */
.wel-trail {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.wel-trail-chapters,
.wel-trail-stops {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
}

/* A stretch's name over its stops, with the rule under it that spans them, like a dimension line. */
.wel-chapter {
    margin: 0 14px;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-stroke);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.wel-chapter.current {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
}

.wel-trail-cell {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.wel-stop {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    padding: 4px 4px 2px;
    border: none;
    border-radius: var(--radius-lg);
    background: none;
    font: inherit;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wel-stop:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-accent);
    outline-offset: var(--focus-ring-offset);
}

.wel-stop-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--color-stroke);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.wel-stop:hover .wel-stop-dot {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* A stop already walked keeps the accent's outline; the one on screen is filled and ringed. */
.wel-stop.passed .wel-stop-dot {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.wel-stop.current .wel-stop-dot {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 0 0 5px var(--color-accent-bg);
    transform: scale(1.08);
}

/* Process is there if the station needs it: its stop is drawn dashed. */
.wel-stop.optional .wel-stop-dot {
    border-style: dashed;
}

.wel-stop.optional.current .wel-stop-dot {
    border-style: solid;
}

/* The check of a stop the station already holds, on the dot's shoulder. */
.wel-stop-dot .wel-check {
    position: absolute;
    top: -5px;
    right: -6px;
}

.wel-stop-dot .wel-check svg {
    width: 18px;
    height: 18px;
}

.wel-stop-dot .wel-brand-mark {
    stroke: currentColor;
}

.wel-stop-name {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

.wel-stop.current .wel-stop-name {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* The line from a stop's dot to the next one's, at the dots' middle height. */
.wel-trail-line {
    position: absolute;
    top: 27px;
    left: calc(50% + 28px);
    right: calc(-50% + 28px);
    height: 2px;
    border-radius: 1px;
    background: var(--color-stroke);
    overflow: hidden;
}

/* Between two stretches the line is dashed: the trail goes on, into another part of the program. */
.wel-trail-line.chapter-end {
    background: linear-gradient(to right, var(--color-stroke) 55%, transparent 0) 0 0 / 7px 2px repeat-x;
}

.wel-trail-cell.passed .wel-trail-line {
    background: var(--color-accent);
}

.wel-trail-cell.passed .wel-trail-line.chapter-end {
    background: linear-gradient(to right, var(--color-accent) 55%, transparent 0) 0 0 / 7px 2px repeat-x;
}

/* While the trail plays, the line after the stop on screen fills over the dwell, so the reader sees
   when the next stop comes; the pointer on the stage holds it where it is. */
.wel-trail-fill {
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    animation: wel-fill 11s linear forwards;
}

.wel-trail-fill.held {
    animation-play-state: paused;
}

@keyframes wel-fill {
    to {
        transform: scaleX(1);
    }
}

/* A narrow window: only the stop on screen keeps its name, the others are their marks. */
@container (max-width: 860px) {
    .wel-stop-name {
        display: none;
    }

    .wel-chapter {
        margin: 0 6px;
        font-size: 10px;
    }

    .wel-stop-dot {
        width: 36px;
        height: 36px;
    }

    .wel-trail-line {
        top: 23px;
        left: calc(50% + 23px);
        right: calc(-50% + 23px);
    }
}

/* ---- The stage -------------------------------------------------------------------------- */
/* The words on the left, the drawing on the right taking the stage's whole height, so it grows
   with the window. */
.wel-stage {
    flex: 1 1 auto;
    min-height: 440px;
    display: grid;
    grid-template-columns: minmax(320px, 5fr) minmax(0, 9fr);
    gap: 32px;
    padding: 18px 18px 18px 28px;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* The words' column: the stop's name and the trail's controls on top, the words in the middle of
   what height is left. */
.wel-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.wel-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-width: 0;
}

/* The stop's page, in the rail's own mark and name, and where it stands on the trail. */
.wel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    white-space: nowrap;
}

.wel-eyebrow .wel-brand-mark {
    stroke: currentColor;
}

.wel-eyebrow-count {
    margin-left: var(--space-2);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.wel-controls {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-3);
}

.wel-control {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-stroke);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out),
        background-color var(--dur-quick) var(--ease-out);
}

.wel-control:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.wel-control:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-accent);
    outline-offset: var(--focus-ring-offset);
}

.wel-control-play {
    border-color: transparent;
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

/* ---- The words of a stop ---------------------------------------------------------------- */
.wel-copy-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
    margin: auto 0;
    animation: wel-copy-in 0.45s var(--ease-out) both;
}

@keyframes wel-copy-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
}

.wel-step-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-wrap: balance;
}

.wel-step-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.wel-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.wel-point {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: start;
    gap: var(--space-4);
}

.wel-point-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.wel-point-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wel-point-name {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.wel-point-line {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.wel-step-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-3);
}

/* What the station already holds here, or that the stop is optional. */
.wel-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.wel-state-optional {
    padding: 4px 12px;
    border: 1px dashed var(--color-stroke);
    border-radius: var(--radius-pill);
}

/* ---- The marks: done -------------------------------------------------------------------- */
.wel-check {
    display: inline-flex;
    line-height: 0;
}

.wel-check svg {
    width: 20px;
    height: 20px;
}

.wel-check circle {
    fill: var(--color-success-fill);
}

.wel-check path {
    fill: none;
    stroke: var(--color-text-on-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Account's brand G, the rail's own mark. */
.wel-brand-mark {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- The foot --------------------------------------------------------------------------- */
.wel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
}

.wel-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    min-width: 0;
}

.wel-keycap {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wel-keycap .wel-keycap-dot {
    fill: var(--color-accent);
    stroke: none;
}

.wel-help-line {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* The Help key's mark inside the sentence, in the ink the key itself wears. */
.wel-help-key {
    display: inline-flex;
    vertical-align: -3px;
    margin: 0 2px;
    color: var(--color-text);
}

.wel-help-open,
.wel-dismiss {
    font-size: 14px;
}

.wel-dismiss {
    color: var(--color-text-secondary);
}

.wel-dismiss:hover {
    color: var(--color-text);
}

/* ---- The drawing's canvas --------------------------------------------------------------- */
.wel-scene {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    container-type: size;
}

.wel-canvas {
    position: relative;
    width: min(100cqw, 160cqh);
    aspect-ratio: 16 / 10;
    container-type: inline-size;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 12px;
    background:
        radial-gradient(circle, var(--color-overlay-grid) 1px, transparent 1.5px) 0 0 / 22px 22px,
        var(--color-surface-alt);
    overflow: hidden;
}

/* The drawing's own type size: a share of the canvas's width, so the drawing scales as one. */
.wel-art {
    position: absolute;
    inset: 0;
    font-size: 1.8cqw;
    line-height: 1.3;
    color: var(--color-text);
}

/* Every part stands where its style puts it on the grid, and arrives in the order of the story. */
:where(.wel-art > *) {
    position: absolute;
    box-sizing: border-box;
    animation: wel-rise 0.55s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

@keyframes wel-rise {
    from {
        opacity: 0;
        transform: translateY(0.6em);
    }
}

@keyframes wel-fade {
    from {
        opacity: 0;
    }
}

/* ---- The drawing's lines ---------------------------------------------------------------- */
.wel-art > .wel-wires {
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: wel-fade 0.6s var(--ease-out) 0.5s both;
}

.wel-wire {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 0.45;
    stroke-linecap: round;
}

.wel-wire.caution {
    stroke: var(--color-caution);
}

/* Data on its way: dashes running along the line in the direction it flows. */
.wel-flow {
    stroke-dasharray: 1.6 1.4;
    animation: wel-flow 1.2s linear infinite;
}

.wel-dashed {
    stroke-dasharray: 1 1.2;
    opacity: 0.55;
}

@keyframes wel-flow {
    to {
        stroke-dashoffset: -6;
    }
}

.wel-arrowhead {
    fill: var(--color-accent);
}

.wel-arrowhead.caution {
    fill: var(--color-caution);
}

/* ---- The drawing's parts ---------------------------------------------------------------- */
.wel-node {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    padding: 0.7em 0.85em;
    border: 1px solid var(--color-stroke);
    border-radius: 0.7em;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.wel-node-head,
.wel-node-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wel-spread {
    justify-content: space-between;
}

/* A glyph takes the ink of what holds it here: the base rule's secondary grey would sink into the
   accent of a filled mark, and the parts that want a colour of their own say so below. */
.wel-stop-dot .ui-glyph,
.wel-point-mark .ui-glyph,
.wel-control .ui-glyph,
.wel-eyebrow .ui-glyph,
.wel-art .ui-glyph {
    color: inherit;
}

.wel-art .ui-glyph {
    font-size: 1.1em;
    line-height: 1;
}

.wel-art .wel-g {
    flex: 0 0 auto;
    font-size: 1.3em;
    color: var(--color-accent);
}

.wel-art .wel-g-sub {
    flex: 0 0 auto;
    font-size: 1.15em;
    color: var(--color-text-secondary);
}

/* A column's name over the drawing, uppercase and tracked like the trail's stretches. */
.wel-cap,
.wel-cap-inline {
    font-size: 0.66em;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wel-cap-center {
    text-align: center;
}

.wel-sub {
    font-size: 0.82em;
    color: var(--color-text-secondary);
}

.wel-line {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
    font-size: 0.88em;
    white-space: nowrap;
}

.wel-mono {
    font-family: var(--font-mono);
}

.wel-addr {
    font-size: 0.82em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wel-val {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wel-big {
    font-size: 1.7em;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.wel-code {
    align-self: flex-start;
    max-width: 100%;
    padding: 0.25em 0.55em;
    border-radius: 0.35em;
    background: var(--color-surface-alt);
    font-family: var(--font-mono);
    font-size: 0.78em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wel-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    align-self: flex-start;
    padding: 0.2em 0.65em;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: 0.74em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wel-chip.current {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-accent-text);
}

.wel-push {
    margin-left: auto;
}

.wel-dot {
    flex: 0 0 auto;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--color-neutral);
}

.wel-dot.ok {
    background: var(--color-success);
}

.wel-dot.caution {
    background: var(--color-caution);
}

.wel-dot.critical {
    background: var(--color-critical);
}

.wel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    align-self: flex-start;
    padding: 0.2em 0.65em;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-bg);
    font-size: 0.72em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wel-badge.ok {
    background: var(--color-success-bg);
    color: var(--color-text);
}

.wel-badge.ok .ui-glyph {
    color: var(--color-success);
}

.wel-badge.critical {
    background: var(--color-critical-bg);
    color: var(--color-text);
}

.wel-fake-btn {
    align-self: flex-start;
    padding: 0.35em 0.9em;
    border: 1px solid var(--color-stroke);
    border-radius: 0.45em;
    background: var(--color-surface);
    font-size: 0.8em;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.wel-fake-btn.accent {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* Something that is not the station's: drawn dashed, with no surface of its own. */
.wel-node.wel-ghost {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

/* Something present but not the point: drawn in the well's colour. */
.wel-node.wel-faint {
    background: transparent;
    box-shadow: none;
}

/* A value that just changed lights in the accent for a moment. */
.wel-live {
    animation: wel-blip 2.4s ease-in-out infinite;
    animation-delay: var(--wel-delay, 0ms);
}

@keyframes wel-blip {
    0%, 78%, 100% {
        color: inherit;
    }

    86% {
        color: var(--color-accent-text);
    }
}

.wel-pulse {
    animation: wel-pulse 1.6s ease-in-out infinite;
}

@keyframes wel-pulse {
    50% {
        opacity: 0.35;
    }
}

.wel-blink {
    animation: wel-blink 1.1s steps(1) infinite;
}

@keyframes wel-blink {
    50% {
        opacity: 0.45;
    }
}

/* ---- Connector -------------------------------------------------------------------------- */
.wel-node.wel-device {
    justify-content: center;
}

/* A name in a narrow part may take two lines rather than lose its end. */
.wel-device .wel-node-head,
.wel-ghost .wel-node-head {
    white-space: normal;
    line-height: 1.2;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* The Connector is a frame the drivers and tags stand in. */
.wel-node.wel-hub {
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}

/* A driver: the plug and its protocol, joined to its equipment on one side and its tags on the
   other. */
.wel-driver {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 0.6em;
    border: 1px solid var(--color-accent);
    border-radius: 0.5em;
    background: var(--color-accent-bg);
    font-size: 0.78em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
}

.wel-art .wel-driver .ui-glyph {
    color: var(--color-accent);
}

/* The scaling a tag applies, on its name's line. */
.wel-scale {
    margin-left: auto;
    padding: 0.05em 0.45em;
    border-radius: 0.3em;
    background: var(--color-surface);
    font-size: 0.92em;
    color: var(--color-accent-text);
}

.wel-tag {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35em;
    padding: 0.45em 0.65em;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 0.5em;
    background: var(--color-surface-alt);
}

.wel-tag-name {
    display: flex;
    align-items: center;
    gap: 0.45em;
    min-width: 0;
    font-size: 0.88em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wel-tag-reading {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.wel-raw {
    font-size: 0.84em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wel-art .wel-tag-arrow {
    font-size: 0.9em;
    color: var(--color-accent);
}

.wel-tag-reading .wel-val {
    margin-left: auto;
    font-size: 1.15em;
}

/* ---- Logic ------------------------------------------------------------------------------ */
.wel-node.wel-point-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
}

.wel-node.wel-alarm {
    border-color: var(--color-critical);
}

.wel-alarm-name {
    font-size: 0.95em;
}

.wel-art .wel-ring {
    color: var(--color-critical);
    animation: wel-ring 1.8s ease-in-out infinite;
    transform-origin: 50% 15%;
}

@keyframes wel-ring {
    0%, 60%, 100% {
        transform: rotate(0);
    }

    66% {
        transform: rotate(-14deg);
    }

    74% {
        transform: rotate(12deg);
    }

    82% {
        transform: rotate(-8deg);
    }
}

/* ---- Process ---------------------------------------------------------------------------- */
.wel-divider {
    height: 1px;
    margin: 0.2em 0;
    background: var(--color-stroke-subtle);
}

.wel-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}

/* The procedure's steps light one after the other, as a run goes through them. */
.wel-step {
    padding: 0.25em 0.65em;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    font-size: 0.74em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    animation: wel-step 4.5s infinite;
}

.wel-step.s2 {
    animation-delay: 1.5s;
}

.wel-step.s3 {
    animation-delay: 3s;
}

@keyframes wel-step {
    0%, 32% {
        border-color: var(--color-accent);
        background: var(--color-accent);
        color: var(--color-on-accent);
    }

    34%, 100% {
        border-color: var(--color-stroke);
        background: transparent;
        color: var(--color-text-secondary);
    }
}

.wel-chart {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.wel-chart-grid {
    fill: none;
    stroke: var(--color-stroke-subtle);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wel-chart-line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.wel-chart-line.faint {
    stroke: var(--color-text-disabled);
    stroke-width: 1.5;
}

/* A curve being recorded: it draws itself from the left. */
.wel-draw {
    animation: wel-draw 2.6s var(--ease-out) 0.7s both;
}

@keyframes wel-draw {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.wel-node.wel-verdict {
    align-items: center;
    justify-content: center;
    border-color: var(--color-success);
}

.wel-verdict-mark {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: 2.2em;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-success);
}

.wel-art .wel-verdict-mark .ui-glyph {
    font-size: 0.85em;
}

/* ---- View ------------------------------------------------------------------------------- */
.wel-node.wel-palette {
    gap: 0.25em;
    padding: 0.55em;
}

.wel-palette-item {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.4em 0.45em;
    border-radius: 0.4em;
    font-size: 0.78em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wel-palette-item:first-child {
    background: var(--color-accent-bg);
}

.wel-node.wel-window {
    gap: 0;
    padding: 0;
}

.wel-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.55em 0.8em;
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.wel-window-grid {
    flex: 1 1 auto;
    background: radial-gradient(circle, var(--color-overlay-grid) 1px, transparent 1.5px) 0 0 / 1.2em 1.2em;
}

.wel-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    padding: 0.4em;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 0.5em;
    background: var(--color-surface);
}

.wel-widget-value {
    font-size: 1.15em;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wel-gauge {
    width: 78%;
    flex: 0 1 auto;
    overflow: visible;
}

.wel-gauge-track,
.wel-gauge-value {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}

.wel-gauge-track {
    stroke: var(--color-stroke-subtle);
}

.wel-gauge-value {
    stroke: var(--color-accent);
    stroke-dasharray: 72 100;
}

.wel-needle path {
    stroke: var(--color-text);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.wel-needle circle {
    fill: var(--color-text);
}

.wel-needle {
    transform: rotate(40deg);
    transform-origin: 50px 56px;
    animation: wel-sway 4s ease-in-out infinite;
}

@keyframes wel-sway {
    0%, 100% {
        transform: rotate(36deg);
    }

    50% {
        transform: rotate(44deg);
    }
}

.wel-widget.wel-kpi {
    align-items: flex-start;
    padding-left: 0.8em;
}

.wel-widget.wel-led-row {
    flex-direction: row;
    gap: 0.55em;
    font-size: 0.85em;
}

.wel-led {
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 0.25em var(--color-success-bg);
}

.wel-tank {
    position: relative;
    width: 42%;
    flex: 1 1 auto;
    border: 0.14em solid var(--color-symbol-outline);
    border-radius: 0.6em 0.6em 0.35em 0.35em;
    background: var(--color-symbol-glass);
    overflow: hidden;
}

.wel-tank-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 68%;
    background: var(--color-symbol-process);
    animation: wel-level 6s ease-in-out infinite;
}

@keyframes wel-level {
    0%, 100% {
        height: 62%;
    }

    50% {
        height: 72%;
    }
}

.wel-trend {
    width: 100%;
    height: 100%;
}

.wel-widget.wel-btn-box {
    border: none;
    background: transparent;
}

/* One more part on its way from the palette to the grid, the pointer holding it. */
.wel-art > .wel-drag {
    left: var(--wel-to-x);
    top: var(--wel-to-y);
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.65em;
    border: 1px solid var(--color-accent);
    border-radius: 0.45em;
    background: var(--color-surface);
    box-shadow: var(--shadow-popover);
    font-size: 0.78em;
    white-space: nowrap;
    animation: wel-drag 6s var(--ease-out) 1.6s infinite both;
}

@keyframes wel-drag {
    0% {
        left: var(--wel-from-x);
        top: var(--wel-from-y);
        opacity: 0;
    }

    8% {
        left: var(--wel-from-x);
        top: var(--wel-from-y);
        opacity: 1;
    }

    55%, 78% {
        left: var(--wel-to-x);
        top: var(--wel-to-y);
        opacity: 1;
    }

    90%, 100% {
        left: var(--wel-to-x);
        top: var(--wel-to-y);
        opacity: 0;
    }
}

.wel-art .wel-cursor {
    position: absolute;
    right: -0.7em;
    bottom: -0.9em;
    font-size: 1.4em;
    color: var(--color-text);
}

/* ---- The assistant ---------------------------------------------------------------------- */
/* A window: a bar with its title over what it holds. Two stand on the drawing, the reader's own AI
   assistant and the program, so the conversation is seen to happen outside the program. */
.wel-node.wel-app {
    gap: 0;
    padding: 0;
}

.wel-app-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
    padding: 0.55em 0.85em;
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.wel-app-title {
    min-width: 0;
    font-weight: var(--font-weight-semibold);
}

/* The reader's assistant wears no product's look: only its title and, smaller, the assistants that
   fit it. */
.wel-assistant-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1em;
}

.wel-assistant-names {
    font-size: 0.74em;
    color: var(--color-text-secondary);
}

/* The conversation gathers at the foot, over the field, the way a chat stacks its messages. */
.wel-conversation {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.7em;
    padding: 0.8em 0.9em;
}

/* The field the reader types into, with its send key: what makes the window read as a chat. */
.wel-compose {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0.9em 0.8em;
    padding: 0.4em 0.45em 0.4em 1em;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
}

.wel-compose-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88em;
    color: var(--color-text-secondary);
}

.wel-compose-send {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 1.6em;
    height: 1.6em;
    padding: 0.3em;
    border-radius: 50%;
    background: var(--color-neutral-bg);
    fill: none;
    stroke: var(--color-text-secondary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The program's window: the brand's G and name on its bar (docs/brand/brand.md), agent access in
   its body and every change recorded at its foot. */
.wel-art .wel-station .wel-brand-mark {
    flex: 0 0 auto;
    width: 1.3em;
    height: 1.3em;
}

.wel-wordmark {
    letter-spacing: -0.01em; /* the brand's slight negative tracking */
}

.wel-app-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45em;
    padding: 0.7em 0.85em;
}

/* The foot may take two lines rather than lose its end. */
.wel-app-foot {
    flex: 0 0 auto;
    padding: 0.55em 0.85em;
    white-space: normal;
    border-top: 1px solid var(--color-stroke-subtle);
}

/* MCP, the line between the two windows: its name over it, and a pulse that runs to the program
   with each request and is back as the reply arrives (the scene times both, --wel-delay and
   --wel-trip, from the balloons'). */
.wel-art > .wel-mcp-label {
    display: flex;
    justify-content: center;
}

.wel-art > .wel-mcp-track {
    height: 0;
}

.wel-mcp-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0.25em var(--color-accent-bg);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: wel-mcp-trip var(--wel-trip, 700ms) ease-in-out both;
    animation-delay: var(--wel-delay, 0ms);
}

@keyframes wel-mcp-trip {
    0% {
        left: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    50% {
        left: 100%;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 0;
        opacity: 0;
    }
}

.wel-bubble {
    max-width: 86%;
    margin: 0;
    padding: 0.7em 1.05em;
    border-radius: 1em;
    font-size: 1.02em;
    line-height: 1.4;
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

/* What the operator asks: on the right, in the accent tint. */
.wel-bubble-ask {
    align-self: flex-end;
    border-bottom-right-radius: 0.25em;
    background: var(--color-accent-bg);
}

/* What the assistant answers: on the left, on the well inside the window's surface. */
.wel-bubble-reply {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    border: 1px solid var(--color-stroke);
    border-bottom-left-radius: 0.25em;
    background: var(--color-surface-alt);
}

.wel-reply-mark {
    flex: 0 0 auto;
    width: 1.3em;
    height: 1.3em;
    fill: none;
    stroke: var(--color-success);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The answer taken from the help wears the Help key's mark. */
.wel-art .wel-reply-help {
    flex: 0 0 auto;
    font-size: 1.3em;
    color: var(--color-accent);
}

.wel-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding-top: 0.45em;
    border-top: 1px solid var(--color-stroke-subtle);
    font-size: 0.88em;
}

/* The app's own switch, small. */
.wel-switch {
    position: relative;
    flex: 0 0 auto;
    width: 2.3em;
    height: 1.3em;
    border-radius: var(--radius-pill);
    background: var(--color-stroke);
}

.wel-switch > span {
    position: absolute;
    top: 0.18em;
    left: 0.18em;
    width: 0.94em;
    height: 0.94em;
    border-radius: 50%;
    background: var(--color-surface);
}

.wel-switch.on {
    background: var(--color-accent);
}

.wel-switch.on > span {
    left: 1.18em;
}

/* ---- Events ----------------------------------------------------------------------------- */
.wel-node.wel-timeline {
    gap: 0.4em;
}

.wel-tabs {
    display: flex;
    gap: 1.1em;
    border-bottom: 1px solid var(--color-stroke-subtle);
    font-size: 0.85em;
    white-space: nowrap;
}

.wel-tab {
    padding: 0.15em 0 0.5em;
    color: var(--color-text-secondary);
}

.wel-tab.current {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.wel-filter-row {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.2em;
}

.wel-search {
    display: flex;
    align-items: center;
    width: 26%;
    height: 1.7em;
    padding: 0 0.45em;
    border: 1px solid var(--color-stroke);
    border-radius: 0.4em;
    color: var(--color-text-secondary);
    font-size: 0.8em;
}

.wel-entry {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65em;
    padding: 0.55em 0.3em;
    border-bottom: 1px solid var(--color-stroke-subtle);
    font-size: 0.85em;
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-entry-time {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.wel-entry-name {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wel-entry-state {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wel-console-line {
    display: flex;
    gap: 0.6em;
    min-width: 0;
    font-size: 0.76em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wel-console-line .wel-mono {
    color: var(--color-text-disabled);
}

.wel-caret {
    width: 0.5em;
    height: 1em;
    background: var(--color-accent);
    animation: wel-blink 1s steps(1) infinite;
}

/* ---- Validation ------------------------------------------------------------------------- */
.wel-node.wel-area {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.wel-art .wel-ok-mark {
    flex: 0 0 auto;
    font-size: 1.25em;
    color: var(--color-success);
}

.wel-art .wel-warn-mark {
    flex: 0 0 auto;
    font-size: 1.25em;
    color: var(--color-caution);
}

/* A light passing down the areas as the program reads them. */
.wel-art > .wel-scan {
    overflow: hidden;
    pointer-events: none;
    animation: none;
}

.wel-scan::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24%;
    height: 24%;
    background: linear-gradient(to bottom, transparent, var(--color-accent-bg), transparent);
    animation: wel-scan 3.4s ease-in-out infinite;
}

@keyframes wel-scan {
    to {
        top: 100%;
    }
}

.wel-node.wel-findings {
    gap: 0.6em;
}

.wel-finding {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7em;
    padding: 0.6em 0.75em;
    border: 1px solid var(--color-caution);
    border-radius: 0.5em;
    background: var(--color-caution-bg);
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-finding-text {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
    font-size: 0.9em;
}

.wel-finding-text .wel-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wel-finding.wel-finding-ok {
    grid-template-columns: auto minmax(0, 1fr);
    border-style: dashed;
    border-color: var(--color-stroke);
    background: transparent;
    font-size: 0.88em;
    color: var(--color-text-secondary);
}

.wel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: 0.85em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-text);
    white-space: nowrap;
}

/* ---- Users ------------------------------------------------------------------------------ */
.wel-node.wel-matrix {
    gap: 0.2em;
}

.wel-matrix-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 0;
    border-top: 1px solid var(--color-stroke-subtle);
    font-size: 0.88em;
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-matrix-row.wel-matrix-head {
    border-top: none;
    font-size: 0.72em;
    color: var(--color-text-secondary);
}

.wel-matrix-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wel-art .wel-matrix-area .ui-glyph {
    font-size: 1.7em;
    color: var(--color-accent);
}

.wel-matrix-role {
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wel-matrix-cell {
    display: flex;
    justify-content: center;
}

.wel-node.wel-signin {
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    text-align: center;
}

.wel-people {
    display: flex;
    gap: 1.4em;
}

.wel-person {
    display: flex;
    align-items: center;
    gap: 0.55em;
    min-width: 0;
}

.wel-person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.9em;
    line-height: 1.25;
}

.wel-avatar {
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    background: var(--color-accent-bg);
    font-size: 1.05em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-text);
}

.wel-avatar.small {
    flex: 0 0 auto;
    width: 2.2em;
    height: 2.2em;
    font-size: 0.9em;
}

.wel-signin .wel-badge {
    align-self: center;
}

.wel-pin {
    display: flex;
    gap: 0.6em;
    margin: 0.2em 0;
}

/* The PIN's digits fill one by one, hold, and the next sign-in begins. */
.wel-pin-dot {
    width: 0.8em;
    height: 0.8em;
    border: 0.12em solid var(--color-text-secondary);
    border-radius: 50%;
    animation: wel-pin-1 6s infinite;
}

.wel-pin-dot:nth-child(2) {
    animation-name: wel-pin-2;
}

.wel-pin-dot:nth-child(3) {
    animation-name: wel-pin-3;
}

.wel-pin-dot:nth-child(4) {
    animation-name: wel-pin-4;
}

@keyframes wel-pin-1 {
    0%, 14%, 92%, 100% { background: transparent; }
    15%, 91% { background: var(--color-text); border-color: var(--color-text); }
}

@keyframes wel-pin-2 {
    0%, 24%, 92%, 100% { background: transparent; }
    25%, 91% { background: var(--color-text); border-color: var(--color-text); }
}

@keyframes wel-pin-3 {
    0%, 34%, 92%, 100% { background: transparent; }
    35%, 91% { background: var(--color-text); border-color: var(--color-text); }
}

@keyframes wel-pin-4 {
    0%, 44%, 92%, 100% { background: transparent; }
    45%, 91% { background: var(--color-text); border-color: var(--color-text); }
}

.wel-keypad {
    display: grid;
    grid-template-columns: repeat(3, 2.3em);
    gap: 0.35em;
}

.wel-key {
    display: grid;
    place-items: center;
    height: 1.8em;
    border: 1px solid var(--color-stroke);
    border-radius: 0.4em;
    background: var(--color-surface-alt);
    font-size: 0.85em;
}

/* ---- Remote access ---------------------------------------------------------------------- */
.wel-device-frame {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.wel-mini {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.25em;
    border: 0.22em solid var(--color-text-secondary);
    border-radius: 0.5em;
    background: var(--color-surface);
}

.wel-mini svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wel-tablet .wel-mini {
    border-width: 0.35em;
    border-radius: 0.8em;
}

/* The monitor's stand and the laptop's base, under their screens. */
.wel-monitor::after,
.wel-laptop::after {
    content: "";
    align-self: center;
    flex: 0 0 auto;
    height: 0.35em;
    border-radius: 0.2em;
    background: var(--color-text-secondary);
}

.wel-monitor::after {
    width: 34%;
}

.wel-laptop::after {
    width: 104%;
    margin-top: -0.35em;
}

.wel-mini-card {
    fill: var(--color-surface-alt);
}

.wel-mini-gauge,
.wel-mini-gauge-value {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.wel-mini-gauge {
    stroke: var(--color-stroke);
}

.wel-mini-gauge-value {
    stroke: var(--color-accent);
}

.wel-mini-bar {
    fill: var(--color-accent);
}

.wel-mini-led {
    fill: var(--color-success);
}

.wel-mini-trend {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
}

/* The office computer's chart: its grid, and a second line in another ink than the first. */
.wel-mini-trend.wel-mini-trend-second {
    stroke: var(--color-success);
}

.wel-mini-grid {
    fill: none;
    stroke: var(--color-stroke);
    stroke-width: 0.5;
}

/* The tablet's recipe: a step's words, the step under way outlined, the steps to come hollow. */
.wel-mini-line {
    fill: var(--color-stroke);
}

.wel-mini-card.wel-mini-current {
    stroke: var(--color-accent);
    stroke-width: 0.8;
}

.wel-mini-ring,
.wel-mini-pending {
    fill: none;
    stroke-width: 1.4;
}

.wel-mini-ring {
    stroke: var(--color-accent);
}

.wel-mini-pending {
    stroke: var(--color-stroke);
}

.wel-device-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    font-size: 0.78em;
    color: var(--color-text-secondary);
}

.wel-art > .wel-hub-dot {
    display: grid;
    place-items: center;
    border: 0.12em solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent);
    box-shadow: 0 0 0 0.45em var(--color-accent-bg);
}

.wel-art .wel-hub-dot .ui-glyph {
    font-size: 1.7em;
}

.wel-node.wel-address {
    flex-direction: row;
    align-items: center;
    gap: 0.7em;
}

/* The code stays black on white in both looks, the way a real one has to, to be scanned. */
.wel-qr {
    flex: 0 0 auto;
    width: 4.4em;
    height: 4.4em;
    padding: 0.3em;
    border-radius: 0.3em;
    background: var(--color-qr);
}

.wel-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wel-qr path {
    fill: var(--color-text);
    fill-rule: evenodd;
}

/* This station's real code, the same picture the Remote access page gives, scaled without blur. */
.wel-qr img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* While remote access is off the code answers nothing yet: greyed, beside the word that says so. */
.wel-address.off .wel-qr {
    opacity: 0.35;
    filter: grayscale(1);
}

.wel-address-text {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-width: 0;
}

/* A real address can be longer than the example's, so it is set a little smaller here. */
.wel-address .wel-addr {
    font-size: 0.74em;
}

/* A caption that may take two lines rather than lose its end, on the canvas's own ground so no
   line of the drawing ever runs through its words. */
.wel-art > .wel-cap.wel-cap-wrap {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    padding: 0.2em 0.3em;
    border-radius: 0.3em;
    background: var(--color-surface-alt);
}

/* ---- Settings --------------------------------------------------------------------------- */
.wel-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.wel-langs .wel-chip {
    font-size: 0.84em;
    padding: 0.25em 0.7em;
}

.wel-langs .wel-chip {
    animation: wel-rise 0.4s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-format {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.2em 0.55em;
    border-radius: 0.4em;
    background: var(--color-surface-alt);
    font-size: 0.92em;
}

.wel-themes {
    display: flex;
    flex: 1 1 auto;
    gap: 0.6em;
    min-height: 0;
}

.wel-theme {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    min-height: 0;
    font-size: 0.75em;
    color: var(--color-text-secondary);
}

/* A window in a look, drawn by the tokens that look pins on it. */
.wel-theme-window {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.3em;
    width: 100%;
    min-height: 0;
    padding: 0.35em;
    border: 1px solid var(--color-stroke);
    border-radius: 0.4em;
    background: var(--color-bg);
}

.wel-theme-bar {
    flex: 0 0 auto;
    height: 0.6em;
    border-radius: 0.2em;
    background: var(--color-frame);
}

.wel-theme-card {
    flex: 1 1 0;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 0.2em;
    background: var(--color-surface);
}

.wel-theme-card.short {
    flex-grow: 0.6;
}

.wel-brand-bar {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em;
    border-radius: 0.4em;
    background: var(--color-frame);
    font-size: 0.85em;
    font-weight: var(--font-weight-semibold);
}

.wel-logo-slot {
    display: grid;
    place-items: center;
    width: 2em;
    height: 2em;
    border: 0.1em dashed var(--color-accent);
    border-radius: 0.4em;
    color: var(--color-accent);
}

/* A report page with the integrator's logo in its head. */
.wel-sheet {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.35em;
    min-height: 0;
    padding: 0.45em 0.55em;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 0.3em;
    background: var(--color-surface-alt);
}

.wel-sheet-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.wel-sheet-line {
    height: 0.35em;
    width: 80%;
    border-radius: 0.2em;
    background: var(--color-stroke);
}

.wel-sheet-line.wide {
    width: 55%;
}

.wel-sheet-line.short {
    width: 50%;
}

.wel-logo-slot.small {
    width: 1.5em;
    height: 1.5em;
    font-size: 0.8em;
}

.wel-update {
    font-size: 0.8em;
    color: var(--color-text-secondary);
    white-space: normal;
}

.wel-art .wel-update .ui-glyph {
    color: var(--color-accent);
}

.wel-snapshots {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0.2em;
}

.wel-snapshots::before {
    content: "";
    position: absolute;
    left: 0.4em;
    right: 0.4em;
    top: 50%;
    height: 0.12em;
    background: var(--color-stroke);
}

.wel-snap {
    position: relative;
    width: 0.85em;
    height: 0.85em;
    border: 0.14em solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-surface);
}

.wel-snap.current {
    background: var(--color-accent);
}

/* ---- Account ---------------------------------------------------------------------------- */
.wel-art .wel-license .wel-brand-mark {
    flex: 0 0 auto;
    width: 1.5em;
    height: 1.5em;
}

.wel-days {
    display: flex;
    gap: 0.2em;
}

.wel-day {
    flex: 1 1 0;
    height: 1.6em;
    border-radius: 0.2em;
    background: var(--color-accent);
    animation: wel-rise 0.4s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-days-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.72em;
    color: var(--color-text-secondary);
}

/* A card title that wraps beside its mark rather than being cut at the card's edge, whatever the
   language's length. */
.wel-node-head.wel-head-wrap {
    align-items: flex-start;
    white-space: normal;
    overflow: visible;
}

.wel-head-wrap .wel-head-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The perpetual license: one unbroken bar, with the sign that it has no end. */
.wel-forever {
    height: 1.6em;
    border-radius: 0.2em;
    background: var(--color-accent);
    transform-origin: left center;
    animation: wel-grow 0.9s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-forever-mark {
    font-size: 1.35em;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    color: var(--color-accent);
    animation: wel-fade 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

@keyframes wel-grow {
    from {
        transform: scaleX(0);
    }
}

.wel-art > .wel-center {
    justify-content: center;
}

.wel-mini.wel-mini-check {
    display: grid;
    place-items: center;
}

.wel-art .wel-mini-check .ui-glyph {
    font-size: 2.6em;
    color: var(--color-success);
}

.wel-node.wel-free {
    flex-direction: row;
    align-items: center;
    gap: 1em;
}

.wel-free-text {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    min-width: 0;
}

/* The free window's countdown, a ring that empties. */
.wel-countdown {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 5.2em;
    height: 5.2em;
}

.wel-countdown svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.wel-countdown .wel-mono {
    font-size: 0.85em;
    font-weight: var(--font-weight-semibold);
}

.wel-ring-track,
.wel-ring-value {
    fill: none;
    stroke-width: 3.5;
}

.wel-ring-track {
    stroke: var(--color-stroke-subtle);
}

.wel-ring-value {
    stroke: var(--color-accent);
    stroke-linecap: round;
    stroke-dasharray: 100;
    animation: wel-countdown 12s linear infinite;
}

@keyframes wel-countdown {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 100;
    }
}

.wel-feedback-body {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.8em;
    min-height: 0;
}

.wel-mini.wel-shot {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 6em;
    height: 3.8em;
}

.wel-art .wel-shot .ui-glyph {
    font-size: 1.8em;
    color: var(--color-accent);
}

/* ---- Shorter windows -------------------------------------------------------------------- */
/* A laptop's screen: everything a step tighter, so the trail, the stage and the foot still fit
   without the page scrolling. */
@media (max-height: 820px) {
    .wel-page {
        padding-top: 16px;
        padding-bottom: 12px;
    }

    .wel-inner {
        gap: 12px;
    }

    .wel-title {
        font-size: 26px;
    }

    .wel-lead {
        font-size: 15px;
    }

    .wel-stage {
        min-height: 340px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .wel-copy {
        gap: var(--space-4);
    }

    .wel-copy-body {
        gap: 10px;
    }

    .wel-step-title {
        font-size: 24px;
    }

    .wel-step-lead {
        font-size: 15px;
        line-height: 1.45;
    }

    .wel-points {
        gap: 10px;
        margin-top: 2px;
    }

    .wel-point-line {
        font-size: 13px;
    }

    .wel-step-foot {
        margin-top: 2px;
    }
}

/* ---- Narrower windows ------------------------------------------------------------------- */
/* The words over the drawing, which then takes the stage's whole width at its own proportion. */
@media (max-width: 1100px) {
    .wel-stage {
        flex: 0 0 auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .wel-copy-body {
        max-width: none;
    }

    .wel-scene {
        container-type: inline-size;
    }

    .wel-canvas {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .wel-page {
        padding: 20px 16px;
    }

    .wel-title {
        font-size: 26px;
    }

    .wel-step-title {
        font-size: 24px;
    }
}