:root {
  --color-bg: #242629;
  --color-panel0: #1c1d1f;
  --color-panel: #33353a;
  --color-panel2: #393b40;
  --color-fg: #e5e7eb;
  --color-muted: #99a1af;
  --color-accent: #3b82f6;
  --color-accent2: #2563eb;
  --color-ok: #10b981;
  --color-err: #f87171;
  --color-border: #364153;
  --color-warn: #fb923c;
  --report-heat-zero-fg: #6b7280;
  --report-dim-color: var(--color-ledger-dim);
  --report-hairline: var(--color-ledger-hairline);
  --report-other: #6b7280;
  --report-card-bg: var(--color-dark);
  --report-card-hover-border: var(--color-border);
  --color-heat-low: #393b40;
  --color-heat-high: #6366f1;
  --color-chart-1: #6366f1;
  --color-chart-2: #22c55e;
  --color-chart-3: #f59e0b;
  --color-chart-4: #a855f7;
  --color-chart-5: #06b6d4;
  --color-chart-6: #f43f5e;
  --color-chart-7: #84cc16;
  --color-chart-8: #ec4899;
  --color-white: #ffffff;
  --color-dark: #393b40;
  --color-darkerthandark: #33353a;
  --color-darker: #242629;
  --color-darkerer: #1c1d1f;
  --color-darkest: #151617;
  --color-darkester: #0e0f10;
  --color-dark_tab: #323633;
  --color-darker_tab: #262927;
  --color-dark_tab_hover: #3a3d3a;
  --color-darker_tab_hover: #2e312e;
  --color-dark_tab_border: #111211;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  --color-green-50: #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-200: #a7f3d0;
  --color-green-300: #6ee7b7;
  --color-green-400: #34d399;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-800: #065f46;
  --color-green-900: #064e3b;
  --color-green-950: #022c22;
  --color-yellow-700: rgb(251 191 36);
  --color-red-700: rgb(185 28 28);
  --color-duration-0: rgb(69, 159, 246);
  --color-duration-1: rgb(139, 93, 246);
  --color-duration-2: rgb(246, 168, 35);
  --color-duration-3: rgb(115, 128, 140);
  --color-farm-home: rgb(69, 159, 246);
  --color-farm-virtue: rgb(246, 168, 35);
  --color-tutorial: rgb(115, 128, 140);
  --color-short: rgb(69, 159, 246);
  --color-standard: rgb(139, 93, 246);
  --color-extended: rgb(246, 168, 35);
  --color-stage-save: rgb(59 130 246);
  --color-stage-missions: rgb(16 185 129);
  --color-stage-export: rgb(245 158 11);
  --color-stage-failed: rgb(220 38 38);
  --color-rarity-0: rgb(156 163 175);
  --color-rarity-1: #6ab6ff;
  --color-rarity-2: #c03fe2;
  --color-rarity-3: #eeab42;
  --color-rare: #6ab6ff;
  --color-epic: #c03fe2;
  --color-legendary: #eeab42;
  --color-goldenstar: rgb(255, 215, 0);
  --color-shortdarker: rgb(48, 111, 171);
  --color-dubcap: rgb(173, 10, 198);
  --color-dubcapdarker: rgb(120, 7, 138);
  --color-selectedmission: rgb(10, 173, 82);
  --color-selectedmissiondarker: rgb(7, 120, 56);
  --color-buggedcap: rgb(198, 10, 10);
  --color-buggedcapdarker: rgb(138, 7, 7);
  --color-privacy_blue: #276ec8;
  --color-data_loss_red: #820808;
  --color-upgrade_green: #1c802e;
  --color-upgrade_green_hover: #155e22;
  --color-upgrade_green_border: #155e22;
  --color-upgrade_green_hover_border: #114f1c;
  --color-ledger-dim: oklch(44.6% 0.03 256.802);
  --color-ledger-hairline: oklch(27.8% 0.033 256.848);
  --color-ledger-primary: #4f46e5;
  --color-ledger-primary-hover: #4338ca;
  --color-ledger-egg-purple: #a855f7;
  --color-ledger-egg-yellow: #eab308;
  --color-ledger-egg-pink: #c831ff;
  --color-ledger-incomplete: #fa8072;
  --color-view-ships: rgb(246, 168, 35);
  --color-view-drops: rgb(155, 110, 243);
  --color-view-reports: rgb(69, 159, 246);
  --color-ledger-support: oklch(64.5% 0.246 16.439);
  --color-ledger-support-hover: oklch(71.2% 0.194 13.428);
  --color-ledger-drop-artifact: #1e3a8a;
  --color-ledger-drop-stone: oklch(40.1% 0.17 325.612);
  --color-ledger-drop-unknown: oklch(21% 0.034 264.665);
  --color-ledger-login: #5865f2;
  --color-ledger-login-hover: #4752c4;
  --color-ledger-login-menu: #23232a;
  --color-ledger-login-menu-border: #3a3a44;
  --color-ledger-panel-muted: rgba(120, 128, 138, 0.12);
  --color-ledger-scrollbar: #555555;
  --color-ledger-scrollbar-hover: #888888;
  --color-ledger-tooltip-border: #4b5563;
  --motion-fast: 120ms;
  --motion-base: 150ms;
  --motion-morph: 220ms;
  --motion-pulse: 2s;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-pulse: cubic-bezier(.4, 0, .6, 1);
}

*,
::before,
::after,
::backdrop,
::file-selector-button {
  border-color: var(--color-fg);
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#app {
  height: 100%;
}

[hidden] {
  display: none !important;
}

dialog:not([open]) {
  display: none;
}

hr {
  border-color: var(--color-fg);
}

a {
  color: inherit;
  text-decoration: inherit;
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
  appearance: auto;
}

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  color: var(--color-accent);
  background-color: var(--color-darkest);
  background-origin: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 1px solid var(--color-border);
  print-color-adjust: exact;
}

input[type="checkbox"] {
  border-radius: 0.25rem;
}

input[type="radio"] {
  border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: currentColor !important;
  border-color: transparent !important;
}

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

input[type="text"],
input[type="number"],
input[type="search"],
textarea,
select {
  padding: 0.5rem 0.75rem;
  color: var(--color-fg);
  background-color: var(--color-darkest);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  print-color-adjust: exact;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-ledger-scrollbar);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-ledger-scrollbar-hover);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

.tooltip-floating {
  --tooltip-border: var(--color-ledger-tooltip-border);
}

.report-tooltip {
  --tooltip-z: 999999;
}

.text-duration-0 {
  color: var(--color-duration-0);
}

.text-duration-1 {
  color: var(--color-duration-1);
}

.text-duration-2 {
  color: var(--color-duration-2);
}

.text-duration-3 {
  color: var(--color-duration-3);
}

.text-goldenstar {
  color: var(--color-goldenstar);
}

.text-dubcap {
  color: var(--color-dubcap);
}

.text-dubcapdarker {
  color: var(--color-dubcapdarker);
}

.text-buggedcap {
  color: var(--color-buggedcap);
}

.text-buggedcapdarker {
  color: var(--color-buggedcapdarker);
}

.text-selectedmission {
  color: var(--color-selectedmission);
}

.text-selectedmissiondarker {
  color: var(--color-selectedmissiondarker);
}

.text-rare {
  color: var(--color-rare);
}

.text-epic {
  color: var(--color-epic);
}

.text-legendary {
  color: var(--color-legendary);
}

.url-link {
  color: var(--color-accent);
  text-decoration: underline;
}

.url-link:hover {
  color: var(--color-accent2);
}

a.url-link {
  color: var(--color-rare);
  text-decoration: none;
}

a.url-link:hover {
  text-decoration: underline;
}

.ledger-underline {
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.toggle-link {
  margin-right: 1.25rem;
  padding: 0;
  border: 0;
  font-weight: 700;
  color: var(--color-duration-0);
  background-color: transparent;
  cursor: pointer;
}

.toggle-link:hover {
  color: var(--color-shortdarker);
}

.xl-ico {
  display: inline;
  position: relative;
  top: -1px;
  height: 4rem;
  width: 4rem;
  padding: 0.5rem;
}

.skel {
  display: block;
  height: 1rem;
  border-radius: 0.375rem;
  background-color: var(--color-ledger-panel-muted);
  animation: pulse var(--motion-pulse) var(--ease-pulse) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
  }
}

.ledger-section {
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background-color: var(--color-darkest);
  overflow: hidden;
}

.ledger-section-inset {
  margin: 0.75rem 1px 0;
}

.ledger-section .disclosure-head {
  padding: 0.5rem 0.75rem;
}

.ledger-section .disclosure-head:hover {
  background-color: var(--color-darkerer);
}

.ledger-section .disclosure-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ledger-section .disclosure-body {
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.panel-muted {
  background: var(--color-ledger-panel-muted);
}

.section-heading {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.ext-opt-label {
  margin-right: 0.5rem;
  color: var(--color-muted);
}

.ext-opt-check {
  border-radius: 0.375rem;
  background-color: var(--color-darkest);
}

.ext-opt-check:focus {
  outline: none;
  box-shadow: none;
}

.ext-opt-check:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-accent) !important;
}

.ext-opt-check:disabled {
  opacity: 0.5;
}

.ext-opt-check:disabled:hover {
  cursor: not-allowed;
}

.number-input {
  display: block;
  color: var(--color-muted);
  background-color: var(--color-darkest);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  font-variant-numeric: tabular-nums;
}

.number-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.btn-secondary.ledger-btn-warn {
  color: var(--color-white);
  background-color: color-mix(in srgb, var(--color-warn) 70%, black);
  border-color: var(--color-warn);
}

.btn-secondary.ledger-btn-warn:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-warn) 85%, black);
}

.btn-secondary.ledger-btn-ok {
  color: var(--color-white);
  background-color: color-mix(in srgb, var(--color-ok) 70%, black);
  border-color: var(--color-ok);
}

.btn-secondary.ledger-btn-ok:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-ok) 85%, black);
}
