/*
IC SHIP PASS — generated by icpass.py from the map. edit the CODE; rerun to refresh this.

══════════════════════════════════════════════════════════════════════
 PAGE 0 — TABLE OF CONTENTS  (goldfish pointers)
 jump by SEARCHING the anchor phrase — line numbers drift, names don't.
══════════════════════════════════════════════════════════════════════
  ✒️ LETTER-DESK SKIN (IC: a physical object, ... search: "✒️ LETTER-DESK SKIN"
  ⚙️ setup / OAuth panel ........................ search: "⚙️ setup / OAuth panel"
  body layout: list left / reader right ......... search: "body layout: list left"
  tabs .......................................... search: "tabs"
  search bar .................................... search: "search bar"
  thread list ................................... search: "thread list"
  category badges ............................... search: "category badges"
  suggested actions queue (below thread list) ... search: "suggested actions queue"
  reading pane .................................. search: "reading pane"
  compose ....................................... search: "compose"
══════════════════════════════════════════════════════════════════════

 FOR AI
 ───────
   **OWNS** — This file is the single source of truth for all visual styling of the email card
   **component. It exports no functions or variables; it defines CSS class names that the HTML/JS
   **layer depends on: `.card.p-email`, `.email-body`, `.email-thread-row`, `.email-compose`,
   **`.email-queue-panel`, and ~40 others. Changing a class name here orphans its HTML markup.
   
   **TOUCH HERE** —
   - Recolor the letter-desk theme (paper, ink, blotter, wax seal) → token overrides in
   - `.card.p-email` L6–21
   - Change unread dot appearance → `.email-unread-dot` L33 and L78
   - Adjust thread list row height or spacing → `.email-thread-row` L70
   - Recolor category badges (promo/purchases/social/spam) → `.email-badge.*` L88–92
   - Change compose button or send button styling → `.email-compose-btn` L112 or
   - `.email-compose-send` L143
   - Adjust reading pane layout or message block spacing → `.email-reader-body` L119 or
   - `.email-msg-block` L120
   - Modify search bar or tabs appearance → `.email-search-bar` L62 or `.email-tabs` L56
   
   **TRAPS** —
   - `.card.p-email` token names (`--surface`, `--text`, `--lav`, etc.) are referenced throughout
   - this file and likely in HTML class bindings; renaming them breaks the entire theme.
   - `.em-active` class (L59, L72) marks the active tab and active thread row; the JS layer sets
   - this class, so the selector name is a contract.
   - `.unread` class (L84–85) is set by JS to bold sender/subject; removing these rules silently
   - breaks unread emphasis.
   - `.email-thread-row` padding (L70) and `.email-thread-row.em-active` left-border +
   - padding-left (L72) must stay in sync or the active state will misalign.
   - Flex layout on `.email-body` (L51), `.email-list-panel` (L52), `.email-reader-panel` (L53)
   - is load-bearing; breaking `flex: 1` or `min-height: 0` will cause overflow bugs.
   
   **DO NOT** —
   - Rename any `.email-*` class without updating the HTML/JS that applies it.
   - Move or delete the `--font` token (L18, L20, L136, L142) without checking where it is used
   - in compose fields.
   - Change the OAuth setup panel (L35–48) styling without verifying the `.email-setup[hidden]`
   - toggle (L37) still works.
   - Add new color tokens here; they belong in the global design system, not scoped to this card.
   - Implement responsive breakpoints or mobile layout here; that belongs in a separate
   - media-query file or layout system.
   
   
   
   ---

END IC SHIP PASS
*/

/* email.css — ✉️ email card. mock-first. */

/* ── ✒️ LETTER-DESK SKIN (IC: a physical object, not peak-SaaS) ──────────────────────────────
   email is an old-fashioned writing desk: aged letter paper, ink, a typewriter hand. scoped TOKEN
   overrides recolor the whole card to parchment + ink — Sum's "letter in the mail" top-bar png lands later. */
.card.p-email {
  --surface:    #f4ecd8;           /* letter paper */
  --surface-2:  #e9dcc0;           /* the desk blotter / a folded leaf */
  --text:       #2f271d;           /* sepia ink */
  --text-dim:   #8c7d63;           /* faded ink */
  --line:       #d9cbac;           /* paper fold / desk seam */
  --btn:        #efe3c9;
  --btn-sh:     #cdbd97;
  --lav:        #46568a;           /* ink blue — borders, the unread dot, the active mark */
  --lav-bright: #2f3e6b;           /* deep ink — accent text */
  --lav-deep:   #e6d9bb;           /* stamped parchment — active-tab bg */
  --lav-shadow: #c7b58f;
  --font:       'American Typewriter', 'Courier New', 'Iowan Old Style', Georgia, serif;
  border-color: #cdbf9d;
  font-family: var(--font);
}
.card.p-email .card-head,
.card.p-email .card-body { background: #f4ecd8; color: var(--text); font-family: var(--font); }
.card.p-email .card-head   { border-bottom-color: #cdbf9d; box-shadow: inset 0 -3px 0 #b9243a; }   /* a wax-seal red tray line */
.card.p-email .card-bottom { border-top-color: #cdbf9d; box-shadow: inset 0 2px 0 #cdbf9d; }
/* the desk grain — warm paper under lamplight on a writing desk */
.card.p-email .email-body {
  background:
    radial-gradient(130% 80% at 75% -10%, rgba(255,244,214,.5), transparent 55%),
    linear-gradient(180deg, #f6efdc, #efe6cf);
}
/* the unread dot reads like a drop of ink */
.card.p-email .email-unread-dot { background: var(--lav-bright); box-shadow: 0 0 0 2px rgba(47,62,107,.18); }

/* ── ⚙️ setup / OAuth panel ── */
.email-setup { position: absolute; inset: 0; z-index: 10; background: var(--surface); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.email-setup[hidden] { display: none; }
.email-setup-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-label); font-weight: 700; color: var(--text); }
.email-setup-x { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-sm); width: 30px; height: 30px; cursor: pointer; font-size: var(--fs-chrome); }
.email-setup-x:hover { background: var(--surface-2); }
.email-setup p { font-size: var(--fs-chrome); line-height: 1.55; color: var(--text-dim); }
.email-setup b { color: var(--text); }
.email-setup ol { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.email-setup li { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.6; }
.email-setup code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; color: var(--lav-bright); font-size: var(--fs-chrome); }
.email-connect-btn { background: var(--surface-2); border: 1px solid var(--lav); color: var(--lav-bright); border-radius: var(--r-sm); padding: 10px 18px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; min-height: 34px; box-shadow: 0 2px 0 var(--lav-deep); }
.email-connect-btn:hover { background: var(--lav-deep); color: var(--text); }
.email-setup-note { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.45; }

/* ── body layout: list left / reader right ── */
.email-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.email-list-panel  { flex: 0 0 38%; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); }
.email-reader-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ── tabs ── */
.email-tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; flex-wrap: wrap; }
.email-tab { background: var(--btn); border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--fs-chrome); cursor: pointer; min-height: 30px; box-shadow: 0 2px 0 var(--btn-sh); }
.email-tab:hover { color: var(--text); border-color: var(--lav); }
.email-tab.em-active { background: var(--lav-deep); border-color: var(--lav); color: var(--lav-bright); box-shadow: 0 2px 0 var(--lav-shadow); }

/* ── search bar ── */
.email-search-bar { display: flex; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.email-search-input { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-family: var(--font); font-size: var(--fs-chrome); padding: 5px 9px; outline: none; min-height: 30px; }
.email-search-input:focus { border-color: var(--lav); }
.email-search-go { background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-dim); cursor: pointer; font-size: var(--fs-chrome); padding: 5px 12px; min-height: 30px; }
.email-search-go:hover { border-color: var(--lav); color: var(--lav-bright); }

/* ── thread list ── */
.email-thread-list { flex: 1; overflow-y: auto; min-height: 0; }
.email-thread-row { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 60px; }
.email-thread-row:hover { background: var(--surface-2); }
.email-thread-row.em-active { background: rgba(167,139,250,0.12); border-left: 3px solid var(--lav); padding-left: 9px; }
.email-thread-top { display: flex; align-items: center; gap: 6px; }
.email-from    { font-size: var(--fs-chrome); color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-date    { font-size: var(--fs-chrome); color: var(--text-dim); flex-shrink: 0; }
.email-subject { font-size: var(--fs-chrome); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-snippet { font-size: var(--fs-chrome); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-unread-dot    { width: 8px; height: 8px; border-radius: 50%; background: var(--lav); flex-shrink: 0; }
.email-unread-spacer { width: 8px; display: inline-block; flex-shrink: 0; }
.email-count { font-size: var(--fs-chrome); color: var(--text-dim); background: var(--surface-2); border-radius: 10px; padding: 1px 6px; flex-shrink: 0; }
.email-empty { padding: 20px; font-size: var(--fs-chrome); color: var(--text-dim); }

/* unread emphasis */
.email-thread-row.unread .email-from    { font-weight: 700; color: var(--text); }
.email-thread-row.unread .email-subject { font-weight: 700; color: var(--text); }

/* ── category badges ── */
.email-badge { font-size: var(--fs-ui); padding: 2px 8px; border-radius: 30px; font-weight: 600; flex-shrink: 0; }
.email-badge.promo    { background: rgba(167,139,250,0.18); color: var(--lav-bright); border: 1px solid rgba(167,139,250,0.4); }
.email-badge.purchases { background: rgba(61,220,132,0.12); color: var(--ok);   border: 1px solid rgba(61,220,132,0.3); }
.email-badge.social   { background: rgba(96,165,250,0.12); color: var(--cool); border: 1px solid rgba(96,165,250,0.3); }
.email-badge.spam     { background: rgba(248,113,113,0.12); color: var(--bad); border: 1px solid rgba(248,113,113,0.3); }

/* ── suggested actions queue (below thread list) ── */
.email-queue-panel { border-top: 1px solid var(--line); background: var(--surface-2); flex-shrink: 0; max-height: 220px; overflow: hidden; display: flex; flex-direction: column; }
.email-queue-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; cursor: pointer; }
.email-queue-label  { font-size: var(--fs-chrome); color: var(--text-dim); flex: 1; }
.email-queue-count  { font-size: var(--fs-chrome); background: var(--lav-deep); color: var(--lav-bright); border-radius: 10px; padding: 1px 7px; }
.email-queue-execute { font-size: var(--fs-chrome); padding: 3px 10px; border-radius: var(--r-sm); border: none; background: var(--bad-btn); color: var(--bad-text); cursor: pointer; min-height: 30px; }
.email-queue-execute:hover { background: var(--bad-btn-hover); }
.email-queue-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.email-q-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.email-q-item:last-child { border-bottom: none; }
.email-q-cb { width: 18px; height: 18px; accent-color: var(--bad); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.email-q-info { flex: 1; min-width: 0; }
.email-q-subject { font-size: var(--fs-chrome); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-q-from    { font-size: var(--fs-chrome); color: var(--text-dim); }
.email-q-reason  { font-size: var(--fs-chrome); color: #fb923c; margin-top: 1px; }

/* ── reading pane ── */
.email-reader-actions { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; flex-shrink: 0; }
.email-compose-btn { background: var(--btn); border: 1px solid var(--lav-deep); color: var(--lav-bright); border-radius: var(--r-sm); padding: 6px 14px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; min-height: 30px; box-shadow: 0 2px 0 var(--btn-sh); }
.email-compose-btn:hover { background: var(--lav-deep); color: var(--text); }
.email-reader-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: var(--fs-chrome); }
.email-reader-head { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.email-reader-back { background: var(--btn); border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--fs-chrome); cursor: pointer; min-height: 30px; box-shadow: 0 2px 0 var(--btn-sh); }
.email-reader-back:hover { color: var(--text); border-color: var(--lav); }
.email-reader-subject { font-size: var(--fs-chrome); font-weight: 700; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-reader-body { flex: 1; overflow-y: auto; padding: 14px; }
.email-msg-block { padding: 12px 0; border-bottom: 1px solid var(--line); }
.email-msg-meta { display: flex; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.email-msg-from { font-size: var(--fs-chrome); font-weight: 700; color: var(--text); }
.email-msg-date { font-size: var(--fs-chrome); color: var(--text-dim); }
.email-attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.email-attach-chip { font-size: var(--fs-chrome); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 8px; color: var(--text-dim); }
.email-msg-body { font-size: var(--fs-chrome); line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* ── compose ── */
.email-compose { display: flex; flex-direction: column; height: 100%; }
.email-compose-header { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.email-compose-title { font-size: var(--fs-label); font-weight: 700; color: var(--lav-bright); }
.email-compose-close { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-sm); width: 30px; height: 30px; cursor: pointer; font-size: var(--fs-chrome); }
.email-compose-close:hover { border-color: var(--lav); color: var(--lav-bright); }
.email-compose-field { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.email-compose-label { font-size: var(--fs-chrome); color: var(--text-dim); width: 55px; flex-shrink: 0; }
.email-compose-input { flex: 1; background: none; border: none; color: var(--text); font-size: var(--fs-chrome); font-family: var(--font); outline: none; min-height: 30px; }
.email-compose-attach-row { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.email-compose-attach-btn { background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-dim); cursor: pointer; font-size: var(--fs-chrome); padding: 3px 10px; min-height: 30px; }
.email-compose-attach-btn:hover { border-color: var(--lav); color: var(--lav-bright); }
.email-compose-attach-list { font-size: var(--fs-chrome); color: var(--text-dim); flex: 1; }
.email-compose-file-input { display: none; }
.email-compose-textarea { flex: 1; background: none; border: none; color: var(--text); font-size: var(--fs-chrome); font-family: var(--font); padding: 12px 14px; resize: none; outline: none; line-height: 1.65; min-height: 0; }
.email-compose-send { margin: 10px 14px 14px; background: var(--lav-deep); border: none; color: var(--lav-bright); border-radius: var(--r-sm); padding: 10px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; min-height: 34px; box-shadow: 0 3px 0 var(--lav-shadow); flex-shrink: 0; }
.email-compose-send:hover { background: var(--lav); color: #fff; }