/* === DESIGN TOKENS === */
:root {
    --color-primary: #2c5282;
    --color-primary-dark: #1e3a5f;
    --color-accent: #3182ce;
    --color-success: #38a169;
    --color-danger: #c53030;
    --color-warn-bg: #fff5f5;
    --color-text: #1a202c;
    --color-text-muted: #4a5568;
    --color-border: #cbd5e0;
    --color-bg: #ffffff;
    --color-bg-alt: #f7fafc;
    --color-bg-header: #edf2f7;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;

    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

    --max-width: 1000px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

/* === LAYOUT === */
#doc { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); }
#bd { padding: var(--space-lg) 0; }
#ft { margin-top: var(--space-xl); padding: var(--space-md) 0; text-align: center; color: var(--color-text-muted); font-size: 0.875rem; }

/* === TYPOGRAPHY === */
h1 { font-size: 1.75rem; margin: 0 0 var(--space-md); color: var(--color-primary-dark); font-weight: 700; }
h2 { font-size: 1.35rem; margin: var(--space-lg) 0 var(--space-md); color: var(--color-primary); font-weight: 600; }
h3 { font-size: 1.1rem; margin: var(--space-md) 0 var(--space-sm); font-weight: 600; }
p { margin: 0 0 var(--space-md); }
a { color: var(--color-accent); text-decoration: underline; }
a:hover { color: var(--color-primary-dark); }

/* === HEADER === */
#hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
#hd .logos { display: flex; align-items: center; gap: var(--space-lg); flex: 1; }
#hd .logos img { max-height: 60px; width: auto; }
#hd .user {
    display: flex; align-items: center; gap: var(--space-sm);
    font-size: 0.875rem; color: var(--color-text-muted);
}
#hd .user form { display: inline; margin: 0; padding: 0; border: none; background: none; }

/* === BUTTONS === */
.btn, button[type="submit"]:not(.link-button), input[type="submit"] {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    font-family: inherit;
}
.btn:hover, button[type="submit"]:not(.link-button):hover, input[type="submit"]:hover {
    background: var(--color-primary-dark);
    color: #fff;
}
.btn-secondary { background: var(--color-bg-alt); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-border); color: var(--color-text); }
.btn-lg { padding: var(--space-md) var(--space-xl); font-size: 1.125rem; }

.link-button {
    background: none; border: none; padding: 0; margin: 0;
    color: var(--color-accent); cursor: pointer; font: inherit;
    text-decoration: underline;
}
.link-button:hover { color: var(--color-primary-dark); }

/* === HOMEPAGE === */
.vote-button {
    text-align: center;
    margin: var(--space-xl) 0;
}
.vote-button a {
    display: inline-block;
    padding: var(--space-md) var(--space-xl);
    font-size: 1.5rem;
    font-weight: 600;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 0.15s, background 0.15s;
}
.vote-button a:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-1px); }
.vote-button.red { color: var(--color-danger); font-size: 1.25rem; font-weight: 600; }
.under-button {
    max-width: 500px; margin: var(--space-lg) auto;
    text-align: center; color: var(--color-text-muted);
    font-size: 0.9rem;
}

.flashy {
    background: var(--color-warn-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    padding: var(--space-md);
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
}

/* === TABLES === */
table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); }
th, td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
th { background: var(--color-bg-header); color: var(--color-primary-dark); font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover { background: var(--color-bg-alt); }
td.centeredinput, .centeredinput { text-align: center; padding: 0; }

/* Large click target for motion radios and candidate checkboxes.
   The <label> fills the whole <td>, padding makes it ~48px tall
   (WCAG AAA 44px min). transform:scale enlarges the native control
   itself — works everywhere: IE9+, Safari 3.1+, all Android, Firefox. */
.vote-hit {
    display: block;
    padding: 14px 6px;
    margin: 0;
    cursor: pointer;
    line-height: 1;
}
.vote-hit:hover { background-color: var(--color-bg-alt); }
.vote-hit input[type="radio"],
.vote-hit input[type="checkbox"] {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    cursor: pointer;
    vertical-align: middle;
}

/* === WIZARD === */
.wizard-progress {
    display: flex; justify-content: center; gap: var(--space-sm);
    margin: 0 0 var(--space-lg);
    list-style: none; padding: 0;
}
.wizard-progress li {
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--color-bg-alt);
    border: 2px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted);
}
.wizard-progress li.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wizard-progress li.done { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.wizardpage {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    position: relative;
}
.wizardpage .logo {
    position: absolute; top: var(--space-md); right: var(--space-md);
    max-height: 50px; width: auto; opacity: 0.8;
}
.wizardpage h2 { margin-top: 0; padding-right: 80px; }
.wizardpage .motion-slug { font-weight: 700; font-size: 1.25rem; text-align: center; color: var(--color-primary-dark); }

.buttons {
    display: none;
    margin-top: var(--space-lg);
    gap: var(--space-md);
    justify-content: space-between;
    align-items: center;
}
.buttons.buttons-validate { display: flex; }
.buttons a, .buttons button {
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.buttons a:hover, .buttons button:hover { background: var(--color-primary-dark); color: #fff; }
.buttons .button-previous { background: var(--color-bg-alt); color: var(--color-text); border: 1px solid var(--color-border); }
.buttons .button-previous:hover { background: var(--color-border); color: var(--color-text); }

.submitform { display: none; }

/* === VALIDATE === */
.section-header {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius);
    margin: var(--space-lg) 0 var(--space-md);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* === LOGIN === */
.login-form {
    max-width: 420px;
    margin: var(--space-xl) auto;
    padding: var(--space-lg);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.login-form table, .login-form td { border: none; padding: var(--space-sm); }
.login-form input[type="text"], .login-form input[type="password"] {
    width: 100%; padding: var(--space-sm);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: 1rem;
}

/* === DASHBOARD === */
.participation-bar {
    margin: var(--space-md) 0;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    height: 28px;
    position: relative;
    overflow: hidden;
    max-width: 400px;
}
.participation-bar-fill {
    background: var(--color-accent);
    height: 100%;
    transition: width 0.3s;
}
.participation-bar-label {
    position: absolute; top: 0; left: var(--space-sm); right: var(--space-sm);
    line-height: 28px;
    font-size: 0.875rem; font-weight: 500;
    color: var(--color-text);
}

/* === UTILITIES === */
.red { color: var(--color-danger); }
.big { font-weight: 700; font-size: 1.1rem; }
hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-xl) 0; }

/* === MOBILE === */
@media (max-width: 640px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }
    #hd { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
    #hd .logos { justify-content: space-between; }
    #hd .logos img { max-height: 40px; }
    #hd .user { justify-content: center; font-size: 0.8rem; }
    .wizardpage { padding: var(--space-md); }
    .wizardpage .logo { position: static; display: block; margin: 0 auto var(--space-md); max-height: 36px; }
    .wizardpage h2 { padding-right: 0; text-align: center; }
    table { font-size: 0.875rem; }
    th, td { padding: var(--space-xs) var(--space-sm); }
    .buttons { flex-direction: column-reverse; }
    .buttons a, .buttons button { width: 100%; text-align: center; }
    .vote-button a { font-size: 1.2rem; padding: var(--space-md) var(--space-lg); }
}