/* EstateMate Design System — Upload Portal
 * Tokens source: EstateMate Brand Guidelines v1.0 (March 2026).
 * Geist font is intentionally omitted — system fallbacks render cleanly and
 * keep the page free of third-party font fetches.
 */

:root {
  /* ─── COLORS ─── */
  --em-primary-dark:   #122420;
  --em-primary:        #1A332F;
  --em-primary-light:  #234540;

  --em-gold:           #D4A853;
  --em-gold-light:     #E0BD74;

  --em-success:        #2D8B75;
  --em-warning:        #E5A855;
  --em-error:          #C75B4A;

  --em-bg:             #F9F9F7;
  --em-card:           #FFFFFF;

  --em-tint-green:     #E8F0EE;
  --em-tint-gold:      #FDF6E8;
  --em-tint-teal:      #E6F4F1;
  --em-tint-coral:     #FBE9E7;

  --em-text-heading:   #1F2937;
  --em-text-body:      #374151;
  --em-text-secondary: #6B7280;
  --em-text-muted:     #9CA3AF;

  --em-text-on-dark:       #FFFFFF;
  --em-text-on-dark-muted: #A3B8B3;

  --em-border:       #E5E7EB;
  --em-border-light: #F3F4F6;

  /* ─── TYPE ─── */
  --em-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --em-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ─── SPACING / RADII / SHADOWS / TRANSITIONS ─── */
  --em-r-sm:   6px;
  --em-r-md:   8px;
  --em-r-lg:   12px;
  --em-r-xl:   16px;
  --em-r-pill: 999px;

  --em-shadow-xs:   0 1px 2px rgba(18, 36, 32, 0.04);
  --em-shadow-sm:   0 1px 3px rgba(18, 36, 32, 0.06), 0 1px 2px rgba(18, 36, 32, 0.04);
  --em-shadow-md:   0 4px 12px rgba(18, 36, 32, 0.08), 0 2px 4px rgba(18, 36, 32, 0.04);
  --em-shadow-lg:   0 12px 32px rgba(18, 36, 32, 0.10), 0 4px 8px rgba(18, 36, 32, 0.06);

  --em-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --em-t-fast: 120ms var(--em-ease);
  --em-t-base: 200ms var(--em-ease);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--em-font);
  font-size: 16px;
  color: var(--em-text-body);
  background: var(--em-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
button { font: inherit; cursor: pointer; }
a { color: var(--em-primary); }

/* ─── HEADER ─── */
.site-header {
  background: var(--em-primary);
  color: var(--em-text-on-dark);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 15px;
  color: #fff;
}
.wordmark__pipe {
  color: var(--em-gold);
  font-weight: 400;
  margin: 0 0.35em;
}
.header-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--em-text-on-dark-muted);
  font-size: 13px;
}
.header-meta__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--em-success);
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 48px 32px 64px; }

/* ─── SESSION STRIP ─── */
.session {
  background: var(--em-card);
  border: 1px solid var(--em-border);
  border-radius: var(--em-r-lg);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--em-shadow-sm);
  margin-bottom: 32px;
}
.session__overline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--em-gold);
  margin: 0 0 8px;
}
.session__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--em-text-heading);
  margin: 0 0 4px;
  line-height: 1.3;
}
.session__meta { font-size: 14px; color: var(--em-text-secondary); margin: 0; }
.session__meta strong { color: var(--em-text-heading); font-weight: 600; }
.session__expiry { text-align: right; border-left: 1px solid var(--em-border); padding-left: 32px; }
.session__expiry .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--em-text-muted);
  margin: 0 0 6px;
}
.session__expiry .value {
  font-size: 15px;
  font-weight: 600;
  color: var(--em-text-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.session__expiry .time {
  font-size: 12px;
  color: var(--em-text-secondary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ─── PAGE HEAD ─── */
.page-head { margin: 0 0 24px; }
.page-head__overline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--em-gold);
  margin: 0 0 10px;
}
.page-head h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--em-text-heading);
  margin: 0 0 8px;
  line-height: 1.15;
}
.page-head p {
  font-size: 16px;
  color: var(--em-text-secondary);
  margin: 0;
  max-width: 620px;
  line-height: 1.55;
}

/* ─── DROPZONE ─── */
.dropzone {
  background: var(--em-card);
  border: 1.5px dashed #CBD5D1;
  border-radius: var(--em-r-lg);
  padding: 56px 32px;
  text-align: center;
  transition: border-color var(--em-t-base), background var(--em-t-base), box-shadow var(--em-t-base);
  cursor: pointer;
  outline: none;
  position: relative;
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--em-primary);
  background: #FDFDFB;
  box-shadow: var(--em-shadow-sm);
}
.dropzone.is-dragging {
  border-color: var(--em-gold);
  background: var(--em-tint-gold);
  box-shadow: var(--em-shadow-md);
}
.dropzone__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--em-tint-green);
  color: var(--em-primary);
  display: grid;
  place-items: center;
}
.dropzone__icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dropzone__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--em-text-heading);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.dropzone__sub {
  font-size: 14px;
  color: var(--em-text-secondary);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.dropzone__sub .link {
  color: var(--em-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--em-gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  cursor: pointer;
}
.dropzone__sub .link:hover { text-decoration-color: var(--em-gold-light); }
.dropzone__or { color: var(--em-text-muted); }
.dropzone__hint {
  font-size: 12px;
  color: var(--em-text-muted);
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.5;
}

/* Scanning state (while enumerating a big folder) */
.dropzone__scanning {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.dropzone__scanning-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--em-text-body);
  letter-spacing: -0.005em;
}
.dropzone.is-scanning { cursor: progress; pointer-events: none; }
.dropzone.is-scanning .dropzone__default { display: none; }
.dropzone.is-scanning .dropzone__scanning { display: flex; }

.spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 3px solid var(--em-tint-green);
  border-top-color: var(--em-primary);
  border-radius: 999px;
  animation: em-spin 0.9s linear infinite;
}
@keyframes em-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}

/* ─── SECTION BLOCK HEADINGS ─── */
section.block { margin-top: 40px; }
.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--em-border);
}
.block__head h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--em-text-heading);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.block__head .summary {
  font-size: 13px;
  color: var(--em-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Collapsible block head — native <button> so Space/Enter work for free. */
.block__head--toggle {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--em-border);
  padding: 0 0 12px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: color var(--em-t-base);
}
.block__head--toggle:hover h2 { color: var(--em-primary); }
.block__head--toggle:focus-visible {
  outline: 2px solid var(--em-accent, var(--em-primary));
  outline-offset: 4px;
  border-radius: var(--em-r-sm);
}
.block__head--toggle .chevron {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--em-t-base);
  color: var(--em-text-secondary);
}
.block--collapsible.is-collapsed .block__head--toggle .chevron { transform: rotate(-90deg); }
.block--collapsible.is-collapsed .history { display: none; }

/* ─── Issue lists (errors + unsupported) ─── */
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list__hint {
  font-size: 13px;
  color: var(--em-text-secondary);
  margin: 0 0 12px;
  line-height: 1.55;
}
.issue-list__truncated {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--em-text-muted);
  text-align: center;
  font-style: italic;
}
.issue-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 14px;
  background: var(--em-card);
  border: 1px solid var(--em-border);
  border-radius: var(--em-r-sm);
  margin-bottom: 6px;
}
.issue-row:hover { border-color: #D1D5DB; }
.issue-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.issue-row__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.issue-row--error   .issue-row__icon { background: var(--em-tint-coral); color: var(--em-error); }
.issue-row--unsupported .issue-row__icon { background: var(--em-border-light); color: var(--em-text-secondary); }

.issue-row__body { min-width: 0; }
.issue-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--em-text-heading);
  font-family: var(--em-font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.35;
}
.issue-row__reason {
  font-size: 13px;
  color: var(--em-text-secondary);
  margin: 2px 0 0;
  line-height: 1.4;
}
.issue-row__time {
  font-size: 12px;
  color: var(--em-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 4px;
}

/* ─── QUEUE (live upload) ─── */
.file-list { list-style: none; margin: 0; padding: 0; }
.file-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--em-card);
  border: 1px solid var(--em-border);
  border-radius: var(--em-r-md);
  margin-bottom: 8px;
  transition: border-color var(--em-t-base), box-shadow var(--em-t-base);
}
.file-row:hover { border-color: #D1D5DB; box-shadow: var(--em-shadow-xs); }
.file-row__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--em-r-sm);
  background: var(--em-tint-green);
  color: var(--em-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.file-row__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.file-row__body { min-width: 0; }
.file-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--em-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 4px;
}
.file-row__meta {
  font-size: 12px;
  color: var(--em-text-secondary);
  font-variant-numeric: tabular-nums;
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.file-row__meta .sep { color: var(--em-text-muted); }
.file-row--uploading .file-row__body { display: grid; grid-template-rows: auto auto; gap: 6px; }
.progress {
  height: 4px;
  background: var(--em-border-light);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--em-primary);
  border-radius: 999px;
  transition: width 200ms linear;
}
.file-row--done .progress__bar { background: var(--em-success); }
.file-row--error .progress__bar { background: var(--em-error); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip--uploading { background: var(--em-tint-gold);  color: #8A6D2B; }
.chip--done      { background: var(--em-tint-teal);  color: var(--em-success); }
.chip--error     { background: var(--em-tint-coral); color: var(--em-error); }
.chip--queued    { background: var(--em-border-light); color: var(--em-text-secondary); }
.chip__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--em-r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--em-text-muted);
  display: grid;
  place-items: center;
  transition: background var(--em-t-base), color var(--em-t-base), border-color var(--em-t-base);
}
.icon-btn:hover { background: var(--em-border-light); color: var(--em-text-body); border-color: var(--em-border); }
.icon-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--em-text-muted);
  font-size: 14px;
  background: var(--em-card);
  border: 1px dashed var(--em-border);
  border-radius: var(--em-r-md);
}

/* ─── HISTORY (grouped receipts) ─── */
.history {
  background: var(--em-card);
  border: 1px solid var(--em-border);
  border-radius: var(--em-r-lg);
  overflow: hidden;
  box-shadow: var(--em-shadow-sm);
}
.history__search {
  padding: 14px 16px;
  border-bottom: 1px solid var(--em-border);
  background: #FCFCFA;
}
.search { position: relative; display: flex; align-items: center; }
.search svg {
  position: absolute; left: 12px;
  width: 16px; height: 16px;
  stroke: var(--em-text-muted); stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.search input {
  width: 100%; height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--em-border);
  border-radius: var(--em-r-sm);
  background: var(--em-card);
  font: inherit; font-size: 14px;
  color: var(--em-text-heading);
  transition: border-color var(--em-t-base), box-shadow var(--em-t-base);
}
.search input::placeholder { color: var(--em-text-muted); }
.search input:focus {
  outline: none;
  border-color: var(--em-primary);
  box-shadow: 0 0 0 3px rgba(26, 51, 47, 0.08);
}

.h-group {
  padding: 14px 16px 8px;
  background: #F9F9F7;
  border-top: 1px solid var(--em-border);
  border-bottom: 1px solid var(--em-border-light);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--em-text-secondary);
  display: flex; justify-content: space-between; align-items: center;
}
.h-group:first-child { border-top: none; }
.h-group .group-meta {
  font-weight: 500; color: var(--em-text-muted);
  letter-spacing: 0; text-transform: none;
  font-size: 12px;
}

.h-entry {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--em-border-light);
  font-size: 14px;
}
.h-entry:last-child { border-bottom: none; }
.h-entry:hover { background: #FDFDFB; }
.h-entry__icon {
  width: 32px; height: 32px;
  border-radius: var(--em-r-sm);
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  flex-shrink: 0;
}
.h-entry__icon--pdf  { background: var(--em-tint-coral); color: var(--em-error); }
.h-entry__icon--xlsx { background: var(--em-tint-teal);  color: var(--em-success); }
.h-entry__icon--docx { background: var(--em-tint-gold);  color: #8A6D2B; }
.h-entry__icon--img  { background: var(--em-tint-green); color: var(--em-primary); }
.h-entry__icon--csv  { background: var(--em-tint-green); color: var(--em-primary); }
.h-entry__icon--other{ background: var(--em-border-light); color: var(--em-text-secondary); }

.h-entry__body { min-width: 0; }
.h-entry__name {
  font-size: 14px; font-weight: 500;
  color: var(--em-text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.h-entry__size {
  font-size: 13px;
  color: var(--em-text-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.h-entry__time {
  font-size: 13px;
  color: var(--em-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}

.history__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--em-border);
  background: #FCFCFA;
  font-size: 13px;
  color: var(--em-text-secondary);
}
.history__total { font-size: 13px; color: var(--em-text-secondary); font-variant-numeric: tabular-nums; }
.history__total strong { color: var(--em-text-heading); font-weight: 600; }

@media (max-width: 720px) {
  .h-entry { grid-template-columns: 32px 1fr auto; }
  .h-entry__size { display: none; }
  .session { grid-template-columns: 1fr; }
  .session__expiry { border-left: 0; padding-left: 0; text-align: left; }
  main { padding: 24px 20px 40px; }
  .page-head h1 { font-size: 28px; }
}

/* ─── INVALID / EXPIRED CARD ─── */
.invalid-card {
  background: var(--em-card);
  border: 1px solid var(--em-border);
  border-radius: var(--em-r-lg);
  padding: 48px 40px;
  box-shadow: var(--em-shadow-sm);
  max-width: 560px;
  margin: 48px auto;
  text-align: left;
}
.invalid-card__icon {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--em-tint-coral);
  color: var(--em-error);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.invalid-card__icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.invalid-card h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--em-text-heading);
  margin: 0 0 12px;
}
.invalid-card p {
  font-size: 15px;
  color: var(--em-text-secondary);
  margin: 0 0 12px;
  line-height: 1.6;
}
.invalid-card p:last-child { margin-bottom: 0; }
.invalid-card strong { color: var(--em-text-heading); font-weight: 600; }

/* ─── FOOTER ─── */
.site-footer {
  border-top: 1px solid var(--em-border);
  padding: 24px 32px;
  margin-top: 48px;
}
.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: var(--em-text-muted);
}
.site-footer a {
  color: var(--em-text-secondary);
  text-decoration: none;
  margin-left: 20px;
}
.site-footer a:hover { color: var(--em-text-heading); }

@media (prefers-reduced-motion: reduce) {
  .dropzone,
  .progress__bar,
  .icon-btn,
  .file-row { transition: none; }
}