/* Chrome — the fixed UI frame around the reading column:
   progress rail, sticky header (brand + tools + counter), footer navigation
   (back/next + page jump), and the bookmark toast. */

/* ---- progress rail ---- */
.rail {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--line); z-index: 40;
}
.rail > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #8a2d12, var(--ember) 60%, var(--ember-lit));
  box-shadow: 0 0 10px var(--ember);
  transition: width .6s cubic-bezier(.4,0,.1,1);
}

/* ---- header ---- */
header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem clamp(1rem, 4vw, 2.2rem);
  background: linear-gradient(180deg, rgba(12,10,9,0.96) 60%, rgba(12,10,9,0));
  backdrop-filter: blur(2px);
}
.brand {
  font-family: var(--display);
  font-size: 0.94rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
  cursor: pointer; background: none; border: 0; padding: 0;
}
.brand:hover { color: var(--ink); }
.brand .spark { color: var(--ember); }

.tools { display: flex; align-items: center; gap: 0.35rem; }
.tool {
  font-family: var(--body);
  display: inline-flex; align-items: center; gap: .4ch;
  background: none; border: 1px solid transparent; color: var(--ash);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.4rem 0.6rem; border-radius: 2px; cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.tool:hover { color: var(--ink); border-color: var(--line); }
.tool svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.counter {
  font-family: var(--display); font-size: 1.05rem; color: var(--ink-soft);
  letter-spacing: 0.12em; min-width: 4.5ch; text-align: left;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.counter b { color: var(--ember); font-weight: 600; }

/* ---- footer nav ---- */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem clamp(1rem, 4vw, 2.2rem);
  background: linear-gradient(0deg, rgba(12,10,9,0.97) 55%, rgba(12,10,9,0));
}
.nav-btn {
  font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.06em;
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 0.55rem 1.3rem; border-radius: 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.6ch;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.nav-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ash); }
.nav-btn:disabled { opacity: 0.28; cursor: default; }
.nav-btn.next {
  color: var(--ink);
  border-color: rgba(226,86,43,0.5);
  background: linear-gradient(180deg, rgba(226,86,43,0.10), rgba(226,86,43,0.03));
}
.nav-btn.next:hover { border-color: var(--ember); box-shadow: 0 0 18px -4px var(--glow); }
.nav-arrow { font-style: normal; }

.pager {
  display: flex; align-items: center; gap: 0.5ch;
  font-family: var(--body); font-size: 0.95rem; color: var(--ash);
  white-space: nowrap;
}
.pager-input {
  width: 3.4em; height: 2.4em; text-align: center;
  font-family: var(--display); font-size: 1.05rem; line-height: 2.3em;
  font-variant-numeric: lining-nums;
  color: var(--ember); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0 0.2rem;
  -moz-appearance: textfield;
}
.pager-input::-webkit-outer-spin-button,
.pager-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pager-input:focus {
  outline: none; border-color: rgba(226,86,43,0.6);
  box-shadow: 0 0 0 2px var(--glow);
}

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 6.2rem; transform: translate(-50%, 14px);
  z-index: 60; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); font-size: 0.86rem; letter-spacing: 0.04em;
  padding: 0.7rem 1.1rem; border-radius: 3px; box-shadow: 0 10px 40px -12px #000;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  display: flex; align-items: center; gap: 0.6ch;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .em { color: var(--ember); }