/* Neo onboarding — lo-fi prototype. Black and white, square corners, no ornament. */

:root {
  --ink: #111;
  --line: #111;
  --hair: #c9c9c9;
  --muted: #6b6b6b;
  --fill: #ececec;
  --paper: #fff;
  --ground: #f4f4f4;
  --focus: #1558d6;      /* the only accent for focus, nothing else uses it */
  --error: #c62828;      /* meaning: something is wrong right now */
  --ok: #1b7a3f;         /* meaning: this is finished */
  --canvas: 1180px;
  --devbar-h: 0px;      /* height of our own bar on the top edge, 0 for a respondent */
  --notes-w: 0px;       /* column reserved for the notes sheet, 0 for a respondent */
}

/* One focus ring for the whole prototype. Black and white carries the
   design, these two colours carry meaning. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus { outline-color: var(--focus); }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ── canvas ─────────────────────────────────────────────── */

#app { min-height: calc(100vh - var(--devbar-h)); padding-top: var(--devbar-h); padding-right: var(--notes-w); }

.plain {              /* screens without the admin frame */
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.plain.wide { max-width: 900px; }

.code {               /* screen code, always visible in the corner */
  position: fixed;
  top: var(--devbar-h); right: var(--notes-w);
  z-index: 60;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--paper);
  font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .04em;
}

/* ── admin frame ────────────────────────────────────────── */

.admin { position: relative; display: flex; min-height: calc(100vh - var(--devbar-h)); background: var(--paper); }

.admin-rail {
  width: 208px;
  flex: 0 0 208px;
  border-right: 1px solid var(--line);
  background: var(--fill);
  padding: 0 0 24px;
  user-select: none;
}

.admin-brand {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  letter-spacing: .02em;
}

.admin-nav { padding: 10px 0; }
.admin-nav li {
  list-style: none;
  padding: 7px 14px;
  color: var(--muted);
}
.admin-nav li.on {
  color: var(--ink);
  font-weight: 700;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.admin-nav ul { margin: 0; padding: 0; }

.admin-main { flex: 1 1 auto; min-width: 0; }

.admin-head {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.admin-head .shop { font-weight: 700; }
.admin-head .who { color: var(--muted); }

.admin-body { padding: 28px 20px 120px; }
.admin-body > .wrap { max-width: 780px; }
.admin-body > .wrap.wide { max-width: 980px; }

/* ── typography ─────────────────────────────────────────── */

h1 { font-size: 22px; line-height: 1.25; margin: 0 0 10px; text-wrap: balance; }
h2 { font-size: 16px; margin: 28px 0 10px; }
p { margin: 0 0 12px; max-width: 62ch; }
.lede { color: var(--muted); margin-bottom: 22px; max-width: 62ch; }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ── chat ───────────────────────────────────────────────── */

.chat-page { padding-top: 28px; }
.chat-head {
  position: sticky;
  top: calc(var(--devbar-h) + env(safe-area-inset-top, 0px));
  z-index: 5;
  background: var(--ground);
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 24px 14px;
  border-bottom: 1px solid var(--hair);
}
.chat-brand { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.chat-head h1 { margin: 6px 0 0; }
.chat-step { font-size: 13px; color: var(--muted); margin-top: 4px; }

.chat { max-width: 640px; margin: 0 auto; padding: 26px 24px 140px; }
.thread { margin-bottom: 28px; }
.turn { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }
.bubble { max-width: 78%; padding: 9px 12px; border: 1px solid var(--line); background: var(--paper); }
.bubble.product { align-self: flex-start; }
.bubble.merchant { align-self: flex-end; background: var(--fill); }
.bubble.intro { margin-bottom: 8px; }
.bubble.ask { margin-bottom: 18px; scroll-margin-top: 104px; }
.bubble .ask-q { font-size: 18px; line-height: 1.35; text-wrap: balance; }
.bubble .ask-d { margin-top: 7px; }
.turn .again {
  align-self: flex-end;
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.turn .again:hover { color: var(--ink); }
.back-note { margin-bottom: 14px; font-size: 13px; }

.merchant-side { width: 78%; margin-left: auto; }
.composer { padding-top: 2px; }
.choices { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.choices button { width: 100%; text-align: left; background: var(--fill); }
.choices .btn.primary { background: var(--ink); color: var(--paper); }
.choices .btn.now { border-width: 2px; }
.choices .btn.escape {
  width: auto;
  align-self: flex-end;
  border: 0;
  background: none;
  padding: 2px 0;
  color: var(--muted);
  text-decoration: underline;
  text-align: right;
}
.choices .btn.escape:hover { background: none; color: var(--ink); }
.choices .opt.escape { align-items: flex-end; }
.choices .opt.escape .micro { text-align: right; max-width: 42ch; }
.choices .opt { display: flex; flex-direction: column; gap: 4px; }
.choices .opt .micro { margin: 0; color: var(--muted); font-size: 12px; }

/* ── controls ───────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
}
.btn:hover { background: var(--fill); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: #333; }
.btn[disabled] { color: var(--muted); border-color: var(--hair); cursor: not-allowed; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.save-state { color: var(--muted); font-size: 12px; margin-top: 12px; }
.save-row { display: flex; gap: 14px; align-items: baseline; margin-top: 18px; flex-wrap: wrap; }
.save-row .save-state { margin: 0; }

.field { margin: 0 0 18px; max-width: 460px; }
.field.wide { max-width: 100%; }

/* multi-choice as toggles: the same answers, a third of the height */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips .chip {
  padding: 7px 12px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  white-space: normal;
}
.chips .chip:hover { background: var(--fill); }
.chips .chip.on { background: var(--ink); color: var(--paper); }
.field label { display: block; margin-bottom: 4px; }
.field .req { color: var(--ink); }
.field input[type=text], .field input[type=date], .field input[type=email],
.field input[type=tel], .field select, .field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
}
.field textarea { min-height: 84px; resize: vertical; }

/* An address in the shape the payment partner takes it. One box would
   give us whatever the merchant felt like typing. */
.adresa { display: flex; gap: 10px; flex-wrap: wrap; }
.adresa .cast { flex: 1 1 170px; }
.adresa .cast.kratke { flex: 0 0 110px; }
.adresa .cast.dlouhe { flex: 2 1 260px; }
.adresa label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.adresa input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
}

/* A value that is not ours to change right now: shown, not edited. */
.field.locked { border-left: 3px solid var(--hair); padding-left: 11px; }
.field.locked .val { padding: 2px 0 3px; }

/* A rule we are not sure of yet says so quietly and blocks nobody. */
.field.warn .err.soft { color: var(--muted); font-weight: 400; }
.box.recheck { margin: 0 0 20px; }
.field.check { display: flex; gap: 10px; align-items: flex-start; max-width: 620px; }
.field.check input { margin-top: 3px; }
.field.check label { margin: 0; }
.field .err { margin-top: 4px; font-weight: 700; color: var(--error); }
.field.bad > label { color: var(--error); }
.field.bad input, .field.bad select, .field.bad textarea {
  border-width: 2px;
  border-color: var(--error);
}

.money { display: flex; gap: 8px; align-items: center; }
.money input { max-width: 180px; }
.money .cur { color: var(--muted); }

.upload {
  border: 1px dashed var(--line);
  padding: 18px;
  background: var(--paper);
  max-width: 460px;
}
.upload .file { margin-top: 8px; color: var(--muted); }

.micro {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.micro button {
  border: 0; background: none; padding: 0;
  text-decoration: underline; cursor: pointer; color: var(--muted);
}

/* ── blocks ─────────────────────────────────────────────── */

.box { border: 1px solid var(--line); background: var(--paper); padding: 16px; margin: 0 0 16px; }
.box.flat { background: var(--fill); }
.state-banner { border: 1px solid var(--line); background: var(--fill); padding: 12px 14px; margin: 0 0 20px; }
.state-banner .lab { display: flex; gap: 8px; align-items: baseline; font-weight: 700; }

/* ── the mark of a state ─────────────────────────────────── */
/* An emoji brings its own colour and we cannot overrule it, so the mark
   is the only coloured thing and the chip around it stays grey. Two
   nearly matching colours for one fact would read as a mistake. */

.ic {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 13px;
  line-height: 1;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--hair);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.ph { background: var(--fill); border: 1px solid var(--hair); }

/* ── dashboard ──────────────────────────────────────────── */

.gate-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--hair); }
.gate-item:first-of-type { margin-top: 8px; }
.gate-item .btn { padding: 5px 9px; white-space: nowrap; }

/* ── storefront preview (the one non-lo-fi screen) ──────── */

.sf-switch { display: flex; gap: 8px; margin-bottom: 12px; }
.sf-frame { border: 1px solid var(--line); background: var(--paper); margin: 0 auto; }
.sf-frame.mobile { max-width: 375px; margin-left: 0; }
.sf-scroll { max-height: 400px; overflow-y: auto; }
.sf-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--hair); background: var(--fill); color: var(--muted); font-size: 12px; }
.sf-shot { position: relative; line-height: 0; }
.sf-shot img { width: 100%; display: block; }
.sf-name {                /* the shop name is its own layer over the export */
  position: absolute;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  background: #fff;
  padding: 2px 6px;
  line-height: 1.2;
}

/* ── screens outside the delivery ───────────────────────── */
/* The bar is inverted on purpose. It is talk about the prototype, not a
   part of the product, and nobody should mistake it for one. */

.outside { min-height: 100vh; }

.outside-bar {
  position: sticky;
  top: calc(var(--devbar-h) + env(safe-area-inset-top, 0px));
  z-index: 40;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--paper);
}
.outside-bar .lab {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 2px;
}

/* ── somebody else's application ────────────────────────── */
/* Same wireframe language, different furniture. The window chrome says
   at a glance that this is not the Shoptet admin. */

.browser {
  max-width: 1000px;
  margin: 24px auto 80px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--fill);
}
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 9px; height: 9px; border: 1px solid var(--muted); display: block; }
.browser-url {
  flex: 1 1 auto;
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: 4px 10px;
  font: 12px ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--muted);
}
.browser-body { padding: 0; }

/* mail client: a top bar with search, then folders beside the messages */
.mailapp-top {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.mailapp-top .app { font-weight: 700; letter-spacing: .02em; }
.mailapp-top .search {
  flex: 1 1 auto;
  max-width: 420px;
  border: 1px solid var(--hair);
  background: var(--fill);
  padding: 6px 10px;
  color: var(--muted);
}
.mailapp-body { display: flex; align-items: stretch; }
.mailapp-rail {
  width: 140px;
  flex: 0 0 140px;
  border-right: 1px solid var(--hair);
  padding: 12px 0;
}
.mailapp-rail div { padding: 5px 16px; color: var(--muted); font-size: 13px; }
.mailapp-rail div.on { color: var(--ink); font-weight: 700; }
.mailapp-main { flex: 1 1 auto; min-width: 0; padding: 0; }

.mail-list { border-bottom: 1px solid var(--line); }
.mail-row {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hair);
}
.mail-row .from { width: 150px; flex: 0 0 150px; color: var(--muted); }
.mail-row .subj { min-width: 0; }
.mail-row.active { background: var(--fill); }
.mail-row.active .from, .mail-row.active .subj { color: var(--ink); font-weight: 700; }

.mail-open { padding: 20px 16px 26px; }
.mail-open .from { color: var(--muted); margin-bottom: 4px; }
.mail-open h2 { font-size: 17px; margin: 0 0 10px; }
.mail-open p { margin: 0 0 16px; max-width: 58ch; }

/* partner sign-in: one centred card, nothing around it */
.partner {
  background: var(--ground);
  padding: 56px 20px 72px;
  display: flex;
  justify-content: center;
}
.partner-card {
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 24px 22px 26px;
}
.partner-brand {
  border: 1px solid var(--line);
  padding: 8px 12px;
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
.partner-card h1 { font-size: 18px; }
.partner-card .btn { width: 100%; }

/* ── overview widgets ───────────────────────────────────── */
/* A stand-in for the admin overview. One real widget, the rest is
   furniture so the widget reads as one of several. */

.widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.widget {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 14px 16px 16px;
}
.widget .lab {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.widget .head { font-weight: 700; margin-bottom: 12px; text-wrap: balance; }
.widget.alert { grid-column: 1 / -1; border-width: 2px; }
.widget.empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--hair);
  color: var(--muted);
  padding: 34px 16px;
  text-align: center;
}
.widget.calm { grid-column: 1 / -1; }
.widget.calm .head { margin-bottom: 6px; }

/* ── a dialog over a page ──────────────────────── */
/* The four card messages arrive long after setup and open over the admin
   overview, so the merchant can see where they are. The layer sits inside
   the administration frame, which means our own bar on the top edge, the
   screen code and the notes sheet all stay above it and uncovered. */

.modal-vrstva {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
}
.modal-stin { position: absolute; inset: 0; background: rgba(17, 17, 17, .42); }
.modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - var(--devbar-h) - 96px);
  overflow: auto;
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 18px 40px rgba(0, 0, 0, .22);
  padding: 34px 28px 22px;
}
.modal > div > :first-child { margin-top: 0; }
.modal-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover { border-color: var(--hair); }

/* ── notes panel ────────────────────────────────────────── */

/* A sheet laid down next to the screen, not a part of it. It has a
   column of its own, so it covers nothing, and the ground shows all
   around it. The shadow is the one place the prototype is not flat,
   and it is here on purpose: it says this page is above the product,
   not in it. */

#notes {
  position: fixed;
  top: calc(var(--devbar-h) + 16px);
  right: 16px;
  bottom: 16px;
  width: 300px;
  overflow: auto;
  z-index: 50;
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 10px 26px rgba(0, 0, 0, .13);
  padding: 0 0 18px;
  font-size: 13px;
}
#notes .hd {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  padding: 11px 16px 9px;
}
#notes .hd .kdo { color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
#notes h3 { margin: 2px 0 0; font: 700 14px ui-monospace, "SF Mono", Menlo, monospace; }
#notes .meta { color: var(--muted); padding: 11px 16px 0; }
#notes p { max-width: none; padding: 0 16px; }
#notes .tag { display: inline-block; border: 1px solid var(--hair); padding: 1px 6px; margin: 0 4px 4px 0; font: 11px ui-monospace, "SF Mono", Menlo, monospace; }

/* ── devbar ─────────────────────────────────────────────── */

/* ── a screen that fills the height ──────────────────────── */
/* The shop preview is the reward of the whole first stretch, so it
   takes everything between the header and the footer of the page
   and shrinks with the window instead of scrolling out of view. */

/* a definite height, not a minimum: without it the flex children
   have nothing to shrink against and the preview keeps its full size */
.plain.fill { display: flex; flex-direction: column; height: calc(100vh - var(--devbar-h)); min-height: 520px; padding-bottom: 24px; }
.plain.fill > .fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sf-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sf-page .sf-frame { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sf-page .sf-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }

/* a tool that opens in its own window, drawn as text, not as a mock-up */
.tool { padding: 30px 26px 34px; max-width: 620px; }
.tool h1 { margin-top: 0; }

/* ── launch guide: four stages, one panel ────────────────── */
/* The card is a kind of obligation, not a chapter. The selected one
   grows into the panel below so there is no doubt what belongs to what. */

.stages { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 0; }
.stage {
  flex: 1 1 210px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--paper); border: 1px solid var(--hair); padding: 12px;
}
.stage:hover { border-color: var(--line); }
.stage.on { border: 2px solid var(--ink); padding: 11px; border-bottom-color: var(--paper); position: relative; z-index: 2; margin-bottom: -2px; }
.stage.done { border-color: var(--ok); }
.stage.invite { border-style: dashed; }
.stage.invite.on { border-style: solid; }
.stage .hl { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.stage .hl .mk { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 15px; line-height: 1; }
.stage.invite .hl .mk { color: var(--ink); }
.stage .hl .nm { font-weight: 700; }
.stage .d { color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.stage .ctrack { height: 6px; background: var(--fill); border: 1px solid var(--hair); margin-bottom: 5px; }
.stage .cfill { height: 100%; background: var(--ink); }
.stage.done .cfill { background: var(--ok); }
.stage .ct { font-size: 12px; color: var(--muted); }

.stage-panel { border: 2px solid var(--ink); background: var(--paper); padding: 14px; margin: 0 0 26px; }
.stage-panel .panel-lede { color: var(--muted); margin: 0 0 10px; max-width: 62ch; }

.tasks { border: 1px solid var(--hair); }
.task {
  display: flex; gap: 12px; align-items: center;
  width: 100%; padding: 11px 13px;
  border: 0; border-bottom: 1px solid var(--hair);
  background: none; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.task:last-child { border-bottom: 0; }
.task:hover { background: var(--fill); }
.task .n { flex: 1 1 auto; min-width: 0; }
.task .n .name { font-weight: 500; }
.task .n .sub { color: var(--muted); font-size: 12px; }
.task .n .rec { font-weight: 700; font-size: 12px; }
.task.recommended { border-left: 4px solid var(--ink); }
.task.invite .n .name { font-weight: 700; }
.task .act { font-size: 13px; font-weight: 700; white-space: nowrap; }
.task .act.done { font-weight: 400; color: var(--ok); }

/* The merchant's own categories, each with the slot for the official
   number we will know later. The slot is visible so it is clear that
   something belongs there, and empty because we do not have it. */
.kat-list { list-style: none; margin: 8px 0 10px; padding: 0; }
.kat-list li { display: flex; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.kat-list li:last-child { border-bottom: 0; }
.kat-list .nazev { flex: 1 1 auto; }
.kat-list .ph.cislo { flex: 0 0 54px; height: 19px; }

/* what to fetch from an authority before a form can be filled */
.box.prereq { background: var(--fill); }
.box.prereq .lab { font-weight: 700; margin-bottom: 8px; }
.steps-list { margin: 0 0 10px; padding-left: 20px; }
.steps-list li { margin-bottom: 5px; }
.box.prereq .note { color: var(--muted); margin: 0 0 12px; }
.outlink { color: var(--ink); }

#devbar {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
}
#devbar select, #devbar input {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid #666;
  padding: 3px 6px;
  border-radius: 0;
}
#devbar button {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  padding: 3px 8px;
  cursor: pointer;
}
#devbar .sep { width: 1px; height: 18px; background: #555; }
#devbar .lab { color: #bbb; }

/* ── hub (internal, not part of the tested flow) ────────── */

.hub { max-width: 1000px; margin: 0 auto; padding: 40px 24px 80px; }
.hub table { border-collapse: collapse; width: 100%; margin-bottom: 30px; }
.hub th, .hub td { border: 1px solid var(--hair); padding: 6px 9px; text-align: left; vertical-align: top; }
.hub th { background: var(--fill); }
.hub code { font: 12px ui-monospace, Menlo, monospace; }

.missing { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #eee 6px, #eee 12px); border: 1px dashed var(--line); padding: 2px 4px; }

/* A published document, shown the way a customer would open it. Narrow
   measure, plain serif, no administration furniture: it has to read as a
   page of its own, not as another screen of the setup. */
.listina { max-width: 640px; margin: 0 auto; padding: 32px 8px 40px; font-family: Georgia, "Times New Roman", serif; }
.listina h1 { font-size: 24px; margin: 0 0 4px; }
.listina h3 { font-size: 15px; margin: 24px 0 4px; }
.listina p { margin: 0; line-height: 1.55; }
.listina .note { font-size: 13px; color: #666666; margin-bottom: 8px; }
.doc-open { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }

/* Everything under a live prerequisite gate stays readable but steps back,
   so the eye lands on the task that has to happen first. */
.ztlumeno { opacity: 0.45; }