/* ============================================================================
   Tight Lines: app styles.
   Loads LAST:  app-kit.css -> graphite.css -> tightlines.css
   Graphite supplies the near-black canvas and the component vocabulary. This
   file sets the accent, and then the handful of recipes this app needs that no
   other app does: the two-axis rating, the honest blank, and the protected-
   animal notice.
   ============================================================================ */

:root {
  /* The accent is the app's icon colour: shoal water over sand. Cyan-leaning so
     it never reads as Home Life's emerald or the Chief of Staff's blue. */
  --kit-accent:       #22c9d6;
  --kit-accent-hover: #63dde6;
  --kit-accent-2:     #0d6f78;
  --kit-accent-soft:  rgba(34, 201, 214, .12);
  --kit-accent-line:  rgba(34, 201, 214, .34);

  /* Deliberate second colour: the honest blank. The research left real things
     unverified, and the spec ships those as VISIBLE blanks rather than filling
     them in. A blank has to look like a blank, not like an answer, so it gets a
     warm sand that reads as "we do not know" rather than as "warning". */
  --tl-blank:      #f0b978;
  --tl-blank-bg:   rgba(240, 185, 120, .11);
  --tl-blank-line: rgba(240, 185, 120, .38);

  /* Third colour, used sparingly: legally protected. Sturgeon, manatee, sea
     turtles, nesting birds, horseshoe crabs. This is a prohibition, not a goal
     state, so a red family is the right register here. */
  --tl-protect:      #ff8f9c;
  --tl-protect-bg:   rgba(255, 143, 156, .10);
  --tl-protect-line: rgba(255, 143, 156, .40);

  --tl-rule: rgba(255, 255, 255, .09);
}

.kit-content { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }

/* --- the fixture banner ---------------------------------------------------
   Only ever rendered when the bundle was built from stand-in tables. It is
   loud on purpose: a render that could be mistaken for the real guide is the
   whole risk of building ahead of the data. */
.tl-fixture {
  background: var(--tl-protect-bg);
  border: 1px solid var(--tl-protect-line);
  border-radius: 10px;
  padding: .7rem .9rem;
  margin-bottom: 1.25rem;
  font-size: .875rem;
  line-height: 1.5;
}
.tl-fixture strong { color: var(--tl-protect); }

/* --- section furniture ---------------------------------------------------- */

.tl-lede {
  font-size: 1.02rem;
  line-height: 1.62;
  max-width: 62ch;
  margin: 0 0 1.5rem;
  color: var(--kit-text-dim, #a8adb8);
}
.tl-lede strong { color: var(--kit-text, #e8eaee); }

.tl-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.1rem;
  align-items: center;
}
.tl-chipbtn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--tl-rule);
  color: var(--kit-text-dim, #a8adb8);
  border-radius: 999px;
  padding: .34rem .72rem;
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
  min-height: 34px;
}
.tl-chipbtn:hover { border-color: var(--kit-accent-line); color: var(--kit-text, #e8eaee); }
.tl-chipbtn.is-on {
  background: var(--kit-accent-soft);
  border-color: var(--kit-accent-line);
  color: var(--kit-accent-hover);
}
.tl-count { font-size: .8125rem; color: var(--kit-text-dim, #8a8f9a); margin-left: auto; }

/* --- the place card ------------------------------------------------------- */

.tl-cards { display: grid; gap: .7rem; }
.tl-card {
  border: 1px solid var(--tl-rule);
  border-radius: 12px;
  padding: .95rem 1rem;
  background: rgba(255, 255, 255, .015);
}
.tl-card__top {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.tl-card__name {
  font-size: 1.06rem;
  font-weight: 620;
  margin: 0;
  color: var(--kit-text, #e8eaee);
}
.tl-card__drive {
  font-size: .8125rem;
  color: var(--kit-text-dim, #8a8f9a);
  font-variant-numeric: tabular-nums;
}
.tl-card__read {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--kit-text-dim, #a8adb8);
  margin: .1rem 0 .7rem;
}

/* --- the two-axis rating -------------------------------------------------
   The design test is John's Pass: paddle 1 of 5, fish 4 of 5. Every guide that
   collapses those into one number is useless for deciding what to put in the
   car, so the two axes are rendered as two separate labelled rows and there is
   no combined figure anywhere in the app. */
.tl-rating { display: grid; gap: .3rem; margin: 0 0 .6rem; }
.tl-rating__row { display: flex; align-items: center; gap: .55rem; }
.tl-rating__label {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kit-text-dim, #8a8f9a);
  width: 3.6rem;
  flex: none;
}
.tl-pips { display: flex; gap: 3px; }
.tl-pip {
  width: 15px;
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .13);
}
.tl-pip.is-on { background: var(--kit-accent); }
.tl-rating__n {
  font-size: .78rem;
  color: var(--kit-text-dim, #8a8f9a);
  font-variant-numeric: tabular-nums;
}

/* --- chips ---------------------------------------------------------------- */

.tl-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 .55rem; }
.tl-chip {
  font-size: .75rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--tl-rule);
  color: var(--kit-text-dim, #a8adb8);
  white-space: nowrap;
}
.tl-chip--kind { border-color: var(--kit-accent-line); color: var(--kit-accent-hover); background: var(--kit-accent-soft); }
.tl-chip--blank { border-color: var(--tl-blank-line); color: var(--tl-blank); background: var(--tl-blank-bg); }
.tl-chip--protect { border-color: var(--tl-protect-line); color: var(--tl-protect); background: var(--tl-protect-bg); }

/* --- the honest blank ----------------------------------------------------- */

.tl-blank {
  border-left: 2px solid var(--tl-blank-line);
  background: var(--tl-blank-bg);
  padding: .5rem .7rem;
  border-radius: 0 7px 7px 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tl-blank);
  margin: .5rem 0;
}
.tl-blank b { color: var(--tl-blank); font-weight: 640; }

/* --- protected animals ---------------------------------------------------- */

.tl-protect {
  border: 1px solid var(--tl-protect-line);
  background: var(--tl-protect-bg);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: 0 0 .7rem;
}
.tl-protect h4 {
  margin: 0 0 .35rem;
  font-size: .95rem;
  color: var(--tl-protect);
}
.tl-protect p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--kit-text-dim, #a8adb8); }

/* --- detail rows ---------------------------------------------------------- */

.tl-rows { display: grid; gap: .55rem; margin: .6rem 0 0; }
.tl-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: .7rem; align-items: start; }
.tl-row__k {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kit-text-dim, #8a8f9a);
  padding-top: .12rem;
}
.tl-row__v { font-size: .9rem; line-height: 1.55; }
@media (max-width: 460px) {
  .tl-row { grid-template-columns: 1fr; gap: .12rem; }
}

/* --- prose ---------------------------------------------------------------- */

.tl-prose { max-width: 68ch; }
.tl-prose h3 { margin: 1.7rem 0 .5rem; font-size: 1.06rem; }
.tl-prose h4 { margin: 1.2rem 0 .35rem; font-size: .95rem; color: var(--kit-accent-hover); }
.tl-prose p, .tl-prose li { line-height: 1.62; }
.tl-prose ul { padding-left: 1.15rem; }
.tl-prose li { margin: .3rem 0; }
.tl-prose a { color: var(--kit-accent-hover); }
.tl-tablewrap { overflow-x: auto; margin: .8rem 0; }
.tl-tablewrap table { border-collapse: collapse; min-width: 100%; font-size: .85rem; }
.tl-tablewrap th, .tl-tablewrap td {
  text-align: left;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--tl-rule);
  vertical-align: top;
}
.tl-tablewrap th { color: var(--kit-text-dim, #8a8f9a); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

/* --- accordion ------------------------------------------------------------ */

details.tl-more { margin-top: .5rem; }
details.tl-more > summary {
  cursor: pointer;
  font-size: .8125rem;
  color: var(--kit-accent-hover);
  list-style: none;
  padding: .3rem 0;
  min-height: 32px;
  display: flex;
  align-items: center;
}
details.tl-more > summary::-webkit-details-marker { display: none; }
details.tl-more > summary::before { content: "▸ "; margin-right: .35rem; }
details.tl-more[open] > summary::before { content: "▾ "; }

/* --- month strip ---------------------------------------------------------- */

.tl-months { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1rem; }
.tl-months .tl-chipbtn { flex: none; }

/* --- sources -------------------------------------------------------------- */

.tl-cites { margin: .5rem 0 0; font-size: .78rem; color: var(--kit-text-dim, #8a8f9a); line-height: 1.6; }
.tl-cites a { color: var(--kit-text-dim, #8a8f9a); text-decoration: underline; text-underline-offset: 2px; }
.tl-cites a:hover { color: var(--kit-accent-hover); }

/* --- habitat look-fors ---------------------------------------------------- */

.tl-lookfors { display: grid; gap: .4rem; margin-top: .5rem; }
.tl-lookfor { font-size: .875rem; line-height: 1.5; }
.tl-lookfor b { color: var(--kit-text, #e8eaee); font-weight: 600; }
.tl-lookfor i { color: var(--kit-text-dim, #8a8f9a); font-style: italic; }
.tl-lookfor em { color: var(--kit-accent-hover); font-style: normal; }

/* The references' house marker for an unverified fact, translated by the
   compiler from their bolded literal "blank" into the app's blank treatment. */
.tl-unknown {
  color: var(--tl-blank);
  font-style: normal;
  white-space: nowrap;
}

/* A field-guide entry's `note`. On a `danger` entry this is the safety line and
   it gets the protected treatment; the rest are colour, and stay quiet. */
.tl-protectnote {
  margin-top: .35rem;
  padding: .45rem .6rem;
  border-left: 2px solid var(--tl-protect-line);
  background: var(--tl-protect-bg);
  border-radius: 0 6px 6px 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--tl-protect);
}
.tl-note {
  margin-top: .3rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--kit-text-dim, #8a8f9a);
}

/* ---------------------------------------------------------------------------
   Plan: the phase-2 ranker
   --------------------------------------------------------------------------- */

/* The mode picker is the first thing on the tab and deliberately large. Mode is
   the user's call, never inferred, so the choice has to look like a choice
   rather than a filter chip. Three since 2026-08-06, which fits one row on a
   phone where five wrapped awkwardly. */
.tl-plan__modes {
  display: grid; gap: .5rem; margin: 0 0 .9rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.tl-mode {
  display: grid; gap: .18rem; text-align: left; cursor: pointer;
  padding: .6rem .7rem; border-radius: 10px;
  border: 1px solid var(--tl-rule); background: rgba(255, 255, 255, .022);
  color: var(--kit-text-dim, #a8adb8); font: inherit;
}
.tl-mode:hover { border-color: var(--kit-accent-line); }
.tl-mode.is-on {
  border-color: var(--kit-accent); background: var(--kit-accent-soft);
}
.tl-mode__label { font-size: .95rem; font-weight: 640; color: var(--kit-text, #e8eaee); }
.tl-mode.is-on .tl-mode__label { color: var(--kit-accent-hover); }
.tl-mode__reads { font-size: .775rem; line-height: 1.35; }
/* MEASURED ON A PHONE 2026-08-07: at 375px the three buttons wrapped 2 + 1 and
   the orphan sat 24px shorter than its neighbours, because the `reads` line
   takes two lines in a 160px column and one in the wider third slot. Two up
   with equal rows and the third spanning the width is two rows rather than
   three, and nothing is ragged. */
@media (max-width: 30rem) {
  .tl-plan__modes { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
  .tl-plan__modes .tl-mode:last-child { grid-column: 1 / -1; }
  .tl-mode__reads { font-size: .74rem; }
}

/* Five radius chips plus the label overflow a 375px phone, and the toolbar
   clipped rather than expanding, which put the 60 min chip out of reach. The
   group has to wrap internally, not just as one item in the toolbar. */
.tl-plan__group { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--kit-text-dim, #8a8f9a); }
.tl-datefield {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8125rem; color: var(--kit-text-dim, #8a8f9a);
}
.tl-datefield input {
  font: inherit; color: var(--kit-text, #e8eaee); color-scheme: dark;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--tl-rule);
  border-radius: 7px; padding: .3rem .45rem;
}
.tl-boat { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--kit-text-dim, #8a8f9a); cursor: pointer; }
.tl-boat input { accent-color: var(--kit-accent); }
/* Shore mode replaces the checkbox with the reason there is no checkbox. A
   disabled control invites you to wonder what it would do; a sentence answers
   it. */
.tl-boat.is-moot { display: block; max-width: 26rem; line-height: 1.4; opacity: .8; cursor: default; }
/* MEASURED AT 13x13 ON A PHONE. It is the control that widens the search to
   five destinations, and it was the smallest target on the screen. */
.tl-boat { display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.tl-boat input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--kit-accent); flex: none; }

/* Salt or fresh sits under the fishing modes only, so it reads as a second
   question about the mode above rather than a fourth mode. */
.tl-toolbar--sub { margin-top: -.5rem; padding-top: 0; border-top: 0; }

.tl-plan__head {
  margin: .3rem 0 .9rem; padding: .6rem .75rem;
  border-left: 2px solid var(--kit-accent-line); background: var(--kit-accent-soft);
  border-radius: 0 8px 8px 0; font-size: .875rem;
}
.tl-plan__sun { margin-top: .15rem; font-size: .8rem; color: var(--kit-text-dim, #8a8f9a); }

.tl-plan__count { margin-top: .15rem; font-size: .8rem; color: var(--kit-text-dim, #8a8f9a); }

/* ---------------------------------------------------------------------------
   The three checks this app does not make
   --------------------------------------------------------------------------- */

/* FIRST on the screen, and the placement is the point. Phase 2 said the same
   thing in a provenance paragraph at the bottom, where it read as a footnote
   about data sourcing rather than as three things that cancel the day.

   It is deliberately NOT in the warning colour. Sand means "the research left a
   blank here", and this is not a blank: it is a boundary the app chose, stated
   plainly. Giving it an alarm treatment on every single load is how a reader
   learns to skim the alarms. */
.tl-outside {
  margin: 0 0 1.1rem; padding: .75rem .85rem; border-radius: 10px;
  border: 1px solid var(--kit-accent-line); background: var(--kit-accent-soft);
}
.tl-outside__h { margin: 0 0 .25rem; font-size: .95rem; color: var(--kit-accent-hover); }
.tl-outside__lede { margin: 0 0 .6rem; font-size: .82rem; line-height: 1.5; }

/* One row per check: the label, the threshold, the link. Everything else is in
   the disclosure below, because this panel is read on every single load and it
   was costing two screens before the answer. */
.tl-outside__rows { display: grid; gap: .5rem; }
.tl-outside__row {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: .1rem .6rem;
  padding: .45rem .55rem; border-radius: 8px;
  border: 1px solid var(--tl-rule); background: rgba(0, 0, 0, .16);
}
.tl-outside__label {
  grid-row: span 2; align-self: start; padding-top: .1rem;
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--kit-text-dim, #8a8f9a); font-weight: 600;
}
.tl-outside__limit { font-size: .82rem; line-height: 1.4; font-weight: 560; }
.tl-outside__link {
  font-size: .8rem; font-weight: 560; padding: .45rem 0 .3rem;
  /* Measured at 26px on a phone. These are the three links the panel exists to
     send you to, so they clear a thumb. */
  min-height: 32px;
  /* Measured as rgb(158,158,255) on a phone: the browser's visited-link
     lavender, on the three links that decide whether the trip happens. */
  color: var(--kit-accent-hover);
}
@media (max-width: 24rem) {
  .tl-outside__row { grid-template-columns: 1fr; }
  .tl-outside__label { grid-row: auto; }
}

.tl-outside__whys { margin-top: .6rem; }
.tl-outside__whys > summary {
  font-size: .78rem; color: var(--kit-accent-hover); cursor: pointer;
  padding: .5rem 0; min-height: 32px;
}
.tl-outside__why { margin: .5rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--kit-text-dim, #8a8f9a); }
.tl-outside__why b { color: var(--kit-text, #e8eaee); font-weight: 600; }
.tl-outside__note { display: block; margin-top: .2rem; color: var(--tl-blank); }
.tl-outside__checked { display: block; margin-top: .1rem; }

/* ---------------------------------------------------------------------------
   The three groups
   --------------------------------------------------------------------------- */

/* Every heading names its own scope, because a band that reads as a verdict on
   the day is the overclaim this whole screen was rebuilt against.

   NO RED-AMBER-GREEN, and not only as a house rule: a place that is out on the
   tide is not a warning about anything, it is a fact about Saturday. Clear takes
   the app accent, possible takes sand (which already means "the research
   qualified this" everywhere else in the app), and unavailable takes the neutral
   rule colour and nothing else. */
.tl-group { margin: 1.4rem 0 0; }
.tl-group__h {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 0 0 .1rem; font-size: .95rem;
}
.tl-group__h--sub { margin-top: 1.1rem; font-size: .875rem; }
.tl-group__n {
  font-size: .75rem; font-variant-numeric: tabular-nums;
  padding: .05rem .4rem; border-radius: 99px;
  border: 1px solid var(--tl-rule); color: var(--kit-text-dim, #8a8f9a);
}
.tl-group__lede { margin: 0 0 .6rem; font-size: .8rem; line-height: 1.5; color: var(--kit-text-dim, #8a8f9a); }
.tl-group--clear .tl-group__h { color: var(--kit-accent-hover); }
.tl-group--possible .tl-group__h { color: var(--tl-blank); }
.tl-group--unavailable .tl-group__h { color: var(--kit-text-dim, #8a8f9a); }

.tl-tripcard { border-left: 2px solid var(--tl-rule); }
.tl-tripcard--clear { border-left-color: var(--kit-accent); }
.tl-tripcard--possible { border-left-color: var(--tl-blank-line); }
.tl-tripcard--unavailable { opacity: .78; }

/* The one sentence about what the tide actually did. It replaced a reason line
   that sat under a score, where it read as a justification of a rank. */
.tl-tideline { margin: .35rem 0 .5rem; font-size: .9rem; line-height: 1.55; }
.tl-blocked { margin: .35rem 0 .5rem; font-size: .9rem; line-height: 1.55; color: var(--kit-text-dim, #a8adb8); }
.tl-trim { margin: .15rem 0 .4rem; font-size: .8rem; color: var(--kit-text-dim, #8a8f9a); }

.tl-destinations { margin-top: 1.6rem; }
.tl-destinations > summary { color: var(--kit-accent-hover); font-size: .9rem; }
.tl-destinations__hint { color: var(--kit-text-dim, #8a8f9a); font-size: .8rem; font-weight: 400; }

.tl-warn {
  margin: .4rem 0; padding: .5rem .65rem; border-radius: 8px;
  border: 1px solid var(--tl-blank-line); background: var(--tl-blank-bg);
  font-size: .85rem; line-height: 1.5; color: var(--tl-blank);
}
.tl-note--advisory, .tl-note--assumption, .tl-note--caveat, .tl-note--info, .tl-note--gauge {
  margin: .3rem 0; font-size: .8125rem; line-height: 1.5;
  color: var(--kit-text-dim, #8a8f9a);
}
.tl-note--assumption { color: var(--tl-blank); }
/* The per-place gauge limitation from the authored gauge table. It rides under
   the residual because a bare station name reads far more local than the source
   permits: Clearwater Beach stands in for Anclote Key from 20.79 km away. */
.tl-note--gauge { font-style: italic; opacity: .85; }

/* ---------------------------------------------------------------------------
   Keep?
   --------------------------------------------------------------------------- */

/* The colours here are the app's existing vocabulary rather than a traffic
   light. Rose already means "legally protected, a prohibition rather than a goal
   state", and a closed season is exactly that. Sand already means "the research
   could not settle this". Accent means open. */
.tl-keep__warn {
  margin: 0 0 .9rem; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid var(--tl-protect-line); background: var(--tl-protect-bg);
  font-size: .82rem; line-height: 1.5;
}
.tl-keep__boundary { margin: -.35rem 0 .8rem; font-size: .8rem; line-height: 1.5; color: var(--kit-text-dim, #8a8f9a); }
.tl-keep__hint { margin: .8rem 0; font-size: .85rem; color: var(--kit-text-dim, #8a8f9a); }

.tl-search {
  flex: 1 1 12rem; min-width: 9rem; padding: .4rem .6rem; border-radius: 8px;
  border: 1px solid var(--tl-rule); background: rgba(255, 255, 255, .04);
  color: inherit; font: inherit; font-size: .9rem;
}

/* MEASURED ON A PHONE 2026-08-07: at 11rem this fell to ONE column at 375px,
   because 343px of usable width cannot take two 176px tracks. Twenty-one tiles
   in a single column is a scroll, not a grid, and the grid exists so the common
   case is one tap. At 9rem it is two columns on both phones. */
.tl-keep__grid {
  display: grid; gap: .4rem; margin: .8rem 0 1rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.tl-keeptile {
  display: flex; flex-direction: column; gap: .15rem; text-align: left;
  padding: .5rem .6rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--tl-rule); background: rgba(255, 255, 255, .022);
  color: inherit; font: inherit;
}
.tl-keeptile.is-on { border-color: var(--kit-accent); background: var(--kit-accent-soft); }
.tl-keeptile__name { font-size: .85rem; line-height: 1.3; }
.tl-keeptile__v { font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; font-weight: 620; }
.tl-keeptile--yes .tl-keeptile__v { color: var(--kit-accent); }
.tl-keeptile--no .tl-keeptile__v { color: var(--tl-protect); }
.tl-keeptile--unknown .tl-keeptile__v { color: var(--tl-blank); }

.tl-keepcard { border-left: 2px solid var(--tl-rule); }
.tl-keepcard--yes { border-left-color: var(--kit-accent); }
.tl-keepcard--no { border-left-color: var(--tl-protect); }
.tl-keepcard--unknown { border-left-color: var(--tl-blank-line); }
.tl-keepcard__v { font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; font-weight: 640; white-space: nowrap; }
.tl-keepcard__v--yes { color: var(--kit-accent); }
.tl-keepcard__v--no { color: var(--tl-protect); }
.tl-keepcard__v--unknown { color: var(--tl-blank); }
/* The legal block comes first and is visually the card. Identification and
   tackle are underneath, which is the whole reversal. */
.tl-keepcard__legal { margin: .4rem 0 .6rem; }
.tl-keepcard__how { margin-top: .2rem; font-size: .8rem; color: var(--kit-text-dim, #8a8f9a); }
/* The source for THIS figure, on the same row as the figure. A slot limit and a
   season can come from different pages and go stale on different days, and one
   citation at the bottom of the card cannot say which. */
.tl-keepcard__src { display: block; margin-top: .15rem; font-size: .72rem; color: var(--kit-text-dim, #8a8f9a); }
.tl-keepcard__varies { color: var(--tl-blank); font-size: .8rem; }
.tl-keepcard__note { margin: .35rem 0; font-size: .85rem; line-height: 1.5; }
/* The sentence the answer rests on, quoted, so a reader can check the app
   against the reference without leaving the card. */
.tl-keepcard__because {
  margin: .25rem 0; font-size: .78rem; line-height: 1.5; font-style: italic;
  color: var(--kit-text-dim, #8a8f9a);
}

.tl-empty {
  padding: .95rem 1.05rem; border-radius: 10px;
  border: 1px solid var(--tl-blank-line); background: var(--tl-blank-bg);
}
.tl-empty h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--tl-blank); }
.tl-empty p { margin: .35rem 0; font-size: .875rem; line-height: 1.55; }
.tl-empty ul { margin: .5rem 0; padding-left: 1.15rem; font-size: .875rem; }
.tl-empty li { margin: .25rem 0; }
.tl-empty__rule { color: var(--kit-text-dim, #a8adb8); font-size: .8125rem !important; }

.tl-ledger { margin-top: 1rem; }
.tl-ledger__h { margin: .9rem 0 .1rem; font-size: .85rem; color: var(--kit-accent-hover); }
.tl-ledger .tl-row { grid-template-columns: 11rem 1fr; }

.tl-prov {
  margin-top: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--tl-rule);
  font-size: .8125rem; line-height: 1.55; color: var(--kit-text-dim, #8a8f9a);
}
.tl-prov p { margin: .4rem 0; }
.tl-prov b { color: var(--kit-text, #e8eaee); }

@media (max-width: 30rem) {
    .tl-ledger .tl-row { grid-template-columns: 1fr; gap: .15rem; }
}

/* The ledger reuses the two-column row, but a place name is a name and not a
   field label, so it does not take the label's uppercase treatment. */
.tl-ledger .tl-row__k { text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* On a phone the radius chips were wrapping "10" and "min" onto two lines. */
.tl-plan__group .tl-chipbtn { white-space: nowrap; }

/* The boat-day guide's own Bring section, repeated as conditions rather than
   resolved into one word: several of its conditions are facts the app does not
   hold, and picking one for the reader is how the invented version got it
   wrong at the St. Petersburg waterfront. */
.tl-bring {
  margin: .5rem 0; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid var(--tl-rule); background: rgba(255, 255, 255, .022);
  font-size: .8125rem; line-height: 1.5;
}
.tl-bring > b { display: block; margin-bottom: .3rem; font-size: .75rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--kit-text-dim, #8a8f9a); font-weight: 600; }
.tl-bring__row { display: grid; grid-template-columns: 11rem 1fr; gap: .6rem; margin: .2rem 0; }
.tl-bring__row > span:first-child { color: var(--kit-accent-hover); }
@media (max-width: 30rem) { .tl-bring__row { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------------------------------------------------------------------------
   The date check, on the Places tab
   --------------------------------------------------------------------------- */

/* This is what social mode became. Travis never organises a boat day; he gets
   invited and the place is already named, so this is a lookup and it is styled
   as one: no score bar, no rank number, no comparison to anything. It lives on
   the place card because the place is the thing he was told. */
.tl-daycheck { margin-top: .55rem; }
.tl-daycheck > summary { color: var(--kit-accent-hover); }
.tl-daycheck .tl-datefield { margin: .5rem 0 .1rem; }
.tl-daycheck__hint {
  margin: .45rem 0 0; font-size: .8rem; line-height: 1.5;
  color: var(--kit-text-dim, #8a8f9a);
}
.tl-daycheck__out { margin-top: .5rem; }
/* Not red. A prohibited stage is a fact about the water, not an alarm, and the
   app's rule is that the warnings are the warnings and they are in sand. */
.tl-daycheck__no { color: var(--tl-blank); }

/* ---------------------------------------------------------------------------
   What do we throw
   --------------------------------------------------------------------------- */

/* The half the date check was missing. Only the "strongest this month" heading
   takes the accent, and the undotted group stays in plain text rather than
   dimmed: the table's own caption says a blank does not mean the species is
   absent, and greying those out would say the opposite in a colour. */
.tl-tackle {
  margin: .6rem 0; padding: .6rem .75rem; border-radius: 8px;
  border: 1px solid var(--tl-rule); background: rgba(255, 255, 255, .022);
}
.tl-tackle > b {
  display: block; margin-bottom: .2rem; font-size: .75rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--kit-text-dim, #8a8f9a); font-weight: 600;
}
.tl-tackle__intro { margin: 0 0 .7rem; font-size: .82rem; line-height: 1.5; color: var(--kit-text-dim, #a8adb8); }
.tl-tackle__h {
  display: flex; align-items: baseline; gap: .45rem;
  margin: .9rem 0 .15rem; font-size: .8rem; letter-spacing: .02em;
  color: var(--kit-text-dim, #8a8f9a); font-weight: 600;
}
.tl-tackle__h:first-of-type { margin-top: .2rem; }
.tl-tackle__n {
  font-size: .7rem; font-variant-numeric: tabular-nums; padding: .02rem .35rem;
  border-radius: 99px; border: 1px solid var(--tl-rule); font-weight: 400;
}
/* The caption from the reference, carried verbatim, because it is the reason
   this cannot be read as a season: the dot is scoped to beginners. */
.tl-tackle__lede { margin: .1rem 0 .5rem; font-size: .76rem; line-height: 1.45; font-style: italic; color: var(--kit-text-dim, #8a8f9a); }
.tl-tackle__fish { margin: .45rem 0; padding-left: .55rem; border-left: 2px solid var(--tl-rule); }
.tl-tackle__fish--on { border-left-color: var(--kit-accent); }
.tl-tackle__name { font-size: .875rem; font-weight: 600; margin-bottom: .15rem; }
.tl-tackle__as { font-weight: 400; font-size: .78rem; color: var(--kit-text-dim, #8a8f9a); }
.tl-tackle__row { display: grid; grid-template-columns: 3.4rem 1fr; gap: .5rem; margin: .1rem 0; font-size: .82rem; line-height: 1.5; }
.tl-tackle__row > span:first-child {
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--kit-text-dim, #8a8f9a); padding-top: .18rem;
}
/* Named, not dropped. A verdict that says "and sharks" and a card that silently
   omits them is the same silent absence this app forbids everywhere else. */
.tl-tackle__excl {
  margin-top: .7rem; padding-top: .5rem; border-top: 1px solid var(--tl-rule);
  font-size: .78rem; line-height: 1.5; color: var(--kit-text-dim, #8a8f9a);
}
.tl-tackle__excl b { color: var(--tl-blank); }
.tl-tackle__rest { margin-top: .8rem; }
.tl-tackle__rest > summary { font-size: .8rem; color: var(--kit-accent-hover); cursor: pointer; padding: .35rem 0; }
.tl-tackle__rest > summary span { color: var(--kit-text-dim, #8a8f9a); }
.tl-tackle__rest .tl-tackle__h:first-of-type { margin-top: .4rem; }
/* The Keep? per-figure source links, and the Fish|Hunt link in the warning:
   the same lavender the outside links had. */
.tl-keepcard__src a, .tl-keep__warn a { color: var(--kit-accent-hover); }
.tl-tackle__note { margin: .5rem 0 0; font-size: .76rem; line-height: 1.5; color: var(--kit-text-dim, #8a8f9a); }
@media (max-width: 30rem) { .tl-tackle__row { grid-template-columns: 1fr; gap: .05rem; } }