/* ═══════════════════════════════════════════════════════════════════════
   LOMAinsights — industry gallery styles (--in-* namespace)

   Shared by /industries/ (the gallery), /industries/demo/ (the analytics
   engine), /assessment/, and the demo section on the homepage. It contains
   only layout primitives in its own namespace and touches nothing belonging
   to the healthcare demo or the logistics demo.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --in-ink: var(--ink, #17203f);
    --in-muted: var(--muted, #4e5a7c);
    --in-line: var(--line, rgba(23, 32, 63, 0.12));
    --in-line-soft: var(--line-soft, rgba(23, 32, 63, 0.07));
    --in-line-strong: var(--line-strong, rgba(23, 32, 63, 0.2));
    --in-accent: var(--accent, #357d9e);
    --in-surface: var(--surface, #fff);
    --in-surface-alt: var(--surface-alt, #f2f1ee);
    --in-ok: var(--ok, #0d6a4f);
    --in-warn: var(--warn, #8a5a00);

    --in-gap: var(--s-4);
    --in-pad: var(--s-5);
    --in-mono: var(--font-mono);
}

/* ═══ Shared page furniture ═══════════════════════════════════════════ */
.in-main {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-6) var(--gutter) var(--s-9);
}

.in-page-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.in-page-head h1 { font-size: var(--text-h2); letter-spacing: var(--track-head); margin: 0; }
.in-page-head p { margin: 0; color: var(--in-muted); max-width: var(--measure); }

.in-eyebrow {
    font-family: var(--in-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--in-muted);
    margin: 0;
}

.in-notice {
    border: 1px solid var(--in-line-strong);
    border-left-width: 3px;
    padding: var(--s-3) var(--s-4);
    font-size: var(--text-sm);
    display: grid;
    gap: var(--s-1);
}
.in-notice strong { font-weight: 700; }
.in-notice p { margin: 0; color: var(--in-muted); }
.in-notice--accent { border-left-color: var(--in-accent); }

/* ═══ Gallery ═════════════════════════════════════════════════════════ */
.in-gallery-controls {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(180px, 1fr) auto;
    gap: var(--in-gap);
    align-items: end;
    border-top: 1px solid var(--in-line-strong);
    border-bottom: 1px solid var(--in-line);
    padding: var(--s-4) 0;
}

.in-field { display: grid; gap: var(--s-2); }
.in-field label,
.in-label {
    font-family: var(--in-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--in-muted);
}

.in-field input[type="search"],
.in-field input[type="text"],
.in-field select,
.in-field textarea {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--in-ink);
    background: var(--in-surface);
    border: 1px solid var(--in-line-strong);
    border-radius: 0;
    padding: var(--s-2) var(--s-3);
    min-height: 40px;
    width: 100%;
}
.in-field textarea { min-height: 88px; resize: vertical; }
.in-field select[multiple] { min-height: 132px; }

.in-status {
    font-size: var(--text-sm);
    color: var(--in-muted);
    margin: var(--s-4) 0 0;
}
.in-status strong { color: var(--in-ink); }

.in-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1px;
    background: var(--in-line);
    border: 1px solid var(--in-line);
    margin-top: var(--s-5);
}

.in-card {
    background: var(--in-surface);
    padding: var(--in-pad);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.in-card h3 { margin: 0; font-size: var(--text-h3); letter-spacing: var(--track-tight); }
.in-card p { margin: 0; color: var(--in-muted); font-size: var(--text-sm); }
.in-card-meta {
    font-family: var(--in-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--in-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}
.in-card-actions { margin-top: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }

.in-tag {
    display: inline-block;
    border: 1px solid var(--in-line);
    padding: 2px var(--s-2);
    font-family: var(--in-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--in-muted);
}
.in-tag--accent { border-color: var(--in-accent); color: var(--in-accent); }

.in-feature-list { margin: 0; padding-left: var(--s-4); color: var(--in-muted); font-size: var(--text-sm); }
.in-feature-list li { margin-bottom: var(--s-1); }

/* ── States ── */
.in-state {
    border: 1px solid var(--in-line-strong);
    padding: var(--s-6);
    display: grid;
    gap: var(--s-3);
    justify-items: start;
}
.in-state[hidden] { display: none; }
.in-state h2 { margin: 0; font-size: var(--text-h3); }
.in-state p { margin: 0; color: var(--in-muted); max-width: var(--measure); }
.in-state--error { border-left: 3px solid var(--in-accent); }

.in-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ═══ Selected-industry preview ═══════════════════════════════════════ */
.in-preview {
    border: 1px solid var(--in-line-strong);
    border-top-width: 3px;
    padding: var(--in-pad);
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-5);
}
.in-preview h3 { margin: 0; font-size: var(--text-h3); letter-spacing: var(--track-tight); }
.in-preview p { margin: 0; color: var(--in-muted); font-size: var(--text-sm); max-width: var(--measure); }
.in-preview-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--in-line);
    border: 1px solid var(--in-line);
}
.in-preview-kpi { background: var(--in-surface); padding: var(--s-4); display: grid; gap: var(--s-1); }
.in-preview-kpi span {
    font-family: var(--in-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--in-muted);
}
.in-preview-kpi strong { font-size: 1.375rem; font-weight: 700; letter-spacing: var(--track-head); }
.in-preview-kpi small { font-size: var(--text-xs); color: var(--in-muted); font-weight: 400; }
.in-preview-def { display: grid; gap: var(--s-2); }
.in-preview-def p { font-size: var(--text-sm); }
.in-card.is-selected { outline: 2px solid var(--in-accent); outline-offset: -2px; }

/* ═══ Responsive ══════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .in-gallery-controls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .in-gallery-controls { grid-template-columns: 1fr; }
    .in-preview-kpi strong { font-size: 1.25rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Ribbon re-skin — applies only on pages using the shared public design
   (body.ribbon-public). The homepage keeps its own .home .hm-gallery
   overrides and is untouched by everything below; the industry demo
   surface keeps the base styles above.
   ═══════════════════════════════════════════════════════════════════════ */
.ribbon-public {
    --in-ink: var(--hm-on-paper);
    --in-muted: var(--hm-on-paper-muted);
    --in-line: var(--hm-line-paper);
    --in-line-soft: rgba(23, 32, 63, 0.07);
    --in-line-strong: rgba(23, 32, 63, 0.18);
    --in-accent: var(--hm-teal-deep);
    --in-surface: #fff;
    --in-surface-alt: var(--hm-paper-2);
    --in-gap: var(--hm-4);
    --in-pad: var(--hm-5);
    --in-mono: inherit;
}

.ribbon-public .in-gallery-controls {
    display: flex; flex-wrap: wrap; gap: var(--hm-4); align-items: end;
    border: 1px solid var(--hm-line-paper); border-radius: var(--hm-radius-lg);
    background: #fff; box-shadow: var(--hm-shadow);
    padding: var(--hm-5); margin-bottom: var(--hm-5);
    position: sticky; top: 76px; z-index: 20;
}
@media (max-width: 720px) { .ribbon-public .in-gallery-controls { position: static; } }

.ribbon-public .in-field { display: flex; flex-direction: column; gap: var(--hm-2); flex: 1 1 220px; min-width: 0; }
.ribbon-public .in-field:last-child { flex: 0 0 auto; justify-content: end; }
.ribbon-public .in-field label,
.ribbon-public .in-label {
    font-family: inherit; font-size: var(--hm-micro); font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--hm-on-paper-muted);
}
.ribbon-public .in-field input,
.ribbon-public .in-field select,
.ribbon-public .in-field textarea {
    width: 100%; min-height: 46px; padding: var(--hm-2) var(--hm-4);
    font: inherit; font-size: var(--hm-small); color: var(--hm-on-paper);
    background: var(--hm-paper-2); border: 1px solid var(--hm-line-paper);
    border-radius: var(--hm-radius-pill);
}
.ribbon-public .in-field textarea { border-radius: var(--hm-radius); }

.ribbon-public .in-status { font-size: var(--hm-small); color: var(--hm-on-paper-muted); margin: 0 0 var(--hm-5); }
.ribbon-public .in-status strong { color: var(--hm-on-paper); }

.ribbon-public .in-card-grid {
    display: grid; gap: var(--hm-4); margin: 0;
    background: none; border: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.ribbon-public .in-card {
    background: #fff; border: 1px solid var(--hm-line-paper); border-radius: var(--hm-radius-lg);
    padding: var(--hm-5); gap: var(--hm-3); box-shadow: var(--hm-shadow);
    transition: transform var(--hm-dur-ui) var(--hm-ease), box-shadow var(--hm-dur-ui) var(--hm-ease),
                border-color var(--hm-dur-ui) var(--hm-ease);
}
.ribbon-public .in-card:hover { transform: translateY(-3px); box-shadow: var(--hm-shadow-lift); }
.ribbon-public .in-card h3 { font-size: var(--hm-h3); letter-spacing: -0.02em; }
.ribbon-public .in-card p { color: var(--hm-on-paper-muted); font-size: var(--hm-small); }
.ribbon-public .in-card.is-selected {
    outline: none; border-color: var(--hm-teal-deep);
    box-shadow: var(--hm-shadow-lift), inset 0 3px 0 var(--hm-teal);
}
.ribbon-public .in-card-meta { font-family: inherit; gap: var(--hm-2); }
.ribbon-public .in-tag {
    font-family: inherit; font-size: var(--hm-micro); font-weight: 600; letter-spacing: 0.08em;
    border: 1px solid var(--hm-line-paper); border-radius: var(--hm-radius-pill);
    background: var(--hm-paper-2); color: var(--hm-on-paper-muted); padding: 3px var(--hm-3);
}
.ribbon-public .in-tag--accent { border-color: var(--hm-teal); color: var(--hm-teal-deep); background: rgba(81, 165, 170, 0.1); }
.ribbon-public .in-feature-list { font-size: var(--hm-small); color: var(--hm-on-paper-muted); display: grid; gap: var(--hm-1); }

.ribbon-public .in-preview {
    border: 1px solid var(--hm-line-paper); border-top: 3px solid var(--hm-teal);
    border-radius: var(--hm-radius-lg); background: #fff; box-shadow: var(--hm-shadow-lift);
    padding: clamp(20px, 3vw, 32px); gap: var(--hm-5); margin-top: var(--hm-5);
}
.ribbon-public .in-preview h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.ribbon-public .in-preview p { color: var(--hm-on-paper-muted); font-size: var(--hm-small); }
.ribbon-public .in-preview-kpis {
    background: none; border: 0; gap: var(--hm-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.ribbon-public .in-preview-kpi {
    background: var(--hm-paper-2); border: 1px solid var(--hm-line-paper);
    border-radius: var(--hm-radius); padding: var(--hm-4);
}
.ribbon-public .in-preview-kpi span { font-family: inherit; font-size: var(--hm-micro); font-weight: 600; letter-spacing: 0.08em; }
.ribbon-public .in-preview-kpi strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--hm-on-paper); }

.ribbon-public .in-state {
    border: 1px solid var(--hm-line-paper); border-radius: var(--hm-radius-lg);
    background: #fff; padding: var(--hm-6); box-shadow: var(--hm-shadow);
}
.ribbon-public .in-state--error { border-left: 3px solid var(--hm-indigo); }

.ribbon-public .in-how { margin-top: var(--hm-6); }
.ribbon-public .in-how summary { cursor: pointer; font-weight: 600; color: var(--hm-on-paper); }
.ribbon-public .in-how[open] summary { margin-bottom: var(--hm-2); }