/* ==========================================================================
   AI NOTIFICATION • FILE: controls-styling.css
   PURPOSE:
     - General visual chrome for APF controls (NOT inputs; NOT buttons).
     - Pills, cards, stock chip, tables, help text, canvas visual vars, etc.
     - Consumes tokens from theme-bridge.css.

   SCOPE / SELECTORS:
     - [data-apf="common"] (general chrome)
     - .apf-pill, .apf-card
     - .apf-price-box / price lines
     - .apf-variations-table (table visuals)
     - .apf-stock-target (stock snippet)
     - .apf-help text
     - .mid-canvas visual CSS variables (not layout)

   OUT OF SCOPE:
     - Input/field styling (controls-inputs.css)
     - Buttons/CTAs (controls-buttons.css)
     - Layout/grid/flex (controls-layout.css)
     - Token definitions (theme-bridge.css)

   LOAD ORDER:
     1) theme-bridge.css
     2) controls-layout.css
     3) controls-inputs.css
     4) controls-buttons.css
     5) controls-styling.css (this file)
   ========================================================================== */


/* =============================== FONTS ====================================
   Apply Inter for body text and Orbitron for headings via tokenized aliases.
   Make sure theme-bridge.css defines:
     --apf-font-body: Inter, ...;
     --apf-font-heading: Orbitron, ...;
   ========================================================================== */
.apf-common-box [data-apf="common"] .apf-controls {
  font-family: var(--apf-font-body, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans");
  font-weight: var(--apf-body-wt, 400);
}
.apf-common-box [data-apf="common"] .apf-controls :is(h1,h2,h3,h4,h5,h6,.apf-section__title) {
  font-family: var(--apf-font-heading, Orbitron, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans");
  font-weight: var(--apf-heading-wt, 700);
  letter-spacing: .01em;
}
/* Ensure common inline text uses body font */
.apf-common-box [data-apf="common"] .apf-controls :is(p,li,label,span,small,code,pre,table,th,td) {
  font-family: inherit;
}


/* ============================== PILLS ==================================== */
[data-apf="common"] .apf-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .6rem;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-high);
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--ctl-c1) 18%, var(--surface-1) 82%),
    color-mix(in oklch, var(--ctl-c2) 18%, var(--surface-1) 82%));
  border: 1px solid color-mix(in oklch, var(--ctl-c2) 28%, #ffffff22);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}


/* =============================== CARD ==================================== */
[data-apf="common"] .apf-card {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--surface-1) 90%, transparent),
    color-mix(in oklch, var(--surface-0) 90%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--drop-md);
}


/* ============================ PRICE CHIP ================================= */
.apf-common-box .apf-price-box {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: var(--radius);
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--ctl-c1) 25%, var(--surface-1) 75%),
    color-mix(in oklch, var(--ctl-c2) 25%, var(--surface-1) 75%));
  border: 1px solid color-mix(in oklch, var(--input-stroke) 70%, #ffffff22);
  white-space: nowrap;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 6px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.apf-common-box .apf-price-line {
  display: inline-flex;
  gap: .35rem;
  align-items: baseline;
}
.apf-common-box .apf-price-label {
  color: var(--text-mid);
  font-size: .9rem;
}
.apf-common-box :is(.apf-price-unit,.apf-price-total) {
  font-weight: 800;
  font-size: 1.16rem;
  color: var(--text-high);
}


/* ========================== VARIATIONS TABLE ============================= */
.apf-common-box .apf-variations-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--surface-1) 95%, transparent),
    color-mix(in oklch, var(--surface-0) 95%, transparent));
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  box-shadow: var(--drop-md);
}
.apf-common-box .apf-variations-table thead th {
  text-align: left;
  font-weight: 700;
  color: var(--text-mid);
  background: color-mix(in oklch, var(--surface-2) 85%, #000 15%);
  border-bottom: 1px solid var(--border);
  padding: .55rem .65rem;
  letter-spacing: .02em;
  font-family: var(--apf-font-heading, Orbitron, Inter, system-ui, -apple-system, "Segoe UI"); /* headings use Orbitron */
}
.apf-common-box .apf-variations-table tbody td {
  padding: .55rem .65rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-high);
}
.apf-common-box .apf-variations-table tbody tr:last-child td {
  border-bottom: 0;
}
.apf-common-box .apf-variations-table tbody tr:hover td {
  background: color-mix(in oklch, var(--ctl-c1) 20%, var(--surface-1) 80%);
}


/* ============================== HELP TEXT ================================ */
.apf-common-box .control .apf-help {
  font-size: .8rem;
  color: var(--text-mid);
  line-height: 1.25;
}


/* ============================ STOCK SNIPPET ============================== */
[data-apf="common"] .apf-stock-target {
  --stock-scale: 1.1;
  --stock-line: 0.9;
  --stock-gap: .35rem;
  --stock-fg: var(--text-high, #f8f9fb);
  --stock-mid: var(--text-mid, #b8bdc7);
}
[data-apf="common"] .apf-stock-target .apf-css {
  display: grid;
  gap: var(--stock-gap);
  color: var(--stock-fg);
  font-size: calc(1rem * var(--stock-scale));
  line-height: var(--stock-line);
  font-family: var(--apf-font-body, Inter, system-ui, -apple-system, "Segoe UI");
}
[data-apf="common"] .apf-stock-target .apf-css__label strong {
  font-size: calc(1.00rem * var(--stock-scale));
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .01em;
  font-family: var(--apf-font-heading, Orbitron, Inter, system-ui, -apple-system, "Segoe UI");
}
[data-apf="common"] .apf-stock-target .apf-css__details {
  font-size: calc(.88rem * var(--stock-scale));
  color: var(--stock-mid);
  opacity: .95;
}
[data-apf="common"] .apf-stock-target .apf-css__lead {
  font-size: calc(.86rem * var(--stock-scale));
  color: var(--stock-fg);
}
[data-apf="common"] .apf-stock-target .apf-css__lead strong {
  font-weight: 700;
  color: var(--stock-mid);
  font-family: var(--apf-font-heading, Orbitron, Inter, system-ui, -apple-system, "Segoe UI");
}
[data-apf="common"] .apf-stock-target.is-compact {
  --stock-scale: .82;
  --stock-gap: .28rem;
}


/* ======================= RANGE PROGRESS (VISUAL HOOK) ==================== */
[data-apf="common"] input[type="range"].apf-range {
  background-size: 100% var(--track-h), 0 0;
}