/* loom-surface.css — depth-aware base surface (Phase 2)
   Tokens from os-tokens.css only. Zero raw hex / rgba / duration literals. */

.loom-surface {
  --loom-elev: var(--elev-0);
  --loom-radius: var(--r-panel);
  background: var(--card);
  color: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--loom-radius);
  box-shadow: var(--loom-elev);
  box-sizing: border-box;
}

.loom-surface[data-loom-layer="GROUND"] {
  --loom-elev: var(--elev-0);
  background: transparent;
  border-color: transparent;
}

.loom-surface[data-loom-layer="ROOM"] {
  --loom-elev: var(--elev-1);
  background: var(--surface);
}

.loom-surface[data-loom-layer="OBJECT"] {
  --loom-elev: var(--elev-2);
  background: var(--card);
}

.loom-surface[data-loom-layer="FLOATING"] {
  --loom-elev: var(--elev-3);
}

.loom-surface[data-loom-layer="DRAWER"],
.loom-surface[data-loom-layer="SYSTEM"] {
  --loom-elev: var(--elev-4);
}

.loom-surface[data-material="gunmetal"] {
  background: var(--gun-card);
  color: var(--gun-ink-0);
  border-color: var(--gun-line);
}

.loom-surface[data-material="panel"] {
  background: var(--surface);
}

.loom-surface[data-material="glass"] {
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(12px);
}

/* press control — §XXX: wrap long labels; never clip stress strings */
.loom-press {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px var(--sp-4);
  gap: var(--sp-2);
  font: 600 var(--fs-13) / 1.25 var(--font-body);
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--ink-on-fam);
  background: var(--fam-ink, var(--indigo-ink));
  transition:
    transform var(--ss-dur-press) var(--ss-ease),
    opacity var(--ss-dur-hover) var(--ss-ease),
    box-shadow var(--ss-dur-hover) var(--ss-ease);
  box-shadow: var(--elev-2);
  position: relative;
  /* sheen still works; text must wrap inside the pill (gate maxUnbroken) */
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  height: auto;
}

/* secondary / quiet on dark stage boards — solid gun tokens (no alpha under text · glass gate) */
.loom-press[data-variant="secondary"] {
  background: var(--gun-card);
  color: var(--gun-ink-0);
  border-color: var(--gun-line-strong);
}

.loom-press[data-variant="quiet"] {
  background: var(--gun-surface);
  color: var(--gun-ink-0);
  box-shadow: none;
  border-color: var(--gun-line);
}

.loom-press[data-variant="danger"] {
  background: var(--rose-ink);
}

.loom-press:hover:not(:disabled) {
  transform: translateY(-1px);
}

.loom-press:active:not(:disabled) {
  transform: scale(0.97);
}

.loom-press:focus-visible {
  outline: 2px solid var(--fam-lift, var(--indigo-lift));
  outline-offset: 2px;
}

/* Solid mute — never opacity on the control (glass gate folds opacity into paint alpha).
   Disabled still needs ≥4.5:1 — grey-on-grey at 3.97 fails composite-contrast. */
.loom-press:disabled {
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  background: var(--gun-base);
  color: var(--gun-ink-1);
  border-color: var(--gun-line-strong);
  box-shadow: none;
}
.loom-press:disabled[data-variant="secondary"],
.loom-press:disabled[data-variant="quiet"],
.loom-press:disabled[data-variant="danger"] {
  background: var(--gun-base);
  color: var(--gun-ink-1);
  border-color: var(--gun-line-strong);
}

/* pointer sheen — house technique; mid token lives in os-tokens */
.loom-press[data-loom-sheen="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    var(--sheen-mid) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform var(--ss-dur-in) var(--ss-ease);
  pointer-events: none;
}

.loom-press[data-loom-sheen="1"]:hover::after {
  transform: translateX(120%);
}

/* metric — payload never moves */
.loom-metric {
  padding: var(--sp-4) 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loom-metric__label {
  font: 500 12px / 1.3 var(--font-body);
  /* ink-1 not ink-2 — captions must clear 3:1 composite contrast on light stage (scf:gates) */
  color: var(--ink-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.loom-metric__value[data-payload] {
  font: 600 28px / 1.1 var(--font-body);
  color: var(--ink-0);
  transition: none !important;
  animation: none !important;
}

.loom-metric[data-provenance="sample"] .loom-metric__label::after {
  content: " · sample";
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.loom-metric[data-provenance="unavailable"] .loom-metric__value {
  color: var(--ink-1);
}

/* card */
.loom-card {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loom-card__title {
  font: 600 18px / 1.25 var(--font-body);
  margin: 0;
  color: var(--ink-0);
}

.loom-card__body {
  font: 400 var(--fs-13) / var(--leading-body) var(--font-body);
  margin: 0;
  color: var(--ink-1);
}

.loom-card[data-hero="1"] {
  border-color: color-mix(in srgb, var(--fam-mark, var(--indigo-mark)) 35%, var(--line));
  box-shadow: var(--elev-3);
}

/* type rise — display copy only; never wrap [data-payload] */
.loom-type-rise:not([data-payload]) {
  opacity: 0;
  transform: translateY(8px);
}

.loom-type-rise.ss-in:not([data-payload]),
.loom-type-rise[data-in="1"]:not([data-payload]) {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ss-dur-in) var(--ss-ease),
    transform var(--ss-dur-in) var(--ss-ease);
}

/* bento */
.loom-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.loom-bento__cell {
  min-height: 88px;
}

.loom-bento__cell[data-span="2"] { grid-column: span 2; }
.loom-bento__cell[data-span="3"] { grid-column: span 3; }
.loom-bento__cell[data-span="4"] { grid-column: span 4; }

/* ambient mote field — GROUND only */
.loom-field-mote {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 20% 30%, var(--indigo-lift) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, var(--indigo-mark) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 80%, var(--line-strong) 0 1px, transparent 1.5px);
  background-size: 120px 120px, 180px 180px, 90px 90px;
}

/* Hero spotlight (GROUND) — optical wash only, never payload.
   Contained to host box so §XXX text never clips under the wash. */
.loom-spotlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 0%,
      color-mix(in srgb, var(--fam-lift, var(--indigo-lift)) 48%, transparent) 0%,
      color-mix(in srgb, var(--fam-mark, var(--indigo-mark)) 14%, transparent) 42%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 100% 80% at 50% 0%,
      color-mix(in srgb, var(--card) 28%, transparent) 0%,
      transparent 58%
    );
  opacity: 0.82;
  z-index: 0;
}

.loom-spotlight[data-intensity="quiet"] { opacity: 0.42; }
.loom-spotlight[data-intensity="soft"] { opacity: 0.72; }
.loom-spotlight[data-intensity="full"] { opacity: 0.96; }

/* truth chip — OBJECT micro-mark for provenance / sample honesty */
.loom-truth-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  min-width: 0;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-0);
  font: 600 12px / 1.25 var(--font-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: var(--elev-1, none);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.loom-truth-chip[data-provenance="sample"] {
  border-color: color-mix(in srgb, var(--fam-mark, var(--indigo-mark)) 40%, var(--line-strong));
  background: var(--card);
  color: var(--ink-0);
}

.loom-truth-chip[data-provenance="live"] {
  border-color: var(--line-strong);
  color: var(--ink-0);
  background: var(--card);
}

.loom-truth-chip[data-provenance="decorative"] {
  border-color: var(--line-strong);
  color: var(--ink-0);
  background: var(--card);
  opacity: 1;
}

.loom-truth-chip[data-provenance="unavailable"] {
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--ink-0);
  background: var(--card);
}

.loom-truth-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-0);
  flex-shrink: 0;
}

.loom-truth-chip[data-provenance="unavailable"] .loom-truth-chip__dot {
  background: transparent;
  border: 1px solid var(--ink-0);
}

.loom-truth-chip > span:not(.loom-truth-chip__dot) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .loom-press,
  .loom-press[data-loom-sheen="1"]::after,
  .loom-type-rise {
    transition: none !important;
    transform: none !important;
  }
  .loom-press[data-loom-sheen="1"]::after {
    display: none;
  }
  .loom-type-rise {
    opacity: 1 !important;
  }
  .loom-field-mote {
    opacity: 0.2;
    animation: none;
  }
  .loom-spotlight {
    opacity: 0.32;
  }
}