/* TFI Storefront look (from the Storefront design spec). Loaded after styles.css. */
:root{
  --bg:#f6f3ee; --card:#ffffff; --tx:#16181d; --head:#121726; --mut:#5b606b;
  --bd:#e7e1d7; --bd-input:#e0d9cd;
  --or:#c2410c; --or2:#9a3412; --or-soft:#fde8d9; --or-soft-bd:#f3c9ad;
  --navy:#1e2a44; --navy-hover:#2c3b5e;
  --ok:#047857; --warn:#b45309; --err:#b91c1c;
  --r-card:22px; --r-box:18px; --r-btn:12px; --r-input:12px; --r-pill:999px;
  --sh-card:0 1px 0 #fff inset,0 2px 4px rgba(30,42,68,.04),0 34px 64px -26px rgba(30,42,68,.26);
  --sh-card-hover:0 1px 0 #fff inset,0 2px 4px rgba(30,42,68,.05),0 44px 80px -28px rgba(30,42,68,.32);
  --sh-btn-or:0 10px 22px -8px rgba(194,65,12,.65),0 1px 0 rgba(255,255,255,.3) inset;
  --sh-btn-navy:0 10px 22px -10px rgba(30,42,68,.75),0 1px 0 rgba(255,255,255,.16) inset;
  --font-head:'Sora','Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
}

@media screen{
body{color:var(--tx);font-family:var(--font-body);font-size:16px;line-height:1.55;
  background:radial-gradient(900px 420px at 85% 0%,rgba(232,89,12,.08),transparent 70%),var(--bg);background-color:var(--bg)}
h1,h2,h3{font-family:var(--font-head);color:var(--head)}
a{color:var(--or2)} a:hover{color:var(--or)}

/* Header */
.tfi-header{position:sticky;top:0;z-index:30;background:rgba(246,243,238,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);box-shadow:none;color:var(--tx)}
.header-container{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wm{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--tx);text-decoration:none}
.wm b{color:var(--or);font-weight:800}
.header-nav{display:flex;align-items:center;gap:22px}
.header-nav .nav-link{font-size:15px;font-weight:500;color:#2b2f38;text-decoration:none;background:none;padding:0}
.header-nav .nav-link:hover{color:var(--or)}
.header-nav .btn-secondary,.header-nav .btn-secondary:hover{color:#fff}
.header-nav .btn{padding:10px 18px}

/* Layout */
.main-content{max-width:1280px;margin:0 auto;padding:56px 24px 72px}
.tool-hero{text-align:center;margin-bottom:40px}
.eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.tool-title{font-family:var(--font-head);font-size:60px;font-weight:800;letter-spacing:-.03em;line-height:1.04;color:var(--head);margin-bottom:16px}
.tool-subtitle{font-size:19px;line-height:1.55;color:var(--mut);max-width:640px;margin:0 auto 22px}
.privacy-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ok);background:#ecfdf5;border:1px solid #bbf0d6;border-radius:var(--r-pill);padding:8px 16px}
.privacy-badge svg{width:16px;height:16px;flex-shrink:0}

/* Cards */
.upload-section,.results-section,.gate-card{background:linear-gradient(180deg,#fff,#fdfaf6);border:1px solid rgba(30,42,68,.08);border-radius:var(--r-card);padding:30px;box-shadow:var(--sh-card)}
.results-section{margin-top:32px}
.gate-card{max-width:520px;margin:40px auto;text-align:center}
.gate-title{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--head);margin-bottom:10px}
.gate-message{color:var(--mut);margin-bottom:22px}

/* Upload boxes */
.upload-grid{gap:20px}
.upload-box{background:#fff;border:2px dashed var(--bd-input);border-radius:var(--r-box);padding:30px 24px;box-shadow:none;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.upload-box:hover,.upload-box:focus-visible{border-color:var(--or);background:#fffaf6;outline:none}
.upload-box.is-dragover{border-color:var(--or);border-style:solid;background:var(--or-soft);transform:translateY(-2px)}
.upload-box.has-file{border-style:solid;border-color:var(--or-soft-bd);background:#fffaf6}
.upload-icon{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px;
  background:linear-gradient(180deg,#33477a,#18223a);box-shadow:var(--sh-btn-navy)}
.upload-icon.orange{background:linear-gradient(180deg,#f06e26,#b83f0a);box-shadow:var(--sh-btn-or)}
.upload-icon svg{width:24px;height:24px}
.upload-box-title{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--head);margin-bottom:6px}
.upload-prompt{color:var(--mut);font-size:15px}
.upload-formats{color:var(--mut);font-size:13px}
.file-info{background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 2px 4px rgba(30,42,68,.04);margin-top:16px}
.file-name{color:var(--tx);font-weight:700}
.file-size{color:var(--mut)}
.btn-text{color:var(--or2);font-weight:700;text-decoration:none;background:none;border:0;cursor:pointer;font:inherit;font-size:14px}
.btn-text:hover{color:var(--or)}
.compare-action-bar{margin-top:26px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font:inherit;font-weight:700;font-size:15px;padding:13px 18px;border-radius:var(--r-btn);transition:transform .15s,box-shadow .15s}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn-primary{color:#fff;background:linear-gradient(180deg,#e05a1a,#b93c0a);box-shadow:var(--sh-btn-or)}
.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,#e05a1a,#b93c0a);color:#fff}
.btn-secondary{color:#fff;background:linear-gradient(180deg,#2c3c63,#18223a);box-shadow:var(--sh-btn-navy);border:0}
.btn-secondary:hover:not(:disabled){background:var(--navy-hover);color:#fff}
.btn-outline{color:var(--tx);background:#fff;border:1px solid var(--bd);box-shadow:var(--sh-card)}
.btn-outline:hover:not(:disabled){border-color:var(--or);background:#fff;color:var(--tx)}
.btn-pill{border-radius:var(--r-pill)}
.btn-large{font-size:16px;padding:15px 34px;min-width:220px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* Results */
.summary-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px;font-size:inherit}
.stat-tile{background:#fff;border:1px solid var(--bd);border-radius:var(--r-box);padding:16px 18px;box-shadow:0 2px 4px rgba(30,42,68,.04)}
.stat-num{display:block;font-family:var(--font-head);font-size:30px;font-weight:800;line-height:1.1;color:var(--head)}
.stat-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.stat-tile.added .stat-num{color:var(--ok)}
.stat-tile.removed .stat-num{color:var(--err)}
.stat-tile.sections .stat-num{color:var(--or)}
.stat-note{grid-column:1/-1;color:var(--mut);font-weight:600}
.results-toolbar{border-bottom:1px solid var(--bd);padding-bottom:20px;margin-bottom:22px}
.toolbar-actions{gap:14px;align-items:center}
.view-toggle{background:#efe9df;border:1px solid var(--bd);border-radius:var(--r-pill);padding:4px;display:inline-flex;gap:4px}
.btn-toggle{border:0;background:transparent;color:var(--mut);font:inherit;font-weight:700;font-size:14px;padding:8px 16px;border-radius:var(--r-pill);cursor:pointer}
.btn-toggle.active{background:#fff;color:var(--or);box-shadow:0 2px 6px rgba(30,42,68,.12)}
.change-counter{color:var(--mut);font-weight:600;font-size:14px}
.change-navigation .btn,.toolbar-utility .btn{padding:10px 14px;font-size:14px}

/* Diff views */
.diff-container{border:1px solid var(--bd);border-radius:var(--r-box);overflow:hidden;background:#fff}
.diff-sbs-table{border:0;border-radius:0}
.diff-sbs-header-row{background:linear-gradient(160deg,#26365e,#121a2e)}
.diff-sbs-header{color:#fff;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.02em;padding:12px 16px}
.diff-sbs-row{border-bottom:1px solid #f0ebe3}
.diff-sbs-row-modified,.diff-sbs-row-added,.diff-sbs-row-removed{background:#fffaf5}
.diff-line-number{color:#a39e95;font-size:12px}
.diff-removed{color:var(--err);background:#fde8e8;text-decoration:line-through;border-radius:4px;padding:1px 2px}
.diff-added{color:#166534;background:#dcfce7;text-decoration:underline;text-decoration-color:rgba(22,101,52,.4);border-radius:4px;padding:1px 2px}
.current-change-focus{outline:2px solid var(--or) !important;outline-offset:-2px;background:var(--or-soft) !important}
.diff-inline-flow{padding:22px 24px;line-height:1.8}
.diff-notice-empty{padding:28px;text-align:center;color:var(--ok);font-weight:700}
.error-banner{background:#fef2f2;border:1px solid #fecaca;color:var(--err);border-radius:12px;font-weight:600}

/* Footer */
.tfi-footer{border-top:1px solid var(--bd);margin-top:24px}
.tfi-footer .footer-inner{max-width:1280px;margin:0 auto;padding:26px 24px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;font-size:14px;color:var(--mut)}
.tfi-footer nav{display:flex;gap:20px;flex-wrap:wrap}
.tfi-footer a{color:var(--mut);text-decoration:none;font-weight:500}
.tfi-footer a:hover{color:var(--or)}
}

@media screen and (max-width:640px){
.main-content{padding:32px 18px 48px}
.header-container{padding:12px 18px}
.header-nav .nav-link{display:none}
.wm{font-size:18px}
.privacy-badge{text-align:left;border-radius:14px}
.tool-title{font-size:31px;line-height:1.1}
.upload-section,.results-section,.gate-card{padding:22px}
.summary-line{grid-template-columns:1fr}
}

@media print{
.tfi-footer{display:none !important}
}

@media (prefers-reduced-motion:reduce){
.btn,.upload-box{transition:none}
}