/* Shared styling for the server-rendered trade show pages:
     /trade-shows/exhibitor-deadlines                        (the listing)
     /trade-shows/<slug>/<year>/exhibitor-deadlines          (one show's deadlines)
     /trade-shows/<slug>/<year>/planner                      (My Show Planner)
     /trade-shows/<slug>/<year>/exhibitor-manual             (documents for one show)
     /trade-shows/<slug>/<year>/international-visitor-help   (invitation letters)

   A FILE, not a <style> block in the controller. The site's CSP sets

       style-src 'self' <hashes>

   with no 'unsafe-inline', and those hashes are maintained for the shipped static HTML only - the
   guard that computes them walks src/main/resources/static and never sees a string built in Java.
   So every inline <style> emitted by a controller was refused by the browser and the pages rendered
   as unstyled text. The deadline detail page had been live on TEST in that state.

   A stylesheet served from /modules/ is covered by 'self' already, is cached across all three
   pages, and cannot drift out of a hash list when somebody edits a colour. */

:root {
  /* The main site's own palette, copied from styles.css rather than approximated. These pages
     used to be light-on-cream, which made them read as a different website the moment a visitor
     arrived from the homepage. */
  --charcoal-900: #06080A;
  --charcoal-800: #0A0C10;
  --charcoal-700: #14161B;
  --charcoal-600: #1A1E2B;
  --charcoal-500: #2A2E38;
  --coral-500: #FF6B4A;
  --white: #FFFFFF;
  --grey-100: #E8EDF2;
  --grey-400: #A0AAB5;
  /* The homepage's own blue - the one the client marquee already uses - so these pages introduce
     no fourth colour of their own. */
  --blue-400: #6F91FF;

  --ground: var(--charcoal-800);
  --card: var(--charcoal-700);
  --elevated: var(--charcoal-600);
  --rule: var(--charcoal-500);
  --accent: var(--coral-500);
  --ink: var(--white);
  --body: var(--grey-100);
  --muted: var(--grey-400);
  --link: var(--blue-400);
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--ground); color: var(--body);
  font: 16px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: var(--link); }

.wrap { max-width: 1000px; margin: auto; padding: 24px 20px 80px; }

.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: inherit; }

h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 18px; color: var(--ink); }
h2 { font-size: 1.2rem; margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); color: var(--ink); }

.lede { max-width: 70ch; color: var(--muted); }
.lede.closed { color: var(--accent); font-weight: 600; }
.block { margin-top: 34px; }
.empty { color: var(--muted); }
.muted { color: var(--muted); font-size: .85rem; }
.t { color: var(--muted); }

/* ---- urgency bands ---------------------------------------------------------------------
   The same five bands the homepage strip uses, and the same rule: the server decides which band
   a deadline is in, this file only decides what a band looks like.

   Lighter than the homepage strip's values on purpose. These same variables are used BOTH as a
   pill background behind white text AND as the text colour itself, and a mid-tone that reads
   well on white is close to invisible on #0A0C10. Each is the same hue lifted until it carries
   on the dark ground. */
.u-yellow  { --c: #E0A93B; }
.u-orange  { --c: #F0813F; }
.u-strong  { --c: #FF7A45; }
.u-red     { --c: #FF6B6B; }
.u-expired { --c: #7A88A3; }
.u-none    { --c: var(--blue-400); }

/* The stronger red the inner tiers use: ONLY n DAYS LEFT, DEADLINE TODAY and LAST DAY.
   Hotter and more saturated than .u-red so the escalation from URGENT is visible at a glance
   rather than only on comparison. Detail page only - the homepage strip has its own file and
   its own palette, and this class is not in it. */
.u-critical { --c: #FF2D20; }

/* ---- fact rail -------------------------------------------------------------------------- */

.rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin: 0 0 22px; padding: 0;
}
.rail div { background: var(--card); padding: 12px 14px; color: var(--body); }
.rail dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rail dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---- tables ----------------------------------------------------------------------------- */

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .95rem; background: var(--card); }
caption { text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: 8px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
tr.expired { opacity: .62; }
tr.expired th { text-decoration: line-through; }

.state {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .78rem;
  font-weight: 700; color: #0A0C10; background: var(--c, #6F91FF);
}

/* ---- calls to action -------------------------------------------------------------------- */

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta {
  display: inline-block; min-height: 44px; line-height: 26px; background: var(--accent);
  color: #12141a; padding: 9px 16px; border-radius: 8px; text-decoration: none;
  font-weight: 700; font-size: .9rem;
}
.cta-main { margin-top: 6px; }
.btn-quiet {
  min-height: 44px; background: transparent; border: 1px solid var(--rule); border-radius: 8px;
  padding: 8px 14px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--body);
}

.links ul { margin: 0; padding-left: 20px; }
.links li { margin: .4em 0; }

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

.shows {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
}
.shows li { background: var(--card); }
.shows a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 16px 18px;
  text-decoration: none; color: inherit;
}
.shows a:hover, .shows a:focus-visible { background: var(--elevated); }
.shows a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.shows .name { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.shows .go { margin-left: auto; color: var(--accent); font-size: .86rem; font-weight: 600; }

/* The organiser's own entry points, between the show name and the link to its deadline page.
   Somebody who already knows the rigging order is due wants the form, not a page telling them
   the date again - so the doors sit above the fold of the row rather than one click further in. */
.shows .show-row { border-bottom: 1px solid var(--rule); }
.official {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 18px 14px; background: var(--card);
}
.official-label {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-right: 2px;
}
.official-link {
  display: inline-block; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--link); text-decoration: none;
  background: var(--elevated);
}
.official-link:hover, .official-link:focus-visible {
  border-color: var(--accent); color: var(--accent);
}
.official-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .official { padding: 10px 14px 14px; }
  .official-label { flex: 1 1 100%; margin-bottom: 2px; }
}

/* ---- planner: readiness verdict and checklist ------------------------------------------- */

.verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px;
  border: 2px solid var(--rule); border-radius: 10px; background: var(--card);
  color: var(--body);
}
.verdict i { font-size: 1.2rem; }
.verdict-label { font-weight: 800; font-size: 1.05rem; }
.verdict-note { flex: 1 1 100%; color: var(--muted); font-size: .86rem; }
.v-on-track { border-color: #4caf50; }
.v-on-track i, .v-on-track .verdict-label { color: #6fcf7a; }
.v-attention-needed { border-color: var(--accent); }
.v-attention-needed i, .v-attention-needed .verdict-label { color: var(--accent); }
.v-action-required { border-color: #FF6B6B; }
.v-action-required i, .v-action-required .verdict-label { color: #FF6B6B; }

.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.task { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 13px 15px; }
.task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.task-status {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #0A0C10; background: var(--c, #6F91FF);
  padding: 3px 9px; border-radius: 999px;
}
.task-label { font-size: 1rem; }
.task-deadline { margin-top: 6px; font-size: .88rem; }
.task-count { font-weight: 700; color: var(--c, #6F91FF); }
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.task-reset { margin-top: 14px; }
.planner-note { margin: 0 0 10px; font-size: .84rem; color: var(--muted); }

select {
  min-height: 44px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--elevated); color: var(--body); font: inherit; font-size: .9rem;
}

.docs { margin: 0; padding-left: 20px; }
.docs li { margin: .45em 0; }
.badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: .72rem; background: rgba(255, 107, 74, .14); color: var(--accent);
}

/* ---- paid services and the notice that must travel with them ----------------------------
   Two services sit on the international-visitor page at the same price, and they are NOT the
   same thing: one is help with the organiser's own process, the other is a letter ET EXPO
   signs. So each gets its own bordered card rather than a shared list - a reader skimming has
   to be able to see where one offer ends and the next begins, because somebody who merges them
   in their head buys the wrong one.

   The notice block is deliberately the loudest thing above them. An invitation letter is not a
   visa, and that sentence has to be read before the price is, not after. */

.notice {
  border: 2px solid var(--accent); border-radius: 10px; background: var(--card);
  padding: 16px 18px;
}
.notice h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; color: var(--accent); }
.notice p { margin: 8px 0 0; max-width: 72ch; }

.service {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--card);
  padding: 4px 18px 18px;
}
.service h2 { margin-top: 18px; }
.service p { max-width: 72ch; }
.service .docs { color: var(--body); }

/* The fee, stated before anything is started rather than revealed at a checkout. */
.price {
  display: inline-block; margin: 0 0 4px; padding: 5px 12px; border-radius: 999px;
  background: var(--elevated); border: 1px solid var(--accent);
  color: var(--accent); font-weight: 800; font-size: 1.05rem; letter-spacing: .01em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- narrow screens ---------------------------------------------------------------------
   Tables become stacked rows rather than scrolling: an exhibitor checking a deadline on a phone
   at a show should not have to pan sideways to find the date. */
@media (max-width: 640px) {
  table, thead, tbody, th, td, tr { display: block; }
  thead { position: absolute; left: -9999px; }
  tr { border-bottom: 2px solid var(--rule); padding: 8px 0; }
  th, td { border: 0; padding: 4px 0; }
}

@media (max-width: 620px) {
  .task-actions { flex-direction: column; align-items: stretch; }
  select, .cta, .btn-quiet { width: 100%; text-align: center; }
}

@media (max-width: 560px) {
  .shows .go { margin-left: 0; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}