/* ============================================================
   UnHacked Portal — by Phoenix IT Advisors
   Color theme inherits from the Phoenix IT Advisors logo: a
   confident phoenix red as the primary, deep orange as the accent.
   ============================================================ */

:root {
    --ink: #1c2733;
    --ink-soft: #4a5b6b;
    --ink-faint: #7a8a98;
    --line: #e3e9ee;
    --line-strong: #cdd7df;
    --bg: #f7f6f5;
    --surface: #ffffff;
    --brand: #d2232a;          /* Phoenix red */
    --brand-dark: #a11c22;     /* darker red for hover / text on soft bg */
    --brand-soft: #fde7e5;     /* light pink for soft backgrounds */
    --accent: #c5550e;         /* deep Phoenix orange (link + secondary CTA, WCAG AA on white) */
    --accent-soft: #fdeedb;    /* light orange */
    --gold: #9c7409;
    --gold-soft: #f6efdc;
    --danger: #8b1e1e;         /* darker red so it doesn't compete with the brand */
    --danger-soft: #f5dbdb;
    --shadow: 0 1px 2px rgba(40, 18, 18, .06), 0 4px 16px rgba(40, 18, 18, .06);
    --shadow-lg: 0 2px 6px rgba(40, 18, 18, .08), 0 12px 32px rgba(40, 18, 18, .10);
    --radius: 14px;
    --radius-sm: 9px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; margin: 0 0 .4em; font-weight: 650; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--ink-faint); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
h1:focus { outline: none; }

/* ---------------------------------------------------------- shell */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

.app-header {
    display: flex; align-items: center; gap: 1.5rem;
    padding: .7rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink) !important; text-decoration: none !important; }
/* Phoenix logo is sourced at 64px tall and scaled down via height — gives
   sharp rendering on regular and high-DPI screens. width:auto preserves the
   logo's intrinsic aspect ratio. */
.brand-mark { height: 2.25rem; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; font-weight: 750; letter-spacing: .2px; line-height: 1.05; }
.brand-text small { font-weight: 500; font-size: .68rem; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-faint); }

.app-nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.app-nav a {
    padding: .4rem .8rem; border-radius: 999px; color: var(--ink-soft);
    font-size: .92rem; font-weight: 550; text-decoration: none !important;
}
.app-nav a:hover { background: var(--bg); color: var(--ink); }
.app-nav a.active { background: var(--brand-soft); color: var(--brand-dark); }

.app-user { text-align: right; line-height: 1.15; display: flex; align-items: center; gap: .5rem; }
.app-user-name { display: block; font-weight: 600; font-size: .9rem; }
.app-user-co { display: block; font-size: .78rem; color: var(--ink-faint); }

/* Circular initials avatar — header button that links to /account. */
.user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--brand); color: #fff !important;
    font-size: .82rem; font-weight: 700; letter-spacing: .3px;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(20, 35, 50, .14);
    transition: transform .08s ease, box-shadow .12s ease;
}
.user-avatar:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(20, 35, 50, .18); }
.user-avatar:active { transform: translateY(0); }

.app-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.8rem 1.5rem 2.5rem; }

.app-footer {
    text-align: center; font-size: .78rem; color: var(--ink-faint);
    padding: 1.2rem 1.5rem 1.6rem; border-top: 1px solid var(--line); background: var(--surface);
}

@media (max-width: 720px) {
    .app-header { flex-wrap: wrap; gap: .6rem 1rem; }
    .app-user { order: 2; }
    .app-nav { order: 3; flex-basis: 100%; }
}

/* ---------------------------------------------------------- page header */
.page-head { margin-bottom: 1.4rem; }
.page-head .crumbs { font-size: .82rem; color: var(--ink-faint); margin-bottom: .35rem; }
.page-head .crumbs a { color: var(--ink-faint); }
.page-head h1 { margin-bottom: .15rem; }
.page-head .lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 62ch; }

/* ---------------------------------------------------------- cards & grid */
.card2 {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.25rem 1.35rem;
}
.card2.tight { padding: 1rem 1.1rem; }
.card2 + .card2 { margin-top: 1rem; }
.card-title { font-size: .76rem; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; }

.grid { display: grid; gap: 1rem; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* stat / hero numbers */
.stat .stat-value { font-size: 1.9rem; font-weight: 750; letter-spacing: -.5px; color: var(--ink); }
.stat .stat-value.brand { color: var(--brand-dark); }
.stat .stat-value.accent { color: var(--accent); }
.stat .stat-value.danger { color: var(--danger); }
.stat .stat-sub { font-size: .85rem; color: var(--ink-faint); margin-top: .15rem; }

.hero-risk {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; border: none;
}
.hero-risk .card-title { color: rgba(255,255,255,.82); }
.hero-risk .stat-value { color: #fff; font-size: 2.4rem; }
.hero-risk .stat-sub { color: rgba(255,255,255,.88); }
.hero-risk a { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------- progress bar */
.journey-track {
    display: flex; gap: 4px; background: var(--bg); border-radius: 999px; padding: 4px;
    border: 1px solid var(--line);
}
.journey-seg {
    flex: 1; height: 14px; border-radius: 999px; background: var(--line-strong); position: relative;
    overflow: hidden; min-width: 6px;
}
.journey-seg .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand); }
.journey-seg.complete { background: var(--brand); }
.journey-seg.current { box-shadow: 0 0 0 2px var(--accent) inset; }
.journey-legend { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-faint); margin-top: .5rem; }

.bar { background: var(--line); border-radius: 999px; height: 9px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.bar.accent > span { background: var(--accent); }

/* ---------------------------------------------------------- badges */
.badge2 {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 650;
    padding: .18rem .55rem; border-radius: 999px; letter-spacing: .2px; white-space: nowrap;
    border: 1px solid transparent;
}
.st-complete    { background: var(--brand-soft); color: var(--brand-dark); }
.st-inprogress  { background: var(--accent-soft); color: var(--accent); }
.st-notstarted  { background: var(--bg); color: var(--ink-soft); border-color: var(--line-strong); }
.st-scheduled   { background: var(--gold-soft); color: var(--gold); }
.st-needhelp    { background: var(--danger-soft); color: var(--danger); }
.st-na          { background: #eef1f3; color: var(--ink-faint); }

.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--ink-soft);
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .55rem; }
.pill.ep { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.pill.risk { background: var(--gold-soft); color: var(--gold); border-color: transparent; font-weight: 600; }
.pill.diff { background: #eef1f3; color: var(--ink-soft); border-color: transparent; }

.meta-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ---------------------------------------------------------- buttons */
.btn2 {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font-size: .92rem; font-weight: 600; padding: .55rem 1.05rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
    text-decoration: none !important; transition: background .12s, border-color .12s, transform .04s;
}
.btn2:hover { background: var(--bg); }
.btn2:active { transform: translateY(1px); }
.btn2.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn2.primary:hover { background: var(--brand-dark); }
.btn2.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn2.accent:hover { filter: brightness(.95); }
.btn2.ghost { background: transparent; border-color: var(--line-strong); }
.btn2.warn { background: var(--surface); border-color: var(--gold); color: var(--gold); }
.btn2.warn:hover { background: var(--gold-soft); }
.btn2.help { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn2.help:hover { background: var(--danger-soft); }
.btn2.sm { font-size: .82rem; padding: .35rem .7rem; }
.btn2.block { width: 100%; }
.btn2:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------------------------------------------------------- lists */
.list-clean { list-style: none; margin: 0; padding: 0; }
.list-clean > li { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.list-clean > li:last-child { border-bottom: none; }

.row-item { display: flex; align-items: center; gap: .8rem; }
.row-item .row-main { flex: 1; min-width: 0; }
.row-item .row-main .row-title { font-weight: 600; }
.row-item .row-main .row-sub { font-size: .82rem; color: var(--ink-faint); }
.row-item .row-aside { text-align: right; white-space: nowrap; }

.empty {
    text-align: center; color: var(--ink-faint); font-size: .92rem; padding: 1.6rem 1rem;
    border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg);
}

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps > li { position: relative; padding: .35rem 0 .35rem 2.1rem; }
.steps > li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: .3rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand-dark); font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* numbered task sections */
.tasksec { margin-bottom: 1.7rem; }
.tasksec .tasksec-h { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.tasksec .tasksec-h .n {
    width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex: none;
}
.tasksec .tasksec-h h3 { margin: 0; }

/* media embeds + podcast pages */
.media-wrap {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: .8rem;
}

.media-head { margin-bottom: .55rem; }
.media-head .t { font-weight: 650; }
.media-head .tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); }

.media-frame {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #0f1720;
}

/* Audio and video iframes need to render at the same height so the two-up
   media cards align. Transistor's embedded player calls postMessage from
   inside the iframe to resize itself to fit its content, which silently
   overrides any height we set on the iframe element. Wrapping the iframe in
   a fixed-height .media-clip container with overflow: hidden locks the
   visible height regardless of what the embed tries to do. */
.media-clip { height: 280px; width: 100%; overflow: hidden; border-radius: 10px; }
.media-clip > .media-frame { width: 100%; height: 100%; }
/* Fallback height for media iframes that aren't wrapped in .media-clip (e.g. the
   home-page episode cards). The .media-clip > .media-frame rule above has higher
   specificity, so iframes inside the clip wrapper still get 100% of the 280px clip. */
.audio-frame, .video-frame { height: 280px; }

.media-fallback {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    padding: .8rem;
    color: var(--ink-soft);
    font-size: .88rem;
}

.portal-banner {
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    margin-bottom: 1rem;
    background: linear-gradient(120deg, var(--brand-dark) 0%, #e8742e 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: var(--shadow-lg);
}

.portal-banner h2 { color: #fff; margin-bottom: .35rem; }
.portal-banner p { color: rgba(255, 255, 255, .92); margin: 0; max-width: 65ch; }
.portal-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; color: #ffe4d2; }
.portal-cta { display: flex; flex-wrap: wrap; gap: .5rem; }

.episode-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .95rem;
    margin-top: .9rem;
}

.episode-title { font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.episode-title:hover { color: var(--accent); }
.episode-head { margin-bottom: .35rem; }
.episode-actions { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .45rem; }

.pagination-row {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, .52);
    z-index: 260;
}

.modal-shell {
    position: fixed;
    z-index: 270;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(780px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}

.rich-toolbar button {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    border-radius: 8px;
    padding: .3rem .55rem;
    font: inherit;
}

.rich-toolbar button:hover { background: var(--bg); }

.rich-editor {
    min-height: 140px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: .8rem .9rem;
    line-height: 1.55;
}

.rich-editor.short { min-height: 120px; }
.rich-editor.full { min-height: 260px; }
.rich-editor:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.rich-preview {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: .8rem .9rem;
}

a[aria-disabled="True"], a[aria-disabled="true"] {
    pointer-events: none;
    opacity: .45;
}

@media (max-width: 840px) {
    .portal-banner { flex-direction: column; align-items: flex-start; }
}

/* quiz */
.quiz-q { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1rem; margin-bottom: .8rem; }
.quiz-q .q { font-weight: 600; margin-bottom: .5rem; }
.quiz-opt { display: flex; align-items: flex-start; gap: .5rem; padding: .3rem .4rem; border-radius: 7px; cursor: pointer; }
.quiz-opt:hover { background: var(--bg); }
.quiz-opt input { margin-top: .3rem; }
.quiz-feedback { margin-top: .5rem; font-size: .88rem; padding: .5rem .7rem; border-radius: 7px; }
.quiz-feedback.ok { background: var(--brand-soft); color: var(--brand-dark); }
.quiz-feedback.no { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------- forms */
.field { margin-bottom: 1rem; }
.field > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.field .hint { font-size: .8rem; color: var(--ink-faint); margin-top: .25rem; }
.field input[type=text], .field input[type=number], .field input[type=date], .field input[type=email],
.field textarea, .field select {
    width: 100%; padding: .5rem .65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    font: inherit; color: var(--ink); background: var(--surface);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field textarea { min-height: 4.5rem; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.inline-choice { display: flex; gap: 1.2rem; flex-wrap: wrap; padding-top: .15rem; }
.inline-choice label { font-weight: 500; display: flex; align-items: center; gap: .35rem; }

/* inline panel that opens under a button */
.action-panel {
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 1rem 1.1rem;
    background: var(--bg); margin-top: .9rem;
}
.action-panel h4 { margin: 0 0 .8rem; font-size: .98rem; }

/* drop zone */
.dropzone {
    border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg);
    padding: 1.1rem; text-align: center; color: var(--ink-faint); font-size: .9rem;
}

/* toast */
.toast {
    position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
    background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 999px; font-size: .9rem;
    box-shadow: var(--shadow-lg); z-index: 200; max-width: 90vw; text-align: center;
}

/* misc */
.muted { color: var(--ink-faint); }
.nowrap { white-space: nowrap; }
.tag-na { opacity: .55; }
.callout { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: .8rem 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .92rem; }
.callout.warn { background: var(--gold-soft); border-left-color: var(--gold); }
.factor-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.factor-table td, .factor-table th { padding: .35rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.factor-table td:last-child, .factor-table th:last-child { text-align: right; white-space: nowrap; }
.factor-table tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: none; }

.section-gap { margin-top: 1.8rem; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stack-sm > * + * { margin-top: .5rem; }
.stack > * + * { margin-top: 1rem; }

/* ---------------------------------------------------------- media + CTA cards (episode page) */
/* Override the .grid display for these rows with flex. Grid's align-items
   stretch wasn't actually equalizing the two cards in practice — the audio
   card kept rendering taller and starting at a different Y than the video
   card. Flex is more predictable here: align-items: stretch + flex: 1 1 0
   gives both items identical widths AND heights, top-aligned at the row
   start. Selector specificity (three classes) beats the .grid.cols-2 rule
   without needing !important. */
.grid.cols-2.media-row,
.grid.cols-2.cta-row {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}
.grid.cols-2.media-row > *,
.grid.cols-2.cta-row > * { flex: 1 1 0; min-width: 0; }

/* Cancel the global `.card2 + .card2 { margin-top: 1rem }` rule (which is for
   vertically stacked cards) when two .card2 elements sit side-by-side as flex
   items in these rows. Without this, the second card gets pushed 16px down
   from the top of the row even though they're visually side-by-side, which
   broke top-edge alignment. */
.grid.cols-2.media-row > .card2 + .card2,
.grid.cols-2.cta-row > .card2 + .card2 { margin-top: 0; }

.cta-card { display: flex; flex-direction: column; }
.cta-card .cta-sub { margin-top: -.2rem; margin-bottom: 1rem; }
.cta-card .cta-actions { margin-top: auto; }

@media (max-width: 640px) {
    .grid.cols-2.media-row,
    .grid.cols-2.cta-row { flex-direction: column; }
}

/* ---------------------------------------------------------- related episodes (episode page) */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: .2rem;
}
@media (max-width: 820px) { .related-grid { grid-template-columns: 1fr; } }

.related-card {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .9rem 1rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink) !important;
    text-decoration: none !important;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.related-card:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 35, 50, .08);
}
.related-card .related-num {
    font-size: .72rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--brand-dark);
}
.related-card .related-title {
    font-weight: 650; line-height: 1.25; color: var(--ink);
    /* clamp to 2 lines max so cards stay even */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.related-card .related-teaser {
    font-size: .85rem; color: var(--ink-soft); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------------------------------------------------------- demoted prev/next nav under related */
.ep-secondary-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    font-size: .82rem; color: var(--ink-faint);
    padding-top: 1rem; border-top: 1px solid var(--line);
}
.ep-secondary-nav a { color: var(--ink-soft); }
.ep-secondary-nav a:hover { color: var(--brand-dark); }

/* ---------------------------------------------------------- key takeaways (episode page) */
ul.takeaways {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
}
ul.takeaways li {
    position: relative;
    padding: .55rem 0 .55rem 2.2rem;
    line-height: 1.5;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}
ul.takeaways li:last-child { border-bottom: 0; }
ul.takeaways li::before {
    content: "🛡";
    position: absolute;
    left: 0;
    top: .55rem;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
}

/* ---------------------------------------------------------- auth pages (Signup, Login, ForgotPassword, ResetPassword) */
.auth-card-wrap { max-width: 480px; margin: 2rem auto 0; }
.auth-card-wrap .card2 { padding: 1.6rem 1.8rem; }
.auth-card-wrap h1 { margin-bottom: .15rem; }
.auth-card-wrap .lede { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.2rem; }
.auth-card-wrap .alt-link { margin-top: 1.2rem; font-size: .9rem; color: var(--ink-soft); text-align: center; }
.auth-card-wrap .field .validation-message { display: block; }

/* ---------------------------------------------------------- Blazor framework bits */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: .85rem; }

.blazor-error-boundary {
    background: #b32121; padding: 1rem 1rem; color: white; border-radius: var(--radius-sm);
}
.blazor-error-boundary::after { content: "Something went wrong displaying this section."; }