/* ─── Recurfind — Brand CSS ───
     All tokens from brand.md declared once in :root.
     stance: dense — minimum chrome, maximum data. */

:root {
  --color-bg:          #f7f6f3;
  --color-surface:     #ffffff;
  --color-border:      #e4e3df;
  --color-body:        #1a1a1c;
  --color-muted:       #3d4754;
  --color-primary:     #288065;
  --color-accent:      #d99f3c;
  --color-destructive: #c05c5c;

  --font-display: 'DM Mono', monospace;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;

  --radius: 2px;
  --space: 4px;

  color-scheme: light;
}

/* ─── Dark theme overrides ─── */
[data-theme="dark"] {
  --color-bg:          #1a1a20;
  --color-surface:     #23232a;
  --color-border:      #363640;
  --color-body:        #e4e0da;
  --color-muted:       #9ca8b4;
  --color-primary:     #3ea88a;
  --color-accent:      #d99f3c;
  --color-destructive: #c05c5c;
}

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

html{font-size:15px;line-height:1.45;background:var(--color-bg);color:var(--color-body);
     font-family:var(--font-body);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%}

body{background:var(--color-bg);min-height:100dvh;display:flex;flex-direction:column}

/* prevents horizontal scroll from table overflow from pushing content wider */
img,svg,table,pre,code{max-width:100%}

/* ─── Header/Nav ─── */
header.site-header{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  padding:0 calc(var(--space)*4);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100
}
header.site-header .brand{display:flex;align-items:center;gap:calc(var(--space)*2);padding:calc(var(--space)*3) 0}
header.site-header .brand img{display:block;width:28px;height:28px;vertical-align:middle}
header.site-header .brand .site-title{
  font-family:var(--font-display);font-size:1.1rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;color:var(--color-body);
  text-decoration:none
}

nav.site-nav{display:flex;gap:calc(var(--space)*3);align-items:center}
nav.site-nav a{
  font-family:var(--font-body);font-size:.85rem;color:var(--color-muted);
  text-decoration:none;padding:calc(var(--space)*1.5) calc(var(--space)*2)
}
nav.site-nav a:hover{color:var(--color-primary)}

#thtg{
  background:none;border:none;cursor:pointer;padding:calc(var(--space)*2);
  font-size:.85rem;color:var(--color-muted);display:flex;align-items:center;gap:calc(var(--space))
}
#thtg:hover{color:var(--color-primary)}

/* ─── Hero ─── */
.hero{
  padding:calc(var(--space)*10) calc(var(--space)*6);
  max-width:900px;margin:0 auto;
  text-align:left
}
.hero h1{
  font-family:var(--font-display);font-size:1.75rem;font-weight:400;
  line-height:1.3;color:var(--color-body);margin-bottom:calc(var(--space)*3)
}
.hero h1 .highlight{color:var(--color-primary)}
.hero .sub{
  font-family:var(--font-body);font-size:.95rem;line-height:1.5;
  color:var(--color-muted);margin-bottom:calc(var(--space)*4)
}

/* ─── Eyebrow / section label ─── */
.section-eyebrow{
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--color-muted);margin-bottom:calc(var(--space)*2)
}
.section-eyebrow .num{color:var(--color-accent);margin-right:calc(var(--space)*1)}

/* ─── Section heading ─── */
h2{
  font-family:var(--font-display);font-size:1.25rem;font-weight:400;
  color:var(--color-body);margin-bottom:calc(var(--space)*3);
  line-height:1.3
}

/* ─── Drop zone ─── */
#drop-zone{
  border:2px dashed var(--color-border);border-radius:var(--radius);
  background:var(--color-surface);padding:calc(var(--space)*10) calc(var(--space)*6);
  text-align:center;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;
  max-width:700px;margin:0 auto;
  font-family:var(--font-body);font-size:.9rem;color:var(--color-muted)
}
#drop-zone.dz-over{
  border-color:var(--color-primary);border-style:solid;
  box-shadow:0 0 0 2px var(--color-primary);
  background:rgba(40,128,101,.08);color:rgba(40,128,101,.9)
}
#drop-zone .dz-icon{font-size:1.5rem;display:block;margin-bottom:calc(var(--space)*2)}
#drop-zone .dz-label{font-family:var(--font-display);font-size:.95rem;color:var(--color-body);margin-bottom:calc(var(--space)*2)}
#drop-zone .dz-small{font-family:var(--font-body);font-size:.75rem;color:var(--color-muted)}
#file-input{display:none}

/* ─── Stats bar ─── */
.st-bar{
  display:flex;flex-wrap:wrap;gap:calc(var(--space)*1);
  justify-content:center;padding:calc(var(--space)*2) calc(var(--space)*6);
  font-family:var(--font-body);font-size:.8rem;color:var(--color-muted);
  max-width:700px;margin:0 auto
}
.st-c{
  background:var(--color-surface);border-radius:0;
  padding:calc(var(--space)*1.5) calc(var(--space)*3);
  border:0;font-family:var(--font-mono);font-size:.75rem;
}
.st-n{font-family:var(--font-display);font-size:.9rem;color:var(--color-primary);font-weight:400}
.st-w .st-n{color:var(--color-accent)}
.st-w{color:var(--color-accent)}

/* ─── Summary ─── */
.sum-line{
  font-family:var(--font-body);font-size:.85rem;color:var(--color-muted);
  padding:calc(var(--space)*2) calc(var(--space)*6);
  max-width:700px;margin:0 auto
}
.a-word{color:var(--color-accent);font-weight:400}

/* ─── Results table ─── */
.table-wrap{
  width:100%;overflow-x:auto;
  padding:0 calc(var(--space)*1)
}
.sub-table{
  width:100%;border-collapse:collapse;
  font-family:var(--font-body);font-size:.8rem;
  background:var(--color-surface)
}
.sub-table th{
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--color-muted);
  text-align:left;padding:calc(var(--space)*1.5) calc(var(--space)*2);
  border-bottom:1px solid var(--color-border);white-space:nowrap
}
.sub-table td{
  padding:calc(var(--space)*1.5) calc(var(--space)*2);
  text-align:left;border-bottom:1px solid var(--color-border)
}
.sub-row:hover{background:#eeece8}
/* Price change row - subtle amber background */
.sub-row.row-cg td{background:#f5ede0}

/* Price change left stripe */
.sub-row.row-cg td:first-child{position:relative;overflow:hidden}
.sub-row.row-cg td:first-child::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:4px;background:var(--color-accent);opacity:.7
}

/* Keep/cancel toggle */
.tg{
  font-family:var(--font-mono);font-size:.65rem;cursor:pointer;
  background:none;border:1px solid var(--color-border);border-radius:var(--radius);
  padding:calc(var(--space)*0.5) calc(var(--space)*1.5);
  color:var(--color-muted);text-transform:uppercase;
  letter-spacing:.06em;white-space:nowrap;
  transition:all .15s ease
}
.tg-keep{color:var(--color-primary);border-color:var(--color-primary)}
.tg-cancel{color:var(--color-destructive);border-color:var(--color-destructive)}
.tg-keep:hover{background:var(--color-primary);color:#fff}
.tg-cancel:hover{background:var(--color-destructive);color:#fff}

.th-st,.td-st{width:2.2em;text-align:center}
.td-st{text-align:center}
.th-mc,.td-mc{text-align:left}
.th-iv,.td-iv,.th-am,.td-am,.th-yi,.td-yi,.th-nx,.td-nx{text-align:right;white-space:nowrap}
.td-am,.td-yi{font-family:var(--font-mono);text-align:right}
.th-cg,.td-cg{text-align:center;width:4.5em}
.td-ex{text-align:center;width:1.2em}

/* Expand button */
.exb{
  background:none;border:1px solid var(--color-border);border-radius:var(--radius);
  cursor:pointer;font-family:var(--font-mono);font-size:.75rem;
  color:var(--color-muted);padding:0 calc(var(--space)*1.2);
  line-height:1.4;transition:border-color .15s ease
}
.exb:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* Source transaction expand row */
.src-row td{border:none;padding:0}
.src-inner{
  background:var(--color-bg);padding:calc(var(--space)*3);
  border-top:1px solid var(--color-border)
}
.src-head{font-family:var(--font-mono);font-size:.7rem;color:var(--color-muted);margin-bottom:calc(var(--space)*2)}
.src-tbl{
  width:100%;border-collapse:collapse;
  font-family:var(--font-mono);font-size:.7rem;
  color:var(--color-body)
}
.src-tbl th{
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  color:var(--color-muted);padding:calc(var(--space)) calc(var(--space)*2);
  border-bottom:1px solid var(--color-border);letter-spacing:.04em
}
.src-tbl td{padding:calc(var(--space)) calc(var(--space)*2);border-bottom:none}

/* Change flag */
.chg{
  display:inline-block;font-family:var(--font-mono);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.06em;
  padding:calc(var(--space)*0.25) calc(var(--space)*1);
  border-radius:var(--radius);white-space:nowrap
}
.chg-up{
  background:#f0e2c8;
  color:var(--color-accent)
}
.chg-none{color:var(--color-primary);background:none}

/* ─── Download button ─── */
.dl-btn{
  font-family:var(--font-display);font-size:.9rem;text-transform:uppercase;
  letter-spacing:.08em;background:var(--color-primary);color:#fff;
  border:none;border-radius:var(--radius);
  padding:calc(var(--space)*2.5) calc(var(--space)*6);
  cursor:pointer;display:block;margin:calc(var(--space)*3) auto;
  transition:background .15s ease
}
.dl-btn:hover{background:#1a664d}

/* ─── Status messages ─── */
.loading-state,.error-state,.info-state,.empty-state{
  font-family:var(--font-body);font-size:.9rem;color:var(--color-muted);
  padding:calc(var(--space)*6);text-align:center;max-width:600px;margin:0 auto
}
.error-state{color:var(--color-destructive)}
.info-state{color:var(--color-accent)}

#results-container{min-height:calc(var(--space)*6)}

/* ─── Section content blocks ─── */
.content-block{
  max-width:700px;margin:0 auto;
  padding:calc(var(--space)*4) calc(var(--space)*6);
  font-family:var(--font-body);font-size:.85rem;line-height:1.6;
  color:var(--color-body)
}
.content-block p{margin-bottom:calc(var(--space)*3)}

.feature-list{
  padding:0;margin:0;list-style:none;
  font-family:var(--font-body);font-size:.85rem;line-height:1.5;
  color:var(--color-body)
}
.feature-list li{
  padding:calc(var(--space)*1.5) 0 calc(var(--space)*1.5) calc(var(--space)*3);
  position:relative
}
.feature-list li::before{
  content:'→';position:absolute;left:0;
  font-family:var(--font-mono);color:var(--color-primary);font-size:.75rem
}

.limit-list{
  padding:0;margin:0;list-style:none;
  font-family:var(--font-body);font-size:.8rem;line-height:1.45;
  color:var(--color-muted)
}
.limit-list li{
  padding:calc(var(--space)*1.5) 0 calc(var(--space)*1.5) calc(var(--space)*3);
  position:relative
}
.limit-list li::before{
  content:'—';position:absolute;left:0;
  font-family:var(--font-mono);color:var(--color-muted);font-size:.7rem
}

/* ─── Figure / diagram ─── */
.figure-wrap{
  max-width:700px;margin:0 auto;
  padding:calc(var(--space)*4) calc(var(--space)*6)
}
.figure-wrap figcaption{
  font-family:var(--font-mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-muted);margin-top:calc(var(--space)*2)
}

/* ─── How it works steps ─── */
.steps{max-width:700px;margin:0 auto;padding:calc(var(--space)*4) calc(var(--space)*6)}
.step{
  margin-bottom:calc(var(--space)*4);
  border-left:3px solid var(--color-border);padding-left:calc(var(--space)*3)
}
.step .step-head{
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--color-accent);margin-bottom:calc(var(--space)*1)
}
.step p{font-family:var(--font-body);font-size:.85rem;line-height:1.5;color:var(--color-body)}

/* ─── Footer ─── */
footer.site-footer{
  margin-top:auto;
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  padding:calc(var(--space)*6) calc(var(--space)*6);
  text-align:center
}
footer.site-footer .footer-nav{
  display:flex;flex-wrap:wrap;gap:calc(var(--space)*2);
  justify-content:center;margin-bottom:calc(var(--space)*3)
}
footer.site-footer .footer-nav a{
  font-family:var(--font-body);font-size:.8rem;
  color:var(--color-muted);text-decoration:none
}
footer.site-footer .footer-nav a:hover{color:var(--color-primary)}
footer.site-footer .footer-copy{
  font-family:var(--font-mono);font-size:.7rem;
  color:var(--color-muted);text-transform:uppercase;letter-spacing:.06em
}

/* ─── Generic page content ─── */
.page-content{
  max-width:700px;margin:0 auto;
  padding:calc(var(--space)*6) calc(var(--space)*6);
  font-family:var(--font-body);font-size:.85rem;line-height:1.65;
  color:var(--color-body)
}
.page-content h1{
  font-family:var(--font-display);font-size:1.4rem;font-weight:400;
  color:var(--color-body);margin-bottom:calc(var(--space)*4)
}
.page-content h2{
  font-family:var(--font-display);font-size:1.1rem;font-weight:400;
  color:var(--color-body);margin-bottom:calc(var(--space)*2);margin-top:calc(var(--space)*4)
}
.page-content p{margin-bottom:calc(var(--space)*3)}
.page-content ul{padding:0 0 0 calc(var(--space)*4);margin-bottom:calc(var(--space)*3)}
.page-content ul li{margin-bottom:calc(var(--space)*1.5)}
.page-content .notice{
  font-family:var(--font-mono);font-size:.75rem;
  background:var(--color-bg);border-left:3px solid var(--color-accent);
  padding:calc(var(--space)*3);color:var(--color-body);
  margin-bottom:calc(var(--space)*4)
}
.page-content .notice strong{color:var(--color-accent)}

/* ─── Privacy/Terms last-updated ─── */
.last-updated{
  font-family:var(--font-mono);font-size:.7rem;
  color:var(--color-muted);margin-bottom:calc(var(--space)*4)
}

/* ─── Dark mode overrides ─── */
[data-theme="dark"] #drop-zone.dz-over{
  border-color:var(--color-primary);border-style:solid;
  box-shadow:0 0 0 2px var(--color-primary)
}
[data-theme="dark"] .sub-row:hover{background:#2a2a32}
[data-theme="dark"] .sub-row.row-cg td{background:#2f2a20}
[data-theme="dark"] .chg-up{background:#3a3428;color:var(--color-accent)}
[data-theme="dark"] .dl-btn{background:var(--color-primary)}
[data-theme="dark"] .dl-btn:hover{background:#2e8a6a}
[data-theme="dark"] .src-inner{background:#1e1e26}
[data-theme="dark"] .st-n{color:var(--color-primary)}
[data-theme="dark"] .st-w .st-n{color:var(--color-accent)}
[data-theme="dark"] .st-w{color:var(--color-accent)}

/* ─── Responsive ─── */
/* ─── Pro: History Panel ─── */
.hist-panel{
  max-width:700px;margin:0 auto;
  padding:calc(var(--space)*4) calc(var(--space)*6);
  font-family:var(--font-body);font-size:.8rem;
  color:var(--color-muted)
}
.hist-list{display:flex;flex-direction:column;gap:calc(var(--space)*1)}
.hist-item{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:calc(var(--space)*1.5) calc(var(--space)*3);
  font-family:var(--font-mono);font-size:.7rem;
  display:flex;flex-wrap:wrap;gap:calc(var(--space)*2)
}
.hist-date{color:var(--color-muted)}
.hist-n{color:var(--color-primary)}
.hist-amt{color:var(--color-body)}
.hist-cg{color:var(--color-accent)}

@media(max-width:768px){
  :root{font-size:14px}
  header.site-header{padding:0 calc(var(--space)*2)}
  .hero{padding:calc(var(--space)*6) calc(var(--space)*3)}
  .hero h1{font-size:1.4rem}
  .content-block,.steps,.figure-wrap{padding:calc(var(--space)*3) calc(var(--space)*3)}
  #drop-zone{padding:calc(var(--space)*6) calc(var(--space)*3)}
  .st-bar{padding:calc(var(--space)*2) calc(var(--space)*3)}
  .sub-table td,.sub-table th{padding:calc(var(--space)) calc(var(--space)*1.5)}
  footer.site-footer{padding:calc(var(--space)*4) calc(var(--space)*3)}
  .page-content{padding:calc(var(--space)*4) calc(var(--space)*3)}
}
@media(max-width:600px){
}