/* PDF Annotator — page chrome around the EmbedPDF viewer.
   Only system fonts are used, so the page makes no requests to font services. */

:root {
  --ink: #17213a;
  --ink-soft: #4b5670;
  --paper: #e9edf3;
  --sheet: #ffffff;
  --rule: #cdd4df;
  --highlight: #ffe45c;
  --focus: #2457c5;
  --warn-bg: #fff3cf;
  --warn-ink: #6b4a00;
  --ok-ink: #1d6b3a;
  --error-ink: #a12a22;
  --btn-solid-bg: #17213a;
  --btn-solid-ink: #ffffff;
  --btn-solid-hover: #2a3757;

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6eaf2;
    --ink-soft: #a9b3c7;
    --paper: #0f1522;
    --sheet: #182133;
    --rule: #2c3852;
    --focus: #7ea6ff;
    --warn-bg: #3a3012;
    --warn-ink: #ffe08a;
    --ok-ink: #8fd8a8;
    --error-ink: #ff9d94;
    --btn-solid-bg: #e6eaf2;
    --btn-solid-ink: #17213a;
    --btn-solid-hover: #ffffff;
  }
}

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

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  overscroll-behavior: none;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.5 var(--sans);
}

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--sheet);
  color: var(--ink);
  border: 2px solid var(--focus);
}
.skip-link:focus { top: 8px; }

/* ---------- Header bar ---------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 10px 16px;
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
}

.bar-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
}

.app-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.owner {
  color: var(--ink-soft);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}
.bar-name label { color: var(--ink-soft); white-space: nowrap; }
.bar-name .name-input { width: 13rem; padding: 6px 8px; }

.bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.save-status {
  margin: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}
.save-status:empty { display: none; }
.save-status[data-state="unsaved"] {
  padding: 3px 8px;
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.save-status[data-state="saved"] { color: var(--ok-ink); }
.save-status[data-state="error"] {
  color: var(--error-ink);
  font-weight: 600;
  white-space: normal;
  max-width: 28rem;
}

.link {
  color: var(--ink);
  font-size: 0.9375rem;
  text-underline-offset: 3px;
}

/* ---------- Buttons and inputs ---------- */

.btn {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn:disabled { cursor: not-allowed; opacity: 0.45; }

.btn-solid {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-ink);
}
.btn-solid:not(:disabled):hover { background: var(--btn-solid-hover); }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-quiet:hover { border-color: var(--ink-soft); }

.btn-large {
  font-size: 1.0625rem;
  padding: 11px 22px;
}

.name-input {
  font: inherit;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 10px;
}
.name-input:hover { border-color: var(--ink-soft); }

/* ---------- Stage: viewer plus the landing sheet ---------- */

.stage {
  position: relative;
  min-height: 0;
}

.viewer {
  position: absolute;
  inset: 0;
}
.viewer:focus { outline: none; }

.landing {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  padding: clamp(16px, 5vw, 56px) 16px;
  background: var(--paper);
}

.sheet {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px);
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(23, 33, 58, 0.45);
}

/* The one loud element: the headline is itself highlighted, the way a student would mark a key sentence. */
.headline {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.headline mark {
  color: #17213a;
  background: linear-gradient(
    to bottom,
    transparent 0 12%,
    var(--highlight) 12% 92%,
    transparent 92%
  );
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lede {
  margin: 0 0 28px;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.field { margin: 0 0 24px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.field .name-input { width: min(100%, 22rem); }
.hint {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.choose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 8px;
}
.or-drop { color: var(--ink-soft); font-size: 0.9375rem; }

.error {
  margin: 12px 0 0;
  color: var(--error-ink);
  font-weight: 600;
}

.steps {
  margin: 32px 0 0;
  padding: 24px 0 0 1.4em;
  border-top: 1px solid var(--rule);
  max-width: 36rem;
}
.steps li { margin-bottom: 10px; padding-left: 4px; }
.steps li::marker { font-family: var(--serif); font-weight: 700; }
.steps strong { font-weight: 600; }

/* ---------- Drag and drop ---------- */

.drop-overlay {
  position: absolute;
  inset: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 3px dashed var(--ink);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  pointer-events: none;
}
.drop-overlay p {
  margin: 0;
  padding: 6px 14px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #17213a;
  background: var(--highlight);
}

.noscript {
  position: fixed;
  inset: auto 16px 16px;
  margin: 0;
  padding: 12px 16px;
  background: var(--warn-bg);
  color: var(--warn-ink);
}

/* On the landing sheet the header shows only the title; its controls appear once a PDF is open. */
[data-view="landing"] .bar-name,
[data-view="landing"] .bar-actions .btn { display: none; }

/* ---------- Narrow screens ---------- */

@media (max-width: 720px) {
  .wide-only { display: none; }
  .owner { display: none; }
  .bar { gap: 8px 10px; }
  /* Let the action items join the header's own row so they can be reordered. */
  .bar-actions { display: contents; }
  .bar-title { order: 1; flex: 1 1 auto; }
  .bar-actions .link { order: 2; }
  .bar-actions .btn { order: 3; }
  .bar-name { order: 4; flex: 1 1 50%; min-width: 0; }
  .bar-name .name-input { flex: 1; width: auto; min-width: 0; }
  .save-status { order: 5; }
  .save-status[data-state="error"] { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}