* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
}

a { color: var(--text-link); }

.app-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 52px;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.app-brand {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}
.app-brand:hover, .app-brand:focus { color: var(--text-link); }
.app-brand-separator { color: var(--text-secondary); opacity: .7; }
.app-name { color: var(--text-strong); }
.app-header .hub-theme-toggle { margin-left: auto; }
.page-shell { width: min(1480px, calc(100% - 2rem)); margin: 1.5rem auto 5rem; }

.title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.eyebrow, .report-kicker {
    margin: 0 0 .25rem;
    color: var(--accent-teal);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

h1 { margin: 0; font: 700 2rem Georgia, serif; }
.subtitle { margin: .35rem 0 0; color: var(--text-secondary); }
.report-actions { display: flex; gap: .65rem; }

.control-card, .report-sheet {
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-pop);
}

.control-card { margin-bottom: 1rem; }
.control-card h2 { margin: 0 0 1rem; font-size: 1rem; text-transform: uppercase; }
.control-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field > span, .lookup-field label, .mode-field legend { font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.field small { color: var(--text-secondary); line-height: 1.35; }

input, select, button { font: inherit; }
input, select {
    width: 100%;
    min-height: 40px;
    padding: .55rem .65rem;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
}

input::placeholder { color: var(--text-secondary); }
input:focus, select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--info-bg);
}
.mode-field { margin: 0; padding: .45rem .7rem .55rem; border: 1px solid var(--border); }
.mode-field label { display: inline-flex; align-items: center; gap: .35rem; margin-right: .65rem; font-size: .9rem; }
.mode-field input { width: auto; min-height: 0; accent-color: var(--accent-blue); }

.lookup-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) auto;
    align-items: end;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.lookup-field { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.lookup-span { grid-column: span 2; }
.suggestions {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-top: 0;
    background: var(--surface-modal);
    box-shadow: var(--shadow-pop);
}
.suggestions:empty { display: none; }
.suggestion {
    display: block;
    width: 100%;
    padding: .55rem .65rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    text-align: left;
    background: var(--surface-modal);
    cursor: pointer;
}
.suggestion:hover, .suggestion:focus { background: var(--bg-hover); }

.button {
    min-height: 40px;
    padding: .58rem 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
}
.button-primary { color: #fff; border-color: var(--accent-blue); background: var(--accent-blue); }
.button-secondary { color: var(--text-primary); border-color: var(--border); background: var(--bg-input); }
.button:hover:not(:disabled) { filter: brightness(1.12); }
.button-secondary:hover:not(:disabled) { background: var(--bg-hover); }
.button:disabled { opacity: .5; cursor: not-allowed; }

.print-heading { text-align: center; margin-bottom: 1rem; }
.print-heading h2 { margin: 0; font: 700 1.55rem Georgia, serif; }
#print-meta { min-height: 1.1rem; margin: .3rem 0 0; color: var(--text-secondary); }
.status {
    margin-bottom: .8rem;
    padding: .65rem .8rem;
    color: var(--info-fg);
    border-left: 4px solid var(--info-fg);
    background: var(--info-bg);
}
.status.is-error {
    color: var(--danger-fg);
    border-left-color: var(--danger-fg);
    background: var(--danger-bg);
}

.pedigree-scroll { overflow-x: auto; }
.pedigree-table { width: 100%; min-width: 920px; table-layout: fixed; border-collapse: collapse; }
.pedigree-table th {
    padding: .55rem;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    background: var(--sec-top);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pedigree-table tr { height: 38px; }
.pedigree-cell { padding: .35rem .55rem; border: 1px solid var(--border); vertical-align: middle; }
.pedigree-cell.sire { background: var(--surface-raised); }
.pedigree-cell.dam { background: var(--surface-sunken); }
.pedigree-cell.unresolved { box-shadow: inset 4px 0 var(--warn-fg); }
.horse-name { display: block; font-weight: 700; line-height: 1.2; }
.horse-detail { display: block; margin-top: .15rem; color: var(--text-secondary); font-size: .75rem; }

.issues-panel {
    margin-top: 1rem;
    padding: .8rem 1rem;
    color: var(--warn-fg);
    border: 1px solid var(--warn-border);
    border-left: 4px solid var(--warn-fg);
    background: var(--warn-bg);
}
.issues-panel h3 { margin: 0 0 .5rem; font-size: .9rem; }
.issues-panel ul { margin: 0; padding-left: 1.25rem; }
.issues-panel li + li { margin-top: .25rem; }
.service-footer {
    position: fixed;
    right: 14px;
    bottom: 12px;
    display: flex;
    gap: .55rem;
    padding: .35rem .55rem;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-pop);
    font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (max-width: 980px) {
    .control-grid { grid-template-columns: 1fr 1fr; }
    .field-wide { grid-column: span 2; }
    .lookup-grid { grid-template-columns: 1fr 1fr; }
    .fill-button { grid-column: span 2; }
}

@media (max-width: 620px) {
    .page-shell { width: min(100% - 1rem, 1480px); margin-top: .75rem; }
    .title-row { align-items: stretch; flex-direction: column; }
    .report-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .control-grid, .lookup-grid { grid-template-columns: 1fr; }
    .field-wide, .lookup-span, .fill-button { grid-column: auto; }
}

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body { color: #000; background: #fff; font-size: 9pt; }
    .no-print { display: none !important; }
    .page-shell { width: 100%; margin: 0; }
    .report-sheet { padding: 0; border: 0; background: #fff; box-shadow: none; }
    .pedigree-scroll { overflow: visible; }
    .pedigree-table { min-width: 0; }
    .pedigree-table tr { height: 8mm; }
    .pedigree-table th { color: black; border-color: #555; background: #ddd !important; }
    .pedigree-cell.sire { background: #e5e5e5 !important; print-color-adjust: exact; }
    .pedigree-cell.dam { background: #faf8f3 !important; print-color-adjust: exact; }
    .issues-panel { break-inside: avoid; }
}