/* =========================================================================
   UNTP Textile Demonstrator — Main Stylesheet
   Aesthetic: Industrial utilitarian — clean, structured, high-contrast.
   Fonts: DM Sans (body) + JetBrains Mono (data/code)
   ========================================================================= */

:root {
    --color-bg: #f5f3ef;
    --color-surface: #ffffff;
    --color-surface-alt: #eae7e1;
    --color-border: #d1cdc5;
    --color-border-strong: #9b9588;
    --color-text: #1a1814;
    --color-text-secondary: #5c5850;
    --color-text-muted: #8a847a;
    --color-accent: #c45d2c;
    --color-accent-hover: #a84b22;
    --color-success: #2e7d4f;
    --color-warning: #b8860b;
    --color-error: #b5332e;
    --color-info: #2f6690;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 3px rgba(26,24,20,0.06);
    --shadow-md: 0 2px 8px rgba(26,24,20,0.08);
    --max-width: 960px;
}

/* ── Reset & Base ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-border); }

img { max-width: 100%; height: auto; }

/* ── Layout ── */

.site-header {
    background: var(--color-text);
    color: var(--color-bg);
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1500;
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-bg);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}
.logo:hover { text-decoration: none; color: var(--color-surface-alt); }
.logo-mark { color: var(--color-accent); font-size: 1.1rem; }
.logo-version {
    font-size: 0.65rem;
    font-family: var(--font-mono);
    background: rgba(255,255,255,0.12);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

.header-nav { display: flex; gap: 1.25rem; align-items: center;}

.header-nav a {
    color: rgba(245,243,239,0.7);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.header-nav a:hover { color: var(--color-bg); text-decoration: none; }
/* Scan button in the header — primary button style, sized for the 52px bar */

.header-nav .header-btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.site-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 1.5rem;
    min-height: calc(100vh - 52px - 60px);
}

.site-footer {
    text-align: center;
    padding: 1.25rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    border-top: 1px solid var(--color-border);
}

/* ── Alerts ── */

.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    border-color: red;
    border-style: dotted;
    border-width: 2px;
}

.alert-error {
    background: #fdf0ef;
    border-left: 3px solid var(--color-error);
    color: var(--color-error);
}

/* ── Buttons ── */

.btn {
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    text-align: center;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.btn-primary:hover { color: var(--color-bg); background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-border-strong); }

/* ── Forms / Inputs ── */

.input-field {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.15s;
}
.input-field:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(196,93,44,0.12);
}

/* =========================================================================
   SCAN PAGE
   ========================================================================= */

.scan-hero {
    text-align: center;
    margin-bottom: 2rem;
}
.scan-hero h1 {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.scan-subtitle {
    color: var(--color-text-secondary);
    margin-top: 0.35rem;
}

.scan-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 700px) {
    .scan-layout { grid-template-columns: 1fr; }
}

.scan-camera-section, .scan-manual-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}
.scan-camera-section h2, .scan-manual-section h2 {
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.scanner-viewport {
    width: 100%;
    min-height: 260px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.scanner-status {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    font-family: var(--font-mono);
}
.scanner-controls {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
}

.manual-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.manual-form label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.manual-examples { margin-top: 1rem; }
.examples-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}
.example-chip {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    margin: 0.2rem 0.25rem 0.2rem 0;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s;
}
.example-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* =========================================================================
   CREDENTIAL PAGE
   ========================================================================= */

.credential-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.credential-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;  /* allow text to wrap inside flex/grid parents */
}

.credential-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-top: 2rem;
    margin-left: 0;
    line-height: 1.2;
    word-wrap: break-word;
}

.credential-type-badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
    height: auto;
    white-space: normal;
    max-width: 100%;
}

.badge-dpp { background: #cae6bc; color: #2e5e1e; }
.badge-dcc { background: #e4ecf5; color: #1e3f6e; }
.badge-dte { background: #f3ddb4; color: #6e4e1e; }
.badge-dfr { background: #ede4f5; color: #4e1e6e; }
.badge-unknown { background: var(--color-surface-alt); color: var(--color-text-secondary); }
.event-subtype { font-weight: 400; margin-left: 0.25rem; opacity: 0.75; }

/* ── Issuer Badge ── */

.issuer-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}
.issuer-verified { background: #e8f0e4; color: var(--color-success); }
.issuer-partial { background: #fef6e4; color: var(--color-warning); }
.issuer-failed { background: #fdf0ef; color: var(--color-error); }
.issuer-unchecked { background: var(--color-surface-alt); color: var(--color-text-muted); }
.badge-icon { font-size: 1rem; }
.badge-algo {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    opacity: 0.7;
}
.badge-errors { font-size: 0.75rem; margin-top: 0.25rem; }
.badge-error { display: block; color: var(--color-error); }

.badge-warnings {
    margin-top: 0.25rem;
}

.badge-warning {
    display: block;
    font-size: 0.8rem;
    color: #92600a;
    background: #fef3cd;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    margin-top: 0.15rem;
}

/* ── Role Switcher ── */

.role-switcher-bar {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.role-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.role-switcher-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.role-buttons { display: flex; gap: 0.35rem; }
.role-btn {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    transition: all 0.15s;
}
.role-btn:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.role-btn-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.role-btn-active:hover { color: #fff; }
.variant-notice {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ── Credential Meta ── */

.credential-meta {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.meta-aka{
   margin-top: 0.5rem;
}
.meta-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.15rem;
}
.meta-value {
    display: block;
    font-size: 0.92rem;
    font-weight: 500;
}
.meta-detail {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    word-break: break-all;
    margin-bottom: 0.5rem;
}

/* ── Content Sections ── */

.content-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.content-section h2 {
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 0.85rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--color-border);
}
.content-section h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 1rem 0 0.6rem 0;
}
.content-section h4 {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0.75rem 0 0.4rem 0;
}

/* ── Detail Grid ── */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.65rem 1.5rem;
}
.detail-full { grid-column: 1 / -1; }
.detail-half {
    grid-column: span 2;
}
.detail-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.detail-value {
    display: block;
    font-size: 1.0rem;
}
.link-follow {
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.35rem;
}

/* location hack */

.location-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.location-split--no-map {
    grid-template-columns: 1fr;
}
.location-map {
    min-height: 300px;
}
.location-map #facility-map {
    height: 300px;
    border-radius: 6px;
    border: 1px solid #ddd;
}
@media (max-width: 720px) {
    .location-split {
        grid-template-columns: 1fr;
    }
}


/* ── Card Grid ── */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

/* ── Claim Cards ── */

.claim-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.claim-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.claim-name { font-weight: 600; font-size: 1rem; }
.topic-badge {
    font-size: 0.68rem;
    padding: 0.1rem 0.45rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}
.claim-description {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}
.performance-metrics { margin: 0.5rem 0; }
.metric-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.3rem 0;
    font-size: 0.88rem;
}
.metric-name { color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 600; line-height: 1.1; margin-bottom: 5px; }
.metric-value { font-weight: 600; font-family: var(--font-mono); font-size: 1rem; }
.metric-value small { font-weight: 400; opacity: 0.65; }
.score-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background: var(--color-info);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono);
}
.claim-refs {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
}
.ref-label { font-weight: 500; }
.ref-item { margin-left: 0.25rem; }
.claim-evidence { margin-top: 0.5rem; }
.evidence-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
}
.claim-date {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* ── Material Cards ── */

.material-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem;
}
.material-name { font-weight: 600; font-size: 1.0rem; margin-bottom: 0.3rem; }
.material-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
.hazard-badge {
    color: var(--color-error);
    font-weight: 600;
}

/* ── Product Ref Cards (DTE) ── */

.product-ref-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.product-ref-name { font-weight: 500; }
.product-ref-qty { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-text-secondary); }

/* ── Classification Tags ── */

.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.classification-tag {
    padding: 0.25rem 0.6rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.classification-tag small { color: var(--color-text-muted); font-size: 0.72rem; }

/* ── Document Links ── */

.document-list { display: flex; flex-direction: column; gap: 0.35rem; }
.document-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    transition: border-color 0.15s;
}
.document-link:hover { border-color: var(--color-accent); text-decoration: none; }
.doc-name { font-weight: 500; }
.doc-type { font-size: 0.72rem; color: var(--color-text-muted); font-family: var(--font-mono); }

/* ── Label Grid ── */

.label-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.label-item {
    text-align: center;
    max-width: 120px;
}
.label-item img {
    max-height: 80px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.label-name { font-size: 0.72rem; color: var(--color-text-muted); display: block; margin-top: 0.25rem; }

/* ── Conformance ── */

.conformance-pass { color: var(--color-success); font-weight: 700; }
.conformance-fail { color: var(--color-error); font-weight: 700; }

/* ── Claim Stubs ── */

.claim-stubs-section { margin-bottom: 1rem; }
.claim-stubs-section h2 {
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.6rem;
}
.claim-stubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5rem;
}
.claim-stub-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    opacity: 0.7;
}
.stub-icon {     grid-column: 1;
    grid-row: 1;
    font-size: 1rem;
    line-height: 1.3;
    align-self: center; }
.stub-description {     grid-column: 2;            /* aligns under role, not under icon → indented */
    grid-row: 2;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    flex: unset;  }
.stub-role    {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: normal;
    line-height: 1.3;
    align-self: center;
}

/* ── JSON Tree ── */

.json-tree-section {
    margin-top: 1.5rem;
}
.json-tree-section summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 0.5rem 0;
}
.json-tree {
    background: var(--color-text);
    color: #d4d0c8;
    padding: 1rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.55;
    max-height: 500px;
    overflow-y: auto;
}

/* ── Render Template Iframe ── */

.render-template-section { margin-bottom: 1.5rem; }
.render-template-section summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.render-iframe {
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
    background: #fff;
}

/* ───────────────────────────────────────────────────────────────
   Product section additions
   ─────────────────────────────────────────────────────────────── */

/* Granularity pill — sits as the value in a detail-grid row,
   visually grouped with model / batch / serial numbers so the user
   sees what level of data the credential actually represents. */
.granularity-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1.4;
}

.granularity-model {
    background: #e0e7ff;   /* indigo-100 */
    color: #3730a3;        /* indigo-800 */
}

.granularity-batch {
    background: #fef3c7;   /* amber-100 */
    color: #92400e;        /* amber-800 */
}

.granularity-item {
    background: #d1fae5;   /* emerald-100 */
    color: #065f46;        /* emerald-800 */
}

/* Product identity layout: details on the left (~70%),
   image on the right (~30%). Image stretches vertically to match
   the height of the data block, so it visually pairs with the rows.
   Stacks on mobile (image below). */
.product-identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 28%);
    gap: 1.5rem;
    align-items: stretch;
}

.product-image {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 0; /* allow flex item to shrink in grid */
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-surface, #fff);
    display: block;
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px dashed var(--border-color, #d1d5db);
    border-radius: 6px;
    color: var(--text-muted, #9ca3af);
    background: var(--bg-muted, #f9fafb);
    font-size: 0.85rem;
}

/* Mobile: stack image below details, full width, capped height */
@media (max-width: 640px) {
    .product-identity {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .product-image img {
        object-fit: contain;
        max-height: 240px;
        height: auto;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    .product-image-placeholder {
        max-height: 240px;
        height: auto;
    }
}


.classification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
 
.classification-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-surface, #fff);
}
 
.classification-scheme {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
}
 
.classification-main {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary, #111827);
}
 
.classification-code {
    font-variant-numeric: tabular-nums;
}
 
.classification-name {
    font-weight: 600;
}
 
/* Definition — clamped to 3 lines so long ones don't dominate the card */
.classification-definition {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary, #4b5563);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
/* Scheme URL — small muted link at the bottom of the card */
.classification-scheme-link {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    word-break: break-all;
    margin-top: auto;
}
 
.classification-scheme-link:hover {
    color: var(--accent-color, #2563eb);
    text-decoration: underline;
}
 

/* Cross-credential link — used when a value points to another resolvable
   credential (e.g. facility name → DigitalFacilityRecord). */
.cross-credential-link {
    color: var(--accent-color, #2563eb);
    text-decoration: none;
    font-weight: 500;
}
 
.cross-credential-link:hover {
    text-decoration: underline;
}
 
/* Secondary line beneath a detail-value (e.g. registeredId under
   facility name). Muted, smaller, sits on its own line. */
.detail-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin-top: 0.15rem;
}
 
/* Muted ISO country code in parens after the country name. */
.country-code {
    color: var(--text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}
 

/* */

 
.material-pie-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-surface, #fff);
}
 
.material-pie {
    width: 120px;
    height: 120px;
    align-self: center;
    display: block;
}
 
.material-pie path {
    stroke: var(--bg-surface, #fff);
    stroke-width: 1;
}
 
/* Legend stacks vertically inside the card */
.pie-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
}
 
.pie-legend li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.4;
}
 
.pie-legend .legend-swatch {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
 
.pie-legend .legend-pct {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #6b7280);
}
 
.pie-legend .legend-unspecified {
    color: var(--text-muted, #6b7280);
    font-style: italic;
}
 
/* Material card border-left accent — colored to match the pie slice. */
.material-card {
    border-left: 4px solid var(--border-color, #e5e7eb);
}
 
.material-type {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 4px;
    background: var(--bg-muted, #f9fafb);
}
 
.material-type-scheme {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
}
 
.material-type-main {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary, #111827);
}
 
.material-type-code {
    font-variant-numeric: tabular-nums;
}
 
.material-type-definition {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary, #4b5563);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
.material-type-scheme-link {
    font-size: 0.7rem;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    word-break: break-all;
    margin-top: auto;
}
 
.material-type-scheme-link:hover {
    color: var(--accent-color, #2563eb);
    text-decoration: underline;
}

/*  */



.party-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-surface, #fff);
}
 
.party-role {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--bg-muted, #eef2ff);
    color: var(--text-secondary, #4338ca);
    line-height: 1.4;
}
 
.party-name {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary, #111827);
    margin-top: 0.1rem;
    margin-bottom: 0.3rem;
}
 
.party-line {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary, #4b5563);
}
 
.party-line-label {
    color: var(--text-muted, #6b7280);
    margin-right: 0.3rem;
}
 
.party-line-value {
    color: var(--text-primary, #111827);
}
 
.party-scheme {
    color: var(--text-secondary, #4b5563);
    font-size: 0.8rem;
}
 
.party-scheme-link {
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    font-size: 0.75rem;
}
 
.party-scheme-link:hover {
    color: var(--accent-color, #2563eb);
}
 
.party-description {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary, #4b5563);
    font-style: italic;
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border-color, #e5e7eb);
}
 
.party-website {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    word-break: break-all;
    margin-top: auto;
    padding-top: 0.3rem;
}
 
.party-website:hover {
    color: var(--accent-color, #2563eb);
    text-decoration: underline;
}
 
 
/*  */

.issued-by-line {
    margin: 0;                 /* was 0.3rem 0.5rem 0 */
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}
 
.issuer-did {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.78rem;
    color: var(--text-secondary, #4b5563);
    background: var(--bg-muted, #f3f4f6);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    word-break: break-all;
}



/* =========================================================================
   LINKSET PICKER PAGE
   ========================================================================= */

.linkset-page h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.linkset-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.anchor-group {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.anchor-url {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: #c45d2c;
    word-break: break-all;
    margin-bottom: 0.85rem;
}

.link-type-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 0.4rem;
}
.link-targets { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.link-target-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s;
}
.link-target-card:hover { border-color: var(--color-accent); text-decoration: none; }
.target-title { font-weight: 500; font-size: 0.9rem; color: var(--color-text); }
.target-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.target-type { font-family: var(--font-mono); }
.target-role { font-style: italic; }
.idr-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--color-info);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
}
.rel-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.1rem 0.35rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}

/* =========================================================================
   BREADCRUMBS
   ========================================================================= */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-accent); }
.bc-sep { opacity: 0.4; }
.bc-current { color: var(--color-text); font-weight: 500; }

/* =========================================================================
   STRUCTURED JSON TREE (collapsible)
   ========================================================================= */

.json-tree-container {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    max-height: 600px;
    overflow-y: auto;
}

.json-node { font-size: 0.85rem; }
.json-nested { padding-left: 0.75rem; border-left: 1px solid var(--color-border); margin-left: 0.25rem; }

.json-details { margin: 0.15rem 0; }
.json-details > summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text);
    padding: 0.2rem 0;
    font-size: 0.85rem;
    list-style: none;
}
.json-details > summary::before {
    content: '▸ ';
    color: var(--color-text-muted);
    font-size: 0.7rem;
    display: inline-block;
    width: 1rem;
}
.json-details[open] > summary::before { content: '▾ '; }

.json-key { font-size: 0.85rem; }
.json-count {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.json-field {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
    font-size: 0.85rem;
}
.json-key-inline {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    min-width: 100px;
    flex-shrink: 0;
}
.json-value { font-family: var(--font-mono); font-size: 0.82rem; word-break: break-word; }
.json-value.json-string { color: var(--color-text); }
.json-value.json-number { color: var(--color-info); }
.json-value.json-bool { font-weight: 600; }
.json-value.json-true { color: var(--color-success); }
.json-value.json-false { color: var(--color-error); }
.json-value.json-null { color: var(--color-text-muted); font-style: italic; }

.json-link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    word-break: break-all;
}
.json-cred-link {
    font-weight: 600;
    color: var(--color-accent);
}

.json-array { padding-left: 0.5rem; }
.json-array-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.1rem 0;
}
.json-index {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    min-width: 1.5rem;
    flex-shrink: 0;
}

/* =========================================================================
   Remote render template. Primary view (full-width, no wrapping chrome, full browser width) 
   ========================================================================= */

.render-template-primary {
    /* Break out of the page container to span full viewport width */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 24px;
}
 
.render-iframe-primary {
    width: 100%;
    border: none;
    border-top: 1px solid var(--color-border, #ddd);
    border-bottom: 1px solid var(--color-border, #ddd);
    background: #fff;
    display: block;
    /* Start with a reasonable minimum; JS will auto-resize */
    min-height: 400px;
    height: 800px;
    transition: height 0.3s ease;
}
 
/* Built-in renderer as collapsible fallback when remote template is active */
.builtin-renderer-section {
    margin-bottom: 16px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
}
 
.builtin-renderer-section > summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-secondary, #666);
    background: var(--color-surface, #f8f9fa);
    border-radius: 6px;
    user-select: none;
}
 
.builtin-renderer-section[open] > summary {
    border-bottom: 1px solid var(--color-border, #ddd);
    border-radius: 6px 6px 0 0;
}
 
.builtin-renderer-section > .credential-content {
    padding: 16px;
}



/* =========================================================================
   LIFECYCLE TIMELINE
   ========================================================================= */

.lifecycle-timeline h2 {
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 0.85rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--color-border);
}

.timeline {
    position: relative;
    padding-left: 1.5rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--color-border);
}

.timeline-item {
    display: block;
    position: relative;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s;
}
.timeline-item:hover { border-color: var(--color-accent); text-decoration: none; }

.timeline-marker {
    position: absolute;
    left: -1.5rem;
    top: 0.85rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border-strong);
    border: 2px solid var(--color-surface);
}
.timeline-marker-post {
    background: var(--color-accent);
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.timeline-title { font-weight: 500; font-size: 0.88rem; }
.timeline-party { font-size: 0.75rem; color: var(--color-text-muted); font-family: var(--font-mono); }
.timeline-date { font-size: 0.72rem; color: var(--color-text-muted); }
.timeline-badge-post {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: rgba(196,93,44,0.1);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
    align-self: flex-start;
}

/* =========================================================================
   MOBILE RESPONSIVENESS
   ========================================================================= */

@media (max-width: 600px) {
    .site-main { padding: 1rem; }
    .credential-header h1 { font-size: 1.3rem; }
    .issuer-did { font-size: 0.7rem; }  /* long DIDs can overflow */
    .credential-header { flex-direction: column; gap: 0.5rem; }

    .credential-meta { padding: 0.85rem 1rem; }
    .meta-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem 0.85rem; }
    .meta-value { font-size: 0.85rem; }
    .meta-detail { font-size: 0.68rem; }
    .meta-aka { margin-top: 1rem; }

    .detail-grid { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: 1fr; }
    .claim-stubs-grid { grid-template-columns: 1fr; }
    .role-buttons { flex-wrap: wrap; }
    .json-field { flex-direction: column; gap: 0.15rem; }
    .json-key-inline { min-width: unset; }
    .credential-type-badge
    .credential-type-badge {
        display: block;
        text-transform: none;
        letter-spacing: 0;
    }
    .logo { font-size: 0.7rem;}
}


/* =========================================================================
   ERROR PAGES
   ========================================================================= */

.error-page {
    text-align: center;
    padding: 4rem 1rem;
}
.error-code {
    font-family: var(--font-mono);
    font-size: 4rem;
    font-weight: 600;
    color: var(--color-border-strong);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.error-page h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.error-page p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
.error-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

/* --pills-- 
 
.granularity-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.5em;
}
.granularity-item {
    background: #e0f2fe;
    color: #0369a1;
}

*/