/* ===== MailSparc v61 polish — brings the app up to the landing page's finish.
   Loaded after app.v61.css. Keeps owner-approved pieces: dark Compose pill (v43),
   amber Send pill, phone top bar (v44-46), 4-col action row (v42), per-account inboxes (v34). */

:root{
  --av-0:#0b8f74; --av-1:#d9730a; --av-2:#172a38; --av-3:#1fb89d; --av-4:#5b6f7c; --av-5:#b85f08;
  --acct-0:#0b8f74; --acct-1:#ff9e2c; --acct-2:#3b82c4; --acct-3:#2fbf71; --acct-4:#9b6bd6; --acct-5:#e0567a;
  --read-bg:#f7f9fa; --line-soft:#eaeff2;
  --spectrum:linear-gradient(100deg,#3ce6c8,#1fd3b4 45%,#ff9e2c);
}
[data-theme="dark"]{ --av-2:#3b4e79; --read-bg:#101b30; --line-soft:#243351; }

/* ---------- top bar ---------- */
.topbar{box-shadow:0 1px 0 var(--line);border-bottom:0}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--spectrum);opacity:.55}
.brand-word{font-weight:700}
.search{background:var(--surface);border-color:var(--line);box-shadow:inset 0 1px 2px rgba(15,29,40,.04)}
.search:focus-within{border-color:var(--teal-500);box-shadow:0 0 0 3px var(--teal-glow)}

/* ---------- rail ---------- */
.rail{overflow-x:hidden;padding-right:.5rem;scrollbar-width:thin}
.folder{border-radius:8px;margin:0 .15rem;padding:.48rem .75rem;min-width:0}
.folder .f-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder.active{background:var(--teal-glow);box-shadow:inset 3px 0 0 var(--teal-500)}
.folder .f-count:not(:empty){background:var(--ink-700);color:var(--text-dim);border-radius:999px;padding:.12rem .45rem;min-width:1.4rem;text-align:center;font-size:.68rem}
.folder.active .f-count:not(:empty){background:var(--teal-500);color:#fff}
.rail-acct{padding:1.2rem .9rem .45rem!important}
.rail-acct .dot{background:var(--spectrum)!important}
/* account inboxes: name over address, colour-coded like the landing mock */
/* owner's edit (mailsparcsample.png): full address on its own line under the icon, spanning the row — never "…" */
.folder[data-acct]{display:grid;grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:"ico name count" "sub sub sub";column-gap:.7rem;row-gap:.12rem;align-items:center}
.folder[data-acct] .f-ico{grid-area:ico}
.folder[data-acct] .f-name{grid-area:name;line-height:1.2}
.folder[data-acct] .f-count{grid-area:count;margin-left:0}
.folder[data-acct] .f-sub{grid-area:sub;margin:0!important;font-size:.7rem;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.folder[data-acct] .f-ico{position:relative}
.folder[data-acct] .f-ico::after{content:"";position:absolute;right:-3px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:var(--acct,var(--acct-0));box-shadow:0 0 0 2px var(--ink-750)}
[data-theme="dark"] .folder[data-acct] .f-ico::after{box-shadow:0 0 0 2px var(--ink-850)}
#folderNav .folder[data-acct]:nth-of-type(2){--acct:var(--acct-0)}
#folderNav .folder[data-acct]:nth-of-type(3){--acct:var(--acct-1)}
#folderNav .folder[data-acct]:nth-of-type(4){--acct:var(--acct-2)}
#folderNav .folder[data-acct]:nth-of-type(5){--acct:var(--acct-3)}
#folderNav .folder[data-acct]:nth-of-type(6){--acct:var(--acct-4)}
#folderNav .folder[data-acct]:nth-of-type(7){--acct:var(--acct-5)}
.compose-btn{margin:0 .3rem 1.1rem}

/* ---------- list toolbar ---------- */
.toolbar{min-height:52px;padding:.45rem 1rem;background:var(--surface)}
.content{border-top-left-radius:14px;box-shadow:-1px 0 0 var(--line)}

/* ---------- thread rows ---------- */
.row{height:54px;padding:0 1rem 0 .55rem;gap:.35rem;background:var(--read-bg)}
.row.unread{background:var(--unread-bg)}
.row:hover{background:var(--unread-bg);box-shadow:0 1px 0 var(--line), var(--shadow-1)}
.row.selected{background:var(--teal-glow)}
.row-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font:600 .72rem/1 var(--font-body);letter-spacing:.02em;margin:0 .45rem 0 .1rem;background:var(--av,var(--av-0));position:relative}
.row:not(.unread) .row-av{opacity:.78}
.row.unread .row-av::after{content:"";position:absolute;right:-2px;top:-2px;width:10px;height:10px;border-radius:50%;
  background:var(--teal-500);box-shadow:0 0 0 2px var(--unread-bg)}
.av-0{--av:var(--av-0)}.av-1{--av:var(--av-1)}.av-2{--av:var(--av-2)}.av-3{--av:var(--av-3)}.av-4{--av:var(--av-4)}.av-5{--av:var(--av-5)}
.row-from{width:200px;font-size:.88rem}
.row-count{display:inline-block;background:var(--ink-700);border-radius:999px;padding:0 .4rem;margin-left:.25rem;font-size:.68rem;line-height:1.4;vertical-align:1px}
.row-main{font-size:.86rem}
.row-date{font-variant-numeric:tabular-nums;font-size:.75rem}
.row.cursor::before{background:var(--spectrum)}
.acct-chip{border-radius:4px;padding:.1rem .4rem;margin-right:.4rem}
.row-hover .tool-btn{border-radius:8px}
.row-hover .tool-btn:hover{background:var(--ink-700)}

/* ---------- conversation ---------- */
.thread-scroll{padding:1.6rem 2.2rem 3rem}
.thread-subject{font:700 1.6rem/1.2 var(--font-display);letter-spacing:-.02em;margin:0 0 1.2rem .3rem}
.msg{border-radius:14px;border-color:var(--line);box-shadow:0 1px 2px rgba(15,29,40,.04), 0 18px 40px -30px rgba(15,29,40,.35)}
.msg-head{padding:.95rem 1.15rem}
.msg-avatar{background:var(--av,var(--av-0));font-size:.85rem;width:40px;height:40px}
.msg-from{font-size:.95rem}
.msg-body{padding-left:4.2rem}
.atts,.msg-actions{padding-left:4.2rem}
.qr-btn{border-radius:10px;padding:.6rem 1.15rem;transition:background .15s,border-color .15s,color .15s}
.qr-btn:hover{border-color:var(--teal-500);background:var(--teal-glow);color:var(--teal-600)}
.att{border-radius:10px}

/* ---------- menus / modals ---------- */
.menu{border-radius:12px;box-shadow:0 24px 50px -24px rgba(15,29,40,.45),0 0 0 1px var(--line)}
.menu-item{border-radius:6px;margin:0 .25rem;width:calc(100% - .5rem)}

/* ---------- phones: keep the approved layout, add the avatar column ---------- */
@media (max-width:768px), ((pointer:coarse) and (max-width:1024px)){
  .row{grid-template-columns:52px 1fr auto;grid-template-areas:"av from date" "av main star";min-height:74px;padding:.6rem .9rem .6rem .45rem;height:auto}
  .row-av{grid-area:av;width:40px;height:40px;font-size:.82rem;margin:0}
  .star{grid-area:star;width:30px;height:28px;font-size:1rem;justify-self:end}
  .row.unread .row-av::after{width:11px;height:11px}
  .thread-subject{font-size:1.25rem}
  .msg-body,.atts,.msg-actions{padding-left:1rem}
}