/* subsummit2026 — page-specific styles layered on top of finsi-bundle.css */
:root {
  --ss-navy: #182440;
  --ss-text: #1e2d4b;
  --ss-muted: #5a6577;
  --ss-orange: #ff7a00;
  --ss-orange-dark: #e66c00;
  --ss-blue: #106eea;
  --ss-bg-light: #f8f9fb;
  --ss-bg-blue: #e8f0fe;
  --ss-border: #e5e8ee;
  --ss-green: #16a34a;
  --ss-red: #dc2626;
}

/* Override finsi.ai's hero — their CSS expects a background image at
   /assets/img/hero-bg.jpg that we don't host. Replace with our navy gradient. */
#hero,
.hero.section.light-background,
.hero.section {
  background-image: none !important;
  background: linear-gradient(180deg, #182440 0%, #0f1a30 100%) !important;
  color: #fff !important;
  padding: 5rem 1.5rem 5rem !important;
  position: relative;
}
#hero h1, .hero h1 { color: #fff !important; text-shadow: none !important; }
#hero .lede, .hero .lede { color: rgba(255,255,255,0.85) !important; }
#hero .brand-pill { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.18) !important; color: #fff !important; }

/* Inbox promo (forward-an-email CTA) */
.ss-inbox-promo {
  margin: 0 auto 1.25rem;
  max-width: 720px;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-left: 4px solid var(--ss-orange);
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--ss-text);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  box-shadow: 0 4px 10px rgba(24, 36, 64, 0.04);
}
.ss-inbox-promo .badge {
  display: inline-block;
  background: rgba(255, 122, 0, 0.12);
  color: var(--ss-orange);
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.ss-inbox-promo a { color: var(--ss-blue); }
.ss-inbox-promo .muted { display: inline-block; margin-top: 0.35rem; color: var(--ss-muted); font-size: 0.84rem; }
.ss-inbox-promo .muted em { font-style: normal; font-weight: 600; color: var(--ss-text); }
.results-page .ss-inbox-promo { max-width: 1180px; }

/* Hero pill */
.brand-pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(16,110,234,0.25);
  border-radius: 999px;
  background: var(--ss-bg-blue);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
  color: var(--ss-blue);
  text-transform: uppercase;
  font-weight: 600;
}
.brand-pill .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-orange); margin-right: 0.5rem; vertical-align: middle; }
.lede { font-size: 1.1rem; color: var(--ss-muted); margin: 0 auto; max-width: 620px; line-height: 1.55; }

/* Form section */
.form-section { padding: 1rem 0 5rem; }
.form-section .container { max-width: 720px; }
.ss-card {
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 14px;
  padding: 2.2rem;
  box-shadow: 0 10px 30px rgba(24, 36, 64, 0.06);
}
.ss-field { display: block; margin-bottom: 1.25rem; }
.ss-field > span, .ss-field > legend { display: block; margin-bottom: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--ss-text); letter-spacing: 0.01em; }
.ss-field input[type="url"], .ss-field input[type="email"] {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--ss-bg-light);
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  color: var(--ss-text);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ss-field input:focus {
  outline: none;
  border-color: var(--ss-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16, 110, 234, 0.12);
}
.ss-field.holidays { border: none; margin: 0 0 1.5rem; padding: 0; }
.ss-field.holidays > label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0.4rem 0.4rem 0;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
  background: var(--ss-bg-light);
  transition: all .15s;
  user-select: none;
  color: var(--ss-text);
}
.ss-field.holidays > label:hover { border-color: var(--ss-blue); }
.ss-field.holidays input[type="checkbox"] { accent-color: var(--ss-orange); margin-right: 0.1rem; }
.ss-field.holidays label:has(input:checked) { background: var(--ss-bg-blue); border-color: var(--ss-blue); }
.cf-turnstile { margin: 1.25rem 0; }
#submitForm button[type="submit"] {
  background: var(--ss-orange);
  color: #fff;
  border: none;
  padding: 1rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  transition: background .15s, transform .05s;
}
#submitForm button[type="submit"]:hover { background: var(--ss-orange-dark); }
#submitForm button[type="submit"]:active { transform: scale(0.99); }
#submitForm button:disabled { opacity: 0.6; cursor: progress; }
.fine { margin: 1rem 0 0; font-size: 0.84rem; color: var(--ss-muted); text-align: center; }
.error { margin: 1rem 0 0; color: var(--ss-red); font-size: 0.95rem; font-weight: 500; }

/* ============ RESULTS ============ */
.results-hero { padding-bottom: 2rem; }
.grid-section { padding: 1rem 0 5rem; background: var(--ss-bg-light); }
.overall {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ss-muted);
}
.overall .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-muted); display: inline-block; }
.overall.running .dot { background: var(--ss-orange); animation: pulse 1.4s ease-in-out infinite; }
.overall.done { color: var(--ss-green); border-color: rgba(22,163,74,0.25); }
.overall.done .dot { background: var(--ss-green); }
.overall.failed, .overall.partial { color: var(--ss-red); border-color: rgba(220,38,38,0.25); }
.overall.failed .dot, .overall.partial .dot { background: var(--ss-red); }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.holiday { margin: 2rem 0 3rem; }
.holiday h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 1rem; color: var(--ss-text); letter-spacing: -0.01em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tile {
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(24, 36, 64, 0.04);
  transition: box-shadow .15s;
}
.tile:hover { box-shadow: 0 6px 18px rgba(24, 36, 64, 0.08); }
.tile-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ss-border);
  font-size: 0.74rem;
  color: var(--ss-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tile-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; }
.tile-body img { width: 100%; height: auto; border-radius: 8px; display: block; background: var(--ss-bg-light); }
.tile.pending .tile-body, .tile.running .tile-body { min-height: 200px; }
.tile.done { border-color: rgba(22, 163, 74, 0.25); }
.tile.failed { border-color: rgba(220, 38, 38, 0.25); background: #fff7f7; }
.tile.failed .fail-msg { color: var(--ss-red); font-size: 0.9rem; padding: 1rem; text-align: center; }
.tile .copy { width: 100%; padding-top: 0.75rem; border-top: 1px dashed var(--ss-border); }
.tile .copy strong { display: block; font-size: 1rem; margin-bottom: 0.35rem; color: var(--ss-text); font-weight: 700; }
.tile .copy p { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--ss-muted); line-height: 1.5; }
.tile .copy .cta {
  display: inline-block;
  background: var(--ss-orange);
  color: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-link {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: var(--ss-orange);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
}
.btn-link:hover { background: var(--ss-orange-dark); color: #fff; text-decoration: none; }

/* Email tile thumbnail — clickable, opens full email in a new tab */
.email-thumb-link {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  position: relative;
}
.email-thumb-link:hover { text-decoration: none; }
.email-thumb-frame {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  background: var(--ss-bg-light);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.email-thumb-link:hover .email-thumb-frame {
  border-color: var(--ss-orange);
  box-shadow: 0 8px 22px rgba(24, 36, 64, 0.12);
  transform: translateY(-1px);
}
.email-thumb-frame iframe {
  /* Render the email at its native 600px width, then scale the whole tile down
     so it fits nicely in the tile column. Pointer events disabled so the
     wrapping anchor catches the click. */
  width: 600px;
  height: 760px;
  border: 0;
  display: block;
  transform-origin: top left;
  transform: scale(0.62);
  pointer-events: none;
}
.email-thumb-frame::after {
  /* Fade-out gradient at the bottom — signals there's more, click to see all */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);
  pointer-events: none;
}
.email-thumb-hint {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ss-orange);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.email-thumb-link:hover .email-thumb-hint { text-decoration: underline; }
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--ss-border);
  border-top-color: var(--ss-orange);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.pending-label { font-size: 0.82rem; color: var(--ss-muted); letter-spacing: 0.04em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Add-another-holiday section on results page */
.add-holidays {
  margin: 3rem 0 2rem;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 12px;
}
.add-holidays h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--ss-text);
}
.add-holidays-sub {
  margin: 0 0 1.25rem;
  color: var(--ss-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.add-holidays-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.add-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  background: var(--ss-bg-light);
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--ss-text);
  transition: all .15s;
  user-select: none;
}
.add-chip:hover { border-color: var(--ss-blue); }
.add-chip input[type="checkbox"] { accent-color: var(--ss-orange); }
.add-chip:has(input:checked) { background: var(--ss-bg-blue); border-color: var(--ss-blue); }
.add-btn {
  background: var(--ss-orange);
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  font-size: 0.98rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.add-btn:hover:not(:disabled) { background: var(--ss-orange-dark); }
.add-btn:disabled { opacity: 0.6; cursor: progress; }
.add-msg { margin-top: 0.75rem; font-size: 0.9rem; color: var(--ss-muted); }
.add-msg[data-kind="warn"] { color: var(--ss-red); }
.add-msg[data-kind="ok"] { color: var(--ss-green); }