/* widgets.css — shared widget primitives.
   Vendored from Jake's Widget Design Deck (2026-05-22).
   Every widget is wrapped in a unique .w-<id> scope, but the base
   card chrome and tokens are shared so they read as one family.

   Loaded by: static/operator-orchestrator.html
   Companion tokens: components/design/widget-kit/tokens.css
   Companion motion: components/design/widget-kit/motion.js */

/* ---------- base card ---------- */
.w {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.4;
  padding: 14px 16px 14px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.w-std  { width: 360px; height: 280px; }
.w-wide { width: 720px; height: 280px; }
.w-tall { width: 360px; height: 560px; }
.w-xl   { width: 720px; height: 560px; }

.w--ink {
  background: #1d1a14;
  border-color: #34301f;
  color: #efe5cc;
}
.w--ink-deep {
  background: #14130d;
  border-color: #2a2517;
  color: #efe5cc;
}

.w-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.w-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.w--ink .w-title { color: #efe5cc; }
.w-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.w--ink .w-eyebrow { color: #8a826f; }

.w-mono     { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.w-tnum     { font-variant-numeric: tabular-nums; }
.w-serif-i  { font-family: var(--f-serif); font-style: italic; }
.w-label    { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.w-mute     { color: var(--ink-3); }
.w-mute-2   { color: var(--ink-2); }

.w-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px;
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--paper-3); color: var(--ink-2);
  border: 1px solid var(--hairline);
}
.w-chip--ok    { background: var(--green-tint); color: var(--green-2);  border-color: var(--green-soft); }
.w-chip--warn  { background: var(--rust-tint);  color: var(--rust-2);   border-color: var(--rust-soft); }
.w-chip--danger{ background: var(--wine-tint);  color: var(--wine-2);   border-color: var(--wine-soft); }
.w-chip--info  { background: var(--indigo-tint);color: var(--indigo);   border-color: var(--indigo-soft); }
.w-chip--ghost { background: transparent; color: var(--ink-3); border-color: var(--hairline); }

.w-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.w-delta--up   { color: var(--green-2); }
.w-delta--down { color: var(--wine-2); }
.w-delta--flat { color: var(--ink-3); }

.w-bar      { height: 6px; background: var(--paper-3); border-radius: 100px; overflow: hidden; position: relative; }
.w-bar > i  { display: block; height: 100%; border-radius: 100px; background: var(--green); transition: width 600ms ease; }
.w-bar.is-warn   > i { background: var(--rust); }
.w-bar.is-danger > i { background: var(--wine); }
.w-bar.is-amber  > i { background: var(--amber); }
.w-bar > b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); border-radius: 1px; }

.w-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-3); }
.w-dot--ok     { background: var(--green); }
.w-dot--warn   { background: var(--rust); }
.w-dot--danger { background: var(--wine); }
.w-dot--ghost  { background: var(--hairline-2); }
.w-dot--live   { background: var(--wine); position: relative; }
.w-dot--live::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--wine); opacity: 0.4;
  animation: w-pulse 1.6s ease-out infinite;
}
@keyframes w-pulse {
  0%   { transform: scale(0.4); opacity: 0.6; }
  100% { transform: scale(2);   opacity: 0;   }
}

.w-hb { animation: w-hb 1.2s ease-in-out infinite; transform-origin: center; }
@keyframes w-hb {
  0%, 60%, 100% { transform: scale(1); }
  20%           { transform: scale(1.18); }
  35%           { transform: scale(0.96); }
}

.w-shimmer {
  background: linear-gradient(90deg, var(--paper-3) 0%, var(--paper-2) 40%, var(--paper-3) 80%);
  background-size: 200% 100%;
  animation: w-shim 1.6s linear infinite;
  border-radius: var(--r-1);
}
@keyframes w-shim { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.w-ekg-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: w-ekg 2.2s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes w-ekg { 0% { stroke-dashoffset: 400; } 60%, 100% { stroke-dashoffset: -400; } }

.w-pulse-fade { animation: w-pf 2s ease-in-out infinite; }
@keyframes w-pf { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.w-av {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper-3); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; flex: 0 0 auto;
  border: 1px solid var(--hairline);
}
.w-av--ok   { background: var(--green-tint); color: var(--green-2); border-color: var(--green-soft); }
.w-av--warn { background: var(--rust-tint);  color: var(--rust-2);  border-color: var(--rust-soft); }
.w-av--danger{ background: var(--wine-tint); color: var(--wine-2);  border-color: var(--wine-soft); }

.w-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}

.w-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--r-2);
  background: var(--rust); color: #fbf6e9;
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  border: 0; cursor: pointer;
  letter-spacing: -0.005em;
}
.w-btn--ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--hairline-2); }
.w-btn--ok    { background: var(--green); color: #fbf6e9; }
.w-btn--danger{ background: var(--wine); color: #fbf6e9; }

.w svg { display: block; }

/* ════════════ SURFACES — every widget can pick a personality ════════════ */
.w--bg-green    { background: var(--green);    color: #fbf6e9; border-color: var(--green-2); }
.w--bg-green-2  { background: var(--green-2);  color: #fbf6e9; border-color: var(--green-2); }
.w--bg-rust     { background: var(--rust);     color: #fbf6e9; border-color: var(--rust-2); }
.w--bg-rust-2   { background: var(--rust-2);   color: #fbf6e9; border-color: var(--rust-2); }
.w--bg-wine     { background: var(--wine);     color: #fbf6e9; border-color: var(--wine-2); }
.w--bg-indigo   { background: var(--indigo);   color: #f0eef8; border-color: #2e305f; }
.w--bg-plum     { background: var(--plum);     color: #f8eef5; border-color: #4a2f54; }
.w--bg-amber    { background: var(--amber);    color: #2a2620; border-color: var(--rust-2); }
.w--bg-slate    { background: var(--slate);    color: #f0eee9; border-color: #2e3a44; }
.w--bg-ink      { background: var(--ink);      color: #efe5cc; border-color: #14130d; }

[class*="w--bg-"]:not(.w--bg-amber) .w-title    { color: inherit; }
[class*="w--bg-"]:not(.w--bg-amber) .w-eyebrow  { color: inherit; opacity: 0.72; }
[class*="w--bg-"]:not(.w--bg-amber) .w-mute     { color: inherit; opacity: 0.7; }
[class*="w--bg-"]:not(.w--bg-amber) .w-foot     { border-top-color: rgba(255,255,255,0.22); color: inherit; opacity: 0.65; }
[class*="w--bg-"]:not(.w--bg-amber) .w-label    { color: inherit; opacity: 0.7; }

.w--terminal {
  background: #0d1410;
  color: #6dd99a;
  border-color: #1c2920;
  font-family: var(--f-mono);
}
.w--terminal .w-title { color: #efe5cc; font-family: var(--f-sans); }
.w--terminal .w-eyebrow { color: #6dd99a; }
.w--terminal .w-mute { color: #4a8a6a; }
.w--terminal ::selection { background: #6dd99a; color: #0d1410; }

.w--news {
  background: #f6f1e0;
  border-color: #c8b88a;
  font-family: var(--f-serif);
}
.w--news .w-title { font-family: var(--f-serif); font-weight: 500; font-style: italic; font-size: 18px; }
.w--news .w-head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 12px; }
.w--news .w-foot { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); border-bottom-style: double; }

.w--sticky {
  background: #fff2a6;
  border-color: #d8c060;
  color: #4a3a14;
  box-shadow: 2px 4px 0 rgba(0,0,0,0.08), 6px 10px 24px rgba(40,30,10,0.12);
  transform: rotate(-1.2deg);
}
.w--sticky .w-title, .w--sticky .w-eyebrow { color: #4a3a14; }

.w--polaroid {
  background: #fbf6e9;
  border-color: #d4c7a6;
  padding-bottom: 28px;
  box-shadow: 0 2px 0 #efe7d1, 0 14px 30px rgba(40,30,10,0.14);
}

.w--ticket {
  background: linear-gradient(to right, var(--paper) 0%, var(--paper) calc(100% - 80px), var(--paper-3) calc(100% - 80px), var(--paper-3) 100%);
  border: none;
  border-radius: 0;
  position: relative;
  filter: drop-shadow(0 4px 12px rgba(40,30,10,0.10));
}
.w--ticket::before, .w--ticket::after {
  content: ''; position: absolute; right: 80px; width: 8px; height: 8px;
  background: var(--bg); border-radius: 50%;
}
.w--ticket::before { top: -4px; }
.w--ticket::after  { bottom: -4px; }

.w--tape {
  background: var(--paper);
  border-color: var(--hairline);
  position: relative;
}
.w--tape::before {
  content: ''; position: absolute; top: -10px; left: 28px; right: 28px; height: 22px;
  background: var(--amber-tint);
  border: 1px dashed var(--rust-soft);
  transform: rotate(-0.6deg);
  box-shadow: 0 2px 4px rgba(40,30,10,0.08);
  z-index: 0;
}

.w--speckle {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, var(--hairline) 0.5px, transparent 1px),
    radial-gradient(circle at 70% 60%, var(--hairline-2) 0.4px, transparent 1px),
    radial-gradient(circle at 40% 80%, var(--hairline) 0.5px, transparent 1px);
  background-size: 24px 24px, 18px 18px, 30px 30px;
}

.w--grid {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--hairline) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--hairline) 0.5px, transparent 0.5px);
  background-size: 16px 16px;
}

.w--ledger {
  background-color: var(--paper);
  background-image: linear-gradient(var(--green-soft) 0.5px, transparent 0.5px);
  background-size: 100% 22px;
  background-position: 0 16px;
}

.w--stripe {
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(74,67,56,0.025) 12px 13px),
    var(--paper);
}

.w--gradient-warm { background: linear-gradient(135deg, var(--amber-tint) 0%, var(--rust-tint) 100%); }
.w--gradient-cool { background: linear-gradient(135deg, var(--indigo-tint) 0%, var(--plum-tint) 100%); }
.w--gradient-fresh{ background: linear-gradient(160deg, var(--green-tint) 0%, var(--paper) 60%); }

/* ════════════ TYPE TOKENS ════════════ */
.w-display    { font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: -0.02em; }
.w-stencil    { font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.w-overhang   { letter-spacing: -0.06em; line-height: 0.9; }
.w-text-shadow{ text-shadow: 2px 2px 0 var(--paper-3); }

.w-numeral-xl { font-family: var(--f-mono); font-weight: 300; font-size: 120px; letter-spacing: -0.07em; line-height: 0.85; }
.w-numeral-l  { font-family: var(--f-mono); font-weight: 400; font-size: 72px;  letter-spacing: -0.05em; line-height: 0.9; }

.w-watermark {
  position: absolute; pointer-events: none;
  font-family: var(--f-mono); font-weight: 300;
  font-size: 220px; letter-spacing: -0.08em; line-height: 0.85;
  color: var(--paper-3); opacity: 0.55;
  right: -10px; bottom: -30px; user-select: none;
}

/* ════════════ MOTION TOKENS ════════════ */
.w-anim-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: w-draw 2s cubic-bezier(.6,.04,.2,1) forwards;
}
@keyframes w-draw { to { stroke-dashoffset: 0; } }

.w-anim-fill {
  animation: w-fill 1.4s cubic-bezier(.6,.04,.2,1) forwards;
  transform-origin: left center;
}
@keyframes w-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.w-anim-rise {
  transform-origin: bottom center;
  animation: w-rise 1.2s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes w-rise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.w-anim-breath { animation: w-breath 4s ease-in-out infinite; }
@keyframes w-breath {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.04); opacity: 0.92;}
}

.w-anim-orbit { animation: w-orbit 20s linear infinite; transform-origin: center; }
@keyframes w-orbit { to { transform: rotate(360deg); } }

.w-anim-tick { animation: w-tick 1.2s steps(2, jump-none) infinite; }
@keyframes w-tick {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.18; }
}

.w-anim-cursor::after {
  content: '▍'; margin-left: 2px; color: currentColor;
  animation: w-cursor 1s steps(2) infinite;
}
@keyframes w-cursor { 50% { opacity: 0; } }

.w-anim-sweep {
  position: relative; overflow: hidden;
}
.w-anim-sweep::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: w-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes w-sweep { to { transform: translateX(100%); } }

.w-anim-marquee {
  display: inline-flex; gap: 24px; white-space: nowrap;
  animation: w-marquee 18s linear infinite;
}
@keyframes w-marquee { to { transform: translateX(-50%); } }

.w-anim-twinkle { animation: w-twinkle 2s ease-in-out infinite; }
.w-anim-twinkle:nth-child(2n) { animation-delay: 0.4s; }
.w-anim-twinkle:nth-child(3n) { animation-delay: 0.9s; }
.w-anim-twinkle:nth-child(5n) { animation-delay: 1.5s; }
@keyframes w-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; transform: scale(1.2); }
}

.w-anim-drift { animation: w-drift 8s ease-in-out infinite; }
@keyframes w-drift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(2px, -2px); }
  50%      { transform: translate(-1px, 1px); }
  75%      { transform: translate(1px, 2px); }
}

.w-anim-wobble { animation: w-wobble 5s ease-in-out infinite; transform-origin: center; }
@keyframes w-wobble {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(2.5deg); }
  75%      { transform: rotate(-2deg); }
}

[data-countup-to] {
  font-variant-numeric: tabular-nums;
}

.w-anim-flow {
  stroke-dasharray: 4 6;
  animation: w-flow 1.2s linear infinite;
}
@keyframes w-flow { to { stroke-dashoffset: -10; } }

.w-anim-type {
  display: inline-block; white-space: nowrap; overflow: hidden;
  border-right: 2px solid currentColor;
  animation: w-type 2.6s steps(40, end) forwards, w-cursor 1s steps(2) infinite;
}
@keyframes w-type { from { width: 0; } to { width: 100%; } }

.w-anim-glow {
  box-shadow: 0 0 0 0 currentColor;
  animation: w-glow 2s ease-in-out infinite;
}
@keyframes w-glow {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 6px transparent; opacity: 0.85; }
}

.w-anim-shake { animation: w-shake 0.7s cubic-bezier(.36,.07,.19,.97) infinite; }
@keyframes w-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-1px); }
  20%, 40%, 60%, 80%      { transform: translateX(1px); }
}

/* ════════════ PATTERN PRIMITIVES ════════════ */
.w-corner-mark { position: absolute; width: 12px; height: 12px; border: 1.5px solid currentColor; }
.w-corner-mark.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.w-corner-mark.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.w-corner-mark.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.w-corner-mark.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.w-tag {
  display: inline-block; padding: 2px 8px;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 2px;
}
.w-tag--ok   { background: var(--green-2); }
.w-tag--warn { background: var(--rust-2);  }
.w-tag--bad  { background: var(--wine-2);  }
.w-tag--cool { background: var(--indigo);  }
.w-tag--hot  { background: var(--plum);    }

.w-hatched {
  background-image: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 5px);
  opacity: 0.4;
}

.w-rosette {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  background:
    conic-gradient(from 0deg, currentColor 0 10deg, transparent 10deg 30deg, currentColor 30deg 40deg, transparent 40deg 60deg, currentColor 60deg 70deg, transparent 70deg 90deg, currentColor 90deg 100deg, transparent 100deg 120deg, currentColor 120deg 130deg, transparent 130deg 150deg, currentColor 150deg 160deg, transparent 160deg 180deg, currentColor 180deg 190deg, transparent 190deg 210deg, currentColor 210deg 220deg, transparent 220deg 240deg, currentColor 240deg 250deg, transparent 250deg 270deg, currentColor 270deg 280deg, transparent 280deg 300deg, currentColor 300deg 310deg, transparent 310deg 330deg, currentColor 330deg 340deg, transparent 340deg 360deg);
  border-radius: 50%;
  position: relative;
}
.w-rosette::after {
  content: ''; position: absolute; inset: 8px;
  background: var(--paper); border-radius: 50%;
}
.w-rosette > * { position: relative; z-index: 1; }