/* The mail page's one stylesheet (novox/hq ADR 0515 §3, §6; issue 1859): phone first, one column; a wide
   screen adds the reading pane beside the list. The mockup kept with design 63 is its direction. */
:root{--bg:#f5f5f2;--panel:#fff;--ink:#1c1c1a;--muted:#6b6b66;--line:#e2e1dc;--accent:#2f5bd3;--due:#b0124e;
--chip:#ecebe6;--hi:#fff7dc;--scam:#b3261e;--scam-bg:#fde8e6;--ok:#2e9d5b}
@media (prefers-color-scheme:dark){:root{--bg:#131313;--panel:#1c1c1c;--ink:#ebebe8;--muted:#9b9b95;--line:#2d2d2b;
--accent:#86a8ff;--due:#ff7aa6;--chip:#292927;--hi:#2b2616;--scam:#ff8a80;--scam-bg:#3a1c1a;--ok:#5fd38a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted)}
form{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
ul{list-style:none;margin:0;padding:0}

/* the bar on top: the page's name, the modes, All mail */
.topbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;
background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .logo{font-weight:700;font-size:17px;color:var(--ink)}
.modes{display:flex;gap:6px;overflow-x:auto;flex:1}
.modes form{flex:none}
.mode{padding:4px 12px;border-radius:99px;border:2px solid var(--line);background:var(--panel);font-size:14px;opacity:.6}
.mode.on{opacity:1;border-color:var(--accent);background:var(--hi)}
.btn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:7px;font-size:13px;color:var(--ink);
background:var(--panel);white-space:nowrap}
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}

/* the list */
.page{display:block}
.list{padding:14px 16px 48px;max-width:760px;margin:0 auto;min-width:0}
.greet h1{font-size:26px;margin:4px 0}
.lede{color:var(--muted);margin:2px 0 6px}
.told li{padding:2px 0}
.notice{padding:9px 12px;border-radius:8px;margin:10px 0;font-size:14px;background:var(--hi)}
.notice.failed{background:var(--scam-bg);color:var(--scam)}
.sec h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:24px 0 4px;
display:flex;justify-content:space-between}
.cnt{font-size:11px;background:var(--chip);color:var(--muted);border-radius:99px;padding:0 7px}
.empty{font-size:14px;margin:6px 2px}
.tk{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;border-bottom:1px solid var(--line)}
.box{flex:none;width:30px;height:30px;border-radius:8px;border:2.5px solid var(--line);background:var(--panel);
font-size:0;margin-top:1px}
.box:hover{border-color:var(--ink)}
.box.done{background:var(--ink);border-color:var(--ink)}
.box.done::after{content:"\2713";color:var(--bg);font-size:16px;font-weight:800;line-height:24px}
.tb{min-width:0;flex:1}
.tt{display:block;font-size:17px;line-height:1.3;color:var(--ink)}
#handled-today .tt{text-decoration:line-through;color:var(--muted)}
.tm{display:block;font-size:13px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.due{color:var(--due);font-weight:600}
.why{display:block;font-size:13px;color:var(--scam)}
#scam-warnings .tk{background:var(--scam-bg);border-radius:8px;padding:10px}
.later{flex:none;font-size:12px;padding:4px 8px}
.reminded .tt::before{content:"\23F0 "}

/* the reading pane: over the list on a phone, beside it on a wide screen */
.pane{background:var(--panel);padding:14px 16px 48px;min-width:0}
.pane h1{font-size:20px;margin:4px 0 6px;line-height:1.25}
.pane .bar{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.meta{font-size:13px;color:var(--muted)}
.body{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.5 system-ui,sans-serif;margin:14px 0}
.items li{padding:4px 0;display:flex;gap:8px;align-items:center;justify-content:space-between}
.fix{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.fix h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:8px 0}
.fix form{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.fix select,.fix input,.fix button{font:inherit;font-size:13px;padding:4px 7px;border:1px solid var(--line);
border-radius:6px;background:var(--panel);color:var(--ink)}
.atts li{padding:3px 0}
.with-pane .list{display:none}
.owly:empty{display:none}
@media (min-width:900px){
 .with-pane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px)}
 .with-pane .list{display:block}
 .pane{border-left:1px solid var(--line);position:sticky;top:49px;height:calc(100vh - 49px);overflow:auto}
}