/*
 * Diataxis-Components.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Pharos Cloud documentation — Diátaxis component library
 *
 * INSTALLATION
 *   Copy to: Content/Resources/Stylesheets/Diataxis-Components.css
 *   Then add to your project's main stylesheet:
 *     @import url("Diataxis-Components.css");
 *
 * USAGE
 *   All classes are prefixed with .pc- (Pharos Cloud) to avoid conflicts
 *   with Flare's skin CSS and your existing project stylesheet.
 *
 * CONTENTS
 *   1.  CSS custom properties (brand tokens)
 *   2.  Mode badges  — .pc-badge-howto / -tutorial / -reference / -explanation
 *   3.  Prerequisites box  — .pc-prereq
 *   4.  Numbered steps  — .pc-steps / .pc-step
 *   5.  UI path  — .pc-path
 *   6.  Callout boxes  — .pc-note / .pc-warn / .pc-tip / .pc-important
 *   7.  Result box  — .pc-result
 *   8.  Option cards  — .pc-options / .pc-option
 *   9.  Related links  — .pc-related
 *   10. Feedback strip  — .pc-feedback
 *   11. Reference table  — .pc-table
 *   12. Explanation pull-quote  — .pc-pullquote
 *   13. Concept diagram caption  — .pc-diagram-cap
 *   14. Tutorial goal box  — .pc-goal
 *   15. Content gap notice  — .pc-gap
 *   16. Responsive overrides
 *
 * PHAROS BRAND COLOURS (from brand guidelines)
 *   Purple   #753BBD  (PMS 266C)  — primary brand
 *   Yellow   #F9E27D  (PMS 2002C) — accent
 *   Text     #3D3935              — body text
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ── 1. CSS CUSTOM PROPERTIES ──────────────────────────────────────────────── */
:root {
    /* Brand */
    --pc-purple:          #753BBD;
    --pc-purple-dark:     #5a2d94;
    --pc-purple-light:    rgba(117, 59, 189, 0.08);
    --pc-yellow:          #F9E27D;
    --pc-text:            #3D3935;
    --pc-text-muted:      #888B8D;
    --pc-gray-1:          #E0E0E0;
    --pc-bg:              #F7F7F8;
    --pc-white:           #ffffff;
    --pc-radius:          8px;
    --pc-radius-sm:       5px;

    /* Diátaxis mode colours */
    --pc-tutorial-color:      #753BBD;
    --pc-tutorial-bg:         rgba(117, 59, 189, 0.07);
    --pc-tutorial-border:     rgba(117, 59, 189, 0.25);

    --pc-howto-color:         #2D68C4;
    --pc-howto-bg:            #EEF3FB;
    --pc-howto-border:        rgba(45, 104, 196, 0.25);

    --pc-reference-color:     #1A7A4A;
    --pc-reference-bg:        #EDFAF3;
    --pc-reference-border:    rgba(26, 122, 74, 0.25);

    --pc-explanation-color:   #915A0A;
    --pc-explanation-bg:      #FFF8EC;
    --pc-explanation-border:  rgba(145, 90, 10, 0.25);

    /* Status */
    --pc-warn-color:     #915A0A;
    --pc-warn-bg:        #FFF8EC;
    --pc-warn-border:    #FFA400;
    --pc-note-color:     #1e3a5f;
    --pc-note-bg:        #EEF3FB;
    --pc-note-border:    #2D68C4;
    --pc-tip-color:      #1A4D2E;
    --pc-tip-bg:         #EDFAF3;
    --pc-tip-border:     #6CC24A;
    --pc-important-color:#7A1E1E;
    --pc-important-bg:   #FDF0F0;
    --pc-important-border:#CD545B;
    --pc-gap-color:      #7A1E1E;
    --pc-gap-bg:         #FDF0F0;
    --pc-gap-border:     #CD545B;
}


/* ── 2. MODE BADGES ────────────────────────────────────────────────────────── */
/*
 * Usage in topic body (above the H1):
 *   <div class="pc-badge pc-badge-howto">
 *     How-to guide
 *     <span class="pc-badge-desc">· Task-oriented · Follow these steps</span>
 *   </div>
 */
.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.pc-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

.pc-badge-desc {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.7;
}

.pc-badge-tutorial {
    background: var(--pc-tutorial-bg);
    border-color: var(--pc-tutorial-border);
    color: var(--pc-tutorial-color);
}
.pc-badge-howto {
    background: var(--pc-howto-bg);
    border-color: var(--pc-howto-border);
    color: var(--pc-howto-color);
}
.pc-badge-reference {
    background: var(--pc-reference-bg);
    border-color: var(--pc-reference-border);
    color: var(--pc-reference-color);
}
.pc-badge-explanation {
    background: var(--pc-explanation-bg);
    border-color: var(--pc-explanation-border);
    color: var(--pc-explanation-color);
}


/* ── 3. PREREQUISITES BOX ──────────────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="pc-prereq">
 *     <p class="pc-prereq-label">Before you begin</p>
 *     <ul>
 *       <li>You need X</li>
 *       <li>You need Y</li>
 *     </ul>
 *   </div>
 */
.pc-prereq {
    background: var(--pc-bg);
    border: 1px solid var(--pc-gray-1);
    border-radius: var(--pc-radius);
    padding: 16px 20px;
    margin: 0 0 24px 0;
}

.pc-prereq-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pc-text-muted);
    margin: 0 0 10px 0;
}

.pc-prereq ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pc-prereq li {
    font-size: inherit;
    color: var(--pc-text);
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.55;
}

.pc-prereq li::before {
    content: '✓';
    font-size: 11px;
    color: var(--pc-tip-color);
    font-weight: 700;
    flex-shrink: 0;
}


/* ── 4. NUMBERED STEPS ─────────────────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="pc-steps">
 *     <div class="pc-step">
 *       <div class="pc-step-num">1</div>
 *       <div class="pc-step-body">
 *         <p class="pc-step-title">Step title</p>
 *         <p>Step description.</p>
 *       </div>
 *     </div>
 *   </div>
 *
 * For optional steps add class pc-step--optional to .pc-step
 */
.pc-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 24px 0;
}

.pc-step {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #f3f3f3;
}

.pc-step:first-child {
    border-top: none;
    padding-top: 0;
}

.pc-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pc-purple);
    color: var(--pc-white);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.pc-step--optional .pc-step-num {
    background: var(--pc-purple-light);
    color: var(--pc-purple);
}

.pc-step-body {
    flex: 1;
    min-width: 0;
}

.pc-step-title {
    font-size: inherit;
    font-weight: 700;
    color: var(--pc-text);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.pc-step-optional-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pc-text-muted);
    display: block;
    margin-bottom: 3px;
}

.pc-step-body p {
    font-size: inherit;
    line-height: 1.7;
    color: var(--pc-text);
    margin: 0 0 8px 0;
}

.pc-step-body p:last-child {
    margin-bottom: 0;
}

.pc-step-body ul,
.pc-step-body ol {
    margin: 6px 0 8px 20px;
    font-size: inherit;
    line-height: 1.7;
    color: var(--pc-text);
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* ── 5. UI PATH ────────────────────────────────────────────────────────────── */
/*
 * For menu paths like Settings > Device Profiles > Scan
 * Usage:
 *   <span class="pc-path">Settings <span class="pc-path-sep">›</span> Device Profiles</span>
 */
.pc-path {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-gray-1);
    border-radius: var(--pc-radius-sm);
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-text);
    margin: 4px 0;
}

.pc-path-sep {
    color: var(--pc-text-muted);
    font-weight: 400;
    font-size: 11px;
}


/* ── 6. CALLOUT BOXES ──────────────────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="pc-note">Note text here.</div>
 *   <div class="pc-warn">Warning text here.</div>
 *   <div class="pc-tip">Tip text here.</div>
 *   <div class="pc-important">Important text here.</div>
 *
 * Add a label with: <strong class="pc-callout-label">Note</strong>
 */
.pc-note,
.pc-warn,
.pc-tip,
.pc-important {
    border-radius: var(--pc-radius-sm);
    padding: 12px 16px;
    font-size: inherit;
    margin: 12px 0;
    line-height: 1.65;
    border-left: 3px solid transparent;
}

.pc-callout-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.pc-note {
    background: var(--pc-note-bg);
    border-left-color: var(--pc-note-border);
    color: var(--pc-note-color);
}

.pc-warn {
    background: var(--pc-warn-bg);
    border-left-color: var(--pc-warn-border);
    color: var(--pc-warn-color);
}

.pc-tip {
    background: var(--pc-tip-bg);
    border-left-color: var(--pc-tip-border);
    color: var(--pc-tip-color);
}

.pc-important {
    background: var(--pc-important-bg);
    border-left-color: var(--pc-important-border);
    color: var(--pc-important-color);
}


/* ── 7. RESULT BOX ─────────────────────────────────────────────────────────── */
/*
 * Use at the end of a How-to or Tutorial to confirm the expected outcome.
 * Usage:
 *   <div class="pc-result">
 *     <p class="pc-result-label">✓ Result</p>
 *     <p>What the user can now do.</p>
 *   </div>
 */
.pc-result {
    background: var(--pc-tip-bg);
    border: 1px solid rgba(108, 194, 74, 0.3);
    border-radius: var(--pc-radius);
    padding: 16px 20px;
    margin: 24px 0;
}

.pc-result-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pc-tip-color);
    margin: 0 0 8px 0;
}

.pc-result p {
    font-size: inherit;
    color: var(--pc-text);
    line-height: 1.65;
    margin: 0;
}


/* ── 8. OPTION CARDS ───────────────────────────────────────────────────────── */
/*
 * Use when the user must choose between two or more paths.
 * Usage:
 *   <div class="pc-options">
 *     <div class="pc-option">
 *       <p class="pc-option-label">Option A</p>
 *       <p>Description</p>
 *     </div>
 *   </div>
 */
.pc-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.pc-option {
    flex: 1 1 220px;
    background: var(--pc-white);
    border: 1px solid var(--pc-gray-1);
    border-radius: var(--pc-radius);
    padding: 16px 18px;
    transition: border-color 0.15s;
}

.pc-option:hover {
    border-color: var(--pc-purple);
}

.pc-option-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pc-purple);
    margin: 0 0 8px 0;
}

.pc-option p {
    font-size: inherit;
    color: var(--pc-text);
    line-height: 1.6;
    margin: 0;
}


/* ── 9. RELATED LINKS ──────────────────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="pc-related">
 *     <p class="pc-related-label">Related</p>
 *     <ul>
 *       <li><a href="#">
 *         <span class="pc-rel-badge pc-rel-howto">How-to</span>
 *         Link title
 *       </a></li>
 *     </ul>
 *   </div>
 */
.pc-related {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--pc-gray-1);
}

.pc-related-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pc-text-muted);
    margin: 0 0 12px 0;
}

.pc-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-related a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: inherit;
    color: var(--pc-purple);
    text-decoration: none;
    font-weight: 500;
}

.pc-related a:hover {
    text-decoration: underline;
}

/* Mode badges for related links */
.pc-rel-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

.pc-rel-tutorial    { background: var(--pc-tutorial-bg);    color: var(--pc-tutorial-color); }
.pc-rel-howto       { background: var(--pc-howto-bg);       color: var(--pc-howto-color); }
.pc-rel-reference   { background: var(--pc-reference-bg);   color: var(--pc-reference-color); }
.pc-rel-explanation { background: var(--pc-explanation-bg); color: var(--pc-explanation-color); }


/* ── 10. FEEDBACK STRIP ────────────────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="pc-feedback">
 *     <span>Was this page helpful?</span>
 *     <button class="pc-fb-btn">👍 Yes</button>
 *     <button class="pc-fb-btn">👎 No — tell us why</button>
 *   </div>
 */
.pc-feedback {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 14px 18px;
    background: var(--pc-bg);
    border-radius: var(--pc-radius);
    font-size: 13px;
    color: var(--pc-text-muted);
}

.pc-fb-btn {
    font-size: 12.5px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--pc-gray-1);
    background: var(--pc-white);
    color: var(--pc-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: border-color 0.15s, color 0.15s;
}

.pc-fb-btn:hover {
    border-color: var(--pc-purple);
    color: var(--pc-purple);
}


/* ── 11. REFERENCE TABLE ───────────────────────────────────────────────────── */
/*
 * A consistently styled settings/reference table.
 * Usage:
 *   <table class="pc-table">
 *     <thead><tr><th>Setting</th><th>Values</th><th>Default</th><th>Description</th></tr></thead>
 *     <tbody><tr><td>...</td></tr></tbody>
 *   </table>
 */
.pc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: inherit;
    margin: 16px 0 28px 0;
    border: 1px solid var(--pc-gray-1);
    border-radius: var(--pc-radius);
    overflow: hidden;
}

.pc-table thead tr {
    background: var(--pc-bg);
}

.pc-table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pc-text-muted);
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--pc-gray-1);
}

.pc-table td {
    padding: 10px 14px;
    font-family: inherit;
    color: var(--pc-text);
    border-bottom: 1px solid #f3f3f3;
    vertical-align: top;
    line-height: 1.55;
}

.pc-table td:first-child {
    font-weight: 600;
    color: var(--pc-text);
    white-space: nowrap;
}

.pc-table tbody tr:last-child td {
    border-bottom: none;
}

.pc-table tbody tr:hover {
    background: var(--pc-purple-light);
}

/* Default value pill */
.pc-table .pc-default {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-gray-1);
    color: var(--pc-text-muted);
    white-space: nowrap;
}


/* ── 12. EXPLANATION PULL-QUOTE ────────────────────────────────────────────── */
/*
 * Use in Explanation topics to highlight a key concept.
 * Usage:
 *   <blockquote class="pc-pullquote">
 *     Key concept statement in one or two sentences.
 *   </blockquote>
 */
.pc-pullquote {
    border-left: 4px solid var(--pc-yellow);
    margin: 24px 0;
    padding: 14px 20px;
    background: var(--pc-bg);
    border-radius: 0 var(--pc-radius) var(--pc-radius) 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--pc-text);
    line-height: 1.55;
    font-style: normal;
}


/* ── 13. DIAGRAM / SCREENSHOT CAPTION ─────────────────────────────────────── */
/*
 * Usage:
 *   <figure class="pc-figure">
 *     <img src="..." alt="..." />
 *     <figcaption class="pc-figcaption">Caption text.</figcaption>
 *   </figure>
 */
.pc-figure {
    margin: 20px 0;
    text-align: center;
}

.pc-figure img {
    max-width: 100%;
    border: 1px solid var(--pc-gray-1);
    border-radius: var(--pc-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pc-figcaption {
    font-size: 12px;
    color: var(--pc-text-muted);
    margin-top: 8px;
    font-style: italic;
    line-height: 1.5;
}


/* ── 14. TUTORIAL GOAL BOX ─────────────────────────────────────────────────── */
/*
 * Use at the top of Tutorial topics to set expectations.
 * Usage:
 *   <div class="pc-goal">
 *     <p class="pc-goal-label">What you'll accomplish</p>
 *     <p>By the end of this tutorial...</p>
 *     <p class="pc-goal-time">⏱ Estimated time: 30 minutes</p>
 *   </div>
 */
.pc-goal {
    background: var(--pc-tutorial-bg);
    border: 1px solid var(--pc-tutorial-border);
    border-radius: var(--pc-radius);
    padding: 16px 20px;
    margin: 0 0 24px 0;
}

.pc-goal-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pc-tutorial-color);
    margin: 0 0 8px 0;
}

.pc-goal p {
    font-size: inherit;
    color: var(--pc-text);
    line-height: 1.65;
    margin: 0 0 8px 0;
}

.pc-goal p:last-child {
    margin-bottom: 0;
}

.pc-goal-time {
    font-size: 12.5px;
    color: var(--pc-tutorial-color);
    font-weight: 500;
}


/* ── 15. CONTENT GAP NOTICE ────────────────────────────────────────────────── */
/*
 * Use on topics or sections that are not yet written.
 * Usage:
 *   <div class="pc-gap">
 *     <p class="pc-gap-label">⚑ Content gap</p>
 *     <p>This topic has not been written yet. It is on the roadmap for Q3 2025.</p>
 *   </div>
 */
.pc-gap {
    background: var(--pc-gap-bg);
    border: 1px solid rgba(205, 84, 91, 0.25);
    border-left: 3px solid var(--pc-gap-border);
    border-radius: var(--pc-radius-sm);
    padding: 12px 16px;
    margin: 16px 0;
}

.pc-gap-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pc-gap-color);
    margin: 0 0 6px 0;
}

.pc-gap p {
    font-size: inherit;
    color: var(--pc-gap-color);
    line-height: 1.6;
    margin: 0;
}


/* ── 17. LEAD PARAGRAPH ────────────────────────────────────────────────────── */
/*
 * Use as the first paragraph in a topic, below the H1, to orient the reader.
 * Usage:
 *   <p class="pc-lead">Pharos Cloud is a cloud-native print management platform...</p>
 */
.pc-lead {
    font-size: 17px;
    color: var(--pc-text);
    line-height: 1.65;
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--pc-gray-1);
}


/* ── 18. DIAGRAM SECTION ───────────────────────────────────────────────────── */
/*
 * Use to wrap inline SVG diagrams. Complements pc-figure (which is for images).
 * Usage:
 *   <div class="pc-diagram-section">
 *     <svg ...></svg>
 *     <p class="pc-diagram-caption">Figure 1. Caption text.</p>
 *   </div>
 */
.pc-diagram-section {
    margin: 32px 0 40px;
    background: #fafafa;
    border: 1px solid var(--pc-gray-1);
    border-radius: 12px;
    padding: 28px 24px 20px;
}

.pc-diagram-section svg {
    display: block;
    width: 100%;
}

/* Raster diagrams (PNG/JPG) placed in a diagram section: scale to fit the
   container instead of overflowing and being cut off. */
.pc-diagram-section img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.pc-diagram-caption {
    font-size: 12px;
    color: var(--pc-text-muted);
    margin-top: 12px;
    text-align: center;
    font-style: italic;
    line-height: 1.5;
}


/* ── 19. PHASE SECTIONS ────────────────────────────────────────────────────── */
/*
 * Use in setup guides and tutorials to group steps into numbered phases.
 * Usage:
 *   <div class="pc-phase">
 *     <div class="pc-phase-header">
 *       <div class="pc-phase-number">1</div>
 *       <h2>Phase title</h2>
 *     </div>
 *     <p>Phase content...</p>
 *   </div>
 *
 * For non-numbered phases (e.g., prerequisites, verify):
 *   <div class="pc-phase-number pc-phase-number--alt">✓</div>
 */
.pc-phase {
    margin-bottom: 48px;
}

.pc-phase-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pc-gray-1);
}

.pc-phase-header h2 {
    font-size: 20px;
    font-weight: 500;
    color: var(--pc-text);
    margin: 0;
    border: none;
    padding: 0;
}

.pc-phase-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pc-purple);
    color: var(--pc-white);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.pc-phase-number--alt {
    background: var(--pc-text-muted);
}

.pc-phase-number--teal {
    background: #1D9E75;
}


/* ── 20. COMPONENT CARDS ───────────────────────────────────────────────────── */
/*
 * Use in Explanation topics to describe platform components side by side.
 * Usage:
 *   <div class="pc-component-grid">
 *     <div class="pc-component-card">
 *       <h4>Component name</h4>
 *       <p>Description.</p>
 *     </div>
 *     <div class="pc-component-card pc-component-card--teal">
 *       <h4>Secondary component</h4>
 *       <p>Description.</p>
 *     </div>
 *   </div>
 */
.pc-component-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
}

.pc-component-card {
    background: var(--pc-white);
    border: 1px solid var(--pc-gray-1);
    border-radius: var(--pc-radius);
    padding: 18px 20px;
}

.pc-component-card h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pc-purple);
    margin-bottom: 8px;
    line-height: 1.3;
}

.pc-component-card p {
    font-size: inherit;
    line-height: 1.65;
    color: var(--pc-text);
    margin: 0;
}

.pc-component-card--teal {
    border-color: #9FE1CB;
}

.pc-component-card--teal h4 {
    color: #1D9E75;
}

@media (max-width: 600px) {
    .pc-component-grid { grid-template-columns: 1fr; }
}


/* ── 21. AUTHENTICATION OPTION CARDS ───────────────────────────────────────── */
/*
 * Use when presenting mutually exclusive configuration choices (e.g., auth providers).
 * Similar to pc-options but with a "best for" label and more structured layout.
 * Usage:
 *   <div class="pc-auth-grid">
 *     <div class="pc-auth-card">
 *       <h4>Option name</h4>
 *       <p>Description.</p>
 *       <p class="pc-auth-best-for">Best for: organisations with...</p>
 *     </div>
 *   </div>
 */
.pc-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 20px 0;
}

.pc-auth-card {
    border: 1px solid var(--pc-gray-1);
    border-radius: var(--pc-radius);
    padding: 16px 18px;
    background: var(--pc-white);
}

.pc-auth-card h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pc-purple);
    margin-bottom: 8px;
    line-height: 1.3;
}

.pc-auth-card p {
    font-size: inherit;
    color: var(--pc-text);
    line-height: 1.55;
    margin: 0 0 8px;
}

.pc-auth-best-for {
    font-size: 12px !important;
    color: var(--pc-text-muted) !important;
    font-style: italic;
    margin: 0 !important;
}

@media (max-width: 600px) {
    .pc-auth-grid { grid-template-columns: 1fr; }
}


/* ── 22. INLINE TAG PILLS ──────────────────────────────────────────────────── */
/*
 * Use inside table cells to indicate status, requirement, or category.
 * Usage:
 *   <span class="pc-tag pc-tag-required">Required</span>
 *   <span class="pc-tag pc-tag-optional">Optional</span>
 *   <span class="pc-tag pc-tag-cloud">Cloud only</span>
 */
.pc-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pc-tag-required {
    background: var(--pc-howto-bg);
    color: var(--pc-howto-color);
}

.pc-tag-optional {
    background: var(--pc-reference-bg);
    color: var(--pc-reference-color);
}

.pc-tag-cloud {
    background: var(--pc-tutorial-bg);
    color: var(--pc-tutorial-color);
}

.pc-tag-warning {
    background: var(--pc-warn-bg);
    color: var(--pc-warn-color);
}


/* ── 23. FEATURE TABLE (dark header variant) ───────────────────────────────── */
/*
 * A table variant with a solid purple header row.
 * Use for comparison tables and feature matrices where visual weight helps.
 * For reference/settings tables use pc-table instead.
 * Usage:
 *   <table class="pc-table pc-table--feature">
 *     <thead><tr><th>Component</th><th>What it does</th><th>When you need it</th></tr></thead>
 *     <tbody>...</tbody>
 *   </table>
 */
.pc-table--feature thead tr {
    background: var(--pc-purple);
}

.pc-table--feature th {
    background: var(--pc-purple);
    color: var(--pc-white);
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: none;
}

.pc-table--feature th:first-child { border-radius: 8px 0 0 0; }
.pc-table--feature th:last-child  { border-radius: 0 8px 0 0; }

.pc-table--feature td { border-bottom: 1px solid var(--pc-gray-1); }

.pc-table--feature tbody tr:nth-child(even) td { background: #fafafa; }

.pc-table--feature tbody tr:last-child td { border-bottom: none; }


/* ── 16. RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pc-options {
        flex-direction: column;
    }

    .pc-table {
        font-size: 12.5px;
    }

    .pc-table th,
    .pc-table td {
        padding: 8px 10px;
    }

    .pc-step {
        gap: 12px;
    }

    .pc-badge {
        font-size: 11px;
        pa