/* ============================================================
   DWD Free Tools — shared UI
   Uses dwd-glass theme tokens (light + dark) with fallbacks, so the
   tools also look right under another theme.
   ============================================================ */
.dwd-tool, .dwd-tool-faq {
  --t-teal: var(--teal, #00D4AA);
  --t-teal-dim: var(--teal-dim, rgba(0,212,170,.15));
  --t-fill: var(--teal-fill, #00D4AA);
  --t-fill-end: var(--teal-fill-end, #00B894);
  --t-on-fill: var(--on-teal, #000);
  --t-red: var(--red, #FF4757);
  --t-red-dim: var(--red-dim, rgba(255,71,87,.12));
  --t-amber: var(--amber, #FFAB00);
  --t-amber-dim: var(--amber-dim, rgba(255,171,0,.12));
  --t-text: var(--text, #E8E8F0);
  --t-dim: var(--text-dim, #8888A0);
  --t-muted: var(--text-muted, #7C7C96);
  --t-glass: var(--glass, rgba(255,255,255,.04));
  --t-border: var(--glass-border, rgba(255,255,255,.08));
  --t-border-strong: var(--border-strong, rgba(255,255,255,.15));
  --t-tint: var(--tint-2, rgba(255,255,255,.05));
  --t-input: var(--input-bg, rgba(255,255,255,.05));
  --t-shadow: var(--card-shadow, none);
  --t-font: var(--font, system-ui, sans-serif);
  --t-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-family: var(--t-font); color: var(--t-text); line-height: 1.6;
}
.dwd-tool { margin: 32px 0 40px; }
.dwd-tool [hidden] { display: none !important; }
div.dwd-tool p { margin: 0; }
div.dwd-tool ul, div.dwd-tool ol { margin: 0; padding: 0; list-style: none; }
.dwd-tool .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* Card */
.dwd-tool-app {
  background: var(--t-glass); border: 1px solid var(--t-border); border-radius: 20px;
  padding: 28px; box-shadow: var(--t-shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.dwd-tool .dwd-tool-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--t-muted); margin: 0 0 12px; }

/* Tabs */
.dwd-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 24px; padding: 4px; border-radius: 14px; background: var(--t-tint); border: 1px solid var(--t-border); width: fit-content; max-width: 100%; }
.dwd-tabs [role="tab"] {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 600 14px/1 var(--t-font); color: var(--t-dim);
  padding: 10px 16px; border-radius: 10px; transition: background .15s, color .15s;
}
.dwd-tabs [role="tab"]:hover { color: var(--t-text); }
.dwd-tabs [role="tab"][aria-selected="true"] { background: var(--t-teal-dim); color: var(--t-teal); }
.dwd-tabs [role="tab"]:focus-visible { outline: 2px solid var(--t-teal); outline-offset: 2px; }

/* Output box (generated value) */
.dwd-output {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 14px 14px 18px; border-radius: 14px;
  background: var(--t-input); border: 1px solid var(--t-border-strong);
}
.dwd-output-value {
  flex: 1 1 260px; min-width: 0; border: 0; background: none; outline: none; padding: 0;
  font: 600 clamp(17px, 2.4vw, 22px)/1.4 var(--t-mono); color: var(--t-text);
  overflow-wrap: anywhere; word-break: break-all; user-select: all; -webkit-user-select: all; min-height: 1.4em;
}
.dwd-output-value:focus-visible { outline: 2px solid var(--t-teal); outline-offset: 4px; border-radius: 4px; }
.dwd-output-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* Buttons */
.dwd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  appearance: none; cursor: pointer; text-decoration: none;
  font: 700 14px/1 var(--t-font); padding: 11px 18px; border-radius: 11px;
  border: 1px solid var(--t-border-strong); background: var(--t-tint); color: var(--t-text);
  transition: transform .15s, background .15s, border-color .15s;
}
.dwd-btn:hover { border-color: var(--t-teal); }
.dwd-btn:focus-visible { outline: 2px solid var(--t-teal); outline-offset: 2px; }
.dwd-btn--primary { background: linear-gradient(135deg, var(--t-fill), var(--t-fill-end)); color: var(--t-on-fill); border-color: transparent; }
.dwd-btn--primary:hover { transform: translateY(-1px); border-color: transparent; }
.dwd-btn.is-done { border-color: var(--t-teal); color: var(--t-teal); }
.dwd-btn--primary.is-done { color: var(--t-on-fill); }
.dwd-btn svg { flex: 0 0 auto; }
.dwd-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
/* Links styled as buttons: outrank the theme's article link style (.article-content a),
   which would otherwise give them teal text and an underline border. */
.dwd-tool a.dwd-btn { color: var(--t-text); border: 1px solid var(--t-border-strong); text-decoration: none; }
.dwd-tool a.dwd-btn:hover { border-color: var(--t-teal); }
.dwd-tool a.dwd-btn--primary, .dwd-tool a.dwd-btn--primary:hover { color: var(--t-on-fill); border-color: transparent; }

/* Meter + facts under an output */
.dwd-meter { margin-top: 14px; }
.dwd-meter-bar { height: 6px; border-radius: 6px; background: var(--t-tint); overflow: hidden; }
.dwd-meter-bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--t-red); transition: width .25s, background .25s; }
.dwd-meter[data-level="2"] .dwd-meter-bar span { background: var(--t-amber); }
.dwd-meter[data-level="3"] .dwd-meter-bar span,
.dwd-meter[data-level="4"] .dwd-meter-bar span { background: var(--t-teal); }
.dwd-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13.5px; color: var(--t-dim); }
.dwd-facts strong { color: var(--t-text); font-weight: 700; }

/* Options */
.dwd-options { display: grid; gap: 18px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--t-border); }
.dwd-field { display: grid; gap: 8px; }
.dwd-field > label, .dwd-field > .dwd-field-label { font-size: 14px; font-weight: 600; color: var(--t-text); }
.dwd-field-hint { font-size: 13px; color: var(--t-muted); }
.dwd-range-row { display: flex; align-items: center; gap: 14px; }
.dwd-range-row input[type="range"] { flex: 1; accent-color: var(--t-fill); min-width: 0; }
.dwd-range-row output { min-width: 3ch; text-align: right; font: 700 15px/1 var(--t-mono); color: var(--t-teal); }
.dwd-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.dwd-check { position: relative; cursor: pointer; }
.dwd-check input { position: absolute; opacity: 0; pointer-events: none; }
.dwd-check span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--t-border); background: var(--t-tint); font-size: 13.5px; font-weight: 600; color: var(--t-dim);
  transition: border-color .15s, background .15s, color .15s;
}
.dwd-check span::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--t-border-strong); flex: 0 0 auto; transition: all .15s; }
.dwd-check input:checked + span { border-color: var(--t-teal); color: var(--t-text); background: var(--t-teal-dim); }
.dwd-check input:checked + span::before { background: var(--t-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; border-color: var(--t-fill); }
.dwd-check input[type="radio"] + span::before { border-radius: 50%; }
.dwd-check input:focus-visible + span { outline: 2px solid var(--t-teal); outline-offset: 2px; }
.dwd-check input:disabled + span { opacity: .45; cursor: not-allowed; }
.dwd-select, .dwd-input {
  font: 500 15px/1.3 var(--t-font); color: var(--t-text); background: var(--t-input);
  border: 1px solid var(--t-border-strong); border-radius: 11px; padding: 11px 14px; width: 100%; max-width: 100%;
}
.dwd-input--mono { font-family: var(--t-mono); }
.dwd-select:focus-visible, .dwd-input:focus-visible { outline: 2px solid var(--t-teal); outline-offset: 1px; border-color: transparent; }
.dwd-select option { color: #111; }
.dwd-input-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dwd-input-row .dwd-input { flex: 1 1 240px; width: auto; }

/* Three-state results */
.dwd-status {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--t-border); background: var(--t-tint);
}
.dwd-status-icon {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 800 14px/1 var(--t-font); background: var(--t-tint); color: var(--t-dim);
}
.dwd-status-text { display: grid; gap: 2px; font-size: 14.5px; color: var(--t-dim); }
.dwd-status-text strong { color: var(--t-text); font-size: 15px; }
.dwd-status[data-state="pass"] { border-color: var(--t-teal); background: var(--t-teal-dim); }
.dwd-status[data-state="pass"] .dwd-status-icon { background: var(--t-fill); color: var(--t-on-fill); }
.dwd-status[data-state="fail"] { border-color: var(--t-red); background: var(--t-red-dim); }
.dwd-status[data-state="fail"] .dwd-status-icon { background: var(--t-red); color: #fff; }
.dwd-status[data-state="unknown"] { border-color: var(--t-amber); background: var(--t-amber-dim); }
.dwd-status[data-state="unknown"] .dwd-status-icon { background: var(--t-amber); color: #000; }

/* Notices */
.dwd-tool-notice { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--t-border); background: var(--t-tint); font-size: 15px; color: var(--t-dim); }
.dwd-tool-notice strong { color: var(--t-text); }
.dwd-tool-notice--warn { border-color: var(--t-amber); background: var(--t-amber-dim); }
.dwd-tool-notice--error { border-color: var(--t-red); background: var(--t-red-dim); }
.dwd-tool-notice-links { display: block; margin-top: 8px; }
.dwd-tool-notice a { color: var(--t-teal); }
.dwd-tool-app > .dwd-tool-notice + * { margin-top: 18px; }

/* Under the card */
.dwd-tool .dwd-tool-privacy { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--t-muted); }
.dwd-tool-privacy svg { color: var(--t-teal); flex: 0 0 auto; }
.dwd-tool-next {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; margin-top: 22px;
  padding: 18px 22px; border-radius: 16px; border: 1px solid var(--t-border); background: var(--t-glass);
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.dwd-tool-next:hover { border-color: var(--t-teal); transform: translateY(-1px); }
.dwd-tool a.dwd-tool-next { color: var(--t-text); border: 1px solid var(--t-border); }
.dwd-tool a.dwd-tool-next:hover { border-color: var(--t-teal); }
.dwd-tool-next-label { grid-column: 1; font: 700 11px/1.4 var(--t-mono); text-transform: uppercase; letter-spacing: 1px; color: var(--t-teal); }
.dwd-tool-next strong { grid-column: 1; font-size: 16.5px; }
.dwd-tool-next-desc { grid-column: 1; font-size: 14px; color: var(--t-dim); }
.dwd-tool-next-arrow { grid-column: 2; grid-row: 1 / span 3; font-size: 22px; color: var(--t-teal); }

/* FAQ */
.dwd-tool-faq { margin: 40px 0; }
.dwd-tool-faq h2 { margin-bottom: 16px; }
.dwd-tool-faq-item { border: 1px solid var(--t-border); border-radius: 14px; background: var(--t-glass); margin-bottom: 10px; }
.dwd-tool-faq-item summary { cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.dwd-tool-faq-item summary::-webkit-details-marker { display: none; }
.dwd-tool-faq-item summary::after { content: '+'; color: var(--t-teal); font-size: 20px; line-height: 1; }
.dwd-tool-faq-item[open] summary::after { content: '−'; }
.dwd-tool-faq-item summary:focus-visible { outline: 2px solid var(--t-teal); outline-offset: 2px; border-radius: 14px; }
.dwd-tool-faq-item > div { padding: 0 20px 16px; color: var(--t-dim); font-size: 15.5px; }
.dwd-tool-faq-item > div p { margin: 0 0 10px; }
.dwd-tool-faq-item > div p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .dwd-tool-app { padding: 20px 16px; border-radius: 16px; }
  .dwd-tabs { width: 100%; }
  .dwd-tabs [role="tab"] { flex: 1 1 auto; padding: 10px 10px; font-size: 13.5px; }
  .dwd-output { padding: 12px; }
  .dwd-output-actions { width: 100%; }
  .dwd-output-actions .dwd-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dwd-tool *, .dwd-tool-faq * { transition: none !important; }
}