/* ============================================================================
   Atlas Trails: the listing at /Trails.aspx and one trail at /Trail.aspx.
   Ported from the first edition's two inline <style> blocks (Trails.aspx and
   Trail.aspx), which is where this used to live; ruling of 2026-07-31 says all
   CSS lives in App_Themes and a page may not contain a style block, so the two
   blocks are merged here with their duplicated rules collapsed. The look is
   unchanged: same classes, same sizes, same colours.

   COLLAPSED DUPLICATES, named so nobody re-splits them: .hint and .trprog
   existed in both blocks with identical bodies. .sr-only existed in Trail.aspx
   and is already in site.css, so it is not repeated here at all.

   EVERYTHING IS SIZED IN rem/em AND NO BOX AROUND TEXT HAS A FIXED HEIGHT, so
   the A-/A+ control and a 200% system text size both still govern this page.
   A px font or a fixed-height card opts that element out of the reader's text
   size and clips.

   Loaded by Trails.aspx.vb and Trail.aspx.vb through PageAssets.StyleLink.
   Dropping a file into this folder does not link it.
   ============================================================================ */

/* max-width:var(--measure) appears on the blocks below and is INERT today: the
   .authwrap column these pages sit in is narrower than the measure, so nothing
   reaches it. It is written anyway because site.css caps the .dvhead grid at
   the same value, so if the column is ever widened the body blocks stay lined
   up with the heading instead of drifting past it. */

/* The page kicker. .dvpage .kick already draws it gold and uppercase; these
   two values are the first edition's .eyebrow, which is a touch larger and
   more widely tracked, and are what keep the two editions identical. */
.trailpage .kick{font-size:.7rem;letter-spacing:.22em;margin-bottom:10px}

/* The title, h1.page, RESTORED w-launchfix3-2241, 2026-08-23 (board
   1793/1812 reversal). The h2.page demotion above was the wrong
   direction: Trail.aspx's own topic is the correct single h1, and
   Site.master's brand wordmark is now a non-heading element instead of
   an h1, so no duplicate remains either way. Same face, same size, same
   margin regardless of tag. */
/* break-word, NOT anywhere: anywhere breaks inside a word that would have fit,
   and at 200% text in this column it split "Hermeticism" across two lines with
   no hyphen. break-word only breaks a word that cannot fit at all, which is
   .dvrail h1's own value and the safe one for a title. */
/* text-wrap:balance REMOVED here, w-launchfix1-2148, 2026-08-23 (launch
   readiness audit item 14; full reasoning in App_Themes\Divinity\home.css
   at its own .homepage .fcard h4 rule, ruling 309 prevalence sweep).
   overflow-wrap:break-word and hyphens:auto, kept, are the two properties
   actually doing the wrapping job; balance was only a cosmetic line-length
   evener riding alongside them. */
.trailpage .page{font-family:var(--serif);font-size:2rem;margin:0 0 6px;font-weight:600;
  overflow-wrap:break-word;hyphens:auto}
.trailpage .trhead{margin-bottom:6px}

/* The lede. .dvpage>.lede enlarges it to 1.02rem for the entity and category
   pages; these two are .dvpage only so js/entitypage.js can find their action
   row, and the first edition draws a trail's lede at the plain .lede size. */
.trailpage>.lede{font-size:.92rem;line-height:1.6;margin:0 0 8px}

/* THE READ CONTROL'S BOX IS NOT HERE ANY MORE (2026-08-02).
   These pages used to carry their own .trailpage-scoped restatement of the box
   js/panel-speak.js's injected .dspeak takes inside the action row: the 2.5em
   .readbtn shape, the gold hover, the visually-hidden .dspeak-t label. Every
   line of it moved, VALUE FOR VALUE, to [data-pageacts] in the shared theme,
   where it covers every page that renders the shared bar rather than these two,
   so nothing an eye can see changed and there is one copy instead of a second
   that would have to be kept in step.

   IT MOVED TWICE, so do not go looking for the file this used to name. It went
   to pageacts.css on 2026-08-02, and pageacts.css was itself folded into
   site.css later the same day and deleted; these pages need no stylesheet link
   for the bar at all now. The reasoning that produced those values is kept
   where the values are: App_Themes/Divinity/site.css, in the block beside
   [data-pageacts] .readbtn. */

/* THE SECTION WRAPPER IS A READ-ALOUD HOOK, NOT A PANEL. Both pages wrap their
   list in a <section class="sec"> because js/panel-speak.js composes a page as
   its h1, its kicker, its .entlede and then every .sec, so a block outside all
   of those is never spoken. .dvpage .sec draws a panel with a background, a
   border and 15px of padding, which the first edition's trail pages do not
   have; these five values put it back to nothing so the hook costs the eye
   nothing. */
.trailpage .sec{background:none;border:0;border-radius:0;padding:0;margin:0}

/* ---- the listing --------------------------------------------------------- */

/* A grid of cards. role="list" carries the semantics an <ul> used to, and the
   div shape is what lets js/panel-speak.js speak a card's title, description
   and meta line as three sentences instead of one run-on utterance. */
.trailpage .trlist{margin:18px 0 0;padding:0;display:grid;gap:14px;max-width:var(--measure)}
.trailpage .trcard{border:1px solid var(--edge);border-radius:12px;padding:14px 16px;min-width:0}
.trailpage .trcard h3{margin:0 0 6px;font-size:1.08rem;overflow-wrap:anywhere}
.trailpage .trcard h3 a{color:var(--ink);text-decoration:none}
.trailpage .trcard h3 a:hover{color:var(--gold)}
.trailpage .trcard p{margin:0 0 8px;color:var(--muted);line-height:1.55}
/* min-width:0 on the shrinkable member, and it wraps: a flex row of text that
   does neither is how a name becomes three characters and an ellipsis. */
.trailpage .trmeta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--faint);font-size:.8rem;min-width:0}
.trailpage .trmeta span{min-width:0}

/* The local progress chip, written by js/trail.js. Hidden until it has
   something true to say, so a first-time visitor is not told "0 of 7". */
.trailpage .trprog{display:none;color:var(--gold-soft)}
.trailpage .trprog.on{display:inline}

/* ---- one trail ----------------------------------------------------------- */

/* The stop count and reading time. It lives in the heading block's .badges
   slot, which already owns the spacing under it, so a bottom margin here would
   double it. */
.trailpage .trfacts{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--faint);font-size:.84rem;
  margin:0;min-width:0}
.trailpage .trfacts span{min-width:0}

/* The progress bar is an enhancement over a sentence that is always readable.
   Hidden entirely until js/trail.js has something true to say. */
.trailpage .trprogwrap{display:none;margin:0 0 18px;max-width:var(--measure)}
.trailpage .trprogwrap.on{display:block}
.trailpage .trbar{height:.5rem;border:1px solid var(--edge2);border-radius:999px;overflow:hidden;
  background:var(--ground)}
.trailpage .trbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s ease}
.trailpage .trprogtext{color:var(--muted);font-size:.84rem;margin:6px 0 0}

.trailpage .trstops{margin:18px 0 0;padding:0;counter-reset:trstop;max-width:var(--measure)}
.trailpage .trstop{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--edge);
  min-width:0;counter-increment:trstop}
/* THE STEP BADGE IS A COUNTER, not text. The position a reader needs is real
   text inside .trbody ("Stop 3 of 9"), which a screen reader and the read-aloud
   both reach; drawing the digit again in the DOM would make both of them say it
   twice. em, not px: the badge grows with the text beside it instead of
   clipping its own digits when the reader turns the text up. */
.trailpage .trstop::before{content:counter(trstop);flex:0 0 auto;min-width:1.9em;height:1.9em;
  line-height:1.9em;text-align:center;border:1px solid var(--edge2);border-radius:999px;
  color:var(--faint);font-size:.82rem}
.trailpage .trstop.done::before{border-color:var(--gold);color:var(--gold)}
/* min-width:0 or a long entity name refuses to wrap and pushes the row wide. */
.trailpage .trbody{min-width:0;flex:1 1 auto}
.trailpage .trname{font-weight:650;overflow-wrap:anywhere}
.trailpage .trname a{color:var(--ink);text-decoration:none}
.trailpage .trname a:hover{color:var(--gold)}
.trailpage .trtype{color:var(--faint);font-size:.78rem}
.trailpage .trnote{color:var(--muted);font-size:.92rem;line-height:1.55;margin:6px 0 0}
/* Written by js/trail.js when a stop has been visited, and not emitted by the
   server at all: an element that is display:none is still read aloud, so
   shipping the word "Visited" hidden under every stop would have made the
   read-aloud say it nine times on a trail nobody had started. */
.trailpage .trdone{color:var(--gold-soft);font-size:.78rem;margin-top:4px}

/* ---- shared bits drawn here and nothing in App_Themes styles yet ----------
   .sharerow / .shareurl are ShareMeta.ShareRow's markup and .notecard is the
   first edition's panel class. Both are SHARED components: Collection.aspx.vb
   already renders a share row and it is unstyled there today. These rules are
   scoped to .trailpage so this file cannot change another page, and the
   hoist into site.css is flagged rather than done here.
   ------------------------------------------------------------------------- */
.trailpage .sharerow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;
  max-width:var(--measure)}
.trailpage .shareurl{flex:1 1 18rem;min-width:0;background:var(--ground);border:1px solid var(--edge2);
  color:var(--ink);border-radius:9px;padding:8px 10px;font:inherit;font-size:.85rem}
.trailpage .notecard{border:1px solid var(--edge2);border-radius:10px;padding:12px 14px;margin:18px 0 0;
  color:var(--muted);line-height:1.55;max-width:var(--measure)}
.trailpage .notecard p{margin:0 0 8px}
.trailpage .notecard p:last-child{margin:0}
.trailpage .rowform{margin-top:14px}
.trailpage .hint{color:var(--faint);font-size:.84rem;line-height:1.5;margin:16px 0 0;
  max-width:var(--measure)}
/* Inside a control row the hint is a label beside a button, not a paragraph
   under one, so it takes no top margin there. */
.trailpage .rowform .hint{margin:0}