/* ============================================================
   universals.css — shared component vocabulary.
   Every rule consumes only --ll-* and --color-* tokens.
   Layout files override these via .layout-X .pos-thing { ... }.
   ============================================================ */

/* ─────────────── PAGE CHROME ─────────────── */
.pos-page         { padding: calc(20px * var(--ll-density)) calc(24px * var(--ll-density)); color: var(--color-text); font-family: var(--ll-font-body); font-size: var(--ll-fs-base); }
.pos-page-header  { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: calc(16px * var(--ll-density)); flex-wrap: wrap; }
.pos-crumb        { font-size: var(--ll-fs-label); font-family: var(--ll-font-mono); color: var(--color-text-secondary); letter-spacing: 0.05em; text-transform: var(--ll-uppercase-labels); }
.pos-page-title   { font-family: var(--ll-font-display); font-size: var(--ll-fs-h1); font-weight: 700; margin: 4px 0 0; letter-spacing: var(--ll-letter-spacing-head); color: var(--color-text); }
.pos-page-sub     { font-size: var(--ll-fs-small); color: var(--color-text-secondary); margin-top: 4px; }
.pos-section      { margin-bottom: calc(20px * var(--ll-density)); }
.pos-divider      { height: 1px; background: var(--pos-divider, var(--color-border)); margin: calc(16px * var(--ll-density)) 0; border: 0; }

/* ─────────────── TABS ─────────────── */
.pos-tabs         { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-surface); border: var(--ll-stroke) solid var(--color-border); border-radius: var(--ll-radius); }
.pos-tab          { padding: 8px 14px; border: 0; border-radius: calc(var(--ll-radius) - 3px); background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--ll-fs-small); font-weight: 600; cursor: pointer; letter-spacing: 0.02em; text-transform: var(--ll-uppercase-labels); }
.pos-tab:hover    { background: color-mix(in oklab, var(--color-text) 6%, transparent); color: var(--color-text); }
.pos-tab.is-active{ background: var(--color-text); color: var(--color-background); }

/* ─────────────── CARDS ─────────────── */
.pos-card         { background: var(--ll-card-bg); border: var(--ll-card-border); border-radius: var(--ll-radius); padding: var(--ll-pad-card); box-shadow: var(--ll-shadow); color: var(--color-text); }
.pos-card--flat   { box-shadow: none; }
.pos-card--raised { box-shadow: var(--ll-shadow-elev); }
.pos-card__head   { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(12px * var(--ll-density)); }
.pos-card__title  { font-family: var(--ll-font-display); font-size: var(--ll-fs-h2); font-weight: 700; margin: 0; letter-spacing: var(--ll-letter-spacing-head); }
.pos-card__sub    { font-size: var(--ll-fs-label); color: var(--color-text-secondary); }

/* KPI / stat card */
.pos-stat         { background: var(--ll-card-bg); border: var(--ll-card-border); border-radius: var(--ll-radius); padding: var(--ll-pad-card); }
.pos-stat__label  { font-size: var(--ll-fs-label); font-family: var(--ll-font-mono); color: var(--color-text-secondary); letter-spacing: 0.05em; text-transform: uppercase; }
.pos-stat__value  { font-family: var(--ll-font-display); font-size: calc(var(--ll-fs-h1) * 1.1); font-weight: 700; letter-spacing: var(--ll-letter-spacing-head); margin: 6px 0; color: var(--color-text); }
.pos-stat__delta  { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--ll-radius-pill); font-family: var(--ll-font-mono); font-size: var(--ll-fs-label); font-weight: 700; }
.pos-stat__delta--up   { background: var(--color-success); color: #fff; }
.pos-stat__delta--down { background: var(--color-error);   color: #fff; }
.pos-stat__delta--flat { background: color-mix(in oklab, var(--color-text) 15%, var(--color-surface)); color: var(--color-text); }

.pos-empty-state  { padding: 48px 24px; text-align: center; color: var(--color-text-secondary); }
.pos-empty-state__mark  { font-size: 56px; opacity: 0.3; margin-bottom: 10px; }
.pos-empty-state__title { font-family: var(--ll-font-display); font-size: var(--ll-fs-h2); font-weight: 700; }

/* ─────────────── TABLES ─────────────── */
.pos-table        { width: 100%; border-collapse: collapse; font-size: var(--ll-fs-base); color: var(--color-text); }
.pos-table th     { text-align: left; padding: var(--ll-pad-cell); font-weight: 700; font-size: var(--ll-fs-label); color: var(--color-text-secondary); letter-spacing: 0.05em; text-transform: var(--ll-uppercase-labels); border-bottom: var(--ll-stroke) solid var(--pos-divider, var(--color-border)); background: color-mix(in oklab, var(--color-text) 4%, var(--color-surface)); position: sticky; top: 0; z-index: 1; }
.pos-table td     { padding: var(--ll-pad-cell); border-bottom: var(--ll-stroke) solid var(--pos-divider, var(--color-border)); }
.pos-table tr:last-child td { border-bottom: 0; }
.pos-table--striped tbody tr:nth-child(odd) td { background: var(--ll-table-stripe); }
.pos-table tbody tr.is-selected td,
.pos-table tbody tr.is-selected   { background: color-mix(in oklab, var(--color-primary) 14%, transparent); }
.pos-table tbody tr:hover td      { background: color-mix(in oklab, var(--color-text) 5%, transparent); cursor: pointer; }
.pos-td--mono     { font-variant-numeric: tabular-nums; font-family: var(--ll-font-mono); }
.pos-td--num      { text-align: right; }
.pos-td--name     { font-weight: 600; }

/* ─────────────── LISTS ─────────────── */
.pos-list         { list-style: none; padding: 0; margin: 0; }
.pos-list-item    { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: calc(10px * var(--ll-density)) calc(4px * var(--ll-density)); border-bottom: var(--ll-stroke) solid var(--pos-divider, var(--color-border)); font-size: var(--ll-fs-base); }
.pos-list-item:last-child { border-bottom: 0; }
.pos-list-item:hover { background: color-mix(in oklab, var(--color-text) 4%, transparent); }
.pos-list-item.is-selected { background: color-mix(in oklab, var(--color-primary) 12%, transparent); }

/* ─────────────── GRID ─────────────── */
.pos-grid         { display: grid; gap: calc(12px * var(--ll-density)); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ─────────────── MODALS ─────────────── */
.pos-modal-overlay { position: fixed; inset: 0; background: color-mix(in oklab, black 50%, transparent); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 1000; padding: 24px; }
.pos-modal        { background: var(--color-surface); color: var(--color-text); border: var(--ll-stroke) solid var(--color-border); border-radius: var(--ll-radius-lg); padding: calc(24px * var(--ll-density)); width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--ll-shadow-elev); font-family: var(--ll-font-body); font-size: var(--ll-fs-base); }
.pos-modal__title { font-family: var(--ll-font-display); font-size: var(--ll-fs-h1); font-weight: 700; letter-spacing: var(--ll-letter-spacing-head); margin: 0 0 calc(8px * var(--ll-density)); color: var(--color-text); }
.pos-modal__sub   { font-size: var(--ll-fs-small); color: var(--color-text-secondary); margin-bottom: calc(16px * var(--ll-density)); }
.pos-modal__body  { display: flex; flex-direction: column; gap: calc(12px * var(--ll-density)); }
.pos-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: calc(20px * var(--ll-density)); padding-top: calc(16px * var(--ll-density)); border-top: var(--ll-stroke) solid var(--pos-divider, var(--color-border)); }
.pos-modal--sheet      { /* C overrides for bottom sheet */ }
.pos-modal--fullscreen { /* B overrides for power tasks */ }

/* ─────────────── FORMS ─────────────── */
.pos-field        { display: flex; flex-direction: column; gap: 4px; }
.pos-label        { font-size: var(--ll-fs-label); font-family: var(--ll-font-mono); color: var(--color-text-secondary); letter-spacing: 0.05em; text-transform: var(--ll-uppercase-labels); font-weight: 700; }
.pos-help         { font-size: var(--ll-fs-label); color: var(--color-text-secondary); margin-top: 2px; }
.pos-error        { font-size: var(--ll-fs-label); color: var(--color-error); margin-top: 2px; }

.pos-input,
.pos-select,
.pos-textarea     { height: var(--ll-input-height); padding: 0 12px; border-radius: var(--ll-radius-sm); border: var(--ll-stroke) solid var(--color-border); background: var(--color-background); color: var(--color-text); font-family: var(--ll-font-body); font-size: var(--ll-fs-base); outline: none; width: 100%; box-sizing: border-box; }
.pos-textarea     { height: auto; min-height: calc(var(--ll-input-height) * 2); padding: 10px 12px; resize: vertical; }
.pos-input:focus,
.pos-select:focus,
.pos-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent); }
.pos-input:disabled,
.pos-select:disabled,
.pos-textarea:disabled { opacity: 0.5; cursor: not-allowed; }

.pos-select       { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 12px) center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }

.pos-checkbox,
.pos-radio        { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }

.pos-switch       { display: inline-block; width: 40px; height: 22px; border-radius: 999px; border: 0; padding: 2px; background: color-mix(in oklab, var(--color-text) 20%, transparent); cursor: pointer; position: relative; transition: background var(--ll-motion) var(--ll-ease); }
.pos-switch__thumb { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--ll-motion) var(--ll-ease); }
.pos-switch.is-on { background: var(--color-primary); }
.pos-switch.is-on .pos-switch__thumb { transform: translateX(18px); }

/* ─────────────── BUTTONS ─────────────── */
.pos-btn          { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ll-btn-height); padding: 0 16px; border: var(--ll-stroke) solid var(--color-border); border-radius: var(--ll-radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-family: var(--ll-font-body); font-size: var(--ll-fs-base); font-weight: 600; cursor: pointer; transition: background var(--ll-motion) var(--ll-ease), transform var(--ll-motion) var(--ll-ease); text-transform: var(--ll-uppercase-labels); letter-spacing: 0.02em; }
.pos-btn:hover    { background: color-mix(in oklab, var(--color-text) 6%, var(--color-surface)); }
.pos-btn:active   { transform: translateY(1px); }
.pos-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pos-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pos-btn--primary { background: var(--color-primary); color: var(--color-btn-primary-text, #fff); border-color: var(--color-primary); }
.pos-btn--primary:hover { filter: brightness(1.08); background: var(--color-primary); }
.pos-btn--ghost   { background: transparent; border-color: transparent; }
.pos-btn--ghost:hover { background: color-mix(in oklab, var(--color-text) 6%, transparent); }
.pos-btn--danger  { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.pos-btn--success { background: var(--color-success); color: #fff; border-color: var(--color-success); }

.pos-btn--icon    { width: var(--ll-btn-height); padding: 0; }
.pos-btn--block   { width: 100%; }
.pos-btn--lg      { height: calc(var(--ll-btn-height) * 1.25); padding: 0 22px; font-size: calc(var(--ll-fs-base) * 1.1); }
.pos-btn--sm      { height: calc(var(--ll-btn-height) * 0.78); padding: 0 10px; font-size: var(--ll-fs-small); }

.pos-btn-group    { display: inline-flex; }
.pos-btn-group .pos-btn { border-radius: 0; border-right-width: 0; }
.pos-btn-group .pos-btn:first-child { border-top-left-radius: var(--ll-radius-sm); border-bottom-left-radius: var(--ll-radius-sm); }
.pos-btn-group .pos-btn:last-child  { border-top-right-radius: var(--ll-radius-sm); border-bottom-right-radius: var(--ll-radius-sm); border-right-width: var(--ll-stroke); }

/* ─────────────── CHIPS, BADGES, TOASTS, PROGRESS ─────────────── */
.pos-chip         { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--ll-radius-pill); font-family: var(--ll-font-mono); font-size: var(--ll-fs-label); font-weight: 700; letter-spacing: 0.05em; background: color-mix(in oklab, var(--color-text) 10%, var(--color-surface)); color: var(--color-text); border: var(--ll-stroke) solid var(--pos-divider, var(--color-border)); }
.pos-chip--success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.pos-chip--warning { background: var(--color-warning); color: var(--color-background); border-color: var(--color-warning); }
.pos-chip--danger  { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.pos-chip--info    { background: var(--color-primary); color: var(--color-btn-primary-text, #fff); border-color: var(--color-primary); }
.pos-chip--ghost   { background: transparent; }

.pos-badge        { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-error); color: #fff; font-family: var(--ll-font-mono); font-size: 10px; font-weight: 700; }

.pos-toast        { padding: 14px 18px; border-radius: var(--ll-radius); background: var(--color-text); color: var(--color-background); font-size: var(--ll-fs-base); box-shadow: var(--ll-shadow-elev); display: flex; align-items: center; gap: 12px; }

.pos-progress     { width: 100%; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--color-text) 12%, transparent); overflow: hidden; }
.pos-progress__bar { height: 100%; background: var(--color-primary); transition: width var(--ll-motion) var(--ll-ease); }

/* ─────────────── ACCESSIBILITY HELPERS ─────────────── */
.pos-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; }