/* ============================================================================
   Orbix — the five-minute website demo's own pieces (owner, 25 Oct 2026).
   Namespace orbx-pr-*.
   ----------------------------------------------------------------------------
   Built to the Design & Layout Formulas (Almanac 6, owner's review 25 Oct 2026):
   - every colour is a theme label, by surface: the cards are POP-UPS (Popover +
     Popover foreground, Border edge); brand marks in Link; the note icons in the
     second brand colour (Highlight on Page — shapes only, never words); the
     filled buttons are the only Primary; warnings in the status ink;
   - the real Orbix parts: the orb canvas (orbix_orbs.js), Orbix's glass chip for
     the clock, the demo's approved trial pill;
   - phone first: min-width tiers only, fluid sizes with clamp(), touch targets
     44px or more, words wrap and are never cut, nothing scrolls sideways;
   - type from the theme preset: Display (else Heading) font for the title,
     sizes as steps of the preset's body size.
   Used by views/practice_start.php (start + ended, on the website's own colours)
   and assets/js/tools/orbix_practice.js (clock, trial pill, end pop-up, on the
   Orbix screen inside the practice workspace).
   ============================================================================ */

/* ── the card: one pop-up surface for start, end and ended ── */
.orbx-pr-card {
    --orbx-pr-gap: clamp(12px, 2.4vw, 16px);
    box-sizing: border-box;
    width: min(540px, 100%);
    max-height: 100%;
    overflow: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--orbx-pr-gap);
    padding: clamp(20px, 5vw, 32px) clamp(16px, 5vw, 32px);
    border-radius: var(--orbx-radius, 20px);
    background: color-mix(in srgb, var(--at-color-popover) 94%, transparent);
    color: var(--at-color-popover-foreground);
    border: 1px solid var(--at-color-border);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--at-color-foreground) 22%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    text-align: left;
}
.orbx-pr-orb {
    display: block; align-self: center;
    width: clamp(88px, 22vw, 120px); height: clamp(88px, 22vw, 120px);
    margin: 0 0 2px;
}
.orbx-pr-title {
    margin: 0; text-align: center; text-wrap: balance;
    font-family: var(--at-font-display, var(--at-font-heading, inherit));
    font-weight: var(--at-font-heading-weight, 700);
    font-size: clamp(22px, 5.4vw, calc(var(--at-font-body-size, 16) * 1.75px));
    line-height: 1.2;
    color: var(--at-color-popover-foreground);
}
.orbx-pr-body {
    margin: 0;
    font-size: max(16px, calc(var(--at-font-body-size, 16) * 1px));
    line-height: 1.55;
    color: var(--at-color-popover-foreground);
}
.orbx-pr-own {
    margin: 0; padding: 12px 14px; border-radius: 12px;
    border-left: 3px solid var(--at-color-link);
    background: color-mix(in srgb, var(--at-color-link) 7%, transparent);
    font-size: max(16px, calc(var(--at-font-body-size, 16) * 1px)); line-height: 1.55;
    color: var(--at-color-popover-foreground);
    white-space: pre-line;
}
.orbx-pr-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.orbx-pr-notes li {
    display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
    font-size: 15px; line-height: 1.5; color: var(--at-color-popover-foreground);
}
.orbx-pr-notes .fa { color: var(--at-color-highlight-ink, var(--at-color-link)); font-size: 15px; line-height: 1.5; text-align: center; }

/* ── buttons: the filled one is the only Primary ── */
.orbx-pr-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.orbx-pr-btn {
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 10px 20px; border-radius: 999px;
    font-family: var(--at-font-button, inherit); font-size: 16px; font-weight: 600; line-height: 1.25; text-align: center;
    text-decoration: none; cursor: pointer;
    background: transparent; color: var(--at-color-link);
    border: 1px solid var(--at-color-control-border, var(--at-color-border));
    transition: box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
.orbx-pr-btn:hover, .orbx-pr-btn:focus-visible { color: var(--at-color-link); border-color: var(--at-color-link); text-decoration: none; }
.orbx-pr-btn:focus-visible { outline: 2px solid var(--at-color-ring); outline-offset: 3px; }
.orbx-pr-btn-main {
    min-height: 52px; font-size: 17px; border: 0;
    background: var(--at-color-primary); color: var(--at-color-primary-foreground);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--at-color-primary) 30%, transparent);
}
.orbx-pr-btn-main:hover, .orbx-pr-btn-main:focus-visible {
    background: color-mix(in srgb, var(--at-color-primary) 88%, var(--at-color-foreground));
    color: var(--at-color-primary-foreground);
}
.orbx-pr-btn-main .fa { color: inherit; }
.orbx-pr-btn[disabled] { cursor: progress; }
.orbx-pr-btn-quiet { border-color: transparent; }
.orbx-pr-msg { margin: 0; min-height: 1.5em; font-size: 15px; line-height: 1.5; text-align: center; color: var(--at-color-popover-foreground); }
.orbx-pr-msg.is-bad { color: var(--at-color-status-warning-ink, var(--at-color-popover-foreground)); }
.orbx-pr-msg:empty { min-height: 0; }
/* Only a robot fills this in: out of sight and out of the tab order. */
.orbx-pr-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 576px) {
    .orbx-pr-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .orbx-pr-actions .orbx-pr-btn { flex: 0 1 auto; min-width: 200px; }
    .orbx-pr-actions .orbx-pr-btn-main { flex-basis: 100%; }
}

/* ── the trial pill (the demo's approved design) ── */
.orbx-pr-trial {
    box-sizing: border-box;
    display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
    min-height: 44px; padding: 4px 16px; border-radius: 999px; line-height: 1.15;
    background: var(--at-color-primary); color: var(--at-color-primary-foreground);
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--at-color-primary) 30%, transparent);
}
.orbx-pr-trial:hover, .orbx-pr-trial:focus-visible {
    background: color-mix(in srgb, var(--at-color-primary) 85%, var(--at-color-foreground));
    color: var(--at-color-primary-foreground); text-decoration: none;
}
.orbx-pr-trial:focus-visible { outline: 2px solid var(--at-color-ring); outline-offset: 3px; }
.orbx-pr-trial-main { font-size: 14px; font-weight: 600; }
.orbx-pr-trial-short { display: none; font-size: 14px; font-weight: 600; }
.orbx-pr-trial-note { display: none; font-size: 11px; opacity: .9; }
/* During the demo on a phone, Orbix's name gives its room to the clock and a shorter trial pill. */
@media (max-width: 575.98px) {
    .orbx.is-practice-live .orbx-brand { display: none; }
    .orbx.is-practice-live .orbx-corner { margin-left: auto; }
    .orbx.is-practice-live .orbx-pr-trial-main { display: none; }
    .orbx.is-practice-live .orbx-pr-trial-short { display: inline; }
    .orbx.is-practice-live .orbx-pr-trial { padding: 4px 14px; }
}
@media (min-width: 768px) {
    .orbx-pr-trial { padding: 4px 18px; }
    .orbx-pr-trial-main { font-size: 15px; }
    .orbx-pr-trial-note { display: block; }
}

/* ── the clock: Orbix's own glass chip ── */
.orbx-chip.orbx-pr-clock { cursor: default; gap: 8px; font-variant-numeric: tabular-nums; }
.orbx-chip.orbx-pr-clock:hover { border-color: var(--orbx-line, var(--at-color-border)); box-shadow: none; }
.orbx-chip.orbx-pr-clock .fa { color: var(--at-color-link); }
.orbx-chip.orbx-pr-clock .orbx-pr-clock-label { display: none; }
.orbx-chip.orbx-pr-clock .orbx-pr-clock-time { display: inline; font-weight: 700; color: var(--at-color-card-foreground); min-width: 2.6em; text-align: right; }
.orbx-chip.orbx-pr-clock.is-low .fa, .orbx-chip.orbx-pr-clock.is-low .orbx-pr-clock-time { color: var(--at-color-status-warning-ink, var(--at-color-card-foreground)); }
@media (min-width: 992px) { .orbx-chip.orbx-pr-clock .orbx-pr-clock-label { display: inline; color: var(--at-color-card-foreground); } }

/* The corner holds the clock and the trial pill beside the cog and close, on one line. */
.orbx.is-practice .orbx-corner { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

/* ── "one minute left" ── */
.orbx-pr-toast {
    position: fixed; left: 50%; top: 84px; z-index: 2147482000;
    box-sizing: border-box; max-width: calc(100% - 32px);
    transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
    padding: 10px 18px; border-radius: 12px;
    background: var(--at-color-popover); color: var(--at-color-popover-foreground);
    border: 1px solid var(--at-color-border); border-left: 3px solid var(--at-color-status-warning-ink, var(--at-color-link));
    font-size: 15px; line-height: 1.4;
    transition: opacity .3s ease, transform .3s ease;
}
.orbx-pr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── the end pop-up over the Orbix screen ── */
.orbx-pr-veil {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: color-mix(in srgb, var(--at-color-background) 70%, transparent);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.orbx-pr-veil .orbx-pr-card { animation: orbx-pr-in .35s ease-out both; }
@keyframes orbx-pr-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── the start and ended screens (views/practice_start.php) ── */
.orbx-pr-screen #orbx { position: fixed; inset: 0; }
.orbx-pr-stage {
    position: absolute; inset: 0; z-index: 3; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    padding: 76px 16px 16px; overflow: auto;
}
@media (min-width: 768px) { .orbx-pr-stage { padding: 96px 24px 24px; } }
/* the top bar (Close X, free-trial link) sits above the stage, which fills the whole screen (owner, 2 Nov 2026: the X could not be pressed) */
.orbx-pr-screen .orbx-top { position: relative; z-index: 4; }

@media (prefers-reduced-motion: reduce) {
    .orbx-pr-toast, .orbx-pr-btn { transition: none; }
    .orbx-pr-veil .orbx-pr-card { animation: none; }
}

/* The pop-up's "open in a new tab": the demo's workspace sends any other tab back to Orbix, so it is
   not offered there (prompt 5 sweep, 26 Oct 2026). */
.orbx.is-practice #orbx-pop-tab { display: none; }