/* Idiot Email Tools — design system
   Palette: --ink #0F172A, --slate #475569, --slate-light #94A3B8,
            --indigo #4338CA, --indigo-light #EEF2FF, --indigo-dim #6366F1,
            --bg #F8FAFC, --surface #FFFFFF, --line #E2E8F0, --green #16A34A, --amber #D97706, --red #DC2626
   Type: display/heading = 'Space Grotesk', body = 'Inter', mono/data = 'IBM Plex Mono'
*/

:root{
  --ink:#0F172A;
  --slate:#475569;
  --slate-light:#94A3B8;
  --indigo:#4338CA;
  --indigo-dim:#6366F1;
  --indigo-light:#EEF2FF;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --line:#E2E8F0;
  --green:#16A34A;
  --green-bg:#F0FDF4;
  --amber:#D97706;
  --amber-bg:#FFFBEB;
  --red:#DC2626;
  --red-bg:#FEF2F2;
  --radius:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .5em;}
h1{font-size:2.25rem; letter-spacing:-.02em;}
h2{font-size:1.5rem; letter-spacing:-.01em;}
h3{font-size:1.15rem;}
p{margin:0 0 1em;}
a{color:var(--indigo); text-decoration:none;}
a:hover{text-decoration:underline;}
code{font-family:var(--font-mono); font-size:.9em; background:var(--indigo-light); padding:.1em .4em; border-radius:4px;}
::selection{background:var(--indigo-light); color:var(--indigo);}
:focus-visible{outline:2.5px solid var(--indigo-dim); outline-offset:2px; border-radius:4px;}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(248,250,252,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex; align-items:center; gap:28px; height:66px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); flex-shrink:0;}
.brand:hover{text-decoration:none;}
.brand-mark{width:32px; height:32px; border-radius:8px; background:var(--indigo); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.brand-mark svg{width:18px; height:18px;}
.brand small{color:var(--slate-light); font-weight:500; font-size:.7rem; display:block; font-family:var(--font-body);}

.main-nav{display:flex; gap:22px; align-items:center; margin-left:auto;}
.main-nav a{color:var(--slate); font-weight:500; font-size:.92rem;}
.main-nav a:hover{color:var(--indigo); text-decoration:none;}

.header-search{position:relative; width:100%; max-width:340px;}
.header-search input{
  width:100%; padding:9px 14px 9px 36px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); font-size:.9rem; font-family:var(--font-body); color:var(--ink);
}
.header-search input:focus{border-color:var(--indigo-dim); outline:none; box-shadow:0 0 0 3px var(--indigo-light);}
.header-search .icon{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--slate-light); pointer-events:none;}
.search-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); overflow:hidden;
  display:none; max-height:340px; overflow-y:auto; z-index:60;
}
.search-dropdown.open{display:block;}
.search-dropdown a{display:flex; flex-direction:column; gap:2px; padding:10px 14px; color:var(--ink); border-bottom:1px solid var(--line);}
.search-dropdown a:last-child{border-bottom:none;}
.search-dropdown a:hover{background:var(--indigo-light); text-decoration:none;}
.search-dropdown a .sd-desc{font-size:.78rem; color:var(--slate-light); font-weight:400;}
.search-dropdown .sd-empty{padding:14px; color:var(--slate-light); font-size:.88rem;}
.mobile-nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.mobile-nav-toggle svg{width:24px; height:24px; color:var(--ink);}

@media (max-width:860px){
  .main-nav{display:none;}
  .header-search{max-width:none; flex:1;}
  .mobile-nav-toggle{display:block;}
}

/* ===== Hero ===== */
.hero{padding:64px 0 52px; position:relative; overflow:hidden;}
.hero::before{
  content:''; position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, var(--indigo-light) 0%, transparent 70%); z-index:0;
}
.hero .container{position:relative; z-index:1;}
.eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--indigo); background:var(--indigo-light); padding:6px 12px; border-radius:100px; margin-bottom:16px;
  white-space:nowrap;
}
.eyebrow svg{width:14px; height:14px; flex-shrink:0;}
.hero h1{max-width:680px;}
.hero .lead{font-size:1.1rem; color:var(--slate); max-width:600px;}
.hero-search{max-width:520px; margin-top:24px; position:relative;}
.hero-search input{
  width:100%; padding:15px 18px 15px 44px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--surface); font-size:1rem; font-family:var(--font-body); box-shadow:var(--shadow);
}
.hero-search input:focus{border-color:var(--indigo-dim); outline:none;}
.hero-search .icon{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--slate-light);}
.hero-stats{display:flex; gap:32px; margin-top:28px; flex-wrap:wrap;}
.hero-stats div{display:flex; flex-direction:column;}
.hero-stats .num{font-family:var(--font-mono); font-size:1.5rem; font-weight:600; color:var(--indigo);}
.hero-stats .label{font-size:.8rem; color:var(--slate-light);}

/* ===== Tool grid ===== */
.section{padding:36px 0;}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
.section-head p{color:var(--slate-light); font-size:.92rem; margin:0;}
.tool-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
@media (max-width:900px){.tool-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.tool-grid{grid-template-columns:1fr;}}

.tool-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.tool-card:hover{border-color:var(--indigo-dim); transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none;}
.tool-card .ti{width:38px; height:38px; border-radius:9px; background:var(--indigo-light); color:var(--indigo); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.tool-card .ti svg{width:20px; height:20px;}
.tool-card h3{margin:0; color:var(--ink); font-size:1.02rem;}
.tool-card p{margin:0; color:var(--slate); font-size:.86rem; line-height:1.5;}
.tool-card .tag{font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-light);}

/* ===== Tool page ===== */
.tool-hero{padding:40px 0 28px; border-bottom:1px solid var(--line); background:var(--surface);}
.breadcrumb{font-size:.82rem; color:var(--slate-light); margin-bottom:14px;}
.breadcrumb a{color:var(--slate-light);}
.breadcrumb a:hover{color:var(--indigo);}
.tool-hero-top{display:flex; align-items:center; gap:14px; margin-bottom:10px;}
.tool-hero-top .ti{width:46px; height:46px; border-radius:10px; background:var(--indigo-light); color:var(--indigo); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.tool-hero-top .ti svg{width:24px; height:24px;}
.tool-hero h1{margin:0;}
.tool-hero .lead{color:var(--slate); max-width:680px; font-size:1.02rem;}

.tool-app{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px;
  box-shadow:var(--shadow); margin:-8px 0 0;
}
.field-label{display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:6px;}
.field-hint{font-size:.78rem; color:var(--slate-light); margin-top:5px;}
textarea, input[type=text], input[type=email], input[type=url], select{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:8px; font-family:var(--font-body);
  font-size:.94rem; color:var(--ink); background:var(--bg); resize:vertical;
}
textarea:focus, input:focus, select:focus{outline:none; border-color:var(--indigo-dim); box-shadow:0 0 0 3px var(--indigo-light); background:var(--surface);}
textarea{min-height:140px; font-family:var(--font-mono); font-size:.86rem; line-height:1.55;}
label.inline{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--slate); font-weight:500;}
.row{display:flex; gap:14px; flex-wrap:wrap;}
.row > *{flex:1; min-width:180px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:8px;
  background:var(--indigo); color:#fff; font-weight:600; font-size:.92rem; border:none; cursor:pointer; font-family:var(--font-body);
  transition:background .15s, transform .1s;
}
.btn:hover{background:var(--indigo-dim); text-decoration:none;}
.btn:active{transform:scale(.98);}
.btn.secondary{background:var(--surface); color:var(--ink); border:1.5px solid var(--line);}
.btn.secondary:hover{background:var(--bg); border-color:var(--slate-light);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.divider{height:1px; background:var(--line); margin:22px 0;}
.result-box{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:16px; margin-top:16px;}
.result-box.hidden{display:none;}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; padding:4px 11px; border-radius:100px; letter-spacing:.01em;}
.badge.ok{background:var(--green-bg); color:var(--green);}
.badge.warn{background:var(--amber-bg); color:var(--amber);}
.badge.bad{background:var(--red-bg); color:var(--red);}
.stat-row{display:flex; gap:20px; flex-wrap:wrap; margin:14px 0;}
.stat-chip{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 16px; text-align:center; min-width:90px;}
.stat-chip .n{font-family:var(--font-mono); font-size:1.3rem; font-weight:600; color:var(--indigo);}
.stat-chip .l{font-size:.72rem; color:var(--slate-light); text-transform:uppercase; letter-spacing:.03em;}
table.data-table{width:100%; border-collapse:collapse; font-size:.86rem; margin-top:10px;}
table.data-table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--slate-light); padding:8px 10px; border-bottom:1.5px solid var(--line);}
table.data-table td{padding:9px 10px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:.82rem;}
table.data-table tr:last-child td{border-bottom:none;}
.checklist-item{display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.86rem;}
.checklist-item:last-child{border-bottom:none;}
.copy-btn{background:var(--indigo-light); color:var(--indigo); border:none; padding:5px 12px; border-radius:6px; font-size:.78rem; font-weight:600; cursor:pointer;}
.copy-btn:hover{background:var(--indigo); color:#fff;}

/* ===== Content / FAQ ===== */
.prose{max-width:760px;}
.prose h2{margin-top:2em;}
.prose ul, .prose ol{padding-left:1.3em;}
.prose li{margin-bottom:.4em;}
.faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
.faq-item summary{cursor:pointer; font-weight:600; font-family:var(--font-display); font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:1.3rem; color:var(--indigo); font-weight:400; transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin-top:10px; color:var(--slate); font-size:.94rem;}

/* ===== Related tools ===== */
.related-strip{display:flex; gap:12px; flex-wrap:wrap;}
.related-strip a{
  padding:8px 14px; border:1px solid var(--line); border-radius:100px; font-size:.85rem; color:var(--ink); background:var(--surface);
}
.related-strip a:hover{border-color:var(--indigo-dim); color:var(--indigo); text-decoration:none;}

/* ===== Category page ===== */
.page-hero{padding:48px 0 20px;}

/* ===== Static page ===== */
.static-page .prose{margin:0 auto;}

/* ===== Footer ===== */
.site-footer{background:var(--ink); color:#CBD5E1; margin-top:60px; padding:52px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; font-family:var(--font-body); font-weight:600;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.footer-grid a{color:#94A3B8; font-size:.88rem;}
.footer-grid a:hover{color:#fff; text-decoration:none;}
.footer-brand{display:flex; align-items:center; gap:9px; margin-bottom:12px;}
.footer-brand .brand-mark{background:var(--indigo-dim);}
.footer-brand span{font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.05rem;}
.footer-about{font-size:.85rem; color:#94A3B8; max-width:280px;}
.footer-bottom{border-top:1px solid #1E293B; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color:#64748B;}
.footer-bottom a{color:#64748B;}
.footer-bottom a:hover{color:#fff;}

.privacy-note{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--slate-light); background:var(--indigo-light); padding:9px 13px; border-radius:8px; margin-bottom:18px;}
.privacy-note svg{width:15px; height:15px; color:var(--indigo); flex-shrink:0;}