/* ARK Mail — base layout + the "Field" skin (default).
   ark.studio's own layering: grey page #4A4949 → light card #DBDBDB → white sheet.
   OCR, caps, no tracking for the machine voice; Univers, sentence case, for people. */
@font-face { font-family: "ARK OCR"; src: url("/fonts/OCR.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "ARK Micro"; src: url("/fonts/MicrogrammaD-BoldExte.woff2") format("woff2"); font-display: swap; }

:root {
  --page: #4a4949; --card: #dbdbdb; --sheet: #fff; --ink: #141414; --ink-2: #4a4949; --grey: #828282; --mid: #c1c1c1; --faint: #a8a8a8;
  --rule: rgba(0,0,0,.08); --rule-light: rgba(255,255,255,.08); --red: #d20000; --logo: #ff0000;
  --ocr: "ARK OCR", "OCR A Std", ui-monospace, Menlo, monospace;
  --sans: "univers-next-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --head: var(--sans); --read: var(--sans);
  --m: 24px;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: var(--page); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; background: none; border: 0; padding: 0; outline-offset: 3px; text-transform: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
input, textarea { outline: none; }
.o { font-family: var(--ocr); text-transform: uppercase; font-size: 14px; line-height: 1.75; letter-spacing: 0; }
.case-only { display: none; }
.mark path { fill: var(--logo); }
:focus-visible { outline: 2px solid var(--red); }

/* ---------- sign in: one line at a time on a white field ---------- */
.login { position: fixed; inset: 0; z-index: 40; overflow: auto; background: var(--sheet); display: grid; grid-template-rows: auto 1fr auto; padding: 26px 58px 30px; }
.login-top { display: flex; justify-content: space-between; align-items: center; color: var(--grey); }
.login-top .mark { height: 15px; }
.login-form { align-self: center; width: 100%; position: relative; }
.login .who { color: var(--grey); min-height: 1.75em; margin-bottom: 10px; }
.login .who button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; }
.login .line { display: block; width: 100%; font: 500 clamp(36px, 5.4vw, 128px)/1.1 var(--head); letter-spacing: -.04em; color: var(--ink); caret-color: var(--red); text-transform: none; }
.login .line::placeholder { color: #d4d4d4; }
.login .line:focus-visible { outline: none; } /* the red caret is the focus */
.login .line.off { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.login .line.in { animation: lineIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes lineIn { from { transform: translateY(24px); opacity: 0; } }
.login .hint { margin-top: 22px; display: flex; gap: 22px; align-items: center; color: var(--faint); }
.login-form:not(.step2) .hint .pill { display: none; }
.login .err { color: var(--red); min-height: 1.75em; margin-top: 10px; }
.login-fine { display: flex; justify-content: space-between; gap: 20px; color: var(--faint); font-size: 13px; }

/* ---------- frame ---------- */
.app { height: 100vh; display: grid; grid-template-rows: 64px 1fr; padding: 0 var(--m) var(--m); }
.top { display: flex; align-items: center; gap: 34px; color: var(--mid); min-width: 0; }
.top .mark { height: 13px; flex: none; }
.top nav { display: flex; gap: 24px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav button { color: #9a9a9a; white-space: nowrap; }
.top nav button:hover, .top nav button[aria-current="true"] { color: #fff; }
.top nav sup { color: var(--logo); font-size: 12px; margin-left: 3px; }
.search { margin-left: auto; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--rule-light); width: 220px; flex: none; }
.search input { flex: 1; min-width: 0; color: #fff; }
.search input::placeholder { color: #8a8a8a; }
.search input::-webkit-search-cancel-button { filter: invert(1); }
.gear { color: #9a9a9a; } .gear:hover { color: #fff; }
.write { background: var(--red); color: #fff; border-radius: 32px; padding: 3px 16px 2px; flex: none; }
.write:hover { background: #fff; color: var(--ink); }

/* ---------- card: list + sheet ---------- */
.card { background: var(--card); display: grid; grid-template-columns: minmax(300px, 380px) 1fr; min-height: 0; }
.list { display: flex; flex-direction: column; min-height: 0; }
.list-head { display: flex; justify-content: space-between; padding: 20px 24px 12px; color: var(--grey); }
.items { overflow-y: auto; flex: 1; }
.it { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; padding: 14px 24px 15px; border-top: 1px solid var(--rule); position: relative; transition: background .1s ease; }
.it:hover { background: rgba(255,255,255,.45); }
.it .who { font-size: 15px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it .dot { position: absolute; left: 11px; top: 23px; width: 7px; height: 7px; border-radius: 100%; }
.it.new .who { color: var(--ink); font-weight: 500; }
.it.new .dot { background: var(--red); }
.it .t { color: var(--grey); font-size: 13px; }
.it .s { grid-column: 1 / -1; font-size: 15px; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it.new .s { color: var(--ink-2); }
.it .marks { color: var(--grey); font-size: 12px; margin-left: 6px; }
.it .no { display: none; }
.it .who .n { margin-left: 8px; font-size: 12px; color: var(--grey); font-weight: 400; }
.it .who em { font-style: normal; font-size: 12px; color: var(--red); }
.row { position: relative; }
.swipe { display: none; }
.grey { color: var(--grey); }
.it[aria-current="true"] { background: var(--sheet); border-top-color: transparent; }
.it[aria-current="true"] + .it { border-top-color: transparent; }
.more { margin: 12px 24px 24px; color: var(--grey); }
.more:hover { color: var(--ink); }
.list-empty { padding: 30px 24px; color: var(--grey); }

.sheet { background: var(--sheet); overflow-y: auto; min-height: 0; position: relative; }
.inner { position: relative; max-width: 800px; padding: 56px 72px 90px; }
.empty { color: var(--faint); padding-top: 20vh; text-align: center; }

/* ---------- reading ---------- */
.meta { display: flex; flex-wrap: wrap; gap: 0 18px; color: var(--grey); }
.meta dt { display: none; }
.meta .rcpt dt { display: inline; margin-right: 6px; } /* To / Cc keep their label: an address alone is ambiguous */
.meta > div { display: flex; }
.meta dd b { font-weight: 400; color: var(--ink); }
.read h1, .settings h1 { font: 500 40px/1.08 var(--head); letter-spacing: -.035em; margin: 24px 0 28px; overflow-wrap: anywhere; }
.body { font: 400 19px/1.55 var(--read); letter-spacing: -.01em; color: #262626; overflow-wrap: anywhere; }
.body p { margin-bottom: .85em; }
.mailframe { width: 100%; border: 0; display: block; min-height: 60px; }
.images-note { display: flex; gap: 14px; align-items: center; margin: 0 0 18px; padding: 10px 14px; background: #f4f4f4; color: var(--grey); }
.images-note button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.files { display: grid; gap: 8px; margin-top: 30px; max-width: 480px; }
.file { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--card); color: var(--ink); text-decoration: none; }
.file:hover { background: var(--ink); color: #fff; }
.file .grey { color: var(--grey); white-space: nowrap; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.pill { border-radius: 32px; padding: 5px 18px 4px; border: 2px solid var(--rule); color: var(--ink); transition: border-color .1s ease, background .1s ease, color .1s ease; }
.pill:hover { border-color: var(--ink); }
.pill.go { background: var(--red); border-color: var(--red); color: #fff; }
.pill.go:hover { background: var(--ink); border-color: var(--ink); }
.pill[disabled] { opacity: .5; cursor: wait; }
.pill.on { border-color: var(--ink); }
.link { color: var(--grey); } .link:hover { color: var(--ink); }
.stamp, .sisf, .classif, .pageno { display: none; }

/* earlier messages of the conversation */
.thread { margin-top: 56px; border-top: 1px solid var(--rule); }
.thread h2 { font-weight: 400; color: var(--grey); padding: 18px 0 6px; }
.thread h2 span { color: var(--faint); margin-left: 6px; }
.ex { border-bottom: 1px solid var(--rule); }
.ex-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; padding: 14px 0 13px; text-align: left; }
.ex-head .who { color: var(--ink-2); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-head .t { color: var(--grey); font-size: 13px; white-space: nowrap; }
.ex-head:hover .who, .ex.open .who { color: var(--ink); }
.ex-body { padding: 0 0 20px; font: 400 17px/1.55 var(--read); color: #4a4a4a; overflow-wrap: anywhere; }
.ex-body p { margin-bottom: .7em; }
.ex-body .o { font-size: 13px; }

/* ---------- writing ---------- */
.field { display: none; }
body.writing .read, body.writing #empty { display: none; }
body.writing .field { display: block; }
body.writing .list { opacity: .45; transition: opacity .3s ease; }
.field .to { display: flex; gap: 14px; align-items: baseline; border-bottom: 1px solid var(--rule); padding: 4px 0 10px; color: var(--grey); }
.field .to input { flex: 1; font: 400 17px/1.4 var(--sans); color: var(--ink); text-transform: none; }
.field .cc { margin-top: 6px; }
.field .subject { display: block; width: 100%; font: 500 40px/1.1 var(--head); letter-spacing: -.035em; margin: 34px 0 22px; color: var(--ink); }
.field .subject::placeholder { color: #cfcfcf; }
.txt { min-height: 30vh; font: 400 19px/1.55 var(--read); letter-spacing: -.01em; color: #262626; outline: none; caret-color: var(--red); overflow-wrap: anywhere; }
.txt:empty::before { content: attr(data-placeholder); color: #cfcfcf; }
.txt p, .txt div { margin: 0 0 .7em; min-height: 1.55em; }
.sig-preview { white-space: pre-wrap; color: var(--faint); font: 400 17px/1.5 var(--read); margin-top: 8px; }
.field .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 30px; color: var(--grey); }
.field .foot .n { margin-left: auto; }
.cfiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cf { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; background: var(--card); padding: 4px 6px 3px 14px; font-size: 13px; }
.cf .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; text-transform: none; font-family: var(--sans); font-size: 14px; }
.cf .x { width: 26px; height: 26px; color: var(--grey); font-size: 16px; }
.cf .x:hover { color: var(--red); }
.cf.up .grey { color: var(--red); }
.cf.err { background: #fbe9e9; } .cf.err .grey { color: var(--red); }
#draftState { color: var(--faint); margin-right: 10px; }
.drop { position: fixed; inset: 0; display: none; place-items: center; z-index: 30; pointer-events: none; background: rgba(255,255,255,.82); color: var(--ink); font-size: 18px; outline: 3px dashed var(--red); outline-offset: -18px; }
.drop.on { display: grid; }
.wire { display: none; margin-top: 18px; padding: 14px 16px; background: #f4f4f4; font: 13px/1.6 ui-monospace, Menlo, monospace; color: #4a4a4a; white-space: pre-wrap; }
.wire.on { display: block; }

/* quotes: a thin rule, grey text, one tiny attribution per person */
.q { position: relative; margin: 6px 0 16px; padding: 2px 34px 2px 18px; border-left: 2px solid var(--card); color: #6b6b6b; font-size: 17px; line-height: 1.5; user-select: none; }
.q .att { display: block; font-family: var(--ocr); font-size: 12px; text-transform: uppercase; color: #a3a3a3; margin-bottom: 2px; }
.q.cont .att { display: none; }
.q .x { position: absolute; right: 4px; top: 0; color: #b5b5b5; opacity: 0; transition: opacity .1s ease; font-family: var(--ocr); font-size: 13px; }
.q:hover { border-left-color: #b5b5b5; }
.q:hover .x { opacity: 1; }
.q .x:hover { color: var(--red); }
.q.flash { animation: flash .6s ease; }
@keyframes flash { from { background: #f4f4f4; } }
.chip { position: absolute; z-index: 5; display: none; background: var(--ink); color: #fff; border-radius: 32px; padding: 2px 12px 1px; font-family: var(--ocr); font-size: 13px; text-transform: uppercase; line-height: 1.75; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.chip:hover { background: var(--red); }
.chip kbd { font: inherit; opacity: .55; margin-left: 6px; }
.orig { margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--faint); font: 400 17px/1.55 var(--read); }
.orig .head { font-family: var(--ocr); font-size: 12px; text-transform: uppercase; color: #b0b0b0; margin-bottom: 14px; }
.orig p { position: relative; margin-bottom: .8em; transition: color .1s ease; overflow-wrap: anywhere; }
.orig p:hover { color: #6b6b6b; }
.orig p .pq { position: absolute; left: -40px; top: 0; font-size: 20px; line-height: 1.2; color: #c9c9c9; opacity: 0; transition: opacity .1s ease; }
.orig p:hover .pq { opacity: 1; }
.orig p .pq:hover { color: var(--red); }

/* ---------- settings ---------- */
.set { display: grid; grid-template-columns: 180px 1fr; gap: 8px 24px; padding: 20px 0; border-top: 1px solid var(--rule); align-items: start; }
.set > small, .set .hint { grid-column: 2; color: var(--grey); font-size: 13px; display: block; margin-top: 6px; }
.set-l { color: var(--grey); padding-top: 2px; }
.line { width: 100%; font: 400 17px/1.5 var(--sans); border-bottom: 1px solid var(--rule); padding: 2px 0 6px; resize: vertical; }
.skins { display: flex; gap: 14px; flex-wrap: wrap; }
.skin-opt { display: grid; gap: 6px; text-align: left; width: 200px; padding: 10px; border: 2px solid var(--rule); }
.skin-opt[aria-checked="true"] { border-color: var(--ink); }
.skin-opt small { color: var(--grey); font-size: 13px; }
.sw { height: 72px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 4px; padding: 6px; }
.sw-field { background: #4a4949; } .sw-field i { background: #dbdbdb; } .sw-field b { background: #fff; }
.sw-case { background: #151513; } .sw-case i { background: #e2e0d6; } .sw-case b { background: #ecebe4; border-left: 1px solid rgba(224,16,15,.35); }
.seg { justify-self: start; display: inline-flex; border: 2px solid var(--rule); border-radius: 32px; overflow: hidden; }
.seg button { padding: 4px 16px 3px; color: var(--grey); }
.seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
#pEmail { margin-bottom: 12px; }
.pw { display: grid; gap: 14px; max-width: 420px; }
.pw .line.off { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pw-go { display: flex; gap: 18px; align-items: center; margin-top: 6px; }
.pw .err { color: var(--red); min-height: 1.75em; }
.set .pw .hint { grid-column: auto; margin-top: 0; }
.saved { color: var(--grey); min-height: 1.75em; margin-top: 10px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff; padding: 6px 18px 5px; border-radius: 32px; transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 20; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast button { pointer-events: auto; color: var(--mid); margin-left: 12px; text-decoration: underline; }

/* ---------- phone ----------
   One column, one thing at a time. The list has a sticky header and a Write button under
   the thumb; reading and writing get their own bar with Back and the main actions, and the
   reply actions stay docked at the bottom. Rows swipe left to archive. */
.mbar, .fab { display: none; }
@media (max-width: 900px) {
  :root { --m: 0px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
  body { overflow: auto; background: var(--card); }
  .app { height: auto; min-height: 100dvh; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .top { position: sticky; top: 0; z-index: 10; background: var(--page); flex-wrap: wrap; gap: 0 18px; padding: calc(14px + var(--safe-t)) 16px 0; }
  .top .mark { height: 12px; }
  .top nav { order: 3; width: calc(100% + 32px); margin: 10px -16px 0; padding: 0 16px; gap: 22px; }
  .top nav button { padding: 8px 0 10px; border-bottom: 2px solid transparent; }
  .top nav button[aria-current="true"] { border-bottom-color: var(--logo); }
  .search { order: 4; width: 100%; margin: 4px 0 12px; border-bottom: 0; background: rgba(255,255,255,.07); border-radius: 32px; padding: 7px 14px 6px; }
  .search input { font-size: 16px; } /* 16px or iOS zooms the page on focus */
  .gear { margin-left: auto; padding: 6px 0; }
  .top .write { display: none; }
  body.reading .top, body.writing .top, body.setting .top { display: none; }
  .card { grid-template-columns: minmax(0, 1fr); background: var(--card); }
  .list-head { padding: 16px 18px 8px; }
  .sheet { display: none; overflow: visible; }
  body.reading .list, body.writing .list, body.setting .list { display: none; }
  body.reading .sheet, body.writing .sheet, body.setting .sheet { display: block; min-height: 100dvh; }
  body.reading, body.writing, body.setting { background: var(--sheet); }
  .inner { padding: 0 18px calc(40px + var(--safe-b)); max-width: none; }
  body.reading .inner { padding-bottom: 0; }

  /* list rows: bigger targets, swipe to archive */
  .it { padding: 15px 18px 16px 30px; background: var(--card); touch-action: pan-y; transition: transform .18s ease; }
  .it.dragging { transition: none; }
  .it .who { font-size: 16px; }
  .it .s { font-size: 15px; }
  .it .dot { left: 13px; top: 24px; }
  .it[aria-current="true"] { background: var(--card); border-top-color: var(--rule); }
  .it[aria-current="true"] + .it, .row + .row .it { border-top-color: var(--rule); }
  .swipe { display: flex; position: absolute; inset: 0; justify-content: flex-end; align-items: center; padding-right: 22px; background: #8c8c8c; color: #fff; transition: background .15s ease; }
  .row.armed .swipe { background: var(--red); }
  .row.gone { animation: gone .25s ease forwards; }
  @keyframes gone { to { opacity: 0; } }
  .more { margin: 16px 18px calc(96px + var(--safe-b)); }
  .fab { display: block; position: fixed; right: 16px; bottom: calc(18px + var(--safe-b)); z-index: 12; background: var(--red); color: #fff; border-radius: 32px; padding: 11px 22px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
  body.reading .fab, body.writing .fab, body.setting .fab { display: none; }

  /* the bar over a message, a draft or settings */
  .mbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 8; margin: 0 -18px 18px; padding: var(--safe-t) 18px 0; min-height: calc(52px + var(--safe-t)); background: var(--sheet); border-bottom: 1px solid var(--rule); color: var(--grey); }
  .mbar button { min-height: 44px; }
  .mbar > span { display: flex; gap: 20px; }
  .mbar .pill.go { min-height: 0; padding: 6px 20px 5px; }
  .read .meta { margin-top: 6px; }
  .read h1, .settings h1, .field .subject { font-size: 30px; margin-top: 18px; }
  .body, .txt { font-size: 18px; }
  .acts { position: sticky; bottom: 0; z-index: 7; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 36px -18px 0; padding: 10px 18px calc(10px + var(--safe-b)); background: var(--sheet); border-top: 1px solid var(--rule); gap: 8px; }
  .acts::-webkit-scrollbar { display: none; }
  .acts .pill { white-space: nowrap; flex: none; padding: 7px 16px 6px; }
  .wide { display: none; }
  .thread { margin: 0 0 calc(30px + var(--safe-b)); border-top: 0; }
  .files { max-width: none; }
  .file { padding: 16px 18px; }

  /* writing */
  .field .to { padding-top: 8px; }
  .field .to input { font-size: 17px; }
  .field .foot { margin-top: 26px; padding-bottom: var(--safe-b); }
  .field .foot .send { display: none; }
  .field .foot .n { margin-left: 0; width: 100%; }
  .txt { min-height: 40vh; }
  .orig p .pq { left: auto; right: -6px; opacity: .6; }
  .cf .nm { max-width: 55vw; }
  .chip.docked { position: fixed; left: 50%; bottom: calc(86px + var(--safe-b)); transform: translateX(-50%); padding: 9px 20px 8px; font-size: 14px; }

  /* settings */
  .set { grid-template-columns: 1fr; }
  .set > small, .set .hint { grid-column: 1; }
  .skin-opt { width: calc(50% - 7px); }
  .login { padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .login-form .hint .pill { display: inline-block !important; } /* no Enter key to hint at on a phone */
  .login-form:not(.step2) #loginHint { display: none; }
  .login-fine { flex-direction: column; gap: 4px; }
}