/* === ADDED 2026-10-31: the Stoic quote of the day on the /jobs home hero ==================== */
/* One line and its source (js/jobs/daily-quote.js picks it, js/jobs/home.js draws it into
   #cc-quote in jobs.html). Loaded by jobs.html only, after css/jobs.css.

   The hero is dark in both themes, so, like the rest of the hero's rules in jobs.css, these
   colours are written out rather than tokens, and need no dark-theme copy. Contrast, measured
   on screenshots at the brightest pixel behind the quote (the dark theme's teal glow, top right
   of the hero): the line #d6dadc at least 7.2:1 (13:1 on plain #111416), the author and the
   opening mark #3ccdc7 at least 5.2:1, the source #b4babe at least 5.2:1. The brand teal
   #0ABAB5 measured 4.2:1 there, under AA for small text, hence the lighter teal.

   Laptop and desktop (1200px and wider): a second column beside the greeting, over the faint G.
   It never makes the hero taller: `contain: size` means the column takes its height from the
   greeting's rows only, and the line sits centred in that height, so the count tiles below stay
   exactly where they were. Narrower (tablet, phone): one compact block under the greeting. */

.cc-quote { margin: 18px 0 0; max-width: 60ch; }
.cc-quote[hidden] { display: none; }
.cc .cc-quote-text { margin: 0; padding: 0; border: 0; quotes: '\201C' '\201D'; }
.cc .cc-quote-text p {
  position: relative;
  margin: 0;
  color: #d6dadc;
  font: italic 400 16px/1.5 Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  text-wrap: pretty;
}
/* The opening mark hangs in the margin, so the words line up with the greeting above. */
.cc-quote-text p::before { content: open-quote; position: absolute; right: 100%; padding-right: 0.08em; color: #3ccdc7; }
.cc-quote-text p::after { content: close-quote; }
.cc-quote-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
  color: #b4babe;
  font: 700 10.5px/1.5 var(--gx-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cc-quote-by::before { content: ''; flex: 0 0 auto; width: 18px; height: 1px; margin-right: 9px; background: rgba(10, 186, 181, 0.6); }
.cc-quote-who { color: #3ccdc7; }
.cc-quote-dot { white-space: pre; }
.cc-quote-src { font-style: normal; }

@media screen and (min-width: 1200px) {
  .cc-hero:has(> .cc-quote:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    column-gap: 56px;
  }
  .cc-hero > :not(.cc-quote) { grid-column: 1; }
  .cc-hero > .cc-quote {
    grid-column: 2;
    grid-row: 1 / span 4;
    contain: size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin: 0;
  }
  .cc .cc-quote-text p { font-size: 20px; line-height: 1.45; }
  .cc-quote-by { margin-top: 14px; font-size: 11px; letter-spacing: 0.16em; }
  .cc-quote-by::before { width: 22px; margin-right: 10px; }
}

/* A phone: smaller still, so the greeting and the tiles keep the screen. */
@media (max-width: 719px) {
  .cc-quote { margin-top: 14px; }
  .cc .cc-quote-text p { font-size: 15px; line-height: 1.45; }
  .cc-quote-by { margin-top: 6px; font-size: 10px; letter-spacing: 0.12em; }
}

/* ---- the bonus quotes (js/jobs/bonus-quotes.js; nothing here shows until someone finds them) */
/* The figure takes the keyboard focus (tabindex, set by home.js), so the 5 taps work from the
   keyboard too: only the focus ring shows, nothing else gives it away. */
.cc-quote[tabindex] { -webkit-tap-highlight-color: transparent; border-radius: 6px; }
.cc-hero .cc-quote[tabindex]:focus-visible { outline-offset: 6px; }

/* The warning before the first bonus line: a small card in the middle of the screen, the
   location notice's look (tokens, so light and dark). */
.gx-bonus-dlg {
  width: min(380px, calc(100% - 32px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--gx-raised);
  color: var(--gx-strong);
  font-family: var(--gx-body);
  box-shadow: var(--gx-shadow-jump);
}
.gx-bonus-dlg::backdrop { background: var(--gx-backdrop); }
.gx-bonus-body { padding: 22px 22px 20px; text-align: center; }
.gx-bonus-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 12px;
  border-radius: 14px;
  background: var(--gx-teal-tint);
  color: var(--gx-teal-text);
}
.gx-bonus-icon .gx-ico { width: 26px; height: 26px; }
.gx-bonus-title { margin: 0 0 8px; color: var(--gx-strong); font: 700 26px/1.1 var(--gx-head); letter-spacing: 0.02em; }
.gx-bonus-text { margin: 0 0 18px; color: var(--gx-text); font-size: 15px; line-height: 1.5; }
.gx-bonus-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gx-bonus-actions .btn,
.gx-bonus-actions .jobs-link-btn { flex: 1 1 130px; min-height: 44px; }
.gx-bonus-dlg :focus-visible { outline: 2px solid var(--gx-teal-text); outline-offset: 2px; }

/* The switch in the account card and the phone's More sheet, under Appearance, only on a device
   that has found them. The track and knob are the Settings switch's (.jobs-switch-* in jobs.css). */
.gx-bonus-slot[hidden] { display: none; }
.gx-bonus-slot--acct { margin: -4px 0 14px; }
.gx-bonus-slot--sheet { margin: 14px 0 0; }
.gx-bonus-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.gx-bonus-label { margin: 0; color: var(--gx-strong); font: 700 14px/1.3 var(--gx-body); cursor: pointer; }
.gx-bonus-switch { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 44px; cursor: pointer; }
/* The see-through tick box lies over the track, so a tap anywhere on the switch is a tap on it. */
.gx-bonus-switch .jobs-switch-input { z-index: 1; }

/* A bonus quote (1 Nov 2026): the show's longer passages, pasted by the office in Settings. Line
   breaks inside a quote show as line breaks, a long word never pushes past the edge, and a long
   passage takes a smaller size. On a laptop the column normally takes its height from the
   greeting (contain: size); a long passage would spill out of it, so a bonus quote lets the hero
   grow instead (only on the device that switched them on). */
.cc-quote.is-bonus .cc-quote-text p { white-space: pre-line; overflow-wrap: anywhere; }
.cc .cc-quote.is-long .cc-quote-text p { font-size: 15px; line-height: 1.5; }
.cc .cc-quote.is-longer .cc-quote-text p { font-size: 14px; }
@media screen and (min-width: 1200px) {
  .cc-hero > .cc-quote.is-bonus { contain: none; }
  .cc .cc-quote.is-long .cc-quote-text p { font-size: 17px; }
  .cc .cc-quote.is-longer .cc-quote-text p { font-size: 15.5px; }
}
@media (max-width: 719px) {
  .cc .cc-quote.is-long .cc-quote-text p { font-size: 14px; line-height: 1.45; }
  .cc .cc-quote.is-longer .cc-quote-text p { font-size: 13.5px; }
}

/* "No bonus quotes yet": the office's small note after 5 taps with an empty Settings box. */
.gx-bonus-note {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gx-strong);
  color: var(--gx-raised);
  font: 600 14px/1.3 var(--gx-body);
  box-shadow: var(--gx-shadow-jump);
  transform: translateX(-50%);
  pointer-events: none;
}
/* Above the phone's tab bar. */
@media (max-width: 719px) {
  body.has-jobs-tabbar .gx-bonus-note { bottom: calc(var(--gx-tab-h) + env(safe-area-inset-bottom) + 12px); }
}

/* Printing the home is for the figures: the quote (and any bonus line) stays on screen. */
@media print {
  .cc-quote,
  .gx-bonus-dlg,
  .gx-bonus-note { display: none !important; }
}