/* Support and crisis plan (public/support-plan.html) — only what is unique to this page.
   Shared layout, type, cards, and CTA styles live in base.css.
   The artifact's tabs, rest buttons, and copy buttons are replaced with static
   markup, so the page works without JavaScript like the rest of the site. */

/* ---------- Crisis strip, pinned above the masthead ---------- */
/* Keep in-page jumps (skip link, #anchors) from landing under the pinned strip. */
html { scroll-padding-top: 6rem; }

@media (max-width: 480px) {
    html { scroll-padding-top: 9rem; }
}

.help-now {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--safety-soft);
    border-bottom: 1px solid var(--rule);
    font-size: 0.92rem;
}

.help-now-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    align-items: baseline;
}

@media (max-width: 480px) {
    .help-now-inner { padding: 10px 16px; }
}

.help-now strong { color: var(--safety); }

.num-txt {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

/* ---------- Draft status chips ---------- */
.status {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status li {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink-muted);
}

.status li.pending { border-color: var(--safety); color: var(--safety); }

.hero h1 em { font-style: italic; font-weight: 500; color: var(--accent); }

/* ---------- Break promise ---------- */
.break-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

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

.promises {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.promises li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    font-size: 0.97rem;
    color: var(--ink-muted);
}

.promises svg { margin-top: 5px; color: var(--accent); }
.promises strong { display: block; color: var(--ink); }

.sheet { margin: 0; }

.sheet .say {
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--ink);
    margin: 6px 0 14px;
}

.rest-opts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.rest-opts li {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--surface-line);
    background: var(--bg);
}

.rest-opts .opt-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    color: var(--ink);
}

.rest-opts .opt-label span {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.card .rest-opts .opt-reply {
    margin-top: 4px;
    font-size: 0.88rem;
    font-style: italic;
}

.card .sheet-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
    font-size: 0.88rem;
}

/* ---------- Four levels of care ---------- */
.ladder {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rung {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    position: relative;
    padding-bottom: 24px;
}

.rung:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 3px;
    background: var(--path-soft);
    border-radius: 2px;
}

.rung-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    border: 2px solid var(--c);
    color: var(--c);
    background: var(--surface);
}

.rung .card { border-top: 4px solid var(--c); min-width: 0; }

.rung .tier {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c);
    margin: 0 0 4px;
}

.rung.r1 { --c: var(--accent); }
.rung.r2 { --c: var(--waypoint); }
.rung.r3 { --c: var(--safety); }
.rung.r4 { --c: var(--safety); }

/* Level 4 gets a filled marker so the top of the ladder reads as the most urgent. */
.rung.r4 .rung-num { background: var(--safety); color: var(--surface); }

.cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 12px;
}

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

.cols h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 6px;
}

.cols ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.93rem;
    color: var(--ink-muted);
}

.cols li { margin-bottom: 4px; }

.card .trigger { margin-top: 12px; font-size: 0.9rem; }
.card .trigger strong { color: var(--ink); }

/* ---------- Sample conversations ---------- */
.convos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.convo { display: grid; gap: 12px; }

.convo h3 { font-size: 1.05rem; margin: 0; }

.msg {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.95rem;
    color: var(--ink);
}

.msg.user {
    justify-self: end;
    background: var(--accent-soft);
    border-bottom-right-radius: 4px;
}

.msg.cairn {
    justify-self: start;
    background: var(--bg);
    border: 1px solid var(--surface-line);
    border-bottom-left-radius: 4px;
}

.msg .who {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 2px;
}

.card .convo-note {
    font-size: 0.86rem;
    border-top: 1px dashed var(--rule);
    padding-top: 10px;
}

/* ---------- Crisis resources ---------- */
.card.urgent {
    background: var(--safety-soft);
    border-color: var(--safety);
}

.card-grid.two-up .wide { grid-column: 1 / -1; }

.ways {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 0.95rem;
}

.ways .num-txt { font-size: 1.05rem; }

/* ---------- Never list ---------- */
.never {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    color: var(--ink-muted);
}

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

.never li { position: relative; padding-left: 26px; }

.never li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.8em;
    width: 12px;
    height: 2px;
    background: var(--safety);
}

/* ---------- Standards tables ---------- */
.table-wrap {
    overflow-x: auto;
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--surface-line);
    border-radius: 10px;
}

.std {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
    font-size: 0.9rem;
}

.std th,
.std td {
    text-align: left;
    vertical-align: top;
    padding: 12px 14px;
    border-bottom: 1px solid var(--surface-line);
    color: var(--ink-muted);
}

.std thead th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--bg);
}

.std tbody th { width: 34%; font-weight: 700; color: var(--ink); }

.std tbody th small {
    display: block;
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--ink-faint);
}

.std tbody tr:last-child > * { border-bottom: 0; }

.subhead { margin-top: 36px; }

/* ---------- Upkeep and sources ---------- */
.upkeep {
    padding-left: 1.3em;
    color: var(--ink-muted);
}

.upkeep li { margin-bottom: 10px; max-width: 70ch; }
.upkeep strong { color: var(--ink); }

.sources {
    padding-left: 1.2em;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.sources li { margin-bottom: 8px; max-width: 72ch; }

/* ---------- Read-first notice (AI disclosure and published-protocol statement) ---------- */
.notice {
    background: var(--safety-soft);
    border: 2px solid var(--safety);
    border-radius: 10px;
    padding: 24px 26px;
}

@media (max-width: 480px) {
    .notice { padding: 20px 16px; }
}

.notice .eyebrow { color: var(--safety); }

.notice h2 { margin-top: 0; }

.notice-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    color: var(--ink);
}

.notice-list strong { color: var(--ink); }

.notice-law {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--safety);
    color: var(--ink);
}

.notice-law h3 { font-size: 1.05rem; margin: 0 0 6px; }
.notice-law p { margin: 0 0 10px; max-width: 70ch; }

.jump {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-weight: 600;
}

/* Phone numbers that are also tel: links keep the number style. */
a.num-txt { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- What Cairn watches for ---------- */
.watch-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
    color: var(--ink-muted);
    max-width: 70ch;
}

.watch-list strong { color: var(--ink); }

.watch-note,
.table-intro {
    margin-top: 16px;
    color: var(--ink-muted);
    max-width: 70ch;
}

.table-intro { margin: 0; }

.std.by-level tbody th { width: 18%; }
.std.by-level td strong { color: var(--safety); }

/* The level table fits a phone screen instead of scrolling sideways. */
.std.by-level { min-width: 0; table-layout: fixed; }

@media (max-width: 620px) {
    .std.by-level { font-size: 0.82rem; }
    .std.by-level th,
    .std.by-level td { padding: 10px 8px; }
    .std.by-level thead th { font-size: 0.6rem; letter-spacing: 0.04em; }
    .std.by-level tbody th { width: 22%; }
}