/* THC Crossings: Crossing Watch ([thc_crossing_watch]) and the strip ([thc_crossing_bar]).
   The site's own tokens with the same fallbacks as THC Games; Core's Display switch flips them for dark
   (html[data-thc-theme="dark"]) and high contrast (html[data-thc-contrast="high"]). The five-step ramp is the
   plugin's own (pale sage, sage, leaf, amber, rust), restated for dark and high contrast; every label on it is at
   least 4.5:1 in all four modes, and the level is always written out (number and name), never colour alone.
   Sizes are relative so Core's text-size switch carries through. Phone first; no horizontal scroll at 360 px. */

.thc-cw, .thc-cw-strip {
  --cw-canvas: var(--wp--preset--color--base, #f7f1e4);
  --cw-raised: var(--wp--preset--color--accent-5, #fcf8ef);
  --cw-muted: var(--wp--preset--color--accent-4, #ece4d9);
  --cw-border: var(--wp--preset--color--accent-6, #d9d0bc);
  --cw-text: var(--wp--preset--color--contrast, #332d25);
  --cw-leaf: var(--wp--preset--color--accent-1, #5e7d53);
  --cw-deep: var(--wp--preset--color--accent-3, #3f5c3b);
  --cw-stroke: var(--wp--preset--color--control-stroke, #8a7f66);
  --cw-ink: #2b261f;          /* the sign's frame and the marker */
  --cw-head: var(--wp--preset--font-family--platypi, "THC Platypi", Georgia, serif);
  --cw-warn: #8a5a1f;
  --cw-rust: #9a3b1c;
  --cw-safe-bg: #fbf1e3;
  --cw-l1: #e4ead7; --cw-l1-fg: #263321;
  --cw-l2: #b9c7a5; --cw-l2-fg: #1f2b1a;
  --cw-l3: #4f6e45; --cw-l3-fg: #ffffff;
  --cw-l4: #d39a3a; --cw-l4-fg: #23170a;
  --cw-l5: #9a3b1c; --cw-l5-fg: #ffffff;
  color: var(--cw-text);
}
:root[data-thc-theme="dark"] .thc-cw, :root[data-thc-theme="dark"] .thc-cw-strip,
:root[data-theme="dark"] .thc-cw, :root[data-theme="dark"] .thc-cw-strip {
  --cw-ink: #efe8da;
  --cw-warn: #e0b45e;
  --cw-rust: #ec8a5f;
  --cw-safe-bg: #2c241b;
  --cw-l1: #2f3a2b; --cw-l1-fg: #dfe8d6;
  --cw-l2: #4e6145; --cw-l2-fg: #f3f6ee;
  --cw-l3: #8fb27f; --cw-l3-fg: #13200f;
  --cw-l4: #e0a94e; --cw-l4-fg: #1d1405;
  --cw-l5: #ec8a5f; --cw-l5-fg: #1f0b03;
}
:root[data-thc-contrast="high"] .thc-cw, :root[data-thc-contrast="high"] .thc-cw-strip {
  --cw-ink: #000000; --cw-warn: #6a3c00; --cw-rust: #8a1d00; --cw-safe-bg: #ffffff; --cw-stroke: #000000;
  --cw-l1: #ffffff; --cw-l1-fg: #000000;
  --cw-l2: #cfe3c8; --cw-l2-fg: #000000;
  --cw-l3: #1f4a1b; --cw-l3-fg: #ffffff;
  --cw-l4: #ffcf66; --cw-l4-fg: #000000;
  --cw-l5: #8a1d00; --cw-l5-fg: #ffffff;
}
:root[data-thc-contrast="high"][data-thc-theme="dark"] .thc-cw, :root[data-thc-contrast="high"][data-thc-theme="dark"] .thc-cw-strip {
  --cw-ink: #ffffff; --cw-warn: #ffd27a; --cw-rust: #ff9a6e; --cw-safe-bg: #000000; --cw-stroke: #ffffff;
  --cw-l1: #000000; --cw-l1-fg: #ffffff;
  --cw-l2: #1e3a19; --cw-l2-fg: #ffffff;
  --cw-l3: #a9e29a; --cw-l3-fg: #000000;
  --cw-l4: #ffd27a; --cw-l4-fg: #000000;
  --cw-l5: #ff9a6e; --cw-l5-fg: #000000;
}
.thc-cw .thc-cw-l1, .thc-cw-strip .thc-cw-l1 { background: var(--cw-l1); color: var(--cw-l1-fg); }
.thc-cw .thc-cw-l2, .thc-cw-strip .thc-cw-l2 { background: var(--cw-l2); color: var(--cw-l2-fg); }
.thc-cw .thc-cw-l3, .thc-cw-strip .thc-cw-l3 { background: var(--cw-l3); color: var(--cw-l3-fg); }
.thc-cw .thc-cw-l4, .thc-cw-strip .thc-cw-l4 { background: var(--cw-l4); color: var(--cw-l4-fg); }
.thc-cw .thc-cw-l5, .thc-cw-strip .thc-cw-l5 { background: var(--cw-l5); color: var(--cw-l5-fg); }

.thc-cw { margin-block: var(--wp--preset--spacing--sm, .5rem) 0; overflow-wrap: anywhere; }
.thc-cw *, .thc-cw *::before, .thc-cw *::after, .thc-cw-strip *, .thc-cw-strip *::before, .thc-cw-strip *::after { box-sizing: border-box; }
.thc-cw [hidden], .thc-cw-strip [hidden] { display: none !important; }
.thc-cw__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.thc-cw a { color: var(--cw-deep); }
.thc-cw button, .thc-cw input { font: inherit; }
.thc-cw :focus-visible, .thc-cw-strip :focus-visible { outline: 3px solid var(--cw-leaf); outline-offset: 2px; }
.thc-cw__small { font-size: .9rem; margin: .5rem 0 0; }

/* ---------- buttons ---------- */
.thc-cw__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: .45em 1.15em; border-radius: 999px; border: 1px solid var(--cw-leaf); background: var(--cw-leaf); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; }
.thc-cw a.thc-cw__btn:not(.thc-cw__btn--ghost) { color: #fff; }
.thc-cw__btn:hover { background: var(--cw-deep); border-color: var(--cw-deep); }
.thc-cw__btn--ghost, .thc-cw a.thc-cw__btn--ghost { background: transparent; color: var(--cw-deep); border-color: var(--cw-stroke); }
.thc-cw__btn--ghost:hover { background: var(--cw-muted); color: var(--cw-deep); }
:root[data-thc-theme="dark"] .thc-cw .thc-cw__btn:not(.thc-cw__btn--ghost) { color: #15130f; }
.thc-cw__link { background: none; border: 0; padding: .55rem .1rem; margin: 0; min-height: 44px; color: var(--cw-deep); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }

/* ---------- place ---------- */
.thc-cw__place { margin: 0 0 .7rem; }
.thc-cw__label { display: block; font-weight: 700; font-size: .95rem; margin: 0 0 .25rem; }
.thc-cw__row { display: flex; gap: .5rem; align-items: stretch; }
.thc-cw__input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: .4em .75em; font-size: 1.1rem; letter-spacing: .03em; border: 1px solid var(--cw-stroke); border-radius: 10px; background: var(--cw-raised); color: var(--cw-text); }
.thc-cw__row .thc-cw__btn { min-height: 48px; flex: none; }
.thc-cw__alt { margin: .1rem 0 0; font-size: .9rem; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; column-gap: .25rem; }
.thc-cw__altnote { color: var(--cw-text); }

/* ---------- the sign ---------- */
.thc-cw__sign { position: relative; background: var(--cw-raised); border: 3px solid var(--cw-ink); border-radius: 14px; padding: .55rem .7rem .7rem; box-shadow: inset 0 0 0 3px var(--cw-raised), inset 0 0 0 4px var(--cw-border); }
.thc-cw__for { margin: 0 0 .35rem; font-size: .85rem; line-height: 1.3; min-height: 2.6em; color: var(--cw-text); }
.thc-cw__brand { display: inline-block; margin-right: .35em; padding: .05em .45em; border-radius: 4px; background: var(--cw-ink); color: var(--cw-raised); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; vertical-align: .1em; }
.thc-cw__now { display: flex; align-items: center; gap: .7rem; min-height: 3.6rem; }
.thc-cw__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 10px; border: 2px solid var(--cw-ink); background: var(--cw-muted); color: var(--cw-text); font-family: var(--cw-head); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.thc-cw__nowtext { display: flex; flex-direction: column; min-width: 0; }
.thc-cw__name { font-family: var(--cw-head); font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem); font-weight: 700; line-height: 1.1; margin-bottom: .3rem; }
.thc-cw__of { font-family: inherit; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.thc-cw__meaning { font-size: .95rem; line-height: 1.3; min-height: 3.9em; }

/* The five steps: a row of labelled segments with a solid pointer over the current one. */
.thc-cw__steps { list-style: none; margin: .25rem 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.thc-cw__step { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3.5rem; padding: .3rem .1rem; border: 1px solid var(--cw-stroke); text-align: center; line-height: 1.05; }
.thc-cw__step:first-child { border-radius: 8px 3px 3px 8px; }
.thc-cw__step:last-child { border-radius: 3px 8px 8px 3px; }
.thc-cw__sn { font-family: var(--cw-head); font-size: 1.35rem; font-weight: 700; }
.thc-cw__sl { font-size: .72rem; font-weight: 700; letter-spacing: 0; margin-top: .15rem; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.thc-cw__step[aria-current] { z-index: 1; border-color: var(--cw-ink); outline: 3px solid var(--cw-ink); outline-offset: 0; box-shadow: 0 0 0 5px var(--cw-raised); }
.thc-cw__step[aria-current] .thc-cw__sn { font-size: 1.6rem; }
.thc-cw__step[aria-current]::before { content: ""; position: absolute; left: 50%; top: -19px; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid var(--cw-ink); }

.thc-cw__headline { margin: .65rem 0 0; font-size: 1.02rem; font-weight: 600; line-height: 1.35; min-height: 4.05em; }
.thc-cw__mode { margin: .4rem 0 0; display: inline-block; padding: .15rem .55rem; border: 1px dashed var(--cw-stroke); border-radius: 6px; font-size: .85rem; font-weight: 700; }

/* Loading state: the reading's text slots keep their size; a calm shimmer only where motion is welcome. */
.thc-cw.is-loading .thc-cw__badge { color: transparent; }
.thc-cw.is-loading .thc-cw__name, .thc-cw.is-loading .thc-cw__meaning, .thc-cw.is-loading .thc-cw__headline { color: transparent; background: linear-gradient(90deg, var(--cw-muted), var(--cw-raised), var(--cw-muted)); background-size: 200% 100%; border-radius: 6px; }
.thc-cw.is-loading .thc-cw__of { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .thc-cw.is-loading .thc-cw__name, .thc-cw.is-loading .thc-cw__meaning, .thc-cw.is-loading .thc-cw__headline { animation: thc-cw-shim 1.6s linear infinite; }
}
@keyframes thc-cw-shim { from { background-position: 100% 0; } to { background-position: -100% 0; } }
html[data-thc-motion="reduce"] .thc-cw * { animation: none !important; }

/* ---------- safety banner ---------- */
.thc-cw__safety { margin: .7rem 0 0; padding: .55rem .8rem; border: 2px solid var(--cw-border); border-left: 6px solid var(--cw-warn); border-radius: 8px; background: var(--cw-safe-bg); }
.thc-cw__safety p { margin: 0; line-height: 1.35; }
.thc-cw__safety.is-strong { border-color: var(--cw-rust); }
.thc-cw__safelead { font-weight: 800; font-size: 1.05rem; margin-bottom: .2rem !important; }
.thc-cw__safelead::before { content: "\26A0\FE0E\00A0"; }

/* ---------- details ---------- */
.thc-cw__detail { margin-top: .4rem; }
.thc-cw.is-loading .thc-cw__detail { min-height: 68rem; }
@media (min-width: 700px) { .thc-cw.is-loading .thc-cw__detail { min-height: 47rem; } }
.thc-cw.is-loading .thc-cw__detail > .thc-cw__block, .thc-cw.is-loading .thc-cw__detail > .thc-cw__error { display: none; }
.thc-cw__loading, .thc-cw__intro { margin: .8rem 0 0; }
.thc-cw__loading { display: none; }
.thc-cw.is-loading .thc-cw__loading { display: block; }
.thc-cw.is-loading .thc-cw__intro, .thc-cw.is-season .thc-cw__intro, .thc-cw.is-ready .thc-cw__intro { display: none; }
.thc-cw__error { margin: .8rem 0 0; padding: .55rem .8rem; border-left: 4px solid var(--cw-rust); background: var(--cw-raised); border-radius: 6px; font-weight: 600; }
.thc-cw__block { margin-top: 1.1rem; }
.thc-cw__h { font-size: 1.15rem; margin: 0 0 .35rem; font-family: var(--cw-head); }
.thc-cw__why { margin: 0; padding: 0; list-style: none; }
.thc-cw__why li { position: relative; padding: .2rem 0 .2rem 1.6rem; line-height: 1.4; }
.thc-cw__why li::before { position: absolute; left: .1rem; top: .2rem; width: 1.15rem; text-align: center; font-weight: 800; }
.thc-cw__why li.is-up::before { content: "\2191"; color: var(--cw-rust); }
.thc-cw__why li.is-down::before { content: "\2193"; color: var(--cw-deep); }
.thc-cw__why li.is-info::before { content: "\2022"; color: var(--cw-stroke); }
.thc-cw__groups { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.thc-cw__grp { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: .55rem; row-gap: .1rem; padding: .35rem .5rem; background: var(--cw-raised); border: 1px solid var(--cw-border); border-radius: 8px; }
.thc-cw__glvl { font-weight: 700; font-size: .85rem; white-space: nowrap; min-width: 6.4em; }
.thc-cw__gtxt { line-height: 1.3; min-width: 0; }
@media (max-width: 480px) { .thc-cw__grp { grid-template-columns: auto 1fr; } .thc-cw__gtxt { grid-column: 1 / -1; } }
.thc-cw__mini { display: inline-flex; gap: 2px; }
.thc-cw__cell { display: inline-block; width: .7rem; height: 1rem; border: 1px solid var(--cw-stroke); border-radius: 2px; }
.thc-cw__cell:not(.is-on) { background: transparent; }
.thc-cw__cell.is-may { background: repeating-linear-gradient(135deg, transparent 0 2px, var(--cw-border) 2px 4px); }
.thc-cw__out { margin: .45rem 0 0; font-size: .9rem; color: var(--cw-text); opacity: .85; }
.thc-cw__nights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-top: .4rem; }
@media (min-width: 620px) { .thc-cw__nights { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.thc-cw__night { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-height: 44px; padding: .4rem .25rem; border: 1px solid var(--cw-stroke); border-radius: 10px; background: var(--cw-raised); color: var(--cw-text); cursor: pointer; line-height: 1.15; }
.thc-cw__night:hover { background: var(--cw-muted); }
.thc-cw__night[aria-pressed="true"] { border: 3px solid var(--cw-ink); padding: calc(.4rem - 2px) calc(.25rem - 2px); }
.thc-cw__nd { font-weight: 700; font-size: .85rem; }
.thc-cw__nb { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 6px; font-family: var(--cw-head); font-weight: 700; font-size: 1.15rem; border: 1px solid var(--cw-stroke); }
.thc-cw__nn { font-size: .74rem; font-weight: 700; text-align: center; }
.thc-cw__nx { font-size: .76rem; text-align: center; }
.thc-cw__nightinfo { margin-top: .6rem; padding: .55rem .75rem; border: 1px solid var(--cw-border); border-radius: 10px; background: var(--cw-raised); }
.thc-cw__nh { margin: 0 0 .25rem; line-height: 1.35; }
.thc-cw__foot { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--cw-border); font-size: .9rem; }
.thc-cw__src { margin: 0; }
.thc-cw__actions { margin: .5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }

/* ---------- content sections ---------- */
.thc-cw__content { margin-top: 2rem; }
.thc-cw__sec { margin: 0 0 1.6rem; }
.thc-cw__sec h2 { font-family: var(--cw-head); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin: 0 0 .5rem; scroll-margin-top: 5rem; }
.thc-cw__sec h3 { font-size: 1.1rem; margin: 1.1rem 0 .3rem; }
.thc-cw__sec p { margin: 0 0 .7rem; line-height: 1.55; }
.thc-cw__sec ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.thc-cw__sec li { margin: .3rem 0; line-height: 1.5; }
.thc-cw__lede { padding: .5rem .75rem; border-left: 4px solid var(--cw-warn); background: var(--cw-raised); border-radius: 6px; }
.thc-cw__tablewrap { margin: .6rem 0 1rem; }
.thc-cw__ov { width: 100%; border-collapse: collapse; font-size: .92rem; }
.thc-cw__ov caption { text-align: left; font-weight: 700; padding: 0 0 .4rem; line-height: 1.35; }
.thc-cw__ov th, .thc-cw__ov td { text-align: left; vertical-align: top; padding: .5rem .45rem; border-bottom: 1px solid var(--cw-border); }
.thc-cw__ov thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--cw-stroke); }
.thc-cw__ovname { display: block; font-weight: 700; }
.thc-cw__ovplaces { display: block; font-weight: 400; font-size: .82rem; line-height: 1.35; margin-top: .1rem; }
.thc-cw__ovlvl { display: block; font-weight: 600; margin-top: .2rem; white-space: nowrap; }
.thc-cw__ovwhat { line-height: 1.4; }
.thc-cw__ovtiming { display: block; margin-top: .35rem; font-size: .86rem; line-height: 1.4; }
/* Phones: each region becomes a small card (no sideways scrolling). */
@media (max-width: 640px) {
  .thc-cw__ov, .thc-cw__ov caption, .thc-cw__ov tbody, .thc-cw__ov tr, .thc-cw__ov th, .thc-cw__ov td { display: block; width: 100%; }
  .thc-cw__ov thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .thc-cw__ov tr { border: 1px solid var(--cw-border); border-radius: 10px; margin: 0 0 .6rem; padding: .3rem .2rem; background: var(--cw-raised); }
  .thc-cw__ov th, .thc-cw__ov td { border: 0; padding: .25rem .5rem; }
  .thc-cw__ov td:nth-of-type(1)::before { content: "Usual now: "; font-weight: 400; }
  .thc-cw__ov td:nth-of-type(1) { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
  .thc-cw__ov td:nth-of-type(1) .thc-cw__ovlvl { display: inline; margin: 0; }
  .thc-cw__ov td:nth-of-type(2) .thc-cw__ovlvl { margin: 0; display: inline; }
  .thc-cw__ov td:nth-of-type(2)::before { content: "On the right night: "; }
  .thc-cw__ov td:nth-of-type(3)::before { content: "In season: "; font-weight: 700; }
}
.thc-cw__sources { margin: 1rem 0; }
.thc-cw__share { margin: 1.2rem 0; }

@media (max-width: 380px) { .thc-cw__sl { font-size: .66rem; } .thc-cw__steps { gap: 2px; } }

/* ---------- wider screens: the sign sits beside nothing, just roomier ---------- */
@media (min-width: 700px) {
  .thc-cw__sign { padding: .8rem 1.1rem 1rem; }
  .thc-cw__sl { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
  .thc-cw__step { min-height: 4rem; }
  .thc-cw__badge { width: 4.4rem; height: 4.4rem; font-size: 2.8rem; }
  .thc-cw__name { font-size: 2.4rem; }
  .thc-cw__meaning { font-size: 1.05rem; }
  .thc-cw__for, .thc-cw__meaning { min-height: 1.4em; }
  .thc-cw__headline { min-height: 2.7em; }
  .thc-cw__place { max-width: 34rem; }
}

/* ---------- the strip: one row (title, five cells, level) and one or two lines of reason ---------- */
.thc-cw-strip { margin: .5rem 0; padding: .45rem .7rem .5rem; border: 2px solid var(--cw-ink); border-radius: 10px; background: var(--cw-raised); }
.thc-cw-strip p { margin: 0; }
.thc-cw-strip__row { display: flex; align-items: center; gap: .5rem; min-height: 2rem; white-space: nowrap; }
.thc-cw-strip__title { flex: none; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: .15em .45em; border-radius: 4px; background: var(--cw-ink); color: var(--cw-raised); }
.thc-cw-strip__cells { flex: none; display: inline-flex; gap: 2px; }
.thc-cw-strip__cell { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.45rem; font-style: normal; font-size: .78rem; font-weight: 700; border: 1px solid var(--cw-stroke); border-radius: 3px; }
.thc-cw-strip__cell.is-cur { outline: 2px solid var(--cw-ink); outline-offset: 1px; position: relative; z-index: 1; }
.thc-cw-strip__level { font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.thc-cw-strip__reason { margin-top: .25rem !important; font-size: .88rem; line-height: 1.35; min-height: 4.05em; }
@media (min-width: 700px) { .thc-cw-strip__reason { min-height: 2.7em; } }
.thc-cw-strip__more { font-weight: 700; color: var(--cw-deep); white-space: nowrap; padding: .6rem .1rem; margin: -.6rem 0; }