/* ========================================================================== 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; 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; } /* ------------------------------------------------------- entry list --- */ .log-list__title { margin-top: var(--sp-6); } .entry-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .entry { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; } .entry__link { display: flex; gap: var(--sp-3); align-items: stretch; padding: var(--sp-3); min-height: 88px; text-decoration: none; color: inherit; } .entry__link:hover { background: var(--card-2); } .entry__thumb { flex: none; width: 76px; } .entry__thumb img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-s); background: var(--card-2); } .entry__thumb--none { display: grid; place-items: center; height: 76px; border-radius: var(--radius-s); background: var(--tint); color: var(--deep); } .entry__thumb-n { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; } .entry__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1 1 auto; } .entry__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); } .entry__where { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entry__when { flex: none; } .entry__haul { color: var(--ink-2); font-size: var(--step--1); } .entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: auto; } .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; } /* ----------------------------------------------------------- verdict --- */ /* The payoff: what we said, against what happened. */ .detail-head { margin-bottom: var(--sp-4); } .detail-head__by { margin: 0; } .verdict { border: 1px solid var(--line); border-left: 5px solid var(--ink-3); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-1); padding: var(--sp-4); margin-bottom: var(--sp-4); } .verdict--hit { border-left-color: var(--deep); } .verdict--miss { border-left-color: var(--rust); } .verdict--partial { border-left-color: var(--amber); } .verdict--unknown { border-left-color: var(--ink-3); } .verdict__grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr auto 1fr; align-items: center; } .verdict__side { min-width: 0; } .verdict__side--actual { text-align: right; } .verdict__cap { margin: 0 0 var(--sp-1); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .verdict__rating { margin: 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; font-weight: 600; overflow-wrap: anywhere; } .verdict__rating--none { color: var(--ink-3); } .verdict__score { margin: 0; font-size: var(--step-1); color: var(--ink-2); font-weight: 600; } .verdict__of { font-size: var(--step--1); color: var(--ink-3); font-weight: 400; } .verdict__sub { margin: var(--sp-2) 0 0; color: var(--ink-3); } .verdict__vs { align-self: center; flex: none; font-family: var(--font-display); font-style: italic; color: var(--ink-3); font-size: var(--step-0); } .verdict__call { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-2); } .verdict__tag { display: inline-block; margin: 0 0 var(--sp-2); padding: 3px 10px; border-radius: 999px; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--line-2); color: var(--ink-2); } .verdict--hit .verdict__tag { background: var(--tint); color: var(--deep); } .verdict--miss .verdict__tag { background: color-mix(in srgb, var(--rust) 16%, var(--card)); color: var(--rust); } .verdict--partial .verdict__tag { background: color-mix(in srgb, var(--amber) 16%, var(--card)); color: var(--amber); } .verdict__line { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; } .verdict__detail { margin: 0; color: var(--ink-3); max-width: 60ch; } @media (min-width: 40rem) { .verdict { padding: var(--sp-5); } .verdict__rating { font-size: var(--step-3); } } /* --------------------------------------------------------- detail bits --- */ .fact-list { margin: 0; display: grid; gap: 0; } .fact { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-2); } .fact:last-child { border-bottom: 0; } .fact dt { color: var(--ink-3); font-size: var(--step--1); } .fact dd { margin: 0; min-width: 0; } .detail-notes { margin: 0; white-space: pre-wrap; max-width: 62ch; } .detail-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); } .detail-delete { margin: 0; }