/* Engram's own components. theme.css is DevSwarm's stylesheet, unchanged; everything here
   is built only from its tokens (colours, --radius, --pill, --shadow), so nothing drifts. */

.skip-link { position: absolute; top: -100px; left: 16px; z-index: 30; padding: 8px 16px; border-radius: var(--pill); background: var(--action); color: #ffffff; }
.skip-link:focus { top: 8px; text-decoration: none; }

.note { margin: 0; padding: 14px 18px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font-size: 15px; }

/* One colour per kind of output, borrowed from DevSwarm's agent colours. */
.output-tile-notes { background: var(--agent-coder); }
.output-tile-diagram { background: var(--agent-planner); }
.output-tile-cards { background: var(--agent-tester); }
.output-tile-quiz { background: var(--agent-reviewer); }
.output-tile-video { background: var(--critical); }
.output-tile-sync { background: var(--agent-verify); }

.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-form button .icon { width: 16px; height: 16px; margin-left: 8px; stroke-width: 2.2; }

/* Upload drop zone: the file input covers the whole zone, so a click or a drop both work. */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 1.5px dashed var(--baseline);
  border-radius: 16px;
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.is-dragging { border-color: var(--action); background: var(--running-bg); }
.dropzone.has-file { border-style: solid; border-color: var(--action); }
.dropzone:focus-within { box-shadow: 0 0 0 4px var(--focus); }
.dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--action); box-shadow: var(--shadow); }
.dropzone-icon .icon { width: 20px; height: 20px; }
.dropzone-title { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.dropzone-hint { color: var(--muted); font-size: 13px; }

.outputs-card { padding-bottom: 10px; }
.outputs-card .showcase-steps li:first-child { margin-top: 12px; }

.output-grid, .course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.output-card { gap: 12px; }
.output-card h3 { margin: 4px 0 0; font-size: 21px; letter-spacing: -0.02em; }
.output-card p { font-size: 15px; }

.course-card { color: inherit; transition: transform 0.2s ease; }
.course-card:hover { text-decoration: none; transform: translateY(-2px); }
.course-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }

@media (max-width: 960px) {
  .output-grid, .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .output-grid, .course-grid { grid-template-columns: minmax(0, 1fr); }
  /* The outputs grid right below says the same thing, so phones skip the preview card. */
  .home-hero .showcase { display: none; }
  .output-card { padding: 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dropzone, .course-card { transition: none; }
}