:root { --on-gold:#17130a; } /* right / wrong colours: site.css brand-metal tokens */
/* Service record (/service-record, /pl/przebieg-sluzby), filled by record.js. Site tokens from site.css. */
.rec-page { max-width:860px; }
.rec-page .play-head { text-align:center; padding:4.5rem 0 1.2rem; }
.rec-page .play-back { display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; margin-bottom:1rem; }
.rec-page .play-back:hover { color:var(--gold); }
.rec-note { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; margin:.8rem auto 0; max-width:52ch; }
#record { overflow-wrap:anywhere; }
.rec-sec { border:1px solid var(--gold-line); border-radius:18px; background:var(--card); padding:1.3rem 1.2rem 1.2rem; margin:1.2rem 0; }
.rec-sec > h2 { font-family:var(--font-display); font-size:1.45rem; color:var(--text); margin:0 0 .3rem; }
.rec-sub { color:var(--muted); margin:0 0 .9rem; max-width:62ch; }
.rec-k { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0; }
.rec-rank { text-align:center; background:radial-gradient(120% 90% at 50% 0%,rgba(212,175,95,.14),transparent 70%),var(--card); border-color:var(--gold); }
.rec-rank .rec-title { font-family:var(--font-display); font-size:clamp(2rem,8vw,2.8rem); color:var(--gold-bright); margin:.2rem 0 .3rem; }
.rec-nick { color:var(--text); margin:0 0 .4rem; }
.rec-merit { color:var(--muted); margin:0 0 .7rem; }
.rec-merit b { color:var(--text); font-family:var(--font-mono); font-weight:400; }
.rec-bar { height:8px; border-radius:6px; background:var(--gold-line); overflow:hidden; max-width:420px; margin:0 auto 1rem; }
.rec-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); }
.rec-ladder { text-align:left; max-width:420px; margin:0 auto; }
.rec-ladder summary { cursor:pointer; text-align:center; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); padding:.6rem 0; min-height:44px; box-sizing:border-box; }
.rec-ladder summary:focus-visible, .rec-page a:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }
.rec-ladder ol { margin:.3rem 0 0; padding-left:1.6rem; color:var(--muted); }
.rec-ladder li { padding:.2rem 0; }
.rec-ladder li.on { color:var(--gold-bright); font-weight:700; }
.rec-ladder li.on em { font-style:normal; font-weight:400; }
.rec-ladder li.past { color:var(--text); }
.rec-n { font-family:var(--font-mono); font-size:.75rem; }
.rec-ok { color:var(--ok); font-size:.85rem; }
.rec-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:.8rem; }
.rec-card { border:1px solid var(--gold-line); border-radius:14px; padding:1rem; display:flex; flex-direction:column; gap:.35rem; }
.rec-card h3 { margin:0; font-family:var(--font-display); font-size:1.15rem; color:var(--text); }
.rec-big { margin:0; font-family:var(--font-display); font-size:1.5rem; color:var(--gold-bright); }
.rec-status { margin:0; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; color:var(--muted); }
.rec-status.ok { color:var(--ok); }
.rec-status.no { color:var(--no); }
.rec-status.warn { color:var(--gold-bright); }
.rec-facts { list-style:none; padding:0; margin:.2rem 0 .3rem; color:var(--muted); font-size:.95rem; }
.rec-go { margin-top:auto; color:var(--gold-bright); font-family:var(--font-mono); font-size:.76rem; text-decoration:none; padding:.5rem 0; }
.rec-go:hover { text-decoration:underline; }
.rec-list { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.rec-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; border:1px solid var(--gold-line); border-radius:10px; padding:.55rem .8rem; }
.rec-row > a { color:var(--text); text-decoration:none; font-family:var(--font-display); font-size:1.02rem; margin-right:auto; padding:.2rem 0; }
.rec-row > a:hover { color:var(--gold-bright); text-decoration:underline; }
.rec-row.todo > a { color:var(--muted); }
.rec-row.won { border-color:var(--gold); }
.rec-val { font-family:var(--font-mono); font-size:.76rem; color:var(--text); }
.rec-row.todo .rec-val { color:var(--muted); }
.rec-badge { font-family:var(--font-mono); font-size:.72rem; color:var(--on-gold); background:var(--gold-bright); border-radius:999px; padding:.15rem .6rem; }
.rec-need { font-family:var(--font-mono); font-size:.72rem; color:var(--muted); border:1px solid var(--gold-line); border-radius:999px; padding:.15rem .6rem; }
.rec-tally { list-style:none; padding:0; margin:0 0 .6rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.rec-tally li { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--text); border:1px solid var(--gold-line); border-radius:999px; padding:.3rem .75rem; }
.rec-h3 { font-family:var(--font-display); font-size:1.2rem; color:var(--text); margin:1.1rem 0 .2rem; }
.rec-h4 { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:1.1rem 0 .5rem; }
.rec-eras { list-style:none; padding:0; margin:0 0 .4rem; display:flex; flex-wrap:wrap; gap:.3rem; font-size:1.3rem; color:var(--gold-line); }
.rec-eras li.won { color:var(--gold-bright); }
.rec-orders { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.rec-orders li { color:var(--muted); font-size:.92rem; }
.rec-cta { display:inline-block; color:var(--gold-bright); text-decoration:none; font-family:var(--font-display); font-size:1.05rem; padding:.3rem 0; margin-right:.4rem; }
.rec-cta:hover { text-decoration:underline; }
.rec-empty { text-align:center; border:1px dashed var(--gold); border-radius:18px; background:var(--card); padding:2rem 1.2rem; margin:1.2rem 0; }
.rec-seal { display:block; font-size:2rem; color:var(--gold); }
.rec-empty h2 { font-family:var(--font-display); font-size:1.5rem; color:var(--text); margin:.4rem 0 .5rem; }
.rec-empty p { color:var(--muted); max-width:52ch; margin:0 auto 1rem; }
.rec-empty h3 { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:1.2rem 0 .5rem; }
.rec-start { list-style:none; padding:0; margin:0 auto; max-width:440px; display:grid; gap:.5rem; text-align:left; }
.rec-start li { border:1px solid var(--gold-line); border-radius:12px; padding:.6rem .8rem; color:var(--muted); font-size:.92rem; }
.rec-start a { color:var(--gold-bright); font-family:var(--font-display); font-size:1.05rem; text-decoration:none; display:inline-block; padding:.15rem 0; }
.rec-start a:hover { text-decoration:underline; }
.rec-how { margin:1.6rem 0 0; color:var(--muted); }
.rec-how summary { cursor:pointer; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); padding:.6rem 0; }
.rec-how ul { margin:.3rem 0 0; padding-left:1.3rem; }
.rec-how li { margin:.25rem 0; }
@media (max-width:420px) { .rec-sec { padding:1.1rem .85rem 1rem; } }
/* the PL top bar ("Zaciągnij się") is 3 px too wide at 320 px on every dispatch-bar page; tighten it here */
@media (max-width:340px) { .dx-bar { gap:.55rem; } }