/* Word Check — tool styles. Colors come from design tokens; the yellow ("depends")
   has no global token, so it is defined here as a tool-local token with light/dark values. */
.wc{
  --wc-green: var(--success); --wc-green-soft: var(--success-soft);
  --wc-red: var(--danger);   --wc-red-soft: var(--danger-soft);
  --wc-yellow: #b07d00;      --wc-yellow-soft: rgba(176,125,0,.12);
  max-width: 980px; margin: auto; padding: 34px 22px 80px;
}
:root[data-theme="dark"] .wc{ --wc-yellow:#e6b54a; --wc-yellow-soft:rgba(230,181,74,.16); }

.wc .intro{ margin-bottom: 20px; }
.wc .kicker{ color: var(--g-2); text-transform: uppercase; letter-spacing: 1.2px; font-size: var(--text-micro); font-weight: 700; }
.wc .intro h1{ margin: 9px 0 5px; font-size: clamp(36px,5.4vw,60px); letter-spacing: -2px; }
.wc .intro p{ margin: 0; color: var(--muted); font-size: var(--text-small); max-width: 60ch; }

.card{ padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }

.wc-controls{ display: block; }
.wc-field{ display: block; }
.wc-field > span{ display: block; margin-bottom: 6px; color: var(--g-2); text-transform: uppercase; letter-spacing: .7px; font-size: var(--text-micro); font-weight: 600; }
.wc-field input, .wc-field select{ width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); outline: 0; font: inherit; font-size: var(--text-input); }
.wc-field input:focus, .wc-field select:focus{ border-color: var(--g-2); }

.wc-disclaimer{ margin: 12px 2px 0; color: var(--g-1); font-size: var(--text-micro); line-height: 1.5; }

.wc-results{ margin-top: 16px; display: grid; gap: 12px; }
.wc-empty{ color: var(--g-2); font-size: var(--text-small); padding: 18px 4px; }

.wc-result{ padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wc-result-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-term{ font-size: var(--text-emphasis); font-weight: 700; letter-spacing: -.3px; }
.wc-chip{ font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .5px; color: var(--g-1); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.wc-chip.custom{ color: var(--accent); border-color: var(--accent); }

.wc-headline{ margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: var(--text-small); border: 1px solid transparent; }
.wc-headline .dot{ width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.wc-sev{ color: var(--g-1); }

.v-green{ color: var(--wc-green); background: var(--wc-green-soft); border-color: var(--wc-green); }
.v-yellow{ color: var(--wc-yellow); background: var(--wc-yellow-soft); border-color: var(--wc-yellow); }
.v-red{ color: var(--wc-red); background: var(--wc-red-soft); border-color: var(--wc-red); }

.wc-explain{ margin: 12px 0 0; color: var(--ink-soft); font-size: var(--text-small); line-height: 1.55; }

.wc-groups{ margin-top: 12px; display: grid; gap: 8px; }
.wc-group{ display: flex; gap: 12px; align-items: baseline; }
.wc-group-label{ flex: none; width: 132px; display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-small); font-weight: 700; background: transparent; }
.wc-group-label .dot{ width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.wc-group-markets{ font-size: var(--text-small); color: var(--ink); line-height: 1.5; }
.wc-group-markets .wc-sev{ font-size: var(--text-micro); }

/* Custom words */
.wc-custom{ margin-top: 16px; }
.wc-custom summary{ cursor: pointer; font-weight: 700; font-size: var(--text-emphasis); list-style: none; display: flex; align-items: center; gap: 10px; }
.wc-custom summary::-webkit-details-marker{ display: none; }
.wc-custom summary::before{ content: "▸"; color: var(--g-2); transition: transform .15s ease; }
.wc-custom details[open] summary::before{ transform: rotate(90deg); }
.wc-count{ color: var(--g-2); font-size: var(--text-small); font-weight: 500; }
.wc-custom-intro{ margin: 10px 0 14px; color: var(--g-1); font-size: var(--text-small); line-height: 1.5; }
.wc-form{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: end; }
.wc-form .wc-wide{ grid-column: 1 / -1; }
.wc-add{ grid-column: 1 / -1; justify-self: start; padding: 11px 16px; border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--solid); color: var(--solid-ink); cursor: pointer; text-transform: uppercase; font-size: var(--text-micro); font-weight: 700; }
.wc-custom-list{ margin-top: 14px; display: grid; gap: 8px; }
.wc-custom-item{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.wc-custom-item span{ font-size: var(--text-small); }
.wc-remove{ border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r-sm); padding: 6px 10px; cursor: pointer; font-size: var(--text-micro); font-weight: 600; }
.wc-error{ color: var(--danger); font-size: var(--text-micro); margin: 8px 0 0; }

@media (max-width: 760px){
  .wc{ padding: 24px 12px 60px; }
  .wc-form{ grid-template-columns: 1fr; }
  .wc .intro h1{ font-size: 38px; }
  .wc-result-head .wc-headline{ margin-left: 0; }
  .wc-group{ flex-direction: column; gap: 3px; }
  .wc-group-label{ width: auto; }
}