/* Filename: public/stylesheets/xero-clarity.css
   Revision: 2026-04-20 – Initial build: XeroClarity views stylesheet */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --ink:          #0f0e0c;
  --ink-2:        #3d3c39;
  --ink-3:        #7a7870;
  --paper:        #faf9f6;
  --surface:      #f2f0eb;
  --rule:         #e2dfd7;
  --accent:       #1a4a3a;
  --accent-light: #e8f0ed;
  --red-soft:     #c0392b;
  --red-light:    #fdf0ee;
  --amber:        #c97b2a;
  --amber-light:  #fdf3e7;
  --tr-dark:      #0f1109;
  --tr-green:     #22a559;
}

[data-theme="dark"] {
  --ink:          #f0efe9;
  --ink-2:        #c8c7c0;
  --ink-3:        #7a7870;
  --paper:        #0f1109;
  --surface:      #161a0e;
  --rule:         #2a2d22;
  --accent:       #2ec76a;
  --accent-light: #0d2a18;
  --red-soft:     #e05555;
  --red-light:    #2a1010;
  --amber:        #e89a3c;
  --amber-light:  #2a1e0a;
  --tr-dark:      #060809;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); }

body {
  font-family: 'DM Sans', sans-serif;
  background:  var(--paper);
  color:       var(--ink);
  font-size:   15px;
  line-height: 1.65;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

/* ── TR band ───────────────────────────────────────────────────────────────── */
.tr-band {
  background: var(--tr-dark);
  padding:    7px 48px;
  font-size:  11.5px;
  color:      rgba(255,255,255,.4);
}
.tr-band a { color: var(--tr-green); text-decoration: none; font-weight: 500; }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 48px;
  border-bottom:   1px solid var(--rule);
  background:      var(--paper);
}
.logo {
  font-family:     'DM Serif Display', serif;
  font-size:       20px;
  color:           var(--ink);
  letter-spacing:  -.01em;
  text-decoration: none;
}
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
.nav-links a { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-back { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.nav-back:hover { color: var(--ink); }

/* ── Theme toggle ──────────────────────────────────────────────────────────── */
.theme-toggle {
  background:    none;
  border:        1px solid var(--rule);
  border-radius: 99px;
  padding:       6px 12px;
  cursor:        pointer;
  font-size:     13px;
  color:         var(--ink-2);
  display:       flex;
  align-items:   center;
  gap:           6px;
  font-family:   'DM Sans', sans-serif;
  transition:    border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }

/* ── Landing: hero ─────────────────────────────────────────────────────────── */
.hero {
  max-width:  680px;
  margin:     72px auto 0;
  padding:    0 24px;
  text-align: center;
}
.hero-eyebrow {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  16px;
}
.hero h1 {
  font-family:   'DM Serif Display', serif;
  font-size:     48px;
  line-height:   1.05;
  margin-bottom: 16px;
}
.hero-sub {
  font-size:    17px;
  color:        var(--ink-2);
  line-height:  1.65;
  margin-bottom: 40px;
  max-width:    520px;
  margin-left:  auto;
  margin-right: auto;
}

/* ── Connect status card ───────────────────────────────────────────────────── */
.connect-section {
  max-width: 540px;
  margin:    0 auto 48px;
  padding:   0 24px;
}
.connect-card {
  background:    var(--surface);
  border:        1px solid var(--rule);
  border-radius: 12px;
  padding:       24px 28px;
}
.connect-card-title {
  font-size:      12px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--ink-3);
  margin-bottom:  16px;
}
.connect-status {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   14px;
  font-weight: 500;
  margin-bottom: 16px;
}
.connect-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}
.connect-dot.connected    { background: var(--accent); }
.connect-dot.disconnected { background: var(--red-soft); }
.connect-org {
  font-size:   13px;
  color:       var(--ink-3);
  margin-bottom: 16px;
}
.btn-xero {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      #13B5EA;
  color:           white;
  padding:         11px 22px;
  border-radius:   6px;
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      background .15s;
}
.btn-xero:hover   { background: #0fa3d4; }
.btn-disconnect {
  font-size:       13px;
  color:           var(--red-soft);
  background:      none;
  border:          1px solid var(--red-soft);
  border-radius:   6px;
  padding:         6px 14px;
  cursor:          pointer;
  margin-left:     12px;
  font-family:     'DM Sans', sans-serif;
  transition:      background .15s;
}
.btn-disconnect:hover { background: var(--red-light); }

/* ── Scan form ─────────────────────────────────────────────────────────────── */
.scan-section {
  max-width: 540px;
  margin:    0 auto 80px;
  padding:   0 24px;
}
.scan-eyebrow {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--ink-3);
  margin-bottom:  16px;
  text-align:     center;
}
.scan-form {
  background:    var(--surface);
  border:        1px solid var(--rule);
  border-radius: 12px;
  padding:       24px 28px;
}
.form-row {
  display:   grid;
  gap:       16px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.form-input {
  padding:       9px 12px;
  border:        1px solid var(--rule);
  border-radius: 6px;
  font-size:     14px;
  font-family:   'DM Sans', sans-serif;
  background:    var(--paper);
  color:         var(--ink);
  transition:    border-color .15s;
}
.form-input:focus { outline: none; border-color: var(--accent); }
.btn-scan {
  width:           100%;
  background:      var(--ink);
  color:           var(--paper);
  border:          none;
  border-radius:   6px;
  padding:         12px;
  font-size:       15px;
  font-weight:     600;
  font-family:     'DM Sans', sans-serif;
  cursor:          pointer;
  transition:      background .15s;
}
.btn-scan:hover   { background: var(--accent); }
.btn-scan:disabled { opacity: .5; cursor: not-allowed; }
.scan-note {
  font-size:   11px;
  color:       var(--ink-3);
  text-align:  center;
  margin-top:  10px;
  line-height: 1.5;
}
.xero-error {
  background:    var(--red-light);
  border:        1px solid #f5c6c0;
  border-radius: 8px;
  padding:       12px 16px;
  font-size:     13px;
  color:         var(--red-soft);
  margin-bottom: 16px;
}
.xero-success {
  background:    var(--accent-light);
  border:        1px solid #a8d4bc;
  border-radius: 8px;
  padding:       12px 16px;
  font-size:     13px;
  color:         var(--accent);
  margin-bottom: 16px;
}

/* ── Scan progress overlay ─────────────────────────────────────────────────── */
#scan-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(15,14,12,.75);
  z-index:         500;
  align-items:     center;
  justify-content: center;
}
#scan-overlay.active { display: flex; }
.scan-modal {
  background:    var(--paper);
  border-radius: 12px;
  padding:       48px 56px;
  text-align:    center;
  min-width:     380px;
  box-shadow:    0 20px 60px rgba(0,0,0,.2);
}
.scan-modal-title {
  font-family:   'DM Serif Display', serif;
  font-size:     22px;
  margin-bottom: 8px;
}
.scan-modal-sub {
  font-size:     14px;
  color:         var(--ink-3);
  margin-bottom: 28px;
}
.scan-progress-bar {
  height:        4px;
  background:    var(--rule);
  border-radius: 99px;
  overflow:      hidden;
  margin-bottom: 12px;
}
.scan-progress-fill {
  height:        100%;
  background:    var(--tr-green);
  border-radius: 99px;
  width:         0%;
  transition:    width .4s ease;
}
.scan-progress-label { font-size: 12px; color: var(--ink-3); }
.scan-phase-list {
  margin-top:   20px;
  text-align:   left;
  font-size:    12px;
  color:        var(--ink-3);
  line-height:  1.8;
}
.scan-phase-list .phase-done   { color: var(--accent); }
.scan-phase-list .phase-active { color: var(--ink); font-weight: 600; }

/* ── How it works (landing) ────────────────────────────────────────────────── */
.how-section {
  max-width: 700px;
  margin:    0 auto 80px;
  padding:   0 24px;
}
.how-section h2 {
  font-family:   'DM Serif Display', serif;
  font-size:     28px;
  margin-bottom: 32px;
  text-align:    center;
}
.steps {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
}
.step {
  background:    var(--surface);
  border:        1px solid var(--rule);
  border-radius: 10px;
  padding:       24px 20px;
}
.step-num {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--accent);
  color:           white;
  font-size:       12px;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   12px;
}
.step-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.step-body  { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* ── Results: stats grid ───────────────────────────────────────────────────── */
.results-wrap {
  max-width: 960px;
  margin:    0 auto;
  padding:   48px 24px 80px;
  flex:      1;
}
.page-eyebrow {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  8px;
}
.results-wrap h1 {
  font-family:   'DM Serif Display', serif;
  font-size:     34px;
  line-height:   1.1;
  margin-bottom: 6px;
}
.page-meta { font-size: 13px; color: var(--ink-3); margin-bottom: 32px; }

.health-row {
  display:     flex;
  align-items: center;
  gap:         24px;
  margin-bottom: 32px;
}
.health-score-block {
  background:    var(--surface);
  border:        1px solid var(--rule);
  border-radius: 12px;
  padding:       20px 28px;
  display:       flex;
  align-items:   baseline;
  gap:           8px;
  flex-shrink:   0;
}
.health-score-num {
  font-family: 'DM Serif Display', serif;
  font-size:   52px;
  line-height: 1;
  font-weight: 700;
}
.health-score-denom { font-size: 16px; color: var(--ink-3); }
.health-score-grade {
  font-family:   'DM Serif Display', serif;
  font-size:     32px;
  font-weight:   700;
  margin-left:   4px;
}
.health-score-num.green, .health-score-grade.green { color: #22a559; }
.health-score-num.amber, .health-score-grade.amber { color: var(--amber); }
.health-score-num.red,   .health-score-grade.red   { color: var(--red-soft); }

.severity-pills { display: flex; flex-direction: column; gap: 8px; }
.severity-pill {
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-size:     13px;
}
.sev-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}
.sev-dot.critical { background: var(--red-soft); }
.sev-dot.warning  { background: var(--amber); }
.sev-dot.advisory { background: var(--accent); }

.stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
  margin-bottom:         40px;
}
.stat-card {
  background:    var(--surface);
  border:        1px solid var(--rule);
  border-radius: 10px;
  padding:       16px 18px;
}
.stat-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--ink-3);
  margin-bottom:  8px;
}
.stat-val { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-val.ok  { color: #22a559; }
.stat-val.red { color: var(--red-soft); }
.stat-val.amb { color: var(--amber); }

/* ── Issue sections ────────────────────────────────────────────────────────── */
.issue-section { margin-bottom: 36px; }
.issue-header {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         12px 16px;
  border-radius:   8px 8px 0 0;
  border:          1px solid var(--rule);
  border-bottom:   none;
  background:      var(--surface);
}
.issue-sev-bar {
  width:         4px;
  height:        20px;
  border-radius: 2px;
  flex-shrink:   0;
}
.issue-sev-bar.critical { background: var(--red-soft); }
.issue-sev-bar.warning  { background: var(--amber); }
.issue-sev-bar.advisory { background: var(--accent); }
.issue-title { font-size: 14px; font-weight: 600; }
.issue-count {
  margin-left: auto;
  font-size:   12px;
  color:       var(--ink-3);
}
.issue-body {
  border:        1px solid var(--rule);
  border-radius: 0 0 8px 8px;
  padding:       16px;
  font-size:     13px;
  color:         var(--ink-2);
}
.issue-amount { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.issue-amount.red { color: var(--red-soft); }
.issue-amount.amb { color: var(--amber); }

/* ── Simple table ──────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.data-table thead th {
  background:     var(--surface);
  padding:        8px 10px;
  text-align:     left;
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--ink-3);
  border-bottom:  2px solid var(--rule);
}
.data-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--surface); }
.overflow-note { font-size: 11px; color: var(--ink-3); margin-top: 8px; font-style: italic; }

/* ── Report download form ──────────────────────────────────────────────────── */
.report-section {
  background:    var(--surface);
  border:        1px solid var(--rule);
  border-radius: 12px;
  padding:       28px;
  margin-bottom: 40px;
}
.report-section-title {
  font-family:   'DM Serif Display', serif;
  font-size:     20px;
  margin-bottom: 6px;
}
.report-section-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; }
.report-form-row { display: flex; gap: 12px; align-items: flex-end; }
.report-form-row .form-group { flex: 1; }
.btn-report {
  background:    var(--tr-dark);
  color:         var(--tr-green);
  border:        none;
  border-radius: 6px;
  padding:       10px 22px;
  font-size:     14px;
  font-weight:   600;
  font-family:   'DM Sans', sans-serif;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background .15s;
}
.btn-report:hover { background: #111820; }

/* ── Doc pages (FAQ, TOS, Privacy) ────────────────────────────────────────── */
.doc-wrap {
  max-width: 720px;
  margin:    0 auto;
  padding:   64px 48px 80px;
  flex:      1;
}
.doc-eyebrow {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  12px;
}
.doc-wrap h1 {
  font-family:   'DM Serif Display', serif;
  font-size:     42px;
  line-height:   1.1;
  margin-bottom: 8px;
}
.doc-meta { font-size: 13px; color: var(--ink-3); margin-bottom: 48px; }
.doc-section { margin-bottom: 36px; }
.doc-section h2 {
  font-family:   'DM Serif Display', serif;
  font-size:     22px;
  margin-bottom: 12px;
  margin-top:    36px;
}
.doc-section p { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; line-height: 1.75; }
.doc-section ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding-left: 0; }
.doc-section ul li { font-size: 15px; color: var(--ink-2); display: flex; gap: 10px; }
.doc-section ul li::before { content: '—'; color: var(--ink-3); flex-shrink: 0; }
.doc-section a { color: var(--accent); }
.highlight-box {
  background:    var(--accent-light);
  border-left:   3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding:       14px 18px;
  margin-bottom: 24px;
}
.highlight-box p { font-size: 15px; color: var(--ink); margin: 0; }
.faq-item { border-bottom: 1px solid var(--rule); padding: 20px 0; }
.faq-q { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.faq-a { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer {
  background: var(--tr-dark);
  padding:    20px 48px;
  font-size:  12px;
  color:      rgba(255,255,255,.3);
  display:    flex;
  justify-content: space-between;
  margin-top: auto;
}
footer a { color: rgba(255,255,255,.3); text-decoration: none; }
footer a:hover { color: rgba(255,255,255,.6); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  nav           { padding: 12px 20px; }
  .tr-band      { padding: 7px 20px; }
  .hero         { margin-top: 40px; }
  .hero h1      { font-size: 34px; }
  .form-row     { grid-template-columns: 1fr; }
  .steps        { grid-template-columns: 1fr; }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .health-row   { flex-direction: column; align-items: flex-start; }
  .report-form-row { flex-direction: column; }
  footer        { flex-direction: column; gap: 8px; padding: 16px 20px; }
  .doc-wrap     { padding: 40px 20px 60px; }
}