/* ===== EFO-aligned Theme for Inbox Preview (colors & fonts only) =====
   Based on EFO tool styles (light surfaces, Inter, slate ink). */
p {
  margin-bottom: 1.2em; /* Adjust this value as needed, e.g., 1.5em for wider spacing */
}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#EEF3FF; --card:#fff; --ink:#101828; --muted:#667085;
  --primary:#3B82F6; --primary-contrast:#fff; --border:#E5E7EB;
  --shadow:0 10px 25px -12px rgba(16,24,40,.15);
  --radius:16px; --radius-sm:12px; --space:clamp(16px,2.5vw,24px);

  /* Status & chips (aligned to EFO) */
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --blue:#60a5fa;

  --chip-muted:#ECF2FF; --chip-muted-text:#334155;
  --chip-warn:#FEF3C7; --chip-warn-text:#92400e;
  --chip-danger:#FEE2E2; --chip-danger-text:#991b1b;
  --chip-success:#DCFCE7; --chip-success-text:#166534;
}

/* Global */
body{
  min-height:100vh;
  background: var(--bg);
  color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  line-height:1.55;
}

.bfcm-app{max-width:1180px;margin:0 auto;padding:calc(var(--space)*1.5) var(--space)}
.calculator-header{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:calc(var(--space)*1.1)}
.calculator-icon{width:56px;height:56px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;color:var(--primary-contrast);background:var(--primary)}
.calculator-title{font-size:clamp(26px,2.8vw,36px);font-weight:800;letter-spacing:.2px;margin-bottom:6px}
.calculator-subtitle{color:var(--muted);max-width:760px}

/* Panels */
.calculator-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:calc(var(--space)*1.1);margin-top:var(--space);box-shadow:var(--shadow)}
.panel{background:#F9FAFB;border:1px solid #EEF0F3;border-radius:14px;padding:14px}
.panel-relaxed{padding:18px;border-radius:16px}
.panel.soft{background:#F7F9FF}
.reason-list{display:grid;gap:8px;padding-left:18px}
.expando{margin-top:10px;color:var(--muted)}
.expando summary{cursor:pointer}

/* Grids */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:12px}
.grid-3{display:grid;grid-template-columns:2fr 2fr 1.2fr;gap:16px}
@media (max-width:980px){ .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} }

/* Inputs */
.form-group{display:flex;flex-direction:column;gap:10px}
.label-row{display:flex;justify-content:space-between;align-items:center}
.form-label{font-size:14px;font-weight:700}
.input-shell{position:relative}
.text-input{width:100%;padding:14px 82px 14px 16px;border:1px solid var(--border);border-radius:14px;background:#fff;font-size:16px;color:#111}
.text-input.clean{box-shadow:inset 0 1px 0 rgba(16,24,40,.06)}
.text-input::placeholder{color:#9AA4B2}
.text-input:focus{outline:2px solid #DBEAFE;border-color:#93C5FD}
.input-trailing{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;gap:6px;align-items:center;font-size:12px;color:#475569}
.input-trailing .sep{opacity:.7}
.micro-hint{font-size:12px;color:var(--muted)}
.inline-note{font-size:12px;color:var(--muted)}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;border:1px solid transparent}
.chip-muted{background:var(--chip-muted);color:var(--chip-muted-text)}
.chip-warn{background:var(--chip-warn);color:var(--chip-warn-text);border-color:#fde68a}
.chip-danger{background:var(--chip-danger);color:var(--chip-danger-text);border-color:#fecaca}
.chip-success{background:var(--chip-success);color:var(--chip-success-text);border-color:#bbf7d0}

/* Results header */
.results-section{margin-top:18px}
.results-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px}
.results-title{font-size:20px;font-weight:800}
/* .sort-hint removed per request */
.sort-hint{display:none}

/* Cards grid -> exactly 2 per row */
.cards-grid.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:820px){ .cards-grid.two-col{grid-template-columns:1fr} }

/* Inbox preview cards (behavior unchanged) */
.preview-card{background:#ffffff;color:#101828;border:1px solid #E5E7EB;border-radius:18px;box-shadow:var(--shadow);padding:16px;transition:background .2s,border-color .2s,color .2s}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card-title{font-weight:800;font-size:14px;display:flex;align-items:center;gap:10px}
.card-sub{font-size:12px;color:#6b7280}
.card-body{display:grid;gap:10px}
.head-right{display:flex;align-items:center;gap:8px}

/* Client & device icons */
.client-icon{display:none} /* icon removed from cards */
.client-gmail{background:#EA4335}
.client-outlook{background:#2563eb}
.client-apple{background:#111827}
.client-yahoo{background:#7e22ce}
.device-icon{width:10px;height:10px;border-radius:3px;display:inline-block;margin-left:6px;background:#d1d5db}
.device-desktop{width:14px;height:10px;border-radius:2px}
.device-mobile{width:8px;height:12px;border-radius:2px}

/* Status dot */
.status-dot{width:10px;height:10px;border-radius:50%}
.status-dot.green{background:#16a34a;box-shadow:0 0 0 2px #dcfce7 inset}
.status-dot.red{background:#ef4444;box-shadow:0 0 0 2px #fee2e2 inset}

/* Dark toggle button */
.card-toggle{border:1px solid #E5E7EB;background:#fff;border-radius:10px;padding:6px 8px;font-size:12px;cursor:pointer;color:#0f172a}
.card-toggle:active{transform:translateY(1px)}

/* Faux client skins */
.skin{border:1px dashed #E5E7EB;border-radius:12px;padding:12px;transition:background .2s,color .2s,border-color .2s}
.skin.gmail .row{font-family:Arial, Helvetica, sans-serif}
.skin.outlook .row{font-family:Calibri, Arial, sans-serif}
.skin.apple .row{font-family:Helvetica, Arial, sans-serif}
.skin.yahoo .row{font-family:Arial, Helvetica, sans-serif}
.skin.desktop .row{font-size:13px}
.skin.mobile .row{font-size:14px}

/* Dark mode for card (kept) */
.preview-card.dark{background:#0E1626;border-color:#24304a;color:#E6EDF7}
.preview-card.dark .card-sub{color:#93A4BD}
.preview-card.dark .skin{background:transparent;border-color:#24304a}
.preview-card.dark .preheader{color:#9bb0cf}
.preview-card.dark .card-toggle{background:#0f1a30;border-color:#24304a;color:#cfe1ff}

/* Rows */
.row{display:flex;align-items:center;gap:8px}
.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#E0E7FF;color:#1E3A8A;font-weight:800;font-size:12px}
.from{font-weight:700}
.subject{font-weight:700}
.preheader{font-size:12px;color:#6b7280}
.divider{height:1px;background:#EEF0F3;margin:6px 0}

/* Overflow */
.overflow{color:#991b1b;text-decoration:line-through}

/* Footer */
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;color:#6b7280;font-size:12px}
.preview-card.dark .card-foot{color:#9bb0cf}
.font-chip{font-family:monospace;border:1px solid #E5E7EB;background:#F8FAFC;border-radius:8px;padding:2px 6px;color:#111827}
.preview-card.dark .font-chip{background:#0f1a30;border-color:#24304a;color:#cfe1ff}

/* Badges */
.badge{font-size:11px;font-weight:800;border-radius:9999px;padding:4px 8px;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent}
.badge.gray{background:#F3F4F6;border-color:#E5E7EB;color:#475569}
.badge.amber{background:#fffbeb;color:#92400e;border-color:#fde68a}

/* ===== Plan & Optimize section (colors aligned to EFO) ===== */
.tools-section{margin-top:28px}
.how-wrap{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.how-wrap h2{color:#111}
.how-wrap h3{margin-top:14px;margin-bottom:8px;color:#111}
.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:8px}
.tool-card{display:flex;flex-direction:column;gap:8px;background:#F9FAFB;border:1px solid #EEF0F3;border-radius:12px;padding:12px;text-decoration:none;color:inherit;transition:transform .08s ease,box-shadow .18s ease,border-color .18s ease}
.tool-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:#E0E5EC}
.tool-emoji{font-size:22px}
.tool-card h4{font-size:14px;font-weight:800;color:#111}
.tool-card p{font-size:13px;color:#334155}
.tool-cta{margin-top:auto;font-weight:800;color:#1D4ED8}
@media (max-width:920px){ .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.limit-reached {
  border-color: #e63946;
  background-color: #fff5f5;
}