/* INTERNETMON readable typography
 *
 * Native UI fonts stay sharp at every display scale and avoid a third-party
 * font request. Monospace is reserved for data whose structure benefits from
 * fixed-width glyphs: URLs, protocol details, payloads, and diagnostics.
 */
:root {
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
}

body[data-ui-font="readable"] {
  font-family: var(--font-ui) !important;
  font-size: 14px;
  font-weight: 400;
  font-kerning: normal;
  line-height: 1.5;
}

body[data-ui-font="readable"] button,
body[data-ui-font="readable"] input,
body[data-ui-font="readable"] select,
body[data-ui-font="readable"] textarea {
  font-family: var(--font-ui);
}

body[data-ui-font="readable"] :is(
  code,
  pre,
  kbd,
  samp,
  .mono,
  #ep-input,
  .ep-item-host,
  .ep-item-path,
  .ep-row-url,
  .endpoint-tile-url,
  .ep-url,
  .flow-url,
  .review-card-path,
  .test-output,
  .unsafe-phrase,
  .hero-source,
  .history-time,
  .history-context,
  .fact-value,
  #err-subheading,
  .err-sample-time,
  .err-sample-meta,
  .err-fact-value,
  .err-request-line,
  .err-header-row,
  .err-code,
  .err-transport
) {
  font-family: var(--font-mono) !important;
  font-variant-ligatures: none;
  letter-spacing: 0;
}

body[data-ui-surface="dashboard"] .subtitle {
  font-family: var(--font-mono) !important;
  font-variant-ligatures: none;
  letter-spacing: 0;
}

body[data-ui-font="readable"] :is(
  .stat-val,
  .legend-avg,
  .summary-value,
  .mini-stat-value,
  .timer,
  .count-value,
  .history-time,
  .history-range,
  .fact-value,
  .status-check-meta,
  .endpoint-interval
) {
  font-variant-numeric: tabular-nums;
}

/* Brand and navigation */
body[data-ui-font="readable"] .wordmark {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

body[data-ui-font="readable"] :is(
  .header-link,
  .site-nav-link,
  .action,
  .back-link,
  .back-btn,
  .manage-back,
  .btn,
  .rb,
  .segmented button
) {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.045em;
  line-height: 1.25;
}

body[data-ui-font="readable"] .btn-sm {
  font-size: 11px;
}

/* Small uppercase labels remain compact without becoming faint or fragmented. */
body[data-ui-font="readable"] :is(
  .eyebrow,
  .section-label,
  .field-label,
  .form-field label,
  .stat-label,
  .summary-label,
  .mini-stat-label,
  .fact-label,
  .endpoint-detail-label,
  .count-label,
  .composer-section-title,
  .summary-key,
  .secret-origin,
  .status-impact-label,
  .status-coverage-label,
  .chart-title,
  .chart-view-control label,
  .ep-label,
  .dependency-panel-title,
  .dep-stack-count,
  .dep-stack-relation,
  .dep-stack-dependency-label span,
  .err-pane-label,
  .err-fact-label,
  .err-section-title,
  .err-subtitle,
  .err-sample-kind,
  .review-variation-label,
  #err-eyebrow
) {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1.35;
}

body[data-ui-font="readable"] :is(.badge, .chip, .beta-chip, .status-state, .state-badge, .probe-type-badge) {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

/* Forms */
body[data-ui-font="readable"] :is(input, select, textarea, .endpoint-search, .endpoint-filter) {
  font-size: 14px;
  line-height: 1.4;
}

body[data-ui-font="readable"] input::placeholder,
body[data-ui-font="readable"] textarea::placeholder {
  font-weight: 400;
}

/* Management registry */
body[data-ui-surface="manage"] :is(.toolbar h2, .list-title) {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

body[data-ui-surface="manage"] .manage-page-meta,
body[data-ui-surface="manage"] .endpoint-registry-summary,
body[data-ui-surface="manage"] .manage-company-stat,
body[data-ui-surface="manage"] .manage-company-protocols,
body[data-ui-surface="manage"] .manage-company-collision,
body[data-ui-surface="manage"] .manage-company-action,
body[data-ui-surface="manage"] .endpoint-interval,
body[data-ui-surface="manage"] .endpoint-detail-value,
body[data-ui-surface="manage"] .endpoint-toggle-label,
body[data-ui-surface="manage"] .provider-help,
body[data-ui-surface="manage"] .status-check-meta {
  font-size: 12px;
  line-height: 1.5;
}

body[data-ui-surface="manage"] .manage-company-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body[data-ui-surface="manage"] .endpoint-tile-name {
  font-size: 14px;
  font-weight: 650;
}

body[data-ui-surface="manage"] :is(.endpoint-tile-url, .ep-url) {
  font-size: 12px;
  line-height: 1.5;
}

body[data-ui-surface="manage"] :is(table, .flow-table) {
  font-size: 13px;
}

body[data-ui-surface="manage"] :is(th, .flow-table th) {
  font-size: 11px;
  letter-spacing: 0.07em;
}

body[data-ui-surface="manage"] :is(.badge, .endpoint-detail-label) {
  font-size: 11px;
}

body[data-ui-surface="manage"] .modal h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body[data-ui-surface="manage"] :is(.form-group label, .test-label, .flow-detail-section h4) {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1.4;
}

body[data-ui-surface="manage"] .form-group label .hint {
  font-size: 11px;
}

body[data-ui-surface="manage"] :is(.flow-detail-section pre, .test-error) {
  font-size: 12px;
  line-height: 1.55;
}

body[data-ui-surface="manage"] :is(
  #f-url,
  #f-cookies,
  #f-payload,
  #f-ready-event,
  #f-first-event,
  #f-success-event,
  #f-error-event,
  #f-response-marker,
  #f-send-event,
  #f-webrtc-session,
  #f-extra-probe-options,
  #sp-page-url,
  #sp-api-url,
  #sp-status-path,
  #sp-operational-values,
  .kv-key,
  .kv-val,
  .flow-detail-section pre,
  .test-error
) {
  font-family: var(--font-mono) !important;
  font-variant-ligatures: none;
  letter-spacing: 0;
}

/* Main and Dream dashboards */
body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) #status-bar {
  font-size: 12px;
  letter-spacing: 0.07em;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .subtitle {
  font-size: 13px;
  line-height: 1.35;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .stat-val {
  font-size: 25px;
  font-weight: 700;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(#ep-input, #chart-view-select, #dependency-view-select) {
  font-family: var(--font-ui) !important;
  font-size: 13px;
  letter-spacing: 0;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(
  .ep-count,
  .ep-item,
  #legend,
  .legend-item,
  .sb-region,
  .overview-section-note,
  .co-stat,
  .co-dot,
  .company-official-copy,
  .company-official-chip,
  .company-official-meta,
  .company-official-action
) {
  font-size: 12px;
  line-height: 1.45;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(#zoom-reset, #zoom-hint) {
  font-size: 11px;
  letter-spacing: 0.06em;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .unit {
  font-size: 12px !important;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(
  .overview-section-title,
  .list-title,
  .company-official-title
) {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .co-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(.ep-list-table, .dependency-matrix) {
  font-size: 13px;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(.ep-list-table th, .dependency-matrix th) {
  font-size: 11px;
  letter-spacing: 0.07em;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .ep-row-name {
  font-size: 14px;
  font-weight: 650;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .ep-row-url {
  font-size: 12px;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(
  .dep-node text,
  .dep-provider,
  .dep-service,
  .dep-stack-root-name,
  .dep-stack-endpoint-name,
  .dep-stack-provider,
  .dep-mobile-matrix-host,
  .dep-mobile-pill
) {
  font-family: var(--font-ui) !important;
  font-size: 11px;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(
  .dep-node text.sub,
  .dep-stack-root-sub,
  .dep-stack-count,
  .dep-stack-relation,
  .dep-stack-endpoint-host,
  .dep-stack-dependency-label span
) {
  font-size: 11px;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .ep-list-table td::before {
  font-size: 11px;
}

body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) #tip {
  font-family: var(--font-ui) !important;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.55;
}

/* Error inspector: prose/navigation is sans; wire data remains monospace. */
body[data-ui-surface="dashboard"] :is(#err-eyebrow, #err-heading, .err-sample) {
  font-family: var(--font-ui) !important;
}

body[data-ui-surface="dashboard"] #err-heading {
  font-size: 18px;
  font-weight: 650;
}

body[data-ui-surface="dashboard"] #err-subheading,
body[data-ui-surface="dashboard"] .err-fact-value,
body[data-ui-surface="dashboard"] .err-request-line,
body[data-ui-surface="dashboard"] .err-code,
body[data-ui-surface="dashboard"] .err-transport {
  font-size: 12px;
}

body[data-ui-surface="dashboard"] :is(.err-sample-time, .err-sample-meta, .err-header-row, .err-none, .err-fallback-note, #err-privacy) {
  font-size: 11px;
}

body[data-ui-surface="dashboard"] .err-badge {
  font-size: 11px;
}

body[data-ui-surface="dashboard"] :is(.err-retry, #err-copy, #err-close) {
  font-family: var(--font-ui) !important;
  font-size: 11px;
  letter-spacing: 0.045em;
}

/* Official status overview and detail */
body:is([data-ui-surface="status"], [data-ui-surface="status-detail"]) :is(.vendor-strip, .section-meta) {
  font-size: 12px;
  letter-spacing: 0.06em;
}

body:is([data-ui-surface="status"], [data-ui-surface="status-detail"]) :is(.hero-copy, .hero-detail, .signal-note, .separation-note) {
  font-size: 14px;
  line-height: 1.65;
}

body:is([data-ui-surface="status"], [data-ui-surface="status-detail"]) :is(.hero-description, .hero-meta, .status-page-source, .section-meta) {
  font-size: 12px;
  line-height: 1.5;
}

body:is([data-ui-surface="status"], [data-ui-surface="status-detail"]) :is(.section-title, .content-card h3) {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

body[data-ui-surface="status"] .status-page-name,
body[data-ui-surface="status-detail"] .state-panel-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
}

body[data-ui-surface="status"] :is(.status-page-detail, .status-impact-row, .status-coverage, .status-page-footer, .state-panel-copy) {
  font-size: 13px;
  line-height: 1.55;
}

body[data-ui-surface="status-detail"] :is(
  .content-card p,
  .item-meta,
  .empty-card,
  .component-name,
  .component-state,
  .healthy-components summary,
  .history-note,
  .history-range,
  .history-time,
  .history-state,
  .history-context,
  .fact-value,
  .state-panel-copy
) {
  font-size: 12px;
  line-height: 1.55;
}

/* Sandbox workflow */
body[data-ui-surface="sandbox"] .page-copy {
  font-size: 14px;
  line-height: 1.65;
}

body[data-ui-surface="sandbox"] :is(
  .surface-title,
  .session-row-title,
  .review-card-title,
  .review-host-name,
  .promotion-endpoint h3
) {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}

body[data-ui-surface="sandbox"] :is(
  .surface-subtitle,
  .notice,
  .hint,
  .constraint-list,
  .session-row,
  .empty-state,
  .browser-placeholder,
  .timer-caption,
  .review-card-path,
  .review-card-foot,
  .review-host-hint,
  .review-host-note,
  .review-variation-args,
  .review-variation-empty,
  .arg-chip,
  .review-help ol,
  .summary-value,
  .secret-name,
  .duplicate-row,
  .promotion-endpoint p,
  .promotion-step,
  .test-output
) {
  font-size: 12px;
  line-height: 1.55;
}

body[data-ui-surface="sandbox"] .review-card-path {
  font-size: 12px;
}

body[data-ui-surface="sandbox"] :is(.review-card-path, .arg-chip) {
  font-family: var(--font-mono) !important;
  font-variant-ligatures: none;
  letter-spacing: 0;
}

body[data-ui-surface="sandbox"] .promotion-step strong {
  font-size: 12px;
}

/* Login */
body[data-ui-surface="login"] .card {
  width: min(390px, calc(100vw - 32px));
}

body[data-ui-surface="login"] :is(label, .subtitle) {
  font-size: 12px;
  line-height: 1.45;
}

body[data-ui-surface="login"] :is(input, button, .btn) {
  font-size: 14px;
}

body[data-ui-surface="login"] button {
  letter-spacing: 0.06em;
}

body[data-ui-surface="login"] .error {
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 1800px) {
  body[data-ui-font="readable"] {
    font-size: 15px;
  }

  body[data-ui-surface="manage"] .content,
  body:is([data-ui-surface="status"], [data-ui-surface="status-detail"]) main {
    max-width: 1800px;
    margin-inline: auto;
    width: 100%;
  }

  body[data-ui-surface="manage"] .endpoint-tile-name,
  body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(.co-name, .ep-row-name),
  body[data-ui-surface="status"] .status-page-name,
  body[data-ui-surface="status-detail"] .state-panel-title {
    font-size: 16px;
  }

  body[data-ui-surface="manage"] :is(
    .endpoint-tile-url,
    .endpoint-interval,
    .endpoint-detail-value,
    .endpoint-toggle-label,
    .manage-page-meta,
    .endpoint-registry-summary,
    .manage-company-stat,
    .manage-company-protocols
  ),
  body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) :is(
    .ep-count,
    .ep-item,
    #legend,
    .ep-row-url,
    .overview-section-note,
    .co-stat,
    .co-dot
  ) {
    font-size: 13px;
  }

  body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) #view-companies {
    padding-inline: max(32px, calc((100vw - 1900px) / 2));
  }

  body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .co-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-ui-font="readable"] :is(input, select, textarea, .endpoint-search, .endpoint-filter) {
    font-size: 16px;
  }

  body[data-ui-font="readable"] :is(.btn, .action, .site-nav-link, .back-link, .back-btn, .manage-back) {
    font-size: 13px;
  }

  body[data-ui-font="readable"] :is(.wordmark, .endpoint-tile-name, .ep-row-name, .review-card-title) {
    font-size: 14px;
  }
}

/* Keep the viewport-bound chart usable on phones. The desktop metric size has
 * deliberately higher specificity than the original inline stylesheet, so the
 * compact value must be restated here at the same specificity. */
@media (max-width: 640px) {
  body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .stat-val {
    font-size: 15px;
  }

  body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .unit {
    font-size: 11px !important;
  }
}

@media (max-width: 380px) {
  body:is([data-ui-surface="dashboard"], [data-ui-surface="dream"]) .stat-val {
    font-size: 13px;
  }
}