/* Console shell: tab strip + freshness toolbar, panel layouts, the example
   workspace, API-key surfaces, auth screens, settings. */

/* ── Shell ─────────────────────────────────────────────────────────── */

.console {
  padding-block: var(--space-8) var(--space-16);
}

.console-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  margin-block-end: var(--space-5);
}

.console-head h1 {
  font-size: var(--text-xl);
}

/* Freshness toolbar: the "is this data current" line. */
.freshness {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.freshness.is-error {
  color: var(--danger);
}

.freshness.is-syncing {
  color: var(--ink-body);
}

/* ── Panels ────────────────────────────────────────────────────────── */

.console-panels {
  margin-block-start: var(--space-5);
}

/* Overview metric cards. */
.metric-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 44rem) {
  .metric-grid {
    grid-template-columns: 1fr;
  }
}

.metric strong {
  color: var(--ink-strong);
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.metric span {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.metric small {
  color: var(--ink-faint);
  display: block;
  font-size: var(--text-xs);
  margin-block-start: var(--space-1);
}

/* ── Workspace (example feature) ───────────────────────────────────── */

.workspace-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
}

@media (max-width: 56rem) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
}

.workspace-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-block-start: var(--space-4);
}

.estimate-line {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.result-card {
  border-top: 1px solid var(--rule);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
}

/* Runs history rows — fixed slots: status icon / id+meta / credits / delete. */
.run-list {
  display: flex;
  flex-direction: column;
}

.run-row {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.run-row:last-child {
  border-bottom: none;
}

.run-row-status {
  color: var(--success);
  flex: none;
}

.run-row-status.is-error {
  color: var(--danger);
}

.run-row-main {
  flex: 1;
  min-width: 0;
}

.run-row-main strong {
  color: var(--ink-strong);
  display: block;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-row-main small {
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.run-row-credits {
  color: var(--ink-muted);
  flex: none;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* ── API keys ──────────────────────────────────────────────────────── */

.key-secret-box {
  background: var(--surface-sunken);
  border: 1px solid var(--warning-rule);
  border-radius: var(--radius-md);
  margin-block: var(--space-4);
  padding: var(--space-4);
}

.key-secret-box code {
  color: var(--ink-strong);
  display: block;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  margin-block: var(--space-2);
}

/* ── Billing ───────────────────────────────────────────────────────── */

.billing-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

.billing-summary .plan-price {
  margin-block: 0;
}

.plan-change-banner {
  margin-block-end: var(--space-4);
}

/* ── Auth screens ──────────────────────────────────────────────────── */

.auth-prompt {
  margin-inline: auto;
  max-width: 26rem;
  text-align: center;
}

/* ── Settings / profile ────────────────────────────────────────────── */

.settings-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 52rem) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.method-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.method-row {
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.method-row strong {
  color: var(--ink-strong);
  font-size: var(--text-sm);
}

.method-row small {
  color: var(--ink-muted);
  display: block;
  font-size: var(--text-xs);
}

/* ── Run result / billing options ──────────────────────────────────── */

.run-result-title {
  color: var(--ink-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-3);
}

/* ── Invite tab / apply-invite prompt ──────────────────────────────── */

.invite-prompt {
  margin-block-end: var(--space-4);
}

.invite-prompt p {
  margin-block: 0;
}

.invite-code-box {
  align-items: center;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.invite-code {
  color: var(--ink-strong);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
}

.invite-share-url code {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* "Have an invite code?" — one flex row on wider widths: the input keeps
   the INV-XXXX-XXXX token unbroken and the Apply button stays intrinsic.
   At 30rem and under the button stacks full-width below the input. */
.invite-apply-form {
  align-items: flex-end;
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.invite-apply-field {
  flex: 1;
  min-width: 0;
}

.invite-apply-input {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.invite-apply-form .button {
  flex: none;
}

@media (max-width: 30rem) {
  .invite-apply-form {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Workbench density: generous composition, compact controls. */
.console-head {
  margin-block-end: var(--space-8);
}
.console-head h1 {
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  margin-top: var(--space-2);
}
.console .tabs {
  background: var(--surface-sunken);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  gap: var(--space-1);
}
.console .tab {
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
}
.console .tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
.console .tab::after {
  content: none;
}
.console-panels {
  margin-top: var(--space-8);
}
.console .metric {
  padding: var(--space-6);
  box-shadow: none;
}
.metric strong {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
}
.workspace-grid > .card {
  padding: var(--space-6);
  box-shadow: none;
  min-width: 0;
}
.workspace-grid > .card:first-child {
  border-top: 3px solid var(--accent);
}
.workspace-grid .textarea {
  min-height: 14rem;
  background: var(--surface-page);
}
.result-card {
  background: transparent;
}
.auth-prompt {
  max-width: 34rem;
  padding-block: var(--space-12);
}
.auth-prompt .card {
  padding: var(--space-10);
  text-align: left;
}
@media (max-width: 44rem) {
  .console-head h1 {
    font-size: var(--text-2xl);
  }
  .console .tab {
    padding-inline: var(--space-4);
  }
  .workspace-grid > .card {
    padding: var(--space-5);
  }
  .auth-prompt .card {
    padding: var(--space-6);
  }
}

/* A prepaid-only catalog has no subscription switches to offer. */
.console .card:has(> [data-billing="planList"]:empty) {
  display: none;
}

.workspace-grid .panel-title {
  margin-bottom: 0;
}
.workspace-grid .field + .field {
  margin-top: var(--space-4);
}
.chat-reply {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
[data-billing="kitStatus"] {
  overflow-wrap: anywhere;
}
[data-billing="packList"] .method-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
}
[data-billing="packList"] .method-row strong,
[data-billing="packList"] .method-row small {
  grid-column: 1;
}
[data-billing="packList"] .method-row button {
  grid-column: 2;
  grid-row: 1 / 3;
}
@media (max-width: 44rem) {
  [data-billing="packList"] .method-row {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-billing="packList"] .method-row button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: var(--space-2);
  }
}

.console .card {
  box-shadow: none;
}
[data-billing="packList"] .method-row {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding-inline: 0;
  padding-block: var(--space-5);
}
.result-card .notice {
  background: transparent;
  border: 0;
  padding-inline: 0;
}