/* ============================================
   LITHOGRAPHIC LINE SYSTEM
   Extracted from D.D. Badger Architectural Iron Works, 1865
   Real imperfections from 160-year-old ink on paper.
   No two lines are the same.
   ============================================ */

/* === SVG RENDERING — crisp at all sizes === */
.litho-line svg,
.litho-rule svg,
.litho-frame svg {
    shape-rendering: geometricPrecision;
}

/* === LITHO RULE — horizontal divider === */
.litho-rule {
    position: relative;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.litho-rule svg {
    display: block;
    width: 100%;
    fill: currentColor;
}

.litho-rule--hairline svg { height: 1px; }
.litho-rule--light svg    { height: 2px; }
.litho-rule--medium svg   { height: 3px; }
.litho-rule--heavy svg    { height: 4px; }
.litho-rule--ornamental svg { height: 12px; }

/* Edge fade — litho lines dissolve at their ends */
.litho-rule--fade {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Color variants using existing MagnaHistoria palette */
.litho-rule--gold    { color: var(--aged-gold); }
.litho-rule--muted   { color: var(--text-muted); }
.litho-rule--border  { color: rgba(255, 255, 255, 0.06); }
.litho-rule--green   { color: var(--aurora-green); }
.litho-rule--violet  { color: var(--cosmic-violet); }

/* Opacity control */
.litho-rule--subtle  { opacity: 0.15; }
.litho-rule--soft    { opacity: 0.3; }
.litho-rule--medium-opacity { opacity: 0.5; }
.litho-rule--strong  { opacity: 0.7; }

/* === LITHO FRAME — 4-sided border using real litho paths === */
.litho-frame {
    position: relative;
}

.litho-frame__edge {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 400ms ease, color 400ms ease;
}

.litho-frame__edge svg {
    display: block;
    fill: currentColor;
    shape-rendering: geometricPrecision;
}

/* Horizontal edges (top & bottom) */
.litho-frame__edge--top,
.litho-frame__edge--bottom {
    left: 0;
    right: 0;
    color: var(--panel-border);
}

.litho-frame__edge--top    { top: 0; }
.litho-frame__edge--bottom { bottom: 0; transform: scaleY(-1); }

.litho-frame__edge--top svg,
.litho-frame__edge--bottom svg {
    width: 100%;
    height: 2px;
}

/* Vertical edges (left & right) — thin CSS lines for crispness at small sizes */
.litho-frame__edge--left,
.litho-frame__edge--right {
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--panel-border);
}

.litho-frame__edge--left  { left: 0; }
.litho-frame__edge--right { right: 0; }

/* Frame variants */
.litho-frame--standard .litho-frame__edge { opacity: 0.3; }
.litho-frame--featured .litho-frame__edge { opacity: 0.5; }
.litho-frame--featured .litho-frame__edge--top svg,
.litho-frame--featured .litho-frame__edge--bottom svg { height: 3px; }
.litho-frame--subtle .litho-frame__edge   { opacity: 0.15; }
.litho-frame--panel .litho-frame__edge    { opacity: 0.25; }

/* Hover — iron warms to accent */
.litho-frame--hover:hover .litho-frame__edge {
    opacity: 0.6;
    color: var(--aged-gold);
}

.litho-frame--hover:hover .litho-frame__edge--left,
.litho-frame--hover:hover .litho-frame__edge--right {
    background: rgba(212, 175, 55, 0.4);
}

/* Active state — glow */
.litho-frame--active .litho-frame__edge {
    opacity: 0.8;
    color: var(--aged-gold);
}

.litho-frame--active .litho-frame__edge--left,
.litho-frame--active .litho-frame__edge--right {
    background: rgba(212, 175, 55, 0.6);
}

.litho-frame--active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(212, 175, 55, 0.05);
    pointer-events: none;
}

/* === LITHO BUTTON — button with litho-line borders === */
.litho-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 300ms ease;
}

.litho-btn:hover {
    color: var(--aged-gold);
}

.litho-btn .litho-frame__edge {
    transition: opacity 300ms ease, color 300ms ease;
}

.litho-btn:hover .litho-frame__edge {
    opacity: 0.6;
    color: var(--aged-gold);
}

.litho-btn:hover .litho-frame__edge--left,
.litho-btn:hover .litho-frame__edge--right {
    background: rgba(212, 175, 55, 0.4);
}

.litho-btn.active {
    color: var(--aged-gold);
}

.litho-btn.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(212, 175, 55, 0.1);
    pointer-events: none;
}

/* === LITHO-ENHANCED EXISTING COMPONENTS === */

/* Panels — replace solid top border with litho line */
.panel.litho-panel {
    border: none;
    position: relative;
}

.panel.litho-panel::before {
    /* Override the default gradient top line */
    display: none;
}

/* Cards — litho border on hover */
.card.litho-card {
    border: none;
    position: relative;
}

.card.litho-card:hover .litho-frame__edge {
    opacity: 0.7;
    color: var(--aged-gold);
}

.card.litho-card:hover .litho-frame__edge--left,
.card.litho-card:hover .litho-frame__edge--right {
    background: rgba(212, 175, 55, 0.4);
}

/* Data rows — replace solid bottom border with litho hairline */
.data-row.litho-data-row {
    border-bottom: none;
    position: relative;
    padding-bottom: calc(var(--space-3) + 2px);
}

.data-row.litho-data-row .litho-rule {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Nav buttons — litho underline on active */
.magna-theme .nav-btn.litho-nav::after {
    display: none; /* remove the solid active underline */
}

.magna-theme .nav-btn.litho-nav .litho-frame__edge--bottom {
    opacity: 0;
    transition: opacity 300ms ease;
}

.magna-theme .nav-btn.litho-nav.active .litho-frame__edge--bottom {
    opacity: 0.8;
    color: var(--aged-gold);
}

/* Section titles — litho rule beneath */
.litho-section-title {
    position: relative;
    padding-bottom: var(--space-4);
}

.litho-section-title .litho-rule {
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
}

@media (max-width: 768px) {
    .litho-section-title .litho-rule {
        left: 0;
        right: 0;
    }
}

/* === RANGE SLIDERS — styled with accent colors === */
.litho-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

.litho-range::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--panel-border);
}

.litho-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: var(--aged-gold);
    margin-top: -6px;
    box-shadow: 0 0 8px var(--glow-gold);
}

.litho-range::-moz-range-track {
    height: 2px;
    background: var(--panel-border);
}

.litho-range::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: var(--aged-gold);
    border: none;
    box-shadow: 0 0 8px var(--glow-gold);
}

/* === GLOBAL LITHO TWEAKS === */

/* Hidden scrollbars (opt-in with class) */
.litho-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.litho-no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Litho hover warm transition */
.litho-hover-warm {
    transition: color 400ms ease, fill 400ms ease, opacity 400ms ease;
}

/* Line clamp utility */
.litho-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === LITHO TOOLTIP — imperfect framed tooltip === */
.litho-tooltip {
    position: absolute;
    background: var(--panel-bg);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--parchment);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-overlay);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: all 150ms ease-out;
    border: none; /* litho-frame handles borders */
}

.litho-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}