:root { --ink:#17251f; --green:#175e4a; --pale:#eef5f0; --line:#d6e1d9; --red:#a93131; --amber:#936200; --page:#f7faf7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--green); } .topbar { min-height:64px; padding:0 6vw; background:#102d25; color:#fff; display:flex; align-items:center; justify-content:space-between; } .brand { color:#fff; text-decoration:none; font-weight:800; font-size:18px; } .brand span { color:#b9d5c7; font-weight:500; } .account { display:flex; gap:12px; align-items:center; font-size:13px; } .account form { margin:0; }.page { width:min(1280px,92vw); margin:28px auto 80px; }.safety-banner,.flash { padding:13px 16px; border-radius:8px; margin-bottom:20px; }.safety-banner { background:#fff3d4; border:1px solid #ecd39b; color:#624500; }.flash { background:#e7f4ed; border:1px solid #b6dbc5; }.page-heading,.detail-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin:28px 0; }.page-heading h1,.detail-heading h1,.login-card h1 { margin:3px 0; line-height:1.1; }.eyebrow { margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--green); }.count-badge,.status { border-radius:999px; padding:5px 10px; white-space:nowrap; font-size:12px; font-weight:800; text-transform:capitalize; }.count-badge { background:#dbece1; color:#174b3b; }.status-awaiting_review { background:#fff0cb; color:#775000; }.status-held { background:#dde8fa; color:#254d88; }.status-approved { background:#d9f0e2; color:#17623f; }.status-rejected,.status-purged { background:#f8dada; color:#842d2d; }.draft-list { display:grid; gap:12px; }.draft-card { display:flex; justify-content:space-between; gap:16px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:inherit; box-shadow:0 2px 7px #1c352307; }.draft-card:hover { border-color:#6fa78b; }.draft-card h2 { margin:8px 0 0; font-size:20px; }.draft-card p,.draft-card-side span,.quiet { color:#66756d; margin:4px 0; }.draft-card-side { text-align:right; font-size:13px; display:grid; align-content:start; gap:4px; }.back { display:inline-block; margin-bottom:20px; }.review-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; }.preview-panel,.panel,.login-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }.preview-toolbar { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }.preview-toolbar span { display:block; font-size:12px; color:#66756d; }.preview-toolbar nav { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }.toggle { padding:4px 8px; border-radius:6px; text-decoration:none; font-size:12px; }.toggle.selected { background:#dcece2; font-weight:700; }.mail-shell { width:min(100%,700px); margin:auto; border:1px solid #cbd6ce; background:#fff; box-shadow:0 6px 20px #102d2512; transition:width .2s; }.mobile-shell { width:min(100%,390px); }.mail-meta { padding:16px; border-bottom:1px solid #e2e8e4; font-size:13px; display:grid; gap:4px; }.preheader { color:#78867f; }.mail-body { padding:30px; font-family:Arial,sans-serif; line-height:1.6; }.mail-body p { margin:0 0 18px; }.plain-body { white-space:pre-wrap; margin:0; padding:28px; font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }.mail-footer { padding:12px 16px; background:#f5f7f5; color:#6d7b73; font-size:11px; }.review-sidebar { display:grid; gap:16px; }.panel h2 { font-size:16px; margin:0 0 14px; }.panel dl { margin:0; display:grid; gap:4px; }.panel dt { margin-top:8px; color:#627169; text-transform:capitalize; font-size:12px; font-weight:800; }.panel dd { margin:0; }.break,.hash { overflow-wrap:anywhere; }.hash { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }.action-grid { display:grid; gap:8px; }.action-grid form { margin:0; }.primary,.secondary,.danger,.link-button { border:0; border-radius:7px; padding:10px 14px; cursor:pointer; font:inherit; font-weight:750; }.primary { background:var(--green); color:#fff; }.secondary { background:#dce9e1; color:#163e31; }.danger { background:#f8dada; color:#7b2424; }.link-button { background:transparent; color:#d6ede0; padding:0; font-size:13px; }.primary:disabled,.secondary:disabled,.danger:disabled { opacity:.45; cursor:not-allowed; }.edit-panel { margin-top:22px; }.stacked-form { display:grid; gap:14px; }.stacked-form label { display:grid; gap:5px; font-weight:700; }.stacked-form input,.stacked-form textarea { width:100%; padding:10px; border:1px solid #bdccc2; border-radius:7px; font:inherit; }.events { margin-top:22px; }.events ol { padding-left:20px; }.events li { margin:10px 0; }.login-card { width:min(460px,100%); margin:70px auto; }.login-card p { color:#637169; }
@media (max-width:900px) { .review-grid { grid-template-columns:1fr; }.review-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }.review-sidebar .panel:last-child { grid-column:1/-1; } } @media (max-width:640px) { .topbar { padding:0 4vw; }.page { width:min(94vw,1280px); }.page-heading,.detail-heading,.draft-card,.preview-toolbar { display:block; }.count-badge,.status { display:inline-block; margin-top:12px; }.draft-card-side { text-align:left; margin-top:12px; }.preview-toolbar nav { justify-content:flex-start; margin-top:10px; }.mail-body,.plain-body { padding:20px; }.review-sidebar { grid-template-columns:1fr; } }