/* CUBE Application UI — unreleased proposal. Brand: supplied CUBE manual.
   Canonical token source. DIN Pro requires licensed local webfonts; see fonts/README.md.
   Components are opt-in via cube-* classes; base styles via .cube-ui. */
:root {
  --cube-brand-white: #ffffff;
  --cube-brand-black: #000000;
  --cube-brand-blue: #0086cf;
  --cube-brand-red: #ff0d00;
  --cube-canvas: #ffffff;
  --cube-surface: #f5f5f5;
  --cube-surface-strong: #ededed;
  --cube-text: #141414;
  --cube-text-muted: #626262;
  --cube-border: #d6d6d6;
  --cube-border-control: #767676;
  --cube-action: #000000;
  --cube-action-hover: #292929;
  --cube-action-active: #444444;
  --cube-link: #00649b;
  --cube-focus: #00649b;
  --cube-info: #00649b;
  --cube-info-soft: #eaf4fa;
  --cube-success: #21643c;
  --cube-success-soft: #edf6ef;
  --cube-warning: #805500;
  --cube-warning-soft: #fff5df;
  --cube-danger: #b42318;
  --cube-danger-soft: #fff0ee;
  --cube-font-body: "DIN Pro", "Arial Narrow", Arial, sans-serif;
  --cube-font-mono: ui-monospace, Consolas, monospace;
  --cube-font-xs: 0.75rem;
  --cube-font-sm: 0.875rem;
  --cube-font-md: 1rem;
  --cube-font-lg: 1.25rem;
  --cube-font-xl: 1.5rem;
  --cube-font-2xl: 2rem;
  --cube-font-3xl: 3rem;
  --cube-space-1: 4px;
  --cube-space-2: 8px;
  --cube-space-3: 12px;
  --cube-space-4: 16px;
  --cube-space-6: 24px;
  --cube-space-8: 32px;
  --cube-space-12: 48px;
  --cube-space-16: 64px;
  --cube-space-24: 96px;
  --cube-radius-sm: 2px;
  --cube-radius-md: 4px;
  --cube-radius-kiosk: 24px;
  --cube-target: 48px;
  --cube-target-kiosk: 64px;
  --cube-content-max: 1280px;
  --cube-reading-max: 72ch;
  --cube-duration-fast: 120ms;
  --cube-duration: 180ms;
  --cube-shadow-overlay: 0 16px 48px #00000026;
}
.cube-ui { margin:0; background:var(--cube-canvas); color:var(--cube-text); font:400 var(--cube-font-md)/1.55 var(--cube-font-body); -webkit-font-smoothing:antialiased; }
.cube-ui *, .cube-ui *::before, .cube-ui *::after { box-sizing:border-box; }
.cube-ui button,.cube-ui input,.cube-ui select,.cube-ui textarea { font:inherit; }
.cube-ui img,.cube-ui svg { max-width:100%; }
.cube-ui h1,.cube-ui h2,.cube-ui h3,.cube-ui h4 { line-height:1.12; font-weight:700; margin:0 0 16px; }
.cube-ui h1 { font-size:clamp(2.5rem,5vw,4.5rem); letter-spacing:-.045em; }
.cube-ui h2 { font-size:clamp(1.8rem,3vw,2.7rem); letter-spacing:-.03em; }
.cube-ui h3 { font-size:1.25rem; }
.cube-ui p { margin:0 0 16px; }
.cube-ui a:not([class]) { color:var(--cube-link); text-underline-offset:4px; }
.cube-ui :focus-visible { outline:3px solid var(--cube-focus); outline-offset:4px; }
.cube-inverse :focus-visible { outline-color:#fff; box-shadow:0 0 0 7px #00649b; }
.cube-ui [hidden] { display:none !important; }
.cube-ui code { font: .85em/1.5 var(--cube-font-mono); overflow-wrap:anywhere; }
.cube-ui pre { padding:24px; background:#f5f5f5; overflow:auto; border:1px solid var(--cube-border); white-space:pre-wrap; }
.cube-muted { color:var(--cube-text-muted); } .cube-small { font-size:.875rem; } .cube-overline { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.cube-number { font-variant-numeric:tabular-nums; }
.cube-stack { display:grid; gap:16px; } .cube-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.cube-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:24px; }
.cube-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:var(--cube-target); padding:12px 22px; border:1px solid #000; border-radius:var(--cube-radius-sm); color:#fff; background:var(--cube-action); font-weight:700; font-size:.875rem; text-decoration:none; cursor:pointer; line-height:1.3; transition:background var(--cube-duration-fast); }
.cube-button:hover { background:var(--cube-action-hover); } .cube-button:active { background:var(--cube-action-active); }
.cube-button--secondary { color:#000; background:#fff; } .cube-button--secondary:hover { background:#ededed; } .cube-button--secondary:active { background:#d6d6d6; }
.cube-button--quiet { background:transparent; color:#141414; border-color:transparent; text-decoration:underline; text-underline-offset:4px; } .cube-button--quiet:hover { background:#ededed; }
.cube-button--danger { background:var(--cube-danger); border-color:var(--cube-danger); } .cube-button--danger:hover { background:#8d1c13; }
.cube-button:disabled { background:#ededed; color:#626262; border-color:#d6d6d6; cursor:not-allowed; }
.cube-button[aria-busy=true] { cursor:wait; } .cube-button--kiosk { min-height:var(--cube-target-kiosk); padding:18px 32px; font-size:1.125rem; }
.cube-field { display:grid; gap:8px; } .cube-label { font-weight:700; font-size:.875rem; }
.cube-input,.cube-select,.cube-textarea { width:100%; min-height:48px; padding:12px; color:var(--cube-text); background:#fff; border:1px solid var(--cube-border-control); border-radius:2px; }
.cube-input:hover,.cube-select:hover,.cube-textarea:hover { border-color:#000; }
.cube-input[aria-invalid=true] { border:2px solid var(--cube-danger); } .cube-input:disabled { background:#ededed; color:#626262; cursor:not-allowed; }
.cube-input[readonly] { background:#f5f5f5; } .cube-error { color:var(--cube-danger); font-size:.875rem; margin:0; }
.cube-choice { display:flex; align-items:center; gap:12px; min-height:48px; cursor:pointer; } .cube-choice input { width:20px; height:20px; accent-color:#000; flex-shrink:0; }
.cube-switch { appearance:none; width:44px !important; height:26px !important; background:#767676; border-radius:20px; position:relative; transition:background 120ms; }
.cube-switch::after { content:''; position:absolute; background:white; width:18px; height:18px; top:4px; left:4px; border-radius:50%; } .cube-switch:checked { background:#000; } .cube-switch:checked::after { left:22px; }
.cube-card { padding:24px; border:1px solid var(--cube-border); border-radius:4px; background:#fff; }
.cube-card--selected { border:2px solid var(--cube-focus); padding:23px; }
.cube-stat { font-size:3rem; font-weight:700; letter-spacing:-.04em; line-height:1.15; } .cube-stat small { font-size:1rem; letter-spacing:0; font-weight:400; }
.cube-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; font-size:.75rem; line-height:1.5; font-weight:700; background:#ededed; color:#141414; border-radius:2px; }
.cube-badge--success { background:var(--cube-success-soft); color:var(--cube-success); } .cube-badge--warning { background:var(--cube-warning-soft); color:var(--cube-warning); } .cube-badge--danger { background:var(--cube-danger-soft); color:var(--cube-danger); } .cube-badge--info { background:var(--cube-info-soft); color:var(--cube-info); }
.cube-alert { padding:16px 20px; border-left:3px solid var(--cube-info); background:var(--cube-info-soft); color:var(--cube-info); } .cube-alert p:last-child { margin-bottom:0; }
.cube-alert--success { border-color:var(--cube-success); background:var(--cube-success-soft); color:var(--cube-success); } .cube-alert--warning { border-color:var(--cube-warning); background:var(--cube-warning-soft); color:var(--cube-warning); } .cube-alert--danger { border-color:var(--cube-danger); background:var(--cube-danger-soft); color:var(--cube-danger); }
.cube-table-wrap { overflow-x:auto; } .cube-table { width:100%; border-collapse:collapse; text-align:left; font-size:.875rem; }
.cube-table th { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; background:#f5f5f5; font-weight:700; } .cube-table th,.cube-table td { padding:16px; border-bottom:1px solid var(--cube-border); vertical-align:top; } .cube-table caption { text-align:left; margin:0 0 12px; font-weight:700; } .cube-table .cube-number { text-align:right; white-space:nowrap; }
.cube-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; font-size:.875rem; } .cube-breadcrumb ol { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0; gap:8px; } .cube-breadcrumb li+li::before { content:'/'; color:#767676; margin-right:8px; }
.cube-tabs { display:flex; gap:8px; border-bottom:1px solid var(--cube-border); flex-wrap:wrap; } .cube-tabs a { display:inline-flex; min-height:48px; padding:12px 16px; text-decoration:none; color:#626262; border-bottom:3px solid transparent; } .cube-tabs a[aria-current=page] { color:#000; border-color:#000; font-weight:700; }
.cube-steps { display:flex; gap:16px; padding:0; list-style:none; counter-reset:step; flex-wrap:wrap; } .cube-steps li { display:flex; align-items:center; gap:8px; color:#626262; font-size:.875rem; } .cube-steps li::before { counter-increment:step; content:counter(step); display:grid; place-items:center; width:32px; height:32px; background:#ededed; color:#141414; border-radius:50%; } .cube-steps li[aria-current=step] { color:#000; font-weight:700; } .cube-steps li[aria-current=step]::before { background:#000; color:#fff; }
.cube-progress { width:100%; height:8px; accent-color:#000; border:0; background:#d6d6d6; } .cube-progress::-webkit-progress-bar { background:#d6d6d6; } .cube-progress::-webkit-progress-value { background:#000; }
.cube-spinner { display:inline-block; width:24px; height:24px; border:2px solid #b0b0b0; border-top-color:currentColor; border-radius:50%; animation:cube-spin 1s linear infinite; } @keyframes cube-spin { to { transform:rotate(360deg); } }
.cube-inverse { background:#000; color:#fff; } .cube-inverse .cube-muted { color:#c5c5c5; }
.cube-dialog { width:min(520px,calc(100% - 32px)); padding:32px; border:1px solid #767676; border-radius:4px; box-shadow:var(--cube-shadow-overlay); color:var(--cube-text); background:#fff; } .cube-dialog::backdrop { background:#0009; } .cube-dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:32px; flex-wrap:wrap; }
.cube-icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex-shrink:0; }
.cube-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(prefers-reduced-motion:reduce) { .cube-ui *, .cube-ui *::before,.cube-ui *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:600px) { .cube-card { padding:20px; } .cube-table th,.cube-table td { padding:12px; } .cube-dialog { padding:24px; } }