/* =====================================================================
   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;
    --ge-ink: #101F46;

    /* The one success badge everywhere (10 Nov 2026: gold, not green) --
       change these two and every success tick/disc on the site follows. */
    --success-bg: #fef6e0;
    --success-ink: #a16207;

    /* 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;
        --ge-ink: #FFFFFF;
        --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;
    min-height: 64px;
    box-sizing: border-box;
    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 .link-button { text-decoration: none; }

.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: #f2b33d;
    color: #1b1426;
    font-weight: 600;
}
/* Success: the same gold as the notice board cards, with dark text */
.message.success { border-color: #f2b33d; }
.message.success .msg-ico { stroke: var(--success-ink); }
.message.success a { color: #1b1426; text-decoration: underline; }
.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,
main.page .dash-recent { margin-top: 16px; }
main.page .dash-discover .dsc-rail { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
main.page .dash-discover .dsc-rail::-webkit-scrollbar { display: none; }
main.page .dash-discover .dsc-rail a.dsc-card { flex: 0 0 calc((100% - 12px) / 1.5); min-width: 0; margin: 0; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
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; white-space: nowrap; }

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

/* Date and time on one line, the same size: 2026-11-04 02:01 */
.when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.when-time { margin-left: 0.35em; 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);
}

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

/* 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 notice: under the card, white, first lines then Show more ---------- */
main.page .wd-notice { margin: 0 0 14px; padding: 16px; border-radius: var(--radius); background: var(--card); color: var(--text); }
main.page .wd-notice-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--link); }
main.page .wd-notice-head .ic { width: 22px; height: 22px; }
main.page .wd-notice-head strong { font-size: 1rem; }
main.page .wd-notice-list { margin: 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.5; }
main.page .wd-notice-list li + li { margin-top: 4px; }
main.page .wd-notice.is-collapsed .wd-notice-list { max-height: 1.6em; overflow: hidden; -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.35), transparent); mask-image: linear-gradient(rgba(0, 0, 0, 0.35), transparent); }

/* ---------- Withdrawal done pop-up ---------- */
.wd-pop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; }
.wd-pop-scrim { position: absolute; inset: 0; background: rgba(15, 10, 25, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wd-pop-card { position: relative; width: 100%; max-width: 380px; padding: 28px 22px 22px; border-radius: var(--radius-lg); background: var(--card); color: var(--text); text-align: center; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); animation: wd-pop-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.wd-pop-x, .wd-pop-x:visited { position: absolute; top: 8px; right: 14px; color: var(--muted); font-size: 1.6rem; line-height: 1; text-decoration: none; }
.wd-pop-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success-bg); color: var(--success-ink); }
.wd-pop-ico .ic { width: 34px; height: 34px; stroke-width: 2; }
.wd-pop-card h2 { margin: 14px 0 4px; font-size: 1.15rem; }
.wd-pop-amount { margin: 0; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wd-pop-text { margin: 10px 0 20px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.wd-pop-text strong { color: var(--text); }
.wd-pop-actions { display: grid; gap: 10px; }
.wd-pop-actions .btn { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; font-weight: 700; text-decoration: none; }
@keyframes wd-pop-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .wd-pop-card { animation: none; } }
/* 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; flex-direction: column; align-items: center; gap: 14px; }

.login-title { margin: 22px 0 6px; font-size: 1.6rem; font-weight: 800; text-align: center; }
.login-sub { margin: 0 0 28px; color: var(--muted); text-align: center; }

/* 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 #08C9C2;
    color: #08C9C2;
}
.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: 8px;
    padding: 15px;
    border-radius: 12px;
    background: #08C9C2;
    color: #06202a;
    font-weight: 800;
    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: 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: var(--success-bg);
}
.pay-done-check svg { fill: none; stroke: var(--success-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* In progress: same size and spot as the success tick, brand-tinted, with a spinning ring */
.pay-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 10%, var(--card));
}
.pay-ring::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--brand);
    border-right-color: var(--brand);
    animation: pay-ring-spin 1.6s linear infinite;
}
.pay-ring svg { fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pay-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pay-ring::before { animation: none; } }
.pay-done .pf-note[data-slow] { margin-top: 14px; }
.pay-confirming .pay-done-lead { font-size: 0.95rem; }
.pay-confirming .btn, .pay-confirming form { margin-top: 14px; }
.pay-confirming form .btn { margin-top: 0; }
@keyframes activation-tick-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.pay-done-check.js-pop { animation: activation-tick-pop 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .pay-done-check.js-pop { animation: none; } }
.pay-done h1 { margin: 18px 0 6px; }
.pay-done-lead { margin: 0; font-size: 1.05rem; color: var(--muted); }
.pay-done-info { margin: 22px 0 0; text-align: center; }
.pay-done-info p { margin: 0 0 14px; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.pay-done-info p:last-child { margin-bottom: 0; }
.pay-done-info strong { color: var(--text); }
main.page a.activate-btn.pay-done-btn {
    margin-top: 28px;
    border-radius: var(--radius) !important;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
}
main.page a.activate-btn.pay-done-btn:hover { background: var(--brand-deep); }

/* Call/WhatsApp buttons: the one way of offering to contact customer care,
   shared by the success page, a rejected payment claim and a failed payment */
.contact-btns { display: flex; justify-content: center; gap: 8px; margin: 8px 0 0; }
a.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--brand);
    color: var(--brand);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}
a.contact-btn:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
a.contact-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
/* On the rejected-claim card (dark brand gradient) the buttons need light contrast instead */
main.page .reason-card .contact-btns { justify-content: flex-start; }
main.page .reason-card a.contact-btn { border-color: rgba(255, 255, 255, 0.55); color: #fff !important; }
main.page .reason-card a.contact-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* 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; }

/* Gistiva Enterprise "GE" mark: ink swaps with light/dark mode, accent stays brand turquoise */
.ge-mark { flex: 0 0 auto; display: block; }
.ge-mark .ge-ink { fill: var(--ge-ink); }
.ge-mark .ge-accent { fill: #08C9C2; }
.topbar .ge-mark .ge-ink { fill: #fff; }



/* ---------- 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 ---------- */

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


/* ---------- Top line: today's date and the time, one weight ---------- */
.greet { margin: 0 0 10px; }
.greet-hi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; color: var(--muted); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.greet-dot { opacity: .6; }
.greet-status { display: inline-flex; align-items: center; gap: 6px; }
.greet-live { width: 8px; height: 8px; border-radius: 50%; background: #f2b33d; box-shadow: 0 0 0 3px rgba(242, 179, 61, .22); }

/* ---------- Notice board: plain cards with a tiny soft-amber type tag, side by side on Home (scroll sideways) ---------- */
:root { --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.board { margin: 0 0 16px; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.board-head strong { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.board-tools { display: flex; align-items: center; gap: 8px; }
.board-tools form { margin: 0; }
main.page .board-tools .link-button { width: auto; min-height: 0; margin: 0; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); box-shadow: none; color: var(--link); font-size: 0.78rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
html.board-hidden .board-rail { display: none; }
html.board-hidden .board-tools [data-board-all] { display: none; }
main.page .board-tools .link-button.is-armed { border-color: var(--bad); color: var(--bad); }
/* Home shows the notifications side by side, the next one peeking in: scroll sideways with a finger or touchpad,
   or drag with the mouse (app.js). Cards in a row share one height; Dismiss and the time sit on the bottom line. */
.board-rail { display: flex; align-items: stretch; gap: 10px; margin: 0 0 4px; padding: 2px 2px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.board-rail::-webkit-scrollbar { display: none; }
.board-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.board-rail [data-board-card] { flex-basis: calc(100% - 28px); }
.board-rail [data-board-card]:only-child { flex-basis: 100%; }
.board-rail .board-body { display: flex; flex-direction: column; align-self: stretch; }
.board-rail .board-actions { margin-top: auto; padding-top: 8px; }
/* The type tag: tiny, soft amber (tlapp/notices/_tag.html) */
.nt-tag { display: inline-block; align-self: flex-start; max-width: 80%; overflow: hidden; margin: 0 0 5px; padding: 0 5px; border-radius: 4px; background: #faeeda; color: #854f0b; font-size: 0.68rem; font-weight: 700; line-height: 1rem; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .nt-tag { background: rgba(239, 159, 39, .16); color: #fac775; }
}
html[data-theme="dark"] .nt-tag { background: rgba(239, 159, 39, .16); color: #fac775; }
.nt-list article { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
[data-board-card][data-href] { cursor: pointer; }
.board-card { position: relative; display: flex; align-items: flex-start; gap: 12px; flex: 0 0 calc(100% - 44px); min-width: 0; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; color: var(--text); box-shadow: 0 1px 3px rgba(27, 20, 38, .06); scroll-snap-align: start; }
/* Swipe left to delete: a red strip shows behind the card while it moves */
.nt-swipe { position: relative; overflow: hidden; border-radius: var(--radius); background: transparent; }
.nt-swipe.is-swiping { background: var(--bad); }
.nt-swipe-label { display: none; }
.nt-swipe.is-swiping .nt-swipe-label { display: block; }
.nt-swipe-label { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); color: #fff; font-size: 0.85rem; font-weight: 700; }
.nt-swipe .board-card { position: relative; touch-action: pan-y; transition: transform .2s ease; will-change: transform; }
.nt-swipe .board-card.is-dragging { transition: none; }
.nt-swipe.is-gone { max-height: 0 !important; margin: 0; opacity: 0; transition: max-height .25s ease, opacity .25s ease; }
.board-card:only-child { flex-basis: 100%; }
.board-body { flex: 1; min-width: 0; }
.board-ago { color: var(--muted); font-size: 0.72rem; line-height: 1.3; white-space: nowrap; }
.board-body strong { display: -webkit-box; overflow: hidden; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.board-text { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 0.85rem; line-height: 1.45; overflow-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.board-card.is-open .board-text { display: block; }
main.page .board-more { display: inline-block; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--link); font-family: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
main.page .board-more[hidden] { display: none; }
.board-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.board-actions .board-ago { margin-left: auto; }
.board-close { display: flex; margin: 0; }
main.page .board-close button.is-armed { color: var(--bad); }
main.page .board-close button { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-family: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
main.page .message.success.msg-card .msg-ico { box-sizing: border-box; padding: 3px; border-radius: 50%; background: var(--success-bg); stroke: var(--success-ink); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .board-card { border-color: var(--line); background: var(--card); color: var(--text); box-shadow: none; }
}
html[data-theme="dark"] .board-card { border-color: var(--line); background: var(--card); color: var(--text); box-shadow: none; }

/* Premium headings: Plus Jakarta Sans for the greeting, section titles and big amounts */
.sec-head h2, .wd-pop-card h2 { font-family: var(--font-display); }

.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; }
/* Home's My Earnings card blurs its amounts instead of swapping them for dots */
html.hide-earnings .earn-blur .amount-value { filter: blur(0.42rem); user-select: none; }

.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 {
    position: relative;
    z-index: 1;
    margin: 6px 0 14px;
    font-size: clamp(1.5rem, 7.4vw, 1.85rem);
    font-weight: 700;
    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;
    top: 14px;
    right: 14px;
    width: 56px;
    height: 56px;
    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; }
}

/* Arrange mode on Home (switch is on, ?arrange=1): drag the tiles (tlSortable in instant.js) */
.qa-hint { margin: 0 0 10px; font-size: 0.8rem; color: var(--muted, inherit); }
.qa-tile.qa-drag {
    position: relative;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    outline: 1.5px dashed var(--line-strong);
    outline-offset: -2px;
    border-radius: var(--radius);
}
.qa-tile.qa-drag:focus-visible { outline: 2px solid var(--link); }
.qa-tile.qa-drag.is-dragging {
    z-index: 5;
    cursor: grabbing;
    pointer-events: none;
    background: var(--card);
    box-shadow: 0 10px 24px rgba(27, 20, 38, 0.22);
    outline-style: solid;
}
.qa-sorting.is-sorting .qa-tile:not(.is-dragging) { transition: transform 0.15s; }
.qa-status { min-height: 1.2em; margin: 8px 0 0; font-size: 0.8rem; }
.qa-add { display: grid; gap: 8px; margin-top: 10px; }
.qa-add form { display: flex; gap: 8px; align-items: center; margin: 0; }
.qa-add select { flex: 1 1 auto; width: auto; min-width: 0; }
.qa-add form button:not(.qa-reset) { flex: 0 0 auto; width: auto; margin: 0; padding: 10px 18px; }
.qa-add .qa-reset { width: 100%; }
.qa-add .qa-reset { background: none; border: 0; color: var(--link); font-weight: 600; padding: 6px 0; }
.ap-reorder { margin: 0 0 14px; }

.stat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 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-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.2rem);
    font-weight: 700;
    white-space: nowrap;
}
/* Money figures: the phone's own bold font, KES the same size and weight as the number */
.bal-amount, .stat-amount, .wd-pop-amount, main.page .wd-card h1, .ah-strip dd { font-variant-numeric: tabular-nums; }
/* Long amounts stay on one line: the figure just gets a little smaller, KES stays beside it */
.bal-amount.is-long, main.page .wd-card h1.is-long { font-size: clamp(1.3rem, 6.2vw, 1.55rem); }
.stat-amount.is-long { white-space: nowrap; font-size: clamp(0.66rem, 3.1vw, 0.95rem); letter-spacing: -0.01em; }
.stat-amount.is-long .cur { display: inline; }

/* ---------- Account overview card (dashboard + seller home) ---------- */
.card > .sec-head:first-child { margin-top: 0; }
.sec-head a.pill,
.sec-head a.pill:visited {
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
}
.sec-head a .ic { width: 16px; height: 16px; }
.acct-card .qa-tile,
.acct-card .qa-tile:visited { background: none; box-shadow: none; padding: 8px 4px; }
.acct-card .stat-grid { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.acct-card .stat-card { padding: 14px 12px; border: 0; box-shadow: none; border-radius: 10px; color: #1b1426; }
/* Light mode: white cards with a soft shadow all round */
.acct-card .stat-card.earn, .acct-card .stat-card.out { background: #ffffff; box-shadow: 0 4px 14px rgba(27, 20, 38, 0.10), 0 1px 3px rgba(27, 20, 38, 0.08); }
.acct-card .stat-card .stat-label, .acct-card .stat-card .stat-eye, .acct-card .stat-card .stat-sub { color: #5f5470; }
.acct-card .stat-card .stat-amount { color: #1b1426; }
/* Dark mode: the two totals take a faint shade of the balance card colour, so the balance card stays the main thing */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .acct-card .stat-card.earn,
    html:not([data-theme="light"]) .acct-card .stat-card.out { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, var(--card)), color-mix(in srgb, #2a1247 30%, var(--card))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, var(--card)); }
    html:not([data-theme="light"]) .acct-card .stat-card .stat-label, html:not([data-theme="light"]) .acct-card .stat-card .stat-eye, html:not([data-theme="light"]) .acct-card .stat-card .stat-sub { color: var(--muted); }
    html:not([data-theme="light"]) .acct-card .stat-card .stat-amount { color: var(--text); }
}
html[data-theme="dark"] .acct-card .stat-card.earn,
html[data-theme="dark"] .acct-card .stat-card.out { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, var(--card)), color-mix(in srgb, #2a1247 30%, var(--card))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, var(--card)); }
html[data-theme="dark"] .acct-card .stat-card .stat-label, html[data-theme="dark"] .acct-card .stat-card .stat-eye, html[data-theme="dark"] .acct-card .stat-card .stat-sub { color: var(--muted); }
html[data-theme="dark"] .acct-card .stat-card .stat-amount { color: var(--text); }

/* ---------- 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,
main.page .dash-earn 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,
main.page .dash-earn 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-doc { max-width: 760px; margin: 0 auto 18px; line-height: 1.6; }
.terms-doc h1 { margin-bottom: 4px; }
.terms-doc .terms-meta { margin: 0 0 18px; color: var(--muted); font-size: 0.85rem; }
.terms-doc h2 { margin: 22px 0 6px; font-size: 1.02rem; }
.terms-doc p { margin: 0 0 10px; font-size: 0.95rem; }

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: a back button that stays in view ---------- */

.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;
}
/* With a profile photo (tlapp/profile_views.py) the circles show it, with no gold or purple around it */
.topbar summary.avatar.has-photo, .acct-av.has-photo { overflow: hidden; padding: 0; background: none; }
.topbar summary.avatar.has-photo img, .acct-av.has-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.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) 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;
    --ge-ink: #101F46;
    --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;
    --ge-ink: #FFFFFF;
    --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: #08C9C2; }

/* ---------- 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, .act-btn):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: clamp(1.5rem, 7.4vw, 1.85rem); font-weight: 700; }
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; }

/* ---------- 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; }

/* 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; }

/* ---------- Activation: the Read, Confirm, Pay steps (tlapp/pay_steps.py) ---------- */

.pay-progress { display: flex; align-items: flex-start; gap: 0; list-style: none; margin: 14px 0 16px; padding: 0; counter-reset: none; }
.pay-progress li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 0.75rem; color: var(--muted); }
.pay-progress li + li::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.pay-progress li.on::before, .pay-progress li.done::before { background: var(--brand); }
.pay-progress .pp-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--line); color: var(--muted); font-weight: 700; font-size: 0.75rem; }
.pay-progress li.on { color: var(--brand); font-weight: 700; }
.pay-progress li.on .pp-dot { background: var(--brand); color: #fff; }
.pay-progress li.done .pp-dot { background: var(--ok-bg); color: var(--brand); }
.pay-step-box { margin-bottom: 10px; }
.pay-step-box h2 { margin: 0 0 4px; font-size: 0.98rem; }
.pay-step-box p { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.5; }
.pay-step-box p:last-child { margin-bottom: 0; }
.pay-step-strong { font-weight: 700; }
.pay-step-actions { display: flex; gap: 10px; margin-top: 14px; }
.pay-step-actions .btn { flex: 2; text-align: center; margin: 0; }
.pay-step-actions .btn-outline { flex: 1; }
.pay-step-actions .btn:disabled { opacity: 0.55; }
.pay-step-foot { text-align: center; margin-top: 10px; }

/* ---------- Profile: photo, name and username centred at the top; plain fields below; the email is verified by a link (tlapp/profile_setup/) ---------- */

.pf-top { display: flex; flex-direction: column; align-items: center; margin: 10px 0 18px; text-align: center; }
.pf-top h1 { margin: 10px 0 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.pf-top p { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.pf-photo { position: relative; width: 5.5rem; height: 5.5rem; }
main.page .pf-top .pf-avatar { display: grid; place-items: center; box-sizing: border-box; width: 5.5rem; height: 5.5rem; min-height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: var(--brand); box-shadow: none; color: #fff; font-size: 2rem; font-weight: 800; cursor: pointer; }
.pf-top .pf-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-cam { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 2px solid var(--bg); border-radius: 50%; background: var(--brand); color: #fff; cursor: pointer; }
.pf-cam svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-viewer { max-width: 100vw; max-height: 100vh; margin: auto; padding: 0; border: 0; background: transparent; }
.pf-viewer::backdrop { background: rgba(8, 6, 12, .92); }
.pf-viewer img { display: block; max-width: 92vw; max-height: 72vh; margin: 0 auto; border-radius: 8px; }
main.page .pf-viewer-close, .pf-viewer-close { position: fixed; top: 12px; right: 14px; width: 2.5rem; min-height: 0; height: 2.5rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.pf-viewer-actions { display: flex; justify-content: center; gap: 22px; margin-top: 16px; }
.pf-viewer-actions form { margin: 0; }
.pf-viewer-actions label, .pf-viewer-actions button { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #d8d2f5; font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.pf-viewer-actions button.is-armed { color: #ff9b9b; }
.pf-verify { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 4px; }
.pf-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.pf-pill-no { background: var(--warn-bg); color: var(--warn); }
.pf-pill-ok { background: var(--ok-bg); color: var(--brand); }
main.page .pf-verify-btn { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--link); font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.pf-verify-note { margin: 0 0 8px; color: var(--muted); font-size: 0.8rem; }

/* ---------- Discover: smaller headings ---------- */

main.page .dsc-head { padding-top: 14px; padding-bottom: 14px; }
main.page .dsc-head h1 { font-size: 1.1rem; }
main.page .dsc-post-head h1 { font-size: 1.08rem; line-height: 1.35; }
main.page .dsc-title { font-size: 0.95rem; }

/* ---------- Notice board: Official and Ad labels, photos, buttons, and the ad page (tlapp/notices/) ---------- */

.nb-official, .nb-ad { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; vertical-align: 1px; }
.nb-official { background: var(--brand-deep); color: var(--accent); }
.nb-ad { background: #2e7d32; color: #fff; }
.nb-adpage-meta .nb-ad { margin-left: 0; margin-right: 4px; }
.nb-photo { display: block; width: 100%; max-height: 180px; margin: 6px 0 8px; border-radius: 10px; object-fit: cover; }
.nb-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nb-btn { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--brand); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.nb-btn.nb-whatsapp { color: #1f7a33; border-color: #bfe5c8; }
.nb-btn.nb-call { color: #1d4ed8; border-color: #c7d7fb; }
.nb-open { text-decoration: none; }
.nb-adpage h1 { margin: 2px 0 10px; font-size: 1.2rem; line-height: 1.3; }
.nb-adpage-meta { margin: 0; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.nb-media { display: block; width: 100%; max-height: 360px; margin: 0 0 12px; border-radius: 12px; background: #000; object-fit: contain; }
.nb-embed { position: relative; aspect-ratio: 16 / 9; max-height: none; }
.nb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.nb-adpage-text { line-height: 1.6; overflow-wrap: anywhere; }
.nb-adpage-text p { margin: 0 0 10px; }
.nb-adpage .nb-buttons { margin: 4px 0 14px; }
.nt-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.nt-tab { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.nt-tab.on { border-color: var(--brand); background: var(--brand); color: #fff; }

/* ---------- Get your account set up (tlapp/account_setup/) ---------- */

.login-wrap .acs-message { align-items: flex-start; }
.login-wrap .acs-message textarea { width: 100%; min-height: 84px; border: 0; background: transparent; font: inherit; color: inherit; resize: vertical; }
.acs-contacts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 14px; }
.acs-btn { display: inline-flex; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--brand); font-weight: 700; font-size: 0.85rem; text-decoration: none; }

/* Terms: links look like links (colour, bold) without underlines */
.terms-doc a { color: var(--brand); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }

/* ---------- Home: the activation card for members who have not activated (tlapp/_activation_card.html) ---------- */

main.page .act-card { display: flex; flex-direction: column; margin: 16px 0; padding: 4px 2px 6px; background: transparent; color: var(--text); }
main.page .act-title { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.35; color: var(--text); }
main.page .act-msg { margin: 6px 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
main.page .act-fee { display: block; margin: 10px 0 0; padding: 0; border-radius: 0; background: none; color: var(--text); font-size: 0.86rem; }
main.page .act-fee b { font-weight: 800; }
main.page .act-sep { color: var(--line-strong); }
main.page a.activate-btn.act-btn { position: relative; justify-content: center; margin: 16px 0 0; width: 100%; padding: 13px 16px; border-radius: var(--radius) !important; border: 1.5px solid var(--brand); background: transparent; color: var(--brand); font-size: 0.95rem; font-weight: 800; white-space: nowrap; box-shadow: none; }
/* A gold light travels round the border on a loop, so the button is never fully still */
@property --act-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
main.page a.activate-btn.act-btn::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--act-angle), transparent 0 62%, var(--accent) 86%, #fbd988 94%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: act-btn-orbit 2.8s linear infinite;
    pointer-events: none;
}
@keyframes act-btn-orbit { to { --act-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    main.page a.activate-btn.act-btn::after { animation: none; opacity: 0.6; }
}
/* Home: five tiles (with Sell or My shop) fit on one row */
main.page .qa-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) { grid-template-columns: repeat(5, minmax(0, 1fr)); }


/* Transition screen: logging in, logging out, first arrival after signup and after activation (app.js).
   It sits on <html>, outside <body>, so it sets its own font and colours. */
.tl-transition { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg, #f7f5fa); color: var(--text, #1b1426); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.4; opacity: 0; transition: opacity .22s ease; }
.tl-transition.is-on { opacity: 1; }
.tlt-card { width: 100%; max-width: 340px; text-align: center; }
.tlt-logo { display: flex; justify-content: center; margin: 0 auto 18px; animation: tlt-pulse 1.8s ease-in-out infinite; }
.tlt-spin { width: 46px; height: 46px; margin: 0 auto 18px; border: 4px solid var(--line, #e7e2ee); border-top-color: #08C9C2; border-radius: 50%; animation: tlt-turn .9s linear infinite; }
.tlt-title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; }
.tlt-lead { margin: 0 0 10px; font-size: 0.95rem; }
.tlt-status { margin: 0; min-height: 1.4em; color: var(--muted, #6e6680); font-size: 0.95rem; }
.tlt-slow { margin: 14px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--muted, #6e6680); }
.tlt-tagline { margin: 26px 0 0; color: var(--muted, #6e6680); opacity: .75; font-size: 0.8rem; }
/* Activation: a turning ring while waiting; on the last step the ring closes and the check draws itself */
.tlt-check { width: 68px; height: 68px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: var(--good-bg, #dcfce7); }
.tlt-check svg { width: 42px; height: 42px; fill: none; stroke: var(--good, #15803d); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tlt-check circle { stroke-dasharray: 63; stroke-dashoffset: 46; transform-box: fill-box; transform-origin: center; animation: tlt-turn .9s linear infinite; }
.tlt-check polyline { stroke-dasharray: 14; stroke-dashoffset: 14; }
.tlt-check.is-done circle { animation: tlt-close .4s ease forwards; }
.tlt-check.is-done polyline { animation: tlt-draw .35s ease .3s forwards; }
@keyframes tlt-turn { to { transform: rotate(360deg); } }
@keyframes tlt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(.96); } }
@keyframes tlt-close { from { stroke-dashoffset: 46; } to { stroke-dashoffset: 0; } }
@keyframes tlt-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .tl-transition { transition: none; }
    .tlt-logo { animation: none; }
    .tlt-spin { animation-duration: 3s; }
    .tlt-check circle { animation: none; stroke-dashoffset: 0; }
    .tlt-check polyline { animation: none; }
    .tlt-check.is-done circle, .tlt-check.is-done polyline { animation: none; stroke-dashoffset: 0; }
}


/* Welcome and congratulations pages */

/* Sign-in layout shared by every login, sign-up and reset page */
.brand-lockup .ge-mark { margin: 0 auto; }
.auth-chip { padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(8, 201, 194, 0.4); background: rgba(8, 201, 194, 0.12); color: #08A7A1; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-chip { color: #08C9C2; } }
html[data-theme="dark"] .auth-chip { color: #08C9C2; }
.login-extras { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; font-size: 0.875rem; }
.login-extras .remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.login-extras .remember input { width: 18px; height: 18px; accent-color: #08C9C2; }
.login-extras a, .login-body .login-note a, .login-body .agree-row a { color: #08A7A1; font-weight: 700; text-decoration: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.login-extras, .login-body .login-note, .login-body .agree-row) a { color: #08C9C2; } }
html[data-theme="dark"] :is(.login-extras, .login-body .login-note, .login-body .agree-row) a { color: #08C9C2; }
.acs-contacts .acs-main { display: block; width: 100%; padding: 15px; border-radius: 12px; background: #08C9C2; color: #06202a; font-weight: 800; text-align: center; text-decoration: none; }
.acs-email { color: #08A7A1; }

/* ---------- Instant pages ---------- */

/* Pages swap in place (HTMX, see instant.js). The page colour fills the whole window, so nothing white shows during a swap. */
html { background: var(--bg); }
/* A swapped-in page cross-fades; the top bar and bottom menu stay put (they have their own transition names) */
@media (prefers-reduced-motion: no-preference) {
    html.tl-swap::view-transition-old(root) { animation: 120ms ease-out both tl-xfade-out; }
    html.tl-swap::view-transition-new(root) { animation: 160ms ease-in both tl-xfade-in; }
}
@keyframes tl-xfade-out { to { opacity: 0; } }
@keyframes tl-xfade-in { from { opacity: 0; } }
/* HTMX's loading indicator never shows */
.htmx-indicator { display: none !important; }

/* ---------- My Earnings page (10 Nov 2026) ---------- */
.earn-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 14px; }
.earn-head h1 { margin: 0; font-size: 1.3rem; font-family: var(--font-display); }

/* Timeframe picker: a native <details> so it opens only when tapped, no JS needed */
.tf-picker { margin: 0 0 16px; }
.tf-picker summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--link);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    list-style: none;
}
.tf-picker summary::-webkit-details-marker { display: none; }
.tf-caret { width: 16px; height: 16px; transition: transform 0.15s; }
.tf-picker[open] .tf-caret { transform: rotate(90deg); }
.tf-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.tf-pill,
.tf-pill:visited {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    text-align: left;
}
.tf-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.tf-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.tf-dates label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--muted); flex: 1 1 120px; }
.tf-dates input[type="date"] { padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; color: var(--text); background: var(--card); }

/* Donut: quiet colours on purpose (var(--teal), var(--muted)), not the bright stat-card tints */
.earn-donut-card, .earn-donut-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.earn-ring-wrap { position: relative; flex-shrink: 0; }
.earn-ring-mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1px;
}
.earn-ring-mid .cur { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.earn-ring-mid strong { font-size: 1.05rem; color: var(--text); font-family: var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.earn-ring-mid small { font-size: 0.65rem; color: var(--muted); }
.earn-legend { display: flex; flex-direction: column; gap: 14px; }
.earn-legend p { margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.earn-legend b { grid-column: 2; font-size: 1rem; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.earn-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.earn-dot.earn { background: var(--teal); }
.earn-dot.out { background: var(--muted); }

.earn-table-card h2 { margin: 0 0 12px; font-size: 0.95rem; font-family: var(--font-display); }
.earn-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.earn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; }
.earn-row + .earn-row { border-top: 1px solid var(--line); }
.earn-row span { font-size: 0.98rem; font-weight: 600; color: var(--text); }
.earn-row b { font-size: 1rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.earn-row b.t-good { color: var(--good); }
.earn-row b.t-amber { color: var(--amber); }
.earn-range { margin: 12px 2px 0; font-size: 0.78rem; color: var(--muted); }

/* Home: My Earnings donut in its own card, after Account overview */
.dash-earn .sec-head { margin-top: 0; align-items: center; }
.dash-earn-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-earn-tools .pill { white-space: nowrap; }
.earn-donut-body { padding-top: 4px; }
main.page .dash-earn button.stat-eye .icon-eye-off { display: inline; }
main.page .dash-earn button.stat-eye[aria-pressed="true"] .icon-eye-off { display: none; }

/* ---------- Home: the activation card pops up now and then for a member who has not activated (tlapp/_activation_popup.html) ---------- */

dialog.act-pop { width: min(92vw, 380px); margin: auto; padding: 20px 20px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--text); box-shadow: 0 18px 48px rgba(0, 0, 0, .28); }
dialog.act-pop:focus { outline: none; }
dialog.act-pop[open] { animation: act-pop-in .32s ease; }
dialog.act-pop::backdrop { background: rgba(12, 8, 20, .55); }
dialog.act-pop .act-card { margin: 0; padding: 0; }
dialog.act-pop form { margin: 0; text-align: center; }
dialog.act-pop button.act-pop-later { width: auto; min-height: 0; margin: 10px 0 0; padding: 6px 12px; color: var(--muted); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
@keyframes act-pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.act-pop[open] { animation: none; } }