/* ========================================================================== Theia design system — single source of truth for Desktop styling. Tokens are defined in §6 of docs/superpowers/specs/2026-06-13-theia-redesign-design.md. Components are defined in §7. Naming: ---[--] for tokens, .t-[__] for components. ========================================================================== */ /* ── 1. Tokens ─────────────────────────────────────────────────────────── */ :root { /* Surface */ --c-ink: #0A0A0A; --c-ink-2: #1A1A1A; --c-paper: #FFFFFF; --c-cream: #F4F4F0; /* Signal */ --c-blue: #255CFF; --c-cyan: #00E5E8; --c-green: #5CFF8A; --c-sky: #8AA8FF; /* State (light-surface text variants of signals) */ --c-cyan-deep: #008789; --c-green-deep: #1A8A3F; --c-amber: #F4B400; --c-red: #E5484D; /* Neutral text + lines */ --c-body: #444444; --c-mute: #888888; --c-grid-l: #E5E7EB; --c-grid-d: #1F2937; /* Active accent — overridden per-zone in */ --c-accent: var(--c-blue); --c-accent-soft: var(--c-sky); --shadow-cta: var(--shadow-cta-blue); /* Spacing scale (8px grid) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* Type families */ --f-sans: "Be Vietnam Pro", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --f-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Type ramp — size / weight / leading / track */ --t-d1-size: 72px; --t-d1-leading: 0.95; --t-d1-track: -0.025em; --t-d2-size: 56px; --t-d2-leading: 0.96; --t-d2-track: -0.02em; --t-d3-size: 40px; --t-d3-leading: 0.98; --t-d3-track: -0.018em; --t-h1-size: 28px; --t-h1-leading: 1.05; --t-h1-track: -0.015em; --t-h2-size: 22px; --t-h2-leading: 1.10; --t-h2-track: -0.010em; --t-h3-size: 18px; --t-h3-leading: 1.20; --t-h3-track: 0; --t-b1-size: 16px; --t-b1-leading: 1.60; --t-b2-size: 14px; --t-b2-leading: 1.60; --t-b3-size: 13px; --t-b3-leading: 1.55; --t-m1-size: 12px; --t-m1-track: 0.16em; --t-m2-size: 10px; --t-m2-track: 0.18em; --t-n1-size: 56px; --t-n1-track: -0.02em; --t-n2-size: 28px; --t-n3-size: 22px; /* Borders & radii */ --b-hair: 1px solid var(--c-grid-l); --b-hair-d: 1px solid var(--c-grid-d); --b-ink: 1px solid var(--c-ink); --r-input: 4px; --r-pill: 9999px; /* Shadows — one allowed style, three colors */ --shadow-cta-blue: 0 4px 22px rgba(37, 92, 255, 0.40); --shadow-cta-cyan: 0 4px 22px rgba(0, 229, 232, 0.50); --shadow-cta-green: 0 4px 22px rgba(92, 255, 138, 0.45); } /* Zone-scoped accent overrides — the only place colors swap by context. */ body[data-zone="operate"] { --c-accent: var(--c-blue); --c-accent-soft: var(--c-sky); --shadow-cta: var(--shadow-cta-blue); } body[data-zone="setup"] { --c-accent: var(--c-cyan); --c-accent-soft: var(--c-cyan); --shadow-cta: var(--shadow-cta-cyan); } body[data-zone="admin"] { --c-accent: var(--c-green-deep); --c-accent-soft: var(--c-green); --shadow-cta: var(--shadow-cta-green); } /* Mode-scoped overrides — applied inside OPERATE during a live session. data-mode tints active-tote highlight + operator pill color, leaves zone bar alone. */ body[data-mode="pack"] { --c-mode: var(--c-cyan); --c-mode-deep: var(--c-cyan-deep); } body[data-mode="inventory"] { --c-mode: var(--c-blue); --c-mode-deep: var(--c-blue); } body[data-mode="pick"] { --c-mode: var(--c-green); --c-mode-deep: var(--c-green-deep); } body[data-mode="returns"] { --c-mode: var(--c-green); --c-mode-deep: var(--c-green-deep); } /* ── 2. Reset + base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: light; } body { background: var(--c-paper); color: var(--c-ink); font-family: var(--f-sans); font-size: var(--t-b2-size); line-height: var(--t-b2-leading); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: inherit; } img { display: block; max-width: 100%; } /* ── 3. Type primitives ───────────────────────────────────────────────── */ .t-d1, .t-d2, .t-d3, .t-h1, .t-h2, .t-h3 { font-family: var(--f-sans); font-weight: 800; text-transform: uppercase; } .t-d1 { font-size: var(--t-d1-size); line-height: var(--t-d1-leading); letter-spacing: var(--t-d1-track); } .t-d2 { font-size: var(--t-d2-size); line-height: var(--t-d2-leading); letter-spacing: var(--t-d2-track); } .t-d3 { font-size: var(--t-d3-size); line-height: var(--t-d3-leading); letter-spacing: var(--t-d3-track); } .t-h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-leading); letter-spacing: var(--t-h1-track); } .t-h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-leading); letter-spacing: var(--t-h2-track); } .t-h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-leading); font-weight: 700; } .t-b1 { font-size: var(--t-b1-size); line-height: var(--t-b1-leading); font-weight: 400; } .t-b2 { font-size: var(--t-b2-size); line-height: var(--t-b2-leading); font-weight: 400; } .t-b3 { font-size: var(--t-b3-size); line-height: var(--t-b3-leading); font-weight: 400; } .t-m1, .t-m2 { font-family: var(--f-mono); font-weight: 500; text-transform: uppercase; } .t-m1 { font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); } .t-m2 { font-size: var(--t-m2-size); letter-spacing: var(--t-m2-track); } .t-n1, .t-n2, .t-n3 { font-family: var(--f-mono); font-weight: 700; line-height: 1; } .t-n1 { font-size: var(--t-n1-size); letter-spacing: var(--t-n1-track); } .t-n2 { font-size: var(--t-n2-size); } .t-n3 { font-size: var(--t-n3-size); } /* color modifiers */ .t-c-accent { color: var(--c-accent); } .t-c-accent-soft{ color: var(--c-accent-soft); } .t-c-blue { color: var(--c-blue); } .t-c-cyan-deep { color: var(--c-cyan-deep); } .t-c-green-deep { color: var(--c-green-deep); } .t-c-amber { color: var(--c-amber); } .t-c-red { color: var(--c-red); } .t-c-mute { color: var(--c-mute); } .t-c-body { color: var(--c-body); } .t-c-paper { color: var(--c-paper); } /* ── 4. Layout helpers (used by templates) ────────────────────────────── */ .t-page { max-width: 1380px; margin: 0 auto; padding: 0 var(--s-7); } .t-section { padding: var(--s-7) 0; border-bottom: var(--b-hair); } .t-section--cream { background: var(--c-cream); } .t-section--ink { background: var(--c-ink); color: var(--c-paper); } .t-section__head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s-5) var(--s-7); } .t-section__head h2, .t-section__head h3 { /* via .t-h2/.t-h3 in markup */ } .t-stack-s2 > * + * { margin-top: var(--s-2); } .t-stack-s3 > * + * { margin-top: var(--s-3); } .t-stack-s4 > * + * { margin-top: var(--s-4); } .t-stack-s5 > * + * { margin-top: var(--s-5); } .t-row { display: flex; align-items: center; gap: var(--s-3); } .t-row--between { justify-content: space-between; } .t-allocation-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 390px); gap: var(--s-5); align-items: stretch; } .t-allocation-shift-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); font-family: var(--f-sans); font-size: clamp(28px, 2.55vw, 44px); font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; text-transform: uppercase; } .t-allocation-shift-summary__metric { white-space: nowrap; color: var(--c-ink); } .t-allocation-shift-summary__metric--in-tote { color: var(--c-blue); } .t-allocation-shift-summary__metric--done { color: var(--c-green-deep); } .t-allocation-shift-summary__metric--hospital { color: var(--c-amber); } .t-allocation-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--b-ink); background: var(--c-paper); } .t-allocation-workers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); max-height: 900px; overflow-y: auto; padding-right: var(--s-2); overscroll-behavior-y: auto; } .t-allocation-worker-card { position: relative; background: var(--c-paper); border: var(--b-ink); padding: var(--s-4); min-height: 206px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .t-allocation-worker-card__stripe { position: absolute; inset: 0 0 auto 0; height: 5px; display: flex; } .t-assignment-color { flex: 1; min-width: 14px; background: var(--assignment-color, #00A6A6); } .t-assignment-color--teal, .t-worker-assignment--teal { --assignment-color: #00A6A6; --assignment-bg: rgba(0, 166, 166, 0.10); } .t-assignment-color--indigo, .t-worker-assignment--indigo { --assignment-color: #4F46E5; --assignment-bg: rgba(79, 70, 229, 0.09); } .t-assignment-color--lavender, .t-worker-assignment--lavender { --assignment-color: #8B5CF6; --assignment-bg: rgba(139, 92, 246, 0.10); } .t-assignment-color--orange, .t-worker-assignment--orange { --assignment-color: #D97706; --assignment-bg: rgba(217, 119, 6, 0.11); } .t-assignment-color--magenta, .t-worker-assignment--magenta { --assignment-color: #C026D3; --assignment-bg: rgba(192, 38, 211, 0.09); } .t-assignment-color--slate, .t-worker-assignment--slate { --assignment-color: #64748B; --assignment-bg: rgba(100, 116, 139, 0.10); } .t-assignment-color--blue, .t-worker-assignment--blue { --assignment-color: var(--c-blue); } .t-assignment-color--cyan, .t-worker-assignment--cyan { --assignment-color: var(--c-cyan-deep); } .t-assignment-color--green, .t-worker-assignment--green { --assignment-color: var(--c-green-deep); } .t-assignment-color--amber, .t-worker-assignment--amber { --assignment-color: var(--c-amber); } .t-assignment-color--purple, .t-worker-assignment--purple { --assignment-color: #7c3aed; } .t-assignment-color--red, .t-worker-assignment--red { --assignment-color: var(--c-red); } .t-assignment-color--teal, .t-assignment-color--indigo, .t-assignment-color--lavender, .t-assignment-color--orange, .t-assignment-color--magenta, .t-assignment-color--slate, .t-assignment-color--blue, .t-assignment-color--cyan, .t-assignment-color--green, .t-assignment-color--amber, .t-assignment-color--purple, .t-assignment-color--red { background: var(--assignment-color); } .t-worker-assignments { display: grid; gap: var(--s-2); margin-top: var(--s-3); } .t-worker-assignment { border-left: 4px solid var(--assignment-color, var(--c-blue)); background: var(--assignment-bg, rgba(0, 0, 0, 0.035)); padding: var(--s-2) var(--s-3); display: grid; gap: 2px; } .t-worker-assignment span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--assignment-color, var(--c-blue)); } .t-worker-assignment strong { font-family: var(--f-sans); font-size: 12px; line-height: 1.3; color: var(--c-ink); } .t-allocation-labor-balance { margin-top: var(--s-4); border: var(--b-ink); background: var(--c-paper); padding: var(--s-3) var(--s-4); font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); line-height: 1.5; text-transform: uppercase; color: var(--c-ink); } .t-allocation-labor-balance.is-excess { border-left: 6px solid var(--c-green-deep); } .t-allocation-labor-balance.is-under { border-left: 6px solid var(--c-red); } .t-allocation-log-shell { position: relative; min-width: 0; min-height: 0; align-self: stretch; } .t-allocation-log { position: absolute; inset: 0; background: var(--c-ink); color: var(--c-paper); border: var(--b-ink); height: 100%; min-height: 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .t-allocation-log__head { padding: var(--s-4) var(--s-4) var(--s-3); border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .t-allocation-log__body { padding: var(--s-4); flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-3); } .t-allocation-command-card { display: grid; gap: var(--s-3); padding: var(--s-3); background: linear-gradient(135deg, rgba(0, 209, 209, 0.20), rgba(255, 255, 255, 0.045) 52%), rgba(255, 255, 255, 0.06); border: 1px solid rgba(0, 209, 209, 0.54); box-shadow: 0 0 0 1px rgba(0, 209, 209, 0.10), 0 12px 34px rgba(0, 0, 0, 0.22); } .t-allocation-command-card .t-kicker { color: var(--c-cyan); } .t-allocation-command-card__title { margin-top: var(--s-1); font-family: var(--f-sans); font-size: 13px; line-height: 1.35; color: var(--c-paper); } .t-allocation-command-card__form { display: grid; gap: var(--s-2); } .t-allocation-command-card .t-input { background: rgba(255, 255, 255, 0.10); color: var(--c-paper); border-color: rgba(0, 209, 209, 0.36); } .t-allocation-command-card textarea.t-input { min-height: 128px; line-height: 1.45; resize: vertical; } .t-allocation-command-card .t-cta { justify-self: end; } .t-allocation-command-card .t-input::placeholder { color: rgba(255, 255, 255, 0.42); } .t-allocation-command-card [data-allocation-chat-status] { color: rgba(255, 255, 255, 0.60); } .t-ops-stream-head { display: flex; justify-content: flex-end; gap: var(--s-3); align-items: flex-end; padding-top: var(--s-1); border-top: 1px solid rgba(255, 255, 255, 0.14); } .t-ops-stream { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--s-2); padding-right: var(--s-2); overscroll-behavior-y: auto; } .t-ops-event { position: relative; display: grid; gap: var(--s-2); padding: var(--s-3); background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.11); border-left: 4px solid var(--ops-color, rgba(255, 255, 255, 0.24)); } .t-ops-event--initial { --ops-color: var(--c-cyan); } .t-ops-event--assignment { --ops-color: #8B5CF6; } .t-ops-event--slack { --ops-color: #4A154B; } .t-ops-event--email { --ops-color: #D97706; } .t-ops-event--prompt { --ops-color: var(--c-blue); } .t-ops-event--pace { --ops-color: var(--c-green-deep); } .t-ops-event--risk { --ops-color: var(--c-amber); } .t-ops-event__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.46); } .t-ops-source { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: rgba(255, 255, 255, 0.62); } .t-ops-source--slack { color: #E9D5FF; } .t-ops-source--slack::before { content: "#"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #4A154B; color: #36C5F0; font-family: var(--f-sans); font-size: 12px; font-weight: 800; letter-spacing: 0; } .t-ops-source--email::before, .t-ops-source--prompt::before, .t-ops-source--pace::before { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--c-paper); font-size: 10px; letter-spacing: 0; } .t-ops-source--email::before { content: "@"; } .t-ops-source--prompt::before { content: ">"; } .t-ops-source--pace::before { content: "↕"; } .t-ops-event__title { font-family: var(--f-sans); font-size: 13px; font-weight: 800; line-height: 1.25; color: var(--c-paper); } .t-ops-event__body { font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); } .t-ops-event__orders { display: flex; flex-wrap: wrap; gap: 5px; } .t-ops-event__order { padding: 2px 6px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.10); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.76); } .t-allocation-order-panel { margin-top: var(--s-5); background: var(--c-paper); border: var(--b-hair); } .t-allocation-order-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4); border-bottom: var(--b-hair); } .t-allocation-order-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); } .t-allocation-order-tools .t-input { max-width: 520px; min-width: min(100%, 320px); } .t-allocation-order-window { max-height: 360px; } @media (max-width: 1120px) { .t-allocation-layout { grid-template-columns: 1fr; align-items: start; } .t-allocation-workers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-allocation-log-shell { position: static; } .t-allocation-log { position: static; height: auto; min-height: 620px; } .t-ops-stream { max-height: 620px; min-height: 360px; } } @media (max-width: 760px) { .t-allocation-shift-summary { font-size: clamp(24px, 8vw, 34px); gap: var(--s-1) var(--s-3); } .t-allocation-metrics, .t-allocation-workers { grid-template-columns: 1fr; } .t-allocation-order-tools { align-items: stretch; } .t-allocation-order-tools .t-input { max-width: none; min-width: 0; } } /* ── 5. C·08 — TopBar + ZoneBar ───────────────────────────────────────── */ .t-topbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; padding: var(--s-3) var(--s-5); background: var(--c-paper); border-bottom: var(--b-ink); } .t-topbar__left { display: flex; align-items: center; gap: var(--s-6); } .t-topbar__brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--f-sans); font-weight: 800; font-size: 16px; letter-spacing: 0.01em; } .t-topbar__wordmark { height: 28px; width: auto; flex-shrink: 0; display: block; } .t-topbar__brand-square { width: 12px; height: 12px; background: var(--c-accent); flex-shrink: 0; } .t-topbar__brand-zone { color: var(--c-accent); font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; font-weight: 600; } /* Login-page wordmark — large centerpiece of the left half. */ .t-login__brand { display: flex; align-items: center; justify-content: flex-start; } .t-login__wordmark { max-width: 460px; width: 80%; height: auto; display: block; } /* Sandbox / Production chip — surfaces tenant env in the topbar. */ .t-env-chip { display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; border: 1px solid; } .t-env-chip--sandbox { color: var(--c-cyan-deep); border-color: var(--c-cyan-deep); background: rgba(0, 135, 137, 0.08); } .t-env-chip--production { color: var(--c-amber); border-color: var(--c-amber); background: rgba(244, 180, 0, 0.10); } /* Tenant dropdown (admin only) */ .t-tenant-menu { position: relative; } .t-tenant-menu summary { cursor: pointer; list-style: none; } .t-tenant-menu summary::-webkit-details-marker { display: none; } .t-tenant-menu__trigger { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--c-grid-l); } .t-tenant-menu__trigger:hover { background: var(--c-cream); } .t-tenant-menu[open] .t-tenant-menu__trigger { background: var(--c-cream); border-color: var(--c-ink); } .t-tenant-menu__chevron { font-size: 9px; color: var(--c-mute); } .t-tenant-menu__list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 10; min-width: 220px; list-style: none; background: var(--c-paper); border: 1px solid var(--c-ink); padding: 0; margin: 0; } .t-tenant-menu__list li { border-bottom: 1px solid var(--c-grid-l); } .t-tenant-menu__list li:last-child { border-bottom: none; } .t-tenant-menu__list form { display: block; } .t-tenant-menu__item { width: 100%; text-align: left; padding: var(--s-3) var(--s-4); background: var(--c-paper); color: var(--c-ink); border: none; font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; cursor: pointer; } .t-tenant-menu__item:hover { background: var(--c-cream); } .t-tenant-menu__item.is-active { color: var(--c-accent); } /* ── 18. Inline dropdown chip (used by DONE scope, view switcher) ─────── */ /* A small mono-caps trigger that opens a tiny menu inline with text. */ .t-chip-menu { position: relative; display: inline-block; } .t-chip-menu summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--c-cream); border: 1px solid var(--c-grid-l); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--c-body); vertical-align: middle; } .t-chip-menu summary::-webkit-details-marker { display: none; } .t-chip-menu summary:hover { border-color: var(--c-ink); } .t-chip-menu[open] summary { background: var(--c-paper); border-color: var(--c-ink); color: var(--c-ink); } .t-chip-menu__chevron { font-size: 9px; color: var(--c-mute); } .t-chip-menu__list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; min-width: 180px; list-style: none; background: var(--c-paper); border: 1px solid var(--c-ink); padding: 0; margin: 0; } .t-chip-menu__list li { border-bottom: 1px solid var(--c-grid-l); } .t-chip-menu__list li:last-child { border-bottom: none; } .t-chip-menu__item { display: block; width: 100%; text-align: left; padding: var(--s-3) var(--s-4); background: var(--c-paper); color: var(--c-ink); border: none; font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; cursor: pointer; text-decoration: none; } .t-chip-menu__item:hover { background: var(--c-cream); } .t-chip-menu__item.is-active { color: var(--c-accent); } /* ── 19. View switcher (Totes page: LIVE vs HOSPITAL view) ────────────── */ .t-viewswitch { display: inline-flex; border: 1px solid var(--c-ink); } .t-viewswitch a { padding: var(--s-2) var(--s-4); font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; font-weight: 600; color: var(--c-ink); background: var(--c-paper); border-right: 1px solid var(--c-ink); } .t-viewswitch a:last-child { border-right: none; } .t-viewswitch a:hover { background: var(--c-cream); } .t-viewswitch a.is-active { background: var(--c-ink); color: var(--c-paper); } .t-viewswitch a.is-active--hospital { background: var(--c-amber); color: var(--c-ink); } /* ── 20. FilterTabs (mono caps tab strip, used by Operators, Fulfilled) ─ */ .t-tabs { display: flex; gap: 0; border-bottom: var(--b-hair); } .t-tabs a { padding: var(--s-3) var(--s-4); font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; color: var(--c-mute); border-bottom: 2px solid transparent; } .t-tabs a:hover { color: var(--c-ink); } .t-tabs a.is-active { color: var(--c-ink); border-bottom-color: var(--c-accent); } /* ── 21. Date range input pair ─────────────────────────────────────────── */ .t-daterange { display: inline-flex; align-items: center; gap: var(--s-2); border: 1px solid var(--c-grid-l); padding: var(--s-2) var(--s-3); background: var(--c-paper); } .t-daterange__sep { font-family: var(--f-mono); font-size: var(--t-m2-size); color: var(--c-mute); letter-spacing: 0.08em; } .t-daterange input { border: none; padding: 0; background: transparent; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--c-ink); outline: none; } /* ── 22. Pagination meta ───────────────────────────────────────────────── */ .t-pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) 0; font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; color: var(--c-mute); } .t-pagination__nav { display: flex; gap: var(--s-2); } .t-pagination__btn { padding: var(--s-2) var(--s-3); border: 1px solid var(--c-grid-l); background: var(--c-paper); font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--c-ink); } .t-pagination__btn:hover { background: var(--c-cream); } .t-pagination__btn[disabled] { color: var(--c-mute); cursor: not-allowed; } /* ── 23. Form section (used by Profile, Shift Prefs) ───────────────────── */ .t-form-section { padding: var(--s-6) var(--s-7); border-bottom: var(--b-hair); } .t-form-section:last-child { border-bottom: none; } .t-form-section__head { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-6); align-items: start; } .t-form-section__head h3 { margin-bottom: var(--s-2); } .t-form-section__head p { font-size: var(--t-b3-size); color: var(--c-body); line-height: 1.6; } .t-form-section__body { display: flex; flex-direction: column; gap: var(--s-4); } .t-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } /* ── 24. Toggle (used by Shift Preferences) ────────────────────────────── */ .t-toggle { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; } .t-toggle__track { width: 36px; height: 20px; background: var(--c-grid-l); border: 1px solid var(--c-grid-l); border-radius: 9999px; position: relative; transition: background 0.12s; } .t-toggle__thumb { width: 16px; height: 16px; background: var(--c-paper); border-radius: 50%; position: absolute; top: 1px; left: 1px; transition: left 0.12s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .t-toggle input { display: none; } .t-toggle input:checked + .t-toggle__track { background: var(--c-accent); border-color: var(--c-accent); } .t-toggle input:checked + .t-toggle__track .t-toggle__thumb { left: 17px; } /* ── 25. Print-optimized (Packing Instructions) ───────────────────────── */ @media print { .t-topbar, .t-zonebar, .t-no-print { display: none !important; } body { background: var(--c-paper); color: var(--c-ink); } .t-hero { padding: var(--s-5) 0; } } .t-print-only { display: none; } @media print { .t-print-only { display: block; } } /* ── 25a. Session video player ─────────────────────────────────────────── */ .t-video { position: relative; background: var(--c-ink); aspect-ratio: 16 / 9; border: var(--b-ink); overflow: hidden; } .t-video__placeholder { position: absolute; inset: 0; background-image: radial-gradient(circle at 35% 40%, rgba(0, 229, 232, 0.15) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(37, 92, 255, 0.10) 0%, transparent 50%); display: flex; align-items: center; justify-content: center; } .t-video__play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; color: var(--c-ink); font-size: 28px; line-height: 1; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .t-video__meta { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--s-3) var(--s-4); background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 100%); display: flex; justify-content: space-between; align-items: flex-end; color: var(--c-paper); font-family: var(--f-mono); font-size: var(--t-m2-size); letter-spacing: var(--t-m2-track); text-transform: uppercase; } /* ── 25b. Shipping label preview ───────────────────────────────────────── */ .t-label { position: relative; background: var(--c-paper); border: var(--b-ink); padding: var(--s-5); aspect-ratio: 16 / 9; display: flex; flex-direction: column; font-family: var(--f-mono); } .t-label__head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--c-ink); padding-bottom: var(--s-3); margin-bottom: var(--s-3); } .t-label__carrier { font-family: var(--f-sans); font-weight: 800; font-size: 28px; letter-spacing: -0.01em; } .t-label__service { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-mute); text-align: right; } .t-label__body { display: grid; grid-template-columns: 1fr 140px; gap: var(--s-4); flex: 1; } .t-label__addr { font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; } .t-label__addr strong { font-family: var(--f-sans); font-weight: 800; font-size: 16px; text-transform: uppercase; display: block; margin-bottom: var(--s-2); } .t-label__bars { background-image: repeating-linear-gradient( 90deg, var(--c-ink) 0 2px, var(--c-paper) 2px 4px, var(--c-ink) 4px 5px, var(--c-paper) 5px 9px, var(--c-ink) 9px 11px, var(--c-paper) 11px 12px, var(--c-ink) 12px 14px, var(--c-paper) 14px 18px ); height: 70%; margin-bottom: var(--s-2); } .t-label__bars-num { font-size: 11px; letter-spacing: 0.1em; text-align: center; font-weight: 700; } .t-label--coming-soon { position: relative; aspect-ratio: 16 / 9; background: var(--c-cream); border: 1px dashed var(--c-grid-l); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--s-3); } .t-label--coming-soon .badge { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--c-ink); background: var(--c-paper); padding: var(--s-2) var(--s-4); border: 1px solid var(--c-ink); } .t-label--coming-soon .why { font-family: var(--f-mono); font-size: var(--t-m2-size); letter-spacing: var(--t-m2-track); text-transform: uppercase; color: var(--c-mute); text-align: center; max-width: 320px; line-height: 1.6; } /* ── 26a. Status indicator dot (used by Session — HUD + Pair lights) ───── */ .t-status-indicator { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: var(--b-hair); background: var(--c-paper); } .t-status-indicator__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .t-status-indicator__dot--green { background: var(--c-green-deep); box-shadow: 0 0 12px rgba(26, 138, 63, 0.4); } .t-status-indicator__dot--amber { background: var(--c-amber); box-shadow: 0 0 12px rgba(244, 180, 0, 0.4); } .t-status-indicator__dot--cyan { background: var(--c-cyan); box-shadow: 0 0 12px rgba(0, 229, 232, 0.5); animation: t-pulse 1.6s ease-in-out infinite; } .t-status-indicator__label { font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; font-weight: 600; color: var(--c-ink); } .t-status-indicator__sub { font-family: var(--f-mono); font-size: var(--t-m2-size); letter-spacing: var(--t-m2-track); text-transform: uppercase; color: var(--c-mute); margin-top: 4px; } /* QR code area — uses a CSS-grid placeholder for preview; production renders SVG. */ .t-qr-frame { display: inline-block; padding: var(--s-4); background: var(--c-paper); border: var(--b-ink); } .t-qr { width: 240px; height: 240px; background-image: /* Three big corner finders (visually distinctive). */ radial-gradient(circle 38px at 30px 30px, var(--c-ink) 38px, transparent 39px), radial-gradient(circle 38px at calc(100% - 30px) 30px, var(--c-ink) 38px, transparent 39px), radial-gradient(circle 38px at 30px calc(100% - 30px), var(--c-ink) 38px, transparent 39px), radial-gradient(circle 22px at 30px 30px, var(--c-paper) 22px, transparent 23px), radial-gradient(circle 22px at calc(100% - 30px) 30px, var(--c-paper) 22px, transparent 23px), radial-gradient(circle 22px at 30px calc(100% - 30px), var(--c-paper) 22px, transparent 23px), radial-gradient(circle 14px at 30px 30px, var(--c-ink) 14px, transparent 15px), radial-gradient(circle 14px at calc(100% - 30px) 30px, var(--c-ink) 14px, transparent 15px), radial-gradient(circle 14px at 30px calc(100% - 30px), var(--c-ink) 14px, transparent 15px), /* Pseudo-payload — random-ish checker grid (8px cells). */ repeating-conic-gradient(var(--c-ink) 0deg 25deg, var(--c-paper) 25deg 60deg, var(--c-ink) 60deg 110deg, var(--c-paper) 110deg 180deg); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 8px 8px; position: relative; } .t-qr-caption { font-family: var(--f-mono); font-size: var(--t-m2-size); letter-spacing: var(--t-m2-track); text-transform: uppercase; color: var(--c-mute); text-align: center; margin-top: var(--s-3); } /* ── 26. Pairing live-discovery list ───────────────────────────────────── */ .t-discovery { display: flex; flex-direction: column; border: 1px solid var(--c-grid-l); background: var(--c-paper); max-height: 320px; overflow-y: auto; } .t-discovery__item { display: grid; grid-template-columns: 1fr 130px 90px; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: var(--b-hair); align-items: center; } .t-discovery__item:last-child { border-bottom: none; } .t-discovery__name { font-family: var(--f-sans); font-weight: 700; font-size: var(--t-b2-size); text-transform: uppercase; letter-spacing: -0.01em; } .t-discovery__mac { font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: 0.04em; color: var(--c-mute); } .t-discovery__action { font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; color: var(--c-accent); text-align: right; cursor: pointer; background: none; border: none; font-weight: 600; } .t-discovery__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--c-cyan); animation: t-pulse 1.4s ease-in-out infinite; display: inline-block; margin-right: var(--s-2); vertical-align: middle; } @keyframes t-pulse { 0% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1.0; transform: scale(1.1); } 100% { opacity: 0.4; transform: scale(0.9); } } .t-topbar__nav { display: flex; gap: 0; } .t-topbar__nav a { padding: var(--s-3) var(--s-4); font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; color: var(--c-mute); border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s; } .t-topbar__nav a:hover { color: var(--c-ink); } .t-topbar__nav a.is-active { color: var(--c-ink); border-bottom-color: var(--c-accent); } .t-topbar__right { display: flex; align-items: center; gap: var(--s-4); padding-left: var(--s-3); } .t-topbar__meta { font-family: var(--f-mono); font-size: var(--t-m2-size); letter-spacing: var(--t-m2-track); text-transform: uppercase; color: var(--c-mute); } /* ZoneBar — 4px tri-segment indicator below TopBar */ .t-zonebar { display: grid; grid-template-columns: 1fr 1fr 1fr; } .t-zonebar__seg { height: 4px; background: var(--c-grid-l); } body[data-zone="operate"] .t-zonebar__seg:nth-child(1) { background: var(--c-blue); } body[data-zone="setup"] .t-zonebar__seg:nth-child(2) { background: var(--c-cyan); } body[data-zone="admin"] .t-zonebar__seg:nth-child(3) { background: var(--c-green); } /* ── 6. C·01 — StatTile ────────────────────────────────────────────────── */ .t-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--b-hair); border-bottom: var(--b-hair); } .t-stat-row--2col { grid-template-columns: 1fr 1fr; } .t-stat-row--3col { grid-template-columns: repeat(3, 1fr); } .t-stat-tile { padding: var(--s-5) var(--s-5); border-right: var(--b-hair); } .t-stat-tile:last-child { border-right: none; } .t-stat-tile__v { font-family: var(--f-mono); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.015em; color: var(--c-ink); } .t-stat-tile__v--blue { color: var(--c-blue); } .t-stat-tile__v--cyan { color: var(--c-cyan-deep); } .t-stat-tile__v--green { color: var(--c-green-deep); } .t-stat-tile__v--amber { color: var(--c-amber); } .t-stat-tile__v--red { color: var(--c-red); } .t-stat-tile__l { font-family: var(--f-mono); font-size: var(--t-m2-size); letter-spacing: var(--t-m2-track); text-transform: uppercase; color: var(--c-mute); margin-top: var(--s-3); } /* ── 7. C·02 — StatusPill ─────────────────────────────────────────────── */ .t-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: 5px 11px; background: var(--c-ink); color: var(--c-paper); border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } .t-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan); flex-shrink: 0; } .t-pill--live .t-pill__dot { background: var(--c-cyan); } .t-pill--mode .t-pill__dot { background: var(--c-mode, var(--c-cyan)); } .t-pill--warn { background: var(--c-amber); color: var(--c-ink); } .t-pill--warn .t-pill__dot { background: var(--c-ink); } .t-pill--error { background: var(--c-red); } .t-pill--error .t-pill__dot { background: var(--c-paper); } .t-pill--done .t-pill__dot { background: var(--c-green); } .t-pill--outlined { background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); } .t-pill--outlined .t-pill__dot { background: var(--c-accent); } /* ── 8. C·03 — CTAs ───────────────────────────────────────────────────── */ .t-cta { display: inline-flex; align-items: center; gap: var(--s-3); padding: 14px 22px; background: var(--c-accent); color: var(--c-paper); border: none; font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; font-weight: 600; box-shadow: var(--shadow-cta); text-decoration: none; } .t-cta:hover { filter: brightness(1.05); } .t-cta--cyan { background: var(--c-cyan); color: var(--c-ink); box-shadow: var(--shadow-cta-cyan); } .t-cta--green { background: var(--c-green); color: var(--c-ink); box-shadow: var(--shadow-cta-green); } .t-cta--ink { background: var(--c-ink); color: var(--c-paper); box-shadow: none; } .t-cta-ghost { display: inline-flex; align-items: center; gap: var(--s-3); padding: 14px 22px; background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; font-weight: 600; text-decoration: none; } .t-cta-ghost:hover { background: var(--c-cream); } .t-cta-ghost--danger { color: var(--c-red); border-color: var(--c-red); } .t-mini-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 14px; border: 1px solid var(--c-ink); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; text-decoration: none; } .t-mini-cta:hover { filter: brightness(1.04); } .t-mini-cta--cyan { background: var(--c-cyan); border-color: var(--c-cyan); color: var(--c-ink); box-shadow: var(--shadow-cta-cyan); } .t-mini-cta--ghost { background: transparent; color: var(--c-ink); } .t-mini-cta--ghost:hover { background: var(--c-cream); } /* ── 9. C·04 — UnderlineLink ──────────────────────────────────────────── */ .t-link { font-family: var(--f-mono); font-size: var(--t-m1-size); letter-spacing: var(--t-m1-track); text-transform: uppercase; font-weight: 600; color: var(--c-accent); border-bottom: 1px solid var(--c-accent); padding-bottom: 3px; } /* ── 10. C·05 — KickerLabel ───────────────────────────────────────────── */ .t-kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--c-accent); } /* ── 11. C·06 — ChapterCard ───────────────────────────────────────────── */ .t-chapter-row { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--b-ink); } .t-chapter { padding: var(--s-5); border-right: var(--b-hair); background: var(--c-paper); } .t-chapter:last-child { border-right: none; } .t-chapter__num { font-family: var(--f-mono); font-size: 44px; font-weight: 400; color: #bbb; line-height: 1; } .t-chapter__role { font-family: var(--f-mono); font-size: var(--t-m2-size); letter-spacing: var(--t-m2-track); text-transform: uppercase; color: var(--c-mute); margin-top: var(--s-2); } .t-chapter__title { font-family: var(--f-sans); font-weight: 800; text-transform: uppercase; font-size: var(--t-h2-size); letter-spacing: var(--t-h2-track); margin-top: var(--s-4); } .t-chapter__body { font-size: var(--t-b3-size); line-height: var(--t-b3-leading); color: var(--c-body); margin-top: var(--s-3); } .t-chapter--active { background: var(--c-mode, var(--c-accent)); color: var(--c-ink); } .t-chapter--active .t-chapter__num { color: rgba(0, 0, 0, 0.35); } .t-chapter--active .t-chapter__role { color: var(--c-ink); } .t-chapter--active .t-chapter__body { color: var(--c-ink); } /* Coming-soon overlay — used by Session for modes not yet live. */ .t-chapter--coming-soon { position: relative; cursor: not-allowed; background: var(--c-paper); } .t-chapter--coming-soon > * { filter: grayscale(1); opacity: 0.5; } .t-chapter--coming-soon::before { content: ""; position: absolute; inset: 0; background: rgba(244, 244, 240, 0.65); z-index: 1; pointer-events: none; } .t-chapter--coming-soon::after { content: "COMING SOON"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--c-ink); background: var(--c-paper); padding: var(--s-2) var(--s-4); border: 1px solid var(--c-ink); z-index: 2; pointer-events: none; white-space: nowrap; } /* ── 12. C·07 — ToteTable ─────────────────────────────────────────────── */ .t-table { border: var(--b-hair); background: var(--c-paper); width: 100%; border-collapse: collapse; /* For non-table layouts we use grid rows; HTML can use either. */ } .t-table thead th, .t-table .t-table__hd { padding: var(--s-2) var(--s-4); background: var(--c-cream); border-bottom: var(--b-ink); font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-mute); text-align: left; } .t-table tbody td, .t-table .t-table__cell { padding: var(--s-3) var(--s-4); border-bottom: var(--b-hair); font-size: var(--t-b3-size); vertical-align: middle; } .t-table tbody tr:last-child td, .t-table .t-table__row:last-child .t-table__cell { border-bottom: none; } .t-table tbody tr.is-active td, .t-table .t-table__row.is-active .t-table__cell { background: rgba(0, 229, 232, 0.08); } .t-table__id { font-family: var(--f-mono); font-weight: 700; font-size: 12px; } .t-table__qty { font-family: var(--f-mono); font-size: 12px; } .t-table__status { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; text-align: right; } .t-table__status--scanning { color: var(--c-cyan-deep); } .t-table__status--packed { color: var(--c-green-deep); } .t-table__status--hospital { color: var(--c-amber); } .t-table__status--queued { color: var(--c-mute); } /* Hospital row tint — amber wash for the system-wide hospital view. */ .t-table tbody tr.is-hospital td, .t-table .t-table__row.is-hospital .t-table__cell { background: rgba(244, 180, 0, 0.08); } /* Action button — used by the order-detail video actions row. All three (DOWNLOAD / COPY LINK / EMAIL) share the same size + treatment so they line up visually. */ .t-action-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 7px 12px; background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-ink); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1; list-style: none; } .t-action-btn:hover { background: var(--c-cream); } .t-action-btn::-webkit-details-marker { display: none; } .t-action-btn--cyan { background: var(--c-cyan); border-color: var(--c-cyan); color: var(--c-ink); box-shadow: 0 3px 12px rgba(0, 229, 232, 0.4); } .t-action-btn--cyan:hover { background: var(--c-cyan); } .t-action-menu { position: relative; } .t-video-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; } /* Actions workspace — dummy operational action queue + labor economics table. */ .t-actions-page { background: var(--c-paper); } .t-actions-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: var(--s-5); align-items: end; } .t-actions-hero__meta { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: var(--b-ink); background: var(--c-cream); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-mute); } .t-actions-section-head { align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; } .t-actions-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); padding: 0 var(--s-7) var(--s-5); } .t-actions-column { border: var(--b-ink); background: var(--c-paper); } .t-actions-column__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-4); border-bottom: var(--b-ink); background: var(--c-paper); } .t-actions-count { white-space: nowrap; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--c-blue); text-transform: uppercase; } .t-actions-count--green { color: var(--c-green-deep); } .t-actions-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border-bottom: var(--b-hair); } .t-actions-card:last-child { border-bottom: none; } .t-actions-card--approval { border-left: 5px solid var(--c-blue); } .t-actions-card--taken { border-left: 5px solid var(--c-green-deep); } .t-actions-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .t-actions-card h4 { font-size: 18px; line-height: 1.2; font-weight: 800; } .t-actions-card p { color: var(--c-body); font-size: 14px; line-height: 1.55; } .t-actions-card__meta { display: grid; gap: var(--s-1); color: var(--c-mute); font-family: var(--f-mono); font-size: 10px; line-height: 1.45; letter-spacing: 0.08em; text-transform: uppercase; } .t-actions-badge, .t-actions-impact { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .t-actions-badge { padding: 5px 8px; border: 1px solid currentColor; } .t-actions-badge--approval { color: var(--c-blue); } .t-actions-badge--taken { color: var(--c-green-deep); } .t-actions-impact { color: var(--c-blue); } .t-actions-impact--green { color: var(--c-green-deep); } .t-actions-controls { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap; } .t-actions-control-group { display: inline-flex; border: var(--b-ink); background: var(--c-paper); } .t-actions-toggle { min-height: 38px; padding: 9px 12px; border: none; border-right: var(--b-ink); background: transparent; color: var(--c-ink); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .t-actions-toggle:last-child { border-right: none; } .t-actions-toggle.is-active { background: var(--c-ink); color: var(--c-paper); } .t-actions-labor-shell { padding: 0 var(--s-7) var(--s-6); } .t-actions-labor-note { margin-bottom: var(--s-3); max-width: 960px; color: var(--c-mute); font-family: var(--f-mono); font-size: 10px; line-height: 1.6; letter-spacing: 0.16em; text-transform: uppercase; } .t-actions-profit-task-panel { margin-bottom: var(--s-4); border: var(--b-ink); background: var(--c-paper); } .t-actions-profit-task-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); padding: var(--s-4); border-bottom: var(--b-ink); } .t-actions-profit-task-panel__head > span { color: var(--c-mute); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .t-actions-profit-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .t-actions-profit-task { padding: var(--s-4); border-right: var(--b-hair); border-bottom: var(--b-hair); } .t-actions-profit-task:nth-child(3n) { border-right: none; } .t-actions-profit-task--low { border-left: 5px solid var(--c-amber); } .t-actions-profit-task--unprofitable { border-left: 5px solid var(--c-red); } .t-actions-profit-task__top, .t-actions-profit-task__meta { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .t-actions-profit-task__top span { color: var(--c-amber); } .t-actions-profit-task--unprofitable .t-actions-profit-task__top span, .t-actions-profit-task--unprofitable .t-actions-profit-task__top strong { color: var(--c-red); } .t-actions-profit-task h4 { margin-top: var(--s-2); font-size: 17px; font-weight: 800; } .t-actions-profit-task p { margin-top: var(--s-2); color: var(--c-body); font-size: 13px; line-height: 1.5; } .t-actions-profit-task__meta { margin-top: var(--s-3); color: var(--c-mute); } .t-actions-labor-table { border: var(--b-ink); background: var(--c-paper); overflow-x: auto; } .t-actions-labor-grid { display: grid; grid-template-columns: minmax(190px, 1.35fr) repeat(6, minmax(100px, 0.72fr)) minmax(110px, 0.8fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr) minmax(80px, 0.55fr); min-width: 1220px; } .t-actions-labor-grid--header { background: var(--c-cream); border-bottom: var(--b-ink); } .t-actions-labor-grid--header span { padding: var(--s-2) var(--s-3); color: var(--c-mute); font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .t-actions-labor-grid--summary { border-bottom: var(--b-ink); background: rgba(37, 92, 255, 0.05); } .t-actions-labor-cell { padding: var(--s-3); border-right: var(--b-hair); font-family: var(--f-mono); font-size: 12px; line-height: 1.3; } .t-actions-labor-cell:last-child { border-right: none; } .t-actions-labor-cell--customer { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-sans); font-weight: 800; text-transform: uppercase; } .t-actions-labor-cell--total, .t-actions-labor-cell--profit { font-weight: 800; } .t-actions-labor-cell--profit { color: var(--c-green-deep); } .t-actions-labor-cell--negative, .t-actions-labor-cell--unprofitable { color: var(--c-red); } .t-actions-labor-cell--low { color: var(--c-amber); } .t-actions-labor-flag { display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid currentColor; font-family: var(--f-mono); font-size: 8px; font-weight: 800; letter-spacing: 0.14em; line-height: 1; } .t-actions-labor-flag--low { color: var(--c-amber); } .t-actions-labor-flag--unprofitable { color: var(--c-red); } .t-actions-caret { display: inline-block; width: 18px; color: var(--c-blue); font-family: var(--f-mono); } .t-actions-labor-row { border-bottom: var(--b-hair); } .t-actions-labor-row:last-child { border-bottom: none; } .t-actions-labor-row summary { list-style: none; cursor: pointer; } .t-actions-labor-row summary::-webkit-details-marker { display: none; } .t-actions-labor-row[open] .t-actions-caret { transform: rotate(90deg); } .t-actions-sku-table { min-width: 1220px; padding: var(--s-3); border-top: var(--b-hair); background: var(--c-cream); } .t-actions-sku-head, .t-actions-sku-row { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(120px, 0.4fr)); gap: var(--s-3); align-items: center; } .t-actions-sku-head { padding: 0 0 var(--s-2); color: var(--c-mute); font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .t-actions-sku-row { padding: var(--s-2) 0; border-top: var(--b-hair); font-family: var(--f-mono); font-size: 12px; } @media (max-width: 1120px) { .t-actions-hero, .t-actions-board { grid-template-columns: 1fr; } .t-actions-profit-task-grid { grid-template-columns: 1fr 1fr; } .t-actions-profit-task:nth-child(3n) { border-right: var(--b-hair); } .t-actions-profit-task:nth-child(2n) { border-right: none; } .t-actions-controls { justify-content: flex-start; } } @media (max-width: 720px) { .t-actions-hero, .t-actions-board, .t-actions-labor-shell { padding-left: var(--s-4); padding-right: var(--s-4); } .t-actions-control-group { display: flex; width: 100%; overflow-x: auto; } .t-actions-profit-task-grid { grid-template-columns: 1fr; } .t-actions-profit-task, .t-actions-profit-task:nth-child(2n), .t-actions-profit-task:nth-child(3n) { border-right: none; } .t-actions-profit-task-panel__head { flex-direction: column; } .t-actions-toggle { flex: 0 0 auto; } } /* Totes feed window — 10-row scrollable container. */ .t-totes-window { max-height: 440px; overflow-y: auto; border: var(--b-hair); background: var(--c-paper); } .t-totes-window .t-table { border: none; width: 100%; } .t-totes-window thead th { position: sticky; top: 0; z-index: 1; } /* ── 13. RosterCard (a molecule used on Operate/Home) ─────────────────── */ .t-roster { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--b-hair); background: var(--c-paper); } .t-roster__card { padding: var(--s-5); border-right: var(--b-hair); display: flex; flex-direction: column; gap: var(--s-3); } .t-roster__card:last-child { border-right: none; } .t-roster__head { display: flex; align-items: baseline; justify-content: space-between; } .t-roster__name { font-family: var(--f-sans); font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: -0.005em; } .t-roster__mode-pill { padding: 3px 9px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; } .t-roster__mode-pill--pack { background: var(--c-cyan); color: var(--c-ink); } .t-roster__mode-pill--inventory { background: var(--c-blue); color: var(--c-paper); } .t-roster__mode-pill--pick { background: var(--c-green); color: var(--c-ink); } .t-roster__mode-pill--returns { background: var(--c-green); color: var(--c-ink); } .t-roster__sub { font-family: var(--f-mono); font-size: 11px; color: var(--c-mute); letter-spacing: 0.04em; } .t-roster__stats { display: flex; gap: var(--s-4); padding-top: var(--s-2); border-top: 1px dashed var(--c-grid-l); } .t-roster__stat-v { font-family: var(--f-mono); font-size: 16px; font-weight: 700; } .t-roster__stat-l { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-mute); margin-top: 3px; } /* ── 14. Forms (used by Login / Profile / etc.) ───────────────────────── */ .t-field { display: flex; flex-direction: column; gap: var(--s-2); } .t-field__label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-mute); } .t-input { width: 100%; padding: var(--s-3) var(--s-4); background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-grid-l); border-radius: var(--r-input); font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; } .t-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37, 92, 255, 0.15); } .t-input--dark { background: var(--c-ink-2); color: var(--c-paper); border-color: var(--c-grid-d); } .t-input--dark::placeholder { color: rgba(255, 255, 255, 0.4); } /* ── 15. Split editorial layout (Login / errors) ──────────────────────── */ .t-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; /* Login has no chrome — fill the viewport edge-to-edge. */ min-height: 100dvh; } .t-split__left { background: var(--c-paper); padding: var(--s-8) var(--s-7); display: flex; flex-direction: column; justify-content: space-between; border-right: var(--b-hair); } .t-split__right { background: var(--c-ink); color: var(--c-paper); padding: var(--s-8) var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); justify-content: center; } /* Mobile: slim paper bar on top with the wordmark centered; ink section takes the rest of 100dvh so the form vertically centers via the existing justify-content: center on .t-split__right. The version chip is pulled out of the paper bar via position: absolute and pinned to the bottom of .t-split (i.e. on the ink background) in cobalt. */ @media (max-width: 720px) { .t-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; position: relative; /* anchor for the absolute-positioned version chip */ } .t-split__left { padding: var(--s-4) var(--s-5); border-right: none; border-bottom: var(--b-hair); flex-direction: row; justify-content: center; align-items: center; } .t-split__right { padding: var(--s-6) var(--s-5) var(--s-8); /* bottom padding clears the absolute version chip */ gap: var(--s-4); } /* Logo shrinks to a chip-size centerpiece in the slim bar. */ .t-login__wordmark { max-width: 140px; } /* Version chip leaves the paper bar's flow and pins to the bottom of .t-split on the ink background. Cobalt overrides the t-c-mute class. */ .t-split__left .t-login__version { position: absolute; bottom: var(--s-5); left: 0; right: 0; text-align: center; color: var(--c-blue); margin: 0; padding: 0 var(--s-5); } } /* ── 16. Hero block (page-scale opener) ──────────────────────────────── */ .t-hero { padding: var(--s-6) var(--s-7) var(--s-5); } .t-hero__kicker { margin-bottom: var(--s-4); } .t-hero__title { max-width: 1000px; } .t-hero__body { margin-top: var(--s-4); max-width: 720px; color: var(--c-body); font-size: var(--t-b2-size); line-height: 1.65; } /* ── 17. Utility — squares and dots used by chapter indicators ────────── */ .t-dot-blue { display: inline-block; width: 8px; height: 8px; background: var(--c-blue); border-radius: 50%; } .t-dot-cyan { display: inline-block; width: 8px; height: 8px; background: var(--c-cyan); border-radius: 50%; } .t-dot-green { display: inline-block; width: 8px; height: 8px; background: var(--c-green); border-radius: 50%; } /* ── 35. Live warehouse mock ──────────────────────────────────────────── */ .t-live-page { background: var(--c-cream); min-height: calc(100vh - 64px); padding-bottom: var(--s-7); } .t-live-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: end; padding: var(--s-6) var(--s-7) var(--s-5); border-bottom: var(--b-hair); background: var(--c-paper); } .t-live-hero h1 { margin-top: var(--s-2); } .t-live-hero__meta { display: flex; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap; max-width: 680px; color: var(--c-mute); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: right; } .t-live-hero__meta span { padding: var(--s-1) var(--s-2); border: var(--b-hair); background: var(--c-paper); } .t-live-command { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-5) var(--s-7); border-bottom: var(--b-hair); background: var(--c-paper); } .t-live-command__copy h2 { margin-top: var(--s-2); max-width: 520px; } .t-live-command__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); } .t-live-command__input { min-height: 72px; width: 100%; resize: vertical; padding: var(--s-3) var(--s-4); border: var(--b-hair); background: var(--c-paper); color: var(--c-ink); font-family: var(--f-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.06em; } .t-live-command__input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(37, 92, 255, 0.12); } .t-live-command__send { align-self: stretch; min-width: 118px; } .t-live-command__chips { grid-column: 2; display: flex; gap: var(--s-2); flex-wrap: wrap; } .t-live-command__chips button { border: var(--b-ink); background: var(--c-paper); color: var(--c-ink); padding: var(--s-2) var(--s-3); font-family: var(--f-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .t-live-command__chips button:hover, .t-live-command__chips button:focus-visible { background: var(--c-ink); color: var(--c-paper); } .t-live-command__response { grid-column: 2; padding: var(--s-3); border-left: 3px solid var(--c-cyan); background: rgba(0, 229, 232, 0.08); color: var(--c-body); font-size: 13px; line-height: 1.5; } .t-live-workspace { display: grid; grid-template-columns: minmax(720px, 1fr) 380px; gap: var(--s-5); align-items: start; padding: var(--s-5) var(--s-7) 0; } .t-live-map-shell, .t-live-inspector { border: var(--b-ink); background: var(--c-paper); } .t-live-map-shell__head { display: flex; justify-content: space-between; gap: var(--s-4); align-items: flex-end; padding: var(--s-4); border-bottom: var(--b-hair); } .t-live-map-shell__head h2 { margin-top: var(--s-2); } .t-live-legend { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; color: var(--c-mute); font-family: var(--f-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .t-live-legend span { display: inline-flex; gap: 6px; align-items: center; } .t-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } .t-live-dot--pick { background: #6554ff; } .t-live-dot--pack { background: #00b8bb; } .t-live-dot--bulk { background: #008789; } .t-live-dot--inventory { background: #7a8ea6; } .t-live-map { position: relative; min-height: 0; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(244,244,240,0.4)), radial-gradient(circle at 64% 30%, rgba(0, 229, 232, 0.12), transparent 28%), radial-gradient(circle at 30% 70%, rgba(37, 92, 255, 0.10), transparent 30%), var(--c-cream); } .t-live-warehouse-svg { display: block; width: 100%; height: auto; min-height: 600px; background: radial-gradient(circle at 28% 18%, rgba(92, 255, 138, 0.08), transparent 26%), radial-gradient(circle at 72% 76%, rgba(0, 229, 232, 0.10), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,247,243,0.84)); } .t-live-svg-grid-line { fill: none; stroke: rgba(10,10,10,0.055); stroke-width: 1; } .t-live-svg-stroke { fill: none; stroke: var(--c-ink); stroke-width: 2; stroke-linecap: round; } .t-live-floor-shadow { fill: rgba(10,10,10,0.18); filter: url(#live-soft-shadow); } .t-live-floor { fill: url(#live-floor-fill); stroke: rgba(10,10,10,0.66); stroke-width: 2; } .t-live-floor-grid { opacity: 0.58; pointer-events: none; } .t-live-wall { fill: none; stroke: var(--c-ink); stroke-width: 3; } .t-live-svg-label { fill: var(--c-ink); font-family: var(--f-mono); font-size: 10px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; } .t-live-svg-label--rotate { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); } .t-live-svg-small, .t-live-aisle-label { fill: rgba(10,10,10,0.54); font-family: var(--f-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .t-live-aisle-label { text-anchor: middle; transform-box: fill-box; transform-origin: center; transform: rotate(90deg); } .t-live-back-wall > polygon:first-child { fill: #d4d8d2; stroke: rgba(10,10,10,0.58); stroke-width: 1.5; } .t-live-wall-top { fill: #f7f8f4; stroke: rgba(10,10,10,0.28); stroke-width: 1; } .t-live-dock-door rect { fill: #f8faf8; stroke: var(--c-ink); stroke-width: 1.5; } .t-live-dock-door line { stroke: rgba(10,10,10,0.36); stroke-width: 1; } .t-live-dock-row text { fill: rgba(10,10,10,0.72); } .t-live-truck rect { fill: #f8faf8; stroke: #7b858a; stroke-width: 1.2; } .t-live-truck circle { fill: var(--c-ink); } .t-live-trucks polygon { stroke-width: 1; } .t-live-zone { position: static; } .t-live-zone > rect, .t-live-zone > polygon { stroke: rgba(10,10,10,0.42); stroke-width: 1.5; stroke-dasharray: 7 5; } .t-live-zone--receiving > rect, .t-live-zone--receiving > polygon { fill: rgba(92, 255, 138, 0.14); } .t-live-zone--pack > rect, .t-live-zone--pack > polygon { fill: rgba(0, 229, 232, 0.13); } .t-live-zone--outbound > rect, .t-live-zone--outbound > polygon { fill: rgba(244, 180, 0, 0.15); } .t-live-zone--returns > rect, .t-live-zone--returns > polygon { fill: rgba(122, 142, 166, 0.13); } .t-live-pallets use { fill: #d89828; stroke: rgba(10,10,10,0.42); stroke-width: 1; } .t-live-pallets line { stroke: rgba(10,10,10,0.32); } .t-live-exception-table { fill: rgba(10,10,10,0.72); stroke: var(--c-ink); stroke-width: 1; } .t-live-storage > text { fill: rgba(10,10,10,0.74); } .t-live-rack { position: static; } .t-live-rack--vertical { color: #f0ca78; } .t-live-rack rect { fill: #f0ca78; stroke: var(--c-ink); stroke-width: 1.5; } .t-live-rack line { stroke: rgba(10,10,10,0.42); stroke-width: 1; } .t-live-rack__face { fill: url(#live-rack-face); stroke: var(--c-ink); stroke-width: 1.4; } .t-live-rack__left { fill: #255cff; stroke: var(--c-ink); stroke-width: 1.2; } .t-live-rack__right { fill: #1640a8; stroke: var(--c-ink); stroke-width: 1.2; } .t-live-low-pick-racks rect, .t-live-low-pick-racks polygon { fill: #f0ca78; stroke: rgba(10,10,10,0.58); stroke-width: 1.2; } .t-live-low-pick-racks line { stroke: rgba(10,10,10,0.36); } .t-live-pack-benches rect, .t-live-pack-benches polygon { fill: #121212; stroke: rgba(255,255,255,0.45); stroke-width: 1; } .t-live-conveyor path { fill: none; stroke: #8d928a; stroke-width: 14; stroke-linecap: round; } .t-live-conveyor circle { fill: #d8ddd7; stroke: var(--c-ink); stroke-width: 1; } .t-live-flow-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 10; marker-end: url(#live-arrow); opacity: 0.75; } .t-live-flow-arrow { fill: currentColor; } .t-live-flow-line--inbound { stroke: #13a95a; } .t-live-flow-line--pick { stroke: #6554ff; } .t-live-flow-line--outbound { stroke: #f4a900; } .t-live-flow-line--inbound + .t-live-flow-arrow { color: #13a95a; } .t-live-optimized { position: static; opacity: 0.32; pointer-events: none; transition: opacity 180ms ease, filter 180ms ease; } .t-live-optimized rect, .t-live-optimized polygon { fill: currentColor; fill-opacity: 0.11; stroke: currentColor; stroke-width: 3; stroke-dasharray: 8 6; } .t-live-optimized text { fill: currentColor; } .t-live-optimized--bulk { color: var(--c-cyan-deep); } .t-live-optimized--sku { color: var(--c-blue); } .t-live-optimized--pack { color: #6554ff; } .t-live-map[data-live-highlight="optimized"] .t-live-optimized, .t-live-map[data-live-highlight="sku"] .t-live-optimized--sku, .t-live-map[data-live-highlight="sku"] .t-live-optimized--bulk, .t-live-map[data-live-highlight="customer"] .t-live-optimized--sku, .t-live-map[data-live-highlight="customer"] .t-live-optimized--pack { opacity: 0.92; filter: drop-shadow(0 16px 18px rgba(10,10,10,0.18)); } .t-live-worker { position: static; cursor: pointer; outline: none; } .t-live-worker__halo { fill: var(--c-paper); stroke: var(--worker-color, var(--c-blue)); stroke-width: 3; filter: drop-shadow(0 10px 12px rgba(10,10,10,0.28)); } .t-live-worker__pin { fill: var(--worker-color, var(--c-blue)); stroke: var(--c-paper); stroke-width: 3; } .t-live-worker__tag rect { fill: rgba(255,255,255,0.96); stroke: rgba(10,10,10,0.85); stroke-width: 1.6; } .t-live-worker__tag text { fill: var(--c-ink); font-family: var(--f-mono); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .t-live-worker:hover .t-live-worker__tag rect, .t-live-worker:focus-visible .t-live-worker__tag rect, .t-live-worker.is-selected .t-live-worker__tag rect { fill: var(--c-ink); stroke: var(--c-ink); } .t-live-worker:hover .t-live-worker__tag text, .t-live-worker:focus-visible .t-live-worker__tag text, .t-live-worker.is-selected .t-live-worker__tag text { fill: var(--c-paper); } .t-live-worker.is-selected .t-live-worker__halo { fill: rgba(255,255,255,0.92); stroke-width: 5; } .t-live-worker--pick { --worker-color: #6554ff; } .t-live-worker--pack { --worker-color: #00b8bb; } .t-live-worker--bulk { --worker-color: #008789; } .t-live-worker--inventory { --worker-color: #7a8ea6; } .t-live-map-caption { padding: var(--s-3) var(--s-4); border-top: var(--b-hair); color: var(--c-mute); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .t-live-inspector { position: sticky; top: 88px; padding: var(--s-4); } .t-live-inspector__head { padding-bottom: var(--s-4); border-bottom: var(--b-hair); } .t-live-inspector__head h2 { margin-top: var(--s-2); } .t-live-inspector__status { display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; margin-top: var(--s-4); color: var(--c-mute); font-family: var(--f-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .t-live-inspector__mode { padding: 5px 8px; color: var(--c-paper); background: var(--c-blue); } .t-live-inspector__mode--pick { background: #6554ff; } .t-live-inspector__mode--pack { background: #00b8bb; color: var(--c-ink); } .t-live-inspector__mode--bulk { background: #008789; } .t-live-inspector__mode--inventory { background: #7a8ea6; } .t-live-inspector__facts { display: grid; gap: var(--s-3); margin-top: var(--s-4); } .t-live-inspector__facts div { padding: var(--s-3); border: var(--b-hair); background: var(--c-cream); } .t-live-inspector__facts dt { color: var(--c-mute); font-family: var(--f-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .t-live-inspector__facts dd { margin-top: var(--s-2); color: var(--c-body); font-size: 13px; line-height: 1.5; } .t-live-teleop-button { width: 100%; margin-top: var(--s-4); } .t-live-inspector__foot { margin-top: var(--s-3); color: var(--c-mute); font-family: var(--f-mono); font-size: 10px; line-height: 1.55; letter-spacing: 0.12em; text-transform: uppercase; } .t-live-modal[hidden] { display: none; } .t-live-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--s-6); background: rgba(10,10,10,0.78); } .t-live-modal__panel { width: min(1040px, 100%); max-height: calc(100vh - 64px); overflow: auto; border: 1px solid rgba(255,255,255,0.25); background: var(--c-ink); color: var(--c-paper); } .t-live-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4); border-bottom: var(--b-hair-d); } .t-live-modal__head h2 { margin-top: var(--s-2); } .t-live-modal__close { width: 40px; height: 40px; border: var(--b-hair-d); background: transparent; color: var(--c-paper); font-size: 28px; line-height: 1; } .t-live-teleop { padding: var(--s-4); } .t-live-teleop__viewport { position: relative; min-height: 500px; overflow: hidden; border: 1px solid rgba(255,255,255,0.22); background: linear-gradient(115deg, rgba(0,229,232,0.13), rgba(37,92,255,0.11)), repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 58px), linear-gradient(#2a2d2b, #10120f); } .t-live-teleop__viewport::before { content: ""; position: absolute; inset: 12% 8% 18%; background: linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px) 0 0 / 52px 52px, linear-gradient(0deg, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0 / 52px 52px; transform: perspective(700px) rotateX(64deg); border: 1px solid rgba(255,255,255,0.18); } .t-live-teleop__hud { position: absolute; left: var(--s-4); right: var(--s-4); z-index: 3; color: var(--c-cyan); font-family: var(--f-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .t-live-teleop__hud--top { top: var(--s-4); } .t-live-teleop__hud--bottom { bottom: var(--s-4); color: rgba(255,255,255,0.68); } .t-live-teleop__reticle { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border: 2px solid rgba(0,229,232,0.80); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 24px rgba(0,229,232,0.35); } .t-live-teleop__reticle::before, .t-live-teleop__reticle::after { content: ""; position: absolute; background: rgba(0,229,232,0.8); } .t-live-teleop__reticle::before { left: 50%; top: -18px; bottom: -18px; width: 2px; transform: translateX(-50%); } .t-live-teleop__reticle::after { top: 50%; left: -18px; right: -18px; height: 2px; transform: translateY(-50%); } .t-live-teleop__rack { position: absolute; left: 18%; top: 22%; width: 18%; height: 56%; border: 1px solid rgba(255,255,255,0.25); background: repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 24px, rgba(255,255,255,0.04) 24px 38px); transform: skewY(-8deg); } .t-live-teleop__box { position: absolute; z-index: 4; padding: var(--s-2) var(--s-3); border: 1px solid currentColor; background: rgba(10,10,10,0.65); font-family: var(--f-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .t-live-teleop__box--sku { left: 42%; top: 39%; color: var(--c-cyan); } .t-live-teleop__box--order { right: 12%; top: 60%; color: var(--c-green); } .t-live-teleop__controls { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); } @media (max-width: 1260px) { .t-live-workspace { grid-template-columns: 1fr; } .t-live-inspector { position: static; } } @media (max-width: 920px) { .t-live-hero, .t-live-command { grid-template-columns: 1fr; } .t-live-command__chips, .t-live-command__response { grid-column: 1; } .t-live-command__bar { grid-template-columns: 1fr; } .t-live-workspace { padding-left: var(--s-4); padding-right: var(--s-4); } .t-live-map-shell__head { flex-direction: column; align-items: flex-start; } .t-live-map { overflow-x: auto; } .t-live-warehouse-svg { min-width: 880px; min-height: 540px; } }