/* Shared styles for the 51 /*-tax-calculator/ pages — map, results, and calculator
   form pieces that aren't already part of the base article-template <style> block. */

.map-shell {
    background: linear-gradient(165deg, #0e1a33 0%, #0a1226 100%);
    border: 1px solid #1f2c4d; border-radius: var(--radius);
    padding: 22px 22px 14px; margin: 18px 0 28px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
}
.state-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; margin: 4px auto 10px; max-width: 780px; font-size: 0.88rem; color: #cbd5e1; }
.state-legend-item { display: flex; align-items: center; gap: 7px; }
.state-legend-dot { width: 14px; height: 14px; border-radius: 4px; flex: none; border: 1px solid rgba(255,255,255,0.25); }
.state-map-svg { max-width: 920px; margin: 8px auto 4px; min-height: 200px; }
.state-map-svg svg { width: 100%; height: auto; display: block; }
.st-path { stroke: #0a1226; stroke-width: 1.2; cursor: pointer; transition: fill .25s ease, filter .25s ease, opacity .25s ease; }
.st-path.st-none { fill: #b9e9cf; }
.st-path.st-flat { fill: #c3d8f6; }
.st-path.st-prog { fill: #f7e2ab; }
.st-path.st-none:hover { fill: #97dfbb; }
.st-path.st-flat:hover { fill: #a9c9f2; }
.st-path.st-prog:hover { fill: #f2d388; }
.st-path:hover { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18)); }
.st-path:focus { outline: none; }
.st-path:focus-visible { stroke: #ffffff; stroke-width: 1.8; }
.st-path.selected.st-none { fill: var(--success); }
.st-path.selected.st-flat { fill: var(--primary); }
.st-path.selected.st-prog { fill: var(--warning); }
.st-path.selected { stroke: #ffffff; stroke-width: 1.5; }
#usMapSvg.has-selection .stg { opacity: 0.55; }
#usMapSvg.has-selection .stg:hover, #usMapSvg.has-selection .stg.selected { opacity: 1; }
.stg { transition: opacity .25s ease; }
.st-label {
    font-size: 11px; font-weight: 700; fill: #3a4a63; text-anchor: middle;
    dominant-baseline: central; pointer-events: none; user-select: none;
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.stg.selected .st-label { fill: #ffffff; }
.st-leader { stroke: #7c8db0; stroke-width: 1; }
.st-chip { fill: rgba(255,255,255,0.07); stroke: #3b4d75; cursor: pointer; transition: fill .25s ease, stroke .25s ease; }
.stg.callout:hover .st-chip, .st-chip:focus-visible { fill: rgba(255,255,255,0.16); stroke: #5b72a3; outline: none; }
.st-chip-label {
    fill: #dbe4f3; font-size: 11px; font-weight: 700; text-anchor: middle;
    dominant-baseline: central; pointer-events: none; user-select: none;
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.stg.selected .st-chip { fill: var(--primary); stroke: var(--primary-light); }
.stg.selected .st-chip-label { fill: #ffffff; }
.map-credit { font-size: 0.72rem; color: #7c8db0; text-align: center; margin-top: 6px; }
.map-credit a { color: #8fb4ff; }
.state-jump-row { display: flex; align-items: center; gap: 10px; max-width: 920px; margin: 12px auto 4px; font-size: 0.9rem; color: #cbd5e1; }
.state-jump-row label { flex: none; font-weight: 600; }
.state-jump-row select { max-width: 340px; padding: 9px 14px; font-size: 0.92rem; background: #101c38; color: #e2e8f0; border: 1.5px solid #2a3a5f; border-radius: 12px; }

.success-box { background: #e8f5e9; border-left: 4px solid var(--success); padding: 16px 18px; border-radius: 0 8px 8px 0; margin: 16px 0; }
.success-box h4 { color: #1b5e20; }
.success-box p { color: #1b5e20; margin: 0 0 4px; }
.success-box a.btn { margin-top: 10px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border: none; border-radius: 12px; font-size: 0.98rem; font-weight: 600;
    cursor: pointer; transition: all .22s cubic-bezier(.4,0,.2,1); text-decoration: none;
}
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff; box-shadow: 0 6px 16px rgba(29,78,216,0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29,78,216,0.34); }

.state-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; margin-left: 8px; vertical-align: middle; }

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 18px 0; }
.result-card { background: linear-gradient(180deg, #fbfcff, #f5f8ff); border: 1px solid #e6ecf7; border-radius: var(--radius-sm); padding: 20px; text-align: center; }
.result-card.highlight { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; border: none; }
.result-card.highlight .result-label, .result-card.highlight .result-value { color: #fff; }
.result-label { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; }
.result-value { font-size: 1.5rem; font-weight: 800; color: var(--primary-dark); font-family: 'SF Mono', Monaco, monospace; font-variant-numeric: tabular-nums; }
.result-card.highlight .result-value { font-size: 1.8rem; }

.bracket-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.9rem; }
.bracket-table th, .bracket-table td { border: 1px solid var(--border); padding: 9px 11px; text-align: left; }
.bracket-table th { background: #eef1f8; }
.bracket-table tr.active { background: #eef3ff; font-weight: 600; }

.take-home-box { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 4px; padding: 12px 16px; background: #f0f7ff; border: 1px solid #c7ddff; border-radius: var(--radius-sm); font-size: 0.95rem; }
.take-home-box .th-label { color: var(--text-secondary); margin-right: 6px; }
.take-home-box strong { color: var(--primary-dark); font-family: 'SF Mono', Monaco, monospace; }

.sp-form { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; background: var(--card-bg); margin: 18px 0; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 4px; }
.sp-form .form-group { margin-bottom: 16px; }
.sp-form label.form-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.sp-form input, .sp-form select {
    width: 100%; padding: 11px 14px; border: 1.5px solid #d8e0ee; border-radius: 10px;
    font-size: 0.96rem; background: #fbfcff; color: var(--text);
}
.sp-checkbox-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; }
.sp-checkbox-row input { width: auto; }
.sp-note { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; }
.tip-box { background: #eef6ff; border: 1px solid #cfe3ff; padding: 13px 15px; border-radius: 12px; margin: 16px 0; font-size: 0.94rem; color: #0d47a1; }
.tip-box p { margin: 0; color: inherit; }

@media(max-width:700px){
  .cmp-header, .cmp-row { font-size: 0.8rem; }
}

/* .lang-toggle's flex/pill container styling lives in the main SPA's own stylesheet, which these
   real-URL pages don't load (they use the lighter article-template stylesheet) — reproduced here
   so the language switcher matches the main site's nav pill look instead of rendering as bare text. */
.lang-toggle, .an-lang {
    display: flex; gap: 2px; background: #f2f4f8; padding: 3px; border-radius: 8px;
    box-shadow: none; border: none; align-items: center;
}
.an-lang-link, .an-lang-current {
    display: inline-block; padding: 6px 10px; font-size: 0.76rem; font-weight: 600;
    border-radius: 6px; text-decoration: none; color: var(--text-secondary); line-height: 1.2;
}
.an-lang-link:hover { color: var(--primary); background: rgba(255,255,255,0.6); }
.an-lang-current { background: #fff; color: var(--primary-dark); box-shadow: 0 1px 3px rgba(15,23,42,0.12); }

/* Continuation tour widget (mirrors the main SPA's .tour-float exactly, so the guided
   walkthrough looks identical when it follows the user from the SPA onto a state page). */
.tour-float.tf-enter{animation:tfIn .45s ease;}
@keyframes tfIn{0%{transform:translateY(-14px);opacity:0;}60%{box-shadow:0 0 0 6px rgba(29,78,216,.25),0 12px 34px rgba(15,23,42,.20);}100%{transform:none;opacity:1;}}
.tour-float{position:fixed;right:14px;top:76px;width:332px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 34px rgba(15,23,42,.20);z-index:800;padding:14px 16px;font-size:.86rem;}
.tour-float .tf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-weight:800;color:var(--primary-dark);font-size:.9rem;line-height:1.35;}
.tour-float .tf-close{border:none;background:none;font-size:1.05rem;cursor:pointer;color:var(--text-secondary);line-height:1;padding:2px;flex:none;}
.tour-float .tf-progress{font-size:.72rem;color:var(--text-secondary);margin-top:2px;}
.tour-float .tf-dots{display:flex;gap:4px;margin:8px 0 10px;flex-wrap:wrap;}
.tour-float .tf-dot{width:8px;height:8px;border-radius:50%;background:#dbe3f0;}
.tour-float .tf-dot.done{background:var(--success);}
.tour-float .tf-dot.on{background:var(--primary);transform:scale(1.25);}
.tour-float .tf-text{color:var(--text);line-height:1.6;margin-bottom:12px;}
.tour-float .tf-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.tour-float .tf-btns .btn{padding:6px 12px;font-size:.78rem;}
.btn-outline{background:#fff;border:1.5px solid var(--border);color:var(--text-secondary);}
.btn-outline:hover{border-color:var(--primary-light);color:var(--primary);}
.btn-success{background:linear-gradient(135deg,var(--success),#2ec27e);color:#fff;}
.tour-highlight{animation:tourPulse 1.1s ease-in-out infinite;border-radius:10px;}
@keyframes tourPulse{0%,100%{box-shadow:0 0 0 3px rgba(29,78,216,.55);}50%{box-shadow:0 0 0 9px rgba(29,78,216,.10);}}
.tour-flash{animation:none !important;box-shadow:0 0 0 4px rgba(22,163,74,.6) !important;border-radius:10px;}
@media(max-width:640px){.tour-float{right:8px;width:calc(100vw - 16px);font-size:.82rem;}}

/* X-link + share button (nav social row), matching the main SPA exactly. */
.an-social-item{display:flex;align-items:center;}
.social-row{display:flex;align-items:center;gap:8px;position:relative;}
.social-circle-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:var(--text);cursor:pointer;text-decoration:none;transition:background .15s,transform .15s,border-color .15s;flex:none;}
.social-circle-btn:hover{background:#f5f7fb;border-color:var(--primary);color:var(--primary);transform:translateY(-1px);}
.social-popup{display:none;position:absolute;top:100%;right:0;margin-top:10px;width:266px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:16px;z-index:120;font-size:.84rem;line-height:1.6;color:var(--text);text-align:left;}
.an-social-item:hover .social-popup,.an-social-item:focus-within .social-popup{display:block;}
.social-popup .sp-title{font-weight:800;color:var(--primary-dark);margin-bottom:8px;font-size:.86rem;}
.social-popup a{color:var(--primary);text-decoration:none;font-weight:600;}
.social-popup a:hover{text-decoration:underline;}
.social-popup .sp-row{margin-bottom:6px;}
.share-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--primary-dark);color:#fff;padding:12px 20px;border-radius:12px;font-size:.86rem;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:2000;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media(max-width:900px){.social-popup{right:-40px;}}