/* ══ work ════════════════════════════════════════════════════════════════
 * Where a life is earned: the job you hold, the offers on the table, the ladder
 * above you, the dilemmas that interrupt it, the activities that pay, and the
 * desk you study at.
 */

/* ── the employment card ────────────────────────────────────────────── */
.employment { display: grid; gap: 12px; }
.badge.standing { margin-left: auto; }
.badge.standing.good { background: rgba(66, 201, 124, .16); color: var(--ok); }
.badge.standing.probation { background: rgba(124, 199, 238, .16); color: var(--cool); }
.badge.standing.warned { background: rgba(255, 159, 67, .16); color: var(--warn); }
.badge.standing.final { background: rgba(255, 93, 115, .16); color: var(--err); }
.warn-chip { border-color: rgba(255, 93, 115, .45); color: var(--err); }
.perf-log { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.log-line.up { color: var(--ok); } .log-line.down { color: var(--err); }
/* A requirement not yet met is a goal: dim. One that is met is done: green. */
.req-chip { border-color: var(--border); color: var(--muted-2); font-weight: 700; }
.req-chip.met { background: rgba(66, 201, 124, .14); border-color: rgba(66, 201, 124, .35);
  color: var(--ok); }

/* The pair at the head of the jobs room. Wider tracks than the ordinary card
   grid: both of these carry a sentence rather than a label, and at 250px the
   sentence becomes six lines. */
.grid.work-top { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Putting the word out: one optional preference and one button, on one line.
   The trade used to be fourteen filter chips, which wrapped onto two lines and
   made an optional nicety look like the main event. */
.seek-ask { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 4px; }
.seek-trade { display: grid; gap: 4px; flex: 1 1 190px; min-width: 0;
  font-size: 12px; color: var(--muted); }
.seek-trade select { width: 100%; }
.seek-ask > button { flex: 0 0 auto; min-width: 150px; }
/* Reference, not action: the sheets a card links to sit up in its head. */
.head-links { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* The rung above, inset under the job you hold: a checklist, not a button. It
   glows only once every line of it is green, because at that point it has stopped
   being a wish list and become a thing your employer owes you. */
.promotion { display: grid; gap: 8px; padding: 12px 13px; border-radius: var(--r-md);
  background: var(--panel); border: 1.5px solid var(--border); }
.promotion.ready { border-color: rgba(66, 201, 124, .5);
  background: rgba(66, 201, 124, .09); }

/* ── offers ─────────────────────────────────────────────────────────── */
/* A letter someone wrote you. Warmer than a card that's merely information, and
   dimmed when you don't meet what it asks - it still tells you what to go earn. */
.offer { position: relative; border-color: var(--tint-magic-line); }
.offer.locked { opacity: .62; }
.offer.locked:hover { transform: none; }
.offer .chip.good { background: rgba(66, 201, 124, .14);
  border-color: rgba(66, 201, 124, .35); color: var(--ok); }
/* The one on the table worth taking, called out on the card's own edge. A
   ribbon rather than another chip in the row, because the point of it is that
   it is visible without reading the card at all. */
.offer.best { border-color: rgba(255, 196, 66, .5); }
.offer-ribbon { position: absolute; top: -11px; right: 13px; z-index: 1;
  padding: 3px 10px; border-radius: var(--r-pill); background: var(--gold);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #4a3505; white-space: nowrap; }

/* One trade, bottom to top. The rungs you've stood on are lit; the rest is the
   road, and seeing how much of it is left is the whole point of the sheet. */
.ladder { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rung { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px;
  border-radius: var(--r-md); background: var(--panel); opacity: .72; }
.rung.held { opacity: 1; border-left: 3px solid var(--ok); }
.stint.current { border-left: 3px solid var(--accent); }

/* ── the dilemma: the world stopping for one decision ──────────────────── */
.dilemma { display: grid; gap: 10px; }
/* The moment, before the doors: the picture and the sentence that set it up. */
.dilemma-scene { display: flex; gap: 12px; align-items: flex-start; }
.dilemma-scene p { margin: 0; line-height: 1.6; }
/* A door. Full width and tall enough to hit on a phone without aiming, because
   the modal has no way out and a mis-tap is a decision you can't take back. */
.choice { display: grid; gap: 6px; justify-items: start; text-align: left;
  width: 100%; padding: 12px 14px; background: var(--panel);
  border: 1.5px solid var(--border); border-radius: var(--r-md); box-shadow: none; }
.choice:hover { border-color: var(--accent); background: var(--panel-3); color: var(--text); }
.choice-label { font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--text-hi); }
/* What that door is *known* to cost or pay. Never the whole truth - a dilemma
   that told you everything wouldn't be one - but never a lie either. */
.chip.outcome { font-size: 11.5px; }
.chip.outcome.good { background: rgba(66, 201, 124, .14);
  border-color: rgba(66, 201, 124, .35); color: var(--ok); }
.chip.outcome.bad { background: rgba(255, 93, 115, .12);
  border-color: rgba(255, 93, 115, .35); color: var(--err); }
/* A counter-offer is the same shape, in the color of money. */
.dilemma.counter .choice { border-color: rgba(255, 196, 66, .35); }

/* ── activities ─────────────────────────────────────────────────────── */
/* An activity card carries a place, a depth, a yield strip and up to three
   buttons - it needs more room than a vacancy. */
.activities .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* The buttons of an activity, as one block - the card's last child, so they sit
   together at the bottom and line up across the row however tall the cards get. */
.acts { display: grid; }
/* One action: the button, then what pressing it costs. */
.act-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
            padding: 9px 0; border-top: 1px solid var(--border); }
.act-line:last-child { padding-bottom: 0; }
.act-line > button { min-width: 104px; }
/* All three vitals in one chip, so a row of buttons doesn't become a wall. */
.cost-chip { white-space: nowrap; }
/* The strip's label heads the whole strip, not just the chip beside it. */
.yields-label { flex-basis: 100%; }
/* Where you're standing, and how far in. */
.site-chip { background: rgba(124, 199, 238, .1); border-color: rgba(124, 199, 238, .35);
  color: var(--cool); }
/* A yield you can't reach yet is a goal, not an error - dim, never red. */
.yield-chip.locked { opacity: .5; }
.attrs-grid { display: grid; gap: 11px; margin-top: 10px; }
.attr-row .bar { margin-top: 2px; }

/* ── the study desk ─────────────────────────────────────────────────────
   This replaced a wrapped row of two buttons per skill. The shape is the
   argument: subjects are a *list you read*, one of them is chosen, and the
   controls live once under the choice instead of once per subject. So the
   rows are quiet and the bench below them is where the color is. */
.subjects { display: grid; gap: 6px; margin: 12px 0; }
.subject { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; text-align: left; font: inherit; cursor: pointer;
  background: var(--panel); border: 1.5px solid var(--border);
  border-radius: var(--r-md); box-shadow: none; }
.subject:hover { border-color: var(--border-hi); color: var(--text); }
button.subject:active:not(:disabled) { transform: none; }
/* The chosen one, marked on the leading edge rather than by filling the row:
   seven filled rows would drown the bench, which is the part that acts. */
.subject.on { border-color: var(--accent); background: rgba(75, 123, 236, .12);
  box-shadow: inset 3px 0 0 var(--accent); }
.subject-main { flex: 1; min-width: 0; display: block; }
.subject-main b { display: block; }

/* Focus, as a pip beside each subject: enough to see at a glance which one is
   worth an hour, without seven full meters competing with the real one. */
.focus-pip { flex: 0 0 46px; height: 7px; border-radius: var(--r-pill);
  background: var(--bg); overflow: hidden; }
.focus-fill { display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--accent); transition: width .6s ease; }
/* Spent is a *nudge*, not a failure - amber, and never the red that means
   something is going wrong. */
.focus-pip.low .focus-fill { background: var(--warn); }
.bar-fill.focus { background: var(--accent); }

.bench { display: grid; gap: 9px; padding: 13px; border-radius: var(--r-md);
  background: var(--panel); border: 1.5px solid var(--border-hi); }
.bench .row { flex-wrap: wrap; gap: 6px; }

/* ── the phone ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  /* The reference sheets pinned to the right of a card's head have no width to
     be pinned into here - see `.action-head` in `primitives.css`. */
  .head-links { margin-left: 0; flex-basis: 100%; }
  .head-links > button { flex: 1 1 auto; white-space: nowrap; }
}
@media (max-width: 620px) {
  /* A phone gets the same three controls, full width, in the order they are
     reached for. */
  .bench .row > button { flex: 1 1 100%; }
  .subject { padding: 11px; }
}