/* ── Halal Tech Daily — shared light editorial design system ─────────────
   Palette mirrors email_design.py tokens. No web fonts; no emoji in UI.

   ── Type scale ─ exactly 2 families on every page + mono for <code> only ──
     DISPLAY  : Georgia serif, weight 700  → wordmark, h1/h2/h3, titles,
                stat numbers, hero, section labels (italic-kicker variant reserved
                for the masthead wordmark, weight 400 by design).
     TEXT     : system sans, weight 400    → body, lede, summaries, forms, footer.
     LABEL    : system sans, weight 600-700 + letter-spacing → kickers, sources,
                eyebrows, meta, date (smallest, tracked semibold).
     MONO     : code blocks only (site pages, never the newsletter).          */

/* Native form controls, scrollbars and select pop-ups follow the active theme.
   Explicit :root color-scheme blocks below override this per theme. */
html { color-scheme: light dark; }

:root {
    color-scheme: light;

    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f5f6f2;
    --ink: #1a1d21;
    --ink-soft: #40464f;
    --muted: #5b656f;
    --faint: #9aa1a9;
    --line: #e3e4de;
    --accent: #0d7a54;
    --accent-deep: #0a5f41;
    --accent-bg: #e4f2ec;
    --accent-line: #bfe0d2;
    --gold: #a4740c;
    --gold-deep: #7d5a08;
    --gold-bg: #f6eed7;
    --blue: #1d4ed8;
    --blue-bg: #eef3fc;
    --blue-line: #cfddf5;
    --rust: #b3261e;
    --rust-bg: #fbeae8;
    --rust-line: #f3c4bf;
    --neutral-bg: #e2e3e5;
    --btn-text: #fdfdfb;
    --overlay: rgba(25, 29, 33, 0.5);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235b656f' d='M6 8L1 3h10z'/%3E%3C/svg%3E");

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --serif: Georgia, "Times New Roman", serif;
    --mono: Consolas, Menlo, "SF Mono", "Courier New", monospace;
    --radius: 12px;
}

/* ── Dark mode ────────────────────────────────────────────────────────
   Cascade order is load-bearing:
     1. :root                  → light (default)
     2. @media dark :root      → auto-detect, applies when the OS is dark
     3. :root[data-theme=dark] → explicit dark, wins over the OS
     4. :root[data-theme=light]→ explicit light, wins over the OS
   The data-theme rules come AFTER the media query so a stored choice always
   beats the device theme. Every block also re-declares color-scheme so
   native controls match the active theme. */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg: #0d1117;
        --surface: #161b22;
        --surface-alt: #1c2128;
        --ink: #e6edf3;
        --ink-soft: #c1c9d1;
        --muted: #8b949e;
        --faint: #6e7681;
        --line: #30363d;
        --accent: #3fb98b;
        --accent-deep: #4fd39f;
        --accent-bg: #1e3a2f;
        --accent-line: #2b5a47;
        --gold: #d4a52e;
        --gold-deep: #e0b03c;
        --gold-bg: #3b3526;
        --blue: #539bf5;
        --blue-bg: #1f2a3d;
        --blue-line: #2f4470;
        --rust: #f47067;
        --rust-bg: #3d2523;
        --rust-line: #6b3a35;
        --neutral-bg: #262b31;
        --btn-text: #0b241a;
        --overlay: rgba(6, 10, 16, 0.55);
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0d1117;
    --surface: #161b22;
    --surface-alt: #1c2128;
    --ink: #e6edf3;
    --ink-soft: #c1c9d1;
    --muted: #8b949e;
    --faint: #6e7681;
    --line: #30363d;
    --accent: #3fb98b;
    --accent-deep: #4fd39f;
    --accent-bg: #1e3a2f;
    --accent-line: #2b5a47;
    --gold: #d4a52e;
    --gold-deep: #e0b03c;
    --gold-bg: #3b3526;
    --blue: #539bf5;
    --blue-bg: #1f2a3d;
    --blue-line: #2f4470;
    --rust: #f47067;
    --rust-bg: #3d2523;
    --rust-line: #6b3a35;
    --neutral-bg: #262b31;
    --btn-text: #0b241a;
    --overlay: rgba(6, 10, 16, 0.55);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f5f6f2;
    --ink: #1a1d21;
    --ink-soft: #40464f;
    --muted: #5b656f;
    --faint: #9aa1a9;
    --line: #e3e4de;
    --accent: #0d7a54;
    --accent-deep: #0a5f41;
    --accent-bg: #e4f2ec;
    --accent-line: #bfe0d2;
    --gold: #a4740c;
    --gold-deep: #7d5a08;
    --gold-bg: #f6eed7;
    --blue: #1d4ed8;
    --blue-bg: #eef3fc;
    --blue-line: #cfddf5;
    --rust: #b3261e;
    --rust-bg: #fbeae8;
    --rust-line: #f3c4bf;
    --neutral-bg: #e2e3e5;
    --btn-text: #fdfdfb;
    --overlay: rgba(25, 29, 33, 0.5);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235b656f' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-deep); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Masthead / brand ─────────────────────────────────────────────────── */
.wordmark {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    line-height: 1.15;
}
.page-header .wordmark,
.masthead .wordmark {
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.1;
    margin: 0;
}
.page-header .wordmark em,
.masthead .wordmark em {
    color: var(--accent);
    font-style: italic;
}
.kicker {
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: normal;
    color: var(--faint);
}
.page-header {
    text-align: center;
    padding: 48px 20px 8px;
}
.page-header .kicker { font-size: 13px; margin-bottom: 2px; }
.page-header .wordmark { font-size: 36px; }
.page-header .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ── Landing hero (masthead as the one memorable element) ────────────── */
.masthead { text-align: center; padding: 64px 20px 4px; }
.masthead .kicker { font-size: 15px; margin-bottom: 4px; }
.masthead .wordmark { font-size: 46px; }
.masthead .lede {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
    max-width: 560px;
    margin: 0 auto;
}

/* dawn rule — a hairline horizon with a gold sun peeking over it */
.dawn {
    position: relative;
    width: min(260px, 66vw);
    height: 14px;
    margin: 18px auto;
}
.dawn::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 10px;
    height: 1px; background: var(--accent);
}
.dawn::after {
    content: "";
    position: absolute; left: 50%; top: 4px;
    width: 12px; height: 12px; margin-left: -6px;
    border-radius: 50%;
    background: var(--gold);
}

.signup-card { max-width: 430px; margin: 34px auto 0; }
.signup-card .msg { margin-top: 16px; }

.link-row {
    display: flex; justify-content: center; gap: 26px;
    font-size: 14px; margin-top: 30px; flex-wrap: wrap;
}
.link-row a { color: var(--accent); text-decoration: none; font-weight: 600; }
.link-row a:hover { color: var(--accent-deep); text-decoration: underline; }
.page-header .count {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 13px;
    color: var(--muted);
    margin-top: 10px;
}
.email-badge {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
}

/* ── Layout containers ────────────────────────────────────────────────── */
.container { max-width: 680px; margin: 0 auto; padding: 32px 20px 40px; }
.container.wide { max-width: 1020px; }
.container.narrow { max-width: 540px; }

.nav { text-align: center; padding: 14px 20px 22px; }
.nav a { font-size: 14px; text-decoration: none; margin: 0 12px; }
.back { color: var(--accent); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 20px; }
.back:hover { color: var(--accent-deep); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card, .section, .box, .add-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 18px;
}
.box {
    max-width: 430px;
    margin: 12vh auto 0;
    text-align: center;
    padding: 38px 30px;
}
.box h1 { font-size: 27px; margin-bottom: 12px; }
.box p { color: var(--muted); font-size: 15px; }

.section-title {
    color: var(--accent-deep);
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    margin-bottom: 14px;
}
.advanced-toggle { cursor: pointer; user-select: none; }
.advanced-toggle .arrow { display: inline-block; transition: 0.2s; margin-right: 6px; font-size: 11px; }
.advanced-toggle.open .arrow { transform: rotate(90deg); }
.advanced-content { display: none; margin-top: 16px; }
.advanced-content.visible { display: block; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }

/* ── Forms ────────────────────────────────────────────────────────────── */
label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
input[type="email"], input[type="text"], input[type="url"], input[type="password"], select, textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
select {
    appearance: none; -webkit-appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.form-group { margin-bottom: 16px; }
.form-row { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-end; flex-wrap: wrap; }
.layout-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.layout-row:last-child { border-bottom: none; }
.layout-row input[type="text"] { width: 100%; }
.form-hint { color: var(--muted); font-size: 12px; margin-top: 8px; line-height: 1.5; }
.custom-source-row { display: flex; gap: 8px; margin-top: 12px; }
.custom-source-row input { flex: 1; }
.custom-source-row .btn { width: auto; padding: 10px 18px; font-size: 13px; margin-top: 0; }

.region-select { margin-top: 8px; }

.flag-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.custom-source-result { margin-top: 8px; font-size: 13px; }
.custom-source-result.ok { color: var(--accent-deep); }
.custom-source-result.err { color: var(--rust); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display: block; width: 100%;
    padding: 13px 22px;
    background: var(--accent);
    color: var(--btn-text);
    border: 1px solid var(--accent);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 8px;
    text-decoration: none;
    text-align: center;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--btn-text); }
.btn:disabled { background: var(--faint); border-color: var(--faint); color: var(--btn-text); cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-alt); color: var(--ink); }
.btn-flag { background: var(--rust-bg); color: var(--rust); border-color: var(--rust-line); }
.btn-flag:hover { background: var(--rust); color: var(--btn-text); border-color: var(--rust); }
.btn-add { background: var(--accent); color: var(--btn-text); border: 1px solid var(--accent); }
.btn-approve { background: var(--accent-bg); color: var(--accent-deep); border: 1px solid var(--accent-line); }
.btn-edit { background: var(--gold-bg); color: var(--gold-deep); border: 1px solid var(--gold); }
.btn-reject, .btn-remove { background: var(--rust-bg); color: var(--rust); border: 1px solid var(--rust-line); }
.btn-restore { background: var(--accent-bg); color: var(--accent-deep); border: 1px solid var(--accent-line); }
.btn-approve:hover, .btn-restore:hover { background: var(--accent); color: var(--btn-text); border-color: var(--accent); }
.btn-edit:hover { background: var(--gold); color: var(--btn-text); border-color: var(--gold); }
.btn-reject:hover, .btn-remove:hover { background: var(--rust); color: var(--btn-text); border-color: var(--rust); }
button.btn-approve, button.btn-reject, button.btn-remove,
button.btn-restore, button.btn-add, button.btn-secondary, button.btn-flag {
    padding: 7px 14px; font-size: 12px; font-weight: 600; font-family: inherit;
    border-radius: 6px; cursor: pointer; margin: 2px; width: auto;
}
.btn-sm, button.btn-sm {
    display: inline-block; width: auto;
    padding: 7px 14px; font-size: 12px; font-weight: 600; font-family: inherit;
    border-radius: 6px; cursor: pointer; margin-top: 0;
}
/* Equal-width action buttons (Edit/Delete pairs) with a small fixed gap */
.btn-action, button.btn-action {
    min-width: 74px;
    text-align: center;
    margin-left: 2px;
    margin-right: 2px;
}
.btn-action + .btn-action { margin-left: 6px; }
/* Button pairs (Edit/Delete) always share one row — never wrap, so the pair
   stays side-by-side and left-aligned even in a narrow Actions column. */
.btn-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}
.btn-group .btn, .btn-group button.btn { margin: 0; width: auto; }
/* Admin action columns: keep the row controls on one horizontal line and let
   the table-wrapper scroll horizontally on narrow screens instead of wrapping. */
.table-wrapper th:last-child,
.table-wrapper td:last-child { white-space: nowrap; }
.table-tools {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 12px; flex-wrap: wrap;
}

/* ── Toggle switches (preferences) ────────────────────────────────────── */
.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 14px; color: var(--ink); padding-right: 14px; }
.toggle-label small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.source-row .toggle-label { font-size: 13px; color: var(--ink-soft); }
.toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--faint); border-radius: 24px; transition: 0.3s;
}
.toggle .slider:before {
    content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: var(--surface); border-radius: 50%; transition: 0.3s;
}
.toggle input:checked + .slider { background: var(--accent); }
.toggle input:checked + .slider:before { transform: translateX(20px); background: var(--surface); }

/* ── Messages / toasts / overlays ─────────────────────────────────────── */
.msg { text-align: center; padding: 12px; border-radius: 9px; font-size: 14px; margin-bottom: 16px; display: none; }
.msg.success { background: var(--accent-bg); color: var(--accent-deep); border: 1px solid var(--accent-line); display: block; }
.msg.error { background: var(--rust-bg); color: var(--rust); border: 1px solid var(--rust-line); display: block; }
.msg-success, .msg-error { padding: 10px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 20px; }
.msg-success { background: var(--accent-bg); color: var(--accent-deep); border: 1px solid var(--accent-line); }
.msg-error { background: var(--rust-bg); color: var(--rust); border: 1px solid var(--rust-line); }

#toast {
    position: fixed; top: 20px; left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--accent); color: var(--btn-text);
    padding: 14px 28px; border-radius: 10px; font-size: 14px; font-weight: 600;
    z-index: 9999; box-shadow: 0 6px 24px rgba(10, 95, 65, 0.25);
    transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

#save-overlay {
    position: fixed; inset: 0; width: 100%; height: 100%;
    background: var(--overlay); z-index: 10000;
    display: none; align-items: center; justify-content: center;
}
#save-overlay.show { display: flex; }
#save-overlay .overlay-box {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 40px 48px; text-align: center; max-width: 400px;
}
#save-overlay .overlay-box h2 { color: var(--accent-deep); font-size: 20px; margin: 0 0 8px; }
#save-overlay .overlay-box p { color: var(--muted); font-size: 14px; margin: 0 0 24px; line-height: 1.5; }
#save-overlay .overlay-box .btn { display: inline-block; width: auto; padding: 12px 32px; margin: 0 6px; }

/* ── Rich headings / sections ─────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); }
h1 { font-size: 28px; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
h2 .count { color: var(--faint); font-weight: 400; font-size: 13px; }
h3 { font-size: 15px; margin: 0 0 12px; }
.subtitle { color: var(--muted); font-size: 13px; margin: 0 0 26px; }

/* ── Admin stats ──────────────────────────────────────────────────────── */
.stats { display: flex; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.stat-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    flex: 1; min-width: 130px; text-align: center;
}
.stat-box .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--sans); }
.stat-box .number.blue { color: var(--blue); }
.stat-box .number.orange { color: var(--gold-deep); }
.stat-box .number.warn { color: var(--gold-deep); }
.stat-box .number.red { color: var(--rust); }
.stat-box .label {
    font-size: 12px; color: var(--muted); margin-top: 4px;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
.table-wrapper th {
    text-align: left; color: var(--muted); font-size: 12px;
    padding: 10px 12px; border-bottom: 1px solid var(--line);
    font-weight: 600;
}
.table-wrapper td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.table-wrapper tr:hover td { background: var(--surface-alt); }
code { background: var(--surface-alt); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--gold-deep); font-family: var(--mono); }

/* ── Badges / tags ────────────────────────────────────────────────────── */
.badge, .tag {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
}
.badge.confirmed { background: var(--accent-bg); color: var(--accent-deep); }
.badge.pending { background: var(--gold-bg); color: var(--gold-deep); }
.badge.rejected { background: var(--rust-bg); color: var(--rust); }
.tag-community { background: var(--accent-bg); color: var(--accent-deep); border: 1px solid var(--accent-line); }
.tag-default { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-line); }

/* ── Archive listing ──────────────────────────────────────────────────── */
.month-group { margin-bottom: 28px; }
.month-header {
    font-family: var(--serif); font-style: italic;
    font-size: 14px; color: var(--muted);
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.archive-list { list-style: none; }
.archive-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 9px; margin-bottom: 8px; transition: border-color 0.15s, background 0.15s;
}
.archive-item:hover { background: var(--surface-alt); border-color: var(--faint); }
.archive-item .date { font-size: 14px; color: var(--ink); font-weight: 600; }
.archive-item .meta { font-size: 12px; color: var(--muted); }
.archive-item .view-btn {
    color: var(--accent); font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.empty { text-align: center; padding: 50px 20px; color: var(--muted); font-size: 14px; }
.empty p { margin-bottom: 8px; }

/* ── Call-to-action bar / preview pages ───────────────────────────────── */
.cta-bar {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
    max-width: 680px; margin: 0 auto 26px; padding: 22px 28px; text-align: center;
}
.cta-bar p { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.cta-bar form { display: flex; gap: 10px; max-width: 540px; margin: 0 auto; flex-wrap: wrap; }
.cta-bar input[type="email"] { flex: 1; min-width: 180px; }
.cta-bar select { flex: 1; min-width: 150px; }
.cta-bar button.btn { width: auto; margin-top: 0; white-space: nowrap; }
.footer { text-align: center; padding: 34px 20px; color: var(--muted); font-size: 13px; }
.footer p { margin-bottom: 6px; }
.footer a { color: var(--accent); }

#newsletter-content { padding: 6px 0 0; }
/* The embedded edition ships its own <table class="container"> with the email
   styling inline. The email itself is full-bleed (fills the pane in the inbox),
   but on the WEBSITE preview it must be presented as a bordered paper card so it
   doesn't span the whole page. Constrain ONLY here — never in email_design.py.
   The card surface follows the site theme (the email itself, sent in the inbox,
   is always light — our overrides only exist on this web page). */
#newsletter-content > table { background: transparent !important; }
#newsletter-content table.container {
    margin: 0 auto;
    padding: 0 !important;
    background: var(--surface) !important;
    width: 100% !important;
    max-width: 680px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
}

/* ── Newsletter preview dark theme ────────────────────────────────────
   The injected edition carries its own inline palette. On this web page we
   remap it to the site palette whenever the dark theme is active, so the
   sample edition follows the toggle. Only reactive within #newsletter-content.
   Same dark-scope pattern as the :root tokens: media-match (auto dark) unless
   an explicit light choice wins, then a top-level explicit-dark rule so a
   toggled dark theme works even when the OS is light. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #newsletter-content [style*="color:#1a1d21"] { color: #e6edf3 !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="color:#5b656f"] { color: #8b949e !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="color:#9aa1a9"] { color: #6e7681 !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="color:#0d7a54"] { color: #4fd39f !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="color:#a4740c"] { color: #d4a52e !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="color:#7d5a08"] { color: #e0b03c !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="color:#6d4a7a"] { color: #c9a7dc !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="color:#55365f"] { color: #b28fd0 !important; }

    :root:not([data-theme="light"]) #newsletter-content [style*="background:#fdfdfb"] { background-color: #161b22 !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="background:#f5f6f2"] { background-color: #1c2128 !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="background:#0d7a54"] { background-color: #3fb98b !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="background:#e3e4de"] { background-color: #30363d !important; }

    :root:not([data-theme="light"]) #newsletter-content [style*="border-left:3px solid #0d7a54"] { border-left-color: #3fb98b !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="border-left:3px solid #a4740c"] { border-left-color: #d4a52e !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="border-left:3px solid #6d4a7a"] { border-left-color: #b28fd0 !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="border-right:1px solid #e3e4de"] { border-right-color: #30363d !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="border-top:1px solid #e3e4de"] { border-top-color: #30363d !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="border-left:1px solid #e3e4de"] { border-left-color: #30363d !important; }
    :root:not([data-theme="light"]) #newsletter-content [style*="border-bottom:1px solid #e3e4de"] { border-bottom-color: #30363d !important; }
}

:root[data-theme="dark"] #newsletter-content [style*="color:#1a1d21"] { color: #e6edf3 !important; }
:root[data-theme="dark"] #newsletter-content [style*="color:#5b656f"] { color: #8b949e !important; }
:root[data-theme="dark"] #newsletter-content [style*="color:#9aa1a9"] { color: #6e7681 !important; }
:root[data-theme="dark"] #newsletter-content [style*="color:#0d7a54"] { color: #4fd39f !important; }
:root[data-theme="dark"] #newsletter-content [style*="color:#a4740c"] { color: #d4a52e !important; }
:root[data-theme="dark"] #newsletter-content [style*="color:#7d5a08"] { color: #e0b03c !important; }
:root[data-theme="dark"] #newsletter-content [style*="color:#6d4a7a"] { color: #c9a7dc !important; }
:root[data-theme="dark"] #newsletter-content [style*="color:#55365f"] { color: #b28fd0 !important; }

:root[data-theme="dark"] #newsletter-content [style*="background:#fdfdfb"] { background-color: #161b22 !important; }
:root[data-theme="dark"] #newsletter-content [style*="background:#f5f6f2"] { background-color: #1c2128 !important; }
:root[data-theme="dark"] #newsletter-content [style*="background:#0d7a54"] { background-color: #3fb98b !important; }
:root[data-theme="dark"] #newsletter-content [style*="background:#e3e4de"] { background-color: #30363d !important; }

:root[data-theme="dark"] #newsletter-content [style*="border-left:3px solid #0d7a54"] { border-left-color: #3fb98b !important; }
:root[data-theme="dark"] #newsletter-content [style*="border-left:3px solid #a4740c"] { border-left-color: #d4a52e !important; }
:root[data-theme="dark"] #newsletter-content [style*="border-left:3px solid #6d4a7a"] { border-left-color: #b28fd0 !important; }
:root[data-theme="dark"] #newsletter-content [style*="border-right:1px solid #e3e4de"] { border-right-color: #30363d !important; }
:root[data-theme="dark"] #newsletter-content [style*="border-top:1px solid #e3e4de"] { border-top-color: #30363d !important; }
:root[data-theme="dark"] #newsletter-content [style*="border-left:1px solid #e3e4de"] { border-left-color: #30363d !important; }
:root[data-theme="dark"] #newsletter-content [style*="border-bottom:1px solid #e3e4de"] { border-bottom-color: #30363d !important; }

/* ── Landing sources chips ────────────────────────────────────────────── */
.sources { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.sources h3 {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 15px; color: var(--muted); margin-bottom: 10px;
}
.sources ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sources li {
    background: var(--surface); border: 1px solid var(--line);
    padding: 4px 10px; border-radius: 6px; font-size: 12px; color: var(--muted);
}
.quick-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.quick-links a { text-decoration: none; font-size: 14px; }
.quick-links a:hover { text-decoration: underline; }

.logout { float: right; color: var(--rust); text-decoration: none; font-size: 13px; margin-right: 48px; }

/* ── Filters (admin flags) ────────────────────────────────────────────── */
.filters { margin-bottom: 20px; }
.filters a {
    display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 13px;
    text-decoration: none; margin-right: 8px; margin-bottom: 6px;
    background: var(--surface); color: var(--muted); border: 1px solid var(--line);
}
.filters a.active { background: var(--accent); color: var(--btn-text); border-color: var(--accent); font-weight: 600; }
.filters a:hover { border-color: var(--accent); color: var(--accent-deep); }
.filters a.active:hover { color: var(--btn-text); }

/* ── Admin add-source form inline status ──────────────────────────────── */
.success {
    background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent-deep);
    padding: 12px 16px; border-radius: 9px; margin-bottom: 20px; font-size: 13px;
}

/* ── Theme toggle ─────────────────────────────────────────────────────── */
/* Fixed top-right, sized to stay clear of the floating .logout (which gets a
   matching right margin) and the mobile nav. Sun/moon icon follows the
   EFFECTIVE theme (explicit choice, else the device theme): sun = dark,
   moon = light, including auto mode. */
.theme-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
    .theme-toggle .icon-sun { display: block; }
    .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Retheme app.py-injected inline styles (read-only backend) ──────────
   Badges/statuses are emitted with hardcoded hex colors straight from app.py.
   Those can't be edited, so remap them to the theme tokens with !important
   overrides. In light mode each override resolves to (near-)identical shades,
   preserving the exact current look; in dark mode they flip to the palette. */
.badge[style*="background:#fbeae8"] { background: var(--rust-bg) !important; color: var(--rust) !important; }
.badge[style*="background:#f6eed7"] { background: var(--gold-bg) !important; color: var(--gold-deep) !important; }
.badge[style*="background:#e8ecf7"],
.badge[style*="background:#cce5ff"] { background: var(--blue-bg) !important; color: var(--blue) !important; }
.badge[style*="background:#e4f2ec"],
.badge[style*="background:#d4edda"] { background: var(--accent-bg) !important; color: var(--accent-deep) !important; }
.badge[style*="background:#e2e3e5"] { background: var(--neutral-bg) !important; color: var(--ink-soft) !important; }
[style*="color:#9aa1a9"] { color: var(--faint) !important; }
[style*="color:#383d41"] { color: var(--ink-soft) !important; }
[style*="color:#666"] { color: var(--muted) !important; }
[style*="color:#888"] { color: var(--muted) !important; }

/* ── Unsubscribe ──────────────────────────────────────────────────────── */
.box form input[type="email"] { width: 280px; max-width: 100%; margin: 10px 0; }
.box .btn { margin-top: 6px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .container { padding: 22px 14px 30px; }
    .page-header { padding-top: 30px; }
    .page-header .wordmark { font-size: 28px; }
    .page-header .support-title { font-size: clamp(20px, 6vw, 28px); }
    .masthead { padding-top: 44px; }
    .masthead .wordmark { font-size: 34px; }
    .masthead .lede { font-size: 14px; }
    .link-row { gap: 18px; font-size: 14px; }
    h1 { font-size: 23px; }
    .card, .section, .box { padding: 18px; }
    .box { margin-top: 8vh; }
    .archive-item { flex-direction: column; align-items: flex-start; gap: 6px; }
    .cta-bar { margin: 0 10px 22px; padding: 18px 16px; }
    .cta-bar form { flex-direction: column; }
    .cta-bar button.btn { width: 100%; }
    .cta-bar input[type="email"], .cta-bar select { min-width: 0; flex: 1 1 100%; width: 100%; }
    .filters a { padding: 6px 12px; font-size: 12px; margin-right: 4px; }
    .form-row { flex-direction: column; align-items: stretch; }
    .custom-source-row { flex-direction: column; }
    .custom-source-row .btn { width: 100%; }
    .stat-box { min-width: 100%; }
    /* Injected edition on small screens: mirror email_design.MEDIA_QUERY —
       stack the two-column grid, tighten gutters. NEVER table-layout:fixed
       (it collapses the width=1 numeral/divider cells to ~1px and wraps
       the section numerals "01" into "1"-below-"0") and never force nowrap. */
    #newsletter-content { overflow-x: hidden; padding: 6px 14px 0; }
    #newsletter-content table.container { width: 100% !important; max-width: 480px !important; }
    #newsletter-content .half { display: block !important; width: 100% !important; padding: 0 !important; border-right: none !important; }
    #newsletter-content .divider { display: none !important; }
    #newsletter-content .gutter { padding-left: 18px !important; padding-right: 18px !important; }
    #newsletter-content .masthead { padding: 20px 18px 12px 18px !important; }
    #newsletter-content .wordmark { font-size: 24px !important; }
    #newsletter-content .hero-title { font-size: 19px !important; }
    #newsletter-content .footer { padding: 18px !important; }
    #newsletter-content td { word-wrap: break-word !important; overflow-wrap: break-word !important; }
    /* Stacked halves: breathing room above, single rule between the pair */
    #newsletter-content .half { padding-bottom: 18px !important; }
    #newsletter-content .half.grid-card-left { border-bottom: 1px solid var(--line) !important; }
    #newsletter-content .half.grid-card-right { padding-top: 16px !important; }
    /* Masthead date: keep right-aligned, stack Sunday/date/year */
    #newsletter-content .masthead td[align="right"] { text-align: right; white-space: normal !important; overflow-wrap: normal !important; word-wrap: normal !important; }
    #newsletter-content .masthead td[align="right"] p { margin: 0; line-height: 1.45; }
    /* Phone type bump: the editorial sizes tuned for desktop email are too
       small on a phone — nudge titles, body, captions and kickers up. */
    #newsletter-content td[class*="grid-card"] p[style*="font-size:16px"] { font-size: 17px !important; }
    #newsletter-content td[class*="grid-card"] p[style*="font-size:13px"] { font-size: 14px !important; }
    #newsletter-content td[class*="grid-card"] p[style*="font-size:10.5px"] { font-size: 11px !important; }
    #newsletter-content td[class*="grid-card"] p[style*="font-size:12px"] { font-size: 13px !important; }
    #newsletter-content td[style*="border-left:3px"] p[style*="font-size:13px"] { font-size: 14px !important; }
    #newsletter-content p[style*="font-size:10px"] { font-size: 11px !important; }
    #newsletter-content td[style*="font-size:18px"] { font-size: 17px !important; }
}
/* Center the unsubscribe button inside its box (page-scoped, no global effect) */
.unsub-form { text-align: center; }
.unsub-form .btn { width: auto; display: inline-block; }

/* ── Support Page & Floating Widget ──────────────────────────────────── */
.support-float {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    z-index: 1000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.support-float::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.support-float:hover {
    background: var(--surface-alt);
    border-color: var(--accent);
    color: var(--accent-deep);
    transform: translateY(-1px);
}

.support-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}
.support-card {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px;
    transition: border-color 0.15s;
}
.support-card:hover {
    border-color: var(--faint);
}
.support-card-header {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}
.support-card-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.support-method-name {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}
.support-card-badge-desc {
    font-size: 12px;
    color: var(--muted);
}
.support-card-sub {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 14px;
}

.qr-img-wrapper {
    display: inline-block;
    background: #ffffff;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    user-select: none;
    -webkit-user-select: none;
}
.qr-img-wrapper img {
    display: block;
    max-width: 240px;
    width: 100%;
    height: auto;
    border-radius: 4px;
    pointer-events: none;
}

.upi-id-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 20px;
}
.upi-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.upi-value {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink);
    background: transparent;
    padding: 0;
}
.btn-copy {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.btn-copy:hover {
    background: var(--accent-bg);
    color: var(--accent-deep);
}

.page-header .support-title {
    font-size: clamp(20px, 5.2vw, 32px);
    white-space: nowrap;
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.btn-outline:hover {
    background: var(--accent-bg);
    color: var(--accent-deep);
}

.support-card .btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
}
.support-card .btn-secondary:hover {
    background: var(--surface-alt);
    border-color: var(--faint);
}