/* Expedition Co. — the DLC's own styles.
 *
 * A separate stylesheet on purpose: assets/theme.css is vendored from the
 * parent board-games workspace ("edit there, not here"), and the DLC is
 * canonical *here*. Keeping it out of the theme means the two never fight.
 *
 * The space constraint drives every rule below. The base board already fits
 * 360px exactly, so the DLC gets one public strip under the board and one
 * private bar above the hand — never a fifth panel.
 */

/* --- the settings menu ---------------------------------------------------- */
/* A quiet control top-right of the app; the panel it opens reuses the DLC
   toggle row (.lc-dlc-opt) so a display toggle looks like a variant toggle. */
.lc-settings-bar { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
.lc-settings-bar button { font-size: 0.75rem; }

/* --- setup: the four toggles ---------------------------------------------- */

.lc-dlc-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.05rem 0.35rem;
  margin-left: 0.4rem;
}
.lc-dlc-tag.on { color: var(--ansi-yellow); border-color: var(--ansi-yellow); }

.lc-dlc-opt { display: flex; gap: 0.6rem; align-items: baseline; }
.lc-dlc-opt button { flex: 0 0 8.5rem; text-align: left; }
.lc-dlc-opt span { font-size: 0.8rem; }
@media (max-width: 30rem) {
  .lc-dlc-opt { flex-direction: column; gap: 0.2rem; }
  .lc-dlc-opt button { flex: none; width: 100%; }
}

/* --- job cards ------------------------------------------------------------ */

.lc-jobs { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 30rem) { .lc-jobs { grid-template-columns: 1fr; } }

.lc-job-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  padding: 0.7rem;
  white-space: normal;
  line-height: 1.35;
}
.lc-job-card strong { color: var(--accent); }
.lc-job-card span { font-size: 0.78rem; }

/* The public badge next to a name on the board. */
.lc-job-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ansi-cyan, var(--accent));
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0 0.25rem;
}

/* --- the public strip under the board ------------------------------------- */

.lc-co {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  align-items: center;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  font-size: 0.75rem;
  color: var(--fg-dim);
}
.lc-co strong { color: var(--fg); font-weight: normal; }

.lc-pips { display: inline-flex; gap: 0.15rem; align-items: center; }
.lc-pip {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-block;
}
.lc-pip.on { background: var(--ansi-yellow); border-color: var(--ansi-yellow); }

/* --- the mixup banner ----------------------------------------------------- */
/*
 * Deliberately the loudest thing on the page. A mixup is a rule that changed
 * mid-round with four turns left; if it reads as decoration it has failed.
 */
.lc-mixup {
  border: 1px solid var(--ansi-red);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
}
.lc-mixup strong {
  color: var(--ansi-red);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.4rem;
}

/* --- the private bar above the hand --------------------------------------- */

.lc-bar { margin-bottom: 0.75rem; }
.lc-bar > * + * { margin-top: 0.6rem; }

.lc-skills { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.lc-skills button { font-size: 0.75rem; }

.lc-obj { display: flex; gap: 0.4rem; align-items: baseline; font-size: 0.8rem; }
.lc-obj strong { flex: 0 0 auto; color: var(--accent); }
.lc-obj span { color: var(--fg-dim); }
/* On a phone the hanging indent costs a third of the line to the name column
   and wraps "Start all five / expeditions." — stack instead. */
@media (max-width: 30rem) {
  .lc-obj { display: block; }
  .lc-obj strong { display: block; }
}
.lc-obj.met strong { color: var(--ansi-green); }
.lc-obj.missed strong { color: var(--fg-dim); text-decoration: line-through; }

/* --- the scoring breakdown ------------------------------------------------ */

.lc-break { font-size: 0.8rem; }
.lc-break-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 0.1rem 0;
}
.lc-break-row.sum { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.4rem; }

/* --- the Scavenger's dig --------------------------------------------------- */
/* The under-card sits next to the pile it belongs to, dimmed so the top card
   still reads as the default and the dig as the deliberate choice. */
.lc-dig {
  border-style: dashed;
  color: var(--fg-dim);
}
.lc-dig:not(:disabled):hover { color: var(--fg); }