/* =====================================================================
   TaskLanding styles

   1.  Colors and tokens
   2.  Base
   3.  Top bar and menu drawer
   4.  Page layout
   5.  Cards, buttons, lists
   6.  Messages, badges, status
   7.  Forms and eye icons
   8.  Tables, search, paging, section divider
   9.  Dashboard
   10. Withdraw pages
   11. Login and signup
   ===================================================================== */


/* ---------- 1. Colors and tokens ---------- */

:root {
    /* Brand */
    --brand: #3b1f5c;
    --brand-deep: #24103c;
    --accent: #f2b33d;
    --link: #5b2c9a;

    /* Surfaces and text */
    --bg: #f7f5fa;
    --card: #ffffff;
    --text: #1b1426;
    --muted: #6e6680;
    --line: #e7e2ee;
    --line-strong: #d4cce0;

    /* Status colors */
    --good: #15803d;
    --good-bg: #dcfce7;
    --bad: #b91c1c;
    --bad-bg: #fee2e2;
    --warn: #92400e;
    --warn-bg: #fef3c7;
    --info: #1d4ed8;
    --info-bg: #dbeafe;
    --ok: #3b1f5c;
    --ok-bg: #fdf0d5;
    --ok-edge: #f2b33d;
    --caution: #c2410c;
    --caution-bg: #ffedd5;

    /* Card edge colors */
    --teal: #0f766e;
    --amber: #c98a1b;

    /* Shape */
    --radius: 12px;
    --radius-lg: 16px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand: #2f6f8f;
        --brand-deep: #1b4257;
        --link: #81d4fa;
        --bg: #121212;
        --card: #1e1e1e;
        --text: #eeeeee;
        --muted: #b3b3b3;
        --line: #2c2c2c;
        --line-strong: #3d3d3d;
        --good: #4ade80;
        --good-bg: #12351f;
        --bad: #f87171;
        --bad-bg: #3b1620;
        --warn: #fbbf24;
        --warn-bg: #3a2d0f;
        --info: #60a5fa;
        --info-bg: #12263f;
        --ok: #f2b33d;
        --ok-bg: #2e2510;
        --ok-edge: #f2b33d;
        --caution: #fb923c;
        --caution-bg: #3b1d0c;
    }
}


/* ---------- 2. Base ---------- */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

a { color: var(--link); }

h1 { font-size: 1.4rem; margin: 8px 0 16px; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }


/* ---------- 3. Top bar and menu drawer ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--brand);
}
.topbar-left { display: flex; align-items: center; gap: 6px; }

.brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}

.link-button {
    background: none;
    border: 0;
    color: #fff;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.topbar .menu-btn {
    width: auto;
    margin: 0;
    padding: 8px;
    background: transparent;
    color: #fff;
    line-height: 0;
}
.menu-btn svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
}
.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(80vw, 300px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--card);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.drawer .drawer-close {
    width: auto;
    margin: 0;
    padding: 4px 10px;
    background: transparent;
    color: var(--muted);
    font-size: 1.6rem;
    line-height: 1;
}
.drawer > a {
    padding: 14px 12px;
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
.drawer > a.active { background: var(--bg); color: var(--link); }
.drawer form { margin-top: auto; }
.drawer form button.drawer-logout {
    margin: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--bad);
}

@media (prefers-reduced-motion: reduce) {
    .drawer { transition: none; }
}


/* ---------- 4. Page layout ---------- */

.page {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 32px;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px;
}
.page-head h1 { margin: 0; }


/* ---------- 5. Cards, buttons, lists ---------- */

.card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.label { margin: 0; color: var(--muted); font-size: 0.85rem; }
.big { margin: 4px 0 0; font-size: 1.8rem; font-weight: 700; }
.desc { margin: 8px 0 12px; }

.btn {
    display: block;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.btn:active { opacity: 0.85; }
.btn.btn-outline {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--link);
}

/* Simple list (Tasks page, withdrawal confirm page) */
.list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--card);
    border-radius: var(--radius);
}
.list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.list li small { width: 100%; color: var(--muted); }
.list li p {
    width: 100%;
    margin: 4px 0 0;
    color: var(--bad);
    font-size: 0.9rem;
}
.credit { color: var(--good); font-weight: 600; }
.debit { color: var(--bad); font-weight: 600; }


/* ---------- 6. Messages, badges, status ---------- */

/* Messages: one card per message. Kinds: success (the default), error, info and warning. */
.message {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    background: var(--ok-bg);
    color: var(--ok);
    font-weight: 600;
}
/* Success uses the brand gold, so it never looks like a warning (orange) */
.message.success { border-color: var(--ok-edge); }
.message.success .msg-ico { stroke: var(--ok-edge); }
.message.error { background: var(--bad-bg); color: var(--bad); }
.message.info { background: var(--info-bg); color: var(--info); }
.message.warning { background: var(--caution-bg); color: var(--caution); }
/* Home: the Activate now button for inactive students, shaped like the balance card */
main.page a.activate-btn {
    display: block;
    margin: 16px 0;
    padding: 16px;
    border-radius: 4px !important;
    background: var(--accent);
    color: var(--brand-deep);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
/* Discover: post cards on Home and on the Discover page. The left edge shows the kind. */
main.page .dash-discover { margin-top: 24px; }
main.page .dash-discover + .dash-recent { margin-top: 24px; }
main.page a.dsc-card { display: block; margin: 0 0 12px; border-left: 4px solid var(--accent); color: var(--text); text-decoration: none; }
main.page a.dsc-card.dsc-card-read { border-left-color: var(--good); }
main.page a.dsc-card.dsc-card-job { border-left-color: var(--info); }
main.page .dsc-kind { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--ok-bg); color: var(--ok); }
main.page .dsc-kind.dsc-read { background: var(--good-bg); color: var(--good); }
main.page .dsc-kind.dsc-job { background: var(--info-bg); color: var(--info); }
main.page .dsc-title { display: block; color: var(--text); font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
main.page .dsc-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 0.875rem; }
main.page .dsc-text { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* A post's own page: lines kept as written, long links wrap */
main.page .dsc-body { line-height: 1.6; overflow-wrap: anywhere; }
main.page .dsc-body p { margin: 0 0 12px; }
main.page .dsc-body p:last-child { margin-bottom: 0; }
main.page .message.msg-card { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; width: auto; max-width: none; font-weight: 400; }
main.page .msg-card .msg-ico { grid-column: 1; width: 22px; height: 22px; margin: 1px 0 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main.page .msg-card .msg-body { grid-column: 2; display: block; min-width: 0; width: auto; max-width: none; }
main.page .msg-card .msg-title { display: block; font-weight: 700; }
main.page .msg-card .msg-text { display: block; width: auto; margin-top: 2px; white-space: normal; overflow-wrap: break-word; }
main.page .msg-card .msg-close { grid-column: 3; justify-self: end; width: auto; min-width: 0; background: none; border: 0; box-shadow: none; padding: 0 2px; margin: 0; color: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer; }

.badge {
    background: var(--good-bg);
    color: var(--good);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
}
.badge.pending,
.badge.inactive,
.badge.unknown { background: var(--warn-bg); color: var(--warn); }
.badge.rejected { background: var(--bad-bg); color: var(--bad); }

/* Status with a colored dot (tables and detail page) */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    text-decoration: none;
}
.status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}
.status.approved::before,
.status.credit::before { background: var(--good); }
.status.pending::before { background: var(--amber); }
.status.rejected::before,
.status.debit::before { background: var(--bad); }
a.status.rejected { color: var(--bad); }
a.status.rejected::after { content: "???"; font-size: 1.1rem; line-height: 1; }


/* ---------- 7. Forms and eye icons ---------- */

form p { margin: 0 0 8px; }

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
}
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}
textarea { min-height: 120px; }

/* Django form help text and errors (as_p forms) */
.helptext {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.85rem;
}
.errorlist {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    color: var(--bad);
    font-size: 0.9rem;
}

/* Default button: full width, brand color. Variants below override it. */
button:not(.link-button) {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
button:not(.link-button):active { opacity: 0.85; }
form button:not(.link-button) { margin-top: 6px; }

/* Show / hide eye icons (dashboard cards, withdraw notice, passwords) */
.eye svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-eye-off { display: none; }


/* ---------- 8. Tables, search, paging, section divider ---------- */

.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* One look for every table. Add class "wide" for tables with many columns. */
.data-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    background: var(--card);
    font-size: 0.9rem;
}
.data-table.wide { min-width: 760px; }

.data-table th,
.data-table td {
    padding: 12px 18px;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}
.data-table th {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line-strong);
}
.data-table td { border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { font-variant-numeric: tabular-nums; }

.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }

/* Date with the time raised at its top-right */
.when { white-space: nowrap; }
.when-time {
    position: relative;
    top: -0.6em;
    margin-left: 4px;
    font-size: 0.68rem;
    line-height: 0;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.sep { color: var(--line-strong); margin: 0 6px; }

/* Live search box (no button) */
.live-search { margin-bottom: 12px; }
.live-search input { margin-bottom: 0; }

/* Entries bar: "Show 10 entries" with a toggle that opens a radio panel */
.entries-bar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 6px 6px 6px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--muted);
}
.entries-bar strong { color: var(--text); }
.entries-menu { position: static; }
.entries-menu summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}
.entries-menu summary::-webkit-details-marker { display: none; }
.entries-menu svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.entries-menu .chev { transition: transform 0.15s ease; }
.entries-menu[open] .chev { transform: rotate(180deg); }
.entries-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 15;
    min-width: 190px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.entries-panel .opt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.entries-panel .opt:hover { background: var(--bg); }
.entries-panel input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand);
}
/* No square around a clicked radio; keyboard users still get a ring */
.entries-panel input[type="radio"]:focus { outline: none; }
.entries-panel input[type="radio"]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Page buttons */
.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 18px 0;
}
.pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
.pg.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pg.disabled { opacity: 0.4; }
a.pg:active { transform: translateY(1px); }

/* Section divider: a centered label between two thin lines */
.section-divider {
    margin: 28px 0 16px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.section-divider span {
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-divider span::before,
.section-divider span::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-strong);
}

/* ---------- 9. Dashboard ---------- */

.money-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 18px;
    border-top: 5px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow);
}
.card-earnings { border-top-color: var(--teal); }
.card-withdrawals { border-top-color: var(--amber); }

.money-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.money-amount {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    font-size: 1.7rem;
    font-weight: 700;
}

/* Balance card: the bold one */
.card-balance {
    border-top: 0;
    padding: 22px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}
.card-balance::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}
.card-balance .label { color: #fff; opacity: 0.85; }
.card-balance .money-amount { color: var(--accent); font-size: 2.2rem; }

/* Balance card: amount and Withdraw button on one row */
.money-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-top: 6px;
}
.money-bottom .money-amount { margin: 0; }
.card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: #1b1426;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.card-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.card-action:active { transform: translateY(1px); }

/* Hide / show amount (the class on <html> is set by app.js) */
.money-top button.eye {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 11px;
    background: transparent;
    color: var(--muted);
    line-height: 0;
}
.card-balance .money-top button.eye { color: #fff; }

.amount-dots { display: none; letter-spacing: 3px; }

.hide-balance .card-balance .amount-value,
.hide-balance .card-balance .icon-eye,
.hide-earnings .card-earnings .amount-value,
.hide-earnings .card-earnings .icon-eye,
.hide-withdrawals .card-withdrawals .amount-value,
.hide-withdrawals .card-withdrawals .icon-eye { display: none; }

.hide-balance .card-balance .amount-dots,
.hide-balance .card-balance .icon-eye-off,
.hide-earnings .card-earnings .amount-dots,
.hide-earnings .card-earnings .icon-eye-off,
.hide-withdrawals .card-withdrawals .amount-dots,
.hide-withdrawals .card-withdrawals .icon-eye-off { display: inline; }

/* The cards fill the first screen; Recent transactions sits below */
.dash-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: calc(100vh - 140px);
    min-height: min(calc(100svh - 140px), 900px);
}
.dash-cards .money-card {
    flex: 1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dash-cards .card-balance { flex: 1.5; }
.dash-recent { margin-top: 80px; }
.dash-recent .btn { margin-top: 14px; }


/* ---------- 10. Withdraw pages ---------- */

/* Registered-number notice */
.notice {
    padding: 12px 16px;
    background: var(--card);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.notice p { margin: 0 0 8px; }

.notice-number {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    color: var(--muted);
}
.notice-number .num-hidden,
.notice-number .num-full {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}
.notice-number .num-hidden { letter-spacing: 0.2em; }
.notice .num-full { display: none; }
.notice.reveal .num-full { display: inline-block; }
.notice.reveal .num-hidden { display: none; }

.notice button.eye {
    width: auto;
    margin: 0 0 0 auto;
    padding: 8px;
    background: transparent;
    color: var(--muted);
    line-height: 0;
}
.notice.reveal .icon-eye { display: none; }
.notice.reveal .icon-eye-off { display: inline; }

/* Collapsible "Before you withdraw" */
.notice details { margin-top: 10px; }
.notice summary {
    cursor: pointer;
    color: var(--link);
    font-weight: 600;
    list-style: none;
}
.notice summary::-webkit-details-marker { display: none; }
.notice summary::after { content: " ???"; }
.notice details[open] summary::after { content: " ???"; }
.notice details p { margin: 8px 0 0; }

/* Balance and pending, side by side */
.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pair-card {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow);
}
.pair-card > * { position: relative; z-index: 1; }
.pair-amount {
    margin: 8px 0 0;
    font-size: clamp(1.15rem, 5.2vw, 1.5rem);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.pair-amount .cur {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
}
.pair-balance {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}
.pair-balance .label { color: #fff; opacity: 0.85; }
.pair-balance .pair-amount { color: var(--accent); }
.pair-balance::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -36px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}
.pair-pending { border-top: 5px solid var(--amber); }

@media (max-width: 340px) {
    .pair { grid-template-columns: 1fr; }
}

/* First screen: notice, cards and form; the history sits below */
.withdraw-first {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
}
.withdraw-first > form {
    padding: 16px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.withdraw-first > form input[type="text"] { margin-bottom: 0; }
.withdraw-first > form button { margin-top: 14px; }
.withdraw-first + .section-divider { margin-top: 32px; }

/* Withdrawal detail page */
.detail-card {
    margin-bottom: 14px;
    padding: 18px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.detail-status { margin: 0; }
.detail-lead { margin: 10px 0 6px; font-size: 1.1rem; font-weight: 700; }
.detail-card h2 { margin: 16px 0 6px; font-size: 0.95rem; color: var(--muted); }
.reason-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.detail-list dt { color: var(--muted); font-size: 0.8rem; }
.detail-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }


/* ---------- 11. Login and signup ---------- */

body.login-body { background: var(--card); }
.login-wrap {
    max-width: 380px;
    margin: 0 auto;
    padding: 56px 24px 40px;
}

/* Logo lockup */
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.tl-logo { width: 56px; height: 56px; flex-shrink: 0; }
.tl-logo .tl-bg { fill: var(--brand); }
.tl-logo .tl-t { fill: #fff; }
.tl-logo .tl-l { fill: var(--accent); }
.lockup-line { width: 2px; height: 42px; background: var(--line-strong); }
.lockup-word { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }

.login-title { margin: 40px 0 6px; font-size: 1.4rem; }
.login-sub { margin: 0 0 28px; color: var(--muted);}

/* Underline fields */
.login-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 5px;
    border-bottom: 1px solid var(--line-strong);
    color: var(--muted);
}
.login-field + .login-field,
.login-group + .login-group { margin-top: 22px; }
.login-group .errorlist { margin: 6px 0 0; }

.login-field:focus-within {
    padding-bottom: 4px;
    border-bottom: 2px solid var(--brand);
    color: var(--brand);
}
.login-field .lead-icon { display: inline-flex; line-height: 0; }
.login-field .lead-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.login-field input[type] {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    outline: none;
}
.login-field button.eye-btn {
    width: auto;
    margin: 0;
    padding: 6px;
    background: transparent;
    color: var(--muted);
    line-height: 0;
}
.login-field.reveal .icon-eye { display: none; }
.login-field.reveal .icon-eye-off { display: inline; }

.login-form .login-btn {
    margin-top: 30px;
    padding: 15px;
    border-radius: 8px;
    letter-spacing: 0.02em;
}
.login-note {
    margin: 28px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}


/* Copy and share buttons */
.copy-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.copy-row input { flex: 1 1 100%; margin: 0; }
button.copy-btn {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    padding: 12px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
button.copy-btn svg {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
button.copy-btn[hidden] { display: none; }
button.copy-btn.alt {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--link);
}
button.copy-btn.copied { background: #15803d; color: #fff; }

/* ---------- 12. Activation page ---------- */

.pay-card {
    margin: 4px 0 14px;
    padding: 20px 18px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.pay-card label { margin: 0 0 2px; color: var(--muted); font-size: 0.85rem; }
.pay-card label.pay-gap { margin-top: 22px; }
.pay-card .errorlist { margin: 6px 0 0; }
.pay-card .login-btn { margin-top: 28px; }

/* Read-only amount: looks like a field, but not editable (yet) */
.login-field.is-readonly input { font-weight: 700; cursor: default; }
.login-field.is-readonly:focus-within {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line-strong);
    color: var(--muted);
}
.login-field .end-icon { display: inline-flex; line-height: 0; color: var(--muted); }
.login-field .end-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Waiting card */
.pay-wait {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 18px;
    background: var(--card);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.pay-wait strong { display: block; }
.pay-wait p { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
    animation: dot-pulse 1.2s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .dots i { animation: none; }
}

/* Activation: who the money goes to */
.pay-to {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.pay-to .tl-logo { width: 40px; height: 40px; }
.pay-to small { display: block; color: var(--muted); font-size: 0.8rem; }
.pay-to strong { font-size: 1.05rem; }

/* Activation: M-Pesa logo above the card (white strip, so it also suits dark themes) */
.pay-brand {
    display: flex;
    justify-content: center;
    margin: 14px 0 0;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow);
}
.pay-brand img { display: block; width: 100%; max-width: 280px; height: auto; }
.pay-brand + .pay-card { margin-top: 0; border-radius: 0 0 var(--radius) var(--radius); }

/* Activation: the notice card (reason, refund policy, what you get) with the consent box */
.pay-notice {
    margin: 22px 0 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--link) 8%, var(--card));
}
.pay-notice-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pay-notice-i {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--link);
    color: var(--card);
    font: 800 0.95rem/1 Georgia, serif;
}
.pay-notice-head strong { color: var(--link); font-size: 1.05rem; }
.pay-notice-list { margin: 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.5; }
.pay-notice-list li + li { margin-top: 4px; }
.pay-notice.is-collapsed .pay-notice-list {
    max-height: 6.2em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
    mask-image: linear-gradient(#000 55%, transparent);
}
button.pay-notice-more {
    width: auto;
    margin: 4px 0 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--link);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
button.pay-notice-more[hidden] { display: none; }
main .pay-notice .pay-agree { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); cursor: pointer; }
.pay-card .pay-notice + .login-btn { margin-top: 18px; }
[data-consent-form] button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* Payment successful page */
.pay-done { margin-top: 24px; padding: 32px 22px; text-align: center; }
.pay-done-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #15803d;
}
.pay-done-check svg, .welcome-badge svg { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pay-done h1 { margin: 18px 0 6px; }
.pay-done-lead { margin: 0; font-size: 1.05rem; }
.pay-done-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--link) 8%, var(--card));
    text-align: left;
}
.pay-done-note-ico {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card);
    color: var(--link);
}
.pay-done-note-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pay-done-note-text { flex: 1; min-width: 0; margin: 0; color: var(--text); font-size: 0.95rem; line-height: 1.4; }
main.page a.activate-btn.pay-done-btn { margin-top: 24px; }

/* Welcome popup after activation: the dashboard behind it is blurred and darkened */
body:has([data-welcome]) { overflow: hidden; }
.welcome-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 12, 35, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.welcome-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 26px 20px 20px;
    border-radius: 18px;
    background: var(--card);
    color: var(--text);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}
.welcome-x-form { position: absolute; top: 12px; right: 12px; margin: 0; }
form button.welcome-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 8%, var(--card));
    color: var(--text);
    cursor: pointer;
}
form button.welcome-x:hover { background: color-mix(in srgb, var(--text) 14%, var(--card)); }
.welcome-x svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.welcome-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #15803d;
}
.welcome-dialog h2 { margin: 12px 0 4px; font-size: 1.35rem; }
.welcome-lead { margin: 0 0 16px; color: var(--muted); }
.welcome-steps {
    padding: 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--link) 7%, var(--card));
    text-align: left;
}
.welcome-step { display: flex; align-items: flex-start; gap: 12px; }
.welcome-step + .welcome-step { margin-top: 14px; }
.welcome-ico { flex-shrink: 0; width: 26px; height: 26px; fill: none; stroke: var(--link); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.welcome-text { flex: 1; min-width: 0; }
.welcome-text strong { display: block; font-size: 0.95rem; }
.welcome-text p { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
a.welcome-receipt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    color: var(--link);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
a.welcome-receipt:hover { text-decoration: underline; }
.welcome-receipt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.welcome-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
a.welcome-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
}
a.welcome-wa { background: #15803d; }
a.welcome-call { background: #1d4ed8; }
.welcome-btn svg { flex-shrink: 0; width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.welcome-btn span { display: flex; flex-direction: column; min-width: 0; }
.welcome-btn b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-btn small { font-size: 0.75rem; opacity: 0.9; }
.welcome-wait { margin: 12px 0 0; color: var(--muted); font-size: 0.8rem; text-align: center; }
button.welcome-ok { width: 100%; margin: 16px 0 0; padding: 14px; border-radius: 12px; font-size: 1rem; font-weight: 700; }
@media (max-width: 420px) {
    .welcome-contacts { grid-template-columns: 1fr; }
}

/* Phones: the logo strip and card run to the screen edges */
@media (max-width: 640px) {
    .pay-brand,
    .pay-brand + .pay-card {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
    }
}

/* Logo in the top bar */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .tl-logo { width: 32px; height: 32px; }
.topbar .tl-logo .tl-bg { fill: rgba(255, 255, 255, 0.16); }



/* ---------- Profile page ---------- */

.pf-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 18px; }
.pf-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
}
.pf-who { flex: 1; min-width: 0; }
.pf-who h1 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.pf-who p { margin: 2px 0 0; color: var(--muted); }
.pf-h {
    margin: 22px 0 8px;
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pf-card {
    margin: 0;
    padding: 0;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.pf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.pf-row:last-child { border-bottom: 0; }
.pf-row dt { color: var(--muted); font-size: 0.9rem; }
.pf-row dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pf-note { margin: 12px 4px 0; color: var(--muted); font-size: 0.85rem; }

.pf-reveal { display: inline-flex; align-items: center; gap: 8px; }
.rv-full { display: none; }
[data-reveal].reveal .rv-full { display: inline; }
[data-reveal].reveal .rv-hidden { display: none; }
.pf-row button.eye {
    width: auto;
    margin: 0;
    padding: 6px;
    background: transparent;
    color: var(--muted);
    line-height: 0;
}
[data-reveal].reveal .icon-eye { display: none; }
[data-reveal].reveal .icon-eye-off { display: inline; }

/* ---------- Profile: fields instead of a list ---------- */

.pf-card { padding: 16px 16px 2px; overflow: visible; }
.pf-field { margin-bottom: 14px; }
.pf-label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}
.pf-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.pf-input.locked::after {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pf-empty { color: var(--muted); font-weight: 400; }
.pf-input button.eye {
    width: auto;
    margin: 0;
    padding: 4px;
    background: transparent;
    color: var(--muted);
    line-height: 0;
}

/* ---------- View-only bar (the owner looking at a student's pages) ---------- */

.viewas-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--accent);
    color: #1b1426;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
    font-size: 0.95rem;
}
.viewas-bar form { margin: 0; }
.viewas-bar form button.viewas-exit {
    width: auto;
    margin: 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: #1b1426;
    color: #fff;
    font-weight: 700;
}
body:has(.viewas-bar) .page { padding-bottom: 96px; }

/* ---------- Tasks: my submissions ---------- */

.sub-title { font-weight: 600; overflow-wrap: anywhere; }
.sub-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    white-space: nowrap;
}
.sub-status::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted);
}
.sub-status.pending::before { background: #c98a1b; }
.sub-status.approved::before { background: #15803d; }
.sub-status.rejected::before { background: #dc2626; }

.sub-more { margin-top: 4px; }
.sub-more summary { color: var(--muted); font-size: 0.82rem; cursor: pointer; }
.sub-more p {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}
a.sub-again,
a.sub-again:visited {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

[data-scroll-if-paged] { scroll-margin-top: 72px; }

/* ---------- Student site: icons, top bar avatar, bottom bar ---------- */

.ic {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar a.avatar,
.topbar a.avatar:visited {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #1b1426;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.bnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.bnav a,
.bnav a:visited {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 2px 6px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
}
.bnav a.active { color: var(--brand); }
.bnav a.active .ic { stroke-width: 2.2; }

body:has(.bnav) .page { padding-bottom: 100px; }
body:has(.bnav) .viewas-bar { bottom: 64px; }

/* ---------- Home ---------- */

.greet { margin: 4px 0 14px; }
.greet-hi { margin: 0; color: var(--muted); font-size: 0.95rem; }
.greet-name { margin: 2px 0 0; font-size: 1.35rem; font-weight: 800; overflow-wrap: anywhere; }

.amount-dots { display: none; letter-spacing: 2px; }
html.hide-balance .js-balance .amount-value,
html.hide-earnings .js-earnings .amount-value,
html.hide-withdrawals .js-withdrawals .amount-value { display: none; }
html.hide-balance .js-balance .amount-dots,
html.hide-earnings .js-earnings .amount-dots,
html.hide-withdrawals .js-withdrawals .amount-dots { display: inline; }

.bal-card {
    position: relative;
    overflow: hidden;
    padding: 20px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand), #2a1247);
    color: #fff;
    box-shadow: var(--shadow);
}
.bal-label { margin: 0; opacity: 0.85; font-size: 0.9rem; }
.bal-amount {
    margin: 6px 0 14px;
    font-size: clamp(1.6rem, 8vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.bal-eye {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.bal-eye svg,
.stat-eye svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bal-eye .icon-eye,
.stat-eye .icon-eye { display: none; }
.bal-eye[aria-pressed="true"] .icon-eye,
.stat-eye[aria-pressed="true"] .icon-eye { display: inline; }
.bal-eye[aria-pressed="true"] .icon-eye-off,
.stat-eye[aria-pressed="true"] .icon-eye-off { display: none; }
.bal-eye .t-show { display: none; }
.bal-eye[aria-pressed="true"] .t-show { display: inline; }
.bal-eye[aria-pressed="true"] .t-hide { display: none; }
.bal-mark {
    position: absolute;
    right: 14px;
    bottom: 10px;
    width: 84px;
    height: 84px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.2;
    opacity: 0.16;
    pointer-events: none;
}

.sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 22px 0 10px;
}
.sec-head h2 { margin: 0; font-size: 1.05rem; }
.sec-head a,
.sec-head a:visited {
    color: var(--link);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.qa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.qa-tile,
.qa-tile:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 4px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.qa-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #fff;
}
.tint-green { background: #15803d; }
.tint-blue { background: #2563eb; }
.tint-purple { background: #7c3aed; }
.tint-amber { background: #c98a1b; }
@media (max-width: 380px) {
    .qa-grid { gap: 6px; }
    .qa-tile { font-size: 0.74rem; }
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
.stat-card {
    padding: 14px;
    border-left: 4px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.stat-card.earn { border-left-color: #0f766e; }
.stat-card.out { border-left-color: #c98a1b; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.stat-label { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.stat-eye {
    display: inline-flex;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    line-height: 0;
    cursor: pointer;
}
.stat-amount {
    margin: 8px 0 0;
    font-size: clamp(1rem, 4.6vw, 1.3rem);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.dash-recent { margin-top: max(24px, 30vh); }
.rec-more { margin: 0 0 8px; text-align: right; }
.rec-more a,
.rec-more a:visited {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--link);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}
.rec-more .ic { width: 16px; height: 16px; }

/* ---------- More ---------- */

.more-list {
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.more-row,
.more-row:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
}
.more-row:last-child { border-bottom: 0; }
.more-ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg);
    color: var(--brand);
}
.more-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.more-text small { color: var(--muted); }
.more-go { width: 18px; height: 18px; color: var(--muted); }

.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 18px 0 0;
    padding: 13px;
    border: 1px solid var(--bad);
    border-radius: var(--radius);
    background: transparent;
    box-shadow: none;
    color: var(--bad);
    font-weight: 700;
    cursor: pointer;
}

/* ---------- Home: the eye buttons must not take the site's wide button style ---------- */

main.page .bal-card button.bal-eye {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}
main.page .stat-card button.stat-eye {
    display: inline-flex;
    flex-shrink: 0;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    line-height: 0;
}
main.page .bal-card button.bal-eye svg,
main.page .stat-card button.stat-eye svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
main.page button.bal-eye .icon-eye,
main.page button.stat-eye .icon-eye { display: none; }
main.page button.bal-eye[aria-pressed="true"] .icon-eye,
main.page button.stat-eye[aria-pressed="true"] .icon-eye { display: inline; }
main.page button.bal-eye[aria-pressed="true"] .icon-eye-off,
main.page button.stat-eye[aria-pressed="true"] .icon-eye-off { display: none; }
main.page .stat-card .stat-label { min-width: 0; }

/* ---------- Terms and the signup agreement ---------- */

.terms-meta { margin: -8px 0 14px; color: var(--muted); font-size: 0.85rem; }
.terms-card {
    margin-bottom: 18px;
    padding: 4px 16px 10px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.terms-card h2 { margin: 18px 0 6px; font-size: 1rem; }
.terms-card p,
.terms-card li { font-size: 0.95rem; }
.terms-card ul { margin: 6px 0; padding-left: 20px; }
.terms-card li { margin-bottom: 4px; }

main .agree-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0;
    font-size: 0.9rem;
}
main .agree-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 2px 0 0;
    accent-color: var(--brand);
}
.login-wrap .agree-row { margin: 4px 0 14px; }

.terms-short {
    margin-bottom: 14px;
    padding: 4px 16px 10px;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.terms-short h2 { margin: 14px 0 6px; font-size: 1rem; }
.terms-short ul { margin: 6px 0; padding-left: 20px; }
.terms-short li { margin-bottom: 6px; font-size: 0.95rem; }

/* ---------- Terms: a back button that stays in view, and the recap box ---------- */

.terms-card .terms-short {
    margin: 16px 0 4px;
    padding: 4px 16px 10px;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: none;
}
.terms-card .terms-short h3 { margin: 12px 0 6px; font-size: 1rem; }
.terms-card .terms-short ul { margin: 6px 0; padding-left: 20px; }

.terms-back {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.terms-back .btn { display: block; max-width: 420px; margin: 0 auto; text-align: center; }
body:has(.bnav) .terms-back { bottom: 64px; padding-bottom: 10px; }
body:has(.terms-back) .page { padding-bottom: 96px; }
body:has(.bnav):has(.terms-back) .page { padding-bottom: 160px; }

/* ---------- Profile, version 2, and the account menu ---------- */

.acct { position: relative; }
.topbar summary.avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #1b1426;
    font-size: 0.9rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}
.topbar summary.avatar::-webkit-details-marker { display: none; }
.acct-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    color: var(--text);
}
.acct-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 8px 8px 10px;
    border-bottom: 1px solid var(--line);
}
.acct-av {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
}
.acct-who { display: flex; flex-direction: column; min-width: 0; }
.acct-who strong { overflow-wrap: anywhere; }
.acct-who small { color: var(--muted); }
.acct-panel a,
.acct-panel a:visited {
    display: flex;
    padding: 10px;
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
.acct-panel a:hover { background: var(--bg); }
.acct-panel form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.acct-panel button.acct-out {
    width: 100%;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--bad);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.acct-panel button.acct-out:hover { background: var(--bg); }

.pf-facts {
    margin: 0 0 6px;
    padding: 2px 16px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.pf-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.pf-fact:last-child { border-bottom: 0; }
.pf-fact dt { color: var(--muted); font-size: 0.9rem; }
.pf-fact dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.pf-flabel { display: block; margin: 14px 0 -4px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.pf-form .login-field input[readonly] { opacity: 0.8; }
.pf-lock { display: inline-flex; flex-shrink: 0; color: var(--muted); }
.pf-lock svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-field-error { margin: 4px 0 0; color: var(--bad); font-size: 0.85rem; }
.pf-form .login-btn { margin-top: 18px; }

button[data-reveal-input] .icon-eye-off { display: none; }
button[data-reveal-input][aria-pressed="true"] .icon-eye { display: none; }
button[data-reveal-input][aria-pressed="true"] .icon-eye-off { display: inline; }

/* ---------- Profile: hide and show phone, email and balance ---------- */

.pf-fact dd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.fv-mask { display: none; letter-spacing: 1px; }
html.hide-phone .js-phone .fv-real,
html.hide-email .js-email .fv-real { display: none; }
html.hide-phone .js-phone .fv-mask,
html.hide-email .js-email .fv-mask { display: inline; }

main.page .pf-fact button.fact-eye {
    display: inline-flex;
    flex-shrink: 0;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    line-height: 0;
    cursor: pointer;
}
main.page .pf-fact button.fact-eye svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
main.page .pf-fact button.fact-eye .icon-eye { display: none; }
main.page .pf-fact button.fact-eye[aria-pressed="true"] .icon-eye { display: inline; }
main.page .pf-fact button.fact-eye[aria-pressed="true"] .icon-eye-off { display: none; }

/* The same choice also covers the fields in "Your details" */
html.hide-phone input[data-hide="phone"],
html.hide-email input[data-hide="email"] { -webkit-text-security: disc; text-security: disc; }
@supports not (-webkit-text-security: disc) {
    html.hide-phone input[data-hide="phone"],
    html.hide-email input[data-hide="email"] { filter: blur(6px); }
}

/* ---------- Tasks: types, cards, task page ---------- */

.type-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.chip,
.chip:visited {
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.chip.on { border-color: var(--brand); background: var(--brand); color: #fff; }

.type-pill {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.task-card .desc { margin: 6px 0; }
.task-card.is-full { opacity: 0.75; }
.places { margin: 8px 0 10px; }
.places-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.places-bar span { display: block; height: 100%; background: var(--accent); }
.places-text { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; }
.btn.is-disabled { pointer-events: none; opacity: 0.6; }
.badge.draft { background: var(--bg); color: var(--muted); }

.back-link { margin: 4px 0 10px; }
.task-head h1 { margin: 0; font-size: 1.25rem; }
.instructions p { margin: 0 0 10px; overflow-wrap: anywhere; }
.instructions ul { margin: 0 0 10px; padding-left: 20px; }
.instructions li { margin-bottom: 4px; }
.link-box .link-site { margin: 2px 0 10px; font-weight: 700; overflow-wrap: anywhere; }
.link-actions { display: flex; flex-wrap: wrap; gap: 8px; }

button.btn-secondary {
    width: auto;
    margin: 0;
    padding: 11px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}
button.link-danger {
    width: auto;
    margin: 14px 0 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bad);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.method-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.method-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    font-weight: 600;
    cursor: pointer;
}
.method-opt:has(input:checked) { border-color: var(--brand); background: var(--brand); color: #fff; }
.method-opt input { accent-color: var(--accent); }
[data-method-panel][hidden] { display: none; }
.answer-form textarea {
    width: 100%;
    min-height: 260px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}
.editor-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; }
.wc.bad { color: var(--bad); font-weight: 700; }
.save-state { margin-left: auto; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.answer-actions button.primary { flex: 1 1 180px; margin: 0; }
.answer-actions button.btn-secondary { flex: 1 1 140px; }
.answer-text { overflow-wrap: anywhere; }
.answer-img { max-width: 100%; border-radius: var(--radius); }

/* ---------- My tasks card and list ---------- */

a.card.my-tasks-card,
a.card.my-tasks-card:visited {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text);
    text-decoration: none;
}
.my-tasks-card span { color: var(--muted); font-size: 0.85rem; }
.my-tasks-card .go { color: var(--brand); font-weight: 700; }
.data-table a.status,
.data-table a.status:visited { text-decoration: none; }
.status.draft { color: var(--muted); }

/* ---------- Articles: list, editor ---------- */

.art-banner p { margin: 6px 0 0; }
.art-clock { color: var(--muted); font-weight: 700; }
.art-rules ul { margin: 6px 0 12px; padding-left: 20px; }
.art-rules li { margin-bottom: 4px; }

.art-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.art-row input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
.art-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.art-main a,
.art-main a:visited { color: var(--text); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.art-main small { color: var(--muted); }
.art-status {
    flex-shrink: 0;
    max-width: 46%;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}
.art-status.ready,
.art-status.accepted { background: rgba(21, 128, 61, 0.14); color: #15803d; }
.art-status.submitted { background: rgba(37, 99, 235, 0.14); color: #2563eb; }
.art-count { margin: 4px 0 10px; color: var(--muted); font-size: 0.85rem; }
.art-batch button.primary { width: 100%; }
.art-batch button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.art-form label { display: block; margin: 12px 0 4px; font-weight: 600; }
.art-form input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font: inherit;
}
.rt-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; }
button.rt-btn {
    width: auto;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--card);
    box-shadow: none;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
button.rt-btn:active { background: var(--bg); }
.rt-editor {
    min-height: 320px;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.rt-editor:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.rt-editor:empty::before { content: attr(data-placeholder); color: var(--muted); }
.article-body h2 { margin: 16px 0 6px; font-size: 1.2rem; }
.article-body h3 { margin: 14px 0 6px; font-size: 1.05rem; }
.article-body p { margin: 0 0 12px; }
.article-body ul, .article-body ol { margin: 0 0 12px; padding-left: 22px; }
.article-body blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.article-body a { color: var(--brand); }
.ready-state { color: var(--muted); }
.ready-state.ok { color: #15803d; font-weight: 700; }

/* ---------- Articles: facts cards ---------- */

.art-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.art-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.art-fact.wide { grid-column: 1 / -1; }
.af-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.art-fact strong { font-size: 1rem; overflow-wrap: anywhere; }
.af-note { color: var(--muted); font-size: 0.78rem; }
.af-text { font-size: 0.9rem; line-height: 1.45; }
.art-write { display: block; margin: 0 0 6px; text-align: center; }
@media (max-width: 380px) {
    .art-fact { padding: 10px 8px; }
    .art-fact strong { font-size: 0.92rem; }
}

/* ---------- Articles: save bar and reader ---------- */

.article-body h1 { margin: 18px 0 8px; font-size: 1.4rem; line-height: 1.3; }
.rt-btn u { text-decoration: underline; }

.art-savebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--card);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
body:has(.bnav) .art-savebar { bottom: 64px; padding-bottom: 10px; }
.art-savemeta { display: flex; flex-direction: column; min-width: 0; font-size: 0.82rem; }
.art-savemeta .wc { font-weight: 700; }
.art-savemeta .save-state { margin-left: 0; }
button.primary.art-savebtn { width: auto; flex-shrink: 0; margin: 0; padding: 11px 22px; }
.art-savespace { height: 150px; }

.read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 3px; }
.read-progress span { display: block; width: 0; height: 100%; background: var(--accent); }
.read-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.read-tools-label { margin-right: auto; color: var(--muted); font-size: 0.85rem; }
.read-toc { margin-bottom: 12px; }
.read-toc[hidden] { display: none; }
.read-toc-links { display: flex; flex-direction: column; gap: 6px; }
.read-toc-links a,
.read-toc-links a:visited { color: var(--brand); text-decoration: none; overflow-wrap: anywhere; }
.read-toc-links a.sub { padding-left: 14px; }
.reader { max-width: 68ch; margin-left: auto; margin-right: auto; font-size: var(--read-size, 1.05rem); line-height: 1.8; }
.reader p { margin: 0 0 1.1em; }
.reader h1, .reader h2, .reader h3 { scroll-margin-top: 70px; line-height: 1.3; }
html { scroll-behavior: smooth; }
.to-top {
    position: fixed;
    right: 14px;
    bottom: 20px;
    z-index: 46;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: var(--shadow);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
body:has(.bnav) .to-top { bottom: 84px; }
.to-top[hidden] { display: none; }

/* ---------- Articles: library, publishing and public page ---------- */

.art-card { margin-bottom: 10px; padding: 14px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.art-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.art-card-title,
.art-card-title:visited { color: var(--text); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.art-card-meta { margin: 6px 0 10px; color: var(--muted); font-size: 0.85rem; }
.art-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.art-card-actions form { margin: 0; }
a.btn-secondary,
a.btn-secondary:visited {
    display: inline-block;
    padding: 11px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}
.art-all { display: block; margin: 12px 0; text-align: center; }

.pub-pill { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.pub-pill.live { background: rgba(21, 128, 61, 0.14); color: #15803d; }
.pub-pill.waiting { background: rgba(37, 99, 235, 0.14); color: #2563eb; }
.pub-pill.down { background: rgba(185, 28, 28, 0.14); color: var(--bad); }

.pub-card p { margin: 6px 0 10px; }
.pub-link input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; }
.pub-card .link-actions { margin-bottom: 10px; }
.publish-row { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; font-size: 0.9rem; }
.publish-row input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); }

.public-wrap { max-width: 760px; margin: 0 auto; padding: 16px 16px 56px; }
.public-brand { margin: 4px 0 14px; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; }
.public-wrap h1 { margin: 0 0 6px; line-height: 1.25; overflow-wrap: anywhere; }

/* ---------- Articles: private or public at submit ---------- */

.art-batch .art-row { flex-wrap: wrap; }
.art-vis { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 6px; padding-left: 30px; }
.vis-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.vis-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vis-opt:has(input:checked) { border-color: var(--brand); background: var(--brand); color: #fff; }
.vis-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Articles: pinned toolbar ---------- */

.rt-toolbar {
    position: sticky;
    top: var(--tb-offset, 0px);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 8px;
    padding: 8px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
@media (max-width: 767px) {
    .rt-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .rt-toolbar::-webkit-scrollbar { display: none; }
    .rt-toolbar .rt-btn { flex: 0 0 auto; }
}
html:has(#article-editor) { scroll-padding-top: 110px; scroll-padding-bottom: 150px; }

/* ---------- Articles: public page, version 2 ---------- */

.public-body { background: var(--bg); color: var(--text); }
.pub-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 18px 0;
}
.pub-top .public-brand { margin: 0; font-weight: 800; letter-spacing: 0.02em; }
.pub-top .read-tools { margin: 0; }
.public-wrap { max-width: 720px; padding: 6px 18px 72px; }

.pub-head { margin: 18px 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pub-head h1 {
    margin: 0 0 16px;
    font-size: clamp(1.7rem, 6.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.pub-byline { display: flex; align-items: center; gap: 12px; }
.pub-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
}
.pub-who { display: flex; flex-direction: column; min-width: 0; }
.pub-who .by { font-weight: 700; overflow-wrap: anywhere; }
.pub-meta { color: var(--muted); font-size: 0.85rem; }

.pub-article .reader {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: var(--read-size, 1.1rem);
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.pub-article .reader.serif { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; }
.pub-article .reader p { margin: 0 0 1.25em; }
.pub-article .reader h1 { margin: 1.8em 0 0.5em; font-size: 1.7em; line-height: 1.25; }
.pub-article .reader h2 { margin: 1.7em 0 0.5em; font-size: 1.4em; line-height: 1.3; }
.pub-article .reader h3 { margin: 1.5em 0 0.4em; font-size: 1.15em; line-height: 1.3; }
.pub-article .reader ul, .pub-article .reader ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.pub-article .reader li { margin-bottom: 0.4em; }
.pub-article .reader blockquote {
    margin: 1.5em 0;
    padding: 0.2em 0 0.2em 1em;
    border-left: 4px solid var(--accent);
    color: var(--muted);
    font-style: italic;
}
.pub-article .reader a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.pub-article .read-toc {
    margin: 0 0 24px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.pub-article .read-toc summary { cursor: pointer; font-weight: 700; }
.pub-article .read-toc[hidden] { display: none; }
.pub-article .read-toc-links { margin-top: 10px; }

.pub-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.pub-foot p { margin: 0 0 12px; }

/* ---------- Surveys: list, page and questions ---------- */

.bnav a { position: relative; }
.nav-dot {
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 2px var(--card);
}
.qa-tile { position: relative; }
.qa-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}
a.card.new-surveys-card,
a.card.new-surveys-card:visited {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 4px solid var(--accent);
    color: var(--text);
    text-decoration: none;
}
.new-surveys-card span { color: var(--muted); font-size: 0.85rem; }

.sv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin: 0 0 12px; }
.sv-stat { display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.sv-stat.wide { grid-column: 1 / -1; }
.sv-stat span { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.sv-stat strong { font-size: 1.15rem; }

.sv-title a,
.sv-title a:visited { color: var(--text); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.sv-pill { display: inline-block; margin: 4px 6px 0 0; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.sv-pill.open, .sv-pill.approved { background: rgba(21, 128, 61, 0.14); color: #15803d; }
.sv-pill.started, .sv-pill.pending { background: rgba(37, 99, 235, 0.14); color: #2563eb; }
.sv-pill.failed { background: rgba(185, 28, 28, 0.14); color: var(--bad); }
.sv-pill.new { background: var(--accent); color: #1b1426; }
.sv-fill { min-width: 84px; }
.sv-fill .places-bar { margin-bottom: 4px; }
.sv-fill small { color: var(--muted); }

.sv-result strong { display: block; margin-bottom: 4px; }
.sv-result p { margin: 4px 0 0; }
.sv-result.passed { border-left: 4px solid #15803d; }
.sv-result.failed { border-left: 4px solid var(--bad); }
.sv-result.waiting { border-left: 4px solid #2563eb; }

.sv-top { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.sv-q { color: var(--muted); font-weight: 700; }
.sv-clock { padding: 4px 12px; border-radius: 999px; background: var(--bg); font-variant-numeric: tabular-nums; font-weight: 800; }
.sv-clock.low { background: rgba(185, 28, 28, 0.14); color: var(--bad); }
.sv-text { margin: 18px 0 14px; font-size: 1.3rem; line-height: 1.35; overflow-wrap: anywhere; }
.sv-choices { display: flex; flex-direction: column; gap: 10px; }
.sv-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    font-weight: 600;
    cursor: pointer;
}
.sv-choice input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
.sv-choice:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.sv-actions { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.sv-actions button.primary { flex: 1 1 auto; margin: 0; }

/* ---------- Surveys: outside surveys ---------- */

.sv-form label { display: block; margin: 4px 0; font-weight: 600; }
.sv-form input[type="text"] {
    width: 100%;
    margin: 6px 0;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font: inherit;
}
.sv-form button.primary { width: 100%; }

/* ---------- Student pages: links, hide-eyes, articles layout ---------- */

/* Plain links are not underlined or default blue. Links inside written text keep their underline. */
:where(main.page a:not([class])) { color: var(--brand); font-weight: 600; text-decoration: none; }
:where(.instructions, .article-body, .reader, .terms-card) a:not([class]) { text-decoration: underline; font-weight: inherit; }
.back-link a,
.back-link a:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}
.back-link a:hover { color: var(--brand); }

/* Numbers that can be hidden with an eye */
.hv-mask { display: none; letter-spacing: 1px; }
.pf-facts.art-figures,
.pf-facts.sv-facts { margin-bottom: 12px; }

/* Articles: how it works */
.art-howto { margin-bottom: 12px; }
.art-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.art-step { display: flex; gap: 10px; padding: 10px; border-radius: var(--radius); background: var(--bg); }
.art-step-n {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
}
.art-step strong { display: block; font-size: 0.9rem; }
.art-step-t { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
@media (max-width: 520px) { .art-steps { grid-template-columns: 1fr; } }

/* Articles: the submit window */
.art-window {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 14px 16px;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.art-window.wait { border-left-color: #2563eb; }
.art-window.full,
.art-window.paused { border-left-color: var(--bad); }
.aw-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.aw-title { font-size: 1rem; overflow-wrap: anywhere; }
.aw-sub { margin: 0; color: var(--muted); font-size: 0.85rem; }
.aw-clock { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 2px; }
.aw-clock-label { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.aw-time { padding: 4px 12px; border-radius: 999px; background: var(--bg); font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
@media (max-width: 420px) {
    .art-window { flex-direction: column; align-items: flex-start; }
    .aw-clock { flex-direction: row; align-items: center; gap: 8px; }
}

/* The three small facts look like the small cards on Home */
.art-facts .art-fact.stat-card { padding: 12px; }

/* Articles: tables and filters */
.art-table td { vertical-align: top; }
.art-cell a,
.art-cell a:visited { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.art-cell small,
.art-state-cell small { display: block; color: var(--muted); font-size: 0.8rem; }
.art-cell .pub-pill { margin: 4px 0 0; }
.art-actions { min-width: 150px; }
.art-actions form { display: inline; margin: 0; }
.art-actions a.btn-secondary,
.art-actions button.btn-secondary {
    display: inline-block;
    width: auto;
    margin: 0 6px 6px 0;
    padding: 6px 12px;
    font-size: 0.8rem;
}
.art-filters { margin-bottom: 8px; }
.art-filter-box { margin-top: 8px; }
.art-filter-box summary { cursor: pointer; font-weight: 700; }
.art-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 0 0; }
.art-filter-row label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 0.8rem; }
.art-filter-row input[type="date"],
.art-filter-row select {
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font: inherit;
}

/* Surveys: the next step on each row */
.sv-title a.sv-act,
.sv-title a.sv-act:visited {
    display: inline-block;
    margin: 4px 0 0 6px;
    color: var(--brand);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Articles hub, version 3 ---------- */

.art-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.art-head h1 { margin: 0; }
a.btn.art-write-top,
a.btn.art-write-top:visited { width: auto; margin: 0; padding: 9px 14px; font-size: 0.85rem; white-space: nowrap; }

.art-nav { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); }
a.art-nav-link,
a.art-nav-link:visited {
    flex: 1 1 0;
    padding: 8px 6px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
a.art-nav-link.on,
a.art-nav-link.on:visited { background: var(--brand); color: #fff; }

.art-brief { margin-bottom: 10px; padding: 12px 14px; }
.art-brief p { margin: 0 0 4px; }
.art-brief-line { font-size: 0.95rem; }
.art-brief-sub { color: var(--muted); font-size: 0.85rem; }
.art-brief-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
}
.abs-text { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }

.art-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.art-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 34px 10px 12px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}
.am-label { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.am-value { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
main.page .art-mini button.am-eye {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    line-height: 0;
    cursor: pointer;
}
main.page .art-mini button.am-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.am-eye .icon-eye { display: none; }
.am-eye[aria-pressed="true"] .icon-eye { display: inline; }
.am-eye[aria-pressed="true"] .icon-eye-off { display: none; }
.art-brief-status .aw-time { flex-shrink: 0; }

/* ---------- Hide rows, compact and tap anywhere ---------- */

.hv-rows { margin: 0 0 10px; padding: 0 14px; }
.hv-rows .pf-fact { padding: 7px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hv-rows .pf-fact dt { font-size: 0.85rem; }
.hv-rows .pf-fact dd { font-size: 0.95rem; }
main.page .hv-rows .pf-fact button.fact-eye { padding: 0 2px; }
/* No eye until the number is hidden. Then the eye shows. */
main.page .hv-rows .pf-fact button.fact-eye .icon-eye-off { display: none; }
main.page .hv-rows .pf-fact button.fact-eye[aria-pressed="true"] .icon-eye { display: inline; }

/* Home: the whole card is a tap target */
.tap-hide { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------- Appearance: theme and font size ---------- */

/* Theme, chosen on the Appearance page. Match my phone uses no override. */
html[data-theme="light"] {
    color-scheme: light;
    --brand: #3b1f5c;
    --brand-deep: #24103c;
    --accent: #f2b33d;
    --link: #5b2c9a;
    --bg: #f7f5fa;
    --card: #ffffff;
    --text: #1b1426;
    --muted: #6e6680;
    --line: #e7e2ee;
    --line-strong: #d4cce0;
    --good: #15803d;
    --good-bg: #dcfce7;
    --bad: #b91c1c;
    --bad-bg: #fee2e2;
    --warn: #92400e;
    --warn-bg: #fef3c7;
    --info: #1d4ed8;
    --info-bg: #dbeafe;
    --ok: #3b1f5c;
    --ok-bg: #fdf0d5;
    --ok-edge: #f2b33d;
    --caution: #c2410c;
    --caution-bg: #ffedd5;
    --teal: #0f766e;
    --amber: #c98a1b;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] {
    color-scheme: dark;
    --brand: #2f6f8f;
    --brand-deep: #1b4257;
    --link: #81d4fa;
    --bg: #121212;
    --card: #1e1e1e;
    --text: #eeeeee;
    --muted: #b3b3b3;
    --line: #2c2c2c;
    --line-strong: #3d3d3d;
    --good: #4ade80;
    --good-bg: #12351f;
    --bad: #f87171;
    --bad-bg: #3b1620;
    --warn: #fbbf24;
    --warn-bg: #3a2d0f;
    --info: #60a5fa;
    --info-bg: #12263f;
    --ok: #f2b33d;
    --ok-bg: #2e2510;
    --ok-edge: #f2b33d;
    --caution: #fb923c;
    --caution-bg: #3b1d0c;
}

/* Font size: the whole site scales from the page size */
html[data-font="default"] { font-size: 100%; }
html[data-font="medium"] { font-size: 112.5%; }
html[data-font="large"] { font-size: 125%; }

/* The Appearance page */
.ap-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ap-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    cursor: pointer;
}
.ap-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ap-opt:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.ap-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-opt small { color: var(--muted); font-size: 0.8rem; }
.ap-aa { font-weight: 800; line-height: 1.1; }
.ap-aa-default { font-size: 1em; }
.ap-aa-medium { font-size: 1.2em; }
.ap-aa-large { font-size: 1.4em; }
.ap-status { min-height: 1.2em; color: var(--muted); font-size: 0.85rem; }
.ap-preview p { margin: 6px 0; }
/* ---------- Smooth feel: buttons, page changes, autofill ---------- */

/* No grey or blue box when something is touched. Keyboard users still see where they are. */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Buttons and tappable things move smoothly */
:where(button, .btn, a.btn, .btn-secondary, .primary, .login-btn, .chip, .art-nav-link, .qa-tile, .more-row,
       a.card, .vis-opt, .ap-opt, .method-opt, .sv-choice, .bnav a, .acct-panel a, .rt-btn, .fact-eye) {
    transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
    :where(a.btn, .btn-secondary, button.primary, .login-btn, .qa-tile, .more-row, a.card,
           .vis-opt, .ap-opt, .method-opt, .sv-choice):hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }
    :where(.art-nav-link, .chip, .bnav a, .acct-panel a):hover {
        background-color: color-mix(in srgb, var(--brand) 10%, transparent);
    }
}
:where(button, .btn, a.btn, .btn-secondary, .primary, .login-btn, .chip, .art-nav-link, .qa-tile, .more-row,
       a.card, .vis-opt, .ap-opt, .method-opt, .sv-choice, .bnav a, .acct-panel a, .rt-btn, .tap-hide,
       .hv-rows .pf-fact):active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}
:where(button:disabled, [aria-disabled="true"]):active { transform: none; }

/* Pages change smoothly. Anything fixed to the screen is never moved. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 200ms; }

    main.page > :not(.art-form) { animation: tl-rise 300ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
    main.page > .art-form { animation: tl-fade 240ms ease-out backwards; }
    main.page > :nth-child(2) { animation-delay: 30ms; }
    main.page > :nth-child(3) { animation-delay: 60ms; }
    main.page > :nth-child(4) { animation-delay: 90ms; }
    main.page > :nth-child(n+5) { animation-delay: 110ms; }
}
@keyframes tl-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes tl-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    :where(a, button, .tap-hide, .hv-rows .pf-fact):hover,
    :where(a, button, .tap-hide, .hv-rows .pf-fact):active { transform: none; }
}

/* Autofilled fields look like every other field, with no grey or blue rectangle */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill { background-color: transparent; color: inherit; }

/* Sign-in fields: no box around the field, the underline lights up instead */
.login-field input:focus { outline: none; box-shadow: none; }
.login-field input:focus,
.login-field:focus-within { border-bottom-color: var(--brand); }

/* ---------- Click feedback and sliding pages ---------- */

/* A thin bar across the top shows that the next page is on its way */
#tl-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483000;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
html.tl-navigating #tl-nav-bar { opacity: 1; }
#tl-nav-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 0 3px 3px 0;
    background: var(--accent, var(--primary, #c98a1b));
    box-shadow: 0 0 10px var(--accent, var(--primary, #c98a1b));
}
html.tl-navigating #tl-nav-bar span { animation: tl-nav-run 14s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
@keyframes tl-nav-run {
    0% { width: 0; }
    12% { width: 38%; }
    45% { width: 68%; }
    100% { width: 93%; }
}

/* The thing that was clicked stays softly highlighted until the next page arrives */
.tl-pressed {
    pointer-events: none;
    transform: scale(0.97);
    animation: tl-pulse 0.9s ease-in-out infinite !important;
}
@keyframes tl-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
:where(button, a.btn, .btn-secondary, .login-btn, .primary, .button).tl-pressed::after {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.55em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.12em;
    animation: tl-spin 0.7s linear infinite;
}
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* Pages slide in from the right. The next page comes in from the left when going back. */
@keyframes tl-slide {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}
@keyframes tl-vt-out { to { opacity: 0; transform: translateX(-30px); } }
@keyframes tl-vt-in { from { opacity: 0; transform: translateX(40px); } }
@keyframes tl-vt-out-back { to { opacity: 0; transform: translateX(30px); } }
@keyframes tl-vt-in-back { from { opacity: 0; transform: translateX(-40px); } }

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: 160ms cubic-bezier(0.4, 0, 0.6, 1) both tl-vt-out; }
    ::view-transition-new(root) { animation: 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both tl-vt-in; }
    html.nav-back::view-transition-old(root) { animation-name: tl-vt-out-back; }
    html.nav-back::view-transition-new(root) { animation-name: tl-vt-in-back; }
}
@media (prefers-reduced-motion: reduce) {
    .tl-pressed { animation: none !important; opacity: 0.65; }
    html.tl-navigating #tl-nav-bar span { animation: none; width: 60%; }
    :where(button, a.btn, .btn-secondary, .login-btn, .primary, .button).tl-pressed::after { animation: none; }
}
/* Student pages: the bars stay put while the content slides */
@media (prefers-reduced-motion: no-preference) {
    .topbar { view-transition-name: tl-topbar; }
    .bnav { view-transition-name: tl-bnav; }

    main.page > :not(.art-form) { animation: tl-slide 240ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
    main.page > :is(.terms-back, .to-top, .viewas-bar, .read-progress) { animation: none; }
    /* Browsers that slide the whole page do not also slide the blocks */
    html.has-vt main.page > * { animation: none; }
}

/* ---------- Strong press color ---------- */

@keyframes tl-pulse {
    0%, 100% {
        box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--press-color, var(--accent, #c98a1b)) 26%, transparent),
                    0 0 0 3px color-mix(in srgb, var(--press-color, var(--accent, #c98a1b)) 65%, transparent);
    }
    50% {
        box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--press-color, var(--accent, #c98a1b)) 36%, transparent),
                    0 0 0 6px color-mix(in srgb, var(--press-color, var(--accent, #c98a1b)) 28%, transparent);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tl-pressed {
        animation: none !important;
        box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--press-color, var(--accent, #c98a1b)) 26%, transparent),
                    0 0 0 3px color-mix(in srgb, var(--press-color, var(--accent, #c98a1b)) 65%, transparent) !important;
    }
}
/* While a finger is down, the thing pressed fills with its colour and gets a ring */
:where(.qa-tile, .more-row, a.card, a.btn, .btn-secondary, button.primary, .login-btn, .chip, .art-nav-link,
       .bnav a, .acct-panel a, .vis-opt, .ap-opt, .method-opt, .sv-choice, .tap-hide, .hv-rows .pf-fact,
       .rt-btn, .sv-act):active {
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--press-color, var(--accent, #c98a1b)) 26%, transparent),
                0 0 0 3px color-mix(in srgb, var(--press-color, var(--accent, #c98a1b)) 65%, transparent) !important;
}
:where(.more-row, a.card, .chip, .art-nav-link, .bnav a, .acct-panel a, .vis-opt, .ap-opt, .method-opt,
       .sv-choice, .tap-hide, .hv-rows .pf-fact) { --press-color: var(--brand, #4b2e83); }
:where(a.btn, .btn-secondary, button.primary, .login-btn, .rt-btn, .sv-act) { --press-color: var(--accent, #c98a1b); }
.qa-tile:has(.tint-green) { --press-color: #15803d; }
.qa-tile:has(.tint-blue) { --press-color: #2563eb; }
.qa-tile:has(.tint-purple) { --press-color: #7c3aed; }
.qa-tile:has(.tint-amber) { --press-color: #c98a1b; }
.qa-ico { transition: transform 0.18s ease; }
.qa-tile:active .qa-ico,
.qa-tile.tl-pressed .qa-ico { transform: scale(1.12); }

/* ---------- Round card, version 2 ---------- */

.aw-facts { display: grid; gap: 2px; margin: 6px 0 4px; }
.aw-facts div { display: flex; gap: 8px; font-size: 0.9rem; }
.aw-facts dt { min-width: 86px; color: var(--muted); }
.aw-facts dd { margin: 0; font-weight: 700; }

/* ---------- Ready list, compact ---------- */

main.page .art-batch .art-row { flex-wrap: nowrap; gap: 8px; margin-bottom: 6px; padding: 8px 10px; }
.art-pick[hidden] { display: none; }
.art-batch .art-main a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-batch .art-main small { font-size: 0.75rem; }
.art-batch .art-vis {
    display: inline-flex;
    flex: 0 0 auto;
    flex-basis: auto;
    flex-wrap: nowrap;
    gap: 0;
    padding-left: 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    overflow: hidden;
}
.art-batch .vis-opt { padding: 3px 9px; border: 0; border-radius: 0; font-size: 0.72rem; }
.art-row:has(input[type="checkbox"]:disabled) { opacity: 0.55; }

.art-find {
    width: 100%;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font: inherit;
}
.art-more { width: 100%; margin: 4px 0 8px; }
.art-more[hidden] { display: none; }

/* The count and the Submit button stay in view, so there is nothing to scroll to */
.art-batch .art-batchbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--card);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
body:has(.bnav) .art-batch .art-batchbar { bottom: 64px; padding-bottom: 10px; }
.art-batchbar .art-count { margin: 0; font-weight: 700; }
.art-batch .art-batchbar button.primary { width: auto; margin: 0; padding: 11px 20px; }
.art-batch-space { height: 90px; }

/* The block holding the fixed bar must not be moved by the page animation */
@media (prefers-reduced-motion: no-preference) {
    main.page > form.art-batch { animation: tl-fade 200ms ease-out backwards; }
}

/* ---------- Live filters ---------- */

.art-filter-row input[type="text"] {
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font: inherit;
}
.art-filter-row a { align-self: center; }

/* ---------- Slim article rows ---------- */

main.page .art-table td { padding: 6px 8px; vertical-align: middle; }
main.page .art-table .art-cell a { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
main.page .art-table .art-cell small { display: inline; margin-left: 6px; }
main.page .art-table .art-state-cell small { display: block; }
.art-down { color: var(--bad); font-weight: 700; }
main.page .art-actions { min-width: 0; white-space: nowrap; }
main.page .art-actions .btn-secondary { display: inline-block; width: auto; margin: 0 6px 0 0; padding: 5px 10px; font-size: 0.78rem; }
main.page .art-actions .ico-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0 4px 0 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--card);
    color: var(--muted);
    vertical-align: middle;
}
main.page .art-actions .ico-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Editor save buttons ---------- */

.art-savebtns { display: inline-flex; flex: 1 1 auto; gap: 8px; min-width: 0; }
.art-savebtns > button { flex: 1 1 0; width: auto; min-width: 0; margin: 0; padding-left: 10px; padding-right: 10px; font-size: 0.85rem; white-space: nowrap; }

/* ---------- Confirm dialog ---------- */

.confirm-dialog { width: min(92vw, 420px); padding: 18px; border: 0; border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.confirm-dialog h2 { margin: 0 0 6px; }
.cd-list { margin: 8px 0; padding-left: 1.2em; max-height: 30vh; overflow: auto; }
.cd-actions { display: flex; gap: 10px; margin-top: 12px; }
.cd-actions button { flex: 1 1 0; width: auto; margin: 0; }

/* ---------- Articles overview, colour card ---------- */

main.page .art-brief {
    margin-bottom: 12px;
    padding: 16px;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #5b3fa6 0%, #3a2470 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(58, 36, 112, 0.28);
}
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ab-chip { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); }
.ab-chip.gold { background: var(--accent, #c98a1b); color: #1b1426; }
.ab-chip strong { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.ab-chip span { font-size: 0.78rem; font-weight: 600; }
main.page .art-brief .art-brief-line { margin: 0 0 4px; color: #fff; font-size: 1rem; }
main.page .art-brief .art-brief-sub { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; }
main.page .art-brief .art-brief-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.85rem;
}
.abs-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3); }
.art-brief-status.wait .abs-dot { background: #93c5fd; box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.3); }
.art-brief-status.full .abs-dot,
.art-brief-status.paused .abs-dot { background: #fca5a5; box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.3); }
main.page .art-brief .art-brief-status .abs-text { flex: 1 1 auto; }
main.page .art-brief .art-brief-status .aw-time { flex: 0 0 auto; background: rgba(255, 255, 255, 0.18); color: #fff; }

/* A calmer page: tighter rows and lighter headings */
main.page .art-figures { margin-bottom: 8px; }
main.page .section-divider { margin: 20px 0; }

/* ---------- Colours shared with the balance card ---------- */

main.page .art-brief {
    background: linear-gradient(135deg, var(--brand), #2a1247); !important
    box-shadow: var(--shadow); !important
}

/* ---------- Editor buttons, fitted ---------- */

.art-savebar { flex-wrap: wrap; }
.art-savebtns { flex: 1 1 100%; width: 100%; }
.art-savebtns > button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Back links you can see on every background */
body .back-link a:link,
body .back-link a:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
body .back-link a:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Article page header card ---------- */

main.page .art-headcard {
    background: linear-gradient(135deg, var(--brand), #2a1247); !important
    box-shadow: var(--shadow); !important
    border: 0;
    color: #fff;
}
main.page .art-headcard h1 { color: #fff; }
main.page .art-headcard .label { color: rgba(255, 255, 255, 0.82); }
.ah-by { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.85rem; font-weight: 700; }
.ah-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-weight: 800;
}

/* ---------- Editor buttons, equal ---------- */

main.page .art-savebar .art-savebtns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1 1 100%;
    width: 100%;
}
main.page .art-savebar .art-savebtns > button {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
}

/* ---------- Empty status ---------- */

.art-status:empty { display: none; }

/* ---------- Article cards, sharp ---------- */

main.page .art-headcard,
.pub-article .pub-headcard,
main.page .art-brief {
    background: linear-gradient(135deg, var(--brand), #2a1247); !important
    box-shadow: var(--shadow); !important
    position: relative;
    padding: 20px 18px !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff;
}
/* An inner frame, so the information looks padded inside the card */
main.page .art-headcard::before,
.pub-article .pub-headcard::before,
main.page .art-brief::before {
    content: '';
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    pointer-events: none;
}
main.page .art-headcard h1,
.pub-article .pub-headcard h1 { margin: 6px 0 14px; color: #fff; }
.pub-article .pub-headcard { margin: 18px 0 22px; }
.pub-article .pub-headcard .pub-who .by { color: #fff; }
.pub-article .pub-headcard .pub-meta { color: rgba(255, 255, 255, 0.8); }
.pub-article .pub-headcard .pub-avatar { background: rgba(255, 255, 255, 0.22); }
main.page .art-headcard .message { margin: 0 0 14px; }
main.page .art-headcard .ah-by .art-status { margin-left: auto; }

/* The facts, with a vertical line between each */
.ah-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.ah-strip div { padding: 0 12px; }
.ah-strip div:first-child { padding-left: 0; }
.ah-strip div + div { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.ah-strip dt { color: rgba(255, 255, 255, 0.7); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ah-strip dd { margin: 2px 0 0; color: #fff; font-size: 0.9rem; font-weight: 700; }
@media (max-width: 520px) {
    .ah-strip { grid-template-columns: 1fr 1fr; row-gap: 12px; }
    .ah-strip div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* The overview card: a vertical line before the countdown */
main.page .art-brief .art-brief-status .abs-text { padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.25); }
main.page .art-brief .art-brief-status.paused .abs-text { padding-right: 0; border-right: 0; }

/* ---------- Sharp cards everywhere ---------- */

main.page .task-head,
main.page .card.instructions,
main.page dl.pf-facts,
main.page .reason-card,
main.page .art-headcard,
main.page .art-brief {
    background: linear-gradient(135deg, var(--brand), #2a1247); !important
    box-shadow: var(--shadow); !important
    position: relative;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 22px 20px 28px !important;
    color: #fff;
}
main.page .task-head::before,
main.page .card.instructions::before,
main.page dl.pf-facts::before,
main.page .reason-card::before,
main.page .art-headcard::before,
main.page .art-brief::before,
.bal-card::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    pointer-events: none;
}
/* Home: only the balance card changes shape */
.bal-card { position: relative; border-radius: 4px !important; }

/* White text on the card */
main.page .task-head h1, main.page .task-head h2, main.page .task-head p,
main.page .card.instructions, main.page .card.instructions p, main.page .card.instructions li,
main.page .card.instructions strong, main.page .card.instructions h2 { color: #fff !important; }
main.page .task-head .label { color: rgba(255, 255, 255, 0.82) !important; }
main.page .task-head a, main.page .card.instructions a { color: #fff !important; text-decoration: underline; }
main.page .card.instructions { margin-bottom: 12px; }

/* The facts rows: thin lines between rows, white text, white eye */
main.page dl.pf-facts { padding: 10px 20px 16px !important; margin-bottom: 12px; }
main.page dl.pf-facts .pf-fact { border-color: rgba(255, 255, 255, 0.2) !important; }
main.page dl.pf-facts .pf-fact dt { color: rgba(255, 255, 255, 0.75) !important; }
main.page dl.pf-facts .pf-fact dd, main.page dl.pf-facts .pf-fact dd * { color: #fff !important; }
main.page dl.pf-facts .fact-eye { color: #fff !important; }

/* Reasons */
.rc-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7) !important; }
main.page .reason-card p, main.page .reason-card strong { margin: 4px 0 0; color: #fff !important; }
main.page .reason-card { margin: 0 0 12px; }

/* ---------- Calm summary rows and floating balance ---------- */

/* Home balance card: no line through it, and it floats */
.bal-card::before { content: none !important; display: none !important; }
.bal-card {
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), 0 6px 12px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-2px);
    margin-bottom: 18px;
}

/* Survey and article figures: plain rows on the screen, no card and no lines */
main.page dl.pf-facts.hv-rows {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    color: var(--text) !important;
}
main.page dl.pf-facts.hv-rows::before { content: none !important; display: none !important; }
main.page dl.pf-facts.hv-rows .pf-fact {
    border: 0 !important;
    padding: 4px 2px !important;
}
main.page dl.pf-facts.hv-rows .pf-fact dt { color: var(--muted) !important; font-size: 0.82rem; }
main.page dl.pf-facts.hv-rows .pf-fact dd,
main.page dl.pf-facts.hv-rows .pf-fact dd * { color: var(--text) !important; font-size: 0.9rem; }
main.page dl.pf-facts.hv-rows .fact-eye { color: var(--muted) !important; }

/* The Surveys heading and its short instructions are the card */
main.page .sv-headcard { margin-bottom: 12px; }
main.page .sv-headcard h1 { margin: 0 0 6px; }
main.page .sv-headcard .sv-hint { margin: 0; }

/* Not accepted: amber, not red, no sign, still clickable */
main.page .status.rejected,
main.page a.status.rejected:link,
main.page a.status.rejected:visited {
    background: color-mix(in srgb, #d97706 16%, transparent) !important;
    color: #b45309 !important;
    border-color: transparent !important;
}
main.page .status.rejected::before,
main.page .status.rejected::after { content: none !important; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) main.page .status.rejected,
    html:not([data-theme="light"]) main.page a.status.rejected:link,
    html:not([data-theme="light"]) main.page a.status.rejected:visited { color: #fbbf24 !important; }
}
html[data-theme="dark"] main.page .status.rejected,
html[data-theme="dark"] main.page a.status.rejected:link,
html[data-theme="dark"] main.page a.status.rejected:visited { color: #fbbf24 !important; }

/* ---------- Withdrawal confirm buttons ---------- */

main.page .wd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 16px; }
main.page .wd-actions > button,
main.page .wd-actions > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

/* ---------- Balance card, flat again ---------- */

/* No floating: same look as the other cards. The line through the card stays removed. */
html body .bal-card {
    box-shadow: var(--shadow) !important;
    transform: none !important;
    margin-bottom: 12px !important;
}

/* ---------- Filter pill ---------- */

main.page details.art-filter-box > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
main.page details.art-filter-box > summary::-webkit-details-marker { display: none; }
main.page details.art-filter-box > summary::marker { content: ''; }
main.page details.art-filter-box > summary::before {
    content: '';
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='22 3 2 3 10 12.5 10 19 14 21 14 12.5 22 3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='22 3 2 3 10 12.5 10 19 14 21 14 12.5 22 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
main.page details.art-filter-box[open] > summary { border-color: var(--brand); color: var(--brand); }

/* ---------- Receipt card ---------- */

.rc-rows { margin: 12px 0; }
.rc-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.rc-rows dt { color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; }
.rc-rows dd { margin: 0; color: #fff; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

/* ---------- Withdraw card ---------- */

main.page .wd-card h1 { margin: 4px 0 14px; font-size: 1.9rem; }
main.page .wd-card .ah-by { justify-content: space-between; }
main.page .wd-card .fact-eye { width: auto; min-height: 0; margin: 0; padding: 2px; border: 0; background: none; box-shadow: none; color: #fff; }
main.page .wd-card .fact-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
main.page .wd-card .icon-eye-off { display: none; }
main.page .wd-card .fact-eye[aria-pressed="true"] .icon-eye { display: none; }
main.page .wd-card .fact-eye[aria-pressed="true"] .icon-eye-off { display: inline; }
main.page .wd-card .label { margin: 12px 0 0; }

/* ---------- Tap to hide the number ---------- */

main.page .wd-card .wd-tap { position: relative; cursor: pointer; }
main.page .wd-card .wd-tapbtn {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 0;
    cursor: pointer;
}

/* ---------- Sign-up errors ---------- */

.signup-errors { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--bad); border-radius: var(--radius); background: color-mix(in srgb, var(--bad) 10%, var(--card)); color: var(--text); text-align: left; }
.signup-errors strong { display: block; margin-bottom: 6px; color: var(--bad); }
.signup-errors ul { margin: 0; padding-left: 1.2em; }
.signup-errors li { margin: 2px 0; }
.login-form .errorlist { margin: 6px 2px 0; padding: 0; list-style: none; color: var(--bad); font-size: 0.85rem; font-weight: 600; }
.login-group:has(.errorlist) .login-field { border-color: var(--bad); }
.sg-box { margin: 8px 2px 0; font-size: 0.85rem; }
.sg-box span { display: block; margin-bottom: 6px; color: var(--muted); }
.login-form .sg-pick {
    width: auto;
    min-height: 0;
    margin: 0 6px 6px 0;
    padding: 6px 12px;
    border: 1px solid var(--brand);
    border-radius: 999px;
    background: transparent;
    color: var(--brand);
    font-weight: 700;
    cursor: pointer;
}

/* ---------- Search above the keyboard ---------- */

main.page .wh-heading { margin: 22px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 1rem; }
main.page .live-search { position: relative; z-index: 1; margin-top: 0; }
main.page .live-search input[name="q"] { scroll-margin-top: 72px; }
/* Extra room at the bottom while typing, so the box can rise above the keyboard */
main.page:has(.live-search input:focus) { padding-bottom: 55vh; }

/* ---------- History line above the heading ---------- */

/* One complete line above the heading. No other line on the history section or the search box. */
main.page .wh-heading {
    margin: 22px 0 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line) !important;
    border-bottom: 0 !important;
}
main.page .wh-heading::before,
main.page .wh-heading::after,
main.page .withdraw-history::before,
main.page .withdraw-history::after { content: none !important; display: none !important; }
main.page .withdraw-history,
main.page .withdraw-history .live-search,
main.page .withdraw-first,
main.page .withdraw-first form {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* ---------- Space around the history line ---------- */

main.page .withdraw-history .live-search { padding-bottom: 16px; }
main.page .withdraw-history .live-search + * { margin-top: 18px; }

/* ---------- Claim message box ---------- */

main.page form.claim-form textarea {
    width: 100%;
    margin: 6px 0;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font: inherit;
    resize: vertical;
}

/* ---------- Tabs hide counts ---------- */

html.tl-hide-counts .chip-count { display: none; }
nav.type-chips button.chip-hide {
    border: 1px dashed var(--line-strong);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Earn: every way to earn, in one place */
main.page .earn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 24px; }
main.page a.earn-card { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--text); text-decoration: none; }
main.page .earn-ic { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: var(--info-bg); color: var(--info); }
main.page .earn-title { font-size: 1.05rem; font-weight: 700; }
main.page .earn-note { color: var(--muted); font-size: 0.875rem; }
main.page .earn-badge { align-self: flex-start; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--ok-bg); color: var(--ok); }
main.page .earn-badge.quiet { padding-left: 0; background: transparent; color: var(--muted); font-weight: 400; }
main.page .earn-mine-title { margin: 8px 0; font-size: 1.05rem; }
main.page .earn-mine { display: grid; gap: 8px; }
main.page .earn-mine a.card { display: block; margin: 0; color: var(--text); text-decoration: none; }

/* Tasko: the Available / My answers switch */
main.page .seg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 8px 0 16px; border-radius: 12px; background: rgba(127, 127, 127, 0.14); }
main.page a.seg-tab { display: block; padding: 10px 12px; border-radius: 9px; text-align: center; font-weight: 700; color: var(--muted); text-decoration: none; }
main.page a.seg-tab.on { background: var(--ok-bg); color: var(--ok); }

/* Earn: the Shop card with the student's promo code */
main.page .earn-shop-title { margin: 24px 0 8px; font-size: 1.05rem; }
main.page .earn-shop { display: flex; flex-direction: column; gap: 8px; margin: 0; }
main.page .earn-code { margin: 4px 0; text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: 0.2em; }
main.page .earn-shop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
main.page .earn-shop-actions .btn { margin: 0; text-align: center; }
main.page .earn-shop-link { color: var(--muted); text-decoration: none; }

/* Earn: the Shop card spans the full width; the Shop page buttons */
main.page a.earn-card.earn-wide { grid-column: 1 / -1; }
main.page .shop-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
main.page a.shop-hub-btn { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--text); text-decoration: none; }
main.page a.shop-hub-btn span { font-size: 0.85rem; color: var(--muted); }

/* Earn: the Shop card at the top, in its own gold colour */
main.page .earn-shopcard { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; background: linear-gradient(135deg, rgba(240, 180, 41, 0.22), rgba(240, 180, 41, 0.06)); border: 1px solid rgba(240, 180, 41, 0.5); }
main.page .earn-shop-head { display: flex; align-items: center; gap: 12px; }
main.page .earn-shop-titles { display: flex; flex: 1; flex-direction: column; min-width: 0; }
main.page .earn-shopcard .earn-badge { margin-top: 0; align-self: center; }
main.page .earn-codeline { display: flex; align-items: center; gap: 8px; }
main.page .earn-codechip { padding: 6px 12px; border-radius: 10px; font-weight: 800; letter-spacing: 0.15em; background: rgba(127, 127, 127, 0.15); }
main.page .earn-iconbtn { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; }
main.page .earn-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main.page .earn-iconbtn.done { border-color: var(--ok); color: var(--ok); }
main.page a.earn-mysales { display: block; margin: 0; text-align: center; }
main.page .earn-shop-actions.one { grid-template-columns: 1fr; }