:root {
  /* Brand colors, matched by eye to the bars on the Literacy KC slides */
  --brand-cyan: #00aeef;
  --brand-purple: #5d3c96;
  --brand-red: #e61a3c;
  --brand-yellow: #ffc222;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1f2933;
  --muted: #5f6b7a;
  --border: #d9dde3;
  --accent: var(--brand-purple);
  --accent-hover: #4a2f7d;
  --danger: #c4122f;
  --danger-soft: #fdecea;
  --radius: 10px;
  --content-width: 72rem; /* the admin page uses two columns; the login card is narrower */

  /* The delete button sits beside each card. Things under or above the cards leave the
     same room on the right, so everything lines up with the card edges. */
  --delete-width: 2.75rem;
  --row-gap: 0.25rem;
  --delete-column: calc(var(--delete-width) + var(--row-gap));
}

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

/* Without this, a rule like display: flex would override the hidden attribute */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    16px/1.5 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}

/* Four-color stripe across the top of every page, like the bars on the slides */
body::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--brand-cyan) 0 25%,
    var(--brand-purple) 25% 50%,
    var(--brand-red) 50% 75%,
    var(--brand-yellow) 75% 100%
  );
}

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.5rem 1rem 8rem; /* extra room at the bottom for the fixed save bar */
}

h1 {
  margin: 0;
  color: var(--brand-purple);
  font-size: 1.5rem;
  line-height: 1.3;
}

/* Form controls */

label {
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  font: inherit;
}

textarea {
  min-height: 6rem;
  font-weight: 400;
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: #eef1f5;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

button.primary:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

button.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

/* Login */

#login {
  max-width: 24rem;
  margin: 10vh auto 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

#login label {
  display: block;
  margin: 1.25rem 0 0.4rem;
}

#login button {
  width: 100%;
  margin-top: 1rem;
}

#login-error {
  min-height: 1.5em;
  margin: 0.75rem 0 0;
  color: var(--danger);
}

/* Admin page */

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

.hint {
  max-width: 46rem; /* keeps long lines readable on the wide admin page */
  margin: 0.5rem 0 0;
  color: var(--muted);
}

/* Admin page: the field for the student page's heading */
.title-form {
  max-width: 36rem;
  margin-top: 1rem;
}

.title-form label span {
  color: var(--muted);
  font-weight: 400;
}

.title-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.title-row input {
  flex: 1;
  min-width: 0;
}

.title-row button {
  flex: none;
}

#title-status {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

#title-status:empty {
  display: none;
}

/* Admin page: the paste panel and the slides sit side by side on a wide screen, and stack
   (paste panel first) on a narrow one */
.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* stacked order: intro, paste panel, Expand/Collapse buttons, slides */
  grid-template-areas:
    'hint'
    'panel'
    'toolbar'
    'slides';
  gap: 1rem 1.5rem;
  margin-top: 1rem;
}

.layout-hint {
  grid-area: hint;
  margin: 0;
}

.slides-panel {
  grid-area: slides;
  min-width: 0;
}

.import-panel {
  grid-area: panel;
  /* when stacked, the panel is as wide as the slide cards below it */
  margin-right: var(--delete-column);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.import-panel h2 {
  margin: 0;
  font-size: 1.1rem;
}

.import-panel .hint {
  margin: 0.25rem 0 0.75rem;
}

#import-text {
  min-height: 12rem;
}

#import-text.dragging {
  border-color: var(--accent);
  background: #f1eef7;
}

#import-summary {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.import-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}

.import-file span {
  color: var(--muted);
  font-size: 0.9rem;
}

.import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

@media (min-width: 56rem) {
  /* The intro and the Expand/Collapse buttons share the top row, so the paste panel and
     the first slide card start at the same height below it */
  .admin-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      'hint toolbar'
      'panel slides';
    align-items: start;
  }

  .toolbar {
    align-self: end;
  }

  /* the panel stays in view while the slide list scrolls */
  .import-panel {
    position: sticky;
    top: 1rem;
    margin-right: 0;
  }

  /* leaves room for the page header above, the buttons below, and the save bar */
  #import-text {
    height: calc(100vh - 37rem);
    min-height: 12rem;
  }
}

code {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: #eef1f5;
  font-size: 0.9em;
}

@media (max-width: 32rem) {
  .import-actions {
    flex-direction: column;
  }
}

.toolbar {
  grid-area: toolbar;
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin: 0 var(--delete-column) 0 0;
}

#slides {
  display: grid;
  /* minmax(0, 1fr) lets long previews shrink instead of widening the page */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0 0 1rem;
}

/* One row per slide: the card, with its delete button beside it (not inside the summary) */
.slide-row {
  display: flex;
  align-items: flex-start;
  gap: var(--row-gap);
  min-width: 0;
}

/* The card: a clickable summary line, and the editor underneath when it is open */
.slide {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.slide summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}

.slide summary::-webkit-details-marker {
  display: none;
}

.slide summary::before {
  content: '▸';
  color: var(--muted);
  transition: transform 0.15s;
}

.slide[open] summary::before {
  transform: rotate(90deg);
}

.slide summary:hover {
  background: #f1eef7;
  border-radius: var(--radius);
}

.slide-number {
  flex: none;
  min-width: 4.5rem;
  font-weight: 600;
}

.slide-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slide-count {
  flex: none;
  color: var(--muted);
  font-size: 0.875rem;
}

.slide-body {
  padding: 0 1rem 1rem;
}

button.delete {
  flex: none;
  width: var(--delete-width);
  height: 3.1rem; /* lines up with the summary line and gives a comfortable tap target */
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--danger);
  font-size: 1.1rem;
}

button.delete:hover:not(:disabled) {
  background: var(--danger-soft);
}

#add-slide {
  width: calc(100% - var(--delete-column)); /* same width as the cards above */
  padding: 0.75rem;
  border-style: dashed;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

/* Save bar, pinned to the bottom of the screen */

.save-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.save-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--content-width);
  margin: 0 auto;
}

.total {
  margin: 0;
  font-weight: 600;
}

.total .over-limit {
  color: var(--danger);
}

#status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

#status:empty {
  display: none;
}

@media (max-width: 32rem) {
  .save-bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  main {
    padding-bottom: 10rem;
  }
}

/* Student page */

.student main {
  max-width: 56rem;
  padding-inline: 1.25rem; /* a little more room between the content and the screen edge */
  padding-bottom: 3rem; /* the admin page needs extra room for its save bar; this page does not */
}

/* The page heading stays clearly bigger than the slide text */
.student h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.25rem);
}

#viewer {
  margin-top: 1.5rem;
}

/* The slide, drawn as a plain white card. aspect-ratio is only the preferred shape, so a long
   script makes the card taller instead of being cut off. (Do not add overflow: hidden here, or
   the card would stop growing with its text.) */
#slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.6;
}

#slide p {
  margin: 0 0 1em;
}

#slide p:last-child {
  margin-bottom: 0;
}

#slide p.empty {
  color: var(--muted);
  font-style: italic;
}

/* The pager under the card: Previous, numbered slides, Next */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-top: 1rem;
}

.pager ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Plain and light: no boxes around the numbers, except the slide you are on */
.pager button {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.pager button:disabled {
  opacity: 0.35;
}

#prev,
#next {
  padding: 0 0.4rem;
  font-size: 1.4rem;
  line-height: 1;
}

/* The "…" where numbers are hidden */
.pager ol span {
  display: inline-block;
  min-width: 1.1rem;
  color: var(--muted);
  text-align: center;
}

/* The slide you are on: the only one with a box */
.pager button.active {
  border-color: #c9ced6;
  background: var(--surface);
  font-weight: 600;
}

.pager button.active:hover:not(:disabled) {
  background: var(--surface);
}

/* On a touch screen, :hover sticks to whatever was tapped last, which would leave a grey box
   behind on that button. Only show the hover highlight when there is a real mouse. */
@media (hover: none) {
  .pager button:hover:not(:disabled) {
    background: transparent;
  }
}

/* "Go to slide [ 1 ]" on the same line as the pager; Enter jumps */
.goto-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}

.goto-form label {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 400;
}

.goto-form input {
  width: 3rem;
  height: 2rem;
  padding: 0 0.3rem;
  font-size: 1rem; /* 16px, so iPhones don't zoom in when it is tapped */
  text-align: center;
}

/* On a phone, a wide 16:9 card is too short for the text and the number buttons are slightly
   smaller. "Go to slide" stays on the same line as the pager, and only wraps (centered) if the
   screen is too narrow for both. */
@media (max-width: 40rem) {
  #slide {
    aspect-ratio: auto;
    min-height: 16rem;
  }

  .pager button {
    min-width: 1.85rem;
    padding: 0 0.3rem;
  }

  #prev,
  #next {
    padding: 0 0.35rem;
  }

  .pager ol span {
    min-width: 1rem;
  }

  .goto-form {
    gap: 0.35rem;
    margin-left: 0.4rem;
  }

  .goto-form label {
    font-size: 0.9rem;
  }
}

/* Page not found (404.html) */

.not-found {
  padding-top: 12vh;
  text-align: center;
}

.not-found .code {
  margin: 0;
  color: var(--brand-purple);
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 700;
  line-height: 1;
  opacity: 0.2;
}

.not-found p {
  color: var(--muted);
}

.home-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.home-link:hover {
  background: var(--accent-hover);
}

.home-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Common languages: one button each, shown in the language's own writing */
.quick-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.quick-languages button {
  height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 999px; /* a rounded pill */
  font-size: 1rem;
}

/* the language that is showing */
.quick-languages button[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.quick-languages button[aria-pressed='true']:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

/* The language box under the buttons: type to search, or open it to scroll through every language.
   The list opens just below the box and covers whatever is under it. */
.language-combo {
  position: relative;
  max-width: 22rem;
  margin-top: 1.25rem; /* clear space between the buttons above and this separate control */
}

.language-combo input {
  width: 100%;
  padding: 0.5rem 0.8rem;
  font-size: 1rem; /* 16px, so iPhones don't zoom in when it is tapped */
  text-overflow: ellipsis;
}

/* a language with no button of its own was chosen from the list */
.language-combo input.chosen {
  border-color: var(--accent);
  font-weight: 600;
}

.language-combo ul {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 10;
  max-height: min(16rem, 40vh); /* on a phone the keyboard covers the lower half of the screen */
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  list-style: none;
}

.language-combo li {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
}

.language-combo li:hover,
.language-combo li.active {
  background: #f1eef7;
}

/* the language that is showing */
.language-combo li[aria-selected='true'] {
  color: var(--accent);
  font-weight: 600;
}

.language-combo li.no-match {
  color: var(--muted);
  cursor: default;
}

.language-combo li.no-match:hover {
  background: transparent;
}