/* approve screen styles. Brand tokens and base components live in /styles.css; follow ../DESIGN.md.
   WorkGallery layout: rail | list | email. Only tokens here: no new colors. 4/8px spacing scale. */

/* The one hero container: three panes that scroll on their own, sized to the window. */
#approve-view .ap-panes { grid-template-columns: 208px minmax(280px, 340px) minmax(0, 1fr); height: clamp(560px, calc(100vh - 232px), 1100px); min-height: 0; }
#approve-view .ap-panes > * { min-height: 0; }

/* ---- Rail: filters with counts, batch, progress, keys ---- */
#approve-view .ap-rail { display: flex; flex-direction: column; padding: var(--space-4) 0; overflow: auto; }
#approve-view .ap-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; padding: var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) - 3px); border: 0; border-left: 3px solid transparent; background: transparent; color: var(--text-2); font: 500 var(--fs-body)/1.3 var(--font-body); text-align: left; transition: background .15s ease, color .15s ease; }
#approve-view .ap-filter:hover { color: var(--text); background: var(--surface); }
#approve-view .ap-filter:focus-visible { outline-offset: -2px; }
#approve-view .ap-filter.is-selected { border-left-color: var(--gold-mark); background: var(--surface); color: var(--text); font-weight: 600; }
#approve-view .ap-filter-count { min-width: 24px; padding: 0 var(--space-2); border: 1px solid var(--border-cool); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font: 600 var(--fs-caption)/18px var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }
#approve-view .ap-rail-block { margin: var(--space-4) var(--space-5) 0; padding-top: var(--space-4); border-top: 1px solid var(--border); }
#approve-view .ap-rail-block label { display: flex; flex-direction: column; gap: var(--space-1); font: 700 var(--fs-micro)/1.3 var(--font-heading); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--text-2); }
#approve-view .ap-rail-block select { width: 100%; margin: 0; padding: 6px 32px 6px 10px; font: 400 var(--fs-small)/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
#approve-view .ap-rail-block.progress { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-2); }
#approve-view .ap-rail-block.progress progress { width: 100%; height: 8px; }
#approve-view .ap-keys { display: grid; gap: var(--space-2); margin-top: auto; font-size: var(--fs-small); color: var(--text-2); }
#approve-view .ap-keys .kbd { margin: 0 var(--space-2) 0 0; }
#approve-view .ap-keys .kbd + .kbd { margin-left: calc(var(--space-1) * -1); }

/* ---- List: one row per prospect, gold edge on the selected one ---- */
#approve-view .ap-list { display: flex; flex-direction: column; overflow: auto; }
#approve-view .ap-list .pane-header, #approve-view .ap-detail > .pane-header { position: sticky; top: 0; z-index: 1; }
#approve-view .ap-list-count { font-variant-numeric: tabular-nums; }
#approve-view .ap-row { display: grid; gap: 2px; transition: background .15s ease; }
#approve-view .ap-row .row-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#approve-view .ap-row .row-title { font-size: var(--fs-lead); line-height: 1.35; }
#approve-view .ap-row.is-selected .row-title { font-weight: 600; }
#approve-view .ap-row .row-meta { margin: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#approve-view .ap-row-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
#approve-view .ap-rec { display: inline-flex; align-items: center; padding: 1px var(--space-2); border: 1px solid var(--border-cool); border-radius: var(--radius-pill); background: var(--surface); font: 600 var(--fs-micro)/16px var(--font-body); color: var(--accent); white-space: nowrap; }

/* ---- Detail: the email as it will read, the evidence, the action bar ---- */
#approve-view .ap-detail { display: flex; flex-direction: column; overflow: auto; }
#approve-view .ap-hint { font: 500 var(--fs-micro)/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#approve-view .ap-card { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-8) 0; }
#approve-view .ap-card > .notice, #approve-view .ap-card > .card-state { margin: 0; }
/* A reading measure for everything above the action bar; the bar spans the pane. */
#approve-view .ap-card > :not(.ap-actionbar) { width: 100%; max-width: 800px; }
#approve-view .ap-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--fs-h2-lg); letter-spacing: var(--track-display); }
#approve-view .ap-head .who { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
#approve-view .ap-section-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font: 700 var(--fs-micro)/1.3 var(--font-heading); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); }

/* The email: envelope lines, subject, body, signature. */
#approve-view .ap-email { display: grid; gap: var(--space-3); }
#approve-view .ap-envelope { display: grid; gap: var(--space-1); margin: 0; font-size: var(--fs-small); }
#approve-view .ap-envelope > div { display: flex; gap: var(--space-3); min-width: 0; }
#approve-view .ap-envelope dt { flex: none; width: 40px; color: var(--text-2); }
#approve-view .ap-envelope dd { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
#approve-view .mail { padding: var(--space-6); border-radius: var(--radius-md); font-size: var(--fs-lead); line-height: 1.7; }
#approve-view .mail-subject { margin-bottom: var(--space-4); padding-bottom: var(--space-4); font: 700 var(--fs-h3)/1.4 var(--font-heading); letter-spacing: -0.005em; }
#approve-view .mail .fixed { color: var(--text); }
#approve-view .mail .signature { margin-top: var(--space-4); padding-top: var(--space-3); color: var(--text-2); font-size: var(--fs-small); }
/* Every variable part reads the same: tint + a thin navy underline; first name only the underline. */
#approve-view .slot, #approve-view .slot:is(.s-observation, .s-customerA, .s-customerB, .s-brand) { padding: 0 2px; border-radius: 2px; background: var(--surface-tint); color: var(--text); font-weight: inherit; box-shadow: inset 0 -1px 0 var(--navy-600); text-decoration: none; }
#approve-view .slot.s-firstName { background: transparent; box-shadow: inset 0 -1px 0 var(--navy-400); }
#approve-view .mail-subject .slot { font-weight: inherit; }
#approve-view .legend { display: block; font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }
#approve-view .legend .slot { font-size: inherit; }

/* Edit and reject forms open between the email and the evidence. */
#approve-view .ap-form { padding: var(--space-5); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); }
#approve-view .ap-form .ap-section-title { margin-bottom: 0; }
#approve-view .ap-form .actions { margin-top: var(--space-2); }
#approve-view .ap-form .reasons { margin: var(--space-3) 0 var(--space-4); }
#approve-view .ap-form .hint { margin: 0; color: var(--text-2); }

/* Evidence: a sunken panel under the email. */
#approve-view .ap-evidence { padding: var(--space-5) var(--space-6); background: var(--surface-sunken); border: 1px solid var(--border-hair); border-radius: var(--radius-md); }
#approve-view .ap-evidence .evidence-block { margin-top: var(--space-4); }
#approve-view .ap-evidence .ap-section-title + .evidence-block { margin-top: 0; }
#approve-view .ap-evidence h4 { margin-bottom: var(--space-1); color: var(--text-2); }
#approve-view .ap-evidence .evidence-block p { font-size: var(--fs-body); line-height: 1.6; }
#approve-view .ap-evidence .evidence-quote { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--navy-200); background: var(--surface); }
#approve-view .ap-source { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-2); overflow-wrap: anywhere; }

/* Research behind this email: the email and its research side by side on wide screens,
   stacked below that. The observation is highlighted in the email and quoted here. */
#approve-view .ap-card > .ap-review { max-width: 1400px; }
#approve-view .ap-review { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 1600px) { #approve-view .ap-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
#approve-view .ap-research-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
#approve-view .ap-research-head .ap-section-title { margin-bottom: 0; }
#approve-view .ap-source-type { display: flex; align-items: center; gap: var(--space-2); font: 700 var(--fs-micro)/1.3 var(--font-heading); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--text-2); }
#approve-view .ap-source-type select { width: auto; margin: 0; padding: 4px 28px 4px 8px; font: 400 var(--fs-small)/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
#approve-view .ap-research > .notice { margin: 0 0 var(--space-3); }
#approve-view .ap-research .evidence-block ul { margin: 0; padding-left: var(--space-5); font-size: var(--fs-body); line-height: 1.6; }
#approve-view .ap-research .evidence-block li + li { margin-top: var(--space-1); }
#approve-view .ap-research blockquote.evidence-quote { margin: 0; }
#approve-view .ap-url { color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
#approve-view .ap-research a { overflow-wrap: anywhere; }
#approve-view .ap-more { margin-top: var(--space-3); font-size: var(--fs-small); }
#approve-view .ap-more summary { color: var(--accent); font-weight: 600; }
#approve-view .ap-more ul { margin-top: var(--space-2); }
#approve-view .ap-more .md { margin-top: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border-hair); border-radius: var(--radius-md); font-size: var(--fs-small); line-height: 1.6; color: var(--text); }
#approve-view .ap-more .md h4 { margin: var(--space-3) 0 var(--space-1); color: var(--text); }
#approve-view .ap-more .md p, #approve-view .ap-more .md ul { margin: 0 0 var(--space-2); }
#approve-view .ap-more .md blockquote { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--navy-200); background: var(--surface-sunken); }
#approve-view .ap-nodraft .notice { margin: 0; }
#approve-view .ap-judged { color: var(--text-2); }
#approve-view .ap-form textarea { min-height: 64px; }

/* Action bar: pinned to the bottom of the email pane so it never scrolls away. */
#approve-view .ap-actionbar { position: sticky; bottom: 0; z-index: 1; margin: auto calc(var(--space-8) * -1) 0; padding: var(--space-4) var(--space-8); background: var(--surface); border-top: 1px solid var(--border); }
#approve-view .ap-actionbar .big-actions { align-items: center; }
#approve-view .ap-actionbar .big-actions .ghost { margin-left: auto; }
#approve-view .ap-actionbar .kbd { margin-left: var(--space-2); }
#approve-view .ap-role-note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-2); }
#approve-view .ap-empty { display: flex; align-items: center; justify-content: center; flex: 1; padding: var(--space-8); }
#approve-view .ap-empty .empty-state { max-width: 420px; width: 100%; }

@media (max-width: 1150px) {
  #approve-view .ap-panes { grid-template-columns: 176px minmax(240px, 280px) minmax(0, 1fr); }
  #approve-view .ap-card { padding: var(--space-5) var(--space-6) 0; }
  #approve-view .ap-actionbar { margin: auto calc(var(--space-6) * -1) 0; padding: var(--space-4) var(--space-6); }
  #approve-view .ap-hint { display: none; }
}
/* 900px: the shared panes stack; keep the rail as a compact strip and let the page scroll. */
@media (max-width: 900px) {
  #approve-view .ap-panes { grid-template-columns: 1fr; height: auto; overflow: clip; }
  #approve-view .ap-rail { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); max-height: none; overflow: visible; }
  #approve-view .pane-rail-title, #approve-view .ap-keys { display: none; }
  #approve-view .ap-filter { width: auto; padding: 6px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); }
  #approve-view .ap-filter:focus-visible { outline-offset: -2px; }
#approve-view .ap-filter.is-selected { border: 2px solid var(--navy-900); padding: 5px calc(var(--space-3) - 1px); }
  #approve-view .ap-rail-block { flex: 1 1 200px; margin: 0; padding: 0; border: 0; }
  #approve-view .ap-list { max-height: 40vh; }
  #approve-view .ap-detail { overflow: visible; }
  #approve-view .ap-list .pane-header, #approve-view .ap-detail > .pane-header { position: static; }
}
@media (max-width: 720px) {
  #approve-view .ap-card { padding: var(--space-4) var(--space-4) 0; gap: var(--space-3); }
  #approve-view .ap-actionbar { margin: auto calc(var(--space-4) * -1) 0; padding: var(--space-3) var(--space-4); }
  #approve-view .ap-actionbar .big-actions .ghost { margin-left: 0; }
  #approve-view .mail { padding: var(--space-4); font-size: var(--fs-lead); }
  #approve-view .ap-evidence { padding: var(--space-4); }
  #approve-view .ap-head h2 { font-size: var(--fs-h2); }
}