/* Sähköpostit-ikkuna (2026-11-03, docs/projektin-sahkopostit.md). Monokromi, ei korttikasaa: rivit ohuin viivoin. */
.sp-root { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 13px; color: var(--color-text); container-type: inline-size; }
.sp-empty { padding: 40px 20px; color: var(--color-text-muted); text-align: center; }
.sp-empty.small { padding: 24px 16px; font-size: 12.5px; }
.sp-muted { color: var(--color-text-muted); font-size: 12px; }
.sp-err { color: var(--color-danger, #dc2626); }
.sp-note { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.sp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-grow { flex: 1; }
.sp-btn { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sp-btn:hover:not(:disabled) { background: var(--color-bg); }
.sp-btn:disabled { opacity: .5; cursor: default; }
.sp-btn.primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.sp-btn.primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--color-primary); }
.sp-btn.danger { background: var(--color-danger, #dc2626); border-color: var(--color-danger, #dc2626); color: #fff; }
.sp-btn.small { height: 26px; padding: 0 9px; font-size: 12px; }
.sp-link { border: 0; background: none; padding: 0; color: var(--color-text-muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.sp-link:hover { color: var(--color-text); }
.sp-link.danger { color: var(--color-danger, #dc2626); }
.sp-icon { width: 30px; height: 30px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sp-spin { animation: sp-spin 1s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Käyttöönotto */
.sp-setup { max-width: 560px; margin: 40px auto; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
.sp-setup h2 { margin: 6px 0 0; font-size: 18px; }
.sp-setup p, .sp-setup li { line-height: 1.5; }
.sp-setup ul { margin: 0; padding-left: 18px; color: var(--color-text-muted); }

/* Yläpalkki */
.sp-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; flex: none; }
.sp-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-tabs button { height: 28px; padding: 0 11px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sp-tabs button.on { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
.sp-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-primary); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.sp-search { height: 30px; width: 200px; max-width: 40cqw; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12.5px; }
.sp-pop-wrap { position: relative; }
.sp-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 300px; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: 0 14px 34px rgba(15,23,42,.2); display: flex; flex-direction: column; gap: 8px; }
.sp-menu-h { font-weight: 700; }
.sp-menu-sec { display: flex; flex-direction: column; gap: 7px; padding-top: 8px; border-top: 1px solid var(--color-border); align-items: flex-start; }
.sp-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.sp-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden; }
.sp-seg button { height: 28px; padding: 0 10px; border: 0; border-left: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sp-seg button:first-child { border-left: 0; }
.sp-seg button.on { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); }
.sp-seg button:disabled { opacity: .45; cursor: default; }
.sp-banner { margin: 8px 12px 0; padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, #f97316 12%, var(--color-surface)); font-size: 12.5px; }

/* Lista + tiedot */
.sp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); }
.sp-list { min-height: 0; overflow-y: auto; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; }
.sp-projpick { padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.sp-item { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 0; border-bottom: 1px solid var(--color-border-light, var(--color-border)); background: none; color: inherit; font: inherit; padding: 10px 14px; cursor: pointer; min-width: 0; }
.sp-item:hover { background: var(--color-bg); }
.sp-item.on { background: color-mix(in srgb, var(--color-primary) 9%, transparent); box-shadow: inset 3px 0 0 var(--color-primary); }
.sp-item.unread .sp-item-h b, .sp-item.unread .sp-subj { font-weight: 700; }
.sp-item-h { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.sp-item-h b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-item-h small { color: var(--color-text-muted); font-size: 11.5px; flex: none; }
.sp-subj { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--color-text-muted); }
.sp-chip { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); color: var(--color-primary); }
.sp-chip.unsure { border-color: var(--color-border); color: var(--color-text-muted); }
.sp-ok { color: var(--color-success, #16a34a); font-weight: 600; }
.sp-vis { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 5px; border: 1px solid var(--color-border); }
.sp-vis.me { color: var(--color-text-muted); }
.sp-foot { padding: 12px 14px; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.45; }
.sp-detail { min-height: 0; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp-msg { padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, var(--color-success, #16a34a) 10%, var(--color-surface)); font-size: 12.5px; }
.sp-d-head { display: flex; flex-direction: column; gap: 3px; }
.sp-d-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.sp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.sp-link-box { flex-direction: column; align-items: flex-start; }
.sp-pick { min-width: 240px; flex: 1 1 260px; }
.sp-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--color-success, #16a34a) 13%, transparent); color: var(--color-success, #15803d); }
.sp-content { display: flex; flex-direction: column; gap: 12px; }
.sp-cols { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.sp-html { flex: 1 1 380px; min-width: 0; line-height: 1.55; overflow-wrap: anywhere; }
.sp-html table { max-width: 100%; }
.sp-html * { max-width: 100%; }
.sp-atts { flex: 0 1 320px; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.sp-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.sp-att { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--color-border-light, var(--color-border)); }
.sp-att svg { flex: none; color: var(--color-text-muted); }
.sp-att-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-att-n b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-att-n small { color: var(--color-text-muted); font-size: 11px; }
.sp-save { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 10px 26px rgba(15,23,42,.12); background: var(--color-surface); }
.sp-select { height: 30px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12.5px; padding: 0 8px; }
.sp-reply { display: flex; flex-direction: column; gap: 8px; }
.sp-reply textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--color-surface); color: var(--color-text); resize: vertical; }
@container (max-width: 760px) {
    .sp-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(160px, 40%) minmax(0, 1fr); }
    .sp-list { border-right: 0; border-bottom: 1px solid var(--color-border); }
}