/*
 * Guide chrome for TritonPanels: breadcrumbs, prose tables, callouts, guide cards,
 * related-guide lists and the end-of-article CTA.
 *
 * GENERATED by scripts/guides/build-guides.mjs — do not edit by hand.
 *
 * This lives in the app's own css directory on purpose. A shared root-level
 * stylesheet 404s on a subdomain-canonical host, because the middleware rewrites
 * /css/... into /<app>/css/...
 */

/* tp */
.tp-breadcrumb {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--tp-text-muted);
}

.tp-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--tp-text-muted);
    opacity: 0.6;
}

.tp-breadcrumb a {
    color: var(--tp-text-secondary);
    text-decoration: none;
}

.tp-breadcrumb a:hover,
.tp-breadcrumb a:focus {
    color: var(--tp-text);
    text-decoration: underline;
}

.tp-prose table {
    width: 100%;
    margin: 24px 0;
    border-collapse: collapse;
    font-size: 15px;
}

.tp-prose caption {
    caption-side: bottom;
    padding-top: 10px;
    color: var(--tp-text-muted);
    font-size: 14px;
    text-align: left;
}

.tp-prose th,
.tp-prose td {
    padding: 10px 12px;
    border: 1px solid var(--tp-line);
    text-align: left;
    vertical-align: top;
}

.tp-prose thead th {
    background: var(--tp-paper-2);
    color: var(--tp-text);
    font-family: "Space Grotesk", sans-serif;
}

.tp-prose tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

.tp-prose figure {
    margin: 24px 0;
}

.tp-callout {
    margin: 24px 0;
    padding: 18px 20px;
    border-radius: var(--tp-radius);
    border: 1px solid var(--tp-border);
    background: var(--tp-paper-2);
    color: var(--tp-text-secondary);
}

.tp-callout > :first-child {
    margin-top: 0;
}

.tp-callout > :last-child {
    margin-bottom: 0;
}

.tp-callout strong {
    color: var(--tp-indigo-deep);
}

.tp-guide-list,
.tp-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-guide-card {
    padding: 24px;
    margin-bottom: 18px;
    border-radius: var(--tp-radius);
    border: 1px solid var(--tp-line);
    background: var(--tp-paper-2);
}

.tp-guide-card h2 {
    margin: 0 0 8px;
    font-size: 21px;
}

.tp-guide-card h2 a {
    color: var(--tp-text);
    text-decoration: none;
}

.tp-guide-card h2 a:hover,
.tp-guide-card h2 a:focus {
    text-decoration: underline;
}

.tp-guide-card p {
    margin: 0 0 6px;
    color: var(--tp-text-secondary);
}

.tp-guide-card .tp-meta {
    margin: 0;
}

.tp-related {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--tp-line);
}

.tp-related-list a {
    display: block;
    padding: 16px 18px;
    margin-bottom: 12px;
    border-radius: var(--tp-radius);
    border: 1px solid var(--tp-line);
    background: var(--tp-paper-2);
    color: var(--tp-text-secondary);
    text-decoration: none;
}

.tp-related-list a:hover,
.tp-related-list a:focus {
    border-color: var(--tp-border);
}

.tp-related-list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--tp-text);
    font-family: "Space Grotesk", sans-serif;
}

.tp-related-list span {
    font-size: 15px;
}

.tp-guide-cta {
    margin-top: 48px;
    padding: 28px;
    border-radius: var(--tp-radius);
    border: 1px solid var(--tp-border);
    background: var(--tp-paper-2);
}

.tp-guide-cta h2 {
    margin-top: 0;
}

.tp-guide-cta p {
    color: var(--tp-text-secondary);
}

.tp-quick-answer {
    margin: 8px 0 18px;
    padding: 14px 16px 14px 18px;
    border-left: 4px solid var(--tp-indigo-deep);
    border-radius: var(--tp-radius);
    background: var(--tp-paper-2);
    color: var(--tp-text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
}

.tp-quick-answer strong {
    color: var(--tp-indigo-deep);
}

.tp-sources {
    margin-top: 36px;
    padding-top: 8px;
}

.tp-sources a {
    color: var(--tp-indigo-deep);
}

.tp-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.tp-disclaimer {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: var(--tp-radius);
    border: 1px solid var(--tp-line);
    background: var(--tp-paper-2);
    color: var(--tp-text-secondary);
    font-size: 15px;
}