/* VERA / GUARD — editorial product-study direction, no external dependencies. */
:root {
  color-scheme: light;
  --bg: #f5f4ef;
  --paper: #fffefa;
  --ink: #202a26;
  --muted: #707c76;
  --line: #d9dfd7;
  --deep: #153e35;
  --green: #27694f;
  --pale: #e9f3eb;
  --alert: #af513a;
  --alert-bg: #fff0e8;
  --accent: #27694f;
  --stroke: #d9dfd7;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { background: var(--bg); color: var(--ink); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.5; }
button,input,textarea,select { font-family: inherit; }
button { cursor: pointer; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline: 3px solid #8cbea1; outline-offset: 2px; }
.shell { max-width: 1480px; margin: 0 auto; padding: 0 48px 32px; }
.topbar { min-height: 94px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.brand { flex: 1; min-width: 245px; gap: 12px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.035em; }
.brand .mark { display: flex; align-items: center; justify-content: center; background: var(--deep); color: #d6efd4; width: 38px; height: 38px; border-radius: 7px; font-size: 25px; font-weight: 400; }
.brand-stack { display: grid; gap: 0; line-height: 1.15; }
.brand-stack strong { font-size: 18px; letter-spacing: -.045em; font-weight: 820; }
.brand-stack strong span { color: var(--green); }
.brand-stack small { font-size: 10px; letter-spacing: .005em; font-weight: 500; color: #86928c; margin-top: 4px; }
.product-nav { display: flex; gap: 5px; padding: 5px; border: 1px solid #dbe1da; border-radius: 8px; background: #ebece6; }
.product-nav button { white-space: nowrap; padding: 10px 16px; border: none; background: transparent; color: #586760; font-size: 12px; font-weight: 690; border-radius: 5px; }
.product-nav button.nav-active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px #23322713; }
.top-meta { flex: 1; text-align: right; font-size: 9px; font-weight: 750; letter-spacing: .11em; white-space: nowrap; color: #7e8980; }
.top-meta-secondary { color: #9ca69e; }
.concept-dot { display: inline-block; height: 6px; width: 6px; border: 1px solid #a1ada4; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }

/* Main product concept */
.guard-pane { animation: liftIn .32s ease both; }
@keyframes liftIn { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.guard-intro { display: grid; grid-template-columns: minmax(0,1.2fr) 380px; gap: 80px; align-items: center; padding: 67px 0 55px; }
.eyebrow, .section-overline { color: var(--green); font: 760 10px/1.4 "Inter",Arial,sans-serif; letter-spacing: .135em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow-line { width: 26px; height: 2px; background: var(--green); display: inline-block; }
.eyebrow-sep { color: #b4bcb4; }
.guard-intro h1 { font-size: clamp(52px,5.5vw,83px); line-height: 1.03; font-weight: 760; letter-spacing: -.075em; margin: 22px 0 20px; color: #202b26; }
.guard-intro h1 em { font-style: normal; color: #6c8977; }
.guard-lede { max-width: 555px; font-size: 16px; line-height: 1.72; color: #65736b; margin: 0; }
.intro-notes { display: flex; gap: 25px; flex-wrap: wrap; margin-top: 30px; color: #3c5549; font-size: 11px; font-weight: 670; }
.intro-notes span { display: inline-flex; gap: 8px; align-items: center; }
.tiny-tick { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #7ea68f; border-radius: 50%; position: relative; }
.tiny-tick:after { position: absolute; content: ''; height: 4px; width: 7px; top: 2px; left: 2px; transform: rotate(-45deg); border-bottom: 1.5px solid #467a5a; border-left: 1.5px solid #467a5a; }
.extension-preview { border: 1px solid #d8dfd7; border-radius: 12px; background: #fffefa; padding: 20px; transform: rotate(1deg); box-shadow: 16px 19px 0 #dce9de; }
.extension-preview-top { display: flex; gap: 10px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid #e8ebe4; }
.ext-app-icon { background: #e0eee5; color: #1b6449; border: 1px solid #c5dfcf; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; font-weight: 900; font-size: 18px; }
.extension-preview-top div { display: flex; flex-direction: column; line-height: 1.4; }
.extension-preview-top strong { font-size: 12px; font-weight: 810; }
.extension-preview-top small { font-size: 10px; color: #859187; }
.ext-dots { margin-left: auto; font-weight: 900; font-size: 18px; color: #a1aca3; letter-spacing: .1em; }
.extension-url { display: flex; align-items: center; gap: 9px; font: 550 12px/1.4 ui-monospace,Consolas,monospace; color: #4d6257; padding: 16px 1px 15px; }
.url-lock { font: normal 18px/1 Arial; color: var(--green); }
.extension-signal { display: grid; grid-template-columns: 77px 1fr 18px; align-items: center; gap: 8px; min-height: 39px; border-top: 1px solid #eef0ec; font-size: 10.5px; }
.extension-signal span:first-child { color: #89968d; }
.extension-signal b { color: #34453c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 640; }
.extension-signal .signal-ok { color: #3c8963; font-size: 13px; }
.extension-action { border: 0; background: #1c5945; color: #fff; border-radius: 6px; width: 100%; padding: 13px 14px; display: flex; gap: 9px; align-items: center; font-size: 12px; font-weight: 760; margin-top: 16px; }
.extension-action > span:last-child { margin-left: auto; }
.extension-action:hover { background: #0c3d2d; }
.ext-shield { font-weight: 900; font-size: 18px; line-height: .7; }
.extension-caption { font-size: 10px; color: #97a098; margin: 11px 0 0; text-align: center; }

.guard-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid #cfd9ce; background: #e9eee7; border-radius: 10px; margin: 4px 0 21px; }
.summary-item { padding: 21px 27px 23px; min-height: 123px; }
.summary-item + .summary-item { border-left: 1px solid #d0dcd0; }
.summary-label { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; letter-spacing: .09em; color: #627c6b; font-weight: 780; }
.summary-label i { font-style: normal; font-weight: 560; color: #a4b3a3; }
.summary-item > div { display: flex; gap: 13px; align-items: baseline; margin-top: 12px; }
.summary-item strong { font-size: 36px; letter-spacing: -.075em; line-height: 1; font-weight: 780; font-variant-numeric: tabular-nums; }
.summary-item small { color: #748579; font-size: 11px; }
.summary-item .alert-number { color: var(--alert); }
.summary-item .sample-status { font-size: 23px; letter-spacing: -.05em; }

.guard-workspace { display: grid; grid-template-columns: minmax(0,1.66fr) minmax(320px,1fr); gap: 21px; }
.guard-main-column, .guard-detail-column { display: grid; gap: 21px; align-content: start; }
.guard-card { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.card-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 24px 27px 22px; }
.section-overline span { color: #9aa79e; margin-left: 8px; }
.card-heading h2 { font-size: 22px; letter-spacing: -.045em; margin: 10px 0 4px; font-weight: 730; }
.card-heading p { font-size: 12px; color: #88928b; margin: 0; }
.small-chip,.outline-chip { display: inline-flex; align-items: center; flex: none; white-space: nowrap; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #4d7a5d; background: #eaf2e8; border: 1px solid #d9e8da; padding: 7px 9px; border-radius: 4px; }
.outline-chip { color: #8a958d; background: transparent; border-color: #dbe3da; }
.pages-columns { display: grid; grid-template-columns: minmax(0,1fr) 98px 108px; gap: 6px; padding: 12px 27px; background: #f4f5f0; border-top: 1px solid #e5eae2; border-bottom: 1px solid #e5eae2; color: #87948a; font-size: 9px; font-weight: 760; letter-spacing: .09em; }
.pages-columns span:last-child { text-align: right; }
.pages-list { display: grid; }
.guard-page { border: 0; border-bottom: 1px solid #e7ebe5; background: transparent; color: var(--ink); display: grid; grid-template-columns: minmax(0,1fr) 98px 108px; align-items: center; text-align: left; gap: 6px; width: 100%; padding: 17px 27px; transition: background .14s; }
.guard-page:hover, .guard-page.selected { background: #f1f6f0; }
.guard-page.selected { box-shadow: inset 3px 0 0 var(--green); }
.guard-page-name { font-size: 12px; font-weight: 770; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guard-page-path { font: 11px ui-monospace,Consolas,monospace; color: #909e92; display: block; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.status-tag { display: inline-block; text-align: center; min-width: 74px; border-radius: 4px; padding: 6px 8px; font-size: 9px; letter-spacing: .025em; font-weight: 740; }
.status-tag.healthy { background: #e7f2e9; color: #256846; }
.status-tag.critical { background: #fce8e0; color: #ad4c33; }
.status-tag.review { background: #fbf0dc; color: #926523; }
.status-tag.pending { background: #e9ebe7; color: #77867b; }
.guard-page-last { text-align: right; font-size: 11px; color: #87958b; }
.protect-form { padding: 20px 27px 23px; }
.protect-form label,.compare-content label { color: #53665a; font-size: 10px; font-weight: 780; letter-spacing: .09em; margin: 0 0 9px; }
.protect-input-row { display: flex; gap: 8px; }
.protect-input-row input { height: 43px; min-width: 0; flex: 1; background: #f9faf7; border: 1px solid #d8e0d6; border-radius: 5px; color: #304239; padding: 0 13px; font-size: 12px; }
.protect-input-row button,.compare-footer button { flex: none; background: #1b5945; color: white; border: 0; border-radius: 5px; padding: 0 18px; font-size: 11px; font-weight: 760; }
.protect-input-row button span,.compare-footer button span { margin-left: 10px; font-size: 13px; }
.protect-form p { margin: 9px 0 0; color: #9ba69c; font-size: 10px; }
.compare-card .card-heading { padding-bottom: 16px; }
.compare-content { padding: 0 27px 24px; }
.compare-content textarea { background: #fafbf8; color: #35443c; border: 1px solid #d8e1d7; border-radius: 5px; width: 100%; min-height: 98px; resize: vertical; padding: 12px; font: 11px/1.55 ui-monospace,Consolas,monospace; }
.compare-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 11px; }
.compare-footer span { font-size: 10px; color: #89968c; }
.compare-footer button { height: 38px; white-space: nowrap; }

.detail-card .card-heading { border-bottom: 1px solid #e8ebe5; padding-bottom: 17px; }
.incident-dot { width: 9px; height: 9px; border-radius: 50%; background: #b5543c; box-shadow: 0 0 0 5px #fce7e1; margin: 18px 4px 0 0; }
#guardDetails { padding: 20px 25px 4px; min-height: 282px; }
.detail-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-meta .incident-label { font-size: 10px; font-weight: 780; color: #ac513c; text-transform: uppercase; letter-spacing: .08em; }
.detail-meta .healthy-label { color: #39815c; }
.detail-meta .review-label { color: #a97a31; }
.detail-title { color: #27372e; margin: 12px 0 7px; font-size: 22px; line-height: 1.15; letter-spacing: -.045em; font-weight: 760; }
.detail-summary { margin: 0 0 20px; color: #87968a; font-size: 12px; }
.detail-diff { border: 1px solid #e4e6e0; border-radius: 6px; overflow: hidden; }
.diff-heading { color: #77867b; background: #f5f6f2; font-size: 10px; font-weight: 760; letter-spacing: .1em; padding: 10px 12px; }
.signal-diff-group + .signal-diff-group { border-top: 2px solid #d6ded4; }
.diff-row { padding: 12px 12px 13px; }
.diff-row + .diff-row { border-top: 1px solid #e9ece6; }
.diff-row small { display: block; margin-bottom: 5px; color: #87958a; font-size: 10px; }
.diff-row code { font: 11px/1.45 ui-monospace,Consolas,monospace; color: #405a47; white-space: normal; overflow-wrap: anywhere; }
.diff-row.after { background: #fef4ef; }
.diff-row.after code { color: #af523b; }
.severity-info { padding: 15px 0 14px; font-size: 11px; line-height: 1.65; color: #7b897f; }
.severity-info b { color: #2c4135; }
.detail-actions { border-top: 1px solid #e9ede6; padding: 17px 25px 22px; display: grid; gap: 8px; }
.detail-actions button { width: 100%; min-height: 41px; border-radius: 5px; font-size: 11px; font-weight: 760; }
.detail-action-primary { color: white; background: #1b5945; border: 1px solid #1b5945; }
.detail-action-primary span { float: right; margin-right: 6px; }
.detail-action-secondary { color: #5d7063; background: transparent; border: 1px solid #d9e2d7; }
.detail-action-primary:hover { background: #134534; }
.detail-action-secondary:hover { background: #f0f4ee; }
.agency-note { padding: 27px 27px 29px; background: #173e34; border-radius: 10px; color: #f0f4ed; position: relative; overflow: hidden; }
.agency-note:after { content: '◇'; position: absolute; right: -14px; bottom: -90px; font-size: 270px; line-height: 1; font-weight: 100; color: #326251; pointer-events: none; }
.agency-note > * { position: relative; z-index: 1; }
.agency-note .section-overline { color: #9acbb0; }
.agency-note h3 { font-size: 31px; line-height: 1.15; font-weight: 650; letter-spacing: -.055em; margin: 18px 0 12px; }
.agency-note p { max-width: 290px; font-size: 12px; line-height: 1.68; color: #bed0c2; margin: 0 0 24px; }
.text-link { color: #edf9ed; font-weight: 760; font-size: 11px; border: 0; border-bottom: 1px solid #85af98; padding: 0 0 8px; background: transparent; }
.text-link span { margin-left: 15px; }
.guard-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding-top: 31px; font-size: 10px; color: #9aa49b; }
.guard-footer span:first-child { font-weight: 780; font-size: 9px; letter-spacing: .09em; }
.guard-footer button { background: transparent; color: #607a6a; border: 0; font-weight: 760; font-size: 10px; padding: 7px; text-decoration: underline; }

/* Keep the original Client Snapshot engine usable in a separate tab. */
.snapshot-pane { padding-top: 10px; }
.snapshot-pane .hero { padding: 42px 0 33px; }
.snapshot-pane .hero h1 { font-size: clamp(39px,4.5vw,61px); color: var(--ink); }
.snapshot-pane .hero p { color: var(--muted); }
.snapshot-pane .kicker, .snapshot-pane .report-topline, .snapshot-pane .thesis-card em { color: var(--green); }
.snapshot-pane .panel { background: var(--paper); border-color: var(--line); box-shadow: none; }
.snapshot-pane .setup { padding: 25px; }
.snapshot-pane .panel h2,.snapshot-pane .section-head h3,.snapshot-pane .finding h4,.snapshot-pane .score-info b { color: var(--ink); }
.snapshot-pane .dim,.snapshot-pane .finding p,.snapshot-pane .evidence,.snapshot-pane .footnote,.snapshot-pane .section-head span,.snapshot-pane .subtle,.snapshot-pane .privacy { color: #7c8b80; }
.snapshot-pane label { color: #506759; }
.snapshot-pane input,.snapshot-pane select,.snapshot-pane textarea { background: #f9faf7; border-color: #d4dfd5; color: var(--ink); }
.snapshot-pane .btn.primary { color: white; background: #1b5945; }
.snapshot-pane .btn.secondary { color: #2a5141; border-color: #cfdbce; }
.snapshot-pane .btn.secondary:hover { background: #eef4ed; }
.snapshot-pane .workflow,.snapshot-pane .privacy,.snapshot-pane .report-head,.snapshot-pane .footnote { border-color: var(--line); }
.snapshot-pane .report-head { padding: 25px; }
.snapshot-pane .report-body { padding: 25px; }
.snapshot-pane .report-title { color: #20352a; }
.snapshot-pane .client-dot { color: #235642; background: #e4f1e3; }
.snapshot-pane .score-row { color: var(--ink); background: #f0f5ef; border-color: #d9e6d8; }
.snapshot-pane .score,.snapshot-pane .delta,.snapshot-pane .score small { color: var(--green); }
.snapshot-pane .score-info span { color: #718475; }
.snapshot-pane .stat,.snapshot-pane .finding,.snapshot-pane .history-item { background: #fbfcf9; border-color: #dce5da; }
.snapshot-pane .stat strong,.snapshot-pane .history-item strong { color: var(--ink); }
.snapshot-pane .stat span,.snapshot-pane .history-item small { color: #7d8b7e; }
.snapshot-pane .finding .badge { color: #607367; border-color: #d5e0d5; }
.snapshot-pane .comparison { background: #edf4ea; border-color: #d4e5d1; }
.snapshot-pane .comparison h3,.snapshot-pane .comparison .overline { color: #325e47; }
.snapshot-pane .change-chip { background: #dfeee0; border-color: #c7e1cb; color: #316a49; }
.snapshot-pane .change-chip.neutral { background: #e8ebe6; border-color: #d9e2d9; color: #657567; }
.snapshot-pane .indicator.pass { background: #4a9669; }
.snapshot-pane .indicator.fail { background: #c2624a; }
.snapshot-pane .indicator { background: #d4a05a; }
.snapshot-pane .thesis-card { background: #fefefa; border-color: #d8e2d7; }
.snapshot-pane .thesis-card h3 { color: var(--ink); }
.snapshot-pane .thesis-card p { color: #7d8c80; }
.snapshot-pane .history-item b { color: #356a4b; }
.snapshot-pane .history-item small { display: block; max-width: 230px; overflow-wrap: anywhere; }

/* Small, intentional wayfinding cue after a user action updates another section. */
.result-reveal {
  outline: 2px solid #4c936c;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(54, 128, 82, .13) !important;
  transition: outline-color .25s ease, box-shadow .25s ease;
}
.result-reveal:focus { outline: 2px solid #4c936c; }
.guard-card, .snapshot-pane .report, .snapshot-pane .comparison, .snapshot-pane .history { scroll-margin-top: 18px; }

@media(max-width:1150px) {
  .shell { padding: 0 27px 28px; }
  .top-meta { display: none; }
  .guard-intro { grid-template-columns: minmax(0,1fr) 345px; gap: 40px; }
  .guard-workspace { grid-template-columns: minmax(0,1fr) 350px; }
}
@media(max-width:830px) {
  .topbar { gap: 12px; flex-wrap: wrap; padding-top: 18px; }
  .brand { flex: 1; }
  .product-nav { flex: none; width: 100%; justify-content: stretch; order: 2; }
  .product-nav button { flex: 1; }
  .guard-intro { grid-template-columns: 1fr; gap: 34px; padding: 45px 0 43px; }
  .guard-intro h1 { font-size: clamp(51px,10vw,75px); }
  .extension-preview { max-width: 430px; transform: none; margin: 0 16px 0 0; box-shadow: 12px 12px 0 #dce9de; }
  .guard-workspace { grid-template-columns: 1fr; }
  .guard-detail-column { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .guard-detail-column .detail-card { grid-column: 1/-1; }
  .guard-detail-column .agency-note { grid-column: 1/-1; }
}
@media(max-width:580px) {
  .shell { padding: 0 16px 24px; }
  .brand { min-width: 0; }
  .guard-intro { padding-top: 34px; }
  .guard-intro h1 { font-size: 48px; }
  .eyebrow { gap: 7px; font-size: 8px; }
  .eyebrow-line { width: 16px; }
  .guard-lede { font-size: 14px; }
  .intro-notes { gap: 8px 17px; margin-top: 23px; }
  .extension-preview { margin-right: 10px; }
  .guard-summary { grid-template-columns: 1fr 1fr; }
  .summary-item { padding: 17px 16px; min-height: 100px; }
  .summary-item:nth-child(3) { grid-column: 1/-1; border-left: 0; border-top: 1px solid #d0dcd0; }
  .summary-item:nth-child(3) > div { margin-top: 7px; }
  .summary-item > div { display: block; }
  .summary-item small { display: block; margin-top: 7px; }
  .summary-item strong { font-size: 31px; }
  .summary-item .sample-status { font-size: 22px; }
  .card-heading { padding: 20px 17px 18px; }
  .card-heading h2 { font-size: 20px; }
  .pages-columns { grid-template-columns: minmax(0,1fr) 83px; padding: 11px 17px; }
  .pages-columns span:last-child { display: none; }
  .guard-page { grid-template-columns: minmax(0,1fr) 83px; padding: 16px 17px; }
  .guard-page-last { display: none; }
  .status-tag { min-width: 68px; }
  .protect-form { padding: 18px 17px 20px; }
  .protect-input-row { display: grid; }
  .protect-input-row button { height: 42px; }
  .compare-content { padding: 0 17px 20px; }
  .compare-footer { align-items: stretch; flex-direction: column; }
  .compare-footer button { min-height: 41px; }
  .snapshot-pane .setup { padding: 18px; }
  .snapshot-pane .report-body { padding: 17px; }
  .snapshot-pane .score-row { flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print { .result-reveal { outline: none!important; box-shadow: none!important; } .topbar,.guard-pane { display: none!important; } .snapshot-pane { display: block!important; } .snapshot-pane .hero,.snapshot-pane .setup,.snapshot-pane .product-thesis { display: none!important; } .snapshot-pane .panel,.snapshot-pane .report { border:0!important; background:white!important; } }