/* translations.css — what the reading interface needs on top of site.css.
   Tokens, navigation, footer and focus styles come from site.css; this file
   holds only the parallel-text machinery and its wider measure. */
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;}
.wrap{box-sizing:content-box;max-width:880px;margin:0 auto;padding:clamp(3rem,8vw,5rem) clamp(1.25rem,5vw,2rem) clamp(4rem,10vw,6rem);}
h1{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin:0 0 0.5rem;letter-spacing:-0.01em;text-wrap:balance;}
h2{font-size:0.82rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim);margin:3rem 0 1rem;}
/* .status lives in site.css now, shared with the index pages. */
/* A metadata grid rather than a run of lines, so the page reads like an edition. */
.srcinfo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.5rem 1.5rem;font-size:0.88rem;color:var(--text-dim);margin:1.6rem 0 2.4rem;padding:1.2rem 1.35rem;border:1px solid var(--rule);border-radius:8px;line-height:1.5;}
.srcinfo dt{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text);white-space:nowrap;padding-top:0.16rem;}
.srcinfo dd{margin:0;}
.srcinfo b{color:var(--text);font-weight:600;}

/* Previous / next through the texts, so a long page does not dead-end. */
.seqnav{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem 1.4rem;align-items:start;margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:0.95rem;}
.seqnav a{display:block;padding:0.45rem 0;min-width:0;overflow-wrap:break-word;}
.seqnav .lbl{display:block;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim);margin-bottom:0.1rem;}
.seqnav .next{text-align:right;}
.seqnav .all{align-self:center;text-align:center;color:var(--text-dim);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;white-space:nowrap;}
.seqnav .all:hover{color:var(--accent);}
.seqnav .spacer{display:block;}
@media (max-width:600px){
  .srcinfo{grid-template-columns:1fr;gap:0.1rem;}
  .srcinfo dd{margin-bottom:0.75rem;}
  .srcinfo dd:last-of-type{margin-bottom:0;}
  .seqnav{grid-template-columns:1fr;gap:0.1rem;}
  .seqnav .next,.seqnav .all{text-align:left;}
  .seqnav .spacer{display:none;}
}
.viewtabs{display:flex;gap:0.5rem;margin:0 0 2.4rem;flex-wrap:wrap;position:sticky;top:0;z-index:5;background:var(--bg);box-shadow:0 1px 0 var(--rule);width:calc(100% + 24px);margin-left:-12px;padding:0.8rem 12px;}
.viewtabs button{font-family:inherit;font-size:0.76rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;padding:0.6rem 1.15rem;border:1px solid var(--edge);background:transparent;color:var(--text-dim);border-radius:4px;cursor:pointer;}
@media (hover:hover) and (pointer:fine){.viewtabs button:hover{color:var(--text);border-color:var(--accent);}}
.viewtabs button.active,.viewtabs button[aria-selected="true"]{background:var(--navy);color:var(--on-navy);border-color:var(--navy);}
.vblock{display:contents;}
.view-stack{display:grid;}
/* Only the chosen view is laid out. visibility:hidden left the stack as tall
   as the tallest view, so a short view sat above a screen of dead space. */
.view{grid-row:1;grid-column:1;display:none;}
.view.active{display:block;}
/* A view change fades the incoming text in; opacity only, no movement, since
   the reader is re-finding their place. Gated on .views-animate (set by
   showview.js on the first click) so a page load never fades the text in. */
.views-animate .view.active{opacity:1;transition:opacity 140ms ease-out;}
@starting-style{
  .views-animate .view.active{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .views-animate .view.active{transition:none;}
  .viewtabs::after{transition:none;}
}

/* Where the browser supports it, the rule under the sticky tabs appears only
   once they are actually stuck to the top of the page. Elsewhere it stays
   drawn, as before. */
@supports (container-type: scroll-state){
  .viewtabs{container-type:scroll-state;box-shadow:none;}
  .viewtabs::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:var(--rule);
    opacity:0;
    transition:opacity 120ms ease-out;
  }
  @container scroll-state(stuck: top){
    .viewtabs::after{opacity:1;}
  }
}
footer{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:0.82rem;color:var(--text-dim);}

/* Inline section marker ("[530a]", "[1]"), used by more than one reading
   page for a break that falls inside a line of running prose - a shared
   rule here so every page's inline marker looks the same, rather than each
   page defining its own copy. A background chip, not just dim colour, is
   what actually reads as "this is a marker" and not stray text. */
.mk{font-family:var(--sans);font-size:0.76rem;font-weight:700;color:var(--text);background:var(--rule);border-radius:4px;padding:0.08em 0.4em;margin:0 0.25em;white-space:nowrap;}
@media (max-width:640px){.mk{font-size:0.8rem;}}

/* The parallel view carries two columns of text, so it is allowed past the
   single-column measure on wide screens. The other views keep the 880px measure. */
@media (min-width:1220px){
  .view#v-parallel{width:calc(100% + 190px);margin-left:-95px;}
  /* The sticky bar has to cover the full width of the widest view, or the
     parallel view's outer 95px scrolls past it uncovered. The extra 12px each
     side catches glyphs that overhang their box, such as the breathing on an
     initial capital. Padding keeps the buttons aligned with the rest of the page. */
  .viewtabs{width:calc(100% + 214px);margin-left:-107px;padding-left:107px;padding-right:107px;}
}

/* One row of view buttons, spanning the full measure, at every phone width.
   Three equal columns means the fit never depends on how long a label is, and
   the type scales with the viewport so "TRANSLATION" always fits its cell. */
@media (max-width:640px){
  .viewtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.4rem;padding-top:0.7rem;padding-bottom:0.7rem;}
  .viewtabs button{width:100%;padding:0.65rem 0.15rem;font-size:clamp(0.72rem,2.9vw,0.76rem);letter-spacing:0.02em;white-space:nowrap;}
}

/* PARALLEL ON A PHONE. Two columns of Greek and English cannot both be read at
   375px, so the parallel view interleaves instead: each unit of the original is
   followed immediately by its translation, marked off by a rule down its left.
   Where a section holds several aligned paragraphs (the Ion dialogue, one
   speech turn per paragraph), they are paired turn by turn rather than dumping
   the whole Greek block above the whole English one, which is not parallel in
   any useful sense. Counts match on both sides, so the row placement is exact. */
@media (max-width:640px){
  .prow2-grid{display:grid;grid-template-columns:1fr;gap:0;}

  /* Sections that are one block per side (Thucydides): pair them as they are. */
  .prow2-grid > .eng{color:var(--text-dim);border-left:2px solid var(--rule);padding-left:0.9rem;margin-top:0.55rem;}

  /* Sections built from aligned paragraphs (the Ion dialogue): lift the
     paragraphs into the grid and pair them turn by turn. Without :has support
     this rule is skipped and the block pairing above still applies. */
  .prow2-grid > .src:has(> p),.prow2-grid > .eng:has(> p){display:contents;}
  .prow2-grid > .src > p{grid-column:1;margin:0 0 0.4rem;}
  .prow2-grid > .eng > p{grid-column:1;margin:0 0 1.3rem;color:var(--text-dim);border-left:2px solid var(--rule);padding-left:0.9rem;}
  .prow2-grid > .src > p:nth-child(1){grid-row:1;}
  .prow2-grid > .eng > p:nth-child(1){grid-row:2;}
  .prow2-grid > .src > p:nth-child(2){grid-row:3;}
  .prow2-grid > .eng > p:nth-child(2){grid-row:4;}
  .prow2-grid > .src > p:nth-child(3){grid-row:5;}
  .prow2-grid > .eng > p:nth-child(3){grid-row:6;}
  .prow2-grid > .src > p:nth-child(4){grid-row:7;}
  .prow2-grid > .eng > p:nth-child(4){grid-row:8;}
  .prow2-grid > .src > p:nth-child(5){grid-row:9;}
  .prow2-grid > .eng > p:nth-child(5){grid-row:10;}
  .prow2-grid > .src > p:nth-child(6){grid-row:11;}
  .prow2-grid > .eng > p:nth-child(6){grid-row:12;}
  .prow2-grid > .src > p:nth-child(7){grid-row:13;}
  .prow2-grid > .eng > p:nth-child(7){grid-row:14;}
  .prow2-grid > .src > p:nth-child(8){grid-row:15;}
  .prow2-grid > .eng > p:nth-child(8){grid-row:16;}
  .prow2-grid > .src > p:nth-child(9){grid-row:17;}
  .prow2-grid > .eng > p:nth-child(9){grid-row:18;}
  .prow2-grid > .src > p:nth-child(10){grid-row:19;}
  .prow2-grid > .eng > p:nth-child(10){grid-row:20;}
  .prow2-grid > .src > p:nth-child(11){grid-row:21;}
  .prow2-grid > .eng > p:nth-child(11){grid-row:22;}
  .prow2-grid > .src > p:nth-child(12){grid-row:23;}
  .prow2-grid > .eng > p:nth-child(12){grid-row:24;}

  /* VERSE ON A PHONE. Interleaving line by line destroys a poem: the shape of
     the verse is the neighbouring lines, not one line on its own. So the block,
     not the line, is the unit that alternates. You read a whole block of verse,
     then that same block in English, then the next. The poem keeps its shape,
     the English is never more than a few lines from its original, and this
     holds at ten lines or seven hundred, because the block size is fixed.

     Four lines throughout. That is the real stanza in Catullus 11, which is in
     sapphic strophes, and for the stichic poems it is simply the length that
     reads best on a phone: short enough to hold the Latin in your head while
     you read the English under it. Only these eight rules are needed however
     long a poem runs, because they address position within a block, not
     absolute line number. Desktop is untouched: .vblock stays out of the way
     and the existing per-line grid keeps each line beside its translation. */
  .view .vblock{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:1.9rem;}
  .view .vblock > .prow{display:contents;}
  .view .vblock > .prow:nth-child(1) > .src-col{grid-row:1;}
  .view .vblock > .prow:nth-child(1) > .eng-col{grid-row:5;}
  .view .vblock > .prow:nth-child(2) > .src-col{grid-row:2;}
  .view .vblock > .prow:nth-child(2) > .eng-col{grid-row:6;}
  .view .vblock > .prow:nth-child(3) > .src-col{grid-row:3;}
  .view .vblock > .prow:nth-child(3) > .eng-col{grid-row:7;}
  .view .vblock > .prow:nth-child(4) > .src-col{grid-row:4;}
  .view .vblock > .prow:nth-child(4) > .eng-col{grid-row:8;}
  .view .vblock > .prow > .eng-col{grid-template-columns:minmax(0,1fr);margin-left:calc(2.2em + 0.55rem);border-left:2px solid var(--rule);padding-left:0.7rem;}
  .view .vblock > .prow:first-child > .eng-col{padding-top:0.5rem;}
  .view .vblock > .prow > .eng-col .num{display:none;}
}

/* MOBILE-LABEL-BUMP: the smallest labels in the reading flow are hard work on a phone. */
@media (max-width:640px){
  .status{font-size:0.78rem;}
  .lbl{font-size:0.8rem;}
  .srcinfo{font-size:0.9rem;}
}

/* The reading tabs sit below the sticky header on a phone, not under it. */
@media (max-width:760px) and (min-height:500px){
  .viewtabs{top:var(--head-h);}
}

/* Jumps (contents panel, a #hash on load, keyboard focus) must land below the
   sticky tabs. showview.js keeps --tabs-h equal to their rendered height. */
html{scroll-padding-top:calc(var(--tabs-h,0px) + 1rem);}
@media (max-width:760px) and (min-height:500px){
  html{scroll-padding-top:calc(var(--head-h) + var(--tabs-h,0px) + 1rem);}
}

/* The page prints as the active view only, without the tab bar. */
@media print{
  .viewtabs{display:none !important;}
  .prow,.vblock{break-inside:avoid;}
}

/* The view buttons are the most-pressed control on these pages. */
@media (max-width:760px), (pointer:coarse){
  .viewtabs button{min-height:44px;}
  .seqnav a{min-height:44px;}
  .seqnav .all{display:flex;align-items:center;justify-content:center;}
}

/* Greek prose may break at syllables so narrow columns do not gap out. Verse
   is left alone: a verse line should never be split across two lines. */
p[lang="grc"],[lang="grc"] p,.src[lang="grc"]{hyphens:auto;}