/* ════════════════ Safety Guides (/safety) ════════════════
   Migrated onto the shared ss- framework (ui.css): the page wrapper is
   .ss-page (940px line length frozen via --page-max), callouts are
   .ss-callout variants, cards are .ss-card (+ sg- layout classes),
   the eyebrow is .ss-kicker and the footer note is .ss-footnote.
   --sg-cat is injected inline per category in safety_index.html /
   safety_guide.html and drives every category accent below. */
.sg-page { --page-max: 940px; }

/* ── Hero ── */
.sg-hero { padding: 1.5rem 0 1rem; }
.sg-hero-title { font-size: 2.1rem; font-weight: 700; margin: 0.25rem 0 0.5rem; color: var(--text); }
.sg-hero-sub { font-size: 1rem; line-height: 1.6; color: var(--text-dim); max-width: 64ch; margin: 0; }
.sg-hero-meta { margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
.sg-hero-meta a { color: var(--accent); text-decoration: none; }
.sg-hero-meta a:hover { text-decoration: underline; }
.sg-dot { margin: 0 0.5rem; opacity: 0.5; }

/* ── Callouts ──
   Markup uses .ss-callout + --danger/--warning/--info/--success
   (the 'tip' variant maps to --success in safety_guide.html). */
.sg-hero-callout { margin-bottom: 2rem; }

/* ── Category sections + card grid ── */
.sg-cat { margin-top: 2.25rem; }
.sg-cat-title {
    font-size: 1.15rem; font-weight: 700; color: var(--text);
    margin: 0 0 0.9rem; padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
/* Category-coloured heading: accent underline + leading marker */
.sg-cat-title-color {
    border-bottom: 2px solid var(--sg-cat, var(--accent));
    display: flex; align-items: center; gap: 0.5rem;
}
.sg-cat-title-color::before {
    content: ''; width: 10px; height: 10px; border-radius: var(--radius-xs);
    background: var(--sg-cat, var(--accent)); flex-shrink: 0;
}
.sg-grid {
    display: grid; gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Guide cards are .ss-card .ss-card--hover in markup; this adds the
   flex layout and keeps the category-coloured hover border. */
.sg-card {
    display: flex; gap: 0.85rem; align-items: flex-start;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-decoration: none; color: inherit;
}
a.sg-card:hover { border-color: var(--sg-cat, var(--accent)); }
.sg-card-draft { opacity: 0.6; cursor: default; }
.sg-card-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sg-cat, var(--accent)) 14%, transparent);
    color: var(--sg-cat, var(--accent));
}
.sg-icon { width: 22px; height: 22px; }
.sg-card-body { min-width: 0; }
.sg-card-title {
    font-size: 0.95rem; font-weight: 600; margin: 0.1rem 0 0.3rem;
    color: var(--text); display: flex; align-items: center; gap: 0.4rem;
}
.sg-soon {
    font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.05rem 0.4rem;
}
.sg-card-summary { font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); margin: 0 0 0.4rem; }
.sg-card-time {
    font-family: var(--font-mono); font-size: 0.66rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
/* Footer note is .ss-footnote in markup; this adds the rule + spacing. */
.sg-foot-note {
    margin-top: 2.5rem;
    border-top: 1px solid var(--border); padding-top: 1rem;
}

/* ════════════════ Single guide ════════════════ */
.sg-breadcrumb { margin: 0.5rem 0 1rem; font-size: 0.85rem; }
.sg-breadcrumb a { color: var(--accent); text-decoration: none; }
.sg-breadcrumb a:hover { text-decoration: underline; }
.sg-breadcrumb-bottom { margin-top: 2.5rem; }

.sg-guide-hero {
    display: flex; gap: 1rem; align-items: flex-start;
    padding-bottom: 1.25rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.sg-guide-hero-icon {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sg-cat, var(--accent)) 14%, transparent);
    color: var(--sg-cat, var(--accent));
}
/* The eyebrow is .ss-kicker; on guide pages it takes the category color */
.sg-guide .sg-hero-eyebrow { color: var(--sg-cat, var(--accent)); }
.sg-guide-hero-icon .sg-icon { width: 28px; height: 28px; }
.sg-guide-title { font-size: 1.7rem; font-weight: 700; margin: 0.2rem 0 0.4rem; color: var(--text); }
.sg-guide-summary { font-size: 0.95rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 0.5rem; max-width: 64ch; }

.sg-guide-body { font-size: 0.92rem; line-height: 1.7; color: var(--text); }
.sg-intro { font-size: 1.02rem; line-height: 1.7; color: var(--text-dim); margin: 0 0 1.25rem; }
.sg-section { margin: 1.5rem 0; }
.sg-h2 { font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 0 0 0.6rem; }
.sg-guide-body p { margin: 0 0 0.8rem; }

/* ── Numbered steps (.ss-card --alt --sm in markup) ── */
.sg-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.sg-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.sg-step-num {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--sg-cat, var(--accent)); color: #fff; font-weight: 700; font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center;
}
.sg-step-text { display: flex; flex-direction: column; gap: 0.15rem; }
.sg-step-text strong { color: var(--text); font-weight: 600; }
.sg-step-text span { color: var(--text-dim); font-size: 0.86rem; line-height: 1.5; }

/* ── Do / Don't ── */
.sg-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin: 1.25rem 0; }
.sg-dd-col { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem 1rem; }
.sg-dd-col h3 { font-size: 0.9rem; margin: 0 0 0.5rem; }
.sg-dd-col ul { margin: 0; padding-left: 1.1rem; }
.sg-dd-col li { margin-bottom: 0.45rem; font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); }
.sg-dd-do   { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.sg-dd-do h3 { color: var(--success); }
.sg-dd-dont { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.sg-dd-dont h3 { color: var(--danger); }

/* ── Checklist ── */
.sg-checklist { list-style: none; padding: 0; margin: 0; }
.sg-checklist li {
    position: relative; padding-left: 1.8rem; margin-bottom: 0.5rem;
    font-size: 0.9rem; line-height: 1.5; color: var(--text-dim);
}
.sg-checklist li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--success); font-weight: 700;
}

/* ── ROA comparison cards (.ss-card in markup) ── */
.sg-roa-grid {
    display: grid; gap: 0.85rem; margin: 1.25rem 0;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.sg-roa-card {
    padding: var(--space-4); border-radius: var(--radius-lg);
    border-top-width: 3px;
}
/* Risk ramp: success → warning (amber) → warning-text (deep orange) →
   danger. --warning-text keeps 'higher' distinguishable from
   'moderate' while staying inside the token palette. */
.sg-risk-lower   { border-top-color: var(--success); }
.sg-risk-moderate{ border-top-color: var(--warning); }
.sg-risk-higher  { border-top-color: var(--warning-text); }
.sg-risk-highest { border-top-color: var(--danger); }
.sg-roa-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.sg-roa-name { font-size: 0.98rem; font-weight: 700; margin: 0; color: var(--text); }
.sg-risk-badge {
    flex-shrink: 0; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill);
}
.sg-risk-badge-lower   { background: var(--success-tint); color: var(--success); }
.sg-risk-badge-moderate{ background: var(--warning-tint); color: var(--warning-text); }
.sg-risk-badge-higher  { background: color-mix(in srgb, var(--warning-text) 15%, transparent); color: var(--warning-text); }
.sg-risk-badge-highest { background: var(--danger-tint); color: var(--danger); }
.sg-roa-stats { display: grid; gap: 0.4rem; margin: 0 0 0.6rem; }
.sg-roa-stats div { display: flex; gap: 0.5rem; font-size: 0.78rem; }
.sg-roa-stats dt {
    flex-shrink: 0; width: 96px; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-micro); padding-top: 0.1rem;
}
.sg-roa-stats dd { margin: 0; color: var(--text-dim); line-height: 1.4; }
.sg-roa-notes { font-size: 0.84rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 0.6rem; }
.sg-roa-tips { margin: 0; padding-left: 1.1rem; }
.sg-roa-tips li { font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); margin-bottom: 0.35rem; }

/* ── Table ── */
.sg-table-wrap { overflow-x: auto; margin: 1.25rem 0; }
.sg-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sg-table th, .sg-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
.sg-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.66rem; }
.sg-table td { color: var(--text-dim); }

/* ── Resource list (clickable reference cards) ── */
.sg-resources { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sg-resource {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-elevated); text-decoration: none; color: inherit;
    border-left: 3px solid var(--sg-cat, var(--accent));
    transition: transform var(--t-fast), border-color var(--t-fast);
}
.sg-resource:hover { transform: translateY(-2px); border-color: var(--sg-cat, var(--accent)); }
.sg-resource-name { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.sg-resource-arrow { color: var(--sg-cat, var(--accent)); font-size: 0.75rem; }
.sg-resource-desc { font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); }

/* ── Sources ── */
.sg-sources { margin-top: 2rem; }
.sg-sources ul { padding-left: 1.1rem; margin: 0.5rem 0 0; }
.sg-sources li { margin-bottom: 0.4rem; font-size: 0.86rem; }
.sg-sources a { color: var(--accent); text-decoration: none; }
.sg-sources a:hover { text-decoration: underline; }

/* ── Commandments (landing) ── */
.sg-commandments {
    margin-top: 2.25rem; padding: 1.25rem; border-radius: var(--radius-lg);
    background: var(--bg-alt); border: 1px solid var(--border);
}
.sg-commandments .sg-cat-title { border-bottom: none; margin-bottom: 0.25rem; }
.sg-commandments-intro { font-size: 0.86rem; color: var(--text-dim); margin: 0 0 1rem; max-width: 60ch; }
.sg-commandments-intro em { color: var(--text); font-style: italic; }
.sg-commandments-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0.7rem; grid-template-columns: repeat(2, 1fr);
}
.sg-commandment { display: flex; gap: 0.7rem; align-items: flex-start; }
.sg-commandment-num {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent); font-weight: 700; font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center;
}
.sg-commandment div { display: flex; flex-direction: column; gap: 0.1rem; }
.sg-commandment strong { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.sg-commandment span { color: var(--text-dim); font-size: 0.82rem; line-height: 1.45; }

/* ── Glossary (bottom of each guide) ── */
.sg-glossary {
    margin-top: 2rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-lg);
    background: var(--bg-alt); border: 1px solid var(--border);
}
.sg-glossary .sg-h2 { margin-bottom: 0.15rem; }
.sg-glossary-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.9rem; }
.sg-glossary-list { margin: 0; display: grid; gap: 0.7rem; }
.sg-glossary-item { display: grid; grid-template-columns: 150px 1fr; gap: 0.75rem; align-items: baseline; }
.sg-glossary-item dt { font-weight: 600; color: var(--sg-cat, var(--accent)); font-size: 0.86rem; }
.sg-glossary-item dd { margin: 0; color: var(--text-dim); font-size: 0.86rem; line-height: 1.5; }

@media (max-width: 768px) {
    .sg-hero-title { font-size: 1.7rem; }
    .sg-dd { grid-template-columns: 1fr; }
    .sg-guide-hero { flex-direction: column; gap: 0.75rem; }
    .sg-commandments-list { grid-template-columns: 1fr; }
    .sg-glossary-item { grid-template-columns: 1fr; gap: 0.15rem; }
}