/*
 * IV site-specific layer.
 * Brand tokens (--gleif-*, --color-*, --font-*) come from tokens.css, which
 * loads before this file. No hardcoded hexes here — reference tokens or use
 * color-mix for tints. FLAG: marks values the brand deck does not cover.
 */

:root {
    /* FLAG: component spec — brand deck does not define a radius scale */
    --radius: 4px;
    --radius-lg: 8px;

    /* FLAG: brand deck has no mono stack */
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

    /* FLAG: surface layering — brand deck gives --color-bg/surface only;
       we derive deeper surfaces from cyprus mixed with white */
    --color-surface-2: color-mix(in srgb, var(--gleif-cyprus) 6%, var(--color-bg));
    --color-surface-3: color-mix(in srgb, var(--gleif-cyprus) 12%, var(--color-bg));
    --color-border: color-mix(in srgb, var(--gleif-cyprus) 18%, var(--color-bg));
    --color-hover: color-mix(in srgb, var(--gleif-jade) 10%, var(--color-bg));

    /* State colors — map to brand where possible, FLAG where not */
    --color-success: var(--gleif-jade);   /* FLAG: no success token; jade reads affirmative */
    --color-warning: var(--gleif-honey);
    --color-error: var(--gleif-lava);
    --color-info: var(--gleif-azure);

    /* FLAG: no shadow scale in brand; use cyprus-tinted translucency */
    --shadow-sm: 0 2px 8px color-mix(in srgb, var(--gleif-cyprus) 12%, transparent);
    --shadow-md: 0 4px 16px color-mix(in srgb, var(--gleif-cyprus) 18%, transparent);
    --shadow-lg: 0 8px 24px color-mix(in srgb, var(--gleif-cyprus) 24%, transparent);

    /* Swimlane geometry — label column sized to fit a full qb64 AID in mono */
    --lane-label-w: 320px;
    --col-w: 150px;
    --band-h: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: var(--line-height-body);
}

/* Header / footer */
header {
    background: var(--color-surface);
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
header .logo { width: 40px; height: 40px; }
header h1 {
    font-size: var(--font-size-h3);
    color: var(--color-accent-deep);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    line-height: var(--line-height-heading);
}
header .subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-left: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--color-border);
}

main { flex: 1; padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }

footer {
    padding: 0.75rem 2rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.mono { font-family: var(--font-mono); }
.break { word-break: break-all; }
.muted { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Load form */
.oobi-input { position: relative; }
.load-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.load-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin-bottom: 0.3rem;
}
.input-wrapper { position: relative; flex: 1; min-width: 320px; }
.input-wrapper input {
    width: 100%;
    padding: 0.6rem 2rem 0.6rem 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
}
.input-wrapper input:focus {
    outline: none;
    border-color: var(--color-accent-mid);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gleif-turquoise) 25%, transparent);
}
.clear-btn {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}
.clear-btn:hover { color: var(--color-error); }

.primary-btn, .ghost-btn, .member-form button {
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius);
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    border: 1px solid transparent;
}
.primary-btn {
    background: var(--color-accent-deep);
    color: var(--color-text-inverse);
}
.primary-btn:hover { background: var(--color-accent-mid); }
.ghost-btn {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
    padding: 0.4rem 0.8rem;
}
.ghost-btn:hover { background: var(--color-hover); }

/* Messages */
.info-message, .error-message {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
}
.info-message {
    background: color-mix(in srgb, var(--gleif-azure) 12%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--gleif-azure) 35%, transparent);
    color: var(--color-text);
}
.error-message {
    background: color-mix(in srgb, var(--gleif-lava) 10%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--gleif-lava) 40%, transparent);
    color: var(--color-error);
}

/* Empty state */
.empty-state {
    padding: 3rem 2rem;
    text-align: center;
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}
.empty-title { font-size: var(--font-size-h4); color: var(--color-text); margin-bottom: 0.5rem; }
.empty-hint { color: var(--color-text-muted); font-size: var(--font-size-sm); max-width: 46ch; margin: 0 auto; }
.empty-sample { margin-top: 1rem; }

/* Timeline shell */
.timeline { display: flex; flex-direction: column; gap: 1rem; }
.timeline-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.meta-aid { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}
.meta-aid .mono { font-size: var(--font-size-sm); word-break: break-all; }
.meta-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.member-form { display: flex; gap: 0.3rem; align-items: flex-start; }
.member-form textarea {
    padding: 0.4rem 0.6rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 280px;
    resize: vertical;
    line-height: 1.4;
}
.member-form button {
    background: var(--color-accent-mid);
    color: var(--color-text-inverse);
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
}

/* Legend */
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.swatch.join { background: var(--color-success); }
.swatch.left { background: var(--color-error); }
.swatch.present { background: color-mix(in srgb, var(--gleif-turquoise) 55%, var(--color-bg)); }
.unresolved-note { font-style: italic; }

/* Swimlane grid */
.swimlane {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 0.5rem 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.lane {
    display: grid;
    grid-template-columns: var(--lane-label-w) repeat(var(--cols), minmax(var(--col-w), 1fr));
    align-items: center;
    min-width: max-content;
}
.lane-label {
    grid-column: 1;
    padding: 0 0.6rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    left: 0;
    background: var(--color-surface);
    z-index: 2;
}
.lane-label.unresolved { color: var(--color-text-muted); font-style: italic; }
/* Full qb64 AID shown in monospace — sized to fit the label column. */
.lane-label.mono { font-size: 0.62rem; letter-spacing: -0.01em; }
.lane-label.mono.unresolved { font-style: normal; }
.lane-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    padding: 0.5rem 0.6rem 0.15rem;
    position: sticky;
    left: 0;
}

/* Column headers */
.lane-head { border-bottom: 1px solid var(--color-border); padding-bottom: 0.3rem; margin-bottom: 0.2rem; }
.col-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin: 0 0.2rem;
    padding: 0.4rem 0.5rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.col-head:hover { border-color: var(--color-accent-mid); box-shadow: var(--shadow-sm); }
.col-sn { font-size: 0.72rem; color: var(--color-text-muted); }
.col-thr { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-accent-deep); }
.col-dt { font-size: 0.68rem; color: var(--color-text-muted); font-family: var(--font-mono); }

.col-badge {
    font-size: 0.66rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    color: var(--color-text-inverse);
    background: var(--gleif-smoke);
    white-space: nowrap;
}
.type-icp, .type-dip { background: var(--gleif-fern); }
.type-rot, .type-drt { background: var(--gleif-lavender); }

/* Per-column lane cells (presence band + signed marker) */
.cell {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* The presence band: a bar spanning the cell; adjacent present cells touch. */
.cell.present::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--band-h);
    background: color-mix(in srgb, var(--gleif-turquoise) 38%, var(--color-bg));
    border-top: 1px solid color-mix(in srgb, var(--gleif-jade) 40%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--gleif-jade) 40%, transparent);
    z-index: 0;
}
.cell.witness.present::before {
    background: color-mix(in srgb, var(--gleif-azure) 26%, var(--color-bg));
    border-color: color-mix(in srgb, var(--gleif-azure) 40%, transparent);
}
.cell.dashed.present::before {
    background: color-mix(in srgb, var(--gleif-smoke) 16%, var(--color-bg));
    border-style: dashed;
}
.cell.start::before {
    left: 7px;
    border-left: 3px solid var(--color-success);
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}
.cell.end::before {
    right: 7px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}
.cell.leave::before { border-right: 3px solid var(--color-error); }
/* Active / latent marker dot, centered on the band. */
.cell-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid color-mix(in srgb, var(--gleif-jade) 45%, var(--color-text-muted));
}
/* Active = current key in k (solid). Latent = committed in n only (hollow/dim). */
.cell.active .cell-dot { background: var(--gleif-jade); border-color: var(--gleif-fern); }
.cell.active.signed .cell-dot { background: var(--color-success); border-color: var(--color-success); }
.cell.latent .cell-dot {
    background: var(--color-bg);
    border-color: color-mix(in srgb, var(--gleif-smoke) 55%, var(--color-bg));
}
/* Rotated this event — an amber halo around the dot. */
.cell.rotated .cell-dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gleif-honey) 70%, transparent); }
.cell.witness .cell-dot { display: none; }

/* Legend dots */
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; vertical-align: middle; }
.dot.active { background: var(--gleif-jade); border: 2px solid var(--gleif-fern); }
.dot.latent { background: var(--color-bg); border: 2px solid color-mix(in srgb, var(--gleif-smoke) 55%, var(--color-bg)); }
.dot.rotated-key { background: var(--gleif-jade); border: 2px solid var(--gleif-fern); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gleif-honey) 70%, transparent); }

/* Column signed badge */
.col-signed {
    font-size: 0.66rem;
    font-weight: var(--font-weight-semibold);
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
}
.col-signed.met { background: color-mix(in srgb, var(--gleif-jade) 20%, var(--color-bg)); color: var(--gleif-fern); }
.col-signed.unmet { background: color-mix(in srgb, var(--gleif-lava) 14%, var(--color-bg)); color: var(--color-error); }
.col-signed.weighted { background: var(--color-surface-3); color: var(--color-text-muted); }

/* Drawer: signers / smids / rmids */
.sign-summary {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}
.sign-summary.met { background: color-mix(in srgb, var(--gleif-jade) 16%, var(--color-bg)); color: var(--gleif-fern); }
.sign-summary.unmet { background: color-mix(in srgb, var(--gleif-lava) 12%, var(--color-bg)); color: var(--color-error); }
.sign-summary.weighted { background: var(--color-surface-3); color: var(--color-text-muted); }
.sign-mark {
    flex-shrink: 0;
    width: 1.2em;
    font-weight: var(--font-weight-bold);
    text-align: center;
}
.sign-mark.signed { color: var(--color-success); }
.sign-mark.abstain { color: var(--color-text-muted); }

/* Changes row — one icon per event; click opens a popover */
.lane-changes { border-top: 1px solid var(--color-border); padding-top: 0.4rem; margin-top: 0.2rem; }
.changes-cell { display: flex; justify-content: center; align-items: center; }
.changes-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}
.changes-icon:hover { transform: scale(1.12); box-shadow: var(--shadow-sm); }
.changes-icon.has-change {
    border-color: var(--color-accent-mid);
    background: color-mix(in srgb, var(--gleif-turquoise) 22%, var(--color-bg));
    color: var(--color-accent-deep);
    font-weight: var(--font-weight-bold);
}
.changes-icon.quiet { opacity: 0.6; }
.changes-content { display: none; }

.changes-pop {
    position: fixed;
    z-index: 80;
    max-width: 320px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.6rem 0.7rem;
    display: none;
}
.changes-pop.open { display: block; }
.changes-pop::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.changes-pop.below::after { bottom: auto; top: -7px; border: none; border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border); }
.changes-title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.45rem;
}
.changes-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.changes-chips .chip { white-space: normal; }

.chip {
    font-size: 0.66rem;
    font-weight: var(--font-weight-semibold);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius);
    white-space: nowrap;
}
.chip.add { background: color-mix(in srgb, var(--gleif-jade) 18%, var(--color-bg)); color: var(--gleif-fern); }
.chip.remove { background: color-mix(in srgb, var(--gleif-lava) 14%, var(--color-bg)); color: var(--color-error); }
.chip.thr { background: color-mix(in srgb, var(--gleif-honey) 20%, var(--color-bg)); color: color-mix(in srgb, var(--gleif-honey) 75%, var(--gleif-cyprus)); }
.chip.add-w { background: color-mix(in srgb, var(--gleif-azure) 16%, var(--color-bg)); color: color-mix(in srgb, var(--gleif-azure) 80%, var(--gleif-cyprus)); }
.chip.remove-w { background: color-mix(in srgb, var(--gleif-shell) 28%, var(--color-bg)); color: var(--gleif-cyprus); }
.chip.neutral { background: var(--color-surface-3); color: var(--color-text-muted); }
.chip.signer { background: color-mix(in srgb, var(--gleif-jade) 20%, var(--color-bg)); color: var(--gleif-fern); }
.chip.latent { background: color-mix(in srgb, var(--gleif-honey) 18%, var(--color-bg)); color: color-mix(in srgb, var(--gleif-honey) 75%, var(--gleif-cyprus)); }
.chip.count { background: color-mix(in srgb, var(--gleif-azure) 14%, var(--color-bg)); color: color-mix(in srgb, var(--gleif-azure) 80%, var(--gleif-cyprus)); }
.chip.muted-chip { background: transparent; color: var(--color-text-muted); font-style: italic; font-weight: var(--font-weight-regular); }

/* Hover cross-highlight */
.swimlane.focusing .lane:not(.focused):not(.lane-head):not(.lane-delta) { opacity: 0.45; }
.swimlane .lane { transition: opacity 0.12s; }

/* Drawer */
.drawer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.drawer.open { pointer-events: auto; }
.drawer-scrim {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--gleif-cyprus) 35%, transparent);
    opacity: 0; transition: opacity 0.18s;
}
.drawer.open .drawer-scrim { opacity: 1; }
.drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(440px, 92vw);
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0;
    background: var(--color-surface);
}
.drawer-sn { margin-left: 0.5rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.drawer-close { border: none; background: transparent; font-size: 1.5rem; cursor: pointer; color: var(--color-text-muted); line-height: 1; }
.drawer-close:hover { color: var(--color-error); }
.drawer-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.drawer-section h3 { font-size: var(--font-size-sm); color: var(--color-accent-deep); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.75rem; font-size: var(--font-size-sm); }
.kv dt { color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.kv dd { color: var(--color-text); }
.kv .ok { color: var(--gleif-fern); font-weight: var(--font-weight-semibold); }
.kv .bad { color: var(--color-error); font-weight: var(--font-weight-semibold); }

.delta-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.key-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.key-list li {
    display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline;
    padding: 0.35rem 0.5rem;
    background: var(--color-surface-2);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
}
.key-list li.unresolved { color: var(--color-text-muted); border: 1px dashed var(--color-border); background: transparent; }
.key-label { font-weight: var(--font-weight-semibold); flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.72rem; word-break: break-all; }
.key-val { color: var(--color-text-muted); }
.code {
    background: var(--color-surface-3);
    border-radius: var(--radius);
    padding: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    overflow-x: auto;
    white-space: pre;
}

/* Loading scrim */
.loading-scrim {
    display: none;
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-bg) 75%, transparent);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 5;
}
.loading-scrim.htmx-request { display: flex; }
.loading-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent-mid);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.loading-text { font-size: var(--font-size-sm); color: var(--color-text-muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: var(--gleif-fern);
    color: var(--color-text-inverse);
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }