/* =============================================================================
   ifinsta Capybara — consolidated in-app foundation

   Replaces console/core.css + console/surfaces.css + the previous capybara.css
   for every in-app surface (Capybara admin, marketplace/developer, catalog,
   discover, subscriptions, customers). Area sheets compose on top, load
   AFTER this file.

   Three parts, in cascade order:

     1  Console vocabulary — ifinsta-dev-* primitives (core.css): hero, metrics,
        panels, fields, pills, filters, project rows, plugin tabs, findings,
        rollout, wizard, empty states, choice tiles, facts, banners,
        scorecards, meters
     2  Extended surfaces — org setup, plugin list, plugin project pages, and
        the create wizard primitives (surfaces.css)
     3  Capybara adapters — ifinsta-capybara-* sections and index grid cards,
        then legacy re-skins for ifinsta-admin-* / ifinsta-stat-card /
        ifinsta-table, all scoped under .ifinsta-capybara

   Legacy JavaScript binds to the ifinsta-admin-* class names, so the adapters
   re-skin them onto the console kit's visual language rather than renaming.
   This sheet must load LAST — capybara/base.html emits it after every
   page-level sheet.

   Light-mode-first. Borders and tinted fills carry separation; no box shadows,
   per the frontend design standard.
   ============================================================================= */

/* =============================================================================
   LAYER 1 — Console vocabulary (console/core.css)
   ============================================================================= */

.ifinsta-dev-console {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-6);
    max-width: 1180px;
    margin-inline: auto;
    width: 100%;
}

/* -----------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------------- */
.ifinsta-dev-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ifinsta-space-8);
    flex-wrap: wrap;
    padding: var(--ifinsta-space-8);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-xl);
    background:
        linear-gradient(140deg, var(--ifinsta-primary-50) 0%, var(--ifinsta-surface) 62%),
        var(--ifinsta-surface);
}

.ifinsta-dev-hero__copy {
    flex: 1 1 26rem;
    min-width: 0;
}

.ifinsta-dev-hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-1) var(--ifinsta-space-2-5);
    border: 1px solid var(--ifinsta-primary-100);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface);
    color: var(--ifinsta-primary);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
}

.ifinsta-dev-hero__title {
    margin: 0 0 var(--ifinsta-space-3);
    font: var(--ifinsta-text-display);
    color: var(--ifinsta-text-primary);
    max-width: 22ch;
}

.ifinsta-dev-hero__title em {
    font-family: var(--ifinsta-font-brand-serif);
    font-style: italic;
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-primary);
}

.ifinsta-dev-hero__lede {
    margin: 0;
    max-width: 46ch;
    font: var(--ifinsta-text-body);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ifinsta-space-2);
    flex: 0 0 auto;
}

.ifinsta-dev-hero__actions .ifinsta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ifinsta-space-2);
    white-space: nowrap;
}

.ifinsta-dev-hero__actions .material-symbols-outlined {
    font-size: 18px;
}

/* -----------------------------------------------------------------------------
   Metric row
   ----------------------------------------------------------------------------- */
.ifinsta-dev-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-4) 0;
}

.ifinsta-dev-metric {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-dev-metric__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-metric__label {
    margin: 0;
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-metric__icon {
    font-size: 18px;
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-metric__icon--ok {
    color: var(--ifinsta-success-500);
}

.ifinsta-dev-metric__icon--warn {
    color: var(--ifinsta-warning-500);
}

.ifinsta-dev-metric__value {
    margin: 0;
    font: var(--ifinsta-text-display);
    line-height: 1;
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-metric__value--empty {
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-metric__unit {
    margin-left: var(--ifinsta-space-1-5);
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-metric__meter {
    height: 4px;
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface-2);
    overflow: hidden;
}

.ifinsta-dev-metric__meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ifinsta-success-500);
}

.ifinsta-dev-metric__spark {
    display: flex;
    align-items: flex-end;
    gap: var(--ifinsta-space-1);
    height: 28px;
}

.ifinsta-dev-metric__spark-bar {
    flex: 1;
    /* Zero-value days keep a 2px stub so the strip still reads as a chart. */
    min-height: 2px;
    border-radius: var(--ifinsta-radius-sm);
    background: var(--ifinsta-primary-100);
}

.ifinsta-dev-metric__spark-bar:nth-last-child(-n + 2) {
    background: var(--ifinsta-primary);
}

.ifinsta-dev-metric__foot {
    margin: 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-metric__delta {
    font-weight: var(--ifinsta-font-semibold);
}

.ifinsta-dev-metric__delta--down {
    color: var(--ifinsta-success-500);
}

.ifinsta-dev-metric__delta--up {
    color: var(--ifinsta-danger-500);
}

/* -----------------------------------------------------------------------------
   Applications + activity split
   ----------------------------------------------------------------------------- */
.ifinsta-dev-split {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: var(--ifinsta-space-4);
    align-items: start;
}

.ifinsta-dev-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ifinsta-space-4);
    margin-bottom: var(--ifinsta-space-3);
}

.ifinsta-dev-section__title {
    margin: 0;
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-section__link {
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-primary);
    text-decoration: none;
}

.ifinsta-dev-section__link:hover {
    text-decoration: underline;
}

.ifinsta-dev-apps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--ifinsta-space-3);
}

.ifinsta-dev-app {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ifinsta-dev-app:hover,
.ifinsta-dev-app:focus-visible {
    border-color: var(--ifinsta-primary);
    background: var(--ifinsta-primary-50);
}

.ifinsta-dev-app__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-app__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
    font-size: 20px;
}

.ifinsta-dev-app__badge {
    padding: var(--ifinsta-space-0-5) var(--ifinsta-space-2);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    white-space: nowrap;
}

.ifinsta-dev-app__badge--published {
    background: var(--ifinsta-success-50);
    color: var(--ifinsta-success-700, #047857);
}

.ifinsta-dev-app__badge--review {
    background: var(--ifinsta-warning-50);
    color: var(--ifinsta-warning-700, #b45309);
}

.ifinsta-dev-app__badge--deprecated {
    background: var(--ifinsta-danger-50);
    color: var(--ifinsta-danger-700, #be123c);
}

.ifinsta-dev-app__name {
    margin: 0;
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-app__code {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
    font: var(--ifinsta-text-code-sm);
    color: var(--ifinsta-text-muted);
    word-break: break-all;
}

.ifinsta-dev-app__version {
    flex: 0 0 auto;
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-app__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ifinsta-space-2);
    margin-top: auto;
    padding-top: var(--ifinsta-space-3);
    border-top: 1px solid var(--ifinsta-border);
}

.ifinsta-dev-app__meta {
    display: flex;
    flex-direction: column;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-app__meta-label {
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-app__installs {
    display: inline-flex;
    align-items: center;
    gap: var(--ifinsta-space-1);
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-app__installs .material-symbols-outlined {
    font-size: 14px;
}

.ifinsta-dev-apps__empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-6);
    border: 1px dashed var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    color: var(--ifinsta-text-muted);
    font: var(--ifinsta-text-body-sm);
}

.ifinsta-dev-apps__empty p {
    margin: 0;
}

/* Activity panel — deliberately dark to separate telemetry from authoring. */
.ifinsta-dev-activity {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ifinsta-gray-800);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-gray-900);
    overflow: hidden;
}

.ifinsta-dev-activity__head {
    padding: var(--ifinsta-space-4) var(--ifinsta-space-4) var(--ifinsta-space-3);
}

.ifinsta-dev-activity__title {
    margin: 0 0 var(--ifinsta-space-1);
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-white);
}

.ifinsta-dev-activity__status {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-1-5);
    margin: 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-gray-400);
}

.ifinsta-dev-activity__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-success-500);
}

.ifinsta-dev-activity__list {
    flex: 1;
    margin: 0;
    padding: 0 var(--ifinsta-space-4);
    list-style: none;
}

.ifinsta-dev-activity__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-2-5) 0;
    border-top: 1px solid var(--ifinsta-gray-800);
}

.ifinsta-dev-activity__event {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ifinsta-dev-activity__name {
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-gray-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ifinsta-dev-activity__ref {
    font: var(--ifinsta-text-code-sm);
    color: var(--ifinsta-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ifinsta-dev-activity__result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ifinsta-space-0-5);
    flex: 0 0 auto;
}

.ifinsta-dev-activity__pill {
    padding: var(--ifinsta-space-0-5) var(--ifinsta-space-2);
    border-radius: var(--ifinsta-radius-sm);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
}

.ifinsta-dev-activity__pill--ok {
    background: rgba(var(--ifinsta-success-rgb), 0.18);
    color: var(--ifinsta-success-500);
}

.ifinsta-dev-activity__pill--fail {
    background: rgba(var(--ifinsta-danger-rgb), 0.18);
    color: var(--ifinsta-danger-500);
}

.ifinsta-dev-activity__time {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-gray-500);
}

.ifinsta-dev-activity__empty {
    padding: var(--ifinsta-space-6) 0;
    border-top: 1px solid var(--ifinsta-gray-800);
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-gray-400);
}

.ifinsta-dev-activity__foot {
    display: block;
    padding: var(--ifinsta-space-3) var(--ifinsta-space-4);
    border-top: 1px solid var(--ifinsta-gray-800);
    background: var(--ifinsta-gray-800);
    color: var(--ifinsta-gray-100);
    font: var(--ifinsta-text-body-sm);
    text-align: center;
    text-decoration: none;
}

.ifinsta-dev-activity__foot:hover,
.ifinsta-dev-activity__foot:focus-visible {
    color: var(--ifinsta-white);
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Install trend
   ----------------------------------------------------------------------------- */
.ifinsta-dev-trend {
    padding: var(--ifinsta-space-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-dev-trend__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ifinsta-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--ifinsta-space-4);
}

.ifinsta-dev-trend__title {
    margin: 0;
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-trend__subtitle {
    margin: var(--ifinsta-space-1) 0 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-trend__filter {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-trend__filter-label {
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-trend__select {
    padding: var(--ifinsta-space-1-5) var(--ifinsta-space-2-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface);
    color: var(--ifinsta-text-primary);
    font: var(--ifinsta-text-body-sm);
}

.ifinsta-dev-trend__canvas-wrap {
    position: relative;
    height: 220px;
}

.ifinsta-dev-trend__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    border: 1px dashed var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Resource links
   ----------------------------------------------------------------------------- */
.ifinsta-dev-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--ifinsta-space-3);
}

.ifinsta-dev-link {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-1-5);
    padding: var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface-1);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ifinsta-dev-link:hover,
.ifinsta-dev-link:focus-visible {
    border-color: var(--ifinsta-primary);
    background: var(--ifinsta-surface);
}

.ifinsta-dev-link__icon {
    font-size: 20px;
    color: var(--ifinsta-primary);
}

.ifinsta-dev-link__title {
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-link__text {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   No-publisher state
   ----------------------------------------------------------------------------- */
.ifinsta-dev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-10) var(--ifinsta-space-6);
    border: 1px dashed var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    text-align: center;
}

.ifinsta-dev-empty__icon {
    font-size: 32px;
    color: var(--ifinsta-primary);
}

.ifinsta-dev-empty__title {
    margin: 0;
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-empty__text {
    margin: 0;
    max-width: 44ch;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ifinsta-dev-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .ifinsta-dev-hero {
        padding: var(--ifinsta-space-5);
    }

    .ifinsta-dev-hero__actions {
        width: 100%;
    }

    .ifinsta-dev-trend__head {
        flex-direction: column;
    }
}

/* Metric whose value is a word (a plan tier) rather than a number — the
   display size used for figures is far too large for text. */
.ifinsta-dev-metric__value--tier {
    font: var(--ifinsta-text-h2);
    line-height: 1.2;
}

/* Narrow variant for single-decision pages (cancel, confirm, outcome). */
.ifinsta-dev-console--narrow {
    max-width: 40rem;
}

/* =============================================================================
   LAYER 2 — Extended surfaces (console/surfaces.css)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Sub-page hero
   ----------------------------------------------------------------------------- */
.ifinsta-dev-subhero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ifinsta-space-6);
    flex-wrap: wrap;
    padding: var(--ifinsta-space-6);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-xl);
    background:
        linear-gradient(140deg, var(--ifinsta-primary-50) 0%, var(--ifinsta-surface) 60%),
        var(--ifinsta-surface);
}

.ifinsta-dev-subhero__copy {
    flex: 1 1 24rem;
    min-width: 0;
}

.ifinsta-dev-subhero__eyebrow {
    display: inline-block;
    margin-bottom: var(--ifinsta-space-2);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-primary);
}

.ifinsta-dev-subhero__title {
    margin: 0 0 var(--ifinsta-space-2);
    font: var(--ifinsta-text-h1);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-subhero__lede {
    margin: 0;
    max-width: 56ch;
    font: var(--ifinsta-text-body);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-subhero__actions {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    flex: 0 0 auto;
}

.ifinsta-dev-subhero__actions .ifinsta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    white-space: nowrap;
}

.ifinsta-dev-subhero__actions .material-symbols-outlined {
    font-size: 18px;
}

.ifinsta-dev-orgmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-primary);
    color: var(--ifinsta-white);
    font: var(--ifinsta-text-h2);
}

/* -----------------------------------------------------------------------------
   Panels
   ----------------------------------------------------------------------------- */
.ifinsta-dev-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    overflow: hidden;
}

.ifinsta-dev-panel--muted {
    background: var(--ifinsta-surface-1);
}

.ifinsta-dev-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-4) var(--ifinsta-space-5);
    border-bottom: 1px solid var(--ifinsta-border);
}

.ifinsta-dev-panel__title {
    margin: 0;
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-panel__title:focus-visible {
    outline: 2px solid var(--ifinsta-primary);
    outline-offset: 3px;
    border-radius: var(--ifinsta-radius-sm);
}

.ifinsta-dev-panel__subtitle {
    margin: var(--ifinsta-space-1) 0 0;
    max-width: 62ch;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-panel__figure {
    font: var(--ifinsta-text-h2);
    color: var(--ifinsta-primary);
    white-space: nowrap;
}

.ifinsta-dev-panel__body {
    padding: var(--ifinsta-space-5);
}

.ifinsta-dev-panel__foot {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    margin-top: auto;
    padding: var(--ifinsta-space-4) var(--ifinsta-space-5);
    border-top: 1px solid var(--ifinsta-border);
    background: var(--ifinsta-surface-1);
}

.ifinsta-dev-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-4);
    min-width: 0;
}

.ifinsta-dev-split--form {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

/* -----------------------------------------------------------------------------
   Form fields
   ----------------------------------------------------------------------------- */
.ifinsta-dev-field + .ifinsta-dev-field {
    margin-top: var(--ifinsta-space-5);
    border:none
}
.ifinsta-dev-field{
    border:none;
}

.ifinsta-dev-field__label {
    display: block;
    margin-bottom: var(--ifinsta-space-1-5);
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-field__input,
.ifinsta-dev-field__textarea,
.ifinsta-dev-field__select {
    width: 100%;
    padding: var(--ifinsta-space-2-5) var(--ifinsta-space-3);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface);
    color: var(--ifinsta-text-primary);
    font: var(--ifinsta-text-body);
    transition: border-color 0.15s ease;
}

.ifinsta-dev-field__input--mono {
    font-family: var(--ifinsta-font-mono);
}

.ifinsta-dev-field__textarea {
    resize: vertical;
    min-height: 6rem;
}

.ifinsta-dev-field__input:focus,
.ifinsta-dev-field__textarea:focus,
.ifinsta-dev-field__select:focus {
    outline: none;
    border-color: var(--ifinsta-primary);
}

.ifinsta-dev-field__help {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-1-5);
    margin: var(--ifinsta-space-1-5) 0 0;
    max-width: 64ch;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-field__help .material-symbols-outlined {
    font-size: 14px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.ifinsta-dev-field__help--warn {
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-field__help--warn .material-symbols-outlined {
    color: var(--ifinsta-warning-500);
}

/* Plugin ID availability badge */
.ifinsta-dev-field__badge {
    display: inline-block;
    margin-left: var(--ifinsta-space-2);
    padding: 1px var(--ifinsta-space-1-5);
    border-radius: var(--ifinsta-radius-sm);
    font: var(--ifinsta-text-caption);
    font-weight: var(--ifinsta-font-medium);
    vertical-align: middle;
    transition: background 0.2s ease, color 0.2s ease;
}

.ifinsta-dev-field__badge--checking {
    background: var(--ifinsta-surface-secondary, #f3f4f6);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-field__badge--available {
    background: var(--ifinsta-success-50, #ecfdf5);
    color: var(--ifinsta-success-600, #059669);
}

.ifinsta-dev-field__badge--taken {
    background: var(--ifinsta-danger-50, #fef2f2);
    color: var(--ifinsta-danger-600, #dc2626);
}

.ifinsta-dev-field__badge--invalid {
    background: var(--ifinsta-warning-50, #fffbeb);
    color: var(--ifinsta-warning-600, #d97706);
}

.ifinsta-dev-field__badge--error {
    background: var(--ifinsta-danger-50, #fef2f2);
    color: var(--ifinsta-danger-600, #dc2626);
}

/* Input row with inline feedback */
.ifinsta-dev-field__input-row {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-field__input-row .ifinsta-dev-field__input {
    flex: 1;
}

.ifinsta-dev-field__input-group {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: var(--ifinsta-border-width) solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface);
}

.ifinsta-dev-field__input-group:focus-within {
    border-color: var(--ifinsta-primary);
    outline: var(--ifinsta-border-width-2) solid var(--ifinsta-border-focus);
    outline-offset: calc(var(--ifinsta-border-width-2) * -1);
}

.ifinsta-dev-field__prefix {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding-inline: var(--ifinsta-space-3);
    color: var(--ifinsta-text-muted);
    background: var(--ifinsta-surface-2);
    border-inline-end: var(--ifinsta-border-width) solid var(--ifinsta-border);
    font: var(--ifinsta-text-body-sm);
}

.ifinsta-dev-field__input-group .ifinsta-dev-field__input {
    min-width: 0;
    border: 0;
    border-radius: 0;
}

.ifinsta-dev-field__input-group .ifinsta-dev-field__input:focus {
    outline: none;
}

.ifinsta-dev-field__error {
    margin: var(--ifinsta-space-1-5) 0 0;
    color: var(--ifinsta-danger-600);
    font: var(--ifinsta-text-caption);
}

.ifinsta-dev-field--invalid .ifinsta-dev-field__input-group,
.ifinsta-dev-field--invalid > .ifinsta-dev-field__input,
.ifinsta-dev-field--invalid > .ifinsta-dev-field__select {
    border-color: var(--ifinsta-danger-600);
}

[data-theme="dark"] .ifinsta-dev-field__input-group {
    background: var(--ifinsta-surface);
    border-color: var(--ifinsta-border);
}

[data-theme="dark"] .ifinsta-dev-field__prefix {
    color: var(--ifinsta-text-muted);
    background: var(--ifinsta-surface-2);
    border-color: var(--ifinsta-border);
}

.ifinsta-dev-field__avail {
    display: none;
    flex: 0 0 auto;
    max-width: 20em;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ifinsta-dev-field__avail--visible {
    display: block;
}

/* -----------------------------------------------------------------------------
   Choice tiles
   ----------------------------------------------------------------------------- */
.ifinsta-dev-choices {
    display: grid;
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-choices--cols {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.ifinsta-dev-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-3);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ifinsta-dev-choice:hover {
    border-color: var(--ifinsta-primary);
}

.ifinsta-dev-choice:has(input:checked) {
    border-color: var(--ifinsta-primary);
    background: var(--ifinsta-primary-50);
}

.ifinsta-dev-choice:focus-within {
    outline: 2px solid var(--ifinsta-primary);
    outline-offset: 2px;
}

.ifinsta-dev-choice input {
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--ifinsta-primary);
}

.ifinsta-dev-choice__body {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-0-5);
    min-width: 0;
}

.ifinsta-dev-choice__label {
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-choice__hint {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-choice__code {
    font: var(--ifinsta-text-code-sm);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Fact lists, pills, notes
   ----------------------------------------------------------------------------- */
.ifinsta-dev-facts {
    margin: var(--ifinsta-space-4) 0 0;
}

.ifinsta-dev-facts--review {
    margin-top: 0;
}

.ifinsta-dev-facts__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-2) 0;
    border-top: 1px solid var(--ifinsta-border);
}

.ifinsta-dev-facts__row:first-child {
    border-top: none;
}

.ifinsta-dev-facts dt {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-facts dd {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-primary);
    text-align: right;
    word-break: break-word;
}

.ifinsta-dev-facts__empty {
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-pill {
    display: inline-block;
    padding: var(--ifinsta-space-0-5) var(--ifinsta-space-2);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    white-space: nowrap;
}

.ifinsta-dev-pill--ok,
.ifinsta-dev-pill--approved,
.ifinsta-dev-pill--released,
.ifinsta-dev-pill--active,
.ifinsta-dev-pill--passed,
.ifinsta-dev-pill--complete,
.ifinsta-dev-pill--completed,
.ifinsta-dev-pill--resolved {
    background: var(--ifinsta-success-50);
    color: var(--ifinsta-success-700, #047857);
}

.ifinsta-dev-pill--in_review,
.ifinsta-dev-pill--beta,
.ifinsta-dev-pill--running,
.ifinsta-dev-pill--canary,
.ifinsta-dev-pill--progressive,
.ifinsta-dev-pill--pending,
.ifinsta-dev-pill--processing,
.ifinsta-dev-pill--previewed,
.ifinsta-dev-pill--acknowledged {
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
}

.ifinsta-dev-pill--changes_requested,
.ifinsta-dev-pill--paused,
.ifinsta-dev-pill--partial,
.ifinsta-dev-pill--open {
    background: var(--ifinsta-warning-50);
    color: var(--ifinsta-warning-700, #b45309);
}

.ifinsta-dev-pill--failed,
.ifinsta-dev-pill--errored,
.ifinsta-dev-pill--rolled_back,
.ifinsta-dev-pill--blocker,
.ifinsta-dev-pill--disabled {
    background: var(--ifinsta-danger-50);
    color: var(--ifinsta-danger-700, #be123c);
}

.ifinsta-dev-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
    margin-top: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-3-5);
    border: 1px solid var(--ifinsta-primary-100);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-primary-50);
}

.ifinsta-dev-note .material-symbols-outlined {
    font-size: 18px;
    color: var(--ifinsta-primary);
    flex: 0 0 auto;
}

.ifinsta-dev-note p {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-banner {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-warning-500);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-warning-50);
}

.ifinsta-dev-banner .material-symbols-outlined {
    color: var(--ifinsta-warning-700, #b45309);
    flex: 0 0 auto;
}

.ifinsta-dev-banner > div {
    flex: 1;
}

.ifinsta-dev-banner strong {
    display: block;
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-banner p {
    margin: var(--ifinsta-space-0-5) 0 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-lede {
    margin: 0 0 var(--ifinsta-space-2);
    font: var(--ifinsta-text-body-lg);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-prose {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-muted {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Resume banner
   ----------------------------------------------------------------------------- */
.ifinsta-dev-resume {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-3-5) var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-primary-100);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-primary-50);
    text-decoration: none;
}

.ifinsta-dev-resume--banner {
    justify-content: space-between;
}

.ifinsta-dev-resume__icon {
    font-size: 20px;
    color: var(--ifinsta-primary);
    flex: 0 0 auto;
}

.ifinsta-dev-resume__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ifinsta-dev-resume__text strong {
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-resume__text span {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-resume__cta {
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-primary);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Status filters
   ----------------------------------------------------------------------------- */
.ifinsta-dev-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-filters__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-1-5) var(--ifinsta-space-3);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface);
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-text-body-sm);
    text-decoration: none;
}

.ifinsta-dev-filters__item span {
    padding: 0 var(--ifinsta-space-1-5);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface-2);
    font: var(--ifinsta-text-caption);
}

.ifinsta-dev-filters__item--active {
    border-color: var(--ifinsta-primary);
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
}

.ifinsta-dev-filters__item--active span {
    background: var(--ifinsta-surface);
}

/* -----------------------------------------------------------------------------
   Project rows
   ----------------------------------------------------------------------------- */
.ifinsta-dev-projects {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-project {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ifinsta-dev-project:hover,
.ifinsta-dev-project:focus-visible {
    border-color: var(--ifinsta-primary);
    background: var(--ifinsta-primary-50);
}

.ifinsta-dev-project__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
    font-size: 22px;
}

.ifinsta-dev-project__main {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-0-5);
    flex: 1;
    min-width: 0;
}

.ifinsta-dev-project__title {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    flex-wrap: wrap;
}

.ifinsta-dev-project__name {
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-project__tagline {
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ifinsta-dev-project__code {
    font: var(--ifinsta-text-code-sm);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-project__stats {
    display: flex;
    gap: var(--ifinsta-space-5);
    flex: 0 0 auto;
}

.ifinsta-dev-project__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ifinsta-dev-project__stat-value {
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-project__stat-value--warn {
    color: var(--ifinsta-warning-700, #b45309);
}

.ifinsta-dev-project__stat-label {
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-project__go {
    color: var(--ifinsta-text-muted);
    flex: 0 0 auto;
}

/* -----------------------------------------------------------------------------
   Plugin project header + tabs
   ----------------------------------------------------------------------------- */
.ifinsta-dev-plugin {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-5);
    max-width: 1180px;
}

.ifinsta-dev-plugin-head__back {
    display: inline-flex;
    align-items: center;
    gap: var(--ifinsta-space-1);
    margin-bottom: var(--ifinsta-space-3);
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
    text-decoration: none;
}

.ifinsta-dev-plugin-head__back:hover {
    color: var(--ifinsta-primary);
}

.ifinsta-dev-plugin-head__back .material-symbols-outlined {
    font-size: 16px;
}

.ifinsta-dev-plugin-head__identity {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
}

.ifinsta-dev-plugin-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
    font-size: 24px;
}

.ifinsta-dev-plugin-head__text {
    flex: 1;
    min-width: 0;
}

.ifinsta-dev-plugin-head__name {
    margin: 0;
    font: var(--ifinsta-text-h1);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-plugin-head__meta {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    flex-wrap: wrap;
    margin: var(--ifinsta-space-1) 0 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-plugin-head__code {
    font-family: var(--ifinsta-font-mono);
}

.ifinsta-dev-plugin-tabs {
    display: flex;
    gap: var(--ifinsta-space-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--ifinsta-border);
}

.ifinsta-dev-plugin-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ifinsta-space-1-5);
    padding: var(--ifinsta-space-2-5) var(--ifinsta-space-3);
    border-bottom: 2px solid transparent;
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-text-body-sm);
    text-decoration: none;
    white-space: nowrap;
}

.ifinsta-dev-plugin-tabs__item:hover {
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-plugin-tabs__item--active {
    border-bottom-color: var(--ifinsta-primary);
    color: var(--ifinsta-primary);
    font-weight: var(--ifinsta-font-medium);
}

.ifinsta-dev-plugin-tabs__badge {
    padding: 0 var(--ifinsta-space-1-5);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-warning-50);
    color: var(--ifinsta-warning-700, #b45309);
    font: var(--ifinsta-text-caption);
}

/* -----------------------------------------------------------------------------
   Progress, checklist, rows
   ----------------------------------------------------------------------------- */
.ifinsta-dev-progress {
    height: 6px;
    margin: 0 var(--ifinsta-space-5);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface-2);
    overflow: hidden;
}

.ifinsta-dev-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ifinsta-success-500);
    transition: width 0.3s ease;
}

.ifinsta-dev-checklist {
    margin: 0;
    padding: var(--ifinsta-space-4) var(--ifinsta-space-5) var(--ifinsta-space-5);
    list-style: none;
}

.ifinsta-dev-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-2-5) 0;
    border-top: 1px solid var(--ifinsta-border);
}

.ifinsta-dev-checklist__item:first-child {
    border-top: none;
}

.ifinsta-dev-checklist__mark {
    font-size: 20px;
    color: var(--ifinsta-gray-400);
    flex: 0 0 auto;
}

.ifinsta-dev-checklist__item--done .ifinsta-dev-checklist__mark {
    color: var(--ifinsta-success-500);
}

.ifinsta-dev-checklist__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ifinsta-dev-checklist__label {
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-text-primary);
    text-decoration: none;
}

.ifinsta-dev-checklist__label:hover {
    color: var(--ifinsta-primary);
    text-decoration: underline;
}

.ifinsta-dev-checklist__item--done .ifinsta-dev-checklist__label {
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-checklist__hint {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-rows {
    margin: 0;
    padding: 0 var(--ifinsta-space-5);
    list-style: none;
}

.ifinsta-dev-rows__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-3) 0;
    border-top: 1px solid var(--ifinsta-border);
}

.ifinsta-dev-rows__item:first-child {
    border-top: none;
}

.ifinsta-dev-rows__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ifinsta-dev-rows__title {
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-rows__meta {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-rows__code {
    margin-left: var(--ifinsta-space-1-5);
    font: var(--ifinsta-text-code-sm);
    color: var(--ifinsta-text-muted);
}

/* Secondary column in a row — e.g. translation coverage on a variant. */
.ifinsta-dev-rows__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ifinsta-space-1);
    margin-left: auto;
    margin-right: var(--ifinsta-space-4);
    flex: 0 0 auto;
}

.ifinsta-dev-rows__empty {
    padding: var(--ifinsta-space-5) 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Inline empties
   ----------------------------------------------------------------------------- */
.ifinsta-dev-empty--inset {
    margin: var(--ifinsta-space-5);
    border-style: dashed;
}

.ifinsta-dev-empty__icon--ok {
    color: var(--ifinsta-success-500);
}

.ifinsta-dev-inline-empty {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-4);
    border: 1px dashed var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
}

.ifinsta-dev-inline-empty .material-symbols-outlined {
    font-size: 20px;
    color: var(--ifinsta-text-muted);
    flex: 0 0 auto;
}

.ifinsta-dev-inline-empty p {
    margin: 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-inline-empty strong {
    display: block;
    margin-bottom: 2px;
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

/* -----------------------------------------------------------------------------
   Meters and scorecards
   ----------------------------------------------------------------------------- */
.ifinsta-dev-meter {
    display: block;
    width: 100px;
    height: 4px;
    margin-bottom: var(--ifinsta-space-1);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface-2);
    overflow: hidden;
}

.ifinsta-dev-meter__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ifinsta-primary);
}

.ifinsta-dev-scorecard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ifinsta-space-1);
    padding: var(--ifinsta-space-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-dev-scorecard__value {
    font: var(--ifinsta-text-display);
    line-height: 1;
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-scorecard__label {
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-scorecard--passed .ifinsta-dev-scorecard__value {
    color: var(--ifinsta-success-500);
}

.ifinsta-dev-scorecard--failed .ifinsta-dev-scorecard__value,
.ifinsta-dev-scorecard--errored .ifinsta-dev-scorecard__value {
    color: var(--ifinsta-danger-500);
}

/* -----------------------------------------------------------------------------
   Findings
   ----------------------------------------------------------------------------- */
.ifinsta-dev-findings {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    margin: 0;
    padding: var(--ifinsta-space-4) var(--ifinsta-space-5) var(--ifinsta-space-5);
    list-style: none;
}

.ifinsta-dev-finding {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-border);
    border-left: 3px solid var(--ifinsta-gray-400);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface);
}

.ifinsta-dev-finding--blocker {
    border-left-color: var(--ifinsta-danger-500);
}

.ifinsta-dev-finding--high {
    border-left-color: var(--ifinsta-warning-500);
}

.ifinsta-dev-finding--medium {
    border-left-color: var(--ifinsta-primary);
}

.ifinsta-dev-finding__severity {
    padding: var(--ifinsta-space-0-5) var(--ifinsta-space-2);
    border-radius: var(--ifinsta-radius-sm);
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    flex: 0 0 auto;
}

.ifinsta-dev-finding--blocker .ifinsta-dev-finding__severity {
    background: var(--ifinsta-danger-50);
    color: var(--ifinsta-danger-700, #be123c);
}

.ifinsta-dev-finding--high .ifinsta-dev-finding__severity {
    background: var(--ifinsta-warning-50);
    color: var(--ifinsta-warning-700, #b45309);
}

.ifinsta-dev-finding__body {
    flex: 1;
    min-width: 0;
}

.ifinsta-dev-finding__title {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-finding__detail {
    margin: var(--ifinsta-space-1) 0 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-finding__fix {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-1-5);
    margin: var(--ifinsta-space-2) 0 0;
    padding: var(--ifinsta-space-2) var(--ifinsta-space-2-5);
    border-radius: var(--ifinsta-radius-sm);
    background: var(--ifinsta-surface-1);
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-finding__fix .material-symbols-outlined {
    font-size: 14px;
    flex: 0 0 auto;
}

.ifinsta-dev-finding__meta {
    margin: var(--ifinsta-space-2) 0 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-finding__meta code {
    font-family: var(--ifinsta-font-mono);
}

/* -----------------------------------------------------------------------------
   Rollout
   ----------------------------------------------------------------------------- */
.ifinsta-dev-rollout__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-3);
    margin-bottom: var(--ifinsta-space-3);
}

.ifinsta-dev-rollout__version {
    font: var(--ifinsta-text-h2);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-rollout .ifinsta-dev-progress {
    margin: 0;
}

.ifinsta-dev-rollout__meta {
    margin: var(--ifinsta-space-2) 0 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Create wizard
   ----------------------------------------------------------------------------- */
.ifinsta-dev-wizard__layout {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--ifinsta-space-5);
    align-items: start;
}

.ifinsta-dev-wizard__main {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-4);
    min-width: 0;
}

.ifinsta-dev-wizard__counter {
    margin: 0;
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-rail {
    position: sticky;
    top: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-3);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-dev-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ifinsta-dev-rail__item {
    position: relative;
}

/* Connector line between step markers. */
.ifinsta-dev-rail__item + .ifinsta-dev-rail__item::before {
    content: "";
    position: absolute;
    left: 22px;
    top: -6px;
    width: 1px;
    height: 6px;
    background: var(--ifinsta-border);
}

.ifinsta-dev-rail__button {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
    width: 100%;
    padding: var(--ifinsta-space-2-5);
    border: none;
    border-radius: var(--ifinsta-radius-md);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ifinsta-dev-rail__button:disabled {
    cursor: default;
}

.ifinsta-dev-rail__button:not(:disabled):hover {
    background: var(--ifinsta-surface-1);
}

.ifinsta-dev-rail__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface);
    color: var(--ifinsta-text-muted);
    font: var(--ifinsta-text-caption);
}

.ifinsta-dev-rail__item--active .ifinsta-dev-rail__marker {
    border-color: var(--ifinsta-primary);
    background: var(--ifinsta-primary);
    color: var(--ifinsta-white);
}

.ifinsta-dev-rail__item--done .ifinsta-dev-rail__marker {
    border-color: var(--ifinsta-success-500);
    background: var(--ifinsta-success-500);
    color: var(--ifinsta-white);
}

.ifinsta-dev-rail__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ifinsta-dev-rail__title {
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-rail__item--active .ifinsta-dev-rail__title {
    color: var(--ifinsta-primary);
}

.ifinsta-dev-rail__blurb {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-wizard__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-3);
    padding-top: var(--ifinsta-space-2);
}

.ifinsta-dev-wizard__nav-right {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-autosave {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ifinsta-dev-split--form,
    .ifinsta-dev-wizard__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ifinsta-dev-rail {
        position: static;
    }
}

@media (max-width: 720px) {
    .ifinsta-dev-project {
        flex-wrap: wrap;
    }

    .ifinsta-dev-project__stats {
        width: 100%;
        justify-content: space-between;
        gap: var(--ifinsta-space-3);
    }

    .ifinsta-dev-project__go {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   Filter bar — a panel that lays its fields out in a row
   ----------------------------------------------------------------------------- */
.ifinsta-dev-filterbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-4) var(--ifinsta-space-5);
}

.ifinsta-dev-filterbar .ifinsta-dev-field {
    flex: 1 1 12rem;
    min-width: 0;
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   Row variants for denser operational lists
   ----------------------------------------------------------------------------- */
.ifinsta-dev-rows__item--stacked {
    flex-wrap: wrap;
    align-items: flex-start;
}

.ifinsta-dev-rows__item--stacked .ifinsta-dev-rows__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ifinsta-space-2);
}

/* Inline action form sitting at the end of a row. */
.ifinsta-dev-rowform {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    flex: 0 0 auto;
}

.ifinsta-dev-rowform .ifinsta-dev-field__select {
    width: auto;
    min-width: 10rem;
    padding: var(--ifinsta-space-1-5) var(--ifinsta-space-2-5);
    font: var(--ifinsta-text-body-sm);
}

/* Compact metric row for status breakdowns with many buckets. */
.ifinsta-dev-metrics--compact {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.ifinsta-dev-metrics--compact .ifinsta-dev-metric {
    padding: var(--ifinsta-space-4);
    gap: var(--ifinsta-space-2);
}

.ifinsta-dev-metrics--compact .ifinsta-dev-metric__value {
    font: var(--ifinsta-text-h1);
    line-height: 1;
}

/* Scrollable variant — flex row that scrolls horizontally on overflow.
   Cards keep a fixed minimum width so they don't squash.
   Fade mask on trailing edge signals more content. */
.ifinsta-dev-metrics--scrollable {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ifinsta-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--ifinsta-space-1);
    margin: calc(var(--ifinsta-space-1) * -1);
    -webkit-mask-image: linear-gradient(
        to right,
        var(--ifinsta-text-primary) calc(100% - 40px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        var(--ifinsta-text-primary) calc(100% - 40px),
        transparent 100%
    );
}

.ifinsta-dev-metrics--scrollable::-webkit-scrollbar {
    display: none;
}

.ifinsta-dev-metrics--scrollable .ifinsta-dev-metric {
    flex: 0 0 auto;
    width: 15rem;
    min-width: 13rem;
    scroll-snap-align: start;
}

@media (max-width: 720px) {
    .ifinsta-dev-rowform {
        width: 100%;
    }

    .ifinsta-dev-rowform .ifinsta-dev-field__select {
        flex: 1;
    }
}

/* Story thumbnail in a row (portrait aspect, like the story itself). */
.ifinsta-story-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 56px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-muted);
}

.ifinsta-story-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------------------------------------
   Review card (catalog moderation)
   ----------------------------------------------------------------------------- */
.ifinsta-review-card__identity {
    display: flex;
    align-items: flex-start;
    gap: var(--ifinsta-space-3);
    min-width: 0;
}

.ifinsta-review-card__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-muted);
}

.ifinsta-review-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ifinsta-review-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--ifinsta-space-5);
}

.ifinsta-review-card__detail {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-2);
    align-items: flex-start;
    min-width: 0;
}

.ifinsta-review-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-4);
    padding-left: var(--ifinsta-space-5);
    border-left: 1px solid var(--ifinsta-border);
}

.ifinsta-review-card__actions .ifinsta-btn {
    width: 100%;
    justify-content: center;
}

.ifinsta-review-card__reject {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-2);
    padding-top: var(--ifinsta-space-4);
    border-top: 1px solid var(--ifinsta-border);
}

@media (max-width: 900px) {
    .ifinsta-review-card__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .ifinsta-review-card__actions {
        padding-left: 0;
        border-left: none;
        padding-top: var(--ifinsta-space-4);
        border-top: 1px solid var(--ifinsta-border);
    }
}

/* Storefront publish status cluster in the settings hero. */
.ifinsta-storefront-status {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ifinsta-space-1-5);
}

.ifinsta-storefront-status__url {
    font: var(--ifinsta-text-code-sm);
    color: var(--ifinsta-text-muted);
}

/* Catalog slot capacity indicator in the mall catalog hero. */
.ifinsta-catalog-actions {
    flex-wrap: wrap;
}

.ifinsta-catalog-capacity {
    display: inline-flex;
    flex-direction: column;
    gap: var(--ifinsta-space-1);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface);
}

.ifinsta-catalog-capacity__count {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-secondary);
    white-space: nowrap;
}

.ifinsta-catalog-capacity .ifinsta-dev-meter {
    width: 100%;
}

/* =============================================================================
   LAYER 3 — Capybara adapters (previous capybara.css)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Console shell
   -------------------------------------------------------------------------- */

/* The in-app content column already caps width at 1400px; let dense operator
   tables use all of it instead of the 1180px authoring width. */
.ifinsta-capybara {
    max-width: none;
}

/* -----------------------------------------------------------------------------
   Stat strip  →  console metric row
   -------------------------------------------------------------------------- */
.ifinsta-capybara .ifinsta-admin-stats {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    align-items: stretch;
}

.ifinsta-capybara .ifinsta-admin-stat {
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-capybara .ifinsta-admin-stat__label {
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-capybara .ifinsta-admin-stat__value {
    font: var(--ifinsta-text-display);
    line-height: 1;
    color: var(--ifinsta-text-primary);
}

.ifinsta-capybara .ifinsta-admin-stat__unit {
    margin-left: var(--ifinsta-space-1-5);
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-capybara .ifinsta-admin-stat__footnote {
    margin: 0;
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Section card  →  console panel
   -------------------------------------------------------------------------- */
.ifinsta-capybara .ifinsta-admin-card {
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-capybara .ifinsta-admin-card__head {
    align-items: flex-start;
    padding: var(--ifinsta-space-5) var(--ifinsta-space-5) var(--ifinsta-space-4);
    border-bottom-color: var(--ifinsta-border);
}

.ifinsta-capybara .ifinsta-admin-card__title {
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

.ifinsta-capybara .ifinsta-admin-card__sub {
    margin-top: var(--ifinsta-space-1);
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

.ifinsta-capybara .ifinsta-admin-card__footer {
    border-top-color: var(--ifinsta-border-light);
    background: var(--ifinsta-surface-1);
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Pills, chips, segmented control
   -------------------------------------------------------------------------- */
.ifinsta-capybara .ifinsta-admin-pill {
    border-radius: var(--ifinsta-radius-full);
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
}

.ifinsta-capybara .ifinsta-admin-chip,
.ifinsta-capybara .ifinsta-admin-segmented__option {
    border-radius: var(--ifinsta-radius-full);
    font: var(--ifinsta-text-body-sm);
}

.ifinsta-capybara .ifinsta-admin-chip:hover,
.ifinsta-capybara .ifinsta-admin-segmented__option:hover {
    border-color: var(--ifinsta-primary);
    color: var(--ifinsta-primary);
}

.ifinsta-capybara .ifinsta-admin-chip--active,
.ifinsta-capybara .ifinsta-admin-chip--active:hover,
.ifinsta-capybara .ifinsta-admin-segmented__option--active {
    border-color: var(--ifinsta-primary);
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
    font-weight: var(--ifinsta-font-semibold);
}

.ifinsta-capybara .ifinsta-admin-chip--active .ifinsta-admin-chip__count {
    background: var(--ifinsta-surface);
    color: var(--ifinsta-primary);
}

.ifinsta-capybara .ifinsta-admin-segmented {
    padding: var(--ifinsta-space-0-5);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface-1);
}

/* -----------------------------------------------------------------------------
   Toolbar + tables
   -------------------------------------------------------------------------- */
.ifinsta-capybara .ifinsta-admin-toolbar {
    padding: var(--ifinsta-space-3) var(--ifinsta-space-5);
    border-bottom: 1px solid var(--ifinsta-border);
    background: var(--ifinsta-surface-1);
}

.ifinsta-capybara .ifinsta-admin-toolbar__search input {
    border-radius: var(--ifinsta-radius-full);
}

/* A console filter bar dropped into a card toolbar takes its padding from the
   toolbar rather than from the panel it is normally attached to. */
.ifinsta-capybara .ifinsta-admin-toolbar > .ifinsta-dev-filterbar {
    display: flex;
    flex: 1;
    padding: 0;
}

.ifinsta-capybara .ifinsta-admin-table thead th {
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
    background: var(--ifinsta-surface-1);
}

.ifinsta-capybara .ifinsta-admin-table tbody tr:hover {
    background: var(--ifinsta-primary-50);
}

.ifinsta-capybara .ifinsta-admin-table td,
.ifinsta-capybara .ifinsta-admin-table th {
    border-color: var(--ifinsta-border-light);
}

.ifinsta-capybara .ifinsta-admin-code,
.ifinsta-capybara .ifinsta-admin-table code {
    font: var(--ifinsta-text-code-sm);
    color: var(--ifinsta-text-secondary);
}

/* -----------------------------------------------------------------------------
   Notices and empty states
   -------------------------------------------------------------------------- */
.ifinsta-capybara .ifinsta-admin-notice {
    border-radius: var(--ifinsta-radius-lg);
    font: var(--ifinsta-text-body-sm);
}

.ifinsta-capybara .ifinsta-admin-empty {
    padding: var(--ifinsta-space-10) var(--ifinsta-space-6);
    border: 1px dashed var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
}

.ifinsta-capybara .ifinsta-admin-empty__icon {
    color: var(--ifinsta-primary);
}

.ifinsta-capybara .ifinsta-admin-empty__title {
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

.ifinsta-capybara .ifinsta-admin-empty__sub {
    max-width: 44ch;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   Payments dashboards (payments/admin_dashboards.css)

   Same prefix, different components — these names do not appear on the
   assistant or communications pages.
   -------------------------------------------------------------------------- */
.ifinsta-capybara .ifinsta-admin-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-6);
}

.ifinsta-capybara .ifinsta-admin-dashboard__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ifinsta-space-1);
    padding: var(--ifinsta-space-1);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-surface-1);
}

.ifinsta-capybara .ifinsta-admin-dashboard__nav-link {
    padding: var(--ifinsta-space-2) var(--ifinsta-space-4);
    border: 0;
    border-radius: var(--ifinsta-radius-full);
    background: none;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
    text-decoration: none;
}

.ifinsta-capybara .ifinsta-admin-dashboard__nav-link:hover {
    color: var(--ifinsta-primary);
}

.ifinsta-capybara .ifinsta-admin-dashboard__nav-link--active,
.ifinsta-capybara .ifinsta-admin-dashboard__nav-link--active:hover {
    background: var(--ifinsta-surface);
    border: 1px solid var(--ifinsta-primary);
    padding: calc(var(--ifinsta-space-2) - 1px) calc(var(--ifinsta-space-4) - 1px);
    color: var(--ifinsta-primary);
    font-weight: var(--ifinsta-font-semibold);
}

.ifinsta-capybara .ifinsta-admin-metrics {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--ifinsta-space-4);
}

.ifinsta-capybara .ifinsta-admin-metric {
    padding: var(--ifinsta-space-5);
    border-color: var(--ifinsta-border-light);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-capybara .ifinsta-admin-metric__label {
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-capybara .ifinsta-admin-metric__value {
    font: var(--ifinsta-text-display);
    line-height: 1;
    color: var(--ifinsta-text-primary);
}

.ifinsta-capybara .ifinsta-admin-metric__meta {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-capybara .ifinsta-admin-panel {
    padding: var(--ifinsta-space-5);
    border-color: var(--ifinsta-border-light);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-capybara .ifinsta-admin-panel__subtitle {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

/* -----------------------------------------------------------------------------
   P2P verification pages (global ifinsta-stat-card / ifinsta-table)
   -------------------------------------------------------------------------- */
.ifinsta-capybara .ifinsta-stat-card {
    border-color: var(--ifinsta-border-light);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-capybara .ifinsta-stat-card--clickable:hover,
.ifinsta-capybara .ifinsta-stat-card--clickable:focus-visible {
    border-color: var(--ifinsta-primary);
    background: var(--ifinsta-primary-50);
}

.ifinsta-capybara .ifinsta-stat-card__label {
    font: var(--ifinsta-text-overline);
    letter-spacing: var(--ifinsta-letter-spacing-overline);
    text-transform: uppercase;
    color: var(--ifinsta-text-muted);
}

.ifinsta-capybara .ifinsta-stat-card__value {
    font: var(--ifinsta-text-display);
    line-height: 1;
}

/* -----------------------------------------------------------------------------
   Elevation discipline — the kit conveys depth with borders only.
   -------------------------------------------------------------------------- */
.ifinsta-capybara .ifinsta-admin-card,
.ifinsta-capybara .ifinsta-admin-stat,
.ifinsta-capybara .ifinsta-admin-metric,
.ifinsta-capybara .ifinsta-admin-panel,
.ifinsta-capybara .ifinsta-stat-card {
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
   Index — section directory, built directly on the console kit
   -------------------------------------------------------------------------- */
.ifinsta-capybara-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: var(--ifinsta-space-4);
    /* Size each card to its own content — a short section should not inherit
       the height of the longest one. */
    align-items: start;
}

.ifinsta-capybara-section {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-5);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
}

.ifinsta-capybara-section__top {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
}

.ifinsta-capybara-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
    font-size: 20px;
}

.ifinsta-capybara-section__name {
    margin: 0;
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-primary);
}

.ifinsta-capybara-section__text {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

.ifinsta-capybara-section__links {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: var(--ifinsta-space-3);
    border-top: 1px solid var(--ifinsta-border);
}

.ifinsta-capybara-section__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-2) var(--ifinsta-space-2-5);
    margin: 0 calc(var(--ifinsta-space-2-5) * -1);
    border-radius: var(--ifinsta-radius-md);
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-secondary);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ifinsta-capybara-section__link:hover,
.ifinsta-capybara-section__link:focus-visible {
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
}

.ifinsta-capybara-section__link .material-symbols-outlined {
    font-size: 16px;
    color: var(--ifinsta-text-muted);
}

.ifinsta-capybara-section__link:hover .material-symbols-outlined,
.ifinsta-capybara-section__link:focus-visible .material-symbols-outlined {
    color: var(--ifinsta-primary);
}

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .ifinsta-capybara .ifinsta-admin-stats {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}

/* ==========================================================================
   Capybara — Merchant Admin adapters
   ========================================================================== */

/* ── Search autocomplete ── */
.ifinsta-capybara-merchant-search {
    position: relative;
    margin-bottom: var(--ifinsta-space-4);
}

.ifinsta-capybara-merchant-search__input-row {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
}

.ifinsta-capybara-merchant-search__icon {
    color: var(--ifinsta-text-muted);
    flex: 0 0 auto;
}

.ifinsta-capybara-merchant-search__field {
    flex: 1;
}

.ifinsta-capybara-merchant-search__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--ifinsta-surface);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    margin-top: var(--ifinsta-space-1);
    max-height: 20rem;
    overflow-y: auto;
}

.ifinsta-capybara-merchant-search__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ifinsta-space-2-5) var(--ifinsta-space-3);
    text-decoration: none;
    color: var(--ifinsta-text-primary);
    font: var(--ifinsta-text-body);
    border-bottom: 1px solid var(--ifinsta-border);
    transition: background 0.1s ease;
}

.ifinsta-capybara-merchant-search__item:last-child {
    border-bottom: 0;
}

.ifinsta-capybara-merchant-search__item:hover,
.ifinsta-capybara-merchant-search__item:focus {
    background: var(--ifinsta-surface-2);
}

.ifinsta-capybara-merchant-search__item-name {
    font-weight: var(--ifinsta-font-semibold);
}

.ifinsta-capybara-merchant-search__item-meta {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

/* ── Detail grid ── */
.ifinsta-capybara-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ifinsta-space-4);
}

@media (max-width: 960px) {
    .ifinsta-capybara-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Admin table (reusable across Capybara admin sections) ── */
.ifinsta-capybara-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--ifinsta-text-body);
}

.ifinsta-capybara-table thead {
    border-bottom: 2px solid var(--ifinsta-border);
}

.ifinsta-capybara-table th {
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    text-align: left;
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-secondary);
    white-space: nowrap;
}

.ifinsta-capybara-table td {
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    border-bottom: 1px solid var(--ifinsta-border);
    color: var(--ifinsta-text-primary);
}

.ifinsta-capybara-table tbody tr:hover {
    background: var(--ifinsta-surface-2);
}

.ifinsta-capybara-table__link {
    color: var(--ifinsta-primary);
    text-decoration: none;
    font-weight: var(--ifinsta-font-medium);
}

.ifinsta-capybara-table__link:hover {
    text-decoration: underline;
}

/* ── Filters ── */
.ifinsta-dev-filters__group {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-1-5);
    flex-wrap: wrap;
}

.ifinsta-dev-filters__label {
    font: var(--ifinsta-text-label);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text-secondary);
}

/* Breathing room below the filter bar on Capybara pages. Kept scoped so the
   kit's shared .ifinsta-dev-filters rule keeps its rhythm in every other
   area that composes on it (customers, payments, marketplace, partners). */
.ifinsta-capybara .ifinsta-dev-filters {
    margin-bottom: var(--ifinsta-space-4);
}

/* ── Pagination ── */
.ifinsta-dev-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ifinsta-space-3);
    margin-top: var(--ifinsta-space-4);
    font: var(--ifinsta-text-body);
}

.ifinsta-dev-pagination__item {
    color: var(--ifinsta-primary);
    text-decoration: none;
    padding: var(--ifinsta-space-1-5) var(--ifinsta-space-3);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    transition: background 0.15s ease;
}

.ifinsta-dev-pagination__item:hover {
    background: var(--ifinsta-surface-2);
}

.ifinsta-dev-pagination__info {
    color: var(--ifinsta-text-secondary);
}

/* ── Empty state — alias of the kit's ifinsta-dev-empty ── */
.ifinsta-dev-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-10) var(--ifinsta-space-6);
    border: 1px dashed var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface);
    text-align: center;
}

.ifinsta-dev-empty-state__icon {
    font-size: 32px;
    color: var(--ifinsta-primary);
}

.ifinsta-dev-empty-state__title {
    margin: 0;
    font: var(--ifinsta-text-h3);
    color: var(--ifinsta-text-primary);
}

.ifinsta-dev-empty-state__text {
    margin: 0;
    max-width: 44ch;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-muted);
}

/* ── Facts rows — class forms of the kit's dt/dd styles ── */
.ifinsta-dev-facts__label {
    font: var(--ifinsta-text-caption);
    color: var(--ifinsta-text-muted);
}

.ifinsta-dev-facts__value {
    margin: 0;
    font: var(--ifinsta-text-body-sm);
    color: var(--ifinsta-text-primary);
    text-align: right;
    word-break: break-word;
}

/* ── Banner action link; the base banner already carries the warning tone ── */
.ifinsta-dev-banner--warning {
    /* Tone modifier — pins the warning treatment the base banner uses by
       default so intent is explicit in markup and survives base restyles. */
    border-color: var(--ifinsta-warning-500);
    background: var(--ifinsta-warning-50);
}

.ifinsta-dev-banner--info {
    border-color: var(--ifinsta-info-500, var(--ifinsta-primary-200));
    background: var(--ifinsta-info-50, var(--ifinsta-primary-50));
}

.ifinsta-dev-banner--info .material-symbols-outlined {
    color: var(--ifinsta-info-700, var(--ifinsta-primary-700));
}

.ifinsta-dev-banner__action {
    flex: 0 0 auto;
    font: var(--ifinsta-text-body-sm);
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-primary);
    text-decoration: none;
    white-space: nowrap;
}

.ifinsta-dev-banner__action:hover {
    text-decoration: underline;
}

/* ── Danger button ──
   The in-app shell's button kit (in_app_components.css) ships primary,
   secondary and ghost variants but no danger tone; merchant status actions
   need one. Mirrors components/buttons.css using console kit tokens. */
.ifinsta-btn--danger {
    background: var(--ifinsta-danger);
    color: var(--ifinsta-white);
    border-color: var(--ifinsta-danger);
}

.ifinsta-btn--danger:hover {
    background: var(--ifinsta-danger-700);
    border-color: var(--ifinsta-danger-700);
}

/* ── Pill tone aliases ──
   The kit's pill groups are keyed by domain status (--ok, --failed, ...);
   merchant views hand the template a tone instead (success, danger, ...),
   so the pill needs matching modifiers. Mirrors console/customers.css tones. */
.ifinsta-dev-pill--success {
    background: var(--ifinsta-success-50);
    color: var(--ifinsta-success-700);
}

.ifinsta-dev-pill--danger {
    background: var(--ifinsta-danger-50);
    color: var(--ifinsta-danger-700);
}

.ifinsta-dev-pill--warning {
    background: var(--ifinsta-warning-50);
    color: var(--ifinsta-warning-700);
}

.ifinsta-dev-pill--info {
    background: var(--ifinsta-info-50);
    color: var(--ifinsta-info-700);
}

.ifinsta-dev-pill--muted {
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-text-secondary);
}

/* Plugin publication lifecycle ------------------------------------------------ */
.ifinsta-dev-journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ifinsta-space-2);
    margin: 0;
    padding: var(--ifinsta-space-3);
    border: var(--ifinsta-border-width) solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-surface-1);
    list-style: none;
}

.ifinsta-dev-journey__step a {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-2);
    border-radius: var(--ifinsta-radius-md);
    color: var(--ifinsta-text-muted);
    font: var(--ifinsta-text-body-sm);
    text-decoration: none;
}

.ifinsta-dev-journey__step a:hover,
.ifinsta-dev-journey__step--current a {
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
}

.ifinsta-dev-journey__step--done a {
    color: var(--ifinsta-success-700);
}

.ifinsta-dev-journey__step .material-symbols-outlined {
    font-size: var(--ifinsta-icon-sm);
}

.ifinsta-dev-plugin-nav {
    display: flex;
    align-items: flex-end;
    gap: var(--ifinsta-space-3);
}

.ifinsta-dev-plugin-nav .ifinsta-dev-plugin-tabs {
    flex: 1;
}

.ifinsta-dev-advanced {
    position: relative;
    padding-bottom: var(--ifinsta-space-2);
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-text-body-sm);
}

.ifinsta-dev-advanced summary {
    cursor: pointer;
    white-space: nowrap;
}

.ifinsta-dev-advanced__menu {
    position: absolute;
    z-index: var(--ifinsta-z-dropdown);
    inset-inline-end: 0;
    display: grid;
    min-width: max-content;
    margin-top: var(--ifinsta-space-2);
    padding: var(--ifinsta-space-2);
    border: var(--ifinsta-border-width) solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-md);
    background: var(--ifinsta-surface);
}

.ifinsta-dev-advanced__menu a {
    padding: var(--ifinsta-space-2) var(--ifinsta-space-3);
    border-radius: var(--ifinsta-radius-sm);
    color: var(--ifinsta-text-secondary);
    text-decoration: none;
}

.ifinsta-dev-advanced__menu a:hover,
.ifinsta-dev-advanced__menu a[aria-current="page"] {
    background: var(--ifinsta-primary-50);
    color: var(--ifinsta-primary);
}

.ifinsta-dev-progress__fill--0 { width: 0%; }
.ifinsta-dev-progress__fill--20 { width: 20%; }
.ifinsta-dev-progress__fill--40 { width: 40%; }
.ifinsta-dev-progress__fill--60 { width: 60%; }
.ifinsta-dev-progress__fill--80 { width: 80%; }
.ifinsta-dev-progress__fill--100 { width: 100%; }

[data-theme="dark"] .ifinsta-dev-journey,
[data-theme="dark"] .ifinsta-dev-advanced__menu {
    background: var(--ifinsta-surface);
    border-color: var(--ifinsta-border);
}

[data-theme="dark"] .ifinsta-dev-journey__step a:hover,
[data-theme="dark"] .ifinsta-dev-journey__step--current a,
[data-theme="dark"] .ifinsta-dev-advanced__menu a:hover,
[data-theme="dark"] .ifinsta-dev-advanced__menu a[aria-current="page"] {
    background: var(--ifinsta-surface-2);
    color: var(--ifinsta-primary-300);
}

@media (max-width: 720px) {
    .ifinsta-dev-journey {
        display: flex;
        overflow-x: auto;
    }

    .ifinsta-dev-journey__step {
        flex: 0 0 auto;
    }

    .ifinsta-dev-plugin-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .ifinsta-dev-advanced__menu {
        position: static;
    }
}

/* =============================================================================
   Plugin Setup & Manage — capybara-aligned primitives
   ============================================================================= */

/* Centered content containers for setup/manage wizards */
.ifinsta-dev-centered-container {
    max-width: 960px;
    margin-inline: auto;
}

.ifinsta-dev-centered-container--narrow {
    max-width: 720px;
    margin-inline: auto;
}

.ifinsta-dev-centered-container--sm {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
}

/* Stepper check icon — replaces inline font-size:18px */
.ifinsta-dev-step-check {
    font-size: var(--ifinsta-text-lg);
    vertical-align: middle;
}

/* Capability row — replaces inline min-width:0 / margin:0 */
.ifinsta-dev-capability-info {
    min-width: 0;
    flex: 1;
}

.ifinsta-dev-capability-info p {
    margin: 0;
}

/* Status badge override for inline contexts */
.ifinsta-dev-badge--static {
    position: static;
}

/* Activation icon — replaces inline font-size:64px */
.ifinsta-dev-activation-icon {
    font-size: 4rem;
    line-height: 1;
    color: var(--ifinsta-success);
}

/* Setup step list */
.ifinsta-dev-step-list {
    list-style: decimal;
    padding-inline-start: var(--ifinsta-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-2);
    color: var(--ifinsta-text-secondary);
}

/* Prereq list */
.ifinsta-dev-prereq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
}

.ifinsta-dev-prereq-list li {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-dev-prereq-list .material-symbols-outlined {
    color: var(--ifinsta-success);
    flex-shrink: 0;
}

/* Review section */
.ifinsta-dev-review-section {
    padding: var(--ifinsta-space-4) 0;
    border-bottom: var(--ifinsta-border-width) solid var(--ifinsta-border);
}

.ifinsta-dev-review-section:last-child {
    border-bottom: none;
}

.ifinsta-dev-review-section__title {
    font: var(--ifinsta-text-sm);
    font-weight: 600;
    color: var(--ifinsta-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ifinsta-space-2);
}

/* Quick actions — inline row of compact buttons */
.ifinsta-dev-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ifinsta-space-2);
}

/* Credential row */
.ifinsta-dev-credential-row {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-3);
    flex-wrap: wrap;
}

/* Timeline */
.ifinsta-dev-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-inline-start: var(--ifinsta-space-6);
}

.ifinsta-dev-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: var(--ifinsta-space-2);
    bottom: var(--ifinsta-space-2);
    width: 2px;
    background: var(--ifinsta-border);
}

.ifinsta-dev-timeline__item {
    display: flex;
    gap: var(--ifinsta-space-4);
    padding: var(--ifinsta-space-3) 0;
    position: relative;
}

.ifinsta-dev-timeline__dot {
    position: absolute;
    left: calc(-1 * var(--ifinsta-space-6) + 2px);
    top: var(--ifinsta-space-4);
    width: 12px;
    height: 12px;
    border-radius: var(--ifinsta-radius-full);
    background: var(--ifinsta-border);
    border: 2px solid var(--ifinsta-surface);
}

.ifinsta-dev-timeline__dot--success {
    background: var(--ifinsta-success);
}

.ifinsta-dev-timeline__dot--info {
    background: var(--ifinsta-primary);
}

.ifinsta-dev-timeline__content {
    flex: 1;
    min-width: 0;
}

.ifinsta-dev-timeline__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ifinsta-space-3);
    flex-wrap: wrap;
}

.ifinsta-dev-timeline__title {
    font-weight: 600;
    color: var(--ifinsta-text);
}

.ifinsta-dev-timeline__time {
    font: var(--ifinsta-text-xs);
    color: var(--ifinsta-text-muted);
    flex-shrink: 0;
}

.ifinsta-dev-timeline__desc {
    margin-top: var(--ifinsta-space-1);
    color: var(--ifinsta-text-secondary);
    font: var(--ifinsta-text-sm);
}