/* ============================================================
   CALCULATOR ONLY — precision instrument
   Graphite surfaces, phosphor signal, condensed grotesk +
   machine-readable mono. Overrides theme.css tokens inside
   .ap-app so marketing pages stay on the brass/felt look.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400;62..125,500;62..125,600;62..125,700&family=Martian+Mono:wght@500;600;700&display=swap');

.ap-app {
    --ap-bg: #0b0d0e;
    --ap-bg-2: #121416;
    --ap-bg-3: #191c1f;
    --ap-felt: #101214;
    --ap-line: rgba(255, 255, 255, 0.08);
    --ap-line-soft: rgba(255, 255, 255, 0.05);
    --ap-brass: #8d9398;
    --ap-brass-2: #c4c9cc;
    --ap-brass-deep: #5c6166;
    --ap-green: #39ff87;
    --ap-green-2: #6bffa6;
    --ap-red: #ff4d4d;
    --ap-text: #e8e6e1;
    --ap-muted: #8b9196;
    --ap-font-display: 'Archivo', system-ui, sans-serif;
    --ap-font-body: 'Archivo', system-ui, sans-serif;
    --ap-font-mono: 'Martian Mono', ui-monospace, monospace;

    --bg-primary: var(--ap-bg);
    --bg-secondary: var(--ap-bg-2);
    --bg-tertiary: var(--ap-bg-3);
    --text-primary: var(--ap-text);
    --text-secondary: var(--ap-muted);
    --text-light: #d6d3cc;
    --accent-green: var(--ap-green);
    --accent-red: var(--ap-red);
    --accent-blue: #7d8790;
    --accent-yellow: #c8c2b0;
    --accent-brass: var(--ap-brass);
    --border-color: var(--ap-line);
    --border-dark: #050607;
    --border-light: var(--ap-line-soft);

    --card-btn-size: 64px;
    --card-btn-font: 1.35rem;
    --card-btn-gap: 0.45rem;
    --card-btn-bg: #16191c;
    --card-btn-border: rgba(255, 255, 255, 0.08);
    --card-btn-low-bg: #1a3a28;
    --card-btn-neutral-bg: #1c2024;
    --card-btn-high-bg: #3a1a1a;

    --table-font: 0.8rem;
    --table-header-font: 0.72rem;
    --table-padding: 0.38rem 0.1rem;
    --table-first-col-width: 20%;
    --table-border: 1px solid rgba(255, 255, 255, 0.08);

    background-color: var(--ap-bg);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 28%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.012) 3px,
            rgba(255, 255, 255, 0.012) 4px
        );
    color: var(--ap-text);
    font-family: var(--ap-font-body);
    font-variation-settings: 'wdth' 100;
}

.ap-app h1,
.ap-app h2,
.ap-app h3,
.ap-app .font-display {
    font-family: var(--ap-font-display);
    font-variation-settings: 'wdth' 92;
    letter-spacing: -0.02em;
    text-transform: none;
}

/* Uppercase panel labels need open tracking. The heading rule above
   would otherwise tighten them, which makes the caps look cramped. */
.ap-app h2.calc-panel__title,
.ap-app h3.calc-panel__sub {
    letter-spacing: -0.015em;
    text-transform: none;
}

.ap-app h3.strategy-grid__label {
    font-family: var(--ap-font-mono);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ap-app .nums {
    font-family: var(--ap-font-mono);
    letter-spacing: 0;
    font-feature-settings: "ss01" 0;
}

.ap-app .strategy-table {
    font-family: var(--ap-font-mono);
    letter-spacing: 0;
    font-feature-settings: "ss01" 0;
}

.ap-app .ap-panel,
.ap-app .calc-panel {
    background: var(--ap-bg-2);
    border: 1px solid var(--ap-line);
    box-shadow: none;
    border-radius: 2px;
}

.ap-app .ap-panel-inset,
.ap-app .t-inset {
    background: var(--ap-bg-3);
    border: 1px solid var(--ap-line-soft);
}

.ap-app .ap-btn-primary,
.ap-app .t-btn-primary {
    background: var(--ap-text);
    color: #0b0d0e;
    border: 1px solid #0b0d0e;
    box-shadow: none;
}

.ap-app .ap-btn-primary:hover,
.ap-app .t-btn-primary:hover {
    filter: brightness(1.06);
    transform: none;
    box-shadow: none;
}

.ap-app .ap-chip {
    background: rgba(57, 255, 135, 0.08);
    color: var(--ap-green);
    border-color: rgba(57, 255, 135, 0.28);
    border-radius: 2px;
    letter-spacing: 0.12em;
}

.ap-app .text-brass { color: var(--ap-text); }
.ap-app .border-brass { border-color: var(--ap-green) !important; }

/* ---- Buttons / inputs ---- */
.t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 2px;
    font-family: var(--ap-font-display);
    font-variation-settings: 'wdth' 95;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.t-btn-ghost {
    background: transparent;
    color: var(--ap-text);
    border: 1px solid var(--ap-line);
}

.t-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
}

.t-btn-danger-ghost {
    color: #f2b4b4;
}

.t-btn-google {
    background: #fff;
    color: #1f2328;
    border: 1px solid #fff;
}

.t-btn-google:hover { filter: brightness(0.96); }

.t-input {
    background: #0e1012;
    border: 1px solid var(--ap-line);
    color: var(--ap-text);
    border-radius: 2px;
    padding: 0.5rem 0.7rem;
    min-height: 2.5rem;
    font-family: var(--ap-font-mono);
    font-size: 0.82rem;
}

.t-input:focus {
    outline: 1px solid var(--ap-green);
    outline-offset: 1px;
}

.t-banner {
    border: 1px solid var(--ap-line);
    background: var(--ap-bg-2);
    padding: 0.9rem 1rem;
    border-radius: 2px;
}

.t-banner-info { border-left: 3px solid #8b9196; }
.t-banner-ok { border-left: 3px solid var(--ap-green); }
.t-banner-muted { color: var(--ap-muted); }

.calc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.calc-header__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
}

.calc-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.notice-stack {
    position: fixed;
    top: 4.6rem;
    right: 0.75rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: min(22rem, calc(100vw - 1.5rem));
    pointer-events: none;
}

.notice-card {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    background: rgba(18, 20, 22, 0.94);
    border: 1px solid var(--ap-line);
    backdrop-filter: blur(10px);
}

.notice-card.hidden,
.ap-app .hidden {
    display: none !important;
}

.notice-card--ok { border-left: 3px solid var(--ap-green); }
.notice-card--offer { border-left: 3px solid var(--ap-green); }

.notice-card__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 0.15rem;
}

.notice-card__body {
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--ap-muted);
    margin: 0;
}

.notice-card__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.notice-card__close {
    width: 1.4rem;
    height: 1.4rem;
    border: 0;
    background: transparent;
    color: var(--ap-muted);
    cursor: pointer;
    position: relative;
}

.notice-card__close::before,
.notice-card__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    height: 1px;
    background: currentColor;
}

.notice-card__close::before { transform: rotate(45deg); }
.notice-card__close::after { transform: rotate(-45deg); }

/* ---- Sticky live readout ---- */
.live-readout {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
    padding: 0.55rem 0.85rem;
    background: rgba(11, 13, 14, 0.92);
    border: 1px solid var(--ap-line);
    backdrop-filter: blur(10px);
}

.live-readout[data-raise="true"] {
    border-color: rgba(57, 255, 135, 0.45);
    box-shadow: inset 3px 0 0 var(--ap-green);
}

.live-readout__primary,
.live-readout__secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.live-metric__label,
.live-chip__label {
    display: block;
    font-family: var(--ap-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ap-muted);
}

.live-metric__value {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    margin-top: 0.15rem;
}

.live-metric__value.positive { color: var(--ap-green); }
.live-metric__value.negative { color: #ff7a7a; }

.live-raise {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--ap-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ap-green);
}

.live-raise[hidden] { display: none !important; }

.live-raise__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--ap-green);
    box-shadow: 0 0 10px var(--ap-green);
}

.live-chip {
    min-width: 5.5rem;
}

.live-chip__value {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
}

/* ---- Instrument grid: stacked / side ---- */
.calc-grid {
    display: grid;
    gap: 0.85rem;
}

.calc-instrument[data-layout="stacked"] .calc-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
        "setup"
        "cards"
        "tables"
        "stats";
}

@media (min-width: 1100px) {
    .calc-instrument[data-layout="stacked"] .calc-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "setup setup"
            "cards cards"
            "tables tables"
            "stats stats";
    }

}

.calc-instrument[data-layout="side"] .calc-grid {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
    grid-template-areas:
        "setup tables"
        "cards tables"
        "stats tables";
}

/* Three strategy tables need a wide right column. Below this width the
   side-by-side choice collapses so hand labels and stat values still fit. */
@media (max-width: 1279px) {
    .calc-instrument[data-layout="side"] .calc-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "setup"
            "cards"
            "tables"
            "stats";
    }
}

.calc-panel--setup { grid-area: setup; }
.calc-panel--cards { grid-area: cards; }
.calc-panel--tables { grid-area: tables; }
.calc-panel--stats { grid-area: stats; }

.calc-panel {
    padding: 1rem 1.1rem;
}

.calc-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.calc-panel__title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    margin: 0;
}

.calc-panel__hint,
.calc-panel__sub {
    font-size: 0.8rem;
    color: var(--ap-muted);
    letter-spacing: 0.01em;
    line-height: 1.35;
}

.calc-panel--cards .calc-panel__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.calc-panel__sub {
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.shoe-setup-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.65rem;
}

.shoe-setup-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ap-muted);
    min-width: 8rem;
}

.layout-toggle {
    display: inline-flex;
    border: 1px solid var(--ap-line);
}

.layout-toggle__btn {
    background: transparent;
    color: var(--ap-muted);
    border: 0;
    padding: 0.35rem 0.7rem;
    font-family: var(--ap-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.layout-toggle__btn.is-active {
    background: var(--ap-text);
    color: #0b0d0e;
}

@media (max-width: 1279px) {
    .layout-toggle { display: none; }
}

/* ---- Card keys ---- */
.card-pad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--card-btn-gap);
    margin-bottom: 0.7rem;
}

@media (min-width: 700px) {
    .calc-instrument[data-layout="stacked"] .card-pad {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .calc-instrument[data-layout="stacked"] .card-pad {
        grid-template-columns: repeat(13, minmax(0, 1fr));
    }
}

.ap-app .card-btn {
    position: relative;
    container-type: inline-size;
    background: var(--card-btn-bg);
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--ap-font-mono);
    font-weight: 700;
    color: #f4f1ea;
    min-height: var(--card-btn-size);
    max-height: 104px;
    aspect-ratio: 1.2 / 1;
    font-size: clamp(1.15rem, 42cqi, 1.75rem);
    overflow: hidden;
}

.ap-app .card-btn::after {
    content: attr(data-key);
    position: absolute;
    right: 0.3rem;
    bottom: 0.22rem;
    font-size: clamp(0.62rem, 18cqi, 0.75rem);
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 500;
}

.ap-app .card-btn-low {
    background: #1f7a44;
    border-color: #166534;
}
.ap-app .card-btn-neutral {
    background: #3a4248;
    border-color: #4b5560;
}
.ap-app .card-btn-high {
    background: #b3392f;
    border-color: #8f2c24;
}

.ap-app .card-btn-low:hover { background: #259352; }
.ap-app .card-btn-neutral:hover { background: #4b5560; }
.ap-app .card-btn-high:hover { background: #c94439; }

.ap-app .card-btn:active {
    transform: translateY(1px);
}

.card-pad__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.legend-dot--low { background: #2f8a55; }
.legend-dot--neutral { background: #6b7278; }
.legend-dot--high { background: var(--ap-red); }

.recent-strip__track {
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem;
    background: #0e1012;
    border: 1px solid var(--ap-line);
}

.ap-app .recent-card {
    background: #2a2f34;
    border-radius: 2px;
}

.ap-app .recent-card.low-card { background: #1a3a28; }
.ap-app .recent-card.high-card { background: #3a1a1a; }

.strategy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

@media (min-width: 900px) {
    .strategy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.strategy-grid__label {
    font-family: var(--ap-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ap-muted);
    padding: 0.35rem 0.15rem 0.4rem;
    border-bottom: 1px solid var(--ap-line);
    margin-bottom: 0.4rem;
}

.ap-app .strategy-table th:first-child,
.ap-app .strategy-table td:first-child {
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.ap-app .stat-card {
    background: #0e1012;
    border: 1px solid var(--ap-line);
    border-radius: 2px;
    min-width: 0;
    container-type: inline-size;
}

.ap-app .stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.ap-app .stat-value {
    font-size: clamp(1.15rem, 24cqi, 1.5rem);
    line-height: 1.15;
}

/* Side-by-side puts statistics in a narrow column. Four stat cards
   there clip values like "+1.01%"; two columns keep them intact. */
@media (min-width: 1280px) {
    .calc-instrument[data-layout="side"] .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ap-app .stat-value.positive { color: var(--ap-green); }
.ap-app .stat-value.negative { color: #ff7a7a; }

.ap-app .card-dist-bar { gap: 0.22rem; }
.ap-app .card-dist-label,
.ap-app .card-dist-count { font-family: var(--ap-font-mono); }
.ap-app .card-dist-label {
    font-size: 0.8rem;
    color: var(--ap-muted);
}
.ap-app .card-dist-count { font-size: 0.95rem; }

.live-readout.is-pulse .live-metric__value {
    animation: t-count-pulse 0.28s ease;
}

@keyframes t-count-pulse {
    0% { filter: brightness(1.4); }
    100% { filter: brightness(1); }
}

.t-reveal {
    opacity: 0;
    animation: t-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.t-reveal-1 { animation-delay: 0.04s; }
.t-reveal-2 { animation-delay: 0.1s; }
.t-reveal-3 { animation-delay: 0.16s; }
.t-reveal-4 { animation-delay: 0.22s; }
.t-reveal-5 { animation-delay: 0.28s; }

@keyframes t-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .t-reveal { animation: none; opacity: 1; }
    .live-readout.is-pulse .live-metric__value { animation: none; }
}

@media (max-width: 640px) {
    .calc-header__title { font-size: 1.2rem; }
    .live-metric__value { font-size: 1.55rem; }
    .live-chip__value { font-size: 1.15rem; }
    .ap-app .card-btn { min-height: 58px; max-height: 84px; }
    .notice-stack { top: 4.25rem; }
}