/* ========================================================================== Catch log. Extends base.css - it never redefines a token. Written for a phone held one-handed at a boat ramp, in sunlight, with wet hands. Every base rule here is the phone rule; wider screens are additive min-width queries only. Nothing is narrower than var(--tap), no text input is under 16px, and no row can push the body sideways. Progressive enhancement note: log.js puts `.log-js` on . Controls that only work with JS (steppers, the skunk button, the running tally) are hidden until that class appears, and the plain inputs behind them keep working on their own. Deliberately not keyed off base.css's `.no-js` - that is removed by an inline script, which a strict CSP can block. ========================================================================== */ /* ------------------------------------------------------------ headings --- */ .log-title { margin-bottom: var(--sp-3); } .log-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); } .log-head__text { min-width: 0; } .log-head .lede { margin-bottom: 0; } @media (min-width: 46rem) { .log-head { grid-template-columns: 1fr auto; align-items: end; } .log-head__cta { padding-bottom: var(--sp-1); } } .crumb { margin-bottom: var(--sp-3); font-size: var(--step--1); } .crumb a { text-decoration: none; color: var(--ink-3); } .crumb a:hover { color: var(--deep); } .log-sec { margin-bottom: var(--sp-4); } .log-sec__title { font-size: var(--step-1); margin-bottom: var(--sp-3); } .log-sec__note { color: var(--ink-3); font-size: var(--step--1); margin-bottom: var(--sp-4); max-width: 56ch; } .log-fieldset { border: 0; padding: 0; margin-inline: 0; } .log-fieldset > legend { padding: 0; } .log-both { margin-bottom: var(--sp-4); } /* --------------------------------------------------------------- chips --- */ .chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); } /* Spot filters can outgrow a phone: they scroll in their own rail, not the page. */ .chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: var(--sp-2); } .chip-row--scroll > * { flex: none; } .log-chip { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: inherit; font-size: var(--step--1); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; } .log-chip:hover { border-color: var(--deep); color: var(--deep); } .log-chip.is-on { background: var(--deep); border-color: var(--deep); color: #fff; } /* ------------------------------------------------------------ the date --- */ .date-row { display: grid; gap: var(--sp-2); } .date-row input[type="date"] { width: 100%; } @media (min-width: 30rem) { .date-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .date-row .chip-row { margin-bottom: 0; } } /* ------------------------------------------------------------ steppers --- */ /* A phone number spinner is unusable with wet hands. Big +/- buttons instead; the input itself stays a real number field so it works without JS. */ .stepper { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: var(--sp-2); } .stepper__btn { display: none; /* revealed by .log-js */ width: 52px; min-height: 52px; place-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--card-2); color: var(--ink); font-size: 1.5rem; line-height: 1; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } .log-js .stepper__btn { display: grid; } .stepper__btn:hover { border-color: var(--deep); color: var(--deep); } .stepper__btn:active { background: var(--tint); transform: translateY(1px); } .stepper__btn[disabled] { opacity: 0.4; pointer-events: none; } .stepper__input { min-height: 52px; text-align: center; font-size: max(18px, var(--step-1)); font-weight: 700; font-variant-numeric: tabular-nums; /* The native spinner is exactly the fiddly control we are replacing. */ appearance: textfield; -moz-appearance: textfield; } .stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { appearance: none; margin: 0; } .stepper__input.is-set { border-color: var(--deep); background: var(--tint); } .stepper--wide { max-width: 18rem; } /* --------------------------------------------------------------- fish --- */ .fish-list { display: grid; gap: var(--sp-2); } .fish { padding: var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--card-2); } .fish.is-on { border-color: var(--deep); background: var(--tint); } .fish__main { display: grid; gap: var(--sp-2); align-items: center; } .fish__name { font-weight: 600; min-width: 0; } @media (min-width: 26rem) { .fish__main { grid-template-columns: minmax(0, 1fr) auto; } .fish .stepper { width: 11.5rem; } } .fish__detail { margin-top: var(--sp-2); } .fish__detail[hidden] { display: none; } .fish__detail-summary { display: inline-flex; align-items: center; min-height: 34px; font-size: var(--step--1); color: var(--ink-3); cursor: pointer; } .fish__detail-summary:hover { color: var(--deep); } .fish__detail-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); grid-template-columns: 1fr 1fr; } .fish__sub { display: block; min-width: 0; } .fish__sub-label { display: block; font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--sp-1); } .fish-more { margin-top: var(--sp-3); } .fish-more__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-3); border: 1px dashed var(--line); border-radius: var(--radius-s); font-weight: 600; color: var(--ink-2); cursor: pointer; } .fish-more__summary:hover { border-color: var(--deep); color: var(--deep); } .fish-more[open] .fish-more__summary { margin-bottom: var(--sp-2); border-style: solid; } /* --------------------------------------------------------- the skunk --- */ /* A blank day is the most valuable row in the table. It gets the biggest, least apologetic control on the page. */ .skunk-btn { display: none; /* revealed by .log-js */ align-items: center; gap: var(--sp-3); width: 100%; min-height: 64px; padding: var(--sp-3); margin-bottom: var(--sp-4); border: 1.5px dashed var(--line); border-radius: var(--radius-s); background: var(--card-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; } .log-js .skunk-btn { display: flex; } .skunk-btn:hover { border-color: var(--amber); } .skunk-btn__mark { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--ink-3); } .skunk-btn__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .skunk-btn__title { font-weight: 700; } .skunk-btn__note { font-size: var(--step--1); color: var(--ink-3); } .skunk-btn[aria-pressed="true"] { border-style: solid; border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--card)); } .skunk-btn[aria-pressed="true"] .skunk-btn__mark { border-color: var(--amber); color: var(--amber); } .js-skunk-fallback { display: block; } .log-js .js-skunk-fallback { display: none; } .skunk-note { margin: 0; padding: var(--sp-4); border-radius: var(--radius-s); background: color-mix(in srgb, var(--amber) 10%, var(--card-2)); border-left: 4px solid var(--amber); } /* -------------------------------------------------------------- water --- */ .water-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18); display: inline-block; } .water-dot--sm { width: 0.8em; height: 0.8em; vertical-align: -0.05em; margin-right: 0.35em; } /* The swatch replaces the tick box's leading square, so hide the default one. */ .choice--swatch .choice__box::before { display: none; } .choice--swatch input:checked + .choice__box .water-dot { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--deep); } /* ------------------------------------------------------------- photos --- */ .photo-picks { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; } .photo-pick { display: block; min-width: 0; } .photo-pick__face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 92px; padding: var(--sp-3); border: 1.5px dashed var(--line); border-radius: var(--radius-s); background: var(--card-2); color: var(--ink-2); font-size: var(--step--1); font-weight: 600; text-align: center; cursor: pointer; } .photo-pick__face:hover { border-color: var(--deep); color: var(--deep); } .photo-pick input:focus-visible + .photo-pick__face { outline: 3px solid var(--focus); outline-offset: 2px; } .photo-pick__icon { width: 28px; height: 28px; } .photo-hint { margin-top: var(--sp-2); } .photo-previews { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(3, 1fr); } .photo-previews[hidden] { display: none; } .photo-previews li { position: relative; } .photo-previews img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); } .photo-previews figcaption, .photo-previews .photo-previews__name { display: block; font-size: var(--step--1); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .photo-grid { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); } @media (min-width: 34rem) { .photo-grid { grid-template-columns: repeat(2, 1fr); } } .photo-grid img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card-2); } .photo-grid__cap { margin: var(--sp-2) 0 0; color: var(--ink-3); } /* ------------------------------------------------------- sticky submit --- */ /* The save button lives in the thumb zone and stays there while the form is scrolled. It is a real submit button, not a JS handler. */ .log-form { padding-bottom: var(--sp-4); } .log-submit { position: sticky; bottom: 0; z-index: 20; margin-inline: calc(var(--gutter) * -1); padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--line); } .log-submit__inner { display: flex; align-items: center; gap: var(--sp-3); } .log-submit__tally { display: none; align-items: baseline; gap: 0.3em; margin: 0; flex: none; min-width: 5.5rem; } .log-js .log-submit__tally { display: flex; } .log-submit__n { font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; } .log-submit__word { font-size: var(--step--1); color: var(--ink-3); } .log-submit__go { flex: 1 1 auto; } @media (min-width: 40rem) { .log-submit__go { width: auto; } } /* -------------------------------------------------------------- stats --- */ .log-stats { margin-bottom: var(--sp-5); } .stat-strip { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 40rem) { .stat-strip { grid-template-columns: repeat(4, 1fr); } } .stat { padding: var(--sp-3); border-radius: var(--radius-s); background: var(--card-2); border: 1px solid var(--line-2); } .stat__n { display: block; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; } .stat__label { display: block; font-size: var(--step--1); color: var(--ink-3); } .log-stats__sub { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: var(--sp-5) 0 var(--sp-2); } .log-stats__foot { margin-top: var(--sp-2); max-width: 60ch; } .log-stats__cols { display: grid; gap: var(--sp-4); } @media (min-width: 44rem) { .log-stats__cols { grid-template-columns: 1fr 1fr; } } .rating-table th[scope="row"] { white-space: normal; } .rating-table td { white-space: nowrap; } /* Rating colours come from taxonomy's palette, which carries a light AND a dark value per rating because the light accents fall under 4.5:1 on a dark ground. The view hands both in as --rt-* custom properties; the theme is picked here, following base.css's three-state convention (bare :root, prefers-color-scheme guarded against an explicit light, then an explicit dark). */ .rating-pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 3px 10px; border-radius: 999px; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.02em; color: var(--rt-fg, var(--ink-2)); background: var(--rt-bg, var(--line-2)); } .rating-pill--sm { font-size: 0.72rem; padding: 2px 8px; } .rating-pill--none { background: var(--line-2); color: var(--ink-3); } .verdict__rating--tinted { color: var(--rt-fg, var(--ink)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rating-pill { color: var(--rt-fg-d, var(--ink-2)); background: var(--rt-bg-d, var(--line-2)); } :root:not([data-theme="light"]) .verdict__rating--tinted { color: var(--rt-fg-d, var(--ink)); } } :root[data-theme="dark"] .rating-pill { color: var(--rt-fg-d, var(--ink-2)); background: var(--rt-bg-d, var(--line-2)); } :root[data-theme="dark"] .verdict__rating--tinted { color: var(--rt-fg-d, var(--ink)); } .tally-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .tally { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 38px; padding: var(--sp-1) 0; border-bottom: 1px solid var(--line-2); } .tally:last-child { border-bottom: 0; } .tally__label { min-width: 0; } .tally__n { font-weight: 700; white-space: nowrap; } /* ---------------------------------------------------- summary strip --- */ /* The four headline numbers, compressed to one row so the feed starts near the top of the page. The full breakdown lives at /log/accuracy. */ .log-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--card-2); } .summary-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); } .summary-stat { display: flex; align-items: baseline; gap: 0.35em; } .summary-stat__n { font-family: var(--font-display); font-size: var(--step-1); line-height: 1; } .summary-stat__label { font-size: var(--step--1); color: var(--ink-3); } .summary-link { font-size: var(--step--1); font-weight: 700; white-space: nowrap; } /* -------------------------------------------------------------- feed --- */ /* Each card is a report by a person, not a table row. The whole card is clickable through a stretched pseudo-element on __main rather than by wrapping the card in an , because the angler's name has to be its own link and anchors cannot nest. */ .log-list__title { margin-top: var(--sp-6); } .feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .feed-card { position: relative; display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); } .feed-card:hover { background: var(--card-2); } .feed-card:focus-within { outline: 2px solid var(--deep); outline-offset: 2px; } .feed-card__media { position: relative; flex: none; width: 88px; } @media (min-width: 40rem) { .feed-card__media { width: 112px; } } .feed-card__media img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); background: var(--card-2); } .feed-card__count { position: absolute; right: 4px; bottom: 4px; padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: rgb(0 0 0 / 0.62); color: #fff; } .feed-card__nophoto { display: grid; place-items: center; align-content: center; gap: 2px; width: 100%; aspect-ratio: 1; border-radius: var(--radius-s); background: var(--tint); color: var(--deep); } .feed-card__nophoto-n { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1; } .feed-card__nophoto-l { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; } .feed-card__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1 1 auto; } .feed-card__by { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; min-width: 0; } /* Raised above the stretched link so the name stays independently clickable. */ .feed-card__angler { position: relative; z-index: 1; font-weight: 700; } .feed-card__angler--plain { color: var(--ink-2); } .feed-card__dot { color: var(--ink-3); } .feed-card__where { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* How far off the forecast point they were. Quiet - it is a qualifier on the spot, not a fact competing with it. */ .feed-card__offset { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--line-2); font-variant-numeric: tabular-nums; } .feed-card__main { display: block; text-decoration: none; color: inherit; } .feed-card__main::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); } .feed-card__main:focus-visible { outline: none; } .feed-card__when { display: block; } .feed-card__haul { display: block; color: var(--ink); font-weight: 600; } .feed-card__note { margin: 0; color: var(--ink-2); font-size: var(--step--1); /* Two lines, then fade out. The excerpt is already cut to 180 characters in the service; this only guards a run of very short words. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .feed-card__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .feed-card__lure { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------- angler page --- */ .angler-head { margin-bottom: var(--sp-4); } .angler-links { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); } .angler-link { font-size: var(--step--1); font-weight: 700; } /* A rating bucket with almost nothing behind it must not read as evidence. */ .rating-table tr.is-thin { color: var(--ink-3); } .rating-table tr.is-thin .rating-pill { opacity: 0.55; } .verdict-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--line-2); color: var(--ink-2); } .verdict-tag--hit { background: var(--tint); color: var(--deep); } .verdict-tag--miss { background: color-mix(in srgb, var(--rust) 16%, var(--card)); color: var(--rust); } .verdict-tag--partial { background: color-mix(in srgb, var(--amber) 16%, var(--card)); color: var(--amber); } .pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); } .pager__at { flex: 1 1 auto; text-align: center; } /* --------------------------------------------------- feed controls --- */ /* The four filter rows stack: spot, time window, angler, sort. Each row is unlabelled - the chips say what they do - and carries its aria-label on the