/* -----------------------------------------------------------------
   platform.php — page-specific styles (loaded after css/site.css).

   Covers the DTC Capabilities Periodic Table category palette, the
   status/tag badges, the capability rows, and the native <details>
   module accordions. Category palette source:
   https://www.digitaltwinconsortium.org/initiatives/capabilities-periodic-table/
----------------------------------------------------------------- */

/* Page title band (site.css does not theme #page-title) */
#page-title {
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    background: #f7f9fb;
}
#page-title h1 {
    margin: 0;
    font-size: 1.9rem;
    color: var(--heading-ink);
}
#page-title > .container > span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 1.05rem;
}

/* CPT category legend ------------------------------------------------ */
.cpt-legend { margin-bottom: 30px; }
.cpt-legend .col-6 { padding: 4px; }
.cpt-cat-card {
    padding: 14px 12px;
    border-radius: 6px;
    text-align: center;
    height: 100%;
}
.cpt-cat-card .cpt-code {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.7;
}
.cpt-cat-card h4 {
    margin: 4px 0 0 0;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}
.cpt-cat-DS { background: #D0DCEA; }
.cpt-cat-IR { background: #FAEAD5; }
.cpt-cat-IC { background: #E3DDEC; }
.cpt-cat-UX { background: #D5E4E1; }
.cpt-cat-MG { background: #EEEEEE; }
.cpt-cat-TW { background: #EDD9D5; }

/* Small inline badges used inside module cards */
.cpt-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    margin: 0 4px 4px 0;
    color: #333;
    vertical-align: middle;
}
.cpt-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: middle;
}
.cpt-status-supported { background: #d4edda; color: #155724; }
.cpt-status-moderate  { background: #fff3cd; color: #856404; }
.cpt-status-partial   { background: #ffe5d0; color: #8b4513; }
.cpt-status-backlog   { background: #e2e3e5; color: #383d41; }
.cpt-status-future    { background: #f1f1f1; color: #777; }

/* Capability rows inside a module */
.cap-row {
    padding: 12px 14px;
    border-left: 4px solid #ddd;
    margin-bottom: 10px;
    background: #fafafa;
    border-radius: 0 4px 4px 0;
}
.cap-row h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-transform: none;
    letter-spacing: 0;
}
.cap-row p { margin: 4px 0 0 0; font-size: 13px; color: #555; line-height: 1.5; }
.cap-row .cap-def { font-style: italic; color: #888; font-size: 12px; }
.cap-row.cap-DS { border-left-color: #7a99bd; }
.cap-row.cap-IR { border-left-color: #d6a36a; }
.cap-row.cap-IC { border-left-color: #9b87b8; }
.cap-row.cap-UX { border-left-color: #6fa193; }
.cap-row.cap-MG { border-left-color: #999; }
.cap-row.cap-TW { border-left-color: #b97a6e; }

/* Module accordions — native <details class="accordion-item module-toggle">.
   Base border/radius/margin/marker come from site.css; this tints the
   summary bar to its primary CPT category and lets the summary content
   (title + description + tags) wrap onto their own lines. */
details.module-toggle {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
}
details.module-toggle > summary {
    flex-wrap: wrap;
    align-items: flex-start;
    background-color: #f8f9fa;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}
details.module-toggle.mod-DS > summary { background: #D0DCEA; }
details.module-toggle.mod-IR > summary { background: #FAEAD5; }
details.module-toggle.mod-IC > summary { background: #E3DDEC; }
details.module-toggle.mod-UX > summary { background: #D5E4E1; }
details.module-toggle.mod-MG > summary { background: #EEEEEE; }
details.module-toggle.mod-TW > summary { background: #EDD9D5; }
details.module-toggle > summary .module-summary {
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    margin-top: 4px;
}
.module-tags { width: 100%; margin-top: 10px; }
details.module-toggle > .accordion-body { padding: 18px 20px; }

@media (max-width: 575px) {
    .cpt-cat-card { padding: 10px 6px; }
    .cpt-cat-card h4 { font-size: 13px; }
    details.module-toggle > summary { font-size: 15px; padding: 14px 16px; }
}