/* Insights hub — builds on the App Kit tokens (app-kit.css loads first).
   Dark by default with a light toggle, via overriding the kit's provisional
   --kit-* tokens. When the Studio design system lands, reconcile these here. */

:root {
  --kit-bg: #0b1018; --kit-surface: #141b2b; --kit-ink: #e6ebf5; --kit-soft: #9aa6bd;
  --kit-line: #2a3346; --kit-accent: #5b8cff; --kit-accent-soft: #16243f;
  --ins-panel-2: #1a2236; --ins-chip: #1a2236; --ins-green: #4ade80; --ins-green-soft: #14301f;
  --ins-shadow: 0 1px 40px rgba(0,0,0,0.45);
}
[data-theme="light"] {
  --kit-bg: #eef2f8; --kit-surface: #ffffff; --kit-ink: #14233c; --kit-soft: #5a6678;
  --kit-line: #e3e8f0; --kit-accent: #1d4ed8; --kit-accent-soft: #eaf0fe;
  --ins-panel-2: #f7f9fc; --ins-chip: #f1f5fb; --ins-green: #15803d; --ins-green-soft: #e9f6ee;
  --ins-shadow: 0 1px 36px rgba(20,35,60,0.09);
}

body { background: var(--kit-bg); color: var(--kit-ink); font-family: 'Roboto', system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; }
.ins-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 32px 64px; }

.ins-state { padding: 64px 0; text-align: center; color: var(--kit-soft); }
.ins-state.ins-error { color: #e0746f; line-height: 1.7; }
.ins-state code { font-family: 'Roboto Mono', monospace; font-size: 13px; }

.ins-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--kit-line); }
.ins-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kit-accent); margin-bottom: 8px; }
.ins-brand h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; line-height: 1.14; margin: 0; max-width: 560px; }
.ins-brand p { color: var(--kit-soft); font-size: 14.5px; margin: 10px 0 0; max-width: 520px; }
.ins-toggle { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 600; color: var(--kit-ink); background: var(--kit-surface); border: 1px solid var(--kit-line); border-radius: 999px; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: all .2s ease; }
.ins-toggle:hover { border-color: var(--kit-accent); color: var(--kit-accent); }

.ins-controls { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.ins-search { position: relative; }
.ins-search input { width: 100%; font: inherit; font-size: 15px; color: var(--kit-ink); background: var(--kit-surface); border: 1px solid var(--kit-line); border-radius: 10px; padding: 13px 16px 13px 44px; outline: none; transition: border-color .2s ease; }
.ins-search input::placeholder { color: var(--kit-soft); }
.ins-search input:focus { border-color: var(--kit-accent); }
.ins-search .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--kit-soft); }
.ins-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-chip { font-family: 'Roboto Mono', monospace; font-size: 11.5px; font-weight: 500; color: var(--kit-soft); background: var(--ins-chip); border: 1px solid var(--kit-line); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: all .15s ease; }
.ins-chip:hover { color: var(--kit-ink); border-color: var(--kit-accent); }
.ins-chip.is-active { background: var(--kit-accent); border-color: var(--kit-accent); color: #0b1018; }
[data-theme="light"] .ins-chip.is-active { color: #fff; }
.ins-count { font-family: 'Roboto Mono', monospace; font-size: 11.5px; color: var(--kit-soft); margin-top: 22px; }

.ins-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .ins-grid { grid-template-columns: 1fr; } .ins-head { flex-direction: column; } }

.ins-card { display: flex; flex-direction: column; background: var(--kit-surface); border: 1px solid var(--kit-line); border-radius: 14px; padding: 22px 24px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ins-card:hover { transform: translateY(-3px); border-color: var(--kit-accent); box-shadow: var(--ins-shadow); }
.ins-card .bar { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--kit-accent), transparent); opacity: 0; transition: opacity .15s ease; }
.ins-card:hover .bar { opacity: 1; }
.ins-card.is-sample { cursor: default; }
.ins-card.is-sample:hover { transform: none; border-color: var(--kit-line); box-shadow: none; }
.ins-card.is-sample:hover .bar { opacity: 0; }
.ins-card.is-sample .readmore { color: var(--kit-soft); }
.ins-card .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kicker { font-family: 'Roboto Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kit-accent); }
.badge { font-family: 'Roboto Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.badge.verified { background: var(--ins-green-soft); color: var(--ins-green); }
.badge.sample { background: var(--kit-accent-soft); color: var(--kit-accent); }
.ins-card h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.28; letter-spacing: -0.01em; margin: 0 0 10px; }
.sowhat { font-size: 14px; color: var(--kit-ink); flex: 1; margin: 0 0 14px; }
.sowhat b { color: var(--kit-accent); font-weight: 600; }
.cred { display: flex; gap: 7px; font-size: 12px; color: var(--kit-soft); background: var(--ins-green-soft); border-radius: 7px; padding: 8px 11px; margin-bottom: 14px; line-height: 1.45; }
.cred .ck { color: var(--ins-green); font-weight: 700; flex-shrink: 0; }
[data-theme="light"] .cred { color: #2c5a3d; }
.metarow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.when { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--kit-soft); white-space: nowrap; }
.metarow .tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tag { font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--kit-soft); background: var(--ins-chip); border: 1px solid var(--kit-line); border-radius: 4px; padding: 3px 7px; }
.foot { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--kit-line); }
.rigor { font-family: 'Roboto Mono', monospace; font-size: 10.5px; color: var(--kit-soft); }
.readmore { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--kit-accent); }
.ins-empty { grid-column: 1 / -1; text-align: center; color: var(--kit-soft); font-size: 14px; padding: 40px 0; }

.ins-cta { margin-top: 34px; background: var(--ins-panel-2); border: 1px solid var(--kit-line); border-radius: 14px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ins-cta .t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px; }
.ins-cta .s { color: var(--kit-soft); font-size: 13.5px; margin-top: 4px; }
.ins-cta a { font-family: 'Roboto Mono', monospace; font-size: 12.5px; font-weight: 600; color: #0b1018; background: var(--kit-accent); border-radius: 999px; padding: 11px 20px; text-decoration: none; white-space: nowrap; }
[data-theme="light"] .ins-cta a { color: #fff; }

.ins-foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--kit-line); font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--kit-soft); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
.ins-foot .ok { color: var(--ins-green); }