/* ==========================================================================
   URL Filter demo page — extra styles only.
   Everything else (fonts, colors, buttons, navbar, footer, theme) comes from
   ../css/style.css. This file only reuses its design tokens (var(--...)).
   ========================================================================== */

:root{
  --demo-safe: #34D399;
  --demo-warn: #F5B84B;
  --demo-bad:  #E5675E;   /* same red the contact form uses for errors */
}
[data-theme="light"]{
  --demo-safe: #0F9D6B;
  --demo-warn: #B7791F;
  --demo-bad:  #C9483F;
}

.demo-section{ padding-top: calc(var(--nav-h) + 48px); }
.demo-back{ margin-bottom: 36px; padding: 10px 20px; }
.demo-back-bottom{ margin: 44px 0 0; }
.demo-lead{ max-width: 620px; }

.demo-grid{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 22px;
  align-items: start;
}
.demo-info{ display: flex; flex-direction: column; gap: 22px; }

/* ---- cards (same look as .project-card / .cert-card) ---- */
.demo-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 26px;
}
.demo-card-title{ font-size: 1.1rem; margin-bottom: 10px; }
.demo-muted{ color: var(--text-muted); font-size: 0.92rem; margin: 0 0 16px; }
.demo-small{ font-size: 0.82rem; }

/* ---- request flow ---- */
.demo-flow{ display: grid; gap: 10px; counter-reset: flow; margin: 0; padding: 0; }
.demo-flow li{
  counter-increment: flow;
  position: relative;
  display: flex; flex-direction: column;
  padding: 12px 14px 12px 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-size: 0.9rem;
}
.demo-flow li::before{
  content: counter(flow);
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--cyan);
  border: 1px solid var(--border-strong);
}
.demo-flow li span{ color: var(--text-muted); font-size: 0.8rem; }

/* ---- the seven checks ---- */
.demo-checks{ display: grid; gap: 12px; margin: 0 0 18px; padding: 0; }
.demo-checks li{ display: flex; gap: 14px; align-items: flex-start; font-size: 0.88rem; color: var(--text-muted); }
.demo-checks strong{ color: var(--text); display: block; font-weight: 500; }
.demo-checks code, .demo-loading code{ font-family: var(--font-mono); font-size: 0.8rem; }
.demo-pts{
  flex: 0 0 auto; min-width: 46px; text-align: center;
  font-family: var(--font-mono); font-size: 0.74rem;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--violet);
}

/* ---- tool card ---- */
.demo-tool{ position: sticky; top: calc(var(--nav-h) + 16px); }
.demo-tool-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.demo-tool-head .demo-card-title{ margin: 0; }

.demo-status{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted);
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
}
.demo-status-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
.demo-status[data-state="online"] .demo-status-dot{ background: var(--demo-safe); }
.demo-status[data-state="offline"] .demo-status-dot{ background: var(--demo-bad); }
.demo-status[data-state="checking"] .demo-status-dot{ animation: demoPulse 1.2s ease-in-out infinite; }
@keyframes demoPulse{ 50%{ opacity: .25; } }

.demo-tool textarea{ min-height: 110px; }
.demo-field-foot{ display: flex; justify-content: space-between; gap: 12px; }
.demo-count{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }

.demo-examples{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 18px; }
.demo-chip{
  font-size: 0.78rem; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.demo-chip:hover{ background: var(--bg-card-hover); color: var(--text); border-color: var(--border-strong); }

.demo-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.demo-actions .btn{ padding: 12px 24px; }
.btn[disabled]{ opacity: .6; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.demo-spinner{
  display: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: demoSpin .7s linear infinite;
}
.is-loading .demo-spinner{ display: inline-block; }
@keyframes demoSpin{ to{ transform: rotate(360deg); } }

/* ---- loading / error ---- */
.demo-loading{
  margin-top: 20px; padding: 14px 16px; font-size: 0.88rem; color: var(--text-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-s);
}
.demo-error{
  margin-top: 20px; padding: 14px 16px; font-size: 0.9rem;
  border: 1px solid var(--demo-bad); border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--demo-bad) 10%, transparent);
}
.demo-error strong{ color: var(--demo-bad); }
.demo-error p{ margin: 6px 0 0; color: var(--text-muted); }

/* ---- result ---- */
.demo-result{ margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); --demo-accent: var(--text-muted); }
.demo-result[data-level="safe"]{ --demo-accent: var(--demo-safe); }
.demo-result[data-level="suspicious"]{ --demo-accent: var(--demo-warn); }
.demo-result[data-level="spam"]{ --demo-accent: var(--demo-bad); }
.demo-result[data-level="info"]{ --demo-accent: var(--blue); }

.demo-verdict-row{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.demo-verdict-label{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }
.demo-verdict{
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em;
  padding: 8px 18px; border-radius: 999px;
  color: var(--demo-accent);
  border: 1px solid var(--demo-accent);
  background: color-mix(in srgb, var(--demo-accent) 12%, transparent);
}

.demo-meter{ position: relative; height: 8px; border-radius: 999px; background: var(--bg-card-hover); overflow: hidden; }
.demo-meter-fill{ height: 100%; width: 0; background: var(--demo-accent); border-radius: 999px; transition: width .6s var(--ease); }
.demo-meter-mark{ position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.demo-score{ font-size: 0.86rem; color: var(--text-muted); margin: 10px 0 18px; }

.demo-details{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.demo-details div{ padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-s); min-width: 0; }
.demo-details dt{ font-size: 0.72rem; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 4px; }
.demo-details dd{ margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }

.demo-note{
  font-size: 0.82rem; color: var(--text-muted); margin: 0 0 18px; padding: 12px 14px;
  border-left: 2px solid var(--demo-warn); background: var(--bg-card); border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.demo-layers-title{ font-size: 0.95rem; margin-bottom: 10px; }
.demo-layers{ display: grid; gap: 8px; margin: 0; padding: 0; }
.demo-layers li{
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.84rem; color: var(--text-muted);
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-s);
}
.demo-layer-tag{
  flex: 0 0 auto; min-width: 58px; text-align: center;
  font-family: var(--font-mono); font-size: 0.68rem; padding: 3px 8px; border-radius: 999px;
  border: 1px solid currentColor;
}
.demo-layer-tag[data-status="pass"]{ color: var(--demo-safe); }
.demo-layer-tag[data-status="fail"]{ color: var(--demo-bad); }
.demo-layer-tag[data-status="warn"], .demo-layer-tag[data-status="unsure"]{ color: var(--demo-warn); }
.demo-layer-text{ overflow-wrap: anywhere; }
.demo-layer-text b{ color: var(--text); font-weight: 500; }

/* ---- responsive ---- */
@media (max-width: 980px){
  .demo-grid{ grid-template-columns: 1fr; }
  .demo-tool{ position: static; }
  /* On phones: "How this demo works" -> the tool -> the long list of 7 checks */
  .demo-info{ display: contents; }
  .demo-info .demo-card:first-child{ order: 1; }
  .demo-tool{ order: 2; }
  .demo-info .demo-card:last-child{ order: 3; }
}
@media (max-width: 480px){
  .demo-card{ padding: 20px; }
  .demo-details{ grid-template-columns: 1fr; }
  .demo-tool-head{ flex-wrap: wrap; }
}