/* DECIZII — decision-trace visualization. Shares the Câmpinenii design
   language with apps/consiliu (tokens copied from its styles.css). */

:root {
    /* Political party colors - backgrounds */
    --party-psd-bg: #FECACA;
    --party-pnl-bg: #FEF08A;
    --party-usr-bg: #BFDBFE;
    --party-pcc-bg: #15803d;
    --party-pmp-bg: #7C3AED;
    --party-verde-bg: #BBF7D0;
    --party-pol-bg: #FED7AA;
    --party-aur-bg: #FDE68A;
    --party-adu-bg: #99F6E4;
    --party-ind-bg: #E5E7EB;
    --party-prorom-bg: #C4B5FD;

    /* Câmpinenii palette — Cream / Ink / Amber */
    --bg-primary:    #F4F1EA;
    --bg-secondary:  #FFFFFF;
    --text-primary:  #0B0B0B;
    --text-secondary: rgba(11, 11, 11, 0.55);
    --border-color:  rgba(11, 11, 11, 0.14);
    --accent:        #13cd38;
    --accent-text:   #0B0B0B;
    --deep-accent:   #0FB42F;
    --sub:           #ECE7DC;

    /* Semantic (outcomes / votes) */
    --ok:      #15803d;
    --ok-bg:   #DCFCE7;
    --bad:     #B91C1C;
    --bad-bg:  #FEE2E2;
    --warn:    #B45309;
    --warn-bg: #FEF3C7;
    --meh:     #6B7280;
    --meh-bg:  #F3F4F6;
    --info:    #1D4ED8;
    --info-bg: #DBEAFE;

    /* Type */
    --font-display:  'Manrope', system-ui, sans-serif;
    --font-body:     'Manrope', system-ui, sans-serif;
    --font-serif:    'Instrument Serif', Georgia, serif;
    --font-mono:     'JetBrains Mono', ui-monospace, monospace;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --header-height: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    font-feature-settings: "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

a { color: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--deep-accent); }
::selection { background: var(--accent); color: var(--text-primary); }

/* ---------------------------------------------------------------- header */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 1.5rem;
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.header__title {
    font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background 0.2s ease;
}
.back-link:hover { background: var(--border-color); }
.back-link svg { width: 16px; height: 16px; }

.header__info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    font-weight: 600;
}
.header__info-btn:hover { background: var(--deep-accent); transform: scale(1.05); }

/* ---------------------------------------------------------------- layout */
.app {
    max-width: 1060px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.loading[hidden] { display: none; }
.loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    padding: 4rem 0;
    color: var(--text-secondary);
}
.loading__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent);
    animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }

.view > * + * { margin-top: 1.5rem; }

.footer {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
}
.footer__disclosure {
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}
.update-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 1rem;
}

/* ---------------------------------------------------------------- search */
.search { position: relative; }

.search__box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.search__box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(19, 205, 56, 0.18);
}
.search__icon { color: var(--text-secondary); flex-shrink: 0; }
.search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
}
.search__input::placeholder { color: var(--text-secondary); }

.search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 50;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-height: min(60vh, 480px);
    overflow-y: auto;
    padding: 0.4rem;
}
.search__group {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0.5rem 0.7rem 0.25rem;
}
.search__item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    font: inherit;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
}
.search__item:hover, .search__item:focus { background: var(--bg-primary); }
.search__item-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 5.4em;
}
.search__item-text {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem;
}
.search__empty { padding: 0.9rem; color: var(--text-secondary); font-size: 0.9rem; }

/* ------------------------------------------------------------- range bar */
.range {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.range__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.range__select {
    font: inherit;
    font-weight: 600;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: pointer;
}
.range__sep { color: var(--text-secondary); }
.range__summary {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ---------------------------------------------------------- stats panels */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-sm);
}
.panel__title {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.panel__sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}
.rank { display: flex; flex-direction: column; gap: 0.45rem; }
.rank__row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    border: none;
    background: transparent;
    font: inherit;
    padding: 0.15rem 0.2rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}
.rank__row:hover { background: var(--bg-primary); }
.rank__name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--sub);
    overflow: hidden;
}
.rank__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}
.rank__bar-fill--bad { background: #F87171; }
.rank__val {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.rank__head {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0.55rem 0 0.1rem;
}

.party-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(11, 11, 11, 0.25);
}

/* ---------------------------------------------------------------- browse */
.browse__title { font-size: 1.15rem; }
.browse__hint { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.2rem; }
.browse__mandates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.mandate-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 1.2rem 1.2rem;
    box-shadow: var(--shadow-sm);
}
.mandate-card__title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 0.6rem;
}
.amphi {
    position: relative;
    width: 280px;
    height: 155px;
    margin: 0 auto;
}
.amphi-seat {
    position: absolute;
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 1.5px solid rgba(11, 11, 11, 0.3);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.amphi-seat:hover {
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 0 0 3px rgba(19, 205, 56, 0.35);
    z-index: 2;
}
.mandate-card__mayor {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.person-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.person-chip:hover { border-color: var(--accent); background: var(--bg-secondary); }

/* --------------------------------------------------------------- badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.13rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge--adopted { background: var(--ok-bg); color: var(--ok); }
.badge--rejected { background: var(--bad-bg); color: var(--bad); }
.badge--withdrawn { background: var(--warn-bg); color: var(--warn); }
.badge--voted_unlinked { background: var(--info-bg); color: var(--info); }
.badge--no_vote_found, .badge--unknown { background: var(--meh-bg); color: var(--meh); }

.badge--vote-f { background: var(--ok-bg); color: var(--ok); }
.badge--vote-g { background: var(--bad-bg); color: var(--bad); }
.badge--vote-b { background: var(--warn-bg); color: var(--warn); }
.badge--vote-n, .badge--vote-u { background: var(--meh-bg); color: var(--meh); }

.badge--att-p, .badge--att-o { background: var(--ok-bg); color: var(--ok); }
.badge--att-a { background: var(--bad-bg); color: var(--bad); }
.badge--att-u { background: var(--meh-bg); color: var(--meh); }

.nv {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--warn);
    background: var(--warn-bg);
    border-radius: 4px;
    padding: 0 0.3rem;
    vertical-align: 1px;
}
.vok { color: var(--ok); font-weight: 700; }

/* --------------------------------------------------------- generic cards */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
    box-shadow: var(--shadow-sm);
}
.crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.crumbs button, .crumbs a {
    border: none;
    background: transparent;
    font: inherit;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    text-decoration: none;
}
.crumbs button:hover, .crumbs a:hover { background: var(--border-color); color: var(--text-primary); }

.doc-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    background: var(--bg-primary);
    transition: border-color 0.15s;
}
.doc-link:hover { border-color: var(--accent); }
.doc-link svg { width: 13px; height: 13px; color: var(--text-secondary); }

/* ------------------------------------------------------------ point view */
.point-topic {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1.35;
}
.point-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.7rem;
}
.chip {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.14rem 0.6rem;
    color: var(--text-secondary);
}

.timeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding: 0.4rem 0;
}
.timeline__step {
    flex: 1;
    min-width: 130px;
    position: relative;
    padding: 0.2rem 0.9rem 0.2rem 0;
}
.timeline__label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.timeline__date { font-weight: 800; font-size: 1rem; margin-top: 0.15rem; }
.timeline__note { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.1rem; }
.timeline__gap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    padding: 0 0.9rem 0 0;
    min-width: 74px;
}
.timeline__gap-days {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--sub);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}
.timeline__gap-arrow { font-size: 0.9rem; line-height: 1; margin-top: 0.2rem; }

.vote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
}
.vote-bucket {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: var(--bg-primary);
}
.vote-bucket__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.vote-bucket__label { font-size: 0.8rem; font-weight: 700; }
.vote-bucket__n { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; }
.vote-bucket--f .vote-bucket__n { color: var(--ok); }
.vote-bucket--g .vote-bucket__n { color: var(--bad); }
.vote-bucket--b .vote-bucket__n { color: var(--warn); }
.vote-bucket--n .vote-bucket__n { color: var(--meh); }
.vote-bucket__names {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;
    font-size: 0.78rem;
}
.vote-name { display: inline-flex; align-items: center; gap: 0.28rem; }
.vote-name button, .vote-name a {
    border: none; background: none; font: inherit; padding: 0;
    cursor: pointer; text-decoration: none;
    border-bottom: 1px dotted var(--border-color);
}
.vote-name button:hover, .vote-name a:hover { border-bottom-color: var(--text-primary); }

.excerpt {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
}
.excerpt summary {
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    font-weight: 700;
    font-size: 0.85rem;
    list-style-position: inside;
}
.excerpt__body {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0 1rem 1rem;
    white-space: pre-line;
}
.excerpt__note {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-family: var(--font-body);
    padding: 0 1rem 0.8rem;
}

.section-title { font-size: 1rem; margin-bottom: 0.6rem; }

/* -------------------------------------------------------- councilor view */
.profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}
.profile-head__name { font-size: 1.5rem; }
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8rem;
}
.tile {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    box-shadow: var(--shadow-sm);
}
.tile__value { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
.tile__label { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.1rem; }

.ydetails {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    margin-bottom: 0.55rem;
}
.ydetails summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    font-size: 0.9rem;
}
.ydetails summary::-webkit-details-marker { display: none; }
.ydetails summary::before {
    content: "▸";
    color: var(--text-secondary);
    transition: transform 0.15s;
}
.ydetails[open] summary::before { transform: rotate(90deg); }
.ydetails__count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.ydetails__body { padding: 0 0.9rem 0.7rem; }

.row-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0.2rem;
    border-top: 1px solid var(--border-color);
}
.row-item:first-child { border-top: none; }
.row-item__date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 6.2em;
}
.row-item__text { flex: 1; font-size: 0.86rem; min-width: 0; }
.row-item__text button {
    border: none; background: none; font: inherit; padding: 0;
    cursor: pointer; text-align: left;
}
.row-item__text button:hover { text-decoration: underline; }
.row-item__aside { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; }
.row-item__aside a {
    font-size: 0.74rem;
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------- legend */
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.5rem; }
.legend__item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.legend__color {
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(11, 11, 11, 0.2);
}

/* ----------------------------------------------------------------- modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
/* visibility flips instantly on open (so focus() works immediately);
   the fade stays on opacity. Closing keeps the delayed visibility. */
.modal.active { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.modal__content {
    position: relative;
    width: 90%;
    max-width: 550px;
    max-height: 85vh;
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.modal__title { flex: 1; font-size: 1.125rem; font-weight: 600; }
.modal__close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: none; border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.modal__close:hover { background: var(--bg-primary); color: var(--text-primary); }
.modal__body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.modal__body h3 { margin: 1rem 0 0.35rem; font-size: 0.95rem; }
.modal__body p, .modal__body li { font-size: 0.9rem; }
.modal__body ul { padding-left: 1.2rem; }

/* ------------------------------------------- clickable panel titles */
.panel__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.panel__link:hover { color: var(--deep-accent); border-bottom-color: var(--deep-accent); }
.panel__link:focus-visible { outline: 2px solid var(--deep-accent); outline-offset: 3px; border-radius: 2px; }
.panel__link-arrow {
    color: var(--deep-accent);
    font-weight: 800;
    transition: transform 0.15s;
}
.panel__link:hover .panel__link-arrow { transform: translateX(3px); }

/* ------------------------------------------------ clickable stat tile */
.tile--link {
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tile--link:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.tile--link:focus-visible { outline: 2px solid var(--deep-accent); outline-offset: 2px; }
.tile__go {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--deep-accent);
}

/* ------------------------------------------- clickable summary stats */
.sum-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--deep-accent);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.sum-link:hover { color: var(--deep-accent); border-bottom-style: solid; }
.sum-link:focus-visible { outline: 2px solid var(--deep-accent); outline-offset: 2px; border-radius: 2px; }

/* ------------------------------------------ prezenta meeting-type filter */
.pz-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.pz-type__label { flex-shrink: 0; }

/* --------------------------------------------------- drill-down lists */
.mt-pt--dated .mt-pt__meta { margin-left: 6.9em; }

/* ------------------------------------- unpublished-HCL disclosure */
.chip--warn {
    background: var(--warn-bg);
    color: var(--warn);
    border-color: transparent;
    font-weight: 700;
}
.gap-note {
    margin-top: 0.7rem;
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--warn);
    background: var(--warn-bg);
    border-radius: 0 8px 8px 0;
    font-size: 0.8rem;
    color: var(--warn);
}

/* ----------------------------------------------------- list animations */
@media (prefers-reduced-motion: no-preference) {
    .rank__bar-fill { transition: width 0.5s cubic-bezier(0.22, 0.9, 0.35, 1); }
    .anim-in { animation: row-in 0.32s cubic-bezier(0.22, 0.9, 0.35, 1) both; }
}
@keyframes row-in {
    from { opacity: 0; transform: translateY(7px); }
}

/* -------------------------------------------------- prezenta explorer */
.pz-filters {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.9rem;
}
.pz-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pz-pill {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pz-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.pz-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
    font-weight: 700;
}
.pz-pill:focus-visible, .pz-row:focus-visible, .pz-sort__btn:focus-visible {
    outline: 2px solid var(--deep-accent);
    outline-offset: 2px;
}
.pz-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.pz-date { display: inline-flex; align-items: center; gap: 0.4rem; }
.pz-date input {
    font: inherit;
    color: var(--text-primary);
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.pz-rank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    margin-bottom: 0.35rem;
}
.pz-sort { display: inline-flex; border: 1px solid var(--border-color); border-radius: 999px; overflow: hidden; }
.pz-sort__btn {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.3rem 0.75rem;
    cursor: pointer;
}
.pz-sort__btn.active { background: var(--text-primary); color: var(--bg-primary); }

.pz-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.pz-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    border: none;
    background: transparent;
    font: inherit;
    padding: 0.25rem 0.3rem;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}
.pz-row:hover { background: var(--bg-primary); }
.pz-row__rank {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-secondary);
    text-align: right;
}
.pz-divider {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-top: 1px dashed var(--border-color);
    margin-top: 0.7rem;
    padding-top: 0.6rem;
}
.pz-out { opacity: 0.45; }
.pz-profile-link { margin-top: 0.8rem; font-size: 0.85rem; font-weight: 600; }
.pz-profile-link a {
    text-decoration: none;
    border-bottom: 1px dotted var(--text-secondary);
}
.pz-profile-link a:hover { border-bottom-color: var(--text-primary); }
.tiles--modal { grid-template-columns: repeat(2, 1fr); margin-top: 0.8rem; }
.modal__content--prez { max-width: 640px; }
#prezTitle { display: flex; align-items: center; gap: 0.5rem; }

/* --------------------------------------------- vote tally chips */
.vt {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
    white-space: nowrap;
}
.vt--f { background: var(--ok-bg); color: var(--ok); }
.vt--g { background: var(--bad-bg); color: var(--bad); }
.vt--b { background: var(--warn-bg); color: var(--warn); }
.vt--n, .vt--none { background: var(--meh-bg); color: var(--meh); }

/* ------------------------------- expandable meetings in the prez modal */
.pz-meet {
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    padding: 0.12rem 0.35rem;
}
.pz-meet.pz-in {
    border-left-color: var(--accent);
    background: rgba(19, 205, 56, 0.07);
}
.pz-meet__row { display: flex; align-items: center; gap: 0.5rem; }
.pz-meet__toggle {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 0.9rem 6.2em minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: transparent;
    font: inherit;
    padding: 0.32rem 0.2rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}
.pz-meet__toggle:hover { background: var(--bg-primary); }
.pz-meet__toggle:focus-visible { outline: 2px solid var(--deep-accent); outline-offset: 1px; }
.pz-meet__chev {
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.15s;
}
.pz-meet--open .pz-meet__chev { transform: rotate(90deg); }
.pz-meet__name { font-size: 0.84rem; min-width: 0; }
.pz-meet__pv { font-size: 0.74rem; color: var(--text-secondary); flex-shrink: 0; }
.pz-meet__body { padding: 0.15rem 0.3rem 0.55rem 1.6rem; }
.pz-meet__note { font-size: 0.78rem; color: var(--text-secondary); }
.pz-meet__more { font-size: 0.8rem; font-weight: 600; margin-top: 0.45rem; }
.pz-meet__more a, .mt-pt__more {
    text-decoration: none;
    border-bottom: 1px dotted var(--text-secondary);
}
.pz-meet__more a:hover, .mt-pt__more:hover { border-bottom-color: var(--text-primary); }
.pz-meet__pts { display: flex; flex-direction: column; gap: 0.4rem; }
.pz-meet__pt {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    gap: 0.15rem 0.45rem;
    align-items: baseline;
}
.pz-meet__pos {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: right;
}
.pz-meet__topic {
    border: none;
    background: none;
    font: inherit;
    font-size: 0.8rem;
    padding: 0;
    cursor: pointer;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pz-meet__topic:hover { text-decoration: underline; }
.pz-meet__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end;
}

/* ----------------------------------------------------- meeting view */
.mt-pt { border-top: 1px solid var(--border-color); padding: 0.65rem 0; }
.mt-pt:first-of-type { border-top: none; padding-top: 0.2rem; }
.mt-pt__head { display: flex; gap: 0.45rem; align-items: baseline; }
.mt-pt__pos {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 1.5rem;
    text-align: right;
}
.mt-pt__topic {
    border: none;
    background: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.mt-pt__topic:hover { text-decoration: underline; }
.mt-pt__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin: 0.4rem 0 0 1.95rem;
}
.mt-pt__hcl, .mt-pt__more { font-size: 0.76rem; font-weight: 700; }
.mt-pt__hcl { color: var(--ok); text-decoration: none; }
.mt-pt__hcl:hover { text-decoration: underline; }
.mt-votes {
    margin: 0.45rem 0 0 1.95rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
}
.mt-votes summary {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.38rem 0.6rem;
    cursor: pointer;
}
.mt-votes__body { padding: 0 0.6rem 0.6rem; }
.vote-bucket--att-p .vote-bucket__n, .vote-bucket--att-o .vote-bucket__n { color: var(--ok); }
.vote-bucket--att-a .vote-bucket__n { color: var(--bad); }
.vote-bucket--att-u .vote-bucket__n { color: var(--meh); }

/* -------------------------------------------- truncated-text tooltip */
.tt {
    position: fixed;
    z-index: 2000;
    max-width: min(420px, calc(100vw - 16px));
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    overflow-wrap: break-word;
}
.tt[hidden] { display: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 720px) {
    .header__title { font-size: 1.05rem; }
    .back-link span { display: none; }
    .app { padding: 1rem 0.8rem 2.5rem; }
    .timeline { flex-direction: column; }
    .timeline__step { padding: 0.35rem 0; min-width: 0; }
    .timeline__gap { flex-direction: row; gap: 0.5rem; padding: 0.1rem 0; min-width: 0; justify-content: flex-start; }
    .timeline__gap-arrow { display: none; }
    .range__summary { width: 100%; margin-left: 0; }

    /* no hover on most mobiles — wrap text instead of truncating it */
    .rank__name { white-space: normal; }
    .pz-row {
        grid-template-columns: 1.6rem minmax(0, 1fr) auto;
        grid-template-areas:
            "rank name val"
            "rank bar  bar";
        row-gap: 0.3rem;
    }
    .pz-row__rank { grid-area: rank; }
    .pz-row__name { grid-area: name; }
    .pz-row__bar { grid-area: bar; }
    .pz-row__val { grid-area: val; }
    .pz-date { flex: 1 1 100%; }
    .pz-date input { flex: 1; min-width: 0; }
    .modal__content { width: 94%; max-height: 88vh; max-height: 90dvh; }
    .modal__body { padding: 1rem; }
    .tiles--modal { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pz-meet__toggle {
        grid-template-columns: 0.9rem auto minmax(0, 1fr);
        grid-template-areas:
            "chev date badge"
            "chev name name";
        row-gap: 0.15rem;
    }
    .pz-meet__chev { grid-area: chev; }
    .pz-meet__toggle .row-item__date { grid-area: date; min-width: 0; }
    .pz-meet__toggle .badge { grid-area: badge; justify-self: end; }
    .pz-meet__name { grid-area: name; }
    .pz-meet__body { padding-left: 0.9rem; }
    .pz-meet__pt { grid-template-columns: 1.5rem minmax(0, 1fr); }
    .pz-meet__aside { grid-column: 2; justify-content: flex-start; }
    .mt-pt__meta, .mt-votes, .mt-pt--dated .mt-pt__meta { margin-left: 0; }
}