/* The result sheet: a commemorative ticket (記念乗車券) with a tear-off stub, notches on the
   perforation, a red serial number and a rank stamp. */
.report {
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--ground);
  color: var(--ink);
  overflow-y: auto;
}
.report::backdrop {
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.1) 0 0.9px, transparent 1.3px) 0 0 / 5px 5px,
    rgb(29 34 51 / 0.62);
}
.report[open] { animation: rise 0.28s ease both; }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }

/* The in-page yes/no (src/confirm.js), drawn like the result sheet. */
.confirm {
  width: min(420px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--ground);
  color: var(--ink);
}
.confirm::backdrop { background: rgb(29 34 51 / 0.62); }
.confirm[open] { animation: rise 0.2s ease both; }
.confirm-inner { padding: 20px clamp(14px, 4vw, 24px) 18px; }
.confirm-msg { margin: 0; line-height: 1.7; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.report-inner { padding: 18px clamp(12px, 4vw, 26px) 22px; }
.report-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.report-top h2 { margin: 0; font-size: 1.05rem; }
.report-close { min-height: 36px; padding: 0.3rem 0.8rem; }

.ticket {
  --stub: 44px;
  --notch: 10px;
  --pad: clamp(16px, 5vw, 26px);
  position: relative;
  overflow: hidden; /* the stamp lands from 1.9× scale; keep it from widening the dialog */
  margin-top: 14px;
  background:
    radial-gradient(circle, rgb(32 110 100 / 0.13) 0 0.8px, transparent 1.2px) 0 0 / 4px 4px,
    var(--ticket);
  border-radius: 4px;
  -webkit-mask:
    radial-gradient(circle at 0 calc(100% - var(--stub)), transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--stub)), transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 calc(100% - var(--stub)), transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--stub)), transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
}

.ticket-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px var(--pad) 9px;
  border-bottom: 1px solid rgb(29 34 51 / 0.22);
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.ticket-kind { padding: 0 6px; border: 1px solid currentColor; border-radius: 2px; font-size: 0.74rem; }
.ticket-no { margin-left: auto; font: 400 0.95rem var(--font-dot); color: var(--stamp); letter-spacing: 0.04em; }

.ticket-body { position: relative; padding: 12px var(--pad) 18px; }

.ticket-score { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.ticket-score strong { font: 400 clamp(3.2rem, 2.4rem + 4vw, 4.4rem)/0.95 var(--font-display); }
.ticket-score span { font-weight: 700; color: var(--ink-soft); }

.ticket-rank { margin: 10px 0 0; padding-right: 118px; font: 400 1.55rem/1.2 var(--font-display); font-feature-settings: "palt"; }
.ticket-quip { margin: 6px 0 0; padding-right: 100px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; text-wrap: balance; }

/* Ruled fields, as printed on a 乗車券 — not dashboard cards. */
.ticket-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 0;
  border-block: 1px solid rgb(29 34 51 / 0.3);
}
.ticket-meta div { padding: 6px 12px; }
.ticket-meta div + div { border-left: 1px solid rgb(29 34 51 / 0.3); }
.ticket-meta div:first-child { padding-left: 0; }
.ticket-meta dt { font-size: 0.74rem; color: var(--ink-soft); white-space: nowrap; }
.ticket-meta dd { margin: 0; font: 700 1.15rem/1.3 var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ticket-route { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; font-weight: 700; }
.ticket-label { padding: 0 6px; border: 1px solid currentColor; border-radius: 2px; font-size: 0.72rem; color: var(--ink-soft); }

.ticket-lines { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ticket-lines li { display: flex; align-items: center; gap: 4px; font: 600 0.8rem var(--font-num); font-variant-numeric: tabular-nums; }

.ticket .stamp { top: 10px; right: 16px; width: 116px; }

.ticket-stub {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--stub);
  padding: 0 var(--pad);
  border-top: 1.5px dashed rgb(29 34 51 / 0.38);
  font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.ticket-tag { overflow: hidden; text-overflow: ellipsis; }
/* The question after the hashtag goes whole, never cut mid-word, once the stub is too narrow;
   English runs longer, so it goes sooner. */
.ticket-stub { container-type: inline-size; }
@container (max-width: 280px) { .ticket-ask { display: none; } }
@container (max-width: 380px) { :lang(en) .ticket-ask { display: none; } }
.ticket-valid { color: var(--ink-soft); font-weight: 600; }
.ticket-date { margin-left: 6px; font-family: var(--font-dot); color: var(--ink); }

.share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.share .btn { flex: 1 1 auto; white-space: nowrap; }

.insight { margin-top: 18px; }
.insight h3 { margin: 0 0 6px; font-size: 0.9rem; }
.insight ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.insight li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; background: var(--surface); border-radius: 2px; }
.insight li span:first-child { font-weight: 700; }
.insight .rate { color: var(--ink-soft); font-size: 0.85rem; white-space: nowrap; }

.report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }

@media (max-width: 520px) {
  .ticket-rank, .ticket-quip { padding-right: 0; }
  .ticket-rank { padding-right: 76px; }
  .ticket .stamp { top: 6px; right: 8px; width: 82px; }
  .ticket-meta div { padding: 5px 8px; }
  .ticket-meta dd { font-size: 1rem; }
  .ticket-valid { display: none; }
}

@media (max-width: 400px) {
  .ticket-title { display: none; }
}

/* Support link after the share buttons: a small stamp-red accent, never a banner. */
.support-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.btn-support { min-height: 38px; border-color: var(--stamp); color: var(--stamp); }
.btn-support:hover { background: #fbeff0; }
.follow-cta { margin: 14px 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.follow-lead { margin: 0 0 8px; }
.follow-links { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.btn-follow { min-height: 38px; }

/* "Try another city": each button wears its own city's colours, whatever page it sits on. */
.hops { margin-top: 16px; padding: 12px; border: 1.5px dashed var(--ink-soft); border-radius: 4px; }
.hops-title { margin: 0 0 8px; font-weight: 700; font-size: 0.92rem; }
:lang(ja) .hops-title { font-family: var(--font-station); }
.hops-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.hop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--hop-edge);
  border-radius: 4px;
  background: var(--hop-bg);
  color: var(--hop-fg);
  text-decoration: none;
  transition: transform 0.08s ease;
}
.hop:hover { transform: translateY(-1px); }
.hop:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.hop-name { font: 700 1.15rem/1.2 var(--font-station); }
.hop-count { font: 600 0.8rem/1.2 var(--font-num); opacity: 0.85; white-space: nowrap; }
.hop-arrow { margin-left: auto; font-weight: 700; }
.hop-new {
  align-self: center; padding: 1px 6px; border-radius: 3px;
  background: var(--hop-edge); color: var(--hop-bg); font: 700 0.62rem/1.3 var(--font-num); letter-spacing: 0.05em;
}
.hop[data-city="tokyo"] { --hop-bg: #1d2233; --hop-fg: #fffdf7; --hop-edge: #c53d43; }
.hop[data-city="osaka"] { --hop-bg: #0d2a5c; --hop-fg: #ffd200; --hop-edge: #ffd200; }
.hop[data-city="nagoya"] { --hop-bg: #18403a; --hop-fg: #f0cd6a; --hop-edge: #c9971f; }
.hop[data-city="fukuoka"] { --hop-bg: #22295a; --hop-fg: #f2b705; --hop-edge: #d23a4c; }
.hop[data-city="sapporo"] { --hop-bg: #14385a; --hop-fg: #fbfdff; --hop-edge: #8cc4e8; }
.hop[data-city="kyoto"] { --hop-bg: #3b2950; --hop-fg: #f0d9a0; --hop-edge: #d9a43a; }
.hop[data-city="kobe"] { --hop-bg: #123c49; --hop-fg: #fffdf7; --hop-edge: #75bfc0; }
.hop[data-city="yokohama"] { --hop-bg: #13284f; --hop-fg: #fdf8ef; --hop-edge: #b5482f; }
.hop[data-city="shinkansen"] { --hop-bg: #102a46; --hop-fg: #fffdf7; --hop-edge: #e2ad4a; }
.hop[data-city="shitetsu"] { --hop-bg: #0c0e1a; --hop-fg: #e7e3f3; --hop-edge: #b49cff; }
.hop[data-city="kansai-shitetsu"] { --hop-bg: #2a0d12; --hop-fg: #f6ead6; --hop-edge: #c9a253; }
.hop[data-city="nagoya-shitetsu"] { --hop-bg: #1f0a0e; --hop-fg: #f6eae7; --hop-edge: #ff4257; }
.hop[data-city="tokyo-jr"] { --hop-bg: #0b6b2f; --hop-fg: #ffffff; --hop-edge: #8fd19e; }
.hop[data-city="kanto-jr"] { --hop-bg: #b4460a; --hop-fg: #ffffff; --hop-edge: #7fd39a; }
.hop[data-city="kita-kanto-jr"] { --hop-bg: #a3241c; --hop-fg: #ffffff; --hop-edge: #e9c46a; }
.hop[data-city="hokuriku"] { --hop-bg: #1f3b57; --hop-fg: #fdf8ec; --hop-edge: #d4af37; }
.hop[data-city="kanto-other"] { --hop-bg: #0b2a33; --hop-fg: #e4f6f3; --hop-edge: #4fd6c8; }
.hop[data-city="osaka-jr"] { --hop-bg: #0a3a86; --hop-fg: #ffffff; --hop-edge: #7fc4ff; }
.hop[data-city="nagoya-jr"] { --hop-bg: #6b2e00; --hop-fg: #fff3e6; --hop-edge: #f77321; }
.hop[data-city="sendai"] { --hop-bg: #0f3d2e; --hop-fg: #f3f7ee; --hop-edge: #8ccf6a; }

/* "How everyone did" (src/ui/chart.js): plain bars, the player's own in stamp red. */
.dist { margin: 16px 0 0; }
.dist figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; font-size: 0.82rem; color: var(--ink-soft); }
.dist figcaption b { color: var(--ink); font-size: 0.92rem; }
:lang(ja) .dist figcaption { font-family: var(--font-station); }
.dist-plot { min-height: 96px; }
.dist-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.dist .bar { fill: var(--rail-off); }
.dist .bar.mine { fill: var(--stamp); }
.dist-you { font: 700 11px var(--font-station); fill: var(--stamp); }
.dist-axis { font: 600 10px var(--font-num); fill: var(--ink-soft); }
.dist .bar { transition: fill 0.15s; }
.dist .hit { fill: transparent; cursor: pointer; }
.dist .bar.hot:not(.mine) { fill: var(--ink-soft); }
.dist-tip { font: 700 11px var(--font-num); fill: var(--ink); pointer-events: none; }

/* The player's own scores over time, under the record summary. */
.trend-plot { margin: 4px 0 8px; }
.trend-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-line { fill: none; stroke: var(--stamp); stroke-width: 2; stroke-linecap: round; }
.trend-dot { fill: var(--surface); stroke: var(--stamp); stroke-width: 1.5; cursor: pointer; transition: r 0.15s; }
.trend-dot.last, .trend-dot.hot { fill: var(--stamp); }
.trend-dot.hot { r: 5; }

/* The header's shrine-game card, repeated on the result sheet. */
.other-game-report { max-width: none; margin: 16px 0 0; }

/* The player's own past results: a quiet ledger under the score chart. */
.history { margin-top: 16px; padding: 12px; border: 1.5px solid var(--ink-soft); border-radius: 4px; }
.history h3 { margin: 0 0 6px; font-size: 0.92rem; }
.history-sum { margin: 0 0 8px; font-size: 0.88rem; color: var(--ink-soft); }
.history-sum b { color: var(--ink); font: 700 1rem/1 var(--font-num); }
.history-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.history-list li { display: flex; gap: 12px; align-items: baseline; padding: 4px 8px; border-radius: 3px; }
.history-list li.is-current { background: #fbf3dc; font-weight: 700; }
.history-date { min-width: 4.5em; color: var(--ink-soft); }
.history-score { font-family: var(--font-num); }
.history-list small { margin-left: auto; color: var(--stamp); }
.history-note { margin: 8px 0 0; font-size: 0.75rem; color: var(--ink-soft); }