/* Shared coaster lists (2026-09-28): the model/park rows that open to their
   coasters (details.mdl in a .mlist panel), the coaster rows themselves
   (a.crow), and the Rankings section CoasterHub.rankSection draws (.ranksec,
   Mine / Global). Used by the manufacturer/model pages and a location's page;
   moved out of manufacturer.html so the two read as one family. */
/* A model is a <details>: the summary is its name and how many, the body
   its coasters. */
details.mdl{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin:0 0 8px;overflow:hidden}
details.mdl summary{display:flex;align-items:baseline;gap:10px;padding:12px 16px;cursor:pointer;list-style:none}
details.mdl summary::-webkit-details-marker{display:none}
details.mdl summary .nm{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.mdl summary .ct{margin-left:auto;flex:none;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
details.mdl summary .ct b{color:var(--accent2)}
details.mdl[open] summary{border-bottom:1px solid var(--soft)}
details.mdl:target{border-color:var(--accent2)}
/* One list, not a card per model (Carter, 2026-09-27): the models share a
   panel and a hairline between them. */
.mlist details.mdl{border:0;border-radius:0;margin:0;border-bottom:1px solid var(--line);background:none}
.mlist details.mdl:last-child{border-bottom:0}
.mlist details.mdl summary{padding:10px 16px;align-items:center}
.mlist details.mdl summary:hover{background:var(--soft)}
.mlist .mtwo .nm{font-weight:600;font-size:.95rem}
.mlist .msub{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlist details.mdl summary .ct{font-size:.84rem}
.mlist .chev{flex:none;color:var(--muted);transition:transform .15s ease}
.mlist details.mdl[open] > summary .chev{transform:rotate(180deg)}
.mlist details.mdl[open] > summary{background:var(--soft)}
.mlist details.mdl:target > summary{background:var(--soft)}
.mlist details.mdl[open] > summary .nm{color:var(--accent2)}
/* Opened from a #model link: clear of the sticky header. */
details.mdl{scroll-margin-top:84px}

/* A coaster row inside a model, and a maker row on the index: the whole
   strip is the link. */
a.crow{display:flex;align-items:baseline;gap:10px;padding:9px 16px;font-size:.9rem;color:var(--fg);
       text-decoration:none;border-bottom:1px solid var(--soft)}
a.crow:last-child{border-bottom:0}
a.crow:hover{background:var(--soft)}
a.crow .tick{flex:none;width:1.05em;text-align:center;color:var(--accent2);font-size:.82rem}
/* Grey means defunct, nothing else (Carter, 2026-09-28): an operating ride you
   haven't ridden stays black — the empty tick slot already says so. */
a.crow .cn{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.crow:hover .cn{color:var(--accent2)}
a.crow .pk{color:var(--muted);font-size:.8rem;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.crow .yrs{margin-left:auto;flex:none;padding-left:10px;font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}
a.crow .yrs.off{color:var(--accent)}
a.crow.mlink .cn{color:var(--accent2);font-weight:600}
/* Your ranking of this maker / model (.ranksec). */
a.crow .rk{flex:none;min-width:2.6em;color:var(--accent2);font-weight:800;font-variant-numeric:tabular-nums}
a.crow .md{margin-left:auto;flex:none;padding-left:10px;color:var(--muted);font-size:.8rem;white-space:nowrap}
.panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
/* The park rides under the name rather than beside it (Carter, 2026-09-25:
   "want to see park for each coaster"): on a phone there was no room for it
   beside, so it was hidden, and every Batman read the same. */
a.crow .two{display:flex;flex-direction:column;min-width:0}
a.crow .two .pk{font-size:.78rem}
a.crow{align-items:center}
/* "In your rankings" is one line a ride (Carter, 2026-09-28: "shrink
   these"): name, then its park in grey beside it. */
.ranksec a.crow{padding-top:6px;padding-bottom:6px;align-items:baseline}
.ranksec a.crow .two{flex-direction:row;align-items:baseline;gap:8px}
.ranksec a.crow .two{flex:1 1 auto}
.ranksec a.crow .two .cn{flex:0 0 auto;max-width:68%}
.ranksec a.crow .two .pk{flex:1 1 0}
.ranksec a.crow .two .pk{font-size:.8rem}
/* Mine / Global: the /rankings switch (.hero .segsw), section-sized. */
.sect.rhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rsw{display:inline-flex;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--soft);
     text-transform:none;letter-spacing:0}
.rsw a{padding:3px 12px;border-radius:999px;color:var(--muted);font-weight:600;font-size:.78rem;cursor:pointer;text-decoration:none}
.rsw a:hover{color:var(--fg)}
.rsw a.on{background:var(--panel);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.rnone{color:var(--muted);font-size:.86rem;margin:4px 2px 0}
/* Global rows: /rankings' master-list look (.srow .meta, .chev, .wrow). */
.ranksec a.crow.g{align-items:center;padding-top:9px;padding-bottom:9px}
/* The /rankings row (Carter, 2026-09-28): a bare number, the coaster over
   its park, and "avg #N" over "N lists" on the right. */
.ranksec a.crow.g .two .cn{font-size:.93rem}
/* Name and park · place side by side, as /rankings' Global list; stacked on a phone. */
@media (max-width:560px){
  .ranksec a.crow.g .two{flex-direction:column;align-items:flex-start;gap:1px}
  .ranksec a.crow.g .two .cn,.ranksec a.crow.g .two .pk{max-width:100%}
}
.ranksec a.crow .gyou{flex:none;padding-left:10px;color:var(--accent2);font-weight:600;font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ranksec a.crow .gmeta{flex:none;padding-left:14px;color:var(--muted);font-size:.8rem;text-align:right;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.ranksec a.crow .gmeta b{display:block;color:var(--accent2);font-weight:700}
.ranksec a.crow .gmeta .gy{display:block;color:var(--muted)}
.ranksec a.crow .chev{flex:none;margin-left:10px;color:var(--muted);transition:transform .15s ease}
.ranksec a.crow.g.open .chev{transform:rotate(180deg)}
.ranksec a.crow.g.open{background:var(--soft)}
.ranksec .cx .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 6px}
.ranksec .cx .wrow{display:inline-flex;align-items:baseline;gap:6px;padding:3px 10px;border:1px solid var(--line);
  border-radius:999px;background-color:var(--panel);text-decoration:none;color:var(--fg)}
.ranksec .cx .wrow:hover{border-color:var(--accent2)}
.ranksec .cx .wn{font-size:.84rem}
.ranksec .cx .wp{color:var(--accent2);font-weight:700;font-size:.84rem;font-variant-numeric:tabular-nums}
/* and the state or country, which ran into the average (Carter, 2026-09-29). */
@media (max-width:560px){ .ranksec a.crow.g .pk .lc{display:none} }
/* A phone drops "you #N": your chip is in the open row. */
@media (max-width:560px){ .ranksec a.crow .gyou{display:none} }
@media (max-width:560px){ details.mdl summary,a.crow{padding-left:13px;padding-right:13px} }
.ranksec .rmore{color:var(--accent2);font-weight:600;text-decoration:none}
/* A phone has no room for the model beside a ranked coaster. */
@media (max-width:560px){ .ranksec a.crow .md{display:none} }

/* ---- One coaster row, everywhere (Carter, 2026-09-28: "we have so many
   different types of tables ... make it similar to rankings"). The park
   page's row, which already reads like /rankings: a tick (or a rank) in a
   fixed slot, the name, what the page doesn't already say in grey beside it
   (park · place on a maker's page, the model on a park or a place), and on
   the right the status and years. A phone puts the grey part under the name
   and turns the status word into a dot. Built by CoasterHub.coasterRow. */
a.crow.std{align-items:center;padding:10px 16px}
a.crow.std .two{flex:1 1 auto;flex-direction:row;align-items:baseline;gap:9px}
a.crow.std .two .cn{flex:0 1 auto}
a.crow.std .two .pk{flex:0 1 auto;font-size:.8rem}
a.crow.std.gone .cn{color:var(--muted)}
a.crow .end{margin-left:auto;flex:none;display:flex;align-items:baseline;gap:12px;padding-left:10px;white-space:nowrap}
a.crow .life{flex:none;display:flex;align-items:baseline;gap:9px;white-space:nowrap}
a.crow .life .stat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
a.crow .life .stat.on{color:var(--accent2)}
a.crow .life .stat.off{color:var(--accent)}
a.crow .life .yrs{margin:0;padding:0;color:var(--fg);font-size:.8rem;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  a.crow.std{gap:7px;padding:9px 13px}
  a.crow.std .two{flex-direction:column;align-items:flex-start;gap:1px}
  a.crow.std .two .cn,a.crow.std .two .pk{max-width:100%}
  a.crow .life{gap:7px}
  a.crow .life .stat{font-size:0;line-height:0}
  a.crow .life .stat::before{content:"\25CF";font-size:.62rem;line-height:1}
}
/* ---- One group row: a model on a maker's page, a park on a place's page.
   The same shape as the coaster row — name, grey detail beside it (under it
   on a phone), your ridden/total and a chevron on the right. */
.mlist .mtwo{display:flex;flex:1 1 auto;flex-direction:row;align-items:baseline;gap:10px;min-width:0}
.mlist .mtwo .nm{flex:0 1 auto;font-size:.93rem}
.mlist .msub{flex:0 1 auto;min-width:0;font-size:.8rem}
@media (max-width:560px){
  .mlist .mtwo{flex-direction:column;align-items:flex-start;gap:1px}
  .mlist .mtwo .nm,.mlist .msub{max-width:100%}
}
/* Phone rows, tighter (Carter, 2026-09-29: "narrow these"): the name and its
   grey line sit close, and the row loses a little padding. */
@media (max-width:560px){
  .mlist details.mdl summary,a.crow.std{padding-top:7px;padding-bottom:7px}
  .mlist .mtwo,a.crow .two,.mlist .ct.vct{line-height:1.25}
  .ranksec a.crow{padding-top:7px;padding-bottom:7px;align-items:center}
}
/* The coasters inside an open group sit a step in, so they read as its. */
.mlist details.mdl[open] > a.crow{padding-left:28px}
@media (max-width:560px){ .mlist details.mdl[open] > a.crow{padding-left:22px} }
/* A link row for a maker or a place (/manufacturers, /locations): its count
   of models or parks in grey, operating / defunct on the right. */
a.crow.mk .yrs{color:var(--muted)}
/* A phone wraps a long name rather than cutting it — the right-hand column
   ("2 operating / 1 defunct") is wide and a name is the one thing you read. */
@media (max-width:560px){ a.crow.std .two .cn{white-space:normal;overflow:visible} }
/* A day out (CoasterHub.visitRow): profile's Recent visits and /credits'
   Rides tab. The list's own box, not .panel — profile has a .panel of its own. */
.vlist{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
a.crow .lap{color:var(--accent);font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums}
a.crow .nw{color:var(--accent2);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vlist .vfoot{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;padding:8px 16px 10px 28px;border-top:1px solid var(--soft)}
/* Your own day only (CoasterHub.visitRow o.edit): opens /log on it. Padded so
   a thumb can hit it; the negative margin keeps the line's height. */
.vlist .vedit{margin-left:auto;color:var(--accent2);font-weight:600;text-decoration:none;padding:8px 0;margin-top:-8px;margin-bottom:-8px}
.vlist .vedit:hover{text-decoration:underline}
/* Same for a group's name on a phone: wrap, don't cut. */
@media (max-width:560px){ .mlist .mtwo .nm{white-space:normal;overflow:visible} }
/* A ranked list reads like /rankings (Carter, 2026-09-28): no box, a
   hairline under each row, the bare number. */
.ranksec .panel{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.ranksec a.crow{padding-left:4px;padding-right:4px;border-bottom:1px solid var(--line)}
.ranksec a.crow:last-child{border-bottom:1px solid var(--line)}
/* An open row and its stats read as one grey block: no line between them. */
a.crow.open{background:var(--soft);border-bottom-color:transparent}
/* A tick in a group row (/parks: you have been there) sits in the coaster
   rows' tick slot. */
.mlist details.mdl summary .tick{flex:none;width:1.05em;text-align:center;color:var(--accent2);font-size:.82rem}
/* No ridden x/y on the right any more (Carter, 2026-09-28: "remove that across
   the board ... fill that space later"): the chevron holds the right edge. */
.mlist details.mdl summary .chev{margin-left:auto}
/* Mine and Global rows are one shape (Carter, 2026-09-28): the number, the
   ride, park · place beside it on a computer and UNDER it on a phone; Global
   adds avg / lists on the right. */
@media (max-width:560px){
  .ranksec a.crow .two{flex-direction:column;align-items:flex-start;gap:1px}
  .ranksec a.crow .two .cn{max-width:100%;white-space:normal}
  /* flex:none — the desktop rule's flex:1 1 0 collapses it to 0px tall in a column. */
  .ranksec a.crow .two .pk{flex:none;max-width:100%;font-size:.78rem}
}
.ranksec a.crow .rk{font-size:1.05rem;min-width:2.4em}
.ranksec a.crow{align-items:center}
@media (max-width:560px){
  .mlist .vct{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
  .mlist .vct i{display:none}
}
/* The grey line's park / place / model: links once the row is open (spans
   with data-href — a row is an <a>, so no <a> inside). Underlined like the
   name when open. */
a.crow.open .pk .lnk{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
a.crow.open .pk .lnk:hover{color:var(--accent2);text-decoration-color:currentColor}
/* No chevrons on group rows (Carter, 2026-09-28: "remove these arrows");
   the counts sit on the right instead. Visit rows too, for the same look. */
.mlist details.mdl summary .chev{display:none}
.mlist details.mdl summary .ct,a.crow.mk .ct{margin-left:auto;flex:none;padding-left:12px;color:var(--muted);font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){ .mlist details.mdl summary .ct,a.crow.mk .ct{font-size:.76rem} }
@media (max-width:560px){
  a.crow.mk .vct{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
  a.crow.mk .vct i{display:none}
}
/* The grey line clips at its own edge (overflow:hidden for the ellipsis), and a
   fraction of a pixel of rounding was shaving the last digit — "Sep 12, 2026" missing half its 6.
   A hair of room on the right. Same for the coaster rows' grey line. */
.mlist .msub,a.crow .pk{padding-right:.2em}
a.crow .pk .lap{margin-left:6px}

/* ---- 2026-10-01: the coaster page's touches, on every list page ---------
   Rider pictures in chips; your chip first, outlined on a computer and the
   same white as everyone's on a phone; "you #N" on Global rows on a phone too;
   long lists fold to "Show all N". */
.rface{flex:none;align-self:center;width:20px;height:20px;border-radius:999px;margin:-2px 0 -2px -4px;
  background-color:var(--soft);background-size:cover;background-position:center;background-origin:border-box;
  display:inline-flex;align-items:center;justify-content:center;font-size:.64rem;font-weight:700;color:var(--accent2);font-style:normal}
.ranksec .cx .wrow{align-items:center}
.ranksec .cx .wrow.me .wn,.who a.me{font-weight:600}
@media (min-width:561px){
  .ranksec .cx .wrow.me,.who a.me{border-color:var(--accent2);background-color:var(--soft)}
}
.ranksec a.crow .gmeta .gyou2{display:none;font-style:normal;color:var(--accent2);font-weight:600}
@media (max-width:560px){ .ranksec a.crow .gmeta .gyou2{display:block} }
.isfolded > .folded{display:none}
.foldp{margin:10px 0 0;font-size:.9rem}
/* A real button, easy to hit with a thumb (park critique, 2026-10-01). */
.foldp .rmore{display:block;text-align:center;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background-color:var(--panel);
  color:var(--accent2);font-weight:600;text-decoration:none}
.foldp .rmore:hover{border-color:var(--accent2)}

/* ---- The database pages, one template (critique, 2026-10-02) -------------
   Park, manufacturer, model, location and coaster pages share these. */
/* The add ring on an unridden row (CoasterHub.coasterRow opts.add): the park
   page's, now on every page. ::before widens the target past the glyph
   without moving the names. */
a.crow .tick.add,a.crow .tick.undo{position:relative;cursor:pointer}
a.crow .tick.add::before,a.crow .tick.undo::before{content:"";position:absolute;inset:-14px -12px}
a.crow .tick.add::after{content:"";display:inline-block;width:.7em;height:.7em;border:1.5px solid var(--line);border-radius:50%;vertical-align:-.05em}
a.crow .tick.add:hover::after{border-color:var(--accent2)}
a.crow .tick.busy{opacity:.4;pointer-events:none}
/* What a page adds under an opened row's facts (the park page's riders). */
.cx .cxmore{margin-top:12px}
/* Three tiles, one row, on a phone too: Operating · Defunct · one more. */
@media (max-width:680px){
  .tiles.row3{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .tiles.row3 .tile:last-child:nth-child(odd){grid-column:auto}
  .tiles.row3 .tile{padding:11px 12px}
  .tiles.row3 .tile b{font-size:1.15rem;white-space:nowrap}
}
/* "Park · Ohio, US": the kind in the hero's own grey, the parent a link. */
.hero .kindline{color:var(--muted)}
.hero .kindline i{font-style:normal}
.hero .kindline a{color:var(--accent2);font-weight:600;text-decoration:none}
.hero .kindline a:hover{text-decoration:underline}
/* A phone has the parent in the line above; the full trail is a desktop
   thing, and on a phone it wrapped to two lines. */
@media (max-width:560px){ #crumb.crumbs{display:none} }
/* The orange "Defunct" word was 3.6:1 on white; this one reads. */
:root[data-theme="light"] a.crow .life .stat.off{color:#93600f}
/* The ×3 re-ride count was 3.6:1 in amber on white (critique, 2026-10-02). */
:root[data-theme="light"] a.crow .lap{color:#93600f}