/* Docket's layout on top of Gloss (turn 9c). Signal Teal is the project
   accent: it marks the Do badge and the Comment button, nothing else. */
:root { --gl-color-accent: var(--gl-accent-teal); }

html, body { height: 100%; }
body { font: var(--gl-step--1)/1.5 var(--gl-font-text); }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }
.grow { flex: 1; }
.empty { color: var(--gl-color-text-tertiary); }
.count { font-size: var(--gl-step--2); color: var(--gl-color-text-secondary); }

/* Three panes on the fill: bare mailboxes, the list on a card, the thread
   as a stack of cards. */
.app { height: 100vh; display: grid; grid-template-columns: 200px 420px minmax(0, 1fr); gap: var(--gl-space-2xs); padding: var(--gl-space-2xs); background: var(--gl-color-surface-fill); }

/* Gloss Input: a field on a rule. */
.field { box-sizing: border-box; width: 100%; border: none; border-bottom: var(--gl-border-w) solid var(--gl-color-border-default); border-radius: 0; background: transparent; padding: 8px 2px; font: var(--gl-step--1) var(--gl-font-text); color: var(--gl-color-text-primary); outline: none; }
.field::placeholder { color: var(--gl-color-text-tertiary); }
.field:focus { border-bottom-color: var(--gl-color-accent); }

/* Gloss Button, primary/sm: the one accent stamp in a view. */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 13px; border: none; border-radius: var(--gl-radius); font: 500 var(--gl-step--2)/1.15 var(--gl-font-mono); letter-spacing: .01em; white-space: nowrap; cursor: pointer; }
.btn.primary { background: var(--gl-color-accent); color: var(--gl-color-accent-fg); }
.btn.primary:hover { filter: brightness(.94); }

/* Gloss Badge: an ink square and a mono label, no fill. */
.badge { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--gl-step--2)/1 var(--gl-font-mono); text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; color: var(--gl-color-text-secondary); }
.badge .mark { width: 6px; height: 6px; flex-shrink: 0; background: currentColor; }
.badge.accent { color: var(--gl-color-accent-ink); }
.badge.success { color: var(--gl-color-success); }

/* ── mailboxes ── */
.side { padding: var(--gl-space-m) var(--gl-space-s) var(--gl-space-2xs); display: flex; flex-direction: column; gap: var(--gl-space-m); min-height: 0; overflow-y: auto; }
.brand-row { display: flex; justify-content: space-between; align-items: center; }
.search-btn { all: unset; display: flex; cursor: pointer; color: var(--gl-color-text-tertiary); transition: color var(--gl-dur-fast) var(--gl-ease); }
.search-btn:hover { color: var(--gl-color-text-primary); }
.search-btn:focus-visible { outline: 2px solid var(--gl-color-accent); outline-offset: 2px; border-radius: 2px; }
.brand { font: 600 var(--gl-step-0)/1.2 var(--gl-font-text); letter-spacing: -.01em; padding: 0 2px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 8px; margin: 0 -8px; border-radius: var(--gl-radius); color: inherit; text-decoration: none; transition: background var(--gl-dur-fast) var(--gl-ease); }
.nav-item:hover { background: var(--gl-color-surface-fill-2); color: inherit; }
.nav-item.on { background: var(--gl-color-surface-card); font-weight: 600; }
.who { display: flex; flex-direction: column; gap: 3px; }
.who-btn { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 7px var(--gl-space-s); margin: 0 calc(-1 * var(--gl-space-s)) calc(-1 * var(--gl-space-2xs)); border-radius: var(--gl-radius); }
.who-btn:hover { background: var(--gl-color-surface-fill-2); }
.who-name { font-weight: 600; }
.who-login { text-transform: none; letter-spacing: 0; color: var(--gl-color-text-tertiary); }

/* ── the list: one card. A one-message thread is a single row; a longer one
   heads a row per message. Unread rows carry full ink; read ones
   step back. ── */
.list { background: var(--gl-color-surface-card); border-radius: 6px; padding: var(--gl-space-m) var(--gl-space-m) 0; display: flex; flex-direction: column; gap: var(--gl-space-m); min-height: 0; overflow-y: auto; }
.list-head { display: flex; justify-content: space-between; align-items: baseline; }
.list-head h1, .thread-head h2 { font: 600 var(--gl-step-0)/1.2 var(--gl-font-text); letter-spacing: -.01em; }
.section-head { color: var(--gl-color-text-tertiary); }
.groups { display: flex; flex-direction: column; gap: var(--gl-space-s); padding: var(--gl-space-2xs) 0 var(--gl-space-m); }
.group { display: flex; flex-direction: column; gap: var(--gl-space-3xs); }
.subj { min-width: 0; font-weight: 600; color: var(--gl-color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group:not(.unread) > .subj, .row.solo:not(.unread) .subj { font-weight: 500; color: var(--gl-color-text-secondary); }
.age { font-size: var(--gl-step--2); color: var(--gl-color-text-tertiary); white-space: nowrap; text-align: right; }
.rail { display: flex; flex-direction: column; gap: 2px; padding-left: 6px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 6px 8px 8px 10px; margin-right: -8px; border-radius: var(--gl-radius); color: var(--gl-color-text-secondary); text-decoration: none; transition: background var(--gl-dur-fast) var(--gl-ease); }
.row.solo { margin-left: -10px; }
.row:hover { background: var(--gl-color-surface-fill); color: var(--gl-color-text-secondary); }
.row.sel { background: var(--gl-color-surface-fill); }
.row .from, .row .line { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.unread .from { font-weight: 500; color: var(--gl-color-text-primary); }
.row .line { font-size: var(--gl-step--2); }
.row .snip { font-size: var(--gl-step--2); color: var(--gl-color-text-tertiary); }
.rail .row .snip { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── the thread: each email its own card, comments bare between them ── */
.reader { min-height: 0; overflow-y: auto; }
.reader > .empty { padding: var(--gl-space-m) var(--gl-space-l); }
.thread { padding: var(--gl-space-m) var(--gl-space-s) var(--gl-space-m) var(--gl-space-l); display: flex; flex-direction: column; gap: var(--gl-space-s); }
.thread-head { display: flex; align-items: baseline; gap: var(--gl-space-2xs); }
.thread-head .type-label { color: var(--gl-color-text-tertiary); }
.chain { display: flex; flex-direction: column; gap: var(--gl-space-xs); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: var(--gl-space-m); padding: var(--gl-space-s); border-radius: 6px; }
.item.card { background: var(--gl-color-surface-card); }
.item.card.sel { box-shadow: 0 0 0 var(--gl-border-w) var(--gl-color-border-default), var(--gl-shadow-float); }
.item.comment { gap: var(--gl-space-s); }
.item .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item .author { display: flex; gap: 10px; align-items: baseline; }
.item .from { cursor: pointer; }
.item .addr, .item .copies { color: var(--gl-color-text-tertiary); }
.item .copies { font-size: var(--gl-step--2); }
.item .text { line-height: 1.6; white-space: pre-line; }
.item .text.closed { cursor: pointer; color: var(--gl-color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The gutter: date, then the email's values, right-aligned. */
.gutter { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.comment .gutter { justify-content: flex-start; }
.when { display: flex; align-items: center; gap: 2px; }
.date { font-size: var(--gl-step--2); color: var(--gl-color-text-secondary); }
.icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--gl-radius); color: var(--gl-color-text-secondary); transition: background var(--gl-dur-fast) var(--gl-ease); }
.icon-btn:hover { background: var(--gl-color-surface-fill); color: var(--gl-color-text-primary); }
.sent { color: var(--gl-color-text-tertiary); }

/* A value is its own control: click it to open its menu. */
.ctrl { position: relative; }
.ctrl-btn { all: unset; box-sizing: border-box; display: flex; padding: 4px 6px; border-radius: var(--gl-radius); cursor: pointer; transition: background var(--gl-dur-fast) var(--gl-ease); }
.ctrl-btn:hover, .ctrl-btn.on { background: var(--gl-color-surface-fill); }
.ctrl-btn:focus-visible, .opt:focus-visible, .who-btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--gl-color-accent); outline-offset: 1px; }
.value { color: var(--gl-color-text-primary); }
.value.unset { color: var(--gl-color-text-tertiary); }
.value.static { padding: 4px 6px; }

/* The open menu is the one floating thing in the view. */
.menu { position: absolute; right: -12px; width: 176px; z-index: 2; background: var(--gl-color-surface-card); border-radius: var(--gl-radius); box-shadow: var(--gl-shadow-float); padding: 6px; display: flex; flex-direction: column; text-align: left; }
.menu.up { bottom: calc(100% + 2px); }
.menu.down { top: calc(100% + 2px); }
.who .menu.up { left: 0; right: auto; }
.opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: var(--gl-radius); }
.opt:hover, .opt.cur { background: var(--gl-color-surface-fill); }
.check { font: 500 var(--gl-step--2)/1 var(--gl-font-mono); }

.comment-box { display: flex; align-items: flex-end; gap: var(--gl-space-xs); }

/* Gloss toast: an ink slab, mono, no border. */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: var(--gl-space-s); padding: 12px var(--gl-space-s); min-width: 320px; background: var(--gl-color-text-primary); color: var(--gl-color-surface-page); border-radius: var(--gl-radius); box-shadow: var(--gl-shadow-float); font: var(--gl-step--2) var(--gl-font-mono); z-index: 3; }
.toast form { display: contents; }
.toast-act { all: unset; cursor: pointer; text-transform: uppercase; letter-spacing: .09em; text-decoration: underline; text-underline-offset: 3px; }
.toast-x { all: unset; cursor: pointer; opacity: .6; font-size: 16px; line-height: 1; }