/* ============================================================================
   Home screen: the import dropzone, the bundled-test buttons, the mode picker.
   ========================================================================== */

/* --------------------------------------------------------------- Import --- */

.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.dropzone.is-hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone-main { font-weight: 560; margin-bottom: var(--sp-1); }
.dropzone-sub { color: var(--text-muted); font-size: .85rem; margin-bottom: var(--sp-3); }
.dropzone-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
label.primary-button { display: inline-block; }

.bundled {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-strong);
}
.bundled-label {
  display: block;
  font-size: .6875rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.bundled-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.bundled-actions .ghost-button { font-size: .9rem; }
.bundled-actions .ghost-button.is-error {
  border-color: var(--bad-border);
  background: var(--bad-soft);
  color: var(--bad);
  text-decoration: line-through;
}
.bundled-note {
  font-size: .8rem;
  color: var(--text-muted);
  margin: var(--sp-3) 0 0;
  text-align: center;
}

/* ---------------------------------------------------------------- Modes --- */

.mode-list { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.mode {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio title" "radio desc" ". extra";
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.mode:hover { border-color: var(--text-faint); }
.mode.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--ring);
}
.mode input { grid-area: radio; align-self: center; accent-color: var(--accent); }
.mode-title { grid-area: title; font-weight: 600; }
.mode-desc { grid-area: desc; color: var(--text-muted); font-size: .875rem; }
.mode .select { grid-area: extra; margin-top: var(--sp-2); justify-self: start; }

/* --------------------------------------------------------- Session options -- */

/* A checkbox that has to sit outside the mode list: it applies to whichever
   mode is picked, so putting it inside one of the two would be a lie. */
.option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
}
.option:hover { border-color: var(--border-strong); }
.option input { margin: .2rem 0 0; accent-color: var(--accent); }
.option-title { display: block; font-weight: 600; font-size: .9375rem; }
.option-desc { display: block; color: var(--text-muted); font-size: .875rem; }

/* Says what Listening actually is today, rather than letting a transcript
   pass for the finished article. */
.tag-soon {
  margin-left: var(--sp-2);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.trend {
  font-size: .9rem;
  color: var(--text-muted);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--border-strong);
  margin-bottom: var(--sp-4);
}
.trend.is-up { border-left-color: var(--ok); }
.trend.is-down { border-left-color: var(--warn); }