/* Syrenis State Tracker — front end. Values ported 1:1 from the reference tracker. */

.sst,
.sst-tip {
    --sst-surface: #FFFFFF;
    --sst-surface-2: #F4F4F8;
    --sst-inset: #EBEAF0;
    --sst-line: #DCDBE3;
    --sst-line-strong: #C8C8D0;
    --sst-line-hair: #EBEAF0;
    --sst-tx-1: #17161F;
    --sst-tx-2: #55545D;
    --sst-tx-3: #8B8B94;
    --sst-ink-900: #25252E;
    --sst-ink-1000: #0C0B13;
    --sst-cta: #724CE8;
    --sst-cta-hover: #5C39C1;
    --sst-link: #5C39C1;
    --sst-dot: #8E6EFF;
    --sst-pur-50: #F5F4FF;
    --sst-pur-100: #EAE8FF;
    --sst-pur-300: #C1B5FF;
    --sst-pur-700: #5C39C1;
    --sst-brand: #724CE8;
}

.sst { color: var(--sst-tx-1); font-size: 16px; line-height: 1.5; font-weight: 400; }
/* Zero specificity, so every class rule below wins over it. text-wrap is set on
   headings and paragraphs only, as in the reference - it inherits, and on the
   note lists it would move line breaks. */
:where(.sst) :where(h2, h3, p, ul, dl, dd) { margin: 0; }
:where(.sst) :where(h2, h3, p) { text-wrap: pretty; }

.sst-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; flex-wrap: wrap; }
/* The theme forces h1-h6 to weight 300 with !important. */
.sst-head h2 { font-size: 36px; line-height: 1.5; letter-spacing: -0.025em; font-weight: 500 !important; }
.sst-head p { color: var(--sst-tx-2); max-width: 58ch; margin-top: 8px; }

.sst-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 8px; font-weight: 700; font-size: 14px; line-height: 1.5; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.sst-btn-cta { background: var(--sst-cta); color: #FFFFFF; }
.sst-btn-cta:hover { background: var(--sst-cta-hover); color: #FFFFFF; text-decoration: none; }
.sst-btn-ghost { border-color: var(--sst-line-strong); color: var(--sst-tx-1); background: transparent; }
.sst-btn-ghost:hover { background: var(--sst-surface-2); text-decoration: none; }
a.sst-btn-ghost:hover { color: var(--sst-link); }
/* The reference reset is a <button> without font:inherit, so it renders in the UA
   button font (computed Arial) at line-height normal. Kept for the 1:1 match. */
.sst-reset { font-family: Arial, Helvetica, sans-serif; line-height: normal; }

.sst-card { background: var(--sst-surface); border: 1px solid var(--sst-line); border-radius: 14px; }
.sst-map-card { padding: 24px; }

.sst-controls { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--sst-line-hair); }
.sst-toggle { display: inline-flex; background: var(--sst-inset); border-radius: 999px; padding: 3px; }
.sst-toggle[hidden] { display: none; }
.sst-toggle button { font: inherit; font-size: 13px; font-weight: 500; border: 0; background: none; cursor: pointer; padding: 6px 16px; border-radius: 999px; color: var(--sst-tx-2); }
.sst-toggle button[aria-pressed="true"] { background: var(--sst-surface); color: var(--sst-tx-1); box-shadow: 0 0 0 1px var(--sst-line); }
.sst-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.sst-legend button { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; color: var(--sst-tx-2); background: none; border: 0; padding: 5px 9px; border-radius: 999px; cursor: pointer; }
.sst-legend button:hover { background: var(--sst-surface-2); color: var(--sst-tx-1); }
.sst-legend button[aria-pressed="true"] { background: var(--sst-inset); color: var(--sst-tx-1); font-weight: 500; }
.sst-sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(12, 11, 19, .14); flex: none; }
.sst-count { color: var(--sst-tx-3); }

/* Map and state drawer: the drawer column grows from 0 to 380px when a state is picked. */
.sst-stage { display: grid; grid-template-columns: minmax(0, 1fr) 0px; transition: grid-template-columns .32s ease; margin-top: 16px; min-height: 560px; }
.sst-stage.is-open { grid-template-columns: minmax(0, 1fr) 380px; }
.sst-map { width: 100%; display: block; align-self: center; }
.sst-drawer { position: relative; overflow: hidden; border-left: 1px solid transparent; transition: border-color .32s ease; font-size: 15px; }
.sst-stage.is-open .sst-drawer { border-left-color: var(--sst-line-hair); }
/* 379px: the drawer column is 380px including its 1px left border. */
.sst-drawer-in { position: absolute; inset: 0; width: 379px; display: flex; flex-direction: column; padding-left: 24px; }
.sst-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 8px; }
.sst-drawer-foot { display: flex; gap: 8px; flex-wrap: nowrap; padding-top: 16px; border-top: 1px solid var(--sst-line-hair); }
.sst-drawer-foot .sst-btn { height: 38px; padding: 0 12px; font-size: 13px; flex: 1 1 auto; min-width: 0; }
.sst-d-head { display: flex; justify-content: space-between; align-items: center; }
.sst-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: 4px; cursor: pointer; color: var(--sst-tx-2); padding: 0; }
.sst-x:hover { background: var(--sst-surface-2); color: var(--sst-tx-1); }
.sst-map path.sst-state { stroke: #FFFFFF; stroke-width: 0.9; cursor: pointer; outline: none; transition: fill .15s ease, opacity .15s ease; }
.sst-map path.sst-state:hover,
.sst-map path.sst-state:focus-visible { stroke: var(--sst-ink-900); stroke-width: 1.4; }
.sst-map path.sst-state.selected { stroke: var(--sst-ink-1000); stroke-width: 2.2; }
.sst-map path.dim { opacity: 0.2; }
.sst-tip { position: fixed; pointer-events: none; background: var(--sst-ink-1000); color: #FFFFFF; font-size: 13px; padding: 6px 10px; border-radius: 4px; opacity: 0; transition: opacity .1s; z-index: 50; white-space: nowrap; }

.sst-drawer h3 { font-size: 24px; line-height: 1.5; letter-spacing: -0.025em; font-weight: 500 !important; }
.sst-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; }
.sst-label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sst-tx-3); }
.sst-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; border: 1px solid var(--sst-line); border-radius: 999px; padding: 4px 12px 4px 9px; white-space: nowrap; }
.sst-status-note { color: var(--sst-tx-2); font-size: 14px; margin-top: 8px; }
.sst-billsel { width: 100%; margin-top: 16px; font: inherit; font-size: 14px; height: 38px; padding: 0 10px; border: 1px solid var(--sst-line-strong); border-radius: 8px; background: var(--sst-surface); color: var(--sst-tx-1); }
.sst-meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; font-size: 14px; margin-top: 16px; }
.sst-meta dt { color: var(--sst-tx-3); font-size: 13px; padding-top: 1px; }
.sst-meta dd.sst-strong { font-weight: 500; }
.sst-blk { border-top: 1px solid var(--sst-line-hair); margin-top: 16px; padding-top: 16px; }
.sst-blk ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.sst-blk li { display: grid; grid-template-columns: 8px 1fr; gap: 12px; font-size: 14px; color: var(--sst-tx-2); line-height: 1.45; }
.sst-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--sst-dot); margin-top: 7px; }
.sst-blk li b { color: var(--sst-tx-1); font-weight: 500; display: block; }
/* The notes fold behind a tinted summary row with Show / Hide. */
.sst-more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--sst-tx-1); background: var(--sst-pur-50); border: 1px solid var(--sst-pur-100); border-radius: 8px; padding: 10px 12px; }
.sst-more summary::-webkit-details-marker { display: none; }
.sst-more summary:hover { border-color: var(--sst-pur-300); }
.sst-act { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sst-pur-700); white-space: nowrap; flex: none; }
.sst-when-open,
.sst-more[open] .sst-when-closed { display: none; }
.sst-more[open] .sst-when-open { display: inline; }
.sst-chev { transition: transform .2s ease; color: var(--sst-pur-700); flex: none; }
.sst-more[open] .sst-chev { transform: rotate(180deg); }
.sst-disc { font-size: 12px; color: var(--sst-tx-3); margin-top: 12px; }
/* State guide CTA under the bill: purple card; on hover the border and icon tile go
   brand purple and the button fills red. The notes row below loses its divider. */
.sst-guide { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; margin-top: 16px; padding: 16px; background: var(--sst-pur-50); border: 1px solid var(--sst-pur-100); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.sst-guide + .sst-blk { border-top: 0; padding-top: 0; }
.sst-guide-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--sst-pur-100); color: var(--sst-pur-700); transition: background .15s ease, color .15s ease; }
.sst-guide .sst-label { color: var(--sst-pur-700); }
.sst-guide h4 { font-size: 15px; line-height: 1.4; font-weight: 500 !important; margin: 2px 0 0; }
.sst-guide p { font-size: 13px; color: var(--sst-tx-2); margin-top: 2px; }
.sst-btn.sst-guide-btn { grid-column: 1 / -1; width: 100%; height: 38px; gap: 8px; margin-top: 12px; font-size: 13px; background: var(--sst-surface); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.sst-guide:hover,
.sst-guide:focus-within { border-color: var(--sst-brand); box-shadow: 0 4px 14px rgba(114, 76, 232, .12); }
.sst-guide:hover .sst-guide-ico,
.sst-guide:focus-within .sst-guide-ico { background: var(--sst-brand); color: #FFFFFF; }
.sst-guide:hover .sst-guide-btn,
.sst-guide:focus-within .sst-guide-btn { background: var(--sst-cta); border-color: var(--sst-cta); color: #FFFFFF; }
.sst-guide .sst-guide-btn:hover { background: var(--sst-cta-hover); border-color: var(--sst-cta-hover); color: #FFFFFF; }

@media (max-width: 760px) {
    /* Phones: the drawer opens under the map instead of beside it. */
    .sst-stage,
    .sst-stage.is-open { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .sst-drawer { display: none; border-left: 0; }
    .sst-stage.is-open .sst-drawer { display: block; border-top: 1px solid var(--sst-line-hair); margin-top: 16px; padding-top: 16px; }
    .sst-drawer-in { position: static; width: auto; padding-left: 0; }
    /* The reference lets a long badge ("No comprehensive law") run out of the panel
       on phones; wrapping it under the state name keeps it inside. */
    .sst-title-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .sst-map path.sst-state,
    .sst-tip,
    .sst-stage,
    .sst-drawer,
    .sst-chev,
    .sst-guide,
    .sst-guide-ico,
    .sst-guide-btn { transition: none; }
}