/*
  The colours are the Tailwind neutral and indigo steps the dashboard used
  before, so the rewrite looks the same. Dark mode follows the operating
  system, which is what Tailwind did here too: the old build set no darkMode
  option, and the default is prefers-color-scheme.
*/
:root {
  --bg: #fff;
  --text: #171717;
  --surface: #fafafa;
  --border: #e5e5e5;
  --field-bg: #fff;
  --field-border: #d4d4d4;
  --button-bg: #f5f5f5;
  --muted: #737373;
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --danger: #ef4444;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171717;
    --text: #f5f5f5;
    --surface: #262626;
    --border: #404040;
    --field-bg: #171717;
    --field-border: #525252;
    --button-bg: #404040;
    --muted: #a3a3a3;
  }
}

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

body,
h1,
h2,
p,
figure {
  margin: 0;
}

/* The browser's own rule for this attribute is namespaced to HTML, so it never
   matches the <svg> icon sprite, which then takes its 300x150 replaced-element
   default and pushes the page down. Tailwind's reset used to carry this. */
[hidden] {
  display: none;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */

.container {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem;
}

.container-narrow {
  max-width: 24rem;
  margin: 10vh auto 0;
  padding: 2rem;
}

h1 {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 700;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.row-tight {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* space-y-4: a gap between siblings without one after the last. */
.stack > * + * {
  margin-top: 1rem;
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .split {
    grid-template-columns: repeat(3, 1fr);
  }

  .split > main {
    grid-column: span 2;
  }
}

/* Surfaces */

.card {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  padding: 1.5rem;
}

.card-tight {
  padding: 1rem;
}

/* Controls */

.input {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--field-border);
  border-radius: 0.25rem;
  background: var(--field-bg);
  color: inherit;
  font: inherit;
}

.input-narrow {
  width: 5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--button-bg);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms;
}

.btn:hover {
  border-color: var(--accent);
}

.btn-wide {
  width: 100%;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
}

.btn-danger {
  padding: 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: var(--danger);
  cursor: pointer;
  transition:
    border-color 150ms,
    background-color 150ms;
}

.btn-danger:hover {
  border-color: var(--danger);
}

.btn-danger-quiet {
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.btn-danger-quiet:hover {
  border-color: transparent;
  background: rgb(239 68 68 / 0.1);
}

/* A runtime version in the sidebar: select on the left, delete on the right. */
.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
}

.option[data-selected='true'] {
  border-color: var(--accent);
}

.option-select {
  flex: 1;
  padding: 0.5rem 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* The file input is replaced by the label wrapping it. */
.file-input {
  display: none;
}

.drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  cursor: pointer;
}

/* Text */

.link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

.link:hover {
  color: var(--accent-strong);
}

.muted {
  color: var(--muted);
  font-size: 0.875rem;
}

.subtitle {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
}

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

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

/* Spacing helpers, used where a one-off margin would otherwise repeat. */
.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-8 {
  margin-top: 2rem;
}