/* Felt Trainer embed skin. Kept separate from the full site shell so widgets
   stay compact inside third-party iframes while retaining the brand system. */
:root {
  --bg: #f4ecdf;
  --surface: #fffaf0;
  --surface-2: #efe3d2;
  --border: #c7b8a3;
  --text: #10272f;
  --text-muted: #596a70;
  --text-dim: #667274;
  --green: #167673;
  --red: #c03730;
  --gold: #8e6a22;
  --felt: #116b55;
}

html,
body { background: var(--bg); color: var(--text); }

body {
  font-family: 'Manrope', system-ui, sans-serif;
  border-top: 4px solid var(--red);
  padding: 16px;
}

.w-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.w-field label,
.w-result-label,
.bjd-label { color: var(--text-dim); font-weight: 800; }

.w-field input,
.w-field select,
.bjd-action {
  min-height: 44px;
  border-radius: 4px;
  background: #fffdf7;
  color: var(--text);
  border-color: var(--border);
  font-family: 'Manrope', system-ui, sans-serif;
}

.w-result {
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 3px 4px 0 rgba(16,39,47,.1);
}

.w-result-value { color: var(--text); }
.edge-good,
.bjd-feedback.bjd-ok { color: #0f6663; }
.edge-bad,
.bjd-feedback.bjd-no { color: var(--red); }

.bjd-table {
  border: 2px solid #8d6a35;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.13), transparent 58%),
    var(--felt);
  box-shadow: 4px 5px 0 rgba(16,39,47,.18);
}

.bjd-label { color: rgba(255,250,240,.82); }
.bjd-card { border-radius: 4px; box-shadow: 2px 3px 0 rgba(0,0,0,.2); }
.bjd-action { background: var(--surface); }
.bjd-action:hover:not(:disabled) { border-color: var(--green); }
.bjd-action.bjd-right { color: #0f6663; background: rgba(22,118,115,.12); }
.bjd-action.bjd-wrong { color: var(--red); background: rgba(192,55,48,.1); }

.bjd-next {
  min-height: 44px;
  border-radius: 4px;
  background: var(--red);
  color: white;
  box-shadow: 3px 4px 0 #10272f;
  font-family: 'Manrope', system-ui, sans-serif;
}

.w-foot a { color: var(--red); }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; }
}