/* ==========================================================================
   Rinix Mail — Core Stylesheet
   Palette + type per Design.md. Vanilla CSS, zero external font fetch.
   ========================================================================== */

:root{
  --brand-dark:#0F172A;
  --accent-blue:#0284C7;
  --accent-violet:#6366F1;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --text-main:#1E293B;
  --text-muted:#64748B;
  --success:#10B981;
  --danger:#EF4444;

  --font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.14);

  --topbar-h:60px;
  --bottomnav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text-main);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:var(--accent-violet);color:#fff}

/* Focus visibility (a11y floor) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent-blue);
  outline-offset:2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

.hidden{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   Loading shell (pre-paint, avoids layout shift / render block)
   ========================================================================== */
#app-loading{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--brand-dark);z-index:9999;
}
.boot-mark{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.7}}

/* ==========================================================================
   Marketing / auth surface
   ========================================================================== */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;max-width:1120px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;color:var(--brand-dark)}
.brand-mark{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:800;
}
.nav-actions{display:flex;gap:10px;align-items:center}

.hero{max-width:1120px;margin:0 auto;padding:48px 24px 64px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent-blue);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:14px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)}
.hero h1{
  font-size:clamp(2rem,4.2vw,3.1rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--brand-dark);font-weight:800;
}
.hero h1 em{
  font-style:normal;font-family:var(--font-mono);
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lede{margin-top:16px;color:var(--text-muted);font-size:1.05rem;max-width:46ch;line-height:1.55}

.handle-picker{
  margin-top:28px;background:var(--card);border:1px solid #E2E8F0;border-radius:var(--radius-lg);
  padding:6px;display:flex;align-items:center;box-shadow:var(--shadow-sm);max-width:440px;
}
.handle-picker input{
  border:none;background:transparent;padding:12px 4px 12px 14px;flex:1;min-width:0;
  font-family:var(--font-mono);font-size:.95rem;color:var(--text-main);
}
.handle-picker input:focus{outline:none}
.handle-picker .suffix{color:var(--text-muted);font-family:var(--font-mono);font-size:.9rem;padding-right:8px;white-space:nowrap}
.handle-picker button{
  background:var(--brand-dark);color:#fff;border:none;border-radius:calc(var(--radius-lg) - 6px);
  padding:12px 18px;font-weight:600;font-size:.9rem;white-space:nowrap;
}
.handle-status{margin-top:10px;font-size:.85rem;min-height:18px;display:flex;align-items:center;gap:6px}
.handle-status.ok{color:var(--success)}
.handle-status.bad{color:var(--danger)}
.handle-status.muted{color:var(--text-muted)}

.hero-panel{
  background:var(--brand-dark);border-radius:var(--radius-lg);padding:26px;color:#fff;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.hero-panel::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 85% 0%,rgba(99,102,241,.35),transparent 55%);
  pointer-events:none;
}
.mail-preview-row{
  display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.mail-preview-row:last-child{border-bottom:none}
.dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none}
.mail-preview-row small{display:block;color:#94A3B8;font-size:.72rem;margin-top:2px}

.feature-strip{max-width:1120px;margin:0 auto;padding:0 24px 64px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{background:var(--card);border:1px solid #E2E8F0;border-radius:var(--radius-md);padding:20px}
.feature-card h3{font-size:.95rem;color:var(--brand-dark);margin-bottom:6px}
.feature-card p{font-size:.85rem;color:var(--text-muted);line-height:1.5}
.feature-card .ico{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;background:rgba(2,132,199,.1);color:var(--accent-blue);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--radius-sm);padding:10px 16px;font-weight:600;font-size:.88rem;
  border:1px solid transparent;transition:transform .08s ease,background .15s ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent-blue);color:#fff}
.btn-primary:hover{background:#0369a1}
.btn-ghost{background:transparent;color:var(--brand-dark);border-color:#E2E8F0}
.btn-ghost:hover{background:#F1F5F9}
.btn-dark{background:var(--brand-dark);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:7px 12px;font-size:.8rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ==========================================================================
   Auth modal
   ========================================================================== */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:200;
}
.modal{
  background:var(--card);border-radius:var(--radius-lg);padding:28px;width:100%;max-width:400px;
  box-shadow:var(--shadow-lg);
}
.modal h2{font-size:1.2rem;color:var(--brand-dark);margin-bottom:4px}
.modal p.sub{color:var(--text-muted);font-size:.85rem;margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.field input{
  width:100%;padding:11px 12px;border:1px solid #E2E8F0;border-radius:var(--radius-sm);
  font-size:.92rem;color:var(--text-main);background:#fff;
}
.field input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(2,132,199,.15)}
.field-error{color:var(--danger);font-size:.78rem;margin-top:5px;min-height:14px}
.modal-switch{margin-top:16px;text-align:center;font-size:.85rem;color:var(--text-muted)}
.modal-switch button{background:none;border:none;color:var(--accent-blue);font-weight:600;padding:0}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);font-size:1.1rem}

/* ==========================================================================
   App shell (post-auth)
   ========================================================================== */
#app-shell{display:none;height:100vh;overflow:hidden;flex-direction:column}
#app-shell.active{display:flex}

.topbar{
  height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:14px;
  padding:0 16px;border-bottom:1px solid #E2E8F0;background:var(--card);
}
.topbar .brand{margin-right:auto}
.search-box{
  flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--bg);
  border:1px solid #E2E8F0;border-radius:999px;padding:8px 14px;
}
.search-box input{border:none;background:transparent;flex:1;font-size:.85rem;color:var(--text-main)}
.search-box input:focus{outline:none}
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--accent-violet);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex:none;
}

.workspace{flex:1;display:grid;grid-template-columns:220px 320px 1fr;min-height:0}

.sidebar{border-right:1px solid #E2E8F0;background:var(--card);padding:16px 10px;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--text-muted);font-size:.88rem;font-weight:600;margin-bottom:2px;
}
.nav-item svg{flex:none;width:18px;height:18px}
.nav-item.active{background:rgba(2,132,199,.1);color:var(--accent-blue)}
.nav-item .count{margin-left:auto;font-size:.72rem;color:var(--text-muted);font-weight:600}
.sidebar-cta{margin-top:14px;padding:0 12px}

.mail-list{border-right:1px solid #E2E8F0;overflow-y:auto;background:var(--card)}
.mail-list-head{padding:14px 16px 8px;display:flex;align-items:center;justify-content:space-between}
.mail-list-head h2{font-size:.95rem;color:var(--brand-dark)}
.mail-item{
  padding:14px 16px;border-bottom:1px solid #F1F5F9;cursor:pointer;position:relative;
}
.mail-item:hover{background:#F8FAFC}
.mail-item.unread{background:#F0F9FF}
.mail-item.active{background:rgba(99,102,241,.08)}
.mail-item.unread::before{content:"";position:absolute;left:4px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--accent-blue)}
.mail-item-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}
.mail-item-top .from{font-size:.87rem;font-weight:700;color:var(--brand-dark)}
.mail-item-top time{font-size:.72rem;color:var(--text-muted);flex:none}
.mail-item .subject{font-size:.84rem;color:var(--text-main);margin-bottom:2px}
.mail-item .snippet{font-size:.78rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scam-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;color:var(--danger);
  background:rgba(239,68,68,.1);padding:2px 7px;border-radius:999px;margin-top:6px;
}
.verified-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;color:var(--success);
  background:rgba(16,185,129,.1);padding:2px 7px;border-radius:999px;margin-top:6px;
}

.detail-pane{overflow-y:auto;padding:24px;background:var(--bg)}
.detail-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);gap:8px;text-align:center}
.detail-header{margin-bottom:18px}
.detail-header h2{font-size:1.2rem;color:var(--brand-dark);margin-bottom:8px}
.detail-meta{display:flex;justify-content:space-between;align-items:center;color:var(--text-muted);font-size:.82rem}
.detail-body{background:var(--card);border:1px solid #E2E8F0;border-radius:var(--radius-md);padding:20px;font-size:.9rem;line-height:1.7;white-space:pre-wrap}

/* Composer */
#composer{
  background:var(--card);border:1px solid #E2E8F0;border-radius:var(--radius-md);
  padding:18px;display:flex;flex-direction:column;gap:10px;
}
#composer input,#composer textarea{
  border:1px solid #E2E8F0;border-radius:var(--radius-sm);padding:10px 12px;font-size:.87rem;
}
#composer textarea{min-height:220px;resize:vertical;font-family:inherit}
.composer-actions{display:flex;justify-content:space-between;align-items:center}

/* Dev / API portal */
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.key-card{background:var(--card);border:1px solid #E2E8F0;border-radius:var(--radius-md);padding:18px}
.key-card h3{font-size:.9rem;color:var(--brand-dark);margin-bottom:4px}
.key-card p{font-size:.8rem;color:var(--text-muted);margin-bottom:12px}
.key-value{
  font-family:var(--font-mono);font-size:.82rem;background:var(--bg);border:1px dashed #CBD5E1;
  border-radius:var(--radius-sm);padding:10px 12px;word-break:break-all;color:var(--brand-dark);
}
.creds-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.82rem}
.creds-table td{padding:6px 0;color:var(--text-muted)}
.creds-table td:first-child{font-weight:600;color:var(--brand-dark);width:40%}

/* Toasts */
#toast-stack{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  background:var(--brand-dark);color:#fff;padding:11px 18px;border-radius:999px;font-size:.85rem;
  box-shadow:var(--shadow-md);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:var(--danger)}
.toast.success{background:var(--success)}

/* Bottom nav (mobile) */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bottomnav-h);
  background:var(--card);border-top:1px solid #E2E8F0;z-index:100;
  align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav button{
  background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text-muted);font-size:.65rem;font-weight:600;flex:1;padding:6px 0;
}
.bottom-nav button svg{width:20px;height:20px}
.bottom-nav button.active{color:var(--accent-blue)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1023px){
  .workspace{grid-template-columns:1fr}
  .sidebar{display:none}
  .mail-list,.detail-pane{display:none;border-right:none}
  .mail-list.mobile-active,.detail-pane.mobile-active{display:block}
  .bottom-nav{display:flex}
  #app-shell.active{padding-bottom:var(--bottomnav-h)}
  .hero-grid{grid-template-columns:1fr}
  .feature-strip{grid-template-columns:1fr}
}
@media (max-width:600px){
  .site-nav{padding:14px 16px}
  .hero{padding:28px 16px 40px}
  .dev-grid{grid-template-columns:1fr}
}