/* ==========================================================================
   Base layer: reset, typography, header, and the primitives every screen uses.
   Mobile-first - base rules are the phone layout, min-width queries add the rest.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* Devanagari needs vertical room: matras sit above the line and the
   shirorekha clips easily at tight line-heights. */
:lang(ne), .ne { line-height: 1.6; }

img, svg { max-width: 100%; display: block; }
a { color: var(--brand-deep); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--text);
  padding: var(--s3) var(--s4); border-radius: var(--radius); z-index: 100;
}
.skip-link:focus { left: var(--s4); top: var(--s2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- layout ------------------------------------------------------------ */

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s4);
}
@media (min-width: 900px) { .wrap { padding-inline: var(--s8); } }

/* ---- header ------------------------------------------------------------ */

.site-header {
  background: var(--brand);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 56px;
}
@media (min-width: 900px) {
  .site-header__bar { height: var(--header-h); gap: var(--s6); }
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand__tile {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent); /* shows briefly while the image loads */
  object-fit: cover;
  display: block;
  flex: none;
}
.brand__names { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-brand);
  font-size: 16.5px; font-weight: 600; letter-spacing: .1px;
}
.brand__name em { font-style: normal; color: var(--sand); }
.brand__tagline { font-size: 11.5px; color: rgba(255,255,255,.6); letter-spacing: .3px; }
@media (max-width: 599px) { .brand__tagline { display: none; } }

.spacer { flex: 1; }

/* segmented control - role switcher and language toggle */
.seg {
  display: flex; gap: 2px;
  background: rgba(255,255,255,.10);
  padding: 3px; border-radius: var(--radius);
}
.seg__btn {
  padding: 7px 15px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.7);
  transition: background .15s ease-out, color .15s ease-out;
}
.seg__btn:hover { color: #fff; }
.seg__btn[aria-current="true"], .seg__btn.is-active {
  background: #fff; color: var(--brand); box-shadow: var(--shadow-sm);
}
.seg--lang .seg__btn { padding: 6px 11px; font-size: 12px; font-weight: 700; }

/* ---- cards and panels -------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s5);
}

.badge {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  padding: 3px 9px; border-radius: var(--radius-sm);
}
.badge--ok     { background: var(--ok-bg);     color: var(--ok-fg); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn-fg); }
.badge--review { background: var(--review-bg); color: var(--review-fg); }
.badge--dead   { background: var(--dead-bg);   color: var(--dead-fg); }
.badge--draft  { background: var(--draft-bg);  color: var(--draft-fg); }

/* ---- glyph tile --------------------------------------------------------
   The signature element: a two-character Devanagari abbreviation of the
   species, used wherever a listing has no photo. That is the common case,
   so it is designed to look deliberate rather than degraded. */

.glyph {
  display: grid; place-items: center;
  font-family: var(--font-brand); font-weight: 600;
  border-radius: var(--radius);
  background: var(--output-tint); color: var(--output-ink);
}
.glyph--input { background: var(--input-tint); color: var(--input-ink); }
.glyph--card  { width: 100%; height: 132px; font-size: 34px; }
.glyph--row   { width: 40px; height: 40px; font-size: 15px; }
.glyph--hero  { width: 240px; height: 240px; font-size: 64px; }

/* ---- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s ease-out, border-color .15s ease-out;
  text-decoration: none;
}
.btn--primary   { background: var(--brand);   color: #fff; }
.btn--primary:hover { background: var(--brand-deep); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--hairline); }
.btn--secondary:hover { border-color: var(--brand-deep); }
.btn--accent    { background: var(--accent);  color: #fff; }
.btn--ghost     { color: var(--text-muted); min-height: auto; padding: 4px 0; }
.btn--ghost:hover { color: var(--text); text-decoration: underline; }

/* ---- footer ------------------------------------------------------------ */

.site-footer {
  margin-top: var(--s16);
  padding: var(--s6) 0;
  border-top: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: 12.5px;
}

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

/* ==========================================================================
   Forms, auth and the OTP keypad
   ========================================================================== */

.page-narrow { max-width: 560px; padding-block: var(--s8) var(--s12); }
.page-wide   { max-width: 1000px; padding-block: var(--s8) var(--s12); }

.page-title { font-size: 22px; font-weight: 600; line-height: 1.3; }
@media (min-width: 900px) { .page-title { font-size: 26px; line-height: 1.25; } }
.page-lede { margin-top: var(--s2); color: var(--text-muted); }

.field { margin-bottom: var(--s4); }
.field__label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--text-muted); margin-bottom: var(--s1);
}
.field__req { color: var(--accent); }
.field__input, .field select, .field input[type="text"], .field input[type="number"],
.field textarea, select.field__input {
  width: 100%; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.field__input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px rgba(18,87,74,.15);
}
.field__hint { font-size: 11.5px; color: var(--text-faint); margin-top: var(--s1); }
.field__error { font-size: 12px; color: var(--accent); margin-top: var(--s1); }
.field--error .field__input { border-color: var(--accent); }

.form-errors {
  background: var(--warn-bg); color: var(--warn-fg);
  border-radius: var(--radius); padding: var(--s3) var(--s4);
  font-size: 13px; margin-bottom: var(--s4);
}

.phone-input { display: flex; align-items: stretch; }
.phone-input__cc {
  display: grid; place-items: center; padding: 0 var(--s3);
  background: var(--page-alt); color: var(--text-muted);
  border: 1px solid var(--hairline); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 13.5px; font-weight: 600;
}
.phone-input .field__input { border-radius: 0 var(--radius) var(--radius) 0; }

/* choice chips - seller type, filters */
.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choices input[type="radio"], .choices input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.choice {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--surface);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease-out, border-color .15s ease-out;
}
.choice:hover { border-color: var(--brand-deep); }
input:checked + .choice { background: var(--brand); color: #fff; border-color: var(--brand); }
input:focus-visible + .choice { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

/* OTP */
.otp { display: flex; gap: var(--s2); justify-content: center; margin: var(--s5) 0; }
.otp__input {
  width: 100%; max-width: 56px; height: 60px; text-align: center;
  font-size: 24px; font-weight: 600; letter-spacing: 4px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface);
}
.otp-single { max-width: 240px; margin-inline: auto; }
.otp-single .otp__input { max-width: none; letter-spacing: 12px; }

.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s2); max-width: 280px; margin: var(--s5) auto;
}
.keypad__key {
  min-height: 52px; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface); font-size: 19px; font-weight: 600;
}
.keypad__key:active { background: var(--page-alt); }

.dev-code {
  background: var(--review-bg); color: var(--review-fg);
  border-radius: var(--radius); padding: var(--s3) var(--s4);
  font-size: 13px; margin-bottom: var(--s4);
}

.steps { display: flex; gap: var(--s2); margin-bottom: var(--s6); }
.step { flex: 1; display: flex; flex-direction: column; gap: var(--s1); }
.step__dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--hairline); color: var(--text-muted);
}
.step--done .step__dot, .step--current .step__dot { background: var(--brand-deep); color: #fff; }
.step__label { font-size: 11.5px; color: var(--text-faint); }
.step--done .step__label, .step--current .step__label { color: var(--text); }
.step__bar { height: 3px; border-radius: 2px; background: var(--hairline); }
.step--done .step__bar, .step--current .step__bar { background: var(--brand-deep); }

.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  margin-top: var(--s6);
}

.benefits { list-style: none; display: grid; gap: var(--s3); }
.benefit { display: flex; gap: var(--s3); font-size: 13.5px; }
.benefit__tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok-fg);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

.messages { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.message { padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: 13px; }
.message--success { background: var(--ok-bg); color: var(--ok-fg); }
.message--info    { background: var(--page-alt); color: var(--text); }
.message--error   { background: var(--warn-bg); color: var(--warn-fg); }

.grid-2 { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-2 > .span-2 { grid-column: 1 / -1; }

.layout-aside { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .layout-aside { grid-template-columns: 1fr 320px; align-items: start; } }
[x-cloak] { display: none !important; }

.bs-date { position: relative; }
.bs-date__ad { font-size: 11.5px; color: var(--text-muted); margin-top: var(--s1); }
.bs-date__hint { font-size: 11.5px; color: var(--text-faint); margin-top: var(--s1); }

.bs-date__panel {
  position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 30;
  width: 260px; padding: var(--s3); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.bs-date__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.bs-date__nav button {
  font-size: 16px; line-height: 1; padding: var(--s1) var(--s2);
  border-radius: var(--radius-sm);
}
.bs-date__nav button:disabled { opacity: .35; cursor: default; }
.bs-date__nav button:not(:disabled):hover { background: var(--page-alt); }
.bs-date__month { font-size: 13px; font-weight: 600; }
.bs-date__weekdays, .bs-date__week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.bs-date__weekdays span {
  font-size: 10.5px; text-align: center; color: var(--text-faint); padding-bottom: 4px;
}
.bs-date__day {
  aspect-ratio: 1; display: grid; place-items: center; font-size: 12.5px;
  border-radius: var(--radius-sm);
}
.bs-date__day:not(:disabled):hover { background: var(--page-alt); }
.bs-date__day--empty { visibility: hidden; }
.bs-date__day--today { font-weight: 700; color: var(--brand-deep); }
.bs-date__day--selected { background: var(--brand-deep); color: #fff; }

/* ==========================================================================
   Listing card - the marketplace grid and the seller's live preview
   ========================================================================== */

.cards {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.card:hover { border-color: var(--brand-deep); box-shadow: var(--shadow-card); }
/* `display: block` here would override .glyph's grid centring, because
   .card__media is declared later in the cascade and the glyph tile carries
   both classes. Only set display for the photo case. */
.card__media { text-decoration: none; }
.card__media:not(.glyph) { display: block; }
.card__media img { width: 100%; height: 132px; object-fit: cover; }
.card__body { padding: var(--s4); display: grid; gap: var(--s2); }
.card__title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.card__title a { color: var(--text); text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__price strong { font-size: 19px; font-weight: 700; color: var(--brand); }
.card__unit { font-size: 12px; color: var(--text-muted); }
.card__facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2);
  font-size: 11.5px; color: var(--text-muted);
}
.card__facts li { background: var(--page-alt); padding: 2px 8px; border-radius: var(--radius-sm); }
.card__place {
  display: flex; align-items: center; gap: var(--s1);
  font-size: 12px; color: var(--text-muted);
}
.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  font-size: 11.5px; padding-top: var(--s2); border-top: 1px solid var(--hairline);
}
.card__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--ok-fg); font-weight: 600; }
.card__unverified { color: var(--text-faint); }
.card__expiry { color: var(--text-muted); }
.card__expiry--soon { color: var(--accent); font-weight: 600; }

.badge--input  { background: var(--input-tint);  color: var(--input-ink); }
.badge--output { background: var(--output-tint); color: var(--output-ink); }

.preview { position: sticky; top: calc(var(--header-h) + var(--s4)); }
.preview__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
  color: var(--text-muted); margin-bottom: var(--s2);
}

/* ==========================================================================
   Seller dashboard: stats, table, wizard
   ========================================================================== */

.form-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.seg--light { background: var(--page-alt); }
.seg--light .seg__btn { color: var(--text-muted); text-decoration: none; }
.seg--light .seg__btn.is-active { background: var(--surface); color: var(--brand); }

.notice { padding: var(--s4); border-radius: var(--radius); font-size: 13.5px; }
.notice--review { background: var(--review-bg); color: var(--review-fg); }

.stats { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4);
  display: grid; gap: var(--s1);
}
.stat__k { font-size: 12px; color: var(--text-muted); }
.stat__v { font-size: 24px; font-weight: 700; color: var(--brand); }
.stat--warn .stat__v { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none;
}
.chip:hover { border-color: var(--brand-deep); }
.chip--on { background: var(--brand); color: #fff; border-color: var(--brand); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  font-size: 13.5px;
}
.table thead th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
  color: var(--text-muted); background: var(--page-alt);
  padding: var(--s3) var(--s4); white-space: nowrap;
}
.table td { padding: var(--s3) var(--s4); border-top: 1px solid var(--hairline); vertical-align: top; }
.table tbody tr:hover { background: #FCFAF6; }
.table-empty { text-align: center; color: var(--text-muted); padding: var(--s8); }
.cell-item { display: flex; gap: var(--s3); align-items: flex-start; }
.cell-sub { font-size: 11.5px; color: var(--text-muted); }
.cell-reason { font-size: 11.5px; color: var(--accent); margin-top: var(--s1); max-width: 240px; }
.is-soon { color: var(--accent); font-weight: 600; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.row-actions form { display: inline; }

/* Below 700px a seven-column table is unusable; stack each row as a card. */
@media (max-width: 699px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    margin-bottom: var(--s3); padding: var(--s2);
  }
  .table td { border-top: 0; padding: var(--s1) var(--s2); }
}

.wizard { list-style: none; display: grid; gap: var(--s2); margin-bottom: var(--s5); }
@media (min-width: 760px) { .wizard { grid-template-columns: repeat(4, 1fr); } }
.wizard__step a, .wizard__step button {
  display: grid; gap: 2px; text-decoration: none;
  padding: var(--s3); border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--page-alt);
  font: inherit; text-align: left; width: 100%; cursor: pointer;
}
.wizard__step--current a, .wizard__step--current button {
  background: var(--surface); border-color: var(--brand-deep); box-shadow: var(--shadow-tab-out);
}
.wizard__n { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--text-faint); }
.wizard__step--current .wizard__n { color: var(--accent); }
.wizard__label { font-size: 13px; font-weight: 600; color: var(--text); }

.group { border: 0; margin-bottom: var(--s6); }
.group__title { font-size: 13px; font-weight: 600; margin-bottom: var(--s3); color: var(--text); }
.tips { list-style: none; display: grid; gap: var(--s2); font-size: 12.5px; color: var(--text-muted); }
.tips li::before { content: "· "; }

.photos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.photo { position: relative; }
.photo img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); }
.photo__remove {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; line-height: 1;
}
.photo-upload { margin-top: var(--s3); display: grid; gap: var(--s1); }

.error-summary { list-style: none; margin-top: var(--s2); display: grid; gap: var(--s1); }
.error-summary li { font-size: 12.5px; }
.error-summary a { color: inherit; font-weight: 600; }

/* ==========================================================================
   Marketplace browse
   ========================================================================== */

.browse { padding-block: var(--s5) var(--s12); }

/* The catalogue pages carry a one-line description instead of the old
   tab pair - the header nav already holds both catalogues and marks the
   current one, so tabs here were the same navigation twice. */
.browse__lede {
  margin: 0 0 var(--s5);
  font-size: 14px; line-height: 1.6;
  color: var(--text-muted);
  max-width: 68ch;
}

.chips--cats { margin-top: var(--s4); }

.browse__body { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 900px) { .browse__body { grid-template-columns: 240px 1fr; align-items: start; } }

.filters-toggle { margin-top: var(--s4); width: 100%; }
@media (min-width: 900px) { .filters-toggle { display: none; } }

.filters {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4);
}
.filters__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.filters__head strong { font-size: 13px; }
.filters__head .btn--ghost { margin-left: auto; font-size: 12px; }
.filters__close { display: none; font-size: 24px; line-height: 1; color: var(--text-muted); }
.filters__group { border: 0; margin-bottom: var(--s5); }
.filters__group legend {
  font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: var(--s2);
}
.range { display: flex; align-items: center; gap: var(--s2); }
.range .field__input { min-width: 0; }
.filters__apply { width: 100%; }
@media (min-width: 900px) { .filters__apply { display: none; } }

/* On a phone the sidebar becomes a bottom sheet. */
@media (max-width: 899px) {
  .filters {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    max-height: 85vh; overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.25);
    transform: translateY(101%); transition: transform .2s ease-out;
  }
  .filters--open { transform: translateY(0); }
  .filters__close { display: block; }
}

.results__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
}
.results__count { font-size: 13.5px; }
.results__count strong { font-size: 17px; color: var(--brand); }
.results__for { color: var(--text-muted); }
/* .field__input sets width:100%; this must win, so keep it specific. */
.results__bar .results__sort { width: auto; min-width: 170px; flex: none; }
.results__note {
  font-size: 12px; color: var(--text-muted); background: var(--page-alt);
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm); margin-bottom: var(--s4);
}
.results__spinner { width: 14px; height: 14px; opacity: 0; }
.results__spinner.htmx-request {
  opacity: 1; border: 2px solid var(--hairline); border-top-color: var(--brand-deep);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.layouts { flex: none; }
.layouts .seg__btn {
  padding: 7px 9px; text-decoration: none; display: grid; place-items: center;
  color: var(--text-muted);
}
.layouts .seg__btn.is-active { color: var(--brand); }
.layouts svg { display: block; }

/* list layout */
.rows { list-style: none; display: grid; gap: var(--s3); }
.row {
  display: grid; gap: var(--s3); align-items: start;
  grid-template-columns: 40px 1fr;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4);
}
@media (min-width: 760px) { .row { grid-template-columns: 40px 1fr 160px; } }
.row__title { font-size: 14.5px; font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.row__title a { color: var(--text); text-decoration: none; }
.row__title a:hover { text-decoration: underline; }
.row__desc { font-size: 12.5px; color: var(--text-muted); margin: var(--s1) 0 var(--s2); }
.row__side { display: grid; gap: var(--s2); align-content: start; }
@media (min-width: 760px) { .row__side { text-align: right; justify-items: end; } }

/* map layout */
.maplayout { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .maplayout { grid-template-columns: 1fr 320px; } }
.maplayout__map { position: relative; min-height: 420px; background: var(--page-alt); border-radius: var(--radius); overflow: hidden; }
#map { position: absolute; inset: 0; }
.map-consent { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s3); text-align: center; padding: var(--s5); }
.map-attrib { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: var(--text-muted); z-index: 500; background: rgba(255,255,255,.8); padding: 1px 5px; border-radius: 3px; }
.maplayout__side { display: grid; gap: var(--s2); max-height: 520px; overflow-y: auto; }
.mapitem {
  display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s3); align-items: center;
  padding: var(--s3); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
}
.mapitem:hover { border-color: var(--brand-deep); }
.mapitem__text { display: grid; gap: 2px; font-size: 13px; }
.mapitem__price { font-weight: 700; color: var(--brand); font-size: 13.5px; }

/* toggles */
.toggle { display: flex; align-items: center; gap: var(--s3); font-size: 13px; cursor: pointer; margin-bottom: var(--s3); }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track {
  position: relative; width: 34px; height: 20px; flex: none;
  background: var(--hairline); border-radius: 999px; transition: background .15s ease-out;
}
.toggle__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: left .15s ease-out;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.toggle input:checked + .toggle__track { background: var(--brand-deep); }
.toggle input:checked + .toggle__track .toggle__knob { left: 16px; }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

.empty { text-align: center; padding: var(--s12) var(--s4); }
.empty__title { font-size: 18px; font-weight: 600; }
.empty__lede { color: var(--text-muted); margin-top: var(--s2); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s8); }
.pagination__status { font-size: 13px; color: var(--text-muted); }

/* Table -> cards below 700px; the listings table has six columns. */
@media (max-width: 699px) {
  .table--listings thead { display: none; }
  .table--listings, .table--listings tbody, .table--listings tr, .table--listings td { display: block; width: 100%; }
  .table--listings tr { border: 1px solid var(--hairline); border-radius: var(--radius); margin-bottom: var(--s3); padding: var(--s2); }
  .table--listings td { border-top: 0; padding: var(--s1) var(--s2); }
}

/* ==========================================================================
   Listing detail, seller card, enquiry thread
   ========================================================================== */

.detail { padding-block: var(--s5) var(--s12); }
.detail__back { margin-bottom: var(--s4); display: inline-block; }
.detail__grid { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .detail__grid { grid-template-columns: minmax(0,1.6fr) minmax(300px,1fr); align-items: start; } }

.detail__hero { border-radius: var(--radius); overflow: hidden; background: var(--page-alt); }
.detail__hero img { width: 100%; height: auto; object-fit: cover; }
.detail__hero .glyph--hero { width: 100%; max-width: none; height: 260px; }
.detail__badges { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4); }
.detail__title { font-size: 24px; font-weight: 600; line-height: 1.25; margin-top: var(--s2); }
@media (min-width: 900px) { .detail__title { font-size: 28px; } }
.detail__price { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.detail__price strong { font-size: 32px; font-weight: 700; color: var(--brand); line-height: 1.1; }
.detail__price span { color: var(--text-muted); }
.detail__desc { margin-top: var(--s4); }

.specs { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; margin-top: var(--s5); }
@media (min-width: 760px) { .specs { grid-template-columns: repeat(3, 1fr); } }
.specs__cell {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s3);
}
.specs dt { font-size: 11.5px; color: var(--text-muted); }
.specs dd { font-size: 13.5px; font-weight: 600; margin-top: 2px; }

.detail__logistics { margin-top: var(--s5); display: grid; gap: var(--s4); }
.logi { display: flex; gap: var(--s3); align-items: flex-start; }
.logi__icon { color: var(--brand-deep); flex: none; }

.detail__side { display: grid; gap: var(--s4); position: sticky; top: calc(var(--header-h) + var(--s4)); }
.seller-card { display: grid; gap: var(--s3); }
.seller-card__head { display: flex; gap: var(--s3); align-items: center; }
.seller-card__phone, .seller-card__enquire { width: 100%; }

.phone-revealed { display: grid; gap: var(--s2); }
.phone-revealed__number { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.phone-revealed__actions { display: flex; gap: var(--s2); }
.phone-revealed__actions .btn { flex: 1; }
.phone-gate { display: grid; gap: var(--s2); }

.market__line { font-size: 13px; }
.market__outlier { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: var(--s2); }

.thread { display: grid; gap: var(--s3); margin-top: var(--s5); }
.msg { padding: var(--s3) var(--s4); border-radius: var(--radius); max-width: 85%; }
.msg--buyer  { background: var(--page-alt); justify-self: start; }
.msg--seller { background: var(--output-tint); justify-self: end; }
.msg__body { font-size: 13.5px; }
.msg__meta { font-size: 11px; color: var(--text-muted); margin-top: var(--s1); }

/* On a phone the seller card becomes a sticky action bar at the bottom. */
@media (max-width: 959px) {
  .detail__side { position: static; }
}

/* ==========================================================================
   Staff screens
   ========================================================================== */

.staffnav { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.staffnav__bar { display: flex; gap: var(--s5); overflow-x: auto; }
.staffnav__link {
  padding: var(--s4) 0; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.staffnav__link:hover { color: var(--text); }
.staffnav__link.is-active { color: var(--brand); border-bottom-color: var(--accent); }

.searchbox { display: flex; gap: var(--s2); }
.searchbox .field__input { width: auto; min-width: 220px; }

.chip__n {
  margin-left: var(--s1); padding: 0 6px; border-radius: 999px;
  background: rgba(0,0,0,.08); font-size: 11px;
}
.chip--on .chip__n { background: rgba(255,255,255,.25); }

.bulkbar {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  background: var(--page-alt); border-radius: var(--radius); font-size: 13px;
}

.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(30,42,35,.45); }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(520px, 100%);
  background: var(--surface); padding: var(--s6); overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0,0,0,.2);
}
.drawer__head { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.drawer__head .filters__close { display: block; margin-left: auto; }
.drawer__actions { display: grid; gap: var(--s3); margin-top: var(--s6); }
.rejectform { display: grid; gap: var(--s2); }
.doclist { list-style: none; display: grid; gap: var(--s2); font-size: 13px; }

.modqueue { display: grid; gap: var(--s3); margin-top: var(--s4); }
.modcard {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4);
}
.modcard__title { font-size: 14.5px; font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.modcard__title a { color: var(--text); text-decoration: none; }
.modcard__note {
  font-size: 12.5px; color: var(--text); background: var(--page-alt);
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm); margin-top: var(--s2);
}
.modcard__actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s3); }
.inlineform { display: flex; gap: var(--s2); align-items: center; }
.inlineform .field__input { width: auto; min-width: 180px; }

/* ---- reports ---- */
.reports { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 960px) { .reports { grid-template-columns: 1fr 1fr; } }
.report { display: grid; gap: var(--s3); align-content: start; }
.report--wide { grid-column: 1 / -1; }
.report__head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.report__head .cell-sub { margin-left: auto; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 12px; }
.legend__item { display: inline-flex; align-items: center; gap: var(--s2); }
.legend__swatch { width: 10px; height: 10px; border-radius: 2px; }
.legend__item strong { color: var(--brand); }

.bar { display: grid; gap: var(--s1); }
.bar__label { display: flex; justify-content: space-between; font-size: 12.5px; }
.bar__track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--page-alt); }
.bar__seg { display: block; height: 100%; }
.bar__seg--1 { background: var(--brand-deep); }
.bar__seg--2 { background: var(--brand-mid); }
.bar__seg--3 { background: var(--accent); }
.bar__seg--4 { background: var(--sand); }

.demand { list-style: none; display: grid; gap: var(--s2); }
.demand__row { display: flex; align-items: center; gap: var(--s3); font-size: 13px; }
.demand__rank {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--page-alt); display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.demand__term { font-weight: 600; }
.demand__delta { margin-left: auto; color: var(--ok-fg); font-weight: 600; font-size: 12px; }
.demand__delta.is-down { color: var(--accent); }

.gaps { list-style: none; display: grid; gap: var(--s3); }
.gap { display: grid; gap: 2px; font-size: 13px; }

/* ==========================================================================
   Home page: hero carousel
   ==========================================================================
   A split panel - copy on the brand ground, picture beside it - rather than
   text laid over a full-bleed photo. A photo-background hero looks empty until
   someone uploads good photography, and most of these slides will run without
   an image for a while.
   ========================================================================== */

.hero {
  position: relative;
  margin-top: var(--s5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #0B3E35 0%, var(--brand) 45%, var(--brand-deep) 100%);
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;         /* all slides share one cell: no height jump */
  display: grid;
  gap: 0;
  min-width: 0;
  animation: hero-fade 380ms ease both;
}
@keyframes hero-fade { from { opacity: 0 } to { opacity: 1 } }
@media (min-width: 860px) {
  .hero__slide { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
  /* Without a picture the copy simply takes the whole panel. */
  .hero__slide--plain { grid-template-columns: 1fr; }
}

.hero__copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s3);
  padding: var(--s8) var(--s6) var(--s12);
  color: #fff;
  min-width: 0;
}
@media (min-width: 860px) {
  .hero__copy { padding: var(--s12) var(--s12) var(--s12) var(--s8); }
}
@media (min-width: 1200px) {
  .hero__copy { padding-inline: var(--s16) var(--s12); }
}

.hero__eyebrow {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--sand);
}
.hero__headline {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.14;
  font-weight: 700;
  text-wrap: balance;
}
.hero__body {
  margin: 0;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }

/* A readable outline button on the dark hero ground; .btn--secondary would
   be a white slab and fight the accent CTA next to it. */
.btn--hero-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}
.btn--hero-ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255,255,255,.7); }

.hero__media { position: relative; min-height: 200px; }
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Feather the picture into the copy so the seam is not a hard vertical line. */
@media (min-width: 860px) {
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to right, var(--brand) 0%, rgba(14,74,63,.35) 22%, rgba(14,74,63,0) 55%);
  }
}
@media (max-width: 859px) {
  .hero__media { min-height: 190px; order: -1; }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(14,74,63,.15), var(--brand));
  }
}

/* On a phone the stacked hero (media above copy) was running to roughly
   three-quarters of the viewport height before any real content - cards,
   the reason someone opened the site - appeared. Trimmed via padding, gap
   and a two-line clamp on the body text rather than a hard max-height:
   slide copy is admin-edited and varies in length, and a fixed cap would
   clip a longer one unpredictably. */
@media (max-width: 599px) {
  .hero__media { min-height: 110px; }
  .hero__copy { padding: var(--s5) var(--s4) var(--s6); gap: var(--s2); }
  .hero__eyebrow { display: none; }
  .hero__headline { font-size: clamp(21px, 6vw, 26px); }
  .hero__body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero__actions { margin-top: var(--s1); }
}

.hero__controls {
  position: absolute; right: var(--s5); bottom: var(--s5);
  display: flex; align-items: center; gap: var(--s2);
}
@media (max-width: 859px) { .hero__controls { right: var(--s4); bottom: var(--s3); } }

/* This rule must come AFTER the 859px override above: both match at phone
   widths, and CSS breaks same-specificity ties by source order, not by
   which media query is narrower. .hero__controls is absolutely positioned
   against the whole .hero panel, bottom-right - which used to land in empty
   space below the button row. With the panel this much shorter that spot
   now collides with the buttons, so move it to the top instead, over the
   compact image strip. */
@media (max-width: 599px) {
  .hero__controls { top: var(--s2); right: var(--s3); bottom: auto; }
}

.hero__arrow {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  cursor: pointer; transition: background .15s ease;
}
.hero__arrow:hover { background: rgba(255, 255, 255, .3); }

.hero__dots { display: flex; gap: 6px; padding-inline: var(--s2); }
.hero__dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, .4); border: none; cursor: pointer;
  transition: background .15s ease, width .15s ease;
}
.hero__dot--on { background: var(--sand); width: 20px; border-radius: 4px; }

/* ==========================================================================
   Home page: catalogue sliders
   ========================================================================== */

/* Each catalogue gets its own tinted panel - the same "coloured card" language
   the hero and promo sections already use - so the eye can tell where Fish
   Output ends and Fish Inputs begins without reading either title. Reuses the
   category-tint tokens already meaningful elsewhere (the badge on every
   listing card), rather than inventing new colours. */
.strip {
  margin-top: var(--s12);
  padding: var(--s6) var(--s4);
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) { .strip { padding: var(--s8) var(--s6); } }
.strip--output { background: var(--output-tint); }
.strip--input  { background: var(--input-tint); }

.strip__head {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap;
  padding-bottom: var(--s4);
  border-bottom: 1px solid rgba(20, 40, 30, .1);
  margin-bottom: var(--s5);
}
.strip__titles { display: grid; gap: 2px; min-width: 0; }
.strip__title { font-size: 19px; font-weight: 600; margin: 0; line-height: 1.25; }
.strip__lede { font-size: 12.5px; color: var(--text-muted); margin: 0; }

.strip__nav { display: flex; gap: var(--s2); }
.strip__arrow {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--hairline); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.strip__arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.strip__arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 719px) { .strip__nav { display: none; } }

.strip__more {
  font-size: 13px; font-weight: 600; color: var(--brand);
  text-decoration: none; white-space: nowrap;
}
.strip__more:hover { text-decoration: underline; }

/* The track scrolls natively - touch and trackpad need no JavaScript.
   scroll-padding keeps a snapped card clear of the container edge. */
.slider { position: relative; }
.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 1fr);
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--s1);
  padding-bottom: var(--s3);   /* room for the scrollbar, not the cards */
  scrollbar-width: thin;
}
@media (min-width: 900px)  { .slider__track { grid-auto-columns: minmax(270px, 1fr); } }
@media (min-width: 1400px) { .slider__track { grid-auto-columns: minmax(290px, 1fr); } }
.slider__item { scroll-snap-align: start; min-width: 0; }
.slider__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.strip__foot { display: flex; justify-content: center; margin-top: var(--s5); }
@media (min-width: 720px) { .strip__foot { display: none; } }
.strip__empty {
  color: var(--text-muted); font-size: 13.5px;
  padding: var(--s8); text-align: center;
  /* White, not another tint: it sits inside the strip's own tinted panel now,
     and a second competing tint would muddy rather than separate. */
  background: var(--surface); border-radius: var(--radius);
}

/* ---- closing call to action -------------------------------------------- */

.promo {
  margin-top: var(--s16);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  color: #fff;
}
.promo__inner {
  padding: var(--s12) var(--s6);
  display: grid; gap: var(--s3); justify-items: center; text-align: center;
}
.promo__title { margin: 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; }
.promo__body {
  margin: 0; max-width: 56ch; line-height: 1.6;
  color: rgba(255, 255, 255, .88); font-size: 14.5px;
}
.promo__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }

/* ==========================================================================
   Header navigation
   ========================================================================== */

.site-nav { display: flex; gap: var(--s5); margin-left: var(--s6); }
.site-nav a {
  color: rgba(255, 255, 255, .86);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  padding-block: var(--s2);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .55); }

/* Current section. Underline AND full-strength colour, because the sand
   staff link and the white marketplace links start at different brightnesses
   - colour alone would read as "current" for one and not the other. */
.site-nav a[aria-current="page"] {
  color: #fff;
  font-weight: 600;
  border-bottom-color: var(--sand);
}
/* The staff link stays sand even when current - going white would drop the
   one cue that separates it from the marketplace links. Selector is written
   long enough to outrank the generic rule above. */
.site-nav__staff { color: var(--sand); }
.site-nav a.site-nav__staff[aria-current="page"] { color: var(--sand); }

/* Below 900px the nav drops to its own scrollable row instead of vanishing:
   a staff member or seller on a phone still needs to reach their screens. */
@media (max-width: 899px) {
  /* The bar's fixed height is what keeps the desktop header crisp, but a
     wrapped row has to be allowed to grow it - otherwise the second row
     spills out of the green background and lands on the page. */
  .site-header__bar {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding-block: var(--s2);
    row-gap: 0;
  }
  .site-nav {
    order: 10; width: 100%; margin-left: 0;
    gap: var(--s4); overflow-x: auto;
    padding-block: var(--s2);
    border-top: 1px solid rgba(255, 255, 255, .14);
    margin-top: var(--s2);
    /* The row scrolls sideways; hide the bar itself so it does not sit
       across the header. */
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { font-size: 13px; padding-block: var(--s1); }
}

/* On a phone the wordmark, language toggle, register link and login/account
   chip do not all fit on one line. The wordmark is the site's identity and
   the account chip is the reason you're here if you're logged in, so
   "Register as a seller" is the one that gives way - it stays reachable
   from the footer on every page. */
@media (max-width: 640px) {
  .header-register { display: none; }
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
  margin-top: var(--s16);
  border-top: 1px solid var(--hairline);
  background: var(--page-alt);
  color: var(--text-muted);
  font-size: 13px;
}

.site-footer__grid {
  display: grid; gap: var(--s8);
  padding-block: var(--s12) var(--s8);
}
@media (min-width: 700px)  { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .site-footer__grid { grid-template-columns: 2.2fr 1fr 1fr 1.3fr; gap: var(--s8); }
}

.brand--footer { text-decoration: none; }
.brand--footer .brand__name { color: var(--text); font-size: 16px; }
.site-footer__brand { display: grid; gap: var(--s3); align-content: start; }
.site-footer__blurb { margin: 0; max-width: 42ch; line-height: 1.65; }
.site-footer__note {
  margin: 0; font-size: 12px; color: var(--text-faint);
  padding-top: var(--s2); border-top: 1px solid var(--hairline);
  max-width: 42ch;
}

.site-footer__col { display: grid; gap: var(--s2); align-content: start; }
.site-footer__heading {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text); margin: 0 0 var(--s1);
}
.site-footer__col a {
  color: var(--text-muted); text-decoration: none;
  width: fit-content; border-bottom: 1px solid transparent;
}
.site-footer__col a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.site-footer__muted { color: var(--text-faint); font-size: 12.5px; }

.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: center;
  padding-block: var(--s4);
  border-top: 1px solid var(--hairline);
  font-size: 12px;
}

/* ==========================================================================
   Staff dashboard
   ========================================================================== */

.dash__group { margin-top: var(--s8); }
.dash__head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s4);
}
.dash__title { font-size: 15px; font-weight: 600; margin: 0; }
.dash__more {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--brand); text-decoration: none; white-space: nowrap;
}
.dash__more:hover { text-decoration: underline; }
.dash__note { margin: var(--s3) 0 0; font-size: 12px; color: var(--text-faint); }

/* Six tiles read better as 3x2 than as one long 6-wide row. */
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(6, 1fr); } }
.stats--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .stats--3 { grid-template-columns: repeat(3, 1fr); } }

.stat--input  { border-left: 3px solid var(--input-ink); }
.stat--output { border-left: 3px solid var(--output-ink); }

.dash__feed {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.dash__event {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.dash__event:last-child { border-bottom: none; }
.dash__action { font-weight: 600; color: var(--brand); white-space: nowrap; }
.dash__target { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dash__when { margin-left: auto; color: var(--text-faint); font-size: 12px; white-space: nowrap; }

/* ==========================================================================
   Long-form pages (about, contact, supported by)
   ========================================================================== */

.prose { max-width: 680px; }
.prose h2 {
  font-size: 17px; font-weight: 600;
  margin: var(--s8) 0 var(--s3);
  line-height: 1.3;
}
.prose p  { margin: 0 0 var(--s4); line-height: 1.7; color: var(--text); }
.prose ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
.prose li { margin-bottom: var(--s2); line-height: 1.65; }
/* Buttons keep their own colours: .prose a would otherwise outrank
   .btn--primary and paint its label dark green on a dark green fill. */
.prose a:not(.btn) { color: var(--brand); }

.contact__heading { font-size: 15px; font-weight: 600; margin: 0 0 var(--s3); }
.contact__list {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s5); margin: 0;
}
.contact__list dt { color: var(--text-muted); font-size: 13px; }
.contact__list dd { margin: 0; font-size: 13.5px; }

/* ==========================================================================
   Fish farm business planner (/planner/)
   The planner draws itself inside a Shadow DOM, so only the page around it
   is styled here. Its colour and font come from the tokens via the
   --ffp-* properties it reads from its host (SRS UI-5.2).
   ========================================================================== */

.planner-page { max-width: 1000px; padding-block: var(--s8) var(--s12); }
.planner-load {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s4); margin-top: var(--s5);
}
.planner-load__btn { position: relative; cursor: pointer; }
/* Visually hidden but still focusable, so the label works as the button for
   both mouse and keyboard users. */
.planner-load__input {
  position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer;
}
.planner-load__btn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.planner-load__hint { font-size: 13px; color: var(--text-muted); }
.planner-status { margin-top: var(--s4); }
.notice--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.notice--warn { background: var(--warn-bg); color: var(--warn-fg); }
.planner-host {
  display: block; margin-top: var(--s6); min-height: 480px;
  --ffp-primary: var(--brand);
  --ffp-font: var(--font-ui);
}
.planner-unsupported { margin-top: var(--s6); }