/* Theme Colors — console chrome and pages. Docs does not load this file. */
:root {
  --bg: #F9F7F5;
  --nav: #FFFFFF;
  --panel: #FFFFFF;
  --line: #E9EBF0;
  --text: #252A36;
  --muted: #737A8C;
  --accent: #DF2935;
  --hover: #DF2935;
  --link: #3D4357;
  --focus: #DF2935;
  --accent2: #F3F4F6;
  --err: #EF4444;
  --ok: #1B8A5A;
  --code: #F3F4F6;
  --grey: #737A8C;
  --row-hover: #F3F4F6;
  --row-selected: #FDECEE;
  --on-primary: #FFFFFF;
  --pin: #DF2935;
  --box-radius: 8px;
  --control-radius: 8px;
  --box-shadow: 0 1px 2px rgba(37, 42, 54, 0.05), 0 4px 16px rgba(37, 42, 54, 0.06);
}

.card,
.box,
.list,
.detail,
.cfg-list,
details.settings,
.modal,
.link-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--box-radius);
  box-shadow: var(--box-shadow);
}

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

html {
  color-scheme: light;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-wrap: break-word;
}

.card,
.box,
.list,
.detail,
.cfg-list,
details.settings,
.modal,
.link-card,
.wrap,
.side,
.main,
.split,
.work,
.pick-row,
.row,
.view,
.panel,
.sub-panel {
  max-width: 100%;
}

table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}

th, td {
  overflow-wrap: break-word;
  word-break: normal;
}

img, pre, textarea, input, select, iframe {
  max-width: 100%;
}

button, .btn {
  min-width: auto;
  max-width: 100%;
}

a:hover {
  color: var(--hover);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
select,
textarea,
.picker-search,
.composer-bar,
.btn,
.btn-new {
  border-radius: var(--control-radius);
}

.picker-menu,
pre,
.conv-row,
.mem-chip,
.site-row,
.banner,
.out {
  border-radius: var(--box-radius);
}

input:focus,
select:focus,
textarea:focus,
.picker-search:focus {
  outline: none;
  border-color: var(--focus);
}

button:focus-visible,
.nav-tab:focus-visible,
.sub-tab:focus-visible,
.tab:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}