/* ---------------------------------------------------------------------------
   Condition — the health bar (src/systems/condition.js: Condition.bar).
   Solid steps only: green Fresh, gold Worn, red Beat up / Running on empty.
--------------------------------------------------------------------------- */
.cd { --cdc: var(--green); --cdi: #fff; display: inline-flex; align-items: center; gap: 6px; min-width: 0; vertical-align: middle; }
.cd.cd-y { --cdc: var(--gold); --cdi: var(--ink); }
.cd.cd-r { --cdc: var(--red); --cdi: #fff; }
.cd-bar { display: block; flex: none; width: 54px; height: 11px; padding: 2px; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.cd-bar u { display: block; height: 100%; background: var(--cdc); text-decoration: none; }
.cd-w { flex: none; padding: 3px 6px 2px; background: var(--cdc); color: var(--cdi); box-shadow: var(--frame-2);
  font: 900 10px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.cd-n { flex: none; font: 400 18px/1 var(--disp); font-style: normal; color: inherit; letter-spacing: .3px; }
.cd.sm .cd-bar { width: 40px; height: 9px; }
.cd.sm .cd-w { font-size: 9px; padding: 3px 5px 2px; }

/* the roster: a column on a wide screen, its own line on a card */
.tp-rt td.tp-cond { width: 1%; white-space: nowrap; }
@media (max-width: 760px) {
  .tp-rt tr { grid-template-areas: "p p p o" "a e m y" "h h h h"; }
  .tp-rt td.tp-cond { grid-area: h; width: auto; padding: 0 10px 10px; }
}

/* the player page: a rating row like Mood */
.pf-at .b > i.cdf-g, .pf-at .v.cdf-g { background: var(--green); color: #fff; }
.pf-at .b > i.cdf-y, .pf-at .v.cdf-y { background: var(--gold); color: var(--ink); }
.pf-at .b > i.cdf-r, .pf-at .v.cdf-r { background: var(--red); color: #fff; }

/* the lineup field: a thin bar under the face */
.lu-hp { display: block; width: 100%; max-width: 52px; height: 6px; margin: 3px auto 0; padding: 1px; background: var(--ink); box-shadow: 0 0 0 1px #000; }
.lu-hp u { display: block; height: 100%; text-decoration: none; }
.lu-hp.cd-g u { background: var(--green); } .lu-hp.cd-y u { background: var(--gold); } .lu-hp.cd-r u { background: var(--red); }
/* the depth chart editor */
.dc-row .cd { margin: 0 4px; }
@media (max-width: 560px) { .dc-row .cd .cd-w { display: none; } .dc-row .cd .cd-bar { width: 32px; } }

/* ---- Training: who practises ---------------------------------------------- */
.cd-part .rm-wb { display: grid; gap: 8px; }
.cd-part-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cd-part-top .rm-btn { margin-left: auto; }
.cd-sum { display: flex; flex-wrap: wrap; gap: 2px; }
.cd-rows { display: grid; gap: 6px; }
.cd-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "f n" "f c" "s s"; gap: 4px 8px;
  align-items: center; margin: 3px; padding: 6px 8px; background: var(--card); box-shadow: var(--frame); min-width: 0; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.cd-row .rm-fc { grid-area: f; margin: 0; }
.cd-row .nm { grid-area: n; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.cd-row .nm a { color: inherit; text-decoration: none; font: 900 13px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cd-row .nm a:hover { color: inherit; text-decoration: underline; }
.cd-row .nm small { font: 800 11px/1 var(--sans); color: var(--soft); }
.cd-row .hp .cd-bar { width: 84px; }
.cd-row .hp { grid-area: c; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; }
.cd-row .hp .rm-bd { margin: 2px; padding: 3px 5px 2px; font-size: 9px; }
.cd-seg { grid-area: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 2px 2px 0; box-shadow: var(--frame-2); }
.cd-seg button { min-width: 0; padding: 7px 4px 6px; border: 0; cursor: pointer; background: var(--ink-2); color: #fff;
  font: 400 16px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.cd-seg button + button { box-shadow: -2px 0 0 0 var(--ink); }
.cd-seg button:hover { background: var(--card-hov); color: var(--card-ink); }
.cd-seg button.on.full { background: var(--green); }
.cd-seg button.on.lim { background: var(--gold); color: var(--ink); }
.cd-seg button.on.rest { background: var(--sky); color: var(--ink); }
.cd-seg button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.cd-more > summary { list-style: none; cursor: pointer; margin: 3px; }
.cd-more > summary::-webkit-details-marker { display: none; }
.cd-more[open] > summary .rm-btn { background: var(--gold); }
.lu-face .lu-hp { position: absolute; z-index: 2; left: 3px; right: 3px; top: 3px; width: auto; max-width: none; height: 6px; margin: 0; }
.rm-bd.sky { background: var(--sky); color: var(--ink); }
.cd-rested { margin: 4px 0 8px; }
.cd-rested a.rm-bd { text-decoration: none; }