/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Typography */
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Palette — refined sage-green dark mode with warm accents */
  --bg: #f3f5f0;
  --bg-header: #fbfcf9;
  --surface: #ffffff;
  --surface-hover: #f7faf5;
  --border: #d4ddd6;
  --border-subtle: #e6ece5;
  --text: #1a2e2b;
  --text-secondary: #5e7268;
  --text-muted: #586b5e;
  --accent: #1d6b4f;
  --accent-hover: #145640;
  --accent-glow: rgba(29, 107, 79, 0.08);
  --success: #1b7a53;
  --warning: #8a6510;
  --danger: #b33a2d;
  --focus-ring: #27674e;
  --tag-bg: #ecf2ea;
  --tag-text: #526457;

  /* Depth & Motion */
  --shadow-sm: 0 1px 3px rgba(23, 55, 42, 0.04);
  --shadow-md: 0 4px 20px rgba(23, 55, 42, 0.06);
  --shadow-lg: 0 8px 40px rgba(23, 55, 42, 0.08);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  color: var(--text);
  background: var(--bg);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* ── Header ────────────────────────────────────────────────────────────── */

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 26px;
  color: var(--accent);
  text-decoration: none;
  transition: transform var(--transition-fast);
}
.brand:hover { transform: scale(1.02); }
.brand span {
  font-size: 18px;
  font-weight: 650;
  color: var(--text);
}

.local {
  font-size: 12px;
  color: var(--success);
  border: 1px solid #c8e0cc;
  border-radius: var(--radius-lg);
  padding: 8px 14px;
  background: linear-gradient(135deg, #edf5eb, #e3f0e0);
  animation: pulse-badge 3s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 122, 83, 0.12); }
  50% { box-shadow: 0 0 0 6px rgba(27, 122, 83, 0); }
}

/* ── Main Layout ───────────────────────────────────────────────────────── */
main {
  max-width: 1320px;
  margin: auto;
  padding: 52px 32px 24px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 600;
  letter-spacing: -1.8px;
  line-height: 1.1;
  margin: 18px 0;
  background: linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.intro > p:last-child {
  color: var(--text-secondary);
  line-height: 1.75;
  font-size: 15px;
  margin-bottom: 36px;
}

/* ── Workspace Grid ────────────────────────────────────────────────────── */
.workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  animation: panel-enter 0.5s var(--transition-base) both;
}
.panel:hover {
  box-shadow: var(--shadow-lg);
}

@keyframes panel-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.results-panel { animation-delay: 0.1s; }

/* ── Section Titles ────────────────────────────────────────────────────── */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  gap: 12px;
}

h2 {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0;
}
h2 span {
  color: var(--text);
  font-weight: 650;
  font-size: 16px;
}

/* ── Form Elements ─────────────────────────────────────────────────────── */
label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 18px 0 9px;
}

.muted {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  display: block;
  margin-top: 5px;
}

select, textarea {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
  color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
select:hover, textarea:hover {
  border-color: var(--accent);
}

select { padding: 10px 12px; max-width: 100%; }
#sample { width: 100%; font-size: 13px; }

textarea {
  resize: vertical;
  width: 100%;
  padding: 15px;
  line-height: 1.65;
  font-size: 13px;
  min-height: 150px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
button {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 9px 14px;
  transition: all var(--transition-fast);
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button:hover:enabled {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
button:active:enabled {
  transform: translateY(0);
}

.text-button {
  border: 0;
  padding: 2px;
  color: var(--text-muted);
  background: transparent;
}
.text-button:hover:enabled {
  color: var(--danger);
  background: transparent;
  border: 0;
  transform: none;
}

/* ── Counter ───────────────────────────────────────────────────────────── */
.counter {
  text-align: right;
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 6px;
}

/* ── Headings ──────────────────────────────────────────────────────────── */
h3 {
  font-size: 12px;
  font-weight: 650;
  margin: 25px 0 12px;
}

/* ── Policy Rows ───────────────────────────────────────────────────────── */
.policy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}
.policy-row:hover {
  background: var(--accent-glow);
  border-radius: var(--radius-sm);
  margin: 0 -8px;
  padding: 14px 8px;
}
.policy-row label { font-size: 12px; margin: 0; }
.policy-row small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 5px;
}
.policy-row select {
  font-size: 12px;
  min-width: 94px;
}

/* ── Primary Button ────────────────────────────────────────────────────── */
.primary {
  background: linear-gradient(135deg, var(--accent), #236c52);
  color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  margin-top: 24px;
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 14px rgba(29, 107, 79, 0.2);
  transition: all var(--transition-base);
}
.primary:hover:enabled {
  background: linear-gradient(135deg, var(--accent-hover), #1d6b4f);
  box-shadow: 0 6px 20px rgba(29, 107, 79, 0.3);
  transform: translateY(-2px);
  border: 0;
  color: #fff;
}
.primary:active:enabled {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(29, 107, 79, 0.2);
}

/* ── Tag ───────────────────────────────────────────────────────────────── */
.tag {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--tag-text);
  background: var(--tag-bg);
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 600;
}

/* ── Status ────────────────────────────────────────────────────────────── */
#status {
  font-size: 26px;
  letter-spacing: -0.6px;
  font-weight: 600;
  margin-top: 14px;
  transition: color var(--transition-base);
}
#status[data-decision="block"] { color: var(--danger); }
#status[data-decision="redact"] { color: var(--warning); }
#status[data-decision="allow"] { color: var(--success); }

#explanation {
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 440px;
}

/* ── Findings ──────────────────────────────────────────────────────────── */
.finding {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 0;
  font-size: 12px;
  transition: background var(--transition-fast);
  animation: finding-slide 0.3s ease both;
}
.finding:hover {
  background: var(--accent-glow);
  border-radius: var(--radius-sm);
  margin: 0 -6px;
  padding: 12px 6px;
}
.finding strong {
  font-size: 11px;
  font-weight: 600;
}
#findings {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 18px 0;
}

@keyframes finding-slide {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Code Blocks ───────────────────────────────────────────────────────── */
pre {
  font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(135deg, #f8faf5, #f2f5ee);
  padding: 16px;
  border-radius: var(--radius-sm);
  max-height: 220px;
  overflow: auto;
  color: #4b6253;
  transition: border-color var(--transition-fast);
}
pre:hover { border-color: var(--accent); }

/* ── Hints ─────────────────────────────────────────────────────────────── */
.hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}

/* ── Receipt Export ────────────────────────────────────────────────────── */
.receipt-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.receipt-heading h3 { margin: 0; }
#receipt {
  font-size: 10px;
  max-height: 190px;
}

/* ── Error ─────────────────────────────────────────────────────────────── */
#error {
  font-size: 12px;
  color: var(--danger);
  margin-bottom: 0;
  animation: shake 0.4s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ── Aside ─────────────────────────────────────────────────────────────── */
aside {
  font-size: 11px;
  line-height: 1.8;
  color: var(--text-muted);
  border-left: 3px solid #a8c8b4;
  padding: 8px 18px;
  margin: 32px 0;
  background: linear-gradient(90deg, var(--accent-glow), transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
aside strong { color: #3a5e42; }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

/* ── Focus Rings ───────────────────────────────────────────────────────── */
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  header { padding: 0 20px; height: 68px; }
  .local { font-size: 9px; padding: 7px; }
  .brand span { font-size: 14px; }
  main { padding: 28px 16px; }
  .workspace { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
  h1 { letter-spacing: -1px; }
  footer { flex-direction: column; }
  .intro br { display: none; }
}

/* ── Customization Panel ───────────────────────────────────────────────── */
.customization {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}
.customization:hover { border-color: var(--accent); }
.customization summary {
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  margin-bottom: 12px;
  transition: color var(--transition-fast);
}
.customization summary:hover { color: var(--accent); }
.customization[open] summary {
  color: var(--accent);
  margin-bottom: 16px;
}

.custom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.custom-rule {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 12px 0;
  padding: 14px;
  min-width: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  animation: rule-enter 0.3s var(--transition-base) both;
}
.custom-rule:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.custom-rule legend {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.custom-rule label { margin: 8px 0; }
.custom-rule input:not([type=checkbox]),
.replacement-grid input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px;
  font: 12px ui-monospace, monospace;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-hover);
  transition: border-color var(--transition-fast);
}
.custom-rule input:not([type=checkbox]):hover,
.replacement-grid input:hover {
  border-color: var(--accent);
}
.custom-rule select { display: block; margin-top: 6px; }
.custom-rule input[type=checkbox] { margin-left: 10px; }
.custom-rule button { margin-top: 10px; }

.replacement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.customization code { overflow-wrap: anywhere; }
#exceptions { min-height: 80px; }

@keyframes rule-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 450px) {
  .replacement-grid { grid-template-columns: 1fr; }
}
.skip-link{position:absolute;top:8px;left:16px;transform:translateY(-180%);z-index:10;background:#215d47;color:white;padding:12px;border-radius:6px}.skip-link:focus{transform:translateY(0)}.hint,.muted,#explanation{color:#526457}.counter,footer{color:#59695a}.policy-row small{color:#59695a}.custom-rule textarea{min-height:68px;margin-top:6px}.custom-rule input[type=checkbox],#profile-consent{width:18px;height:18px;vertical-align:middle}button,select,summary{min-height:40px}pre:focus-visible,#error:focus-visible{outline:3px solid #27674e;outline-offset:3px}#profile-status{font-size:12px;line-height:1.6;overflow-wrap:anywhere}#load-profile{max-width:100%}
.privacy-notice{margin:0 0 20px;padding:14px;border:1px solid #dce3dd;border-radius:8px;background:#f6f8f3}.privacy-notice summary{font-size:13px;font-weight:650;cursor:pointer}.privacy-notice p{font-size:12px;line-height:1.7;color:#43594b}#personal-preset{max-width:100%;margin-bottom:8px}

/* Respect motion preferences without changing inspection behavior. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
[hidden]{display:none!important}.product-nav{display:flex;gap:8px;flex-wrap:wrap;padding:14px 5vw;border-bottom:1px solid var(--border);background:var(--bg-header)}.product-nav a{padding:10px 16px;color:var(--text-secondary);text-decoration:none;border-radius:8px;font-size:13px;font-weight:600}.product-nav a[aria-current=page]{background:var(--accent);color:white}.route-link{display:inline-block;padding:12px 0;color:var(--accent);font-size:13px;font-weight:600}.profile-page{max-width:800px}.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.help-grid h2,[data-page=privacy] h2{font-size:18px;color:var(--text);margin-bottom:18px}.help-grid p,.help-grid li,[data-page=privacy] li,[data-page=privacy] .panel p,.profile-page>p{font-size:13px;line-height:1.8;color:var(--text-secondary)}.help-grid a{color:var(--accent)}.help-grid dt{font-weight:650;margin-top:14px}.help-grid dd{margin:6px 0;font-size:13px;line-height:1.7}.profile-page .customization{margin-top:20px}.profile-page textarea{min-height:70px}@media(max-width:760px){.help-grid{grid-template-columns:1fr}.product-nav{padding:10px 16px;gap:4px}.product-nav a{padding:10px;font-size:12px}}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0}.plan-card{display:flex;flex-direction:column;min-width:0}.plan-card h2,.billing-details h2{font-size:22px;color:var(--text)}.plan-price{font-size:32px;font-weight:700;margin:20px 0}.plan-price small{font-size:14px;font-weight:400}.plan-card p,.plan-card li,.billing-details p,.billing-notice{line-height:1.8}.plan-card ul{padding-left:20px;margin:20px 0;flex:1}.plan-card button{width:100%;min-height:44px}.billing-notice{padding:16px;border:1px solid var(--border);border-radius:8px}.billing-details{margin-top:24px}.billing-details p{margin-top:14px}@media(max-width:900px){.plans-grid{grid-template-columns:1fr}.plan-card{max-width:100%}}

.account-panel{max-width:680px}.account-panel p{line-height:1.8;margin:16px 0;overflow-wrap:anywhere}.account-panel button{min-height:44px;margin-right:12px}

/* One shared header: inline navigation on desktop, a compact menu on smaller screens. */
header.site-header{position:sticky;top:0;z-index:20;background:var(--bg-header);box-shadow:0 2px 12px rgba(23,55,42,.06);display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;padding:0 max(24px,calc((100vw - 1256px)/2));border-bottom:1px solid var(--border);backdrop-filter:none}
.site-header .brand{flex-shrink:0}
.site-header .product-nav{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:0;border:0;background:transparent}
.site-header .product-nav a{padding:10px 12px;font-size:13px;min-height:44px;white-space:nowrap}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:12px;min-height:44px;min-width:88px;margin:0;background:var(--surface);border:1px solid var(--border);color:var(--text);font:inherit}
main{scroll-margin-top:88px}
@media(max-width:960px){
 header.site-header{height:auto;min-height:64px;padding:10px 16px;gap:12px;flex-wrap:wrap}
 .site-header .brand span{font-size:18px}
 .site-header.nav-ready{height:64px;flex-wrap:nowrap}
 .nav-ready .menu-toggle{display:flex}
 .site-header .product-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:4px}
 .site-header.nav-ready .product-nav{display:none;position:absolute;top:calc(100% + 8px);left:12px;right:12px;width:auto;padding:8px;background:var(--bg-header);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);max-height:calc(100dvh - 88px);overflow-y:auto}
 .site-header.nav-ready.menu-open .product-nav{display:grid}
 .site-header .product-nav a{white-space:normal;text-align:center;overflow-wrap:anywhere}
 main{scroll-margin-top:80px}
}
.skip-link{z-index:40}
.workspace>*,.help-grid>*{min-width:0}
.profile-page input:not([type=checkbox]),.profile-page select{max-width:100%}
[data-page] p,[data-page] li,[data-page] dd{overflow-wrap:anywhere}
@media(max-width:760px){.section-title,.receipt-heading{flex-wrap:wrap;gap:12px}}

.developer-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;line-height:1.8}.developer-footer a{color:var(--accent);text-underline-offset:3px}.developer-footer a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}