/* Custom Animations and Aesthetics */

/* Smooth fade in for route transitions */
.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Custom Scrollbar for better UI */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Base input overrides to look premium */
input[type="text"], input[type="password"], input[type="number"], select {
    transition: all 0.2s;
}

/* Premium Universal Traffic Light Input Styling */
.win-input-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease, box-shadow 0.2s ease;
}

.win-input-field:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
    outline: none !important;
    background: #ffffff !important;
}

.win-input-field.filled {
    border-color: #22c55e !important;
    background: #f0fdf4 !important;
}

.win-input-field.filled:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

.win-input-field.missing {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

.win-input-field.missing:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

/* Interactive Pill Animations */
.pill-filter {
    transition: all 0.2s ease;
}
.pill-filter:hover {
    transform: translateY(-1px);
}
.pill-filter:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WISE CONSUMER CALCULATOR — Design System
   Architecture: 03-ui-and-svg-rules.md
   Rules enforced:
   - Hardcoded dark background #1e293b (not system dark-mode)
   - Strict vertical stacking — NO side-by-side flex layouts
   - Traffic Light: Empty = Grey border | Focused = Orange ring | Valid = Green
   - All inputs 100% width, display:block
   - Output placement: Engine state panel sits at absolute bottom
═══════════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
    --calc-bg:           #1e293b;
    --calc-surface:      #243447;
    --calc-surface-2:    #2d3f55;
    --calc-border:       rgba(255,255,255,0.08);
    --calc-border-hover: rgba(255,255,255,0.16);
    --calc-text-primary:   #f1f5f9;
    --calc-text-secondary: #94a3b8;
    --calc-text-muted:     #64748b;
    --calc-grey:           #475569;
    --calc-orange:         #f97316;
    --calc-orange-glow:    rgba(249, 115, 22, 0.20);
    --calc-green:          #22c55e;
    --calc-green-glow:     rgba(34, 197, 94, 0.15);
    --calc-green-bg:       rgba(34, 197, 94, 0.06);
    --calc-accent:         #14b8a6;
    --calc-accent-dark:    #0d9488;
    --calc-accent-glow:    rgba(20, 184, 166, 0.20);
    --calc-radius:    12px;
    --calc-radius-sm: 8px;
    --calc-radius-xs: 6px;
    --calc-transition: 0.22s ease;
}

/* ── Page shell (hardcoded #1e293b — never inherits system dark-mode) ───────── */
.calc-page {
    background: var(--calc-bg);
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 48px 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--calc-text-primary);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ── Page Header ───────────────────────────────────────────────────────────── */
.calc-page-header {
    background: linear-gradient(135deg, #1a3a5c 0%, #1e293b 100%);
    border-bottom: 1px solid var(--calc-border);
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
.calc-header-icon {
    width: 44px;
    height: 44px;
    background: var(--calc-accent-glow);
    border: 1px solid rgba(20,184,166,0.3);
    border-radius: var(--calc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--calc-accent);
}
.calc-header-icon svg { width: 22px; height: 22px; }
.calc-page-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--calc-text-primary);
    margin: 0 0 2px 0;
    line-height: 1.2;
}
.calc-page-subtitle {
    font-size: 0.75rem;
    color: var(--calc-text-secondary);
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ── Progress Bar ──────────────────────────────────────────────────────────── */
.calc-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--calc-surface-2);
}
.calc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--calc-accent), #38bdf8);
    border-radius: 0 2px 2px 0;
    transition: width 0.4s ease;
}

/* ── Main card ─────────────────────────────────────────────────────────────── */
.calc-card {
    max-width: 520px;
    width: 100%;
    margin: 24px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Section: STRICT vertical stack, width 100% ────────────────────────────── */
.calc-section {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.calc-section-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--calc-text-secondary);
}
.calc-section-icon { font-size: 1rem; }
.calc-hint {
    font-size: 0.82rem;
    color: var(--calc-text-muted);
    line-height: 1.55;
    margin: 0;
}
.calc-hint strong { color: var(--calc-text-secondary); font-weight: 600; }
.calc-divider { width: 100%; height: 1px; background: var(--calc-border); }

/* ── Unit Toggle: 3-way row (only intentional row layout in the form) ──────── */
.calc-unit-toggle {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--calc-border);
    border-radius: var(--calc-radius-sm);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
.calc-unit-btn {
    flex: 1;
    padding: 11px 8px;
    background: var(--calc-surface);
    color: var(--calc-text-secondary);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    transition: background var(--calc-transition), color var(--calc-transition);
    border-right: 1px solid var(--calc-border);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.calc-unit-btn:last-child { border-right: none; }
.calc-unit-btn:hover:not(.calc-unit-btn--active) {
    background: var(--calc-surface-2);
    color: var(--calc-text-primary);
}
.calc-unit-btn--active { background: var(--calc-accent); color: #fff; font-weight: 600; }
.calc-unit-btn--active:hover { background: var(--calc-accent-dark); }

/* ── Field group: STRICT vertical stack per architecture rule ──────────────── */
.calc-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}
.calc-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--calc-text-primary);
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.calc-pair-badge {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--calc-accent);
    background: var(--calc-accent-glow);
    border: 1px solid rgba(20,184,166,0.25);
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* ── Input wrapper: input + inline unit suffix ─────────────────────────────── */
.calc-input-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--calc-radius-xs);
}

/* ── Traffic Light Input (ARCHITECTURE CORE RULE) ─────────────────────────── */
/* Empty = Grey | Focused = Orange | Valid = Green                             */
.calc-input {
    width: 100%;
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    padding-right: 56px;
    border-radius: var(--calc-radius-xs);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    box-sizing: border-box;
    background: var(--calc-surface);
    color: var(--calc-text-primary);
    outline: none;
    display: block;
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color var(--calc-transition),
        box-shadow var(--calc-transition),
        background var(--calc-transition);
}
.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input::placeholder { color: var(--calc-text-muted); font-weight: 400; }

/* State: Empty/Default = Grey border */
.calc-input--empty { border: 1.5px solid var(--calc-grey); }

/* State: Focused = Orange ring */
.calc-input--focused {
    border-color: var(--calc-orange) !important;
    box-shadow: 0 0 0 3px var(--calc-orange-glow) !important;
    background: var(--calc-surface-2) !important;
}

/* State: Valid Number = Green */
.calc-input--valid {
    border: 1.5px solid var(--calc-green);
    background: var(--calc-green-bg);
    box-shadow: 0 0 0 2px var(--calc-green-glow);
}
.calc-input--valid.calc-input--focused {
    border-color: var(--calc-orange) !important;
    box-shadow: 0 0 0 3px var(--calc-orange-glow) !important;
}

/* ── Unit suffix label ─────────────────────────────────────────────────────── */
.calc-input-unit {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--calc-text-muted);
    pointer-events: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Field hints & per-panel derived value ─────────────────────────────────── */
.calc-field-hint { font-size: 0.76rem; color: var(--calc-text-muted); line-height: 1.45; }
.calc-derived {
    font-size: 0.8rem;
    color: var(--calc-text-muted);
    font-weight: 500;
    min-height: 1em;
    transition: color var(--calc-transition);
}
.calc-derived--active { color: var(--calc-accent); }

/* ── Select / Dynamic Drop Wheel ───────────────────────────────────────────── */
.calc-input-wrapper--select { position: relative; }
.calc-select {
    width: 100%;
    display: block;
    padding: 12px 40px 12px 14px;
    border: 1.5px solid var(--calc-grey);
    border-radius: var(--calc-radius-xs);
    background: var(--calc-surface);
    color: var(--calc-text-primary);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--calc-transition), box-shadow var(--calc-transition);
}
.calc-select:focus {
    border-color: var(--calc-orange);
    box-shadow: 0 0 0 3px var(--calc-orange-glow);
    background: var(--calc-surface-2);
}
.calc-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--calc-text-muted);
    pointer-events: none;
}

/* ── Hidden utility ────────────────────────────────────────────────────────── */
.calc-hidden { display: none !important; }

/* ── CTA Button: full width, at bottom (Output Placement rule) ─────────────── */
.calc-btn-primary {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border: none;
    border-radius: var(--calc-radius-sm);
    background: var(--calc-surface-2);
    color: var(--calc-text-muted);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: not-allowed;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        background var(--calc-transition),
        color var(--calc-transition),
        box-shadow var(--calc-transition),
        transform 0.1s ease;
}
.calc-btn-primary--ready {
    background: linear-gradient(135deg, var(--calc-accent) 0%, #38bdf8 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 20px var(--calc-accent-glow);
}
.calc-btn-primary--ready:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 28px var(--calc-accent-glow);
}
.calc-btn-primary--ready:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px var(--calc-accent-glow);
}
.calc-btn-icon { font-size: 1.1rem; transition: transform 0.2s ease; }
.calc-btn-primary--ready:hover .calc-btn-icon { transform: translateX(3px); }
.calc-submit-hint { font-size: 0.75rem; color: var(--calc-text-muted); text-align: center; margin: 0; }

/* ── Engine State Panel: BOTTOM of page (Output Placement rule) ─────────────── */
.calc-state-panel {
    max-width: 520px;
    width: 100%;
    margin: 32px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}
.calc-state-panel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--calc-text-muted);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--calc-border);
}
.calc-state-panel-icon { font-size: 0.9rem; }
.calc-state-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--calc-surface);
    border: 1px solid var(--calc-border);
    border-radius: var(--calc-radius-sm);
    overflow: hidden;
    padding: 4px 0;
}
.calc-state-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--calc-border);
    gap: 12px;
}
.calc-state-row:last-child { border-bottom: none; }
.calc-state-key { color: var(--calc-text-muted); font-weight: 400; }
.calc-state-val { color: var(--calc-accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Mobile override — Samsung Galaxy A05s (360px viewport) ────────────────── */
@media (max-width: 400px) {
    .calc-page-title { font-size: 1.05rem; }
    .calc-card,
    .calc-state-panel { padding: 0 12px; }
    .calc-input,
    .calc-select { font-size: 0.95rem; }
}

/* ── Survey card grids (rmc-*) ────────────────────────────────────────────────
   Found 2026-07-18: these classes were used throughout survey.js's window
   card (rmc-desktop-layout, rmc-input-col, rmc-grid-3, rmc-grid-2) purely as
   bare names with NO CSS behind any of them anywhere in this file — not a
   mobile bug exactly, just markup that was never finished. Mobile-first:
   single column by default, real side-by-side columns once there's room. */
.rmc-desktop-layout,
.rmc-input-col {
    width: 100%;
    box-sizing: border-box;
}
.rmc-grid-3,
.rmc-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
}
@media (min-width: 560px) {
    .rmc-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .rmc-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile "make everything bigger" broad pass (2026-07-18) ─────────────────
   Almost every font-size in survey.js/walk.js is a fixed inline px value on
   individual elements (not classes), so there's no single selector that
   reaches all of them to bump font-size one by one. Scaling the whole
   content area as one unit is the practical broad fix: text, spacing, and
   tap targets all grow together, proportionally, in one rule. zoom (not
   transform: scale) keeps real layout/hit-testing intact — well-supported
   in Chrome/Android Chrome, which is what this was tested on. */
@media (max-width: 560px) {
    #app-content {
        zoom: 1.2;
    }
}

/* ── Action Bar: interactive SVG measurement input ─────────────────────────── */
.action-bar-wrapper {
    margin-top: 8px;
}
.action-bar {
    background: #ffffff;
    border: 2px solid #14b8a6;
    border-radius: 10px;
    padding: 14px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 2px 12px rgba(20, 184, 166, 0.10);
}
.action-bar-prompt {
    border-color: #e2e8f0;
    box-shadow: none;
    background: #f8fafc;
}
.action-bar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.action-bar-node {
    font-weight: 800;
    font-size: 14px;
    color: #0f172a;
}
.action-bar-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.action-bar-req {
    font-size: 11px;
    color: #f97316;
    font-weight: 600;
    margin-left: auto;
}
.action-bar-form {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.action-bar-input {
    flex: 1;
    min-width: 0;
}
.action-bar-next {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #14b8a6 0%, #38bdf8 100%);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.22s ease;
}
.action-bar-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25);
}
.action-bar-next:active {
    transform: translateY(0);
}
.action-bar-done-btn {
    background: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
}
.action-bar-hint {
    font-size: 11px;
    color: #6b7280;
    font-style: italic;
    margin-bottom: 6px;
}
.action-bar-override-btn {
    display: block;
    margin-top: 4px;
    background: none;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    color: #64748b;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.action-bar-override-btn:hover {
    border-color: #94a3b8;
    color: #334155;
}

/* ── SVG node hitbox cursor ────────────────────────────── */
.node-hitbox {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}