/* ========================================================================
   Vile‑Analyziz – Global design system (va.css)
   ======================================================================== */

/* ---- Tokens ----------------------------------------------------------- */
:root {
  /* Layout */
  --va-container: clamp(1024px, 95vw, 1360px);
  --va-gutter: clamp(16px, 3vw, 32px);

  /* Brand & neutrals (WP presets as fallbacks) */
  --va-brand: var(--wp--preset--color--va-brand, #1166ff);
  --va-bg:    var(--wp--preset--color--va-bg,    #f7f8fb);
  --va-fg:    var(--wp--preset--color--va-fg,    #16181d);

  --va-muted:  #6b7280;
  --va-border: #e5e7eb;
  --va-surface:#ffffff;

  /* Status colors */
  --va-green:   #22c55e;
  --va-amber:   #f59e0b;
  --va-red:     #ef4444;
  --va-neutral: #eef2f7;

  /* Effects */
  --va-radius:       12px;
  --va-shadow-soft:  0 6px 18px rgba(17,24,39,.06);

  /* Typography */
  --va-font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
                  Segoe UI, Roboto, Helvetica, Arial,
                  "Apple Color Emoji","Segoe UI Emoji";
  --va-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", monospace;
}

/* ---- Base ------------------------------------------------------------- */
/* Ensure HTML hidden attribute always wins over explicit display values */
[hidden] { display: none !important; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--va-font-sans);
  color: var(--va-fg);
  background: var(--va-bg);
}

/* Sticky footer layout when body has .va */
body.va {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body.va > header.va-header { flex: 0 0 auto; }
body.va > main,
body.va > .site-content,
body.va > .wp-site-blocks { flex: 1 0 auto; }
body.va > footer.va-footer {
  margin-top: auto;
  flex: 0 0 auto;
}

/* ---- Layout primitives ------------------------------------------------ */
.va-container {
  max-width: var(--va-container);
  margin: 1.25rem auto 2rem;
  padding: 0 var(--va-gutter);
  box-sizing: border-box;
}

/* Cards */
.va-card {
  background: var(--va-surface);
  border: 1px solid var(--va-border);
  border-radius: var(--va-radius);
  box-shadow: var(--va-shadow-soft);
  padding: 1.25rem 1.5rem;
}
.va-card + .va-card { margin-top: 1rem; }
.va-card > * + * { margin-top: 1rem; }
.va-card .va-card {
  border: 0;
  box-shadow: none;
  background: #fff;
  padding: 1.25rem;
}

/* Typography */
.va-title {
  margin: .25rem 0 1rem;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 800;
}
.va-subtle { color: var(--va-muted); }

/* Arbitrary content pages (privacy, terms, roadmap, releases, etc.)
   Covers all WordPress block editor output rendered via page.php. */
.va-content {
  line-height: 1.65;
  font-size: 1rem;
}
.va-content p { margin: 0 0 1rem; }
.va-content h1 { font-size: 1.75rem; margin: 2.5rem 0 .75rem; font-weight: 800; }
.va-content h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; font-weight: 700; }
.va-content h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; font-weight: 700; }
.va-content h4 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; font-weight: 600; }
.va-content ul,
.va-content ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.va-content li + li { margin-top: .25rem; }
.va-content a { color: var(--va-brand); text-decoration: underline; }
.va-content a:hover { color: #0d5bdb; }
.va-content strong { font-weight: 700; }
.va-content em { font-style: italic; }
.va-content blockquote {
  border-left: 3px solid var(--va-border);
  padding: .5rem 1rem;
  margin: 1rem 0;
  color: var(--va-muted);
}
.va-content code {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .1rem .35rem;
  font-family: var(--va-font-mono);
}
.va-content pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  overflow: auto;
}
.va-content pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

/* WordPress block: tables */
.va-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}
.va-content th,
.va-content td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--va-border);
  text-align: left;
}
.va-content th {
  font-weight: 600;
  font-size: .85rem;
  color: #334155;
}

/* WordPress block: images & figures */
.va-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.va-content figure {
  margin: 1.5rem 0;
}
.va-content figcaption {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--va-muted);
  text-align: center;
}

/* WordPress block: separator / horizontal rule */
.va-content hr {
  border: 0;
  height: 1px;
  background: var(--va-border);
  margin: 2rem 0;
}

/* WordPress block: buttons */
.va-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: .5rem .9rem;
  border-radius: .5rem;
  background: var(--va-brand);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
}
.va-content .wp-block-button__link:hover {
  background: #0d5bdb;
  color: #fff;
}

/* WordPress block: columns (keep side-by-side on wide screens) */
.va-content .wp-block-columns {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
}
.va-content .wp-block-column {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .va-content .wp-block-columns {
    flex-direction: column;
  }
}

/* WordPress block: quote variations */
.va-content .wp-block-quote.is-style-large {
  font-size: 1.15rem;
  border-left-width: 4px;
}

/* WordPress block: details/accordion (WP 6.3+) */
.va-content details {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--va-border);
  border-radius: 8px;
  background: #fafbfc;
}
.va-content details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--va-fg);
}

/* First element in content should not have top margin */
.va-content > :first-child { margin-top: 0; }

/* ---- Header & footer -------------------------------------------------- */
.va-header {
  position: relative;
  border-bottom: 1px solid var(--va-border);
  background: #fff;
}
.va-header-inner,
.va-footer-inner {
  max-width: var(--va-container);
  margin: 0 auto;
  padding: 0.75rem var(--va-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.va-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  text-decoration: none;
  color: #111827;
}
.va-brand img { display: block; width: 28px; height: 28px; border-radius: 6px; }

.va-nav {
  display: flex;
  align-items: center;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Auth pill / header nav buttons */
.va-nav a,
.va-auth-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.va-nav a:hover,
.va-auth-a:hover {
  background: #f3f4f6;
}

/* Skip to content */
.va-skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; z-index: 9999;
}
.va-skip-link:focus {
  position: fixed; top: .5rem; left: .5rem;
  width: auto; height: auto; padding: .5rem 1rem;
  background: var(--va-brand); color: #fff; border-radius: 8px; font-weight: 600;
}

/* Active nav link */
.va-nav a[aria-current="page"] {
  background: var(--va-brand); color: #fff; border-color: var(--va-brand);
}

/* Mobile hamburger */
.va-nav-toggle {
  display: none; appearance: none; background: none;
  border: 1px solid var(--va-border); border-radius: 8px;
  padding: .4rem .55rem; cursor: pointer; color: var(--va-fg);
}
@media (max-width: 768px) {
  .va-nav-toggle { display: flex; align-items: center; }
  .va-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: #fff;
    border-bottom: 1px solid var(--va-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: .75rem var(--va-gutter); gap: .25rem; z-index: 100;
  }
  .va-nav.is-open { display: flex; }
  .va-nav a {
    width: 100%; justify-content: flex-start;
    border-radius: 8px; border: none; box-shadow: none;
  }
}
@media (max-width: 600px) {
  .va-nav a {
    padding: .45rem .75rem;
    font-size: .85rem;
  }
}

.va-footer {
  border-top: 1px solid var(--va-border);
  background: #fafafa;
  color: var(--va-muted);
  font-size: .85rem;
}
.va-footer-nav a {
  margin-left: 1rem;
  color: inherit;
  text-decoration: none;
}
.va-footer-nav a:hover,
.va-nav a:hover { text-decoration: underline; }

.site-footer {
  margin: 2rem auto 1rem;
  color: var(--va-muted);
  font-size: .875rem;
  text-align: center;
}
.site-footer a { color: inherit; text-decoration: underline; }

/* ---- Auth visibility helpers ----------------------------------------- */
.va-auth-only,
.va-anon-only { display: none; }

/* ---- Buttons & inputs ------------------------------------------------- */
.va-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border-radius: .5rem;
  border: 1px solid #d1d5db;
  background: #111827;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .05s ease;
}
.va-btn.primary {
  background: var(--va-brand);
  border-color: var(--va-brand);
}
.va-btn.ghost {
  background: #fff;
  color: var(--va-brand);
  border-color: #d1d5db;
}
.va-btn.sm {
  padding: .25rem .6rem;
  font-size: .82rem;
  border-radius: 999px;
}
.va-btn.danger { background: var(--va-red); border-color: var(--va-red); color: #fff; }
.va-btn.danger:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; }
.va-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.va-btn:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(15,23,42,.15);
  transform: translateY(-0.5px);
}
.va-btn:active:not(:disabled) {
  transform: translateY(0);
}

/* Inputs */
.va-input,
.va-card input[type="search"],
.va-card input[type="text"],
.va-card input[type="email"],
.va-card input[type="number"],
.va-card select,
.va-card textarea {
  width: 100%;
  padding: .6rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--va-border);
  background: #fff;
  color: #111827;
  font: inherit;
}
.va-input::placeholder,
.va-card input::placeholder { color: #9ca3af; }
.va-input:focus,
.va-card input:focus,
.va-card select:focus,
.va-card textarea:focus {
  outline: 0;
  border-color: var(--va-brand);
  box-shadow: 0 0 0 3px rgba(17,102,255,.15);
}

/* Dropzone */
.va-drop {
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  background: #fafbfc;
}
.va-drop.dragover {
  border-color: #94a3b8;
  background: #f8fafc;
}

/* ---- Score cards & legend -------------------------------------------- */
.va-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 700px) {
  .va-grid { grid-template-columns: 1fr; }
}

.va-grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 700px) {
  .va-grid.two { grid-template-columns: 1fr; }
}

.va-score {
  position: relative;
  padding: 16px 16px 18px;
  border: 1px solid var(--va-border);
  border-radius: 12px;
  background: #fff;
  border-left: 4px solid var(--va-border);
}
.va-score.ok   { border-left-color: var(--va-green); }
.va-score.warn { border-left-color: var(--va-amber); }
.va-score.bad  { border-left-color: var(--va-red); }
.va-score h3 {
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: #374151;
}
.va-meter {
  position: relative;
  height: 18px;
  background: var(--va-neutral);
  border-radius: 999px;
  overflow: hidden;
}
.va-meter > span {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width .5s ease;
}
.va-score .value {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: .2rem .6rem;
  border-radius: .5rem;
  background: #fff;
  border: 1px solid var(--va-border);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.va-score.ok   .va-meter > span { background: var(--va-green); }
.va-score.warn .va-meter > span { background: var(--va-amber); }
.va-score.bad  .va-meter > span { background: var(--va-red); }

.va-score .va-verdict { margin-top: .4rem; font-weight: 700; }
.va-score.ok   .va-verdict { color: #166534; }
.va-score.warn .va-verdict { color: #b45309; }
.va-score.bad  .va-verdict { color: #991b1b; }

.va-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: .25rem 0 1rem;
  color: var(--va-muted);
}
.va-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.va-legend .dot.ok   { background: var(--va-green); }
.va-legend .dot.warn { background: var(--va-amber); }
.va-legend .dot.bad  { background: var(--va-red); }

/* ---- Definition lists & vendor panel --------------------------------- */
.va-dl {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: .5rem;
  margin: 0;
}
.va-dl dt { color: var(--va-muted); }
.va-dl dd { margin: 0; }

@media (max-width: 600px) {
  .va-dl {
    grid-template-columns: 1fr;
    row-gap: .15rem;
  }
  .va-dl dt {
    font-weight: 600;
    margin-top: .5rem;
  }
  .va-dl dt:first-child {
    margin-top: 0;
  }
}

/* Collapsible technical details */
.va-advanced summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem 0;
  color: var(--va-brand);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.va-advanced summary::-webkit-details-marker { display: none; }
.va-advanced summary::before {
  content: '\25B6';
  font-size: .65rem;
  transition: transform .2s ease;
}
.va-advanced[open] summary::before {
  transform: rotate(90deg);
}

.va-vendor {
  margin-top: .5rem;
  padding-top: .5rem;
}
.va-vendor h2 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 .25rem;
}
.va-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.va-list li {
  padding: .35rem 0;
  border-bottom: 1px dashed var(--va-border);
}
.va-list li:last-child { border-bottom: 0; }

/* ---- Chips, badges & link lists -------------------------------------- */
.va-badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
}
.va-badge.ok   { background: #e7f8ee; color: #166534; }
.va-badge.warn { background: #fef3c7; color: #92400e; }
.va-badge.bad  { background: #fee2e2; color: #991b1b; }

.va-chip {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--va-border);
  background: #fff;
}
.va-chip.ok      { border-color: #c7f9d0; background: #f0fff4; color: #166534; }
.va-chip.warn    { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.va-chip.danger  { border-color: #fecaca; background: #fff1f2; color: #991b1b; }
.va-chip.neutral { border-color: #d1d5db; background: #f9fafb; color: #6b7280; }

.va-linklist {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.va-linklist a {
  color: var(--va-brand);
  text-decoration: none;
  word-break: break-all;
}
.va-linklist a:hover { text-decoration: underline; }

/* ---- Tables & actions ------------------------------------------------- */
.va-table-wrap { overflow-x: auto; }

.va-table {
  width: 100%;
  border-collapse: collapse;
}
.va-table th,
.va-table td {
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--va-border);
  vertical-align: middle;
  text-align: left;
}
.va-table th {
  font-weight: 600;
  font-size: .85rem;
  color: #334155;
}

/* Right-align the actions column */
.va-table th:last-child,
.va-table td:last-child {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.va-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .75rem 0;
}
.va-table td .va-actions {
  margin: 0;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}

/* ---- Portal tab navigation (Overview/My analyses/Keys) ---------------- */
.va-pnav {
  display: flex;
  gap: .75rem;
  margin: .25rem 0 1rem;
  border-bottom: 1px solid var(--va-border);
}
.va-pnav__link {
  padding: .5rem .75rem;
  border-radius: .5rem;
  text-decoration: none;
  color: #374151;
}
.va-pnav__link:hover { background: #f3f4f6; }
.va-pnav__link.current {
  background: #111827;
  color: #fff;
}

/* ---- Spinner ---------------------------------------------------------- */
.va-spinner { display: inline-flex; gap: .4rem; margin: .75rem 0; }
.va-spinner .dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--va-brand); opacity: .35;
  animation: va-bounce 1.2s infinite ease-in-out;
}
.va-spinner .dot:nth-child(2) { animation-delay: .15s; }
.va-spinner .dot:nth-child(3) { animation-delay: .30s; }
@keyframes va-bounce {
  0%, 80%, 100% { transform: scale(.75); opacity: .25; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ---- Misc helpers ----------------------------------------------------- */
.va-error {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fecaca;
  padding: .5rem .75rem;
  border-radius: .5rem;
}
.va-toolbar {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .5rem 0;
}
.va-toolbar .grow { flex: 1 1 auto; }

.va-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding: .55rem .9rem;
  border-radius: 8px;
  background: var(--va-brand);
  color: #fff;
  text-decoration: none;
}
.va-back:hover { background: #0d5bdb; }

code {
  background: #f6f8fa;
  padding: .15rem .3rem;
  border-radius: 6px;
  font-family: var(--va-font-mono);
}

/* ---- CTA grid (portal overview) --------------------------------------- */
.va-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.va-cta {
  padding: 1.25rem; border: 1px solid var(--va-border);
  border-radius: var(--va-radius); background: var(--va-surface);
}
.va-cta h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; }
.va-cta p  { margin: 0 0 .75rem; color: var(--va-muted); font-size: .9rem; }

/* ---- Fieldset (keys page) --------------------------------------------- */
.va-fieldset {
  border: 1px solid var(--va-border); border-radius: var(--va-radius);
  padding: 1.25rem 1.5rem; margin: 1rem 0; background: #fafbfc;
}
.va-fieldset legend { font-weight: 700; font-size: 1rem; padding: 0 .5rem; }

/* ---- Callout (keys page — API secret display) ------------------------- */
.va-callout {
  padding: .75rem 1rem; border-radius: 8px;
  border: 1px solid #c7dbff; background: #eef4ff; color: #1e40af;
  font-size: .9rem; margin-top: .75rem; word-break: break-all;
}
.va-callout code { background: rgba(255,255,255,.6); font-family: var(--va-font-mono); }

/* ---- Section dividers (agents page) ----------------------------------- */
.va-section { border-top: 1px solid var(--va-border); padding-top: 1.25rem; margin-top: 1.25rem; }
.va-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.va-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.va-section-header h2 { margin: 0; font-size: 1.1rem; }

/* ---- Hint (agents page) ----------------------------------------------- */
.va-hint {
  padding: .5rem .75rem; border-radius: 8px;
  background: #f0f4ff; border: 1px solid #c7dbff;
  color: #1e40af; font-size: .85rem; margin-top: .5rem;
}

/* ---- Page header utility ---------------------------------------------- */
.va-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.va-page-header .va-title { margin: 0; }

/* ---- Empty state placeholder ------------------------------------------ */
.va-empty { text-align: center; padding: 2rem 1rem; color: var(--va-muted); }
.va-empty svg, .va-empty img { display: block; margin: 0 auto .75rem; opacity: .5; }
.va-empty p { margin: .25rem 0; }

/* ---- Collapsible help block (analyses page) --------------------------- */
details.va-help {
  margin: .5rem 0; padding: .75rem 1rem;
  border: 1px solid var(--va-border); border-radius: 8px;
  background: #fafbfc; font-size: .9rem; color: #374151;
}
details.va-help > summary { cursor: pointer; font-weight: 600; color: var(--va-fg); }
details.va-help ul { margin: .5rem 0; padding-left: 1.25rem; }
details.va-help li + li { margin-top: .35rem; }

/* ---- Form labels ------------------------------------------------------ */
.va-card label,
.va-fieldset label {
  display: block;
  margin-bottom: .75rem;
}
.va-card label > span:first-child,
.va-fieldset label > span:first-child {
  display: block;
  margin-bottom: .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: #374151;
}

/* Spacing utilities (replaces frequent inline styles in templates) */
.va-mt-0  { margin-top: 0 !important; }
.va-mb-sm { margin-bottom: .5rem; }
.va-mb-md { margin-bottom: .75rem; }
.va-mt-md { margin-top: .75rem; }
.va-mt-lg { margin-top: 1rem; }
.va-hidden { display: none !important; }