/*
 * Your dates — the visitor side of the trip dates engine.
 *
 * WHAT THIS FILE IS FOR
 * =====================
 * assets/tripdates.js works out what the site can honestly say about two
 * specific dates, and hangs a `basis` on every value it returns: measured,
 * computed, average or unknown. This stylesheet is the other half of that
 * promise. It has to make those four look like four different kinds of thing
 * on a page a visitor is scanning, not reading.
 *
 * THE REBUILD, AND WHY
 * The page was right and unreadable. 43 paragraphs, 120 list items, and the
 * words "average for these dates" printed under six cards in a row. The facts
 * were never the problem. The shape was. So:
 *
 *   1. A number gets a picture. Temperature, sea, sun, rain, crowds, price and
 *      wind each carry an icon from assets/icons.css. Never another line.
 *   2. A qualifier is said once for a group. One .sg-cap above six numbers.
 *   3. Prose about a relationship becomes a graphic. The sea cooling between
 *      two months is .sg-shift. The evenings drawing in is .td-sunchart.
 *   4. Three sentences, then a heading, a list, a picture or a graphic.
 *   5. Every word that was doing no work is gone. Every fact stayed.
 *
 * THE FOUR MARKS
 * They still appear on everything, because they are the point of the page.
 * They are now small, quiet, and said once per group instead of once per row.
 * Each has its own SHAPE as well as its own colour, so the meaning survives
 * greyscale, colour blindness and forced-colours mode:
 *
 *   Exact        filled disc
 *   Established  filled square
 *   Typical      ringed disc
 *   Not known    hollow dashed ring
 *
 * COLOURS AND FACES ARE NOT INVENTED HERE. Everything comes from the six
 * brand colours and three faces already declared in style.css:
 *   --deep --pine --shallow --wash --sandy --bougie
 *   --font-display (Fraunces) --font-sans (Inter Tight) --font-mono (JetBrains)
 * Where a colour has to survive dark mode it uses the remapped tokens
 * (--text, --text-soft, --line, --bg-alt, --aegean, --sea) rather than a raw
 * brand hex, because --deep on a dark background is invisible.
 *
 * Bougainvillea appears three times and no more: a correction to another page
 * on this site, a danger note on a beach, and the focus ring.
 */

.td {
  --td-r: 18px;
  --td-r-sm: 12px;
  --td-gap: 18px;
  --td-edge: color-mix(in srgb, var(--text-soft) 22%, transparent);
  --td-face: var(--bg-alt);
  --td-quiet: color-mix(in srgb, var(--sandy) 34%, var(--bg));
  /* The dot on the "typical" mark. Warm sand on paper. style.css remaps
     --sandy to a near-black blue in the dark theme, where a sand dot on a dark
     panel disappears, so the mix flips towards the soft text colour there. The
     word beside it never changes, and never depended on the dot. */
  --td-mark-avg: color-mix(in srgb, var(--sandy) 88%, var(--text-soft));
}
:root[data-theme="dark"] .td { --td-mark-avg: color-mix(in srgb, var(--sandy) 22%, var(--text-soft)); }

/* ==========================================================================
   1. THE DATE FIELDS
   They sit in the photographic hero, so they are drawn light-on-dark. Nothing
   else in the hero competes with them: no secondary links, no chips, no stats.
   ========================================================================== */

.td-ask {
  margin: 30px 0 0;
  max-width: 640px;
}

.td-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.td-field {
  flex: 1 1 190px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-field label {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.td-field input {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  min-height: 52px;
  width: 100%;
  padding: 12px 14px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--td-r-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.td-field input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; cursor: pointer; }
.td-field input:hover { border-color: rgba(255, 255, 255, .6); }
.td-field input:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
  background: rgba(255, 255, 255, .2);
}

.td-go {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--deep);
  background: #fff;
  border: 1px solid #fff;
  border-radius: var(--td-r-sm);
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.td-go:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.td-go:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }

.td-formnote {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}
.td-formnote b { color: #fff; font-weight: 600; }

.td-err {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--td-r-sm);
  background: rgba(200, 53, 95, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .84rem;
}

/* This sits on a photograph, so .78 white was legible over the dark water and
   marginal over the sky. It is also the live region a screen reader hears, so
   it has to be readable in both senses. */
.td-said {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.55;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  max-width: 56ch;
}

/* Submitting the form scrolls to #td-answer, which is a plain div and so was
   not covered by the anchor rule in nav.css. Without this the masthead sits on
   top of the first line of the answer, which is the line with the dates in it. */
#td-answer { scroll-margin-top: calc(var(--mast-h, 72px) + 20px); }

.td-ask .td-err  { margin-top: 14px; }
.td-ask .td-said { margin-top: 18px; }
.td-ask .td-formnote { margin-top: 16px; }

/* ==========================================================================
   2. THE FOUR MARKS
   One shape, one size, four readings. Small enough to sit at the end of a row
   without being read as a heading, distinct enough to be recognised after
   seeing it twice. No pill, no border, no background: those made twenty
   identical badges shout in unison.
   ========================================================================== */

/* A warning inside a callout carries its own mark, because the warnings are a
   mix of established fact and monthly average. It sits under the sentence. */
.sg-callout .td-basis { margin-top: 7px; }

.td-basis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-soft);
  white-space: nowrap;
  vertical-align: middle;
}
.td-basis::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

/* Exact. A filled disc: the only solid shape on the page. */
.td-basis[data-basis="computed"]::before { background: var(--sea); }
.td-basis[data-basis="computed"] { color: var(--aegean); }

/* Established. A filled square, so the difference survives greyscale. */
.td-basis[data-basis="measured"]::before {
  background: color-mix(in srgb, var(--pine) 78%, var(--text));
  border-radius: 2px;
}

/* Typical. A ringed disc: something inside something. Warm sand, because it is
   the comfortable label and the dangerous one. */
.td-basis[data-basis="average"]::before {
  background: var(--td-mark-avg);
  box-shadow: inset 0 0 0 2.5px var(--bg-alt), 0 0 0 1px var(--td-mark-avg);
}

/* Not known. Hollow and dashed, because the shape is deliberately unfinished. */
.td-basis[data-basis="unknown"]::before {
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--text-soft) 72%, transparent);
}

/* A mark standing over a whole group rather than beside one row. */
.td-mark-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 10px;
}
.td-mark-row .sg-cap { margin: 0; }

/* The legend. Rendered from TripDates.BASIS so the page never invents wording. */
.td-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px 22px;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--td-r);
  background: var(--td-quiet);
}
.td-legend > div { display: flex; flex-direction: column; gap: 7px; }
.td-legend p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.td-legend .td-basis { align-self: flex-start; }

/* ==========================================================================
   3. PANELS
   Every answer block is a panel. The panel header carries the mark for the
   whole block; a row inside carries its own only when it differs.
   ========================================================================== */

.td-panel {
  background: var(--td-face);
  border: 1px solid var(--line);
  border-radius: var(--td-r);
  padding: 24px;
  margin: 0 0 var(--td-gap);
  box-shadow: var(--shadow);
}
.td-panel > *:last-child { margin-bottom: 0; }

.td-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 6px;
}
.td-head h2,
.td-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.14;
}
.td-head h2 { font-size: clamp(1.35rem, 4.2vw, 1.8rem); }
.td-head h3 { font-size: 1.12rem; }
.td-head .ic { color: var(--ic-key); vertical-align: -.1em; margin-right: .28em; }

.td-why {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 70ch;
}
.td-panel p { font-family: var(--font-sans); }

/* The exact panel gets an edge nothing else gets. */
.td-exact {
  border-color: color-mix(in srgb, var(--sea) 55%, var(--line));
  box-shadow: var(--shadow), inset 3px 0 0 var(--sea);
}

/* A sub-heading inside a panel. Always carries an icon. */
.td-sub-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--text);
}
.td-sub-h .ic { color: var(--ic-key); flex: none; vertical-align: 0; }
.td-panel > .td-sub-h:first-of-type { margin-top: 18px; }

/* The workaday paragraph. There are far fewer of these than there were. */
.td-para {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.62;
  color: var(--text);
  max-width: 66ch;
}
.td-note {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 70ch;
}
.td-more {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--text-soft);
}
.td-m {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: .92em;
  letter-spacing: -.01em;
}

/* ==========================================================================
   4. THE ANSWER, AT THE TOP
   Dates, one sentence, six numbers with six icons and one caption over the
   lot. This block is the twenty-second read and nothing else may get in
   front of it.
   ========================================================================== */

.td-lead-wrap {
  padding: 28px 26px;
  border-radius: var(--td-r);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--sea) 13%, var(--bg-alt)),
    var(--bg-alt) 62%);
  border: 1px solid var(--line);
  margin: 0 0 var(--td-gap);
}

.td-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 14px;
}
.td-when .ic { color: var(--ic-key); vertical-align: -.2em; }
.td-when b {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text);
}
.td-nights {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text);
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sea) 16%, var(--bg-alt));
  border: 1px solid color-mix(in srgb, var(--sea) 34%, transparent);
}

.td-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5.2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  max-width: 20ch;
  color: var(--text);
}
.td-lead-sub {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 52ch;
}

/* Six numbers, six equal columns. .sg-stats uses auto-fit, and the caption
   spanning 1 / -1 occupies every track it generates, so nothing collapses and
   six cards end up sitting in the left half of a ten column grid. The count is
   known here, so it is stated here. */
.td-lead-wrap .sg-stats {
  margin: 20px 0 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.td-lead-wrap .sg-stat { background: color-mix(in srgb, var(--bg-alt) 84%, transparent); }
.td-lead-wrap .td-actions { margin-top: 22px; }

/* Crowds and prices are the site's own words, not numbers, so they get cards
   of their own rather than being crushed into the number row where they used
   to wrap to three lines and break the grid. */
.td-wordstats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.td-wordcap { margin: 10px 0 0; }
.td-word {
  flex: 1 1 220px;
  max-width: 420px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 4px 11px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--ic-radius, 18px);
  background: color-mix(in srgb, var(--bg-alt) 84%, transparent);
}
.td-word > .ic {
  color: var(--ic-key);
  width: 1.35em;
  height: 1.35em;
  vertical-align: 0;
  grid-row: 1 / span 2;
  margin-top: .1em;
}
.td-word-k {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.td-word-v {
  font-family: var(--font-sans);
  font-size: .97rem;
  line-height: 1.4;
  color: var(--text);
}

/* ==========================================================================
   5. THE MONTHS, WHEN A TRIP CROSSES ONE
   Two numbers and an arrow between them beats a sentence about two numbers.
   ========================================================================== */

.td-shifts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}
.td-shift-box {
  flex: 1 1 244px;
  max-width: 340px;
  padding: 14px 16px 10px;
  border: 1px solid var(--line);
  border-radius: var(--ic-radius, 18px);
  background: var(--bg);
}
.td-shift-box .sg-cap { margin: 0 0 2px; }
.td-shift-box .sg-shift { margin: 4px 0 0; }

.td-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.td-month {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--ic-radius, 18px);
  background: var(--bg);
}
.td-month-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: 0 0 7px;
}
.td-month-h .ic { color: var(--ic-key); vertical-align: -.16em; }
.td-month-h b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text);
}
.td-month-h span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--text-soft);
}
.td-month p {
  margin: 0 0 9px;
  font-family: var(--font-sans);
  font-size: .87rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.td-month a {
  font-family: var(--font-sans);
  font-size: .84rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sea) 55%, transparent);
}
.td-month a:hover { border-bottom-color: var(--aegean); }
.td-month a:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; }

/* ==========================================================================
   6. SUNSET
   Thirty-one evenings used to be thirty-one sentences. They are one picture
   and one table now. The band is the daylight: it narrows from both ends as
   the trip runs on, which is the thing the sentences were trying to say.
   ========================================================================== */

.td-sunends {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.td-sunend {
  flex: 1 1 230px;
  max-width: 480px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 11px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--ic-radius, 18px);
  background: var(--bg);
}
.td-sunend > .ic {
  color: var(--ic-key);
  width: 1.5em;
  height: 1.5em;
  vertical-align: 0;
  grid-row: 1 / span 3;
}
.td-sunend-k {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.td-sunend-v {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--text);
}
.td-sunend-d {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-soft);
}

/* The plot is drawn to the range of its own data, so the two hour swing fills
   the box instead of hiding inside a twelve hour one. The axis is two figures,
   top and bottom, because two is all this chart needs. */
.td-sunplot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 10px;
}
.td-sunplot-ax {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: .68rem;
  color: var(--text-soft);
}
.td-sunchart {
  display: block;
  width: 100%;
  height: 120px;
  overflow: visible;
}
.td-sun-line {
  fill: none;
  stroke: var(--aegean);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.td-sun-dot { fill: none; stroke: var(--aegean); stroke-width: 7; stroke-linecap: round; }
.td-sun-base { fill: none; stroke: var(--line); stroke-width: 1; }

/* Every evening, minute by minute. A table, because six numbers a day in
   sentences is what made this page four screens long. */
.td-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; }
/* Two classes on purpose. `.td, .td * { min-width: 0 }` further down this file
   is the same specificity and comes later, so a single class here would lose
   and the columns would squash instead of the box scrolling. */
.td .td-table {
  width: 100%;
  min-width: 430px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: .78rem;
}
.td-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 8px;
  font-family: var(--font-sans);
  font-size: .78rem;
  color: var(--text-soft);
}
.td-table th,
.td-table td {
  padding: 7px 10px 7px 0;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.td-table th {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.td-table th:first-child,
.td-table td:first-child { text-align: left; padding-left: 0; }
.td-table td:first-child { color: var(--text); }
.td-table td { color: var(--text-soft); }
.td-table td.is-set { color: var(--text); font-weight: 500; }
.td-table tbody tr:last-child th,
.td-table tbody tr:last-child td { border-bottom: 0; }

.td-fold {
  border: 1px solid var(--line);
  border-radius: var(--ic-radius, 18px);
  background: var(--bg);
  padding: 0 16px;
  margin: 0 0 12px;
}
.td-fold > summary {
  cursor: pointer;
  padding: 13px 0;
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
}
.td-fold > summary::-webkit-details-marker { display: none; }
.td-fold > summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--text-soft);
  border-bottom: 1.6px solid var(--text-soft);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.td-fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.td-fold > summary .ic { color: var(--ic-key); vertical-align: 0; flex: none; }
.td-fold > summary:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; }
.td-fold[open] > summary { border-bottom: 1px solid var(--line); }
.td-fold > .td-tablewrap { margin: 12px 0; }

/* ==========================================================================
   7. WHAT IS ON
   A date, an icon, a name, a line. Not a paragraph with a date in it.
   ========================================================================== */

.td-evs { display: grid; gap: 12px; margin: 0 0 14px; }
.td-ev {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 13px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--ic-radius, 18px);
  background: var(--bg);
}
.td-ev > .ic {
  color: var(--ic-key);
  width: 1.4em;
  height: 1.4em;
  vertical-align: 0;
  grid-row: 1 / span 3;
  margin-top: .18em;
}
.td-ev-when {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--text-soft);
}
.td-ev h4 {
  margin: 2px 0 5px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.2;
  color: var(--text);
}
.td-ev h4 span {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--text-soft);
  margin-left: 8px;
}
.td-ev > p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .89rem;
  line-height: 1.58;
  color: var(--text-soft);
  max-width: 66ch;
}
.td-ev .td-flag { grid-column: 2; }
.td-ev .td-basis { grid-column: 2; justify-self: start; margin-top: 6px; }

.td-flag {
  margin: 9px 0 0;
  padding: 10px 13px;
  border-radius: var(--td-r-sm);
  font-family: var(--font-sans);
  font-size: .83rem;
  line-height: 1.55;
  max-width: 70ch;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.td-flag > .ic { flex: none; margin-top: .16em; }
.td-flag b { font-weight: 600; }
.td-flag.is-shut {
  background: color-mix(in srgb, var(--sandy) 55%, var(--bg-alt));
  color: var(--text);
}
.td-flag.is-shut > .ic { color: color-mix(in srgb, var(--sandy) 25%, var(--text)); }
.td-flag.is-note {
  background: var(--td-quiet);
  color: var(--text-soft);
  border: 1px solid var(--line);
}
.td-flag.is-note > .ic { color: var(--text-soft); }
/* Bougainvillea, one of three: a correction to another page on this site. */
.td-flag.is-fix {
  background: color-mix(in srgb, var(--bougie) 10%, var(--bg-alt));
  border-left: 3px solid var(--bougie);
  color: var(--text);
}
.td-flag.is-fix > .ic { color: var(--bougie); }

/* ==========================================================================
   8. BEACHES FOR THE WIND
   The one question this page exists to answer on a windy morning, so the
   beaches get their photographs. Where the guide has no photograph of a beach
   the card gets a drawn block in the brand colours instead. Nothing was
   downloaded to fill a gap.
   ========================================================================== */

.td-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 0 0 6px;
}
.td-side {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--ic-radius, 18px);
  background: var(--bg);
}
.td-side > *:last-child { margin-bottom: 0; }
.td-side .td-sub-h { margin-top: 0; }
.td-side p {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: .87rem;
  line-height: 1.58;
  color: var(--text-soft);
}
.td-side h4 {
  margin: 16px 0 8px;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.td-bcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.td-bcard {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--td-r-sm);
  background: var(--bg-alt);
  text-decoration: none;
  color: var(--text);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.td-bcard:hover { transform: translateY(-3px); border-color: var(--sea); box-shadow: var(--shadow); }
.td-bcard:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; }
.td-bcard-im {
  display: block;
  aspect-ratio: 3 / 2;
  background: color-mix(in srgb, var(--shallow) 14%, var(--bg-alt));
  overflow: hidden;
}
.td-bcard-im img,
.td-bcard-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The drawn beach, for the eighteen with no photograph. */
.ph-sea  { fill: color-mix(in srgb, var(--shallow) 42%, var(--bg-alt)); }
.ph-sand { fill: color-mix(in srgb, var(--sandy) 72%, var(--bg-alt)); }
.ph-pine { fill: color-mix(in srgb, var(--pine) 62%, var(--bg-alt)); }
.ph-wave {
  fill: none;
  stroke: color-mix(in srgb, var(--shallow) 70%, var(--bg-alt));
  stroke-width: 1.6;
  stroke-linecap: round;
}
.td-bcard-bd { display: block; padding: 10px 12px 12px; }
.td-bcard-bd b {
  display: block;
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 6px;
}
.td-bfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 11px;
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--text-soft);
}
.td-bfacts .ic { color: var(--ic-key); width: .95em; height: .95em; vertical-align: -.12em; margin-right: 4px; }
/* Bougainvillea, two of three: an undertow that can kill somebody. */
.td-bcard .td-danger {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--text);
}
.td-bcard .td-danger .ic { color: var(--bougie); flex: none; margin-top: .1em; }

/* A beach that is not the answer today needs a name and a reason, not a card. */
.td-blist {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.td-blist a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--text-soft) 42%, transparent);
  background: transparent;
  font-family: var(--font-sans);
  font-size: .82rem;
  color: var(--text-soft);
  text-decoration: none;
}
.td-blist a:hover { border-style: solid; border-color: var(--sea); color: var(--text); }
.td-blist a:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; }
.td-blist .ic { flex: none; }

/* ==========================================================================
   9. WHAT IS OPEN AND WHAT IS SHUT
   Two lists. A tick and a cross. The status word is written out beside the
   icon, so nothing depends on the icon or on its colour.
   ========================================================================== */

/* A group of one beside a group of ten left half the panel empty, so a long
   group takes the whole row and sets its own services in columns instead. */
.td-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin: 0 0 18px;
}
.td-group.is-wide { grid-column: 1 / -1; }
.td-group.is-wide .td-svc { columns: 300px; column-gap: 30px; }
.td-group.is-wide .td-svc li { break-inside: avoid; }
.td-group {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--ic-radius, 18px);
  background: var(--bg);
}
.td-group-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
}
.td-group-h .ic { flex: none; vertical-align: 0; width: 1.25em; height: 1.25em; }
.td-group-h .n {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-soft);
}
.td-group.is-open  .td-group-h .ic { color: color-mix(in srgb, var(--pine) 82%, var(--text)); }
.td-group.is-shut  .td-group-h .ic { color: var(--text-soft); }
.td-group.is-part  .td-group-h .ic { color: color-mix(in srgb, var(--sandy) 20%, var(--text)); }
.td-group.is-change .td-group-h .ic { color: var(--aegean); }
.td-group.is-unknown .td-group-h .ic { color: var(--text-soft); }

.td-svc { list-style: none; margin: 0; padding: 0; }
.td-svc li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.td-svc li:last-child { border-bottom: 0; padding-bottom: 0; }
.td-svc li:first-child { padding-top: 0; }
.td-svc-name {
  display: block;
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.td-svc-note {
  display: block;
  font-family: var(--font-sans);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.td-svc-note b { color: var(--text); font-weight: 600; }
.td-statuses { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.td-then { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .06em; color: var(--text-soft); }

.td-status {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.td-status[data-s="open"],
.td-status[data-s="most"] {
  color: var(--text);
  background: color-mix(in srgb, var(--pine) 20%, var(--bg-alt));
  border-color: color-mix(in srgb, var(--pine) 45%, transparent);
}
.td-status[data-s="partial"],
.td-status[data-s="starting"],
.td-status[data-s="thinning"] {
  color: var(--text);
  background: color-mix(in srgb, var(--sandy) 74%, var(--bg-alt));
  border-color: color-mix(in srgb, var(--sandy) 92%, var(--text-soft));
}
.td-status[data-s="shut"] {
  color: var(--text-soft);
  background: color-mix(in srgb, var(--text-soft) 12%, var(--bg-alt));
  border-color: color-mix(in srgb, var(--text-soft) 34%, transparent);
}
.td-status[data-s="unknown"] {
  color: var(--text-soft);
  background: transparent;
  border-color: color-mix(in srgb, var(--text-soft) 46%, transparent);
  border-style: dashed;
}

/* The four things this tool will not guess at. A dashed edge, because the
   shape is deliberately unfinished. */
.td-notknown {
  list-style: none;
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: var(--ic-radius, 18px);
  border: 1px dashed color-mix(in srgb, var(--text-soft) 42%, transparent);
  background: transparent;
}
.td-notknown li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 11px;
  margin: 0 0 13px;
}
.td-notknown li:last-child { margin-bottom: 0; }
.td-notknown > li > .ic { color: var(--text-soft); grid-row: 1 / span 2; margin-top: .2em; vertical-align: 0; }
.td-notknown b {
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}
.td-notknown span {
  font-family: var(--font-sans);
  font-size: .81rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ==========================================================================
   10. THE SHAPE OF THE TRIP
   .sg-steps draws the numbered spine. Only the link row is local.
   ========================================================================== */

.td-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.td-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  font-family: var(--font-sans);
  font-size: .84rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.td-links a .ic { color: var(--ic-key); flex: none; }
.td-links a:hover { border-color: var(--sea); transform: translateY(-2px); }
/* Bougainvillea, three of three: the focus ring, so it is always findable. */
.td-links a:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; }

/* ==========================================================================
   11. ACTIONS
   ========================================================================== */

.td-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.td-btn,
.td-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.td-btn:hover,
.td-save:hover { transform: translateY(-2px); border-color: var(--sea); }
.td-btn:focus-visible,
.td-save:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; }
.td-save.on {
  background: color-mix(in srgb, var(--pine) 20%, var(--bg-alt));
  border-color: color-mix(in srgb, var(--pine) 46%, transparent);
}
.td-save svg { flex: none; }
.td-btn .ic { color: var(--ic-key); }

/* ==========================================================================
   12. THE MONTH STRIP, BEFORE ANY DATE IS ENTERED
   The page has to be worth reading for someone who has not decided yet, so the
   default state is the year rather than a grey box saying "no results".
   ========================================================================== */

.td-strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 18px;
}
.td-strip a {
  display: block;
  padding: 16px 6px 14px;
  min-height: 44px;
  border-radius: var(--td-r-sm);
  text-decoration: none;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.td-strip a:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sea); }
.td-strip a:focus-visible { outline: 2px solid var(--bougie); outline-offset: 3px; }
.td-strip .m {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.td-strip .t {
  display: block;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 1.36rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}
.td-strip .s {
  display: block;
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--text-soft);
  margin-top: 6px;
}
.td-strip .bar {
  display: block;
  height: 4px;
  border-radius: 3px;
  margin-top: 12px;
  background: var(--line);
  overflow: hidden;
}
.td-strip .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--shallow), var(--pine)); }

/* ==========================================================================
   13. SMALL SCREENS FIRST
   390px is the design width. Nothing may scroll sideways at any size except
   the sunset table, which scrolls inside its own box.
   ========================================================================== */

.td, .td * { min-width: 0; }

@media (max-width: 980px) {
  .td-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .td-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .td-lead-wrap .sg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .td-panel { padding: 20px 16px; }
  .td-lead-wrap { padding: 24px 18px; }
  .td-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .td-lead-wrap .sg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .td-sunchart { height: 104px; }
  .td-sunplot { gap: 9px; }
  .td-bcards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .td-side { padding: 15px; }
  .td-groups { grid-template-columns: minmax(0, 1fr); }
  .td-group { padding: 14px 15px; }
  /* In a column flex box, flex-basis is a HEIGHT. Left as flex:1 1 190px the
     two fields stretched to 190px tall each and floated apart. */
  .td-form { flex-direction: column; align-items: stretch; }
  .td-field { flex: 0 0 auto; }
  .td-go { width: 100%; }
  .td-ask { padding-bottom: 22px; }
  .td-legend { grid-template-columns: minmax(0, 1fr); }
  /* A fact row is icon, words, value. The value here is often a mark, and a
     mark cannot wrap, so on a phone it took 170px off a 290px line and set the
     words one to a line. Below 620 the value drops underneath instead. */
  .td .sg-fact { grid-template-columns: auto minmax(0, 1fr); }
  .td .sg-fact-v {
    grid-column: 2;
    text-align: left;
    white-space: normal;
    margin-top: 2px;
  }
}

@media (max-width: 400px) {
  .td-bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .td-bcard-bd { padding: 9px 10px 11px; }
  .td-word { padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .td-go, .td-btn, .td-save, .td-strip a, .td-links a, .td-bcard { transition: none; }
  .td-go:hover, .td-btn:hover, .td-save:hover,
  .td-strip a:hover, .td-links a:hover, .td-bcard:hover { transform: none; }
}

@media (forced-colors: active) {
  .td-panel, .td-lead-wrap, .td-group, .td-side, .td-month, .td-ev,
  .td-word, .td-sunend, .td-bcard, .td-shift-box { border: 1px solid CanvasText; }
  .td-basis::before { forced-color-adjust: none; }
}

/* ==========================================================================
   14. NO JAVASCRIPT
   The tool computes in the browser, so with scripts off there is nothing to
   compute with. It says that and points at the plain pages instead.
   ========================================================================== */

.td-noscript {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--td-r);
  background: var(--td-face);
  max-width: 72ch;
}
.td-noscript h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--text);
}
.td-noscript p {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-soft);
}

/* ==========================================================================
   15. PRINT
   People print this before they fly and read it on a plane with no signal. The
   paper version keeps the dates, the numbers, the sunsets, the feasts and
   every mark, and drops the furniture.
   ========================================================================== */

@media print {
  .flagstripe,
  .masthead,
  .navsheet,
  .searchpanel,
  .td-actions,
  .td-form,
  .td-formnote,
  .td-err,
  .sunmark,
  .waves,
  .toast,
  .keepgoing,
  footer .cols { display: none !important; }

  .hero,
  .hero:has(.ph-hero) {
    min-height: 0 !important;
    padding: 0 0 12pt !important;
    background: none !important;
    color: #000 !important;
    display: block !important;
  }
  .hero .ph-hero { display: none !important; }
  .hero:has(.ph-hero)::before { display: none !important; }
  .hero:has(.ph-hero) > .wrap { padding: 0 !important; }
  .hero:has(.ph-hero) h1 { color: #000 !important; font-size: 22pt !important; text-shadow: none !important; }
  .hero:has(.ph-hero) .kicker,
  .hero:has(.ph-hero) > .wrap > p,
  .crumbs { color: #333 !important; }
  .td-said { color: #000 !important; font-size: 10pt; }
  /* Hero type is white on a photograph and carries a shadow to survive it.
     On white paper that shadow prints as a grey smear behind every word. */
  .hero, .hero *, .td-said { text-shadow: none !important; }

  body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  section { background: none !important; padding: 0 !important; }
  .wrap { max-width: none; padding: 0 !important; }

  .td-panel,
  .td-lead-wrap,
  .td-legend,
  .td-side,
  .td-group,
  .td-notknown {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1pt solid #bbb !important;
    background: #fff !important;
    padding: 10pt !important;
    margin-bottom: 10pt !important;
  }
  .td-exact { border-left: 3pt solid #444 !important; }
  .td-ev, .td-svc li, .td-month, .td-word, .td-sunend, .td-bcard {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .td-status {
    border: 1pt solid #888 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .td-status[data-s="unknown"] { border-style: dashed !important; }
  .td-basis { color: #000 !important; }
  .td-basis::before { box-shadow: none !important; border: 1pt solid #000 !important; }
  .td-basis[data-basis="computed"]::before,
  .td-basis[data-basis="measured"]::before { background: #000 !important; }
  .td-basis[data-basis="average"]::before,
  .td-basis[data-basis="unknown"]::before { background: #fff !important; }
  .td-flag, .sg-callout, .sg-stat, .td-word { background: #fff !important; border: 1pt solid #ddd !important; }
  .td-sunplot { break-inside: avoid; page-break-inside: avoid; }
  .td-links, .td-strip, .td-actions { display: none !important; }
  .td-bcard-im { display: none !important; }
  .td-bcard { border: 1pt solid #ccc !important; }
  .td-bcard-bd a, .td-links a { color: #000 !important; }
  /* Every evening is a table on paper too, and it must not clip. */
  .td-tablewrap { overflow: visible !important; }
  .td-table { min-width: 0 !important; font-size: 8pt; }
  .td-fold { border: 0 !important; padding: 0 !important; }
  .td-fold > summary { display: none !important; }
  .td-fold > *:not(summary) { display: block !important; }
  #td-empty h2 { display: none !important; }
  .td-noscript { display: none !important; }
}