:root {
  --steel: #39434c;
  --steel-dark: #222930;
  --steel-deep: #1a2026;
  --steel-light: #4b5862;
  --edge: #566471;
  --ivory: #ded8c8;
  --ivory-dim: #9ba093;
  --brass: #b08d4f;
  --brass-dim: #7b6338;
  --filament: #ffbd3c;
  --oxide: #a24a32;
  --green: #7faa6a;
  --panel-nomen: "Liberation Sans Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --prose: "Segoe UI", "Noto Sans", "DejaVu Sans", system-ui, sans-serif;
  --tape: "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 calc(4rem + env(safe-area-inset-bottom, 0px));
  background: var(--steel-deep);
  color: var(--ivory);
  font-family: var(--prose);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 61rem; margin: 0 auto; padding: 0 1.25rem; }

/* tekst ciągły na pełną szerokość kolumny, z luźniejszą interlinią */
p.full, .full {
  max-width: none;
  line-height: 1.72;
  margin: 0 0 1rem;
}
.full code { font-family: var(--tape); color: var(--filament); font-size: .95em; }
.full strong { color: var(--ivory); }
.full.accent { color: var(--filament); border-left: 2px solid var(--brass); padding-left: .9rem; }

/* --- nagłówek --- */
header.masthead { border-bottom: 1px solid var(--brass-dim); padding: 1.6rem 0 1.1rem; }
.masthead h1 {
  font-family: var(--panel-nomen);
  font-size: 2.2rem; font-weight: 700; letter-spacing: .18em;
  margin: 0 0 .5rem; color: var(--ivory);
}
.masthead .org {
  font-family: var(--panel-nomen); letter-spacing: .12em;
  font-size: .78rem; color: var(--brass); margin-bottom: .4rem;
}
.masthead p { color: var(--ivory-dim); }

h2 { font-family: var(--panel-nomen); font-size: 1.35rem; letter-spacing: .1em; font-weight: 700; margin: 0 0 .7rem; }
h3 { font-family: var(--panel-nomen); font-size: 1.05rem; letter-spacing: .1em; font-weight: 700; margin: 1.8rem 0 .5rem; color: var(--brass); }
.kicker { font-family: var(--panel-nomen); letter-spacing: .16em; font-size: .72rem; color: var(--brass); margin-bottom: .35rem; }
.tall { margin-top: 1.6rem !important; }

/* --- zakładki --- */
.modes { display: flex; flex-wrap: wrap; gap: 0; margin: 1.75rem 0 0; border-bottom: 1px solid var(--brass-dim); }
.modes button {
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: .6rem 1rem; color: var(--ivory-dim); font-size: .95rem;
}
.modes button[aria-selected="true"] { color: var(--filament); border-bottom-color: var(--filament); }
.modes button:hover { color: var(--ivory); }

section.mode { padding-top: 1.6rem; }
section.mode[hidden] { display: none; }

button.next {
  margin-top: 1.5rem;
  background: transparent; border: 1px solid var(--brass-dim); color: var(--brass);
  padding: .55rem 1.1rem;
}
button.next:hover { background: var(--brass-dim); color: var(--ivory); }
button.ghost { background: transparent; border: 1px solid var(--edge); color: var(--ivory-dim); margin-top: .8rem; }

/* --- pulpit --- */
.panel {
  background: linear-gradient(180deg, var(--steel-light) 0%, var(--steel) 18%, var(--steel) 82%, var(--steel-dark) 100%);
  border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(0,0,0,.4);
  padding: 1.25rem;
}
.rack { display: grid; gap: 1.1rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.nomen {
  font-family: var(--panel-nomen); letter-spacing: .14em; font-size: .75rem;
  color: var(--ivory-dim); display: block; margin-bottom: .3rem;
}
.nomen.tall { margin-top: .9rem !important; }

.controls { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-end; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.row.tight { gap: .5rem; align-items: center; margin-bottom: 0; }
.grow { flex: 1; min-width: 14rem; }

select, input[type="number"], input[type="text"], textarea {
  font-family: var(--panel-nomen); letter-spacing: .08em; font-size: 1rem;
  background: var(--steel-deep); color: var(--ivory);
  border: 1px solid var(--edge); border-radius: 2px; padding: .4rem .55rem;
  max-width: 100%;
}
textarea { width: 100%; min-height: 4.5rem; font-family: var(--prose); letter-spacing: 0; line-height: 1.5; }

button {
  font-family: var(--panel-nomen); letter-spacing: .1em; font-size: .9rem;
  background: var(--steel-light); color: var(--ivory);
  border: 1px solid var(--edge); border-top-color: rgba(255,255,255,.22);
  border-radius: 2px; padding: .45rem .9rem; cursor: pointer;
}
button:hover { background: var(--edge); }
button:active { background: var(--steel-dark); }
button[disabled] { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--brass-dim); border-color: var(--brass); color: #140f06; font-weight: 700; }
button.primary:hover { background: var(--brass); }
:focus-visible { outline: 2px solid var(--filament); outline-offset: 2px; }

/* --- okienka wirników --- */
.banks { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.windows { display: flex; gap: .35rem; }
.win {
  width: 2.4rem; height: 3rem; background: var(--steel-deep);
  border: 1px solid var(--edge); border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--panel-nomen); font-size: 1.5rem; font-weight: 700;
  color: var(--filament); text-shadow: 0 0 10px rgba(255,189,60,.35);
}
.win.secondary { color: var(--ivory); text-shadow: none; }

/* --- lampownica --- */
.lamps { display: grid; grid-template-columns: repeat(13, 1fr); gap: .4rem; margin-top: .4rem; }
.lamp {
  aspect-ratio: 1; min-width: 0; border-radius: 50%;
  border: 1px solid var(--edge);
  background: radial-gradient(circle at 38% 32%, #4e5861, #272e35 72%);
  color: #8d9199; font-family: var(--panel-nomen);
  font-size: clamp(.7rem, 2.3vw, 1.05rem); font-weight: 700;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.lamp:hover { border-color: var(--brass); }
.lamp.on {
  background: radial-gradient(circle at 38% 32%, #fff2cd, var(--filament) 55%, #c98a16 100%);
  color: #3a2605; border-color: #e8ab34; box-shadow: 0 0 14px rgba(255,189,60,.55);
}
.lamp.seen { border-color: var(--brass-dim); color: var(--ivory-dim); }

/* --- odczyt --- */
.readout {
  background: var(--steel-deep); border: 1px solid var(--edge); border-radius: 2px;
  padding: .8rem .9rem; font-family: var(--panel-nomen); letter-spacing: .06em;
}
.readout.block { display: block; margin-top: .3rem; }
.readout .line { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.readout .line.tall { margin-top: .6rem !important; }
.readout .tag { color: var(--brass); min-width: 2.2rem; }
.readout .val { color: var(--ivory); font-size: 1.05rem; }
.readout .hint { color: var(--ivory-dim); letter-spacing: 0; font-family: var(--prose); font-size: .85rem; }
.char { font-size: 1.15rem; color: var(--filament); }

.tape {
  font-family: var(--tape); font-size: 1rem; letter-spacing: .22em;
  word-break: break-all; color: var(--ivory); line-height: 1.7;
}
.tape.hot { color: var(--filament); }
.verdict { margin-top: .7rem; font-family: var(--prose); letter-spacing: 0; font-size: .9rem; color: var(--ivory-dim); }
.verdict.ok { color: var(--green); }
.verdict.bad { color: var(--oxide); }

.findings { display: grid; gap: .5rem; }
.finding {
  border-left: 2px solid var(--brass-dim); padding-left: .8rem;
  font-size: .9rem; color: var(--ivory-dim); line-height: 1.6;
}
.finding.accent { border-left-color: var(--filament); color: var(--ivory); }

/* --- most wskaźnikowy --- */
table.indi { width: auto; font-family: var(--tape); letter-spacing: .1em; margin-bottom: 1.5rem; }
table.indi th, table.indi td { padding: .3rem .7rem; text-align: center; }
table.indi th { font-family: var(--panel-nomen); color: var(--ivory-dim); }
table.indi .mark { color: var(--filament); background: rgba(255,189,60,.08); }
table.indi td.dim { color: var(--ivory-dim); letter-spacing: .05em; }

.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .4rem; margin: .8rem 0 1.2rem; }
.mapcell {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  font-family: var(--tape); font-size: .95rem;
  background: var(--steel-deep); border: 1px solid #2f373f; color: var(--ivory-dim);
  padding: .45rem .3rem; letter-spacing: 0;
}
.mapcell:hover { border-color: var(--brass); background: var(--steel-dark); }
.mapcell .arr { color: #5d6670; }
.mapcell.on { border-color: #e8ab34; background: rgba(255,189,60,.14); color: var(--filament); }
.mapcell.on .arr { color: var(--brass); }
.mapcell.seen { border-color: var(--brass-dim); color: var(--ivory); }

/* --- tabele --- */
table { border-collapse: collapse; width: 100%; font-family: var(--panel-nomen); letter-spacing: .05em; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid #2f373f; }
th { color: var(--brass); font-weight: 400; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.truth td { color: var(--filament); }

.bar { height: 6px; background: var(--steel-deep); border: 1px solid var(--edge); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brass); width: 0; }
#catStatus { margin-top: .3rem; }

.note { border-left: 2px solid var(--brass-dim); padding-left: .8rem; color: var(--ivory-dim); font-size: .9rem; line-height: 1.65; }
.note.warn { border-left-color: var(--oxide); color: #d8b0a4; }
.scroll { max-height: 19rem; overflow: auto; border: 1px solid #2f373f; margin-top: .75rem; }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #2f373f; color: var(--ivory-dim); font-size: .85rem; }

@media (max-width: 640px) {
  .lamps { grid-template-columns: repeat(7, 1fr); }
  .masthead h1 { font-size: 1.7rem; }
  .modes button { padding: .55rem .7rem; font-size: .88rem; }
  .maps { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ===== dymki terminów ===== */
button.term {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--filament);
  border-bottom: 1px dotted var(--brass);
  cursor: help; letter-spacing: inherit;
}
button.term:hover { background: none; color: #ffd37a; border-bottom-style: solid; }
button.term[aria-expanded="true"] { background: rgba(255,189,60,.12); }

.tip {
  position: absolute; z-index: 40;
  background: #12171c; border: 1px solid var(--brass);
  border-radius: 3px; padding: .7rem .85rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
  font-size: .9rem; line-height: 1.55; color: var(--ivory);
}
.tip strong { display: block; font-family: var(--panel-nomen); letter-spacing: .08em; color: var(--brass); margin-bottom: .3rem; }

.glossary { margin: 0; }
.glossary dt { font-family: var(--panel-nomen); letter-spacing: .08em; color: var(--filament); margin-top: 1rem; }
.glossary dd { margin: .25rem 0 0; color: var(--ivory-dim); line-height: 1.7; }

/* ===== droga sygnału ===== */
.pathnav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pathpos { font-family: var(--panel-nomen); letter-spacing: .08em; color: var(--ivory-dim); min-width: 8rem; }
.nomen.inline { display: inline; margin: 0 0 0 .5rem; }
.win.small { width: 1.8rem; height: 2.1rem; font-size: 1.05rem; }

.tape.dim { color: #6d7580; letter-spacing: .18em; margin-bottom: .7rem; }
.tape.dim .here { color: var(--filament); background: rgba(255,189,60,.15); padding: 0 .15em; }

.chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: .25rem; }
.chip {
  background: var(--steel-deep); border: 1px solid var(--edge); border-radius: 2px;
  padding: .3rem .5rem; min-width: 4.6rem; text-align: center;
}
.chip .cname { display: block; font-family: var(--panel-nomen); font-size: .62rem; letter-spacing: .1em; color: var(--ivory-dim); }
.chip .cletter { display: block; font-family: var(--tape); font-size: 1.2rem; color: var(--ivory); }
.chip.pivot { border-color: var(--brass); }
.chip.pivot .cletter { color: var(--brass); }
.chip.back .cletter { color: var(--filament); }
.carrow { align-self: center; color: #5d6670; font-size: 1.1rem; }
.uturn {
  flex-basis: 100%; font-family: var(--panel-nomen); font-size: .65rem;
  letter-spacing: .16em; color: var(--brass); padding: .35rem 0 .1rem;
  border-top: 1px dashed #3a444d; margin-top: .35rem;
}

/* ===== waga klucza ===== */
table.keyspace td.barcell { width: 45%; }
table.keyspace tr.struck th, table.keyspace tr.struck td.num { color: #5d6670; text-decoration: line-through; }
table.keyspace tr.struck .kbar > i { background: #3a444d; }
.kbar { height: 8px; background: var(--steel-deep); border: 1px solid #2f373f; border-radius: 2px; overflow: hidden; }
.kbar > i { display: block; height: 100%; background: var(--brass); }

/* ===== kolory cykli i porównanie tablic ===== */
.mapcell.c0 { border-color: #b08d4f; }
.mapcell.c1 { border-color: #6f93b5; }
.mapcell.c2 { border-color: #7faa6a; }
.mapcell.c3 { border-color: #a24a32; }
.mapcell.c4 { border-color: #9b7fb5; }
.mapcell.c5 { border-color: #c2a06a; }
.mapcell.c6 { border-color: #5f8f8a; }
.mapcell.c7 { border-color: #8d7a5f; }
.mapcell.c0 .from { color: #d9b473; } .mapcell.c1 .from { color: #9fc0dd; }
.mapcell.c2 .from { color: #a7cf93; } .mapcell.c3 .from { color: #d98a72; }
.mapcell.c4 .from { color: #c3abd8; } .mapcell.c5 .from { color: #e0c694; }
.mapcell.c6 .from { color: #8fb8b3; } .mapcell.c7 .from { color: #bfae92; }

.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0; }
.twin .maps { grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); }
.lenline { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.lenline .lens { font-family: var(--tape); font-size: 1.05rem; color: var(--filament); }

table.indi th.secret, table.indi td.secret { color: #5d6670; font-style: italic; }

/* ===== podsumowanie ===== */
ol.recap { padding-left: 1.3rem; max-width: none; }
ol.recap li { margin-bottom: .7rem; line-height: 1.72; }
ol.recap li::marker { color: var(--brass); font-family: var(--panel-nomen); }

@media (max-width: 720px) {
  .twin { grid-template-columns: 1fr; }
  .chip { min-width: 4rem; }
}