/* THE PLATE — the first screen of Find Work (2026-08-05).
   Operator law: the hook lands BEFORE comprehension is required.

   The board below is a kitchen: filters, groups, badges, counters. That is
   correct for someone who came to browse and wrong for the two readers we
   actually get — half-attending on a thumb, or competent and slammed. This
   layer serves ONE job, already chosen, with ONE move. Everything else is one
   scroll down and nothing was removed.

   Every colour is a token from vealth-next.css, so light and dark both follow
   the theme with no second palette to drift. */

/* Block, not flex. The plate's parts are a vertical reading order (place, task,
   sentence, money, move), and a flex row lays them out side by side: measured
   2026-08-05, the honesty note and the "browse all" line rendered as a second
   column and squeezed the sentence to three words a line. */
.plate {
  position: relative;
  display: block;
  width: 100%;
  max-width: 660px;
  padding: 30px 0 34px;
  margin: 0;
}
@media (max-width: 760px) {
  .plate { padding: 12px 0 20px; }
}
/* Inside a scene the SCENE owns the screen height. Two elements each claiming a
   viewport stack into a screen and a half, which is the exact seam the scene
   system exists to remove. */
.plate { min-height: 74svh; }
.scene .plate { min-height: 0; }

/* --- loading: reserve the exact shape so nothing jumps on arrival --- */
.plate[data-state="loading"] .plate-live { opacity: 0; }
.plate-skeleton {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  pointer-events: none;
}
.plate[data-state="ready"] .plate-skeleton,
.plate[data-state="error"] .plate-skeleton { display: none; }
.plate-skeleton-inner { width: 100%; max-width: 660px; }
.plate-sk {
  height: 15px; border-radius: 999px; background: var(--ink-wash);
  animation: plate-breathe 1.6s ease-in-out infinite;
}
.plate-sk + .plate-sk { margin-top: 15px; }
.plate-sk--eyebrow { width: 34%; height: 11px; }
.plate-sk--title { width: 88%; height: 34px; margin-top: 20px; }
.plate-sk--title2 { width: 56%; height: 34px; }
.plate-sk--line { width: 94%; }
.plate-sk--line2 { width: 72%; }
.plate-sk--btn { width: 210px; height: 52px; border-radius: 999px; margin-top: 26px; }
@keyframes plate-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .plate-sk { animation: none; } }

.plate-live { transition: opacity 0.22s ease; }

/* --- the dish --- */

/* Place first: a scanning reader needs to know WHERE before anything else. */
.plate-place {
  display: block;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 14px;
}
.plate-place b { color: var(--muted); font-weight: 700; }

/* The task, in plain words, at the scale of the only thing that matters. */
.plate-title {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.05rem, 6.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

/* One sentence. Never two. If it needs a paragraph it does not belong here. */
.plate-line {
  font-size: clamp(1.02rem, 2.5vw, 1.18rem);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 54ch;
}

/* The terms on one line: money, time, who can do it. */
.plate-terms {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 8px;
}
.plate-pay {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 4.4vw, 2.15rem);
  line-height: 1;
  color: var(--leaf);
  letter-spacing: -0.01em;
}
.plate-term {
  font-size: 0.93rem;
  color: var(--soft);
}
.plate-term::before { content: "\00b7"; margin-right: 14px; color: var(--rule); }
/* Stacked on a phone, the separator stops separating anything and reads as a
   weak bullet hanging off the left margin. The line break is the separator. */
@media (max-width: 620px) {
  .plate-terms { display: block; }
  .plate-pay { display: block; margin-bottom: 6px; }
  .plate-term { display: block; }
  .plate-term::before { content: none; }
}

/* The honest badge. Never hidden, never louder than the job. */
.plate-honest {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--soft);
  margin: 0 0 26px;
  max-width: 50ch;
}
.plate-honest b { color: var(--muted); font-weight: 600; }

/* ONE power move. Everything else on this screen is quieter than this. */
.plate-move {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.plate-take {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--leaf);
  color: #fbf7ef;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(20, 90, 60, 0.20);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.plate-take:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(20, 90, 60, 0.26); filter: brightness(1.04); }
.plate-take:active { transform: translateY(0); }
.plate-take:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.plate-take .plate-take-arrow { font-size: 1.1em; line-height: 1; }
:root[data-theme="dark"] .plate-take { color: #08120f; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42); }

/* The escape hatch is a link, not a button: it must never compete. */
.plate-next {
  border: 0;
  background: none;
  padding: 10px 2px;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
}
.plate-next:hover { text-decoration-color: currentColor; }
.plate-next:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
.plate-next[disabled] { opacity: 0.45; cursor: default; }

/* A hairline of the one lotus spectrum: the only ornament, and it is a rule. */
.plate-rule {
  height: 2px;
  border-radius: 2px;
  background: var(--spectrum);
  opacity: 0.62;
  margin: 30px 0 0;
}

/* The way down to the full board, stated once, quietly. */
.plate-all {
  margin: 16px 0 0;
  font-size: 0.92rem;
  color: var(--soft);
}
.plate-all a {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}
.plate-all a:hover { text-decoration-color: currentColor; }

/* Nothing loaded: say so plainly and point at the board rather than spinning. */
.plate-error { font-size: 1rem; color: var(--muted); margin: 0; }

/* The static shape a no-JS reader (or an agent with scripting off) is served.
   It is real content, not a spinner apology. */
.plate-noscript { max-width: 54ch; }
.plate-noscript .plate-title { font-size: clamp(1.8rem, 5vw, 2.6rem); }

/* --- THE LEAD PLATE: a real job at the head of the board (2026-08-06, #22) ---

   Same script, same honesty, one third the height. This one is not the screen —
   it is the first thing ON a screen that also has to hold the search box, the
   near-me button and the start of the list. So the title comes down to heading
   scale, the sentence is held to two lines, and the duplicate near-me button is
   dropped because the board's own is eight millimetres below it.

   Every colour here is an existing token. No new token is introduced, so light
   and dark stay one palette by construction. */
.plate--lead {
  max-width: none;
  padding: 16px 18px 18px;
  margin: 0 0 6px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--face);
}
.plate--lead::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px; top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--spectrum);
  opacity: 0.7;
}
.plate--lead .plate-skeleton { position: absolute; inset: 16px 18px 18px; align-items: flex-start; }
.plate--lead .plate-place { margin-bottom: 8px; }
.plate--lead .plate-title {
  font-size: clamp(1.5rem, 5.2vw, 2rem);
  line-height: 1.14;
  margin-bottom: 10px;
}
.plate--lead .plate-line {
  font-size: 0.97rem;
  line-height: 1.5;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plate--lead .plate-pay { font-size: clamp(1.35rem, 4vw, 1.6rem); }
.plate--lead .plate-term { font-size: 0.86rem; }
.plate--lead .plate-honest { margin-bottom: 16px; }
.plate--lead .plate-take { min-height: 48px; padding: 0 24px; font-size: 1rem; }
/* The board's own near-me button is the next control down the page, and it
   drives the whole list rather than one card. Two of them side by side is a
   choice a reader should never have to make. */
.plate--lead .plate-next--near { display: none; }
.plate--lead .plate-noscript-lead {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
@media (max-width: 620px) {
  .plate--lead { padding: 14px 14px 16px; border-radius: 16px; }
  .plate--lead::before { left: 14px; right: 14px; }
  .plate--lead .plate-skeleton { inset: 14px 14px 16px; }
}