/* Responsive layout utilities. Multi-column wrappers live here as classes
   (inline styles can't be overridden by media queries); colors/spacing still
   come from the tokens. Breakpoints: 980px tablets, 760px phones-landscape,
   440px small phones.
   Note: :root:root beats tokens.css (loaded after this file alphabetically);
   minmax(0, …) columns stop long words from blowing grids past the viewport. */

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

/* Author display rules (e.g. .sl-btn's inline-flex) must never beat the hidden attribute. */
[hidden] { display: none !important; }

.sl-menu { position: relative; }
.sl-menu > summary { list-style: none; cursor: pointer; display: inline-flex; }
.sl-menu > summary::-webkit-details-marker { display: none; }
.sl-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); padding: 8px; }
.sl-menu__email { padding: 8px 10px; font-size: var(--text-xs); color: var(--text-muted); border-bottom: 1.5px dashed var(--hairline); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-menu__item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius-chip); font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; font-family: var(--font-sans); }
.sl-menu__item:hover { background: var(--paper); color: var(--ink); }
.sl-menu__item--danger { color: var(--coral-deep); }
.sl-menu form { margin: 0; }

.sl-dialog { border: 1.5px solid var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); background: var(--card); color: var(--ink); padding: 24px; max-width: 480px; width: calc(100vw - 48px); }
.sl-dialog::backdrop { background: rgba(28, 26, 23, 0.45); }

.sl-header-inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.sl-header-nav { display: flex; align-items: center; gap: 28px; }

.sl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center; }
.sl-hero-side { position: relative; justify-self: end; width: 100%; max-width: 420px; }
.sl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sl-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; }
.sl-cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
/* Connector cards: three per row, two on narrower viewports, one on mobile.
   Fixed column count on purpose — auto-fill's max-content stretches the page
   wrapper (a shrink-to-fit flex item) out to its max-width. */
.sl-connector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
/* Equal card heights per row: the grid cell already stretches, but the frame
   wrappers (#stack-card-* → #connector-card-*) and the card itself size to
   content — pass the stretch down to the card surface by id prefix (a bare
   `> div > div` also matched the CONTENT divs of directly-placed cards and
   blew them up to full card height). */
.sl-connector-grid > div,
.sl-connector-grid [id^="connector-card-"] { height: 100%; }
/* Cards flex vertically so the action row (Connect/Update/Disconnect/Remove)
   pins to the bottom edge and lines up across the row; cards whose last block
   is plain text (OPENS SHORTLY) keep their natural flow. */
.sl-connector-grid .sl-card { height: 100%; display: flex; flex-direction: column; }
.sl-connector-grid .sl-card > :last-child:not(p) { margin-top: auto; }
@media (max-width: 1100px) { .sl-connector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sl-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sl-tile-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; grid-auto-rows: 1fr; }
/* Every row shares one height and every tile fills it — long tool names
   otherwise stretch individual tiles (aspect-ratio yields once height is set). */
.sl-tile-grid > .sl-tile,
.sl-tile-grid label,
.sl-tile-grid label > span,
.sl-tile-grid label .sl-tile { height: 100%; }
.sl-tile-grid label, .sl-tile-grid label > span { display: block; }
.sl-tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sl-tile-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sl-cta-banner { background: var(--ink); border-radius: var(--radius-card); padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.sl-report-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; }
.sl-stat-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

@media (max-width: 980px) {
  .sl-tile-grid, .sl-tile-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sl-cta-banner { padding: 40px 36px; }
}

@media (max-width: 760px) {
  :root:root {
    --text-display: 38px;
    --text-3xl: 29px;
    --text-2xl: 24px;
    --text-money-lg: 36px;
  }
  .sl-header-nav { display: none; }
  .sl-header-inner { padding: 0 20px; }
  .sl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sl-hero-side { justify-self: center; }
  .sl-split, .sl-calc-grid, .sl-cards-3, .sl-connector-grid, .sl-report-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sl-stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .sl-tile-grid, .sl-tile-grid--4, .sl-tile-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sl-cta-banner { padding: 32px 24px; }
  .sl-steps { flex-wrap: wrap; row-gap: 6px; justify-content: center; }
}

@media (max-width: 440px) {
  .sl-tile-grid, .sl-tile-grid--4, .sl-tile-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Findings table: real columns on wide screens, stacked cards on mobile. */
.sl-findings-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--text-sm); }
.sl-findings-table th { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); padding: 0 12px 10px; text-align: left; }
.sl-findings-table th.sl-ft-amount { text-align: right; }
.sl-findings-table td { padding: 13px 12px; border-top: 1.5px solid var(--hairline); vertical-align: middle; }
.sl-ft-title { font-weight: 600; color: var(--ink); }
.sl-ft-title--muted { color: var(--text-secondary); }
.sl-ft-detail { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.sl-ft-plan { font-size: 11px; color: var(--text-muted); }
td.sl-ft-tool { white-space: nowrap; color: var(--text-secondary); }
td.sl-ft-amount { text-align: right; font-family: var(--font-serif); font-size: var(--text-base); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.sl-ft-actions { white-space: nowrap; text-align: right; }
td.sl-ft-actions form { display: inline-block; }
.sl-report-filters { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .sl-findings-table, .sl-findings-table tbody { display: block; }
  .sl-findings-table thead { display: none; }
  .sl-findings-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main main" "tool amount" "chip actions";
    gap: 4px 14px;
    align-items: center;
    border: 1.5px solid var(--hairline);
    border-radius: var(--radius-chip);
    padding: 14px 16px;
    margin-top: 12px;
  }
  .sl-findings-table td { display: block; padding: 0; border-top: none; }
  .sl-findings-table td.sl-ft-main { grid-area: main; margin-bottom: 6px; }
  .sl-findings-table td.sl-ft-tool { grid-area: tool; white-space: normal; }
  .sl-findings-table td.sl-ft-amount { grid-area: amount; align-self: start; }
  .sl-findings-table td.sl-ft-chip { grid-area: chip; margin-top: 6px; }
  .sl-findings-table td.sl-ft-actions { grid-area: actions; margin-top: 6px; display: flex; gap: 8px; justify-content: flex-end; }
  .sl-report-filters { width: 100%; }
  .sl-report-filters input, .sl-report-filters select { flex: 1 1 100%; min-width: 0; }
  footer nav { flex-wrap: wrap; row-gap: 8px; }
  footer nav a { white-space: nowrap; }
}

/* Admin dashboard: 6-wide stats and label:value card-tables on mobile. */
.sl-admin-main { padding: 32px; }
@media (max-width: 760px) { .sl-admin-main { padding: 20px 16px; } }
.sl-admin-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.sl-admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sl-admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sl-admin-table th { text-align: left; padding: 8px 12px 8px 0; }
.sl-admin-table thead tr { border-bottom: 1.5px solid var(--ink); }
.sl-admin-table td { padding: 8px 12px 8px 0; }
.sl-admin-table tbody tr { border-bottom: 1.5px dashed var(--hairline); }
.sl-admin-table .sl-at-strong { font-weight: 600; }
.sl-admin-table .sl-at-actions { text-align: right; padding-right: 0; }

@media (max-width: 980px) {
  .sl-admin-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .sl-admin-stats { gap: 10px; }
  .sl-admin-2col { grid-template-columns: 1fr; }
  .sl-admin-table, .sl-admin-table tbody { display: block; }
  .sl-admin-table thead { display: none; }
  .sl-admin-table tbody tr { display: block; border: 1.5px solid var(--hairline); border-radius: var(--radius-chip); padding: 12px 14px; margin-top: 12px; }
  .sl-admin-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: none; }
  .sl-admin-table td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); flex-shrink: 0; }
  .sl-admin-table td:empty { display: none; }
  .sl-admin-table .sl-at-actions { justify-content: flex-end; margin-top: 8px; }
  .sl-admin-table td[style*="max-width"] { max-width: none !important; }
}

@media (max-width: 440px) {
  .sl-admin-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Pricing picker: band + interval pills above the plan cards. */
.sl-pricing-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 36px; }
.sl-pricing-picker__label { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.sl-pricing-picker__gap { width: 18px; }
.sl-pill { border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 18px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; background: var(--card); color: var(--ink); cursor: pointer; }
.sl-pill--active { background: var(--ink); color: var(--paper); }

/* Turbo stream subscriptions are invisible plumbing — never a grid cell. */
turbo-cable-stream-source { display: none; }

/* Drag-or-click file target (Claude members CSV and friends). */
.sl-dropzone { border: 2px dashed var(--text-muted); border-radius: var(--radius-chip); padding: 20px 16px; text-align: center; cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); background: var(--card); }
.sl-dropzone--over { border-color: var(--coral); background: var(--coral-wash); }

/* Sync toasts: bottom-right stack, card look. */
.sl-toasts { position: fixed; bottom: 24px; right: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.sl-toast { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius-card); padding: 14px 16px; box-shadow: 4px 4px 0 var(--coral); font-size: var(--text-sm); }
.sl-toast__title { font-weight: 700; }
.sl-toast__body { color: var(--text-secondary); margin-top: 2px; font-size: var(--text-xs); }
.sl-toast__close { background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0; }
.sl-toast--alert { box-shadow: 4px 4px 0 var(--ink); border-color: var(--coral-deep); }
@media (max-width: 760px) { .sl-toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

/* Chrome focuses the dialog element itself on open — no ring on the box. */
.sl-dialog:focus, .sl-dialog:focus-visible { outline: none; }

/* Modal scroll hygiene: the picker list never chains scroll to the page,
   and the page behind an open dialog doesn't scroll at all. */
.sl-dialog__scroll { overscroll-behavior: contain; }
body:has(dialog[open]) { overflow: hidden; }

/* Aggregated scan toast: one card, a live row per connector. */
.sl-toast--sync:not(:has(.sl-sync-row)) { display: none; }
.sl-sync-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--text-secondary); font-size: var(--text-xs); }
.sl-sync-row__mark { width: 13px; flex: none; text-align: center; font-weight: 700; }
.sl-spinner { width: 11px; height: 11px; flex: none; border: 2px solid var(--hairline); border-top-color: var(--coral); border-radius: 50%; animation: sl-spin 0.8s linear infinite; }
@keyframes sl-spin { to { transform: rotate(360deg); } }