/* Sprengel page reader: a line-faithful reconstruction beside the scan. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.diplomatic-reader .topbar { flex-wrap: nowrap; }
.page-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font: 12px var(--ui);
}
.page-nav .where {
  min-width: 210px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.jump-form { display: flex; align-items: center; gap: 5px; }
.jump-form label,
.view-picker { color: var(--dim); font: 12px var(--ui); white-space: nowrap; }
.jump-form input {
  width: 138px;
  padding: 4px 7px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  background: #fff;
  font: 12px var(--ui);
}
.jump-form input:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 1px;
}
.view-picker select { margin-left: 4px; }
.tool-link { text-decoration: none; display: inline-block; }

#message {
  position: fixed;
  z-index: 80;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(620px, calc(100vw - 28px));
  padding: 8px 13px;
  border: 1px solid #d7b59f;
  border-radius: 3px;
  color: #6f2e27;
  background: #fff7eb;
  box-shadow: 0 5px 18px rgba(54, 42, 24, 0.16);
  font: 13px var(--ui);
}
#message[hidden] { display: none; }

.diplomatic-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  background: #dad6cc;
}
#transcription {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 22px 28px 70px;
}
.page-intro {
  width: min(100%, 850px);
  margin: 0 auto 12px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  color: #625c50;
}
.page-intro h1 {
  margin: 0;
  font: 500 18px/1.25 var(--ui);
  color: #373229;
}
.eyebrow {
  margin-bottom: 2px;
  color: var(--leaf);
  font: 10px/1.2 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-provenance {
  text-align: right;
  font: 11px/1.35 var(--ui);
}

.paper {
  position: relative;
  width: max-content;
  min-width: min(760px, calc(100vw - 76px));
  max-width: none;
  min-height: 1030px;
  margin: 0 auto;
  padding: 52px 70px 58px;
  overflow: visible;
  color: #201d17;
  background: #fbf8ee;
  border: 1px solid #cfc8b7;
  box-shadow: 0 12px 34px rgba(63, 51, 25, 0.20);
  font: 17px/1.43 var(--serif);
}
.paper::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  pointer-events: none;
}
.paper.page-left::before {
  right: 0;
  background: linear-gradient(to left, rgba(67, 54, 29, 0.10), transparent);
}
.paper.page-right::before {
  left: 0;
  background: linear-gradient(to right, rgba(67, 54, 29, 0.10), transparent);
}
.paper.page-left .fw-pageNum { left: 0; right: auto; }
.paper.page-right .fw-pageNum { left: auto; right: 0; }
.paper[aria-busy="true"]::after {
  content: "Loading page…";
  display: block;
  color: var(--dim);
  font: 13px var(--ui);
}
.paper-empty {
  margin: 80px auto;
  color: var(--dim);
  text-align: center;
  font: italic 15px var(--serif);
}

.furniture-top {
  position: relative;
  min-height: 28px;
  margin-bottom: 21px;
  padding: 0 58px;
  text-align: center;
  font-size: 0.87em;
  letter-spacing: 0.05em;
}
.fw { display: block; }
.fw-pageNum {
  position: absolute;
  top: 0;
  right: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.fw-header { font-variant: small-caps; }
.fw-other { margin-top: 3px; }

.stream-block {
  position: relative;
  margin: 0;
}
.stream-block + .stream-block {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid #d8d1c0;
}
.stream-label {
  position: absolute;
  top: 2px;
  left: -64px;
  width: 30px;
  margin: 0;
  color: #8d8372;
  text-align: right;
  font: 9px/1.2 var(--ui);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.stream-lines { width: max-content; min-width: 100%; }
.diplomatic-line {
  position: relative;
  min-height: 1.43em;
  text-align: left;
}
.line-number {
  position: absolute;
  right: calc(100% + 0.65em);
  top: 0.35em;
  width: 2em;
  color: #a49b89;
  text-align: right;
  font: 9px/1 var(--ui);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.line-text { white-space: pre; }
.diplomatic-line.chapter-start .line-text {
  display: inline-block;
  padding-inline-start: 1.75em;
}
.stream-grc .stream-lines,
.stream-grc .notes-block { font-family: var(--greek); }
.page-continues {
  margin: -9px 0 9px;
  color: #8d8372;
  font: italic 10px var(--ui);
}

.notes-block {
  width: max-content;
  min-width: 100%;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #8f897c;
  font-size: 0.82em;
  line-height: 1.38;
}
.note-row {
  display: grid;
  grid-template-columns: 3.5em auto;
  align-items: baseline;
}
.note-n {
  padding-right: 0.55em;
  color: inherit;
  text-align: right;
  font-size: 0.92em;
  font-weight: normal;
}
.note-continued {
  color: #8d8372;
  font: italic 9px var(--ui);
}
.note-line { white-space: pre; }
.note-ref {
  padding: 0;
  border: 0;
  background: none;
  color: #8a2f1d;
  font: inherit;
  cursor: pointer;
}
.note-ref:hover,
.note-ref:focus-visible { text-decoration: underline; }
.linked-note { cursor: pointer; }
.linked-note:hover .note-n { color: #8a2f1d; }
.flash { animation: note-flash 1.6s ease-out; }
@keyframes note-flash {
  from { background: #f3d9a4; }
  to { background: transparent; }
}

.furniture-bottom {
  min-height: 24px;
  margin-top: 34px;
  text-align: center;
  font-size: 0.86em;
  letter-spacing: 0.06em;
}
.furniture-bottom .fw + .fw { margin-top: 2px; }

.diplomatic-reader #facs {
  width: 44%;
  min-width: 360px;
}
.diplomatic-reader #facs[hidden] { display: none; }
.diplomatic-reader #osd { min-height: 0; }

@media (max-width: 1120px) {
  .diplomatic-reader .brand .sub { display: none; }
  .page-nav .where { min-width: 155px; }
  .jump-form label { display: none; }
  .diplomatic-reader #facs { width: 42%; min-width: 300px; }
}

@media (max-width: 820px) {
  .diplomatic-reader { overflow: auto; }
  .diplomatic-reader .topbar { align-items: flex-start; flex-wrap: wrap; }
  .diplomatic-reader .brand { width: 100%; }
  .page-nav { flex-wrap: wrap; }
  .page-nav .where { order: 5; width: 100%; }
  .diplomatic-reader .tools { margin-left: 0; }
  .diplomatic-frame { flex-direction: column; flex: none; }
  .diplomatic-reader #facs {
    order: -1;
    width: 100%;
    min-width: 0;
    height: 56vh;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
  }
  #transcription { overflow: visible; padding: 16px 12px 48px; }
  .page-intro { padding: 0 4px; }
  .paper { min-width: 720px; }
}

@media print {
  .topbar, #facs, .page-intro, #message { display: none !important; }
  body, .diplomatic-frame, #transcription { display: block; overflow: visible; background: #fff; }
  #transcription { padding: 0; }
  .paper { border: 0; box-shadow: none; margin: 0; min-height: 0; }
}