/* ============================================================
   MONOSYSM ECOSYSTEM — REUSABLE COMPONENT SYSTEM
   Panels, buttons, spec tables, marks, loaders, overlays, bars.
   ============================================================ */

/* ---- Brand marks (SVG as mask so it inherits the theme colour) ---- */
.mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--mark-src) no-repeat left center / contain;
          mask: var(--mark-src) no-repeat left center / contain;
}
.mark--monosysm { --mark-src: url("../assets/brand/Monosysm.svg"); }
.mark--basys    { --mark-src: url("../assets/brand/Basic.svg"); }
.mark--mono-icon { --mark-src: url("../assets/brand/Monosysm_Icon.svg"); }
.mark--basys-icon { --mark-src: url("../assets/brand/Basic_Icon.svg"); }
.wordmark { height: clamp(18px, 2.2vw, 30px); width: auto; aspect-ratio: 293 / 50; }
.wordmark--basys { aspect-ratio: 108 / 50; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: 14px 20px; border: var(--hair) solid var(--line-strong);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: filter var(--dur-fast), transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn .caret { font-weight: 400; }
.btn--ghost { background: transparent; color: var(--btn-ghost-fg); }
.btn--block { width: 100%; }
.btn--lg { padding: 18px 24px; font-size: var(--t-sm); }

/* small inline link-button ( LABEL_ > ) */
.linkbtn {
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fg); display: inline-flex; align-items: center; gap: 8px;
}
.linkbtn .caret { color: var(--accent); }
[data-brand="monosysm"] .linkbtn .caret { color: var(--ink); }

/* ---- Panel with engineering corner ticks ---- */
.panel { position: relative; border: var(--hair) solid var(--line); }
.panel::before, .panel::after,
.panel > .tick-tr, .panel > .tick-bl { content: ""; position: absolute; width: var(--tick); height: var(--tick); pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-top: var(--hair) solid var(--line-strong); border-left: var(--hair) solid var(--line-strong); }
.panel::after  { bottom: -1px; right: -1px; border-bottom: var(--hair) solid var(--line-strong); border-right: var(--hair) solid var(--line-strong); }
.panel--ticks4 > .tick-tr { top: -1px; right: -1px; border-top: var(--hair) solid var(--line-strong); border-right: var(--hair) solid var(--line-strong); }
.panel--ticks4 > .tick-bl { bottom: -1px; left: -1px; border-bottom: var(--hair) solid var(--line-strong); border-left: var(--hair) solid var(--line-strong); }
.panel--invert { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-line); }
.panel--invert.panel::before, .panel--invert.panel::after { border-color: var(--inv-fg); }

/* section header bar ( 01. HERO ) */
.sec-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-size: var(--t-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--fg-soft);
  padding-bottom: var(--sp-3);
}
.sec-head .idx { color: var(--fg); font-weight: 700; }

/* ---- Spec table (label / value rows) ----
   Uses theme tokens so it stays legible on the brand field (dark ink on
   orange · orange on black). Inside a .panel--invert it flips to --inv-*. */
.spec { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.spec tr { border-top: var(--hair) solid var(--line); }
.spec tr:last-child { border-bottom: var(--hair) solid var(--line); }
.spec th, .spec td { padding: 10px 0; text-align: left; vertical-align: baseline; }
.spec th { font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); width: 42%; }
.spec td { text-align: right; font-weight: 700; letter-spacing: 0.04em; color: var(--fg); }
.panel--invert .spec tr { border-color: var(--inv-line); }
.panel--invert .spec th { color: var(--inv-soft); }
.panel--invert .spec td { color: var(--inv-fg); }

/* ---- Tag / pill ---- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: 4px 8px; border: var(--hair) solid var(--line);
}
.tag--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tag--soon { background: var(--fg); color: var(--bg); }

/* ---- ASCII progress bar ---- */
.bar { font-family: var(--font-ui); font-size: var(--t-xs); letter-spacing: 1px; white-space: nowrap; }
.bar .track { color: var(--fg-faint); }
.bar .fill { color: var(--fg); }

/* ---- Size / chip selector ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  min-width: 46px; padding: 10px 12px; text-align: center;
  border: var(--hair) solid var(--line-strong); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.08em; transition: background var(--dur-fast), color var(--dur-fast);
}
.chip.is-active { background: var(--fg); color: var(--bg); }
.chip[disabled] { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.chip .stk { display: block; font-size: 0.5rem; font-weight: 400; letter-spacing: var(--tracking-label); margin-top: 3px; opacity: 0.7; }

/* color chip — a bare square swatch (no text). The colour name only appears
   as a tooltip on hover. Used on the Basic_System PDP color picker. */
.chip--color { position: relative; width: 34px; height: 34px; min-width: 0; padding: 0; border: none; overflow: visible; }
.chip--color:hover { background: none; }
.chip--color .swatch { display: block; width: 100%; height: 100%; background: var(--swatch, #000); border: var(--hair) solid var(--line-strong); }
.chip--color.is-active { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip--color .chip-cap {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  padding: 3px 7px; background: var(--fg); color: var(--bg);
  font-size: var(--t-2xs); letter-spacing: var(--tracking-label); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast);
}
.chip--color:hover .chip-cap, .chip--color:focus-visible .chip-cap { opacity: 1; }

/* ---- Form controls ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.input, .select, .textarea {
  width: 100%; padding: 12px 14px; font-size: var(--t-sm);
  border: var(--hair) solid var(--line-strong); background-color: transparent; color: var(--fg);
  caret-color: var(--accent);
  transition: border-color var(--dur-fast);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); }
.textarea { resize: vertical; min-height: 96px; }
.select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.select option { background-color: var(--bg); color: var(--fg); }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; cursor: pointer; border-top: var(--hair) solid var(--line); }
.radio-row .dot { width: 13px; height: 13px; border-radius: 50%; border: var(--hair) solid var(--line-strong); flex: none; position: relative; }
.radio-row.is-on .dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent); }

/* ---- Stepper ---- */
.stepper { display: flex; flex-direction: column; gap: 2px; }
.step { display: flex; gap: 12px; align-items: center; font-size: var(--t-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 10px 0; color: var(--fg-faint); }
.step .n { color: var(--fg-soft); }
.step.is-active { color: var(--fg); }
.step.is-done { color: var(--fg-soft); }
.step.is-active .n { color: var(--fg); font-weight: 700; }

/* ---- Timeline (track order) ---- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 8px; width: 1px; background: var(--line); }
.tl-row { position: relative; padding: 0 0 20px; }
.tl-row::before { content: ""; position: absolute; left: -22px; top: 3px; width: 11px; height: 11px; border: var(--hair) solid var(--line-strong); border-radius: 50%; background: var(--bg); }
.tl-row.is-done::before { background: var(--accent); border-color: var(--accent); }
.tl-row .tl-label { font-size: var(--t-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 700; }
.tl-row.is-pending .tl-label { color: var(--fg-faint); }
.tl-row .tl-time { font-size: var(--t-2xs); color: var(--fg-soft); margin-top: 3px; }

/* ---- Asset stage (product render / hero canvas host) ----
   Transparent by default so objects/ASCII float on the brand field
   (black object on orange · orange object on black), as in the mockups. */
.stage { position: relative; background: transparent; overflow: hidden; display: grid; place-items: center; }
.stage--void { background: var(--render-bg); }
/* A portrait render inside a landscape frame must be bounded on BOTH axes.
   Percentage heights (height/max-height:100%) resolve against the grid `fr`
   track, which browsers treat as indefinite → the image overflows and its hem
   is clipped. Absolute inset:0 gives a definite box positionally (no % needed),
   and object-fit:contain letterboxes the whole garment inside it, centered. */
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage canvas { width: 100%; height: 100%; object-fit: contain; }
.stage .plus { position: absolute; color: var(--fg-faint); font-size: 14px; line-height: 1; }
.stage .plus.tl { top: 10px; left: 10px; } .stage .plus.tr { top: 10px; right: 10px; }
.stage .plus.bl { bottom: 10px; left: 10px; } .stage .plus.br { bottom: 10px; right: 10px; }
.ascii-canvas { image-rendering: pixelated; color: var(--ascii-color); }

/* asset reveal: clean fade once decoded (never a blurry thumb) */
.asset-media { opacity: 0; transition: opacity 500ms var(--ease-out); }
.asset-media.is-ready { opacity: 1; }

/* ---- Loader (system feedback, in-code text — not real-time ASCII) ---- */
.loader { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; color: var(--fg-soft); font-size: var(--t-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.loader .line { min-height: 1em; }
.loader .bar { font-size: var(--t-sm); color: var(--fg); }

/* ---- Overlay system ---- */
#overlay-host { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; }
#overlay-host.is-open { display: block; }
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66); backdrop-filter: none; opacity: 0; transition: opacity var(--dur-overlay); }
#overlay-host.is-open .scrim { opacity: 1; }
.overlay {
  position: absolute; background: var(--bg); border: var(--hair) solid var(--line-strong);
  display: flex; flex-direction: column; max-height: 100%;
  transform: translateY(8px); opacity: 0;
  transition: transform var(--dur-overlay) var(--ease-out), opacity var(--dur-overlay);
}
#overlay-host.is-open .overlay { transform: translateY(0); opacity: 1; }
/* centered dialogs (both widths) */
.overlay--dialog, .overlay--wide { top: 50%; left: 50%; translate: -50% -50%; }
.overlay--dialog { width: min(560px, calc(100vw - 2 * var(--gutter))); }
.overlay--wide { width: min(880px, calc(100vw - 2 * var(--gutter))); }
.overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: var(--hair) solid var(--line); flex: none; }
.overlay-title { font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.overlay-close { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tracking-label); padding: 4px 6px; }
.overlay-body { padding: 18px; overflow-y: auto; }
.overlay-foot { padding: 16px 18px; border-top: var(--hair) solid var(--line); display: flex; gap: var(--sp-3); flex: none; }

/* ---- Brand transition curtain ---- */
#transition {
  position: fixed; inset: 0; z-index: var(--z-transition);
  background: var(--bg); color: var(--fg);
  display: none; flex-direction: column; justify-content: center; gap: 14px;
  padding: var(--gutter); font-size: var(--t-sm); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
#transition.is-on { display: flex; }
#transition .tline { display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(4px); }
#transition .tline.show { opacity: 1; transform: none; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }

/* ---- Bottom status bar ---- */
.statusbar {
  flex: none; display: flex; align-items: center; gap: var(--sp-5);
  padding: 10px var(--gutter); border-top: var(--hair) solid var(--line);
  font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft);
  white-space: nowrap;
}
.statusbar .ok { color: var(--fg); }
.statusbar .warn { color: var(--fg-soft); }
.statusbar .grow-line { flex: 1 1 auto; }

/* ---- Nav menu (hamburger) — lives in the top bar, houses
   search/track/complaint/brand-switch, opens downward ---- */
.navmenu { position: relative; display: inline-flex; flex: none; }
.navmenu-btn { width: 26px; height: 18px; position: relative; flex: none; color: var(--fg); }
.navmenu-btn .burger, .navmenu-btn .burger::before, .navmenu-btn .burger::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.navmenu-btn .burger { top: 50%; margin-top: -1px; }
.navmenu-btn .burger, .navmenu-btn .burger::before, .navmenu-btn .burger::after { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.navmenu-btn .burger::before { top: -7px; }
.navmenu-btn .burger::after { top: 7px; }
/* open state folds the burger into an X — a brand-safe close affordance
   (never recoloured to accent, which is invisible on the MONOSYSM field) */
.navmenu.is-open .navmenu-btn .burger { background: transparent; }
.navmenu.is-open .navmenu-btn .burger::before { top: 0; transform: rotate(45deg); }
.navmenu.is-open .navmenu-btn .burger::after { top: 0; transform: rotate(-45deg); }
.navmenu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px;
  background: var(--bg); border: var(--hair) solid var(--line-strong);
  display: flex; flex-direction: column; padding: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
  z-index: var(--z-topbar); white-space: nowrap;
}
.navmenu.is-open .navmenu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.navmenu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; text-align: left; color: var(--fg);
}