/* public/css/layouts/sales.css
 * Sales page analytical hero — modelled on tests/templates/sales-template.html.
 * Reuses Phoenix's real design tokens (tokens.css), consistent with today.css.
 */

.sales-hero { margin-bottom: var(--space-12); }

.sales-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--rule-2);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    gap: var(--space-4);
}
.sales-page-eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-2); }

/* ── Figures ─────────────────────────────────────────────────────────────── */

.figures {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1px;
    background: var(--rule-2);
    border: 1px solid var(--rule-2);
    margin-bottom: var(--space-10);
}
.figure { background: var(--paper); padding: var(--space-5); }
.figure.feature { background: var(--white); padding: var(--space-6); }
.figure-label { font-family: var(--font-ui); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-3); }
.figure-value { font-family: var(--font-title); font-size: var(--text-xl); line-height: 1; color: var(--ink); }
.figure.feature .figure-value { font-size: var(--text-2xl); }
.figure-currency { font-family: var(--font-body); font-style: italic; font-size: 0.5em; color: var(--ink-dim); margin-right: 4px; }
.figure-foot { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink-dim); margin-top: var(--space-3); line-height: 1.5; }
.figure-foot strong { color: var(--ink); font-weight: 500; }
.figure-delta { font-family: var(--font-title); font-style: italic; font-size: 0.875rem; }
.figure-delta.up { color: var(--moss-deep); }
.figure-delta.down { color: var(--coral-deep); }
.figure-delta.up::before { content: "\2197"; margin-right: 3px; }
.figure-delta.down::before { content: "\2198"; margin-right: 3px; }

/* ── Trend ───────────────────────────────────────────────────────────────── */

.trend-block { margin-bottom: var(--space-10); background: var(--paper); border: 1px solid var(--rule); padding: var(--space-6); }
.trend-title { font-family: var(--font-title); font-size: var(--text-lg); line-height: 1; margin-bottom: var(--space-1); color: var(--ink); }
.trend-sub { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--ink-dim); text-transform: uppercase; }
.trend-blurb { font-family: var(--font-body); font-style: italic; font-size: var(--text-sm); color: var(--ink-dim); margin: var(--space-3) 0 var(--space-6); max-width: 70ch; }
.trend-blurb strong { color: var(--ink); font-style: normal; font-weight: 500; }
.trend-canvas { position: relative; height: 240px; }
.trend-canvas svg { display: block; width: 100%; height: 100%; }
.trend-legend { display: flex; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--ink-dim); align-items: center; }
.trend-legend .key { display: inline-flex; align-items: center; gap: var(--space-2); }
.trend-legend .swatch { width: 16px; height: 2px; }
.trend-legend .swatch.gold { background: var(--gold-deep); }
.trend-legend .swatch.solid { background: var(--ink); }

/* ── Margin's Read ───────────────────────────────────────────────────────── */

.margin-read {
    margin-bottom: var(--space-10);
    padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 4px);
    background: var(--white);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--gold);
}
.margin-read-eyebrow { font-family: var(--font-ui); font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-3); }
.margin-read-eyebrow .by { font-family: var(--font-title); font-style: italic; color: var(--gold-deep); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }
.margin-read-title { font-family: var(--font-title); font-size: var(--text-md); line-height: 1.2; margin-bottom: var(--space-3); max-width: 42ch; color: var(--ink); }
.margin-read-title em { font-family: var(--font-body); font-style: italic; color: var(--gold-deep); font-weight: 400; }
.margin-read-body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; max-width: 68ch; color: var(--ink); }
.margin-read-body p { margin-bottom: var(--space-2); }
.margin-read-body em { font-style: italic; color: var(--gold-deep); }

/* ── Title performance grid ──────────────────────────────────────────────── */

.titles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule-2);
    border: 1px solid var(--rule-2);
}
.title-card { background: var(--paper); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-height: 120px; }
.title-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.title-card-name { font-family: var(--font-title); font-size: var(--text-base); line-height: 1.15; color: var(--ink); }
.title-card-rank { font-family: var(--font-title); font-style: italic; font-size: var(--text-sm); color: var(--ink-dim); flex-shrink: 0; }
.title-card-meta { font-family: var(--font-ui); font-size: 0.625rem; letter-spacing: 0.05em; color: var(--ink-dim); text-transform: uppercase; }
.title-card-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: var(--space-2); border-top: 1px dotted var(--rule-2); }
.title-card-units { font-family: var(--font-title); font-size: var(--text-md); line-height: 1; color: var(--ink); }
.title-card-units span { font-family: var(--font-body); font-style: italic; font-size: 0.6875rem; color: var(--ink-dim); margin-left: 3px; }

@media (max-width: 1100px) {
    .figures { grid-template-columns: 1fr 1fr; }
    .figure.feature { grid-column: 1 / -1; }
    .titles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .figures { grid-template-columns: 1fr; }
    .titles-grid { grid-template-columns: 1fr; }
}

/* ── "Explain yourself" (AI Policy transparency affordance) ─────────────── */

.ai-explain { margin-top: var(--space-4); }
.ai-explain-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-dim);
    cursor: pointer;
    min-height: 44px;
}
.ai-explain-toggle:hover { color: var(--ink); border-color: var(--ink); }
.ai-explain-detail {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--paper);
    border: 1px solid var(--rule-2);
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--ink-dim);
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 240px;
    overflow-y: auto;
}

/* ── Title search (type-ahead) — Record Sale ─────────────────────────────── */

.title-search { position: relative; }
.title-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--z-raised);
    background: var(--white);
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    box-shadow: var(--shadow);
    max-height: 220px;
    overflow-y: auto;
    display: none;
}
.title-search-result {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
}
.title-search-result:hover,
.title-search-result:focus {
    background: var(--paper);
}
.title-search-empty {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--ink-dim);
}

/* ── Repeatable title rows — Record Sale multi-title entry ──────────────── */

.sale-title-rows { display: flex; flex-direction: column; gap: var(--space-5); }
.sale-title-row {
    position: relative;
    padding: var(--space-4);
    background: var(--paper);
    border: 1px solid var(--rule-2);
}
.sale-title-row .remove-row-button {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

/* ── Source email link — Record Sale ─────────────────────────────────────── */

.email-link-status { margin-top: var(--space-3); }
.email-linked-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--paper);
    border: 1px solid var(--rule-2);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}
.email-search-results { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); max-height: 320px; overflow-y: auto; }
.email-search-result {
    padding: var(--space-3);
    border: 1px solid var(--rule-2);
    cursor: pointer;
}
.email-search-result:hover { background: var(--paper); }