/* A case as a page: its head, its text, its pictures and videos; the cards a case is listed with.
   Used by the public pages (/cases, /cases/<slug>), by the console's Cases page, and written into a case that is taken
   away as a file (which sets the colours it needs itself). The halo is the motif: a thin ring with a sun in it. */
.case { max-width: 760px; margin: 0 auto; padding: 8px 0 24px; font-size: 17px; line-height: 1.75; color: var(--text); overflow-wrap: break-word; }
.case-ring { display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px; border-radius: 50%; border: 1.5px solid var(--amber);
  background: radial-gradient(circle, var(--amber) 0 2px, transparent 2.6px); }
.case-ring.big { width: 64px; height: 64px; margin: 0; border-width: 2px; opacity: .55; background: radial-gradient(circle, var(--amber) 0 6px, transparent 7px); }
.case-kicker { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.case-head { margin: 0 0 30px; }
.case-head h1 { margin: 0 0 14px; font-size: 42px; line-height: 1.12; font-weight: 680; letter-spacing: -.022em; text-transform: none; color: var(--text); }
.case-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.case-meta span::before { content: "·"; margin-right: 14px; color: var(--text-3); }
.case-halos, .case-card-halos { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.case-chip { display: inline-block; padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); white-space: nowrap; }
.case-lead { margin: 22px 0 0; font-size: 20px; line-height: 1.6; color: var(--text-2); }
.case-body > p, .case-body > ul, .case-body > ol, .case-body > blockquote { margin: 0 0 1.15em; }
.case-body h2 { margin: 2.1em 0 .6em; font-size: 27px; line-height: 1.25; font-weight: 660; letter-spacing: -.012em; text-transform: none; color: var(--text); }
.case-body h3 { margin: 1.8em 0 .5em; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--text); }
.case-body a { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.case-body ul, .case-body ol { padding-left: 1.35em; }
.case-body li { margin: .25em 0; }
.case-body li::marker { color: var(--text-3); }
.case-body blockquote { padding: 2px 0 2px 20px; border-left: 2px solid var(--amber); color: var(--text-2); }
.case-body blockquote p { margin: 0; }
/* a rule between two parts: a small halo */
.case-body hr { height: 24px; margin: 2.2em 0; border: 0;
  background: radial-gradient(circle at center, var(--amber) 0 1.5px, transparent 2px 6.5px, var(--amber) 7px 8px, transparent 8.6px) center / 24px 24px no-repeat; opacity: .8; }
.case-fig { margin: 2em 0; }
.case-fig.wide { margin-left: -140px; margin-right: -140px; }
.case-pics { display: flex; gap: 8px; align-items: flex-start; }
.case-pic { display: block; min-width: 0; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line); cursor: zoom-in; }
.case-pic img { display: block; width: 100%; height: auto; }
.case-fig video { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; border: 1px solid var(--line); }
.case-fig figcaption { margin: 10px 2px 0; display: grid; gap: 3px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.case-facts { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--text-3); letter-spacing: .01em; }
/* the case's day, filled in by the site (server/daychart.py): its halos as the review marked them, its weather hour by hour.
   Both are drawings on one time axis; on a narrow screen they keep their width and are pushed sideways. */
.case-day-box { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 12px 14px 8px; scrollbar-width: thin; }
.case-day-box + .case-day-box { margin-top: 8px; }
.cm { display: block; width: 100%; min-width: 720px; height: auto; font-family: var(--font); }
.cm text { fill: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.cm .cm-lab { fill: var(--text); font-size: 12.5px; font-weight: 600; }
.cm .cm-sub { fill: var(--text-3); font-size: 11px; }
.cm .cm-sub.ice { fill: rgb(var(--ice-rgb, 95, 216, 226)); }
.cm .cm-axis { fill: var(--text-3); font-size: 10.5px; }
.cm .cm-grid { stroke: var(--line); stroke-width: 1; }
.cm .cm-night { fill: var(--m-night, rgba(0, 0, 0, .3)); }
.cm .cm-sky { fill: var(--m-sky, rgba(255, 255, 255, .02)); }
.cm .cm-sun { fill: color-mix(in srgb, var(--amber) 22%, transparent); stroke: var(--amber); stroke-width: 1.4; stroke-linejoin: round; }
.cm .cm-display { fill: color-mix(in srgb, var(--amber) 22%, transparent); stroke: color-mix(in srgb, var(--amber) 70%, transparent); stroke-width: 1; }
.cm .cm-bar { fill: var(--amber); }
.cm .cm-bar.common { fill: color-mix(in srgb, var(--amber) 62%, transparent); }
.cm .cm-bar.rare { fill: var(--pink, #ff7fae); }
.cm .cm-ice { fill: rgb(var(--ice-rgb, 95, 216, 226)); }
.cm .cm-water { fill: rgb(var(--water-rgb, 206, 214, 226)); }
.cm .cm-icebound { stroke: rgb(var(--ice-rgb, 95, 216, 226)); stroke-opacity: .55; stroke-dasharray: 5 4; stroke-width: 1; }
.cm .cm-chance { fill: color-mix(in srgb, var(--amber) 45%, transparent); }
.cm .cm-chance.hi { fill: var(--amber); }
.cm .cm-rain { fill: var(--rain, #5aa9ff); }
.cm .cm-arrow { fill: var(--text-2); }
.case-day-table { width: 100%; margin: 12px 0 0; border-collapse: collapse; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.case-day-table th { padding: 6px 10px; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line-2); }
.case-day-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.case-day-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.case-day-table td:last-child { white-space: nowrap; }
.case-rare { margin-left: 6px; padding: 0 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pink, #ff7fae) 60%, transparent); color: var(--pink, #ff7fae); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.case-day-also { margin: 10px 2px 0; font-size: 14px; color: var(--text-2); }
/* a YouTube video: nothing of it is fetched until it is asked for */
.case-yt { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 46%, rgba(255, 190, 78, .16), transparent 34%), linear-gradient(160deg, #10151d, #05070b); }
.case-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-yt-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #e9eef4; text-decoration: none; font-size: 15px; text-align: center; }
.case-body .case-yt-play { color: #e9eef4; text-decoration: none; }      /* (not a link in the text) */
.case-yt-play small { display: block; margin-top: 2px; font-size: 12px; color: #8b97a6; letter-spacing: .06em; text-transform: uppercase; }
.case-yt-tri { width: 68px; height: 68px; border-radius: 50%; border: 1.5px solid #ffbe4e; position: relative; transition: transform .2s; }
.case-yt-tri::after { content: ""; position: absolute; left: 27px; top: 21px; border: 12px solid transparent; border-left: 20px solid #ffbe4e; border-right: 0; }
.case-yt-play:hover .case-yt-tri { transform: scale(1.06); }
.case-source { max-width: 760px; margin: 36px auto 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }

/* the page around a case, and the list of cases */
.cases-page { max-width: 1160px; }
.case-back { max-width: 760px; margin: 26px auto 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.case-back a { color: var(--text-2); text-decoration: none; }
.case-back a:hover { color: var(--text); }
.cases-hero { max-width: 760px; margin: 44px 0 30px; }
.cases-hero h1 { margin: 0 0 10px; font-size: 42px; line-height: 1.12; font-weight: 680; letter-spacing: -.022em; }
.cases-hero p:last-child { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.cases-none { margin: 30px 0; color: var(--text-3); }
.case-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.case-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; text-decoration: none; color: inherit; text-align: left; font: inherit; padding: 0; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .2s; }
.case-card:hover, .case-card:focus-visible { border-color: color-mix(in srgb, var(--amber) 60%, transparent); transform: translateY(-2px); outline: none; }
.case-card-img { display: grid; place-items: center; aspect-ratio: 3 / 2; background: #000; overflow: hidden; }
.case-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-card-txt { display: grid; align-content: start; gap: 6px; padding: 16px 18px 18px; min-width: 0; }
.case-card-txt time { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.case-card-txt b { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.005em; }
.case-card-sum { font-size: 14px; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.case-card-halos { margin-top: 6px; }
.case-card-state { justify-self: start; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--line-2); }
.case-card-state.pub { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, transparent); }

@media (max-width: 1100px) { .case-fig.wide { margin-left: 0; margin-right: 0; } }
@media (max-width: 640px) {
  .case { font-size: 16px; line-height: 1.7; }
  .case-head h1, .cases-hero h1 { font-size: 30px; }
  .case-lead { font-size: 17.5px; }
  .case-body h2 { font-size: 22px; }
  .case-body h3 { font-size: 18px; }
  .case-pics { flex-wrap: wrap; }
  .case-pic { flex: 1 1 100% !important; }
  .case-cards { grid-template-columns: minmax(0, 1fr); }
  .cases-hero { margin-top: 28px; }
}
@media print {
  header.top, footer, .case-back, .ann-bar, .op-tabs, .cs-bar, .cs-writing, .toast, .mpops { display: none !important; }
  .card.cs-paper { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
  .case { max-width: none; font-size: 11.5pt; line-height: 1.55; color: #000; }
  .case-head h1 { font-size: 24pt; }
  .case-body h2 { font-size: 15pt; }
  .case-body h3 { font-size: 12.5pt; }
  .case-lead, .case-meta, .case-fig figcaption, .case-body blockquote { color: #333; }
  .case-facts, .case-kicker, .case-chip { color: #555; }
  .case-fig, .case-fig.wide { margin: 14pt 0; break-inside: avoid; }
  .case-body h2, .case-body h3 { break-after: avoid; }
  .case-pic, .case-fig video, .case-yt { border-color: #bbb; }
  .case-day-box { overflow: visible; border-color: #bbb; background: none; }
  .cm { min-width: 0; }
  .case-body a { color: #000; }
}