/* ==========================================================================
   easter-eggs.css, the small bits of furniture that came with the eggs.

   Scoped deliberately. Everything here belongs to pages authored in the
   same pass: the terminal, the careers application, the SLA document, and
   the easter-egg toast. Nothing global is redefined, no token is
   overridden, no --p-* primitive is referenced (Law X1). Consumers only
   from: /terminal/, /careers/, /sla/.

   Zero inline styles anywhere (strict CSP, style-src 'self').
   ========================================================================== */

/* ---------- Terminal: a window that scrolls, not a page that grows ----------
   shell.css paints the console. This makes it behave like one: the output
   pane is the only scrollable element, the prompt bar is pinned under it,
   and the document itself never gets taller than the frame. */
.terminal.term-frame {
  display: flex;
  flex-direction: column;
  max-height: calc(var(--u) * 15);
  padding-bottom: var(--s-1);
}
.terminal .t-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--console-line) transparent;
}
.terminal .t-scroll::-webkit-scrollbar { width: calc(var(--s-1) / 2); }
.terminal .t-scroll::-webkit-scrollbar-thumb { background: var(--console-line); border-radius: var(--r-1); }
/* One line, one block: shell.css gives .t-out a bottom margin for prose
   output, a terminal has neither paragraphs nor breathing room. */
.terminal .t-scroll .t-out { margin: 0; }
.terminal .t-scroll .t-echo { color: var(--console-prompt); }
.terminal .t-scroll .t-note { color: var(--console-text); opacity: 0.7; }
.terminal .t-prompt-line { flex: none; }

/* Small screens: the frame shrinks rather than the type. */
@media (max-width: 640px) {
  .terminal.term-frame { max-height: calc(var(--u) * 11); }
}

/* ---------- Careers: the long form ----------------------------------------
   The one long control on the page is the essay box; the option rows use
   the same half-inch tap floor as every other control (Law 3.2). */
.app-form { margin-top: var(--s-3); }
.app-step[hidden] { display: none; }
.app-step-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.app-step-head h2 { margin: 0; font-size: var(--text-lg); }
.app-step-head .step-no {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.q-set { margin-bottom: var(--s-3); }
.q-legend { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--s-1); }
.q-legend .req { color: var(--err); }
.q-hint { font-size: var(--text-sm); color: var(--muted); margin: 0 0 var(--s-1); }
.opt {
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
  min-height: var(--u);
  padding: var(--s-1) 0;
  font-weight: 400;
  cursor: pointer;
}
.opt input[type="radio"],
.opt input[type="checkbox"] {
  width: calc(var(--u) * 0.5);
  height: calc(var(--u) * 0.5);
  margin: 2px 0 0;
  flex: none;
}
.opt .opt-label { font-weight: 400; color: var(--text); }
.opt .opt-note { display: block; font-size: var(--text-sm); color: var(--muted); }
.opt:has(input:checked) .opt-label { color: var(--accent); font-weight: 600; }
.q-error { min-height: 1.4em; }
.q-error:empty { min-height: 0; }
textarea.essay {
  width: 100%;
  min-height: calc(var(--u) * 4);
  padding: var(--s-1);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--input-line);
  border-radius: var(--r-1);
  resize: vertical;
}
textarea.essay:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
textarea.essay[aria-invalid="true"] { border-color: var(--err); }
.counter { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.counter.near { color: var(--warn); }
.app-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-2); }
.app-progress {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.app-progress .done { color: var(--ok); }
.app-progress .now { color: var(--accent); font-weight: 700; }

/* Review step: the summary the applicant is pretending to proofread. */
.review { border: 1px solid var(--card-line); border-radius: var(--r-2); overflow: hidden; margin-bottom: var(--s-2); }
.review h3 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
  padding: var(--s-1) var(--s-2);
  background: var(--accent-tint);
  border-bottom: 1px solid var(--card-line);
}
.review dl { margin: 0; }
.review .r-row {
  display: grid;
  grid-template-columns: minmax(calc(var(--u) * 5), 40%) 1fr;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.review .r-row:last-child { border-bottom: 0; }
.review dt { color: var(--muted); font-weight: 600; }
.review dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 560px) {
  .review .r-row { grid-template-columns: 1fr; }
}

/* The decision. Not cruel, just final. */
.decision {
  border: 1px solid var(--card-line);
  border-left: calc(var(--s-1) / 3) solid var(--err);
  border-radius: var(--r-2);
  background: var(--card-bg);
  padding: var(--s-3);
}
.decision .ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: var(--s-1);
}
.decision h2 { font-size: var(--text-lg); }
.decision.warm { border-left-color: var(--accent); }

/* ---------- SLA: the credits table ----------------------------------------
   There is no table furniture in shell.css, so the SLA owns exactly one.
   Bordered, hairline rules, tabular numerals. Corporate, unsurprising. */
.credits {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--s-2);
}
.credits caption {
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s-1);
}
.credits th,
.credits td {
  text-align: left;
  padding: var(--s-1) var(--s-1) var(--s-1) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.credits th { font-weight: 700; color: var(--muted); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.credits td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.credits tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .credits thead { display: none; }
  .credits tr { display: block; padding: var(--s-1) 0; border-bottom: 1px solid var(--line); }
  .credits td { border: 0; padding: 0; }
  .credits td::before {
    content: attr(data-th) ": ";
    color: var(--muted);
    font-weight: 600;
  }
}

/* Status line, borrowed in spirit from the status page, without stealing it. */
.sla-status {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--text-sm);
  color: var(--ok);
  font-weight: 600;
}
.sla-status .beacon {
  width: calc(var(--s-1) / 1.5);
  height: calc(var(--s-1) / 1.5);
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .sla-status .beacon { animation: none; }
}

/* ---------- SLA: the subscription dark pattern ----------------------------
   Self-contained on purpose. The confirmation steps are inline, in flow,
   so the layout never jumps and the block never becomes a modal. */
.subscribe .sub-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-1); }
.subscribe .sub-step[hidden] { display: none; }
.subscribe .sub-question { font-weight: 600; margin: 0 0 var(--s-1); }
.subscribe .hop-zone { position: relative; display: inline-block; min-width: calc(var(--u) * 8); }
.subscribe .hop {
  transition: transform var(--t-std) var(--ease-sit);
  will-change: transform;
}
/* Three pre-declared landing spots, so the hop is a class swap and never an
   inline style (strict CSP: style-src 'self', no style attributes). */
.subscribe .hop--a { transform: translate(72px, -28px); }
.subscribe .hop--b { transform: translate(104px, 26px); }
.subscribe .hop--c { transform: translate(44px, 34px); }
.subscribe .hop-nudged { color: var(--muted); font-size: var(--text-sm); margin: var(--s-1) 0 0; min-height: 1.4em; }

/* ---------- Easter-egg toast ----------------------------------------------
   Its own class so it can never collide with the core toasts, and so the
   styling lives in a file rather than in a style attribute. */
.egg-toasts {
  position: fixed;
  bottom: var(--s-2);
  left: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  z-index: 95;
  max-width: min(90vw, calc(var(--u) * 8));
  pointer-events: none;
}
.egg-toast {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-1);
  padding: var(--s-1) var(--s-2);
  font-size: var(--text-sm);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 18%, transparent);
  opacity: 0;
  transform: translateY(var(--s-1));
  transition: opacity var(--t-std) var(--ease-sit), transform var(--t-std) var(--ease-sit);
}
.egg-toast.show { opacity: 1; transform: translateY(0); }