/* ============================================================
   CITATIONS
   ============================================================ */

.cite-marker {
    font: 600 0.75em/1.2 var(--sans);
    color: var(--doc-ochre);
    cursor: pointer;
    vertical-align: super;
    padding: 0 2px;
    transition: color var(--dur);
}
.cite-marker:hover { color: var(--doc-ochre-hover); text-decoration: underline; }
.cite-marker.cite-loading { opacity: 0.4; pointer-events: none; }
.cite-marker.flash { animation: cite-flash 1.4s ease; }
@keyframes cite-flash {
    0% { color: var(--td1); background: var(--doc-ochre-dim); border-radius: var(--radius-2xs); }
    100% { background: transparent; }
}

.cite-highlight {
    background: rgba(139,58,42,0.25);
    border-radius: var(--radius-2xs);
    padding: 2px 1px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background 1.2s ease;
}
.cite-highlight.fading {
    background: transparent;
}

/* Hovering a citation marker tints its cited claim inline, replacing the old
   claim echo inside the tooltip. Line-locked fill (the same technique the diff
   highlights use): the tint is a gradient image sized to exactly 1lh and
   centered per line via box-decoration-break: clone, so the bands on wrapped
   lines touch through the leading instead of striping with gaps. Generous
   padding-block gives the 1lh band room to render; horizontal padding stays 0 so
   the tint can't reflow the prose. Brick is the citation family's accent. */
/* The tint fades in/out instead of snapping. A gradient `background-image`
   can't transition, so the brick color rides a registered custom property
   (`--cited-hl`) — @property makes it animatable — and the band geometry sits
   on the base `.cited-claim` always (transparent, so invisible and
   layout-neutral: vertical padding on an inline element doesn't reflow). */
@property --cited-hl {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}
.cited-claim {
    --cited-hl: transparent;
    background-color: transparent;
    background-image: linear-gradient(var(--cited-hl), var(--cited-hl));
    background-size: 100% 1lh;
    background-position: 0 50%;
    background-repeat: no-repeat;
    border-radius: var(--radius-2xs);
    padding: 0.5em 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: --cited-hl var(--dur-smooth) var(--ease);
}
.cited-claim.cite-claim-hover { --cited-hl: var(--doc-ochre-dim); }

.cite-tip {
    position: fixed;
    /* Glass-panel material borrowed from landing's .why-card--us, translated
       for the light papyrus backdrop: an opaque warm-slate base (so the page
       can't bleed through the corners) under the canonical top sheen, a soft
       gold hairline, the larger glass radius, and a stele crown (::before).
       Replaces the old brick top-bar — the gold panel look ties the tooltip to
       CiteOwl's signature card chrome rather than to the marker. */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.008) 100%),
        var(--chrome-bg2);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-xl);
    padding: 16px 20px;
    max-width: 360px;
    font-size: var(--fs-sm);
    z-index: var(--z-tooltip);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-md);
    pointer-events: none;
    /* Fades + lifts in on insertion instead of snapping. JS sets left/top after
       measuring, so we animate opacity + a small translate (transform doesn't
       affect the measured rect). */
    animation: cite-tip-in var(--dur-smooth) var(--ease);
}
@keyframes cite-tip-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Stele crown — thin centered gold rule across the top, the same signature
   .why-card--us uses on landing. */
.cite-tip::before {
    content: '';
    position: absolute;
    top: 0; left: 27%; right: 27%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.75;
}
/* Gold title carries the source identity, muted grey byline is metadata, and the
   evidence quote takes the brightest body color (--t1) so it anchors the card now
   that the claim echo lives inline in the document. The quotation marks already
   mark it as a quote, so it carries no blockquote bar (a fourth gold element on an
   already gold-heavy card, redundant with the marks); italic alone gives it the
   source's voice. A gold hairline under the byline splits the header from the quote. */
.cite-tip-source { font-weight: 600; color: var(--accent-text); margin-bottom: 4px; font-size: var(--fs-sm); }
.cite-tip-byline { color: var(--t2); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--accent-border); font-size: var(--fs-xs); }
.cite-tip-quote  { color: var(--t1); font-style: italic; line-height: 1.5; font-size: var(--fs-xs); }
/* Imported citations carry no supporting quote (the import links by
   reference position, it has no evidence judgment) — say so instead of
   leaving readers to mistake the claim echo for a quote. */
.cite-tip-origin { font: var(--font-eyebrow-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t2); }

/* ---- Sources section (bottom of doc) ---- */
#sources-section {
    max-width: var(--doc-max-w);
    margin: 56px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--doc-border);
}
.sources-heading { font: 400 24px/1.3 var(--serif); color: var(--td1); margin-bottom: 28px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.sources-heading > span { flex: 1; }

/* Header — title on the left, search + add controls on the right */
.sources-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.sources-title { flex: 1; font: 400 24px/1.3 var(--serif); color: var(--td1); letter-spacing: -0.01em; }
.sources-tools { display: flex; align-items: center; gap: 8px; }
.src-search {
    display: flex; align-items: center; gap: 7px;
    background: var(--doc-bg-light);
    border: 1px solid var(--doc-border-strong);
    border-radius: var(--radius);
    padding: 6px 10px; width: 210px;
    transition: border-color var(--dur);
}
.src-search:focus-within { border-color: var(--doc-ochre); }
.src-search svg { color: var(--td3); flex-shrink: 0; }
.src-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font: 400 13px var(--sans); color: var(--td1); }
.src-search input::placeholder { color: var(--td3); }
.src-add-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent;
    border: 1px solid var(--doc-border-strong);
    color: var(--td2);
    font: 500 12.5px var(--sans);
    padding: 7px 12px; border-radius: var(--radius);
    cursor: pointer; white-space: nowrap;
    transition: border-color var(--dur), color var(--dur), box-shadow var(--dur);
}
.src-add-btn:hover { border-color: var(--doc-ochre); color: var(--doc-ochre); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.src-add-btn.loading { opacity: 0.5; pointer-events: none; cursor: wait; }
.src-filter-hint { font: 400 12px var(--sans); color: var(--td3); margin: 0 2px 12px; }
.src-list { display: flex; flex-direction: column; }

/* ---- Source row: flat list, hairline dividers, collapse/expand ---- */
.src-card { border-bottom: 1px solid var(--doc-border); }
.src-card:last-child { border-bottom: none; }

/* Collapsed summary — the whole row toggles the working panel */
.src-summary {
    display: grid;
    grid-template-columns: 20px 1fr auto 14px;
    gap: 0 12px;
    align-items: center;
    padding: 12px 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--dur);
}
.src-summary:hover { background: var(--doc-hover); }
.src-number { font: 600 13px var(--serif); color: var(--doc-ochre); font-variant-numeric: tabular-nums; }
.src-ident { min-width: 0; }
.src-title-txt { font: 500 15px/1.35 var(--serif); color: var(--td1); }
.src-byline {
    font: 400 12.5px/1.45 var(--sans);
    color: var(--td3);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.src-count { font: 500 11.5px var(--sans); color: var(--td3); white-space: nowrap; }
.src-chev { color: var(--td3); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur); }
.src-card.src-open .src-chev { transform: rotate(90deg); }

/* Working panel (claims + detail bar + edit form) */
/* Collapse/expand via grid-template-rows 1fr↔0fr — animates to the TRUE
   content height (unlike a max-height cap, which coasts over empty space and
   reads as a jerk). The inner wrapper is the clipper. */
.src-expand-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--dur-smooth) var(--ease);
}
.src-expand-panel.collapsed { grid-template-rows: 0fr; }
.src-expand-inner { overflow: hidden; min-height: 0; }

.src-detail-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    padding: 2px 4px 12px 32px;
}
.src-bar-journal { font: italic 12.5px var(--serif); color: var(--td3); }
.src-bar-lnk { color: var(--doc-accent); font: 400 12px var(--sans); text-decoration: none; }
.src-bar-lnk:hover { text-decoration: underline; }
.src-bar-spacer { flex: 1; }
.src-bar-btn {
    background: none; border: none;
    font: 500 12px var(--sans); color: var(--td3);
    cursor: pointer; padding: 3px 7px; border-radius: var(--radius-sm);
    transition: background var(--dur), color var(--dur);
}
.src-bar-btn:hover { background: var(--doc-hover); color: var(--td2); }
.src-bar-btn.active { color: var(--doc-ochre); }
.src-bar-btn--danger:hover { color: var(--red); }

.src-noclaims { font: italic 13px/1.5 var(--serif); color: var(--td3); padding: 0 4px 12px 32px; }

/* ---- Claims (working rows) ---- */
.src-claims { padding: 0 4px 8px 32px; }
.src-claim { display: flex; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--doc-border); }
.src-claim:first-child { border-top: none; }
.src-claim-link {
    flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--td3); border-radius: var(--radius-sm);
    transition: background var(--dur), color var(--dur);
}
.src-claim-link:hover { background: var(--doc-hover); color: var(--doc-ochre); }
.src-claim-body { flex: 1; min-width: 0; }
.src-claim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.src-claim-sec { font: var(--font-eyebrow-sm); color: var(--doc-ochre); text-transform: uppercase; letter-spacing: 0.06em; }
.src-claim-text {
    display: block;
    font: 400 13.5px/1.5 var(--serif);
    color: var(--td1);
    margin-top: 3px;
    cursor: text; border-radius: var(--radius-2xs);
    transition: background var(--dur);
}
.src-claim-text:hover { background: rgba(0,0,0,0.03); }
.src-claim-text.editing { outline: none; background: rgba(0,0,0,0.05); caret-color: var(--doc-accent); }
.src-claim-quote {
    font: italic 12.5px/1.55 var(--serif);
    color: var(--td3);
    margin-top: 5px;
    padding-left: 11px;
    border-left: 2px solid var(--doc-ochre-dim);
}
.src-claim-origin { margin-top: 5px; font: 400 12px var(--sans); color: var(--td3); }
.src-claim-delete {
    flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--td3); opacity: 0; border-radius: var(--radius-sm);
    transition: opacity var(--dur), background var(--dur), color var(--dur);
}
.src-claim:hover .src-claim-delete { opacity: 0.55; }
.src-claim-delete:hover { opacity: 1; color: var(--red); background: var(--doc-hover); }

/* ---- Edit / Add details form ---- */
/* Same grid-row collapse as the panel. The clipper (.src-edit-inner) carries
   NO border/padding so nothing leaks at 0fr; the divider + top spacing live on
   .src-edit-grid INSIDE the clipper, where they're clipped when collapsed. */
.src-edit {
    display: grid;
    grid-template-rows: 1fr;
    margin: 0 4px 0 32px;
    transition: grid-template-rows var(--dur-smooth) var(--ease);
}
.src-edit.collapsed { grid-template-rows: 0fr; }
.src-edit-inner { overflow: hidden; min-height: 0; }
.src-edit-grid {
    display: grid; grid-template-columns: 68px 1fr; gap: 8px 12px; align-items: center;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--doc-border);
}
.src-edit-label { font: 500 10px var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--td3); text-align: right; }
.src-edit .src-edit-input {
    width: 100%;
    border: 1px solid var(--doc-border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    background: var(--doc-bg);
    font: 400 13px var(--sans); color: var(--td1);
    outline: none; resize: none;
    transition: border-color var(--dur);
}
.src-edit .src-edit-input:focus { border-color: var(--doc-ochre); }
.src-edit .src-edit-input::placeholder { color: var(--td3); opacity: 0.7; font-style: normal; text-decoration: none; }
.src-edit-actions { display: flex; justify-content: flex-end; margin-top: 12px; padding-bottom: 6px; }

/* Search match highlight — same brick as the document's claim highlight */
.src-hl { background: rgba(139,58,42,0.25); border-radius: var(--radius-2xs); color: inherit; }

/* Enter animation for a freshly added source */
@keyframes src-card-enter {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}
.src-card--new { animation: src-card-enter 260ms var(--ease); }

/* ---- Citation source picker in modal ---- */
.cite-claim-preview {
    font-size: var(--fs-sm);
    color: var(--t2);
    background: var(--chrome-bg);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    line-height: 1.5;
    max-height: 80px;
    overflow-y: auto;
}
.cite-source-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius);
}
.cite-source-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--fs-base);
    color: var(--t1);
    border-bottom: 1px solid var(--chrome-border);
    transition: background var(--dur);
}
.cite-source-option:last-child { border-bottom: none; }
.cite-source-option:hover { background: var(--chrome-bg2); }
.cite-source-option.selected { background: var(--accent-dim); border-left: 2px solid var(--accent); }
.cite-source-desc { font-size: var(--fs-xs); color: var(--t2); margin-top: 2px; }

/* ---- Cite selection popup ---- */
.cite-selection-popup {
    position: absolute;
    z-index: var(--z-tooltip);
    font: var(--font-eyebrow-sm);
    color: var(--chrome-bg);
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    padding: 4px 12px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--dur);
}
.cite-selection-popup:hover { background: var(--accent-hover); }

.open-link-btn:hover { color: var(--doc-ochre); }