/* ---------- the career: the line under the title (insignia, rank, the way to the next), the service record, the honours
   stamped on the report, and What is new ---------- */
/* the line under the title: read off the dark curtain like the rest of the briefing, a button all the same */
.carLine{display:flex;align-items:center;gap:12px;margin-top:14px;padding:4px 0;border:0;background:none;color:var(--paper);cursor:pointer;text-align:left;max-width:min(430px,100%);width:100%}
.carLine+.brief{margin-top:26px} /* (the briefing keeps its distance from the title: the line takes part of it) */
.carIns{flex:none;display:block;line-height:0;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.carTx{display:grid;gap:3px;min-width:0;flex:1}
.carTx b{font:400 21px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);text-shadow:0 2px 0 rgba(0,0,0,.45)}
.carTx small{font:600 11px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carBar{display:block;height:3px;max-width:220px;background:rgba(234,226,204,.12)}
.carBar em{display:block;height:100%;background:var(--brass)}
.carLine:hover .carTx b,.carLine:focus-visible .carTx b{color:var(--brass-2)}
.carLine:hover .carTx small{color:var(--paper-dim)}
/* the version, at the foot of the title block */
.carVer{margin:10px 0 0}
.carVer button{border:0;background:none;padding:2px 0;cursor:pointer;font:600 11px/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint)}
.carVer button span{color:var(--brass)}
.carVer button:hover,.carVer button:focus-visible{color:var(--paper-dim)} .carVer button:hover span{color:var(--brass-2)}
/* a ribbon: three colours, edge, stripe and centre, as a medal ribbon is woven; an honour not yet held is its outline */
.crib{flex:none;display:inline-block;width:38px;height:13px;border:1px solid rgba(45,36,22,.65);border-radius:1px;
  background:linear-gradient(90deg,var(--a) 0 16%,var(--b) 16% 32%,var(--c) 32% 68%,var(--b) 68% 84%,var(--a) 84%);box-shadow:inset 0 1px 0 rgba(255,252,240,.35),0 1px 0 rgba(0,0,0,.2)}
.crib.off{background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(45,36,22,.08) 5px 6px);border:1px dashed var(--hair-2);box-shadow:none}
/* the service record */
.card.carCard{width:min(880px,100%)}
.carHead{display:flex;align-items:center;gap:18px;margin:8px 0 4px}
.carHead .carBadge{flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.carHead>div{min-width:0;flex:1}
.carHead h2{margin:0}
.carHead .note{margin:6px 0 6px}
.carCard .carBar,.carEnd .carBar{background:var(--ink-3);max-width:320px}
.carCard .carBar em{background:var(--pencil,#ae3322)}
.carLadder{display:flex;gap:4px;margin:12px 0 0;padding:8px 0 0;list-style:none;border-top:1px dotted var(--hair-2);overflow-x:auto;scrollbar-width:thin}
.carLadder li{flex:1 0 62px;display:grid;justify-items:center;gap:3px;opacity:.42}
.carLadder li.past{opacity:.75}
.carLadder li.on{opacity:1}
.carLadder li small{font:600 11px/1.1 var(--f-ui);letter-spacing:.03em;text-transform:uppercase;text-align:center;color:var(--paper-dim)}
.carLadder li.on small{color:var(--brass-2);font-weight:800}
.carCard h3 small{font:600 11px/1 var(--f-ui);letter-spacing:.16em;margin-left:8px;color:var(--paper-faint)}
.carHons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.carHon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:7px 2px;border-bottom:1px dotted var(--hair-2)}
.carHon .crib{margin-top:2px}
.carHon b{display:block;font:400 18px/1.05 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--paper-faint)}
.carHon.got b{color:var(--paper)}
.carHon small{display:block;font:500 12.5px/1.3 var(--f-ui);color:var(--paper-faint);margin-top:2px}
.carHon.got small{color:var(--paper-dim)}
.carHon small.when{font:600 11px/1.3 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.carHon .pts{font:700 12px/1.6 var(--f-ui);color:var(--paper-faint)}
.carHon.got .pts{color:var(--good)}
.carMedWrap{overflow-x:auto}
.carMed{width:100%;border-collapse:collapse;font:500 13px/1.3 var(--f-ui)}
.carMed th{text-align:left;font:400 17px/1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.carMed td{text-align:left;color:var(--paper-dim);white-space:nowrap}
.carMed td.sd{font:600 11px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);padding-left:14px}
.carMed td.none{color:var(--paper-faint)}
.carMed .rib{margin:0 6px 0 0;vertical-align:1px}
/* What is new */
.newList{margin:10px 0 0!important}
.newList li{margin-bottom:5px}
.newList b{color:var(--paper)}
/* the report: the honours earned in this battle, each stamped on the file as the result is */
.carEnd h3{margin-bottom:10px}
.carGot{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:6px 14px;align-items:center;padding:6px 0 8px;border-bottom:1px dotted var(--hair-2)}
.carGot .stamp{font-size:19px;padding:5px 9px 4px;justify-self:start}
.carGot small{font:500 13px/1.35 var(--f-ui);color:var(--paper-dim)}
.carGot .pts{font-weight:700;color:var(--good);white-space:nowrap}
.carUp .carBadge{filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
:root.still .carGot .stamp.land{animation:none}
@media (max-width:640px){
  .carHons{grid-template-columns:minmax(0,1fr)}
  .carHead{gap:12px} .carHead .carBadge{width:64px;height:auto}
  .carGot{grid-template-columns:auto minmax(0,1fr)} .carGot small{grid-column:1/-1}
  .carLadder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px} /* a phone: the ladder in three rows of three */
  .carMed tbody,.carMed tr{display:block} .carMed tr{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 10px;padding:6px 0;border-bottom:1px dotted var(--hair-2)} /* a phone: the battle, then a line for each side */
  .carMed th{grid-column:1/-1;padding:0 0 3px;border:0} .carMed td{padding:2px 0;border:0;white-space:normal} .carMed td.sd{padding-left:0;align-self:center}
  .carTx small{letter-spacing:.1em}
}