/* Brix · Inbox */
@font-face{font-family:'Inter Tight';font-weight:400 800;font-display:swap;src:url(/fonts/InterTight-latin.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:400 500;font-display:swap;src:url(/fonts/GeistMono-latin.woff2) format('woff2')}
:root{--paper:#F2F0EB;--paper50:#F8F6F2;--card:#FBFAF6;--linen:#E7E3DA;--mortar:#CFCBC2;--stone:#726D64;--graphite:#3B3833;--ink:#141210;--clay:#8E3A24;--moss:#4F6B4A;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font:400 15px/1.5 'Inter Tight',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
[hidden]{display:none!important}

.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border:1px solid var(--ink);white-space:nowrap}
.btn.clay{background:var(--clay);border-color:var(--clay);color:var(--paper)}
.btn.ink{color:var(--paper)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ghost{border-color:transparent;color:var(--stone)}
.btn.ghost:hover{color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:progress}

.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.brand b{font-weight:800;font-size:20px;letter-spacing:-.04em}
.brand .mono{color:var(--stone);padding-left:10px;border-left:1px solid var(--mortar)}

/* login */
.login{min-height:100%;display:grid;place-items:center;padding:24px}
.card{width:min(380px,100%);background:var(--card);border:1px solid var(--ink);padding:32px 28px;display:grid;gap:22px;box-shadow:0 30px 60px -32px rgba(20,18,16,.35)}
.field{display:grid;gap:6px}
.field .mono{color:var(--stone)}
.field input,.field textarea,.field select{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:8px 0;outline:none;font-size:17px}
.field textarea{resize:vertical;border:1px solid var(--mortar);padding:10px 12px;font-size:15px;line-height:1.55;background:#fff}
.err{color:var(--clay)}

/* app */
.app{height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:24px;padding:12px 24px;border-bottom:1px solid var(--ink);background:var(--paper)}
.tabs{display:flex;gap:4px}
.tabs button{height:34px;padding:0 14px;border:1px solid transparent;color:var(--stone)}
.tabs button[aria-pressed=true]{border-color:var(--ink);color:var(--ink);background:var(--card)}
.tabs i{font-style:normal;font:500 11px 'Geist Mono',monospace;color:var(--clay);margin-left:4px}
.acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.panes{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) 1fr}
.list{overflow:auto;border-right:1px solid var(--mortar);background:var(--paper50)}
.read{overflow:auto;min-width:0}
.empty{display:grid;place-items:center;height:100%;color:var(--stone);padding:40px;text-align:center}

/* list rows */
.row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;text-align:left;padding:14px 20px;border-bottom:1px solid var(--linen);position:relative}
.row:hover{background:var(--card)}
.row[aria-current=true]{background:var(--card);box-shadow:inset 3px 0 0 var(--ink)}
.row .who{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .when{color:var(--stone)}
.row .sub{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .snip{grid-column:1/-1;color:var(--stone);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.unread .who:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--clay);margin:0 8px 1px 0}
.row.unread .who,.row.unread .sub{font-weight:600}
.pill{display:inline-block;padding:2px 8px;border:1px solid currentColor}
.pill.new{color:var(--clay)}.pill.replied{color:var(--moss)}.pill.closed{color:var(--stone)}

/* reading pane */
.thread{max-width:820px;margin:0 auto;padding:28px 32px 40px}
.thread h1{font-weight:500;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em;line-height:1.1;margin:6px 0 24px}
.back{display:none;margin-bottom:12px;color:var(--stone)}
.msg{background:var(--card);border:1px solid var(--mortar);margin-bottom:14px}
.msg.out{border-color:var(--ink);background:#fff}
.msg header{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linen)}
.msg header .mono{color:var(--stone)}
.msg .body{padding:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg iframe{display:block;width:100%;border:0;min-height:80px;background:#fff}
.att{padding:0 16px 14px;color:var(--stone)}
.facts{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;margin:0 0 20px}
.facts dt{color:var(--stone)}
.facts dd{margin:0;overflow-wrap:anywhere}
.facts a{color:var(--ink)}
.quote{background:var(--card);border:1px solid var(--mortar);padding:16px;white-space:pre-wrap;margin-bottom:24px}
.reply{border:1px solid var(--ink);background:#fff;padding:14px 16px;display:grid;gap:10px;margin-top:8px}
.reply textarea{width:100%;min-height:130px;border:0;outline:none;resize:vertical;font-size:15px;line-height:1.55}
.reply footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.reply .note{color:var(--stone)}
.statusbar{display:flex;gap:8px;align-items:center;margin-bottom:20px}

/* compose */
.compose{border:1px solid var(--ink);padding:0;width:min(640px,94vw);background:var(--card);box-shadow:0 40px 80px -30px rgba(20,18,16,.5)}
.compose::backdrop{background:rgba(20,18,16,.35)}
.compose form{display:grid;gap:16px;padding:20px 22px}
.compose header,.compose footer{display:flex;justify-content:space-between;align-items:center}
.compose .x{font-size:16px;color:var(--stone)}
.compose .note{color:var(--clay)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px}

/* phones: one pane at a time */
@media (max-width:820px){
  .top{gap:12px;padding:10px 16px;flex-wrap:wrap}
  .brand .mono{display:none}
  .acts{gap:4px}
  .btn{height:34px;padding:0 12px}
  .panes{grid-template-columns:1fr}
  .app.reading .list{display:none}
  .app:not(.reading) .read{display:none}
  .thread{padding:18px 16px 32px}
  .back{display:inline-block}
  .facts{grid-template-columns:90px 1fr}
}

/* insert template */
.tplsel{height:34px;border:1px solid var(--mortar);background:var(--card);padding:0 8px;color:var(--ink);max-width:100%}
.reply footer .tplsel{margin-right:auto}
/* touch screens: 16px text in every field, or iPhone Safari zooms the page when you tap one */
@media (hover:none) and (pointer:coarse){input,textarea,select,.field textarea,.reply textarea,.tplsel,.bar input[type=search],.logform input,.logform textarea,.logform select{font-size:16px!important}}
.compose footer{flex-wrap:wrap}