/* Boats in Sweden marketplace — design tokens and layout. See docs/DESIGN.md. */

:root {
  --gelcoat: #ffffff;
  --mist: #f1f3f1;
  --mist-deep: #e6eae8;
  --ink: #1b2a2e;
  --granite: #66716f;
  --foam: #d6dcd9;
  --line-strong: #b8c2be;
  --bris: #e4eeeb;
  --sea: #2a5f5a;
  --sea-dark: #1f4a46;
  --sea-tint: #cfe0db;
  --falu: #d2241c;        /* Boats in Sweden brand red, sampled from the compass mark */
  --falu-dark: #b01e17;
  --falu-tint: #fbe7e5;
  --sand-tint: #f4e9d2;   /* warm and calm: an ad we have hidden */
  --ochre: #9c6119;       /* a boat held for a buyer: warm, still for sale, and not the seller's red */
  --ochre-dark: #7a4b12;

  --ui: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;

  --fs-1: 0.8125rem;  /* 13 */
  --fs0: 1rem;        /* 16 */
  --fs1: 1.25rem;     /* 20 */
  --fs2: 1.5625rem;   /* 25 */
  --fs3: 1.9375rem;   /* 31 */
  --fs4: 2.4375rem;   /* 39 */
  --fs5: 3.0625rem;   /* 49 */

  --wrap: 1140px;
  --gutter: 20px;
  --radius: 6px;
  --radius-lg: 8px;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }

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

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

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--fs0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}

img { max-width: 100%; display: block; }
a { color: var(--sea); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sea-dark); }
h1, h2, h3 { font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs4); }
h2 { font-size: var(--fs2); }
h3 { font-size: var(--fs1); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
small { font-size: var(--fs-1); }
.muted { color: var(--granite); }
.small { font-size: var(--fs-1); }
.inline { display: inline; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--gelcoat); padding: 8px 12px; z-index: 100; border-radius: var(--radius); }
.skip:focus { left: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .card__link img, .btn, .chip span, .unit-switch span, .county { transition: background-color .15s ease, border-color .15s ease, fill .15s ease, color .15s ease; }
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.narrow-wide { max-width: 860px; }

/* ---------- header ---------- */
.site-header { background: var(--gelcoat); border-bottom: 1px solid var(--foam); }
.site-header__in { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.brand__mark { width: 38px; height: 38px; object-fit: contain; display: block; flex: none; }
.brand:hover { color: var(--ink); }
.brand:hover .brand__mark { opacity: .9; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand__tag { font-size: 0.625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--falu); white-space: nowrap; }
.brand--small .brand__mark { width: 32px; height: 32px; }
.brand--small .brand__name { font-size: 1rem; }
.site-nav { display: none; gap: 18px; }
.site-nav a, .site-header__link { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-nav a:hover, .site-header__link:hover { color: var(--sea); }
.site-nav a.is-current { border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.site-header__tools { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.site-header__link { white-space: nowrap; }
.textbutton { background: none; border: 0; padding: 0; color: var(--sea); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.textbutton:hover { color: var(--sea-dark); }
.textbutton--danger { color: var(--falu); }
.textbutton--strong { font-weight: 700; }
.textlink { color: var(--granite); }
@media (min-width: 720px) { .site-nav { display: flex; } }
@media (max-width: 719px) {
  .site-header__in { gap: 12px; min-height: 56px; }
  .site-header__tools { gap: 12px; }
  .brand { gap: 8px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 0.9375rem; }
  .site-header .brand__tag { display: none; }
  .site-header .btn--sell { padding: 8px 10px; font-size: 0.9375rem; }
  .btn__long { display: none; }
  .site-header .btn--sell { padding: 8px 11px; font-size: 0.9375rem; }
  .lang__long { display: none; }
  .usermenu__button { gap: 5px; }
  .usermenu__chevron { display: none; }
  .usermenu__name { max-width: 10ch; overflow: hidden; text-overflow: ellipsis; }
}
/* the narrowest phones: keep the name for screen readers, show the person icon alone */
@media (max-width: 419px) {
  .usermenu__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 720px) { .lang__short, .btn__short { display: none; } }

/* account menu: icon + first name opens everything that is "mine" */
.usermenu { position: relative; }
.usermenu__button {
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px; margin: -6px -8px; border-radius: 4px;
  font-weight: 500; color: var(--ink); white-space: nowrap; cursor: pointer; user-select: none;
}
.usermenu__button::-webkit-details-marker { display: none; }
.usermenu__button:hover, .usermenu[open] .usermenu__button { color: var(--sea); background: var(--mist); }
.usermenu__icon { width: 22px; height: 22px; flex: none; }
.usermenu__chevron { width: 12px; height: 12px; flex: none; color: var(--granite); transition: transform .15s ease; }
.usermenu[open] .usermenu__chevron { transform: rotate(180deg); }
.usermenu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 220px;
  padding: 6px; background: var(--gelcoat); border: 1px solid var(--foam); border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(27, 42, 46, .14);
  animation: usermenu-in .12s ease-out;
}
@keyframes usermenu-in { from { opacity: 0; transform: translateY(-4px); } }
.usermenu__who { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 12px 10px; font-size: var(--fs-1); color: var(--granite); }
.usermenu__who strong { color: var(--ink); font-weight: 600; font-size: var(--fs0); }
.usermenu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 4px;
  background: none; font: inherit; font-weight: 500; text-align: left; color: var(--ink);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.usermenu__item:hover { background: var(--mist); color: var(--sea); }
.usermenu__item.is-current { color: var(--sea); }
.usermenu__item.is-current::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sea); }
.usermenu__form { display: block; }
.usermenu__rule { height: 1px; margin: 6px 6px; background: var(--foam); }
.usermenu__label { margin: 0; padding: 4px 12px 2px; font-size: var(--fs-1); font-weight: 600; color: var(--granite); } /* the Admin section, for admins */
.usermenu__item--sub { padding-top: 6px; padding-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .usermenu__panel { animation: none; } .usermenu__chevron { transition: none; } }

/* inbox button in the header: the envelope carries the unread count */
.inbox-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px -7px; border-radius: 4px; color: var(--ink); }
.inbox-btn:hover, .inbox-btn.is-current { color: var(--sea); }
.inbox-btn:hover { background: var(--mist); }
.inbox-btn svg { width: 23px; height: 23px; }
.inbox-btn__badge {
  position: absolute; top: 0; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--falu); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--gelcoat);
}
.newpill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; background: var(--falu-tint); color: var(--falu-dark); font-size: var(--fs-1); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.newpill--dismissable { padding-right: 3px; }
.newpill__x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.newpill__x svg { width: 10px; height: 10px; }
.newpill__x:hover { background: var(--falu); color: #fff; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 4px; border: 1px solid transparent;
  font-weight: 500; font-size: var(--fs0); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--gelcoat); color: var(--ink);
}
.btn--primary { background: var(--sea); color: #fff; border-color: var(--sea); }
.btn--primary:hover { background: var(--sea-dark); border-color: var(--sea-dark); color: #fff; }
.btn--sell { background: var(--falu); color: #fff; border-color: var(--falu); }
.btn--sell:hover { background: var(--falu-dark); border-color: var(--falu-dark); color: #fff; }
.btn--ghost { border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--danger { color: var(--falu); }
.btn--danger:hover { border-color: var(--falu); color: var(--falu-dark); }
.btn--small { padding: 6px 10px; font-size: var(--fs-1); }
.btn--lg { padding: 14px 22px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.input, .select { min-width: 0; }

/* ---------- forms ---------- */
.input, .select {
  width: 100%; font: inherit; color: var(--ink); background: var(--gelcoat);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px; line-height: 1.3; min-height: 44px;
}
.input::placeholder { color: #8a9391; }
.input--lg { padding: 13px 16px; font-size: 1.0625rem; min-height: 50px; }
.input--short, .select--short { max-width: 180px; }
.input--num { max-width: 200px; }
.input--code { font-size: var(--fs3); letter-spacing: .25em; max-width: 260px; font-weight: 600; }
.login-resend { margin-top: 18px; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.select { -webkit-appearance: none; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231b2a2e' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.field { margin-bottom: 22px; }
.field__label, .fieldset__legend { display: block; font-weight: 500; margin-bottom: 6px; }
.field__hint { color: var(--granite); font-size: 0.9375rem; margin: -2px 0 8px; }
.field__error { color: var(--falu); font-size: 0.9375rem; margin-top: 6px; }
.field--error .input, .field--error .select, .fieldset--error .dropzone { border-color: var(--falu); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 640px) { .field-row--3 { grid-template-columns: repeat(3, 1fr); } } /* length, beam, draft; two columns on a phone so no label wraps beside another */
.fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.fieldset__legend { padding: 0; }
/* the second question under Övrigt, what is it: tucked under the type chips with a rule on the left, so it reads as part of that question */
.fieldset--sub { margin: -10px 0 22px; padding: 10px 0 0 14px; border-left: 2px solid var(--foam); }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--sea); flex: none; }
.radios .check { margin: 6px 0; }
.input-unit { display: flex; align-items: center; gap: 10px; }
.pricing .check { margin: 8px 0; }
.pricing__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.pricing__row .check { margin: 8px 0; }
.pricing__row .input--num { max-width: 160px; }
.input:disabled { color: var(--granite); background: var(--mist); }
.pricing__terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 10px 28px; } /* under the sum, in line with its label */
.pricing__terms-label { color: var(--granite); font-size: 0.9375rem; }
.pricing__terms .chip span { padding: 6px 12px; font-size: 0.9375rem; }
.chip input:disabled + span, .chip input:disabled:checked + span { color: var(--granite); background: var(--mist); border-color: var(--line-strong); cursor: default; }
.chip input:disabled:checked + span { background: var(--foam); }
.pricing__free-hint { margin: 2px 0 0 28px; max-width: 52ch; }
.input-unit__unit { color: var(--granite); }
/* the m/fot switch beside the length: two radios drawn as one control, as tall as the input it belongs to */
.input-unit .input { min-width: 0; }
.unit-switch { display: flex; flex: none; }
.unit-switch label { position: relative; cursor: pointer; }
.unit-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.unit-switch span { display: flex; align-items: center; justify-content: center; min-width: 38px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--gelcoat); color: var(--granite); }
.unit-switch label:first-child span { border-radius: var(--radius) 0 0 var(--radius); }
.unit-switch label:last-child span { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.unit-switch label:hover span { color: var(--ink); }
.unit-switch input:checked + span { position: relative; background: var(--ink); border-color: var(--ink); color: #fff; }
.unit-switch input:focus-visible + span { position: relative; z-index: 1; outline: 2px solid var(--sea); outline-offset: 2px; }
.stack { display: grid; gap: 4px; }
.errors { background: var(--falu-tint); border-left: 4px solid var(--falu); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 24px; }
.errors ul { list-style: disc; padding-left: 20px; margin-top: 6px; }
.proto { background: var(--bris); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.9375rem; }

/* chips: radio buttons that look like what they filter */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--gelcoat); font-weight: 500; line-height: 1.2; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }
/* the type chips are one radio group; the "Bortskänkes" chip after them is a checkbox, so it gets the buyer colour when on */
.chips__group { display: contents; }
.chips__sep { width: 1px; height: 24px; background: var(--line-strong); align-self: center; margin: 0 2px; }
.chip--free input:checked + span { background: var(--sea); border-color: var(--sea); }

/* ---------- flash and notices ---------- */
.flash { background: var(--bris); padding: 12px 16px; border-radius: var(--radius); margin: 16px 0 0; font-weight: 500; }
.flash--alert { background: var(--falu-tint); }
.notice { padding: 12px 16px; border-radius: var(--radius); margin: 16px 0 0; background: var(--mist-deep); border-left: 4px solid var(--ink); font-weight: 500; }
.ownerbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; background: var(--bris); padding: 12px 16px; border-radius: var(--radius); margin: 16px 0 0; }
.ownerbar__text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ownerbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inboxlink { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.inboxlink svg { width: 18px; height: 18px; color: var(--granite); flex: none; }
.inboxlink:hover { color: var(--sea); text-decoration-color: currentColor; }
.inboxlink--none { text-decoration: none; font-weight: 400; }

/* ---------- home ---------- */
.hero { background: var(--gelcoat); border-bottom: 1px solid var(--foam); }
.hero__in { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 40px; align-items: start; }
.hero__headline { font-size: clamp(2.125rem, 5.2vw, var(--fs5)); max-width: 14ch; }
.hero__lede { font-size: var(--fs1); color: var(--granite); margin: 16px 0 24px; max-width: 32ch; text-wrap: pretty; }
.search__row { display: flex; gap: 10px; }
.search__row .input { flex: 1; min-width: 0; }
.search .chips { margin-top: 14px; }
.hero__map { display: none; }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) 250px; gap: 64px; padding-top: 52px; padding-bottom: 40px; }
  .hero__map { display: block; }
}
.hero__live { margin-top: 22px; color: var(--granite); font-size: 0.9375rem; }
.map-label { text-align: center; color: var(--granite); font-size: 0.9375rem; margin-top: 8px; min-height: 1.5em; }

/* the map */
.sweden-map { width: 100%; height: auto; display: block; }
.county { fill: #dde3e0; stroke: var(--gelcoat); stroke-width: .7; }
.county.has-boats { fill: var(--sea-tint); }
.sweden-map--link .county, .sweden-map--pick .county { cursor: pointer; }
.sweden-map--link .county:hover, .sweden-map--pick .county:hover { fill: var(--sea); }
.county.is-selected { fill: var(--sea); }
.sweden-map__border { fill: none; stroke: none; }

.section { padding-top: 36px; padding-bottom: 36px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section__more { white-space: nowrap; }
.section__lede { color: var(--granite); margin: -8px 0 18px; max-width: 64ch; text-wrap: pretty; }
.section--free { border-top: 1px solid var(--foam); }

.promises { display: grid; gap: 24px; padding-top: 32px; padding-bottom: 48px; border-top: 1px solid var(--foam); }
.promise p { color: var(--granite); margin-top: 6px; text-wrap: pretty; }
@media (min-width: 720px) { .promises { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.empty { color: var(--granite); padding: 32px 0; }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--gelcoat); border: 1px solid var(--foam); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.card__link:hover .card__title { color: var(--sea); }
.card__photo { position: relative; aspect-ratio: 4 / 3; background: var(--mist-deep); }
.card__photo img { width: 100%; height: 100%; object-fit: cover; }
.card__count { position: absolute; right: 8px; bottom: 8px; background: rgba(27, 42, 46, .78); color: #fff; font-size: var(--fs-1); padding: 2px 7px; border-radius: 3px; font-weight: 500; }
.card--sold .card__photo img { filter: grayscale(1); opacity: .8; } /* the colour left with the boat */
.card--sold .card__price { color: var(--granite); }
/* The sold band. A sold boat keeps its ad among the others for a week, the way an estate agent leaves the card
   in the window with a strip across its corner. One band, sized by the frame it sits in: the card, the seller's
   row thumbnail, the gallery. --at is how far from the corner it crosses; the frame's overflow clips its ends. */
.sold-band { --at: 34px; position: absolute; z-index: 2; top: var(--at); left: var(--at); width: 240px; padding: 4px 0; translate: -50% -50%; rotate: -45deg; text-align: center; background: var(--ink); color: #fff; font-size: var(--fs-1); font-weight: 600; letter-spacing: .02em; line-height: 1.3; pointer-events: none; }
.sold-band--small { --at: 26px; font-size: 0.6875rem; padding: 2px 0; }
.sold-band--stage { --at: 56px; font-size: var(--fs0); padding: 6px 0; }
.sold-band--expired { background: var(--granite); } /* ran out: grey, only the seller and the buyers who wrote ever see it */
.sold-band--reserved { background: var(--ochre); } /* held for a buyer: the same band, warm, and the photo keeps its colour because the boat is still for sale */
.card__body { padding: 12px 14px 14px; }
.card__price { font-size: var(--fs1); font-weight: 600; letter-spacing: -0.01em; }
.is-free { color: var(--sea); } /* "Bortskänkes" in the price spot, on cards, the ad and my ads */
.card__title { font-size: var(--fs0); font-weight: 500; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.card__facts { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--granite); font-size: 0.9375rem; margin-top: 6px; }
.card__facts span { white-space: nowrap; }
.card__facts span + span { border-left: 1px solid var(--foam); padding-left: 10px; }
.card__meta { display: flex; gap: 8px; color: var(--granite); font-size: var(--fs-1); margin-top: 8px; }
.card__meta span { white-space: nowrap; }
.card__meta span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* who is selling, after the town: "Privat" quietly, a company or a club in sea green */
.card__kind::after { content: "·"; margin-left: 8px; }
.card__kind--company, .card__kind--club { color: var(--sea); font-weight: 500; }
@media (max-width: 719px) { .card__body { padding: 10px 12px 12px; } .card__price { font-size: 1.125rem; } .card__facts { font-size: var(--fs-1); } }

/* ---------- results ---------- */
.results { padding-top: 24px; padding-bottom: 48px; }
.filters { background: var(--gelcoat); border: 1px solid var(--foam); border-radius: var(--radius-lg); padding: 14px 16px; }
.filters__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters__row--chips { margin-top: 12px; justify-content: space-between; }
/* The sub-types of the type picked, on the listing and the home page (boats/_subtype_chips): a tray that slides open
   under the type chips, with a notch on its top edge pointing up at the chip it belongs to (--notch, set by
   subtypes_controller.js), and chips a size down. Closed, it takes no room and nothing in it takes focus. */
.subtypes { display: grid; grid-template-rows: 0fr; }
.subtypes.is-open { grid-template-rows: 1fr; }
.subtypes__clip { min-height: 0; overflow: hidden; visibility: hidden; }
.subtypes.is-open .subtypes__clip { visibility: visible; }
.subtypes__panel { position: relative; margin-top: 12px; padding: 10px; background: var(--bris); border-radius: var(--radius-lg); }
.subtypes__panel::before { content: ""; position: absolute; top: -6px; left: var(--notch, 28px); width: 12px; height: 12px; background: inherit; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.subtypes .chips { margin-top: 0; }
.subtypes .chips[hidden] { display: none; }
.subtypes .chip span { padding: 6px 12px; font-size: 0.9375rem; }
@media (prefers-reduced-motion: no-preference) {
  .subtypes.is-ready { transition: grid-template-rows .2s ease; }
  .subtypes.is-ready .subtypes__clip { transition: visibility 0s .2s; }
  .subtypes.is-ready.is-open .subtypes__clip { transition-delay: 0s; }
  .subtypes.is-ready .subtypes__panel::before { transition: left .2s ease; }
}
.filters__q { flex: 2 1 220px; min-width: 0; }
.filters .select { flex: 1 1 160px; width: auto; }
.filters__price { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; }
.filters__price .input { max-width: 120px; }
.filters__dash, .filters__unit { color: var(--granite); }
.filters__clear { color: var(--granite); font-size: 0.9375rem; }
.results__lede { color: var(--granite); margin: -8px 0 22px; max-width: 64ch; text-wrap: pretty; }
.results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 28px 0 16px; flex-wrap: wrap; }
.results__title { font-size: var(--fs2); }
.results__where { font-weight: 400; color: var(--granite); }
.results__note { color: var(--granite); margin: -6px 0 18px; max-width: 60ch; }
turbo-frame { display: block; }
turbo-frame[busy] .grid, turbo-frame[busy] .empty { opacity: .5; transition: opacity .15s; }
.watch summary { cursor: pointer; color: var(--sea); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.watch summary::-webkit-details-marker { display: none; }
.watch__hint { color: var(--granite); font-size: 0.9375rem; margin-top: 6px; max-width: 32ch; }
/* the "?" beside a search box (shared/_search_help): a details element whose panel drops under the whole row, never wider than it */
.search__row, .filters__row { position: relative; }
.qhint { align-self: center; flex: none; }
.qhint summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--granite); font-weight: 600; background: var(--gelcoat); }
.qhint summary::-webkit-details-marker { display: none; }
.qhint summary:hover, .qhint[open] summary { border-color: var(--ink); color: var(--ink); }
.qhint__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; width: min(360px, 100%); background: var(--gelcoat); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 14px; font-size: 0.9375rem; color: var(--granite); line-height: 1.45; }
.qhint__panel p + p { margin-top: 8px; }
.qhint__panel code { font-family: inherit; color: var(--ink); background: var(--mist); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.pager__info { color: var(--granite); font-size: 0.9375rem; }

/* ---------- listing page ---------- */
.listing { padding-bottom: 96px; }
/* The gallery band: the photos in a strip you swipe, each shown whole on a soft wash of its own
   colours; arrows and thumbnails for a mouse, the counter for everyone. A tap opens the viewer. */
.wrap--gallery { padding: 0; }
@media (min-width: 720px) { .wrap--gallery { padding: 0 var(--gutter); } }
.gallery { margin-top: 12px; outline-offset: 4px; }
.gallery:focus-visible { outline: 2px solid var(--sea); }
@media (min-width: 720px) { .gallery { margin-top: 20px; } }
.gallery__stage { position: relative; isolation: isolate; aspect-ratio: 3 / 2; background: var(--mist-deep); overflow: hidden; }
@media (min-width: 720px) { .gallery__stage { border-radius: var(--radius-lg); } }
@media (min-width: 900px) { .gallery__stage { aspect-ratio: 16 / 9; } }
.gallery__strip, .viewer__strip { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery__strip::-webkit-scrollbar, .viewer__strip::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.gallery__back { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(28px) saturate(.85); opacity: .55; }
.gallery__photo { position: relative; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; -webkit-user-drag: none; }
.gallery__counter { position: absolute; right: 10px; bottom: 10px; margin: 0; background: rgba(27, 42, 46, .78); color: #fff; font-size: var(--fs-1); font-variant-numeric: tabular-nums; padding: 3px 8px; border-radius: 3px; pointer-events: none; }
.gallery__expand { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 0; border-radius: 3px; background: rgba(27, 42, 46, .78); color: #fff; font: inherit; font-size: var(--fs-1); cursor: zoom-in; }
.gallery__expand:hover, .gallery__arrow:hover { background: var(--ink); }
.gallery__arrow { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(27, 42, 46, .6); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s; }
.gallery__arrow--prev { left: 12px; }
.gallery__arrow--prev svg { transform: rotate(180deg); }
.gallery__arrow--next { right: 12px; }
.gallery__stage:hover .gallery__arrow, .gallery__arrow:focus-visible, .gallery:focus-within .gallery__arrow { opacity: 1; }
@media (pointer: coarse) { .gallery__arrow { display: none; } } /* a thumb swipes */
.gallery__thumbs { display: none; gap: 8px; margin-top: 8px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
@media (min-width: 720px) { .gallery__thumbs { display: flex; } }
.gallery__thumb { flex: none; width: 96px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--mist-deep); cursor: pointer; opacity: .7; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { opacity: 1; outline: 2px solid var(--ink); outline-offset: 1px; }
.gallery__thumb:hover { opacity: 1; }
@media (min-width: 900px) { .gallery__thumb { width: 120px; } }

/* The viewer: the whole screen goes ink, the photo is the only colour left. */
.viewer { position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: #fff; overscroll-behavior: contain; }
.viewer::backdrop { background: var(--ink); }
.viewer:not([open]) { display: none; }
html.has-viewer { overflow: hidden; }
.viewer__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(10px, env(safe-area-inset-top)) 12px 10px 16px; background: linear-gradient(rgba(27, 42, 46, .85), rgba(27, 42, 46, 0)); pointer-events: none; }
.viewer__counter { margin: 0; color: var(--foam); font-size: 0.9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__close { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 0.9375rem; cursor: pointer; pointer-events: auto; }
.viewer__close:hover { background: rgba(255, 255, 255, .2); }
.viewer__close:focus-visible, .viewer__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer__strip { position: absolute; inset: 0; }
.viewer__slide { flex: 0 0 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; touch-action: pan-x; cursor: zoom-in; }
.viewer__slide.is-zoomed { touch-action: none; cursor: grab; }
.viewer__slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; -webkit-user-drag: none; user-select: none; }
.viewer__slide:not(.is-zoomed) img { transition: transform .18s ease-out; }
.viewer__arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.viewer__arrow:hover { background: rgba(255, 255, 255, .22); }
.viewer__arrow--prev { left: 16px; }
.viewer__arrow--prev svg { transform: rotate(180deg); }
.viewer__arrow--next { right: 16px; }
@media (pointer: coarse) { .viewer__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .viewer__slide:not(.is-zoomed) img, .gallery__arrow { transition: none; } }

.listing__cols { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 24px; }
@media (min-width: 900px) { .listing__cols { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; margin-top: 32px; } }
.crumbs { display: flex; gap: 12px; font-size: 0.9375rem; color: var(--granite); }
.crumbs a { color: var(--granite); }
.crumbs a + a::before { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--foam); margin-right: 12px; vertical-align: -1px; }
.listing__title { font-size: var(--fs3); margin-top: 8px; }
.listing__price { font-size: var(--fs2); font-weight: 600; margin-top: 6px; }
@media (min-width: 900px) { .listing__price { display: none; } }
.listing__sold { margin-top: 6px; font-weight: 500; }
@media (min-width: 900px) { .listing__sold { display: none; } } /* the contact box says it there, next to the price */
.listing__reserved, .contact__reserved { color: var(--ochre-dark); }
.contact__reserved { margin-top: 8px; font-weight: 500; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; margin: 20px 0 0; border-top: 1px solid var(--foam); }
@media (min-width: 560px) { .facts { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); } }
.facts div { padding: 10px 0; border-bottom: 1px solid var(--foam); }
.facts dt { font-size: var(--fs-1); color: var(--granite); }
.facts dd { margin: 2px 0 0; font-weight: 500; font-size: 1.0625rem; }
.facts dd small { color: var(--granite); font-weight: 400; margin-left: 4px; }
.listing__section { margin-top: 32px; }
.listing__section h2 { font-size: var(--fs1); margin-bottom: 10px; }
.seller-text { font-family: var(--text); font-size: 1.1875rem; line-height: 1.55; max-width: 62ch; }
.seller-text p { margin: 0 0 1em; text-wrap: pretty; }
.seller-text p:last-child { margin-bottom: 0; }
.spec { border-collapse: collapse; width: 100%; max-width: 560px; }
.spec th, .spec td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--foam); vertical-align: top; }
.spec th { font-weight: 400; color: var(--granite); width: 40%; }
.where__in { display: flex; gap: 20px; align-items: center; }
.where__map { width: 104px; flex: none; }
.where__town { font-size: var(--fs1); font-weight: 500; }
.listing__foot { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--granite); font-size: var(--fs-1); margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--foam); }
.listing__foot a { color: var(--granite); }

.listing__aside { min-width: 0; }
.contact { background: var(--gelcoat); border: 1px solid var(--foam); border-radius: var(--radius-lg); padding: 22px 22px 20px; }
@media (min-width: 900px) { .contact { position: sticky; top: 20px; } }
.contact__price { font-size: var(--fs3); font-weight: 600; letter-spacing: -0.015em; display: none; }
@media (min-width: 900px) { .contact__price { display: block; } }
.listing--sold .listing__price, .contact--closed .contact__price { color: var(--granite); }
.price-terms { display: block; margin-top: 2px; color: var(--granite); font-size: var(--fs0); font-weight: 400; letter-spacing: 0; } /* "Pris kan diskuteras" or "Fast pris", under the sum */
.seller { margin-top: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--foam); }
.seller__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.seller__name { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.seller__name:hover { color: var(--sea); text-decoration-color: currentColor; }
.seller__reviews { margin-top: 2px; font-weight: 500; }
.seller__reviews a { color: var(--sea); }
/* who is selling, said out loud beside the name: a company or a club in sea green, a private person in quiet grey */
.seller__kind { display: inline-block; font-size: var(--fs-1); font-weight: 600; line-height: 1.5; letter-spacing: .01em; padding: 2px 10px; border-radius: 999px; background: var(--mist-deep); color: var(--ink); white-space: nowrap; }
.seller__kind--company, .seller__kind--club { background: var(--bris); color: var(--sea); }
.seller__law { margin-top: 4px; }

/* who is selling (shared/_seller_kind_fields): the organisation fields unfold for a company or a club, the org.nr for a company only */
.sellerkind__org { display: none; margin-top: 12px; }
.sellerkind:has(input[value="company"]:checked) .sellerkind__org,
.sellerkind:has(input[value="club"]:checked) .sellerkind__org { display: block; }
.sellerkind:has(input[value="club"]:checked) .sellerkind__nr { display: none; }
.adm-relabel { display: inline-flex; align-items: center; gap: 6px; }
.adm-relabel .select { padding-top: 3px; padding-bottom: 3px; font-size: var(--fs-1); }
/* "Varför?" beside Dölj and Spärra: small enough to sit in a table cell, the reason goes into the audit log */
.adm-why { display: inline-flex; align-items: center; gap: 6px; }
.adm-why__input { width: 11em; font: inherit; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--gelcoat); }
.adm-why__input::placeholder { color: #8a9391; }
.phone { margin-top: 16px; }
.phone summary { list-style: none; }
.phone summary::-webkit-details-marker { display: none; }
.phone[open] summary { display: none; }
.phone__number { display: block; text-align: center; font-size: var(--fs2); font-weight: 600; padding: 10px; border: 1px solid var(--foam); border-radius: 4px; text-decoration: none; }
.contact__form { margin-top: 16px; }
.contact__title { font-size: var(--fs1); }
.contact__lede { font-size: 0.9375rem; margin: 4px 0 14px; }
.contact__form .field { margin-bottom: 14px; }
.contact__closed { margin-top: 16px; font-weight: 500; }
.contact__free { color: var(--granite); font-size: 0.9375rem; margin-top: 6px; text-wrap: pretty; }
.contact__safe { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--foam); color: var(--granite); font-size: 0.9375rem; text-wrap: pretty; }
.contact__safe--forms { margin-top: 8px; padding-top: 0; border-top: 0; }
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter); background: var(--gelcoat); border-top: 1px solid var(--foam); z-index: 20; }
.stickybar__price { font-weight: 600; font-size: var(--fs1); }
@media (min-width: 900px) { .stickybar { display: none; } .listing { padding-bottom: 64px; } }

/* ---------- ad form ---------- */
.page-head { padding-top: 32px; margin-bottom: 24px; }
.page-head__lede { color: var(--granite); margin-top: 8px; font-size: 1.0625rem; max-width: 48ch; }
.page-head--row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.adpage { padding-bottom: 64px; }
.adform__cols { display: grid; grid-template-columns: 1fr; gap: 40px; }
.adform__fields { max-width: 640px; min-width: 0; }
.adform__preview { display: none; }
@media (min-width: 1000px) {
  .adform__cols { grid-template-columns: minmax(0, 640px) 280px; gap: 64px; align-items: start; }
  .adform__preview { display: block; position: sticky; top: 24px; }
}
.adform__preview-label { color: var(--granite); font-size: 0.9375rem; margin-bottom: 10px; }
.card--preview .card__title { white-space: normal; }
.adform__actions { display: flex; align-items: center; gap: 20px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--foam); }
.adform__preview-save { margin-top: 16px; }
/* Editing on a narrow screen, where there is no preview column: the actions stay docked to the bottom of the screen until the form's own end scrolls in. */
@media (max-width: 999px) {
  .adform__actions--dock { position: sticky; bottom: 0; z-index: 5; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom)); background: var(--mist); }
}

.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--gelcoat); cursor: pointer; text-align: center; }
.dropzone:hover, .dropzone.is-over { background: var(--bris); border-color: var(--sea); }
.dropzone__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dropzone__text { font-weight: 500; color: var(--sea); text-decoration: underline; text-underline-offset: 3px; }
.dropzone__drag { color: var(--granite); font-size: 0.9375rem; }
@media (hover: none) { .dropzone__drag { display: none; } } /* nothing to drag from on a phone */
.dropzone:focus-within { outline: 2px solid var(--sea); outline-offset: 2px; }
.dropzone.is-busy { opacity: 0.6; cursor: progress; } /* photos are being shrunk in the browser */
/* The photo tiles on the form: one row to arrange. The first is the cover and says so; the grip
   is the handle on a touch screen, a mouse lifts the tile anywhere. */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.photos[hidden] { display: none; }
.photos.is-sorting { user-select: none; -webkit-user-select: none; }
.photos__item { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--mist-deep); cursor: grab; }
.photos__item img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.photos__item.is-dragging { z-index: 3; cursor: grabbing; outline: 2px solid var(--ink); outline-offset: -2px; scale: 1.04; }
.photos__item.is-cover { outline: 2px solid var(--ink); outline-offset: -2px; }
.photos__cover { display: none; position: absolute; left: 0; top: 0; padding: 3px 8px; border-radius: 0 0 4px 0; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.3; pointer-events: none; }
.photos__item.is-cover .photos__cover { display: block; }
.photos__remove, .photos__grip { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; }
.photos__remove { right: 4px; top: 4px; }
.photos__remove:hover { background: var(--falu); color: #fff; }
.photos__grip { right: 4px; bottom: 4px; touch-action: none; cursor: grab; }
.photos__grip svg { fill: currentColor; }
.photos__grip:focus-visible, .photos__remove:focus-visible, .photos__undo:focus-visible { outline: 2px solid var(--sea); outline-offset: 1px; }
.photos__undo { display: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 5px 12px; border: 0; border-radius: 3px; background: var(--gelcoat); color: var(--ink); font: inherit; font-size: var(--fs-1); font-weight: 500; cursor: pointer; }
.photos__item.is-removed img { opacity: .3; filter: grayscale(1); }
.photos__item.is-removed .photos__undo { display: block; }
.photos__item.is-removed .photos__remove, .photos__item.is-removed .photos__cover, .photos__item.is-removed .photos__grip { display: none; }
.photos__item.is-removed { cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.county-pick { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
.county-pick__map { display: none; }
@media (min-width: 560px) { .county-pick { grid-template-columns: 1fr 120px; } .county-pick__map { display: block; padding-top: 30px; } }

/* where the boat is: the street map (Leaflet + OpenStreetMap), on the ad page and on the form */
.chart { position: relative; isolation: isolate; height: 240px; margin-top: 16px; border: 1px solid var(--foam); border-radius: var(--radius-lg); background: var(--mist); overflow: hidden; }
.chart--edit { height: 300px; margin-top: 12px; }
.leaflet-container { font-family: var(--ui); font-size: 12px; }
.leaflet-container a { color: var(--sea); }
.pin { width: 22px; height: 22px; border-radius: 50%; background: var(--sea); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.pin.leaflet-marker-draggable { cursor: grab; }
.place-search { display: flex; gap: 8px; }
.place-search .input { flex: 1; }
.hits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hits[hidden] { display: none; }
.hit { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--gelcoat); font: inherit; font-size: 0.9375rem; line-height: 1.2; text-align: left; cursor: pointer; }
.hit:hover { border-color: var(--ink); }
.hit.is-selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.place-status { font-size: 0.9375rem; margin: 8px 0 0; min-height: 1.4em; }
.chart-tools { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 4px; }
.textbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.9375rem; color: var(--sea); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.where__link { margin-top: 8px; font-size: 0.9375rem; }

/* ---------- my ads, account, admin ---------- */
.rows { border-top: 1px solid var(--foam); }
.row { display: grid; grid-template-columns: 96px 1fr; gap: 14px 18px; padding: 18px 0; border-bottom: 1px solid var(--foam); align-items: start; }
@media (min-width: 720px) { .row { grid-template-columns: 120px 1fr auto; } }
.row__photo { position: relative; aspect-ratio: 4 / 3; background: var(--mist-deep); border-radius: 4px; overflow: hidden; display: block; }
.row__photo img { width: 100%; height: 100%; object-fit: cover; }
.row__title { font-weight: 500; font-size: 1.0625rem; }
.row__title a { color: inherit; text-decoration: none; }
.row__title a:hover { color: var(--sea); }
.row__meta { display: flex; gap: 12px; align-items: center; margin-top: 2px; }
.row__price { font-weight: 600; }
.row__inbox { margin-top: 8px; }
.row__actions { display: flex; flex-wrap: wrap; gap: 6px 16px; grid-column: 1 / -1; }
@media (min-width: 720px) { .row__actions { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 8px; } }
.status { display: inline-block; font-size: var(--fs-1); font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--bris); color: var(--sea-dark); }
.status--sold { background: var(--ink); color: #fff; }
.status--hidden { background: var(--falu-tint); color: var(--falu-dark); }
.status--reserved { background: var(--sand-tint); color: var(--ochre-dark); }
.status--expired { background: var(--granite); color: #fff; }
.row__expiry { margin-top: 2px; }
.row__expiry.is-expired, .ownerbar__expiry.is-expired { color: var(--falu-dark); font-weight: 600; }
.thread__closed { margin: 12px 0 0; }
.danger { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--foam); }
.danger h2 { font-size: var(--fs1); margin-bottom: 6px; }
.danger .btn { margin-top: 14px; }
.table { width: 100%; border-collapse: collapse; margin: 12px 0 36px; background: var(--gelcoat); border: 1px solid var(--foam); border-radius: var(--radius-lg); overflow: hidden; }
.table th { text-align: left; font-size: var(--fs-1); color: var(--granite); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--foam); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--foam); vertical-align: top; font-size: 0.9375rem; }
.table tr:last-child td { border-bottom: 0; }
.table__actions { text-align: right; white-space: nowrap; }
@media (max-width: 719px) { .table thead { display: none; } .table td { display: block; border-bottom: 0; padding: 6px 12px; } .table tr { display: block; border-bottom: 1px solid var(--foam); padding: 8px 0; } .table__actions { text-align: left; } }

/* ---------- long-form pages ---------- */
.prose { font-family: var(--text); font-size: 1.125rem; line-height: 1.6; max-width: var(--wrap); margin: 0 auto; padding: 32px var(--gutter) 64px; }
.prose > * { max-width: 66ch; }
.prose h1 { font-family: var(--ui); font-size: var(--fs4); margin-bottom: 20px; }
.prose h2 { font-family: var(--ui); font-size: var(--fs1); margin: 36px 0 10px; }
.prose p { margin: 0 0 1em; text-wrap: pretty; }
.prose ul { list-style: disc; padding-left: 22px; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--foam); margin-top: 24px; background: var(--mist); }
.site-footer__in { display: grid; gap: 24px; padding-top: 36px; padding-bottom: 48px; font-size: 0.9375rem; color: var(--granite); }
.site-footer__brand p { margin-top: 10px; }
.site-footer .brand__tag { white-space: normal; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-footer__nav a:hover { color: var(--sea); }
/* Preview only (Preview.on?): the red link to the prototype guide, which lists demo logins. Production never renders it. */
.site-footer__nav a.proto-link { color: var(--falu); font-weight: 700; }
.site-footer__nav a.proto-link:hover { color: var(--falu-dark); text-decoration: underline; }
.site-footer__legal p { margin-bottom: 4px; }
@media (min-width: 720px) { .site-footer__in { grid-template-columns: 1fr 1fr; } .site-footer__legal { grid-column: 1 / -1; } }

/* ---------- inbox ---------- */
.inbox__crumb { font-size: var(--fs-1); margin-bottom: 10px; }
.inbox__crumb a { color: var(--granite); }
.inbox__boat + .inbox__boat { margin-top: 44px; }
.inbox__boathead { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--foam); margin-bottom: 14px; }
.inbox__thumb { width: 72px; aspect-ratio: 4 / 3; flex: none; display: block; border-radius: 4px; overflow: hidden; background: var(--mist-deep); }
.inbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.inbox__boatinfo { min-width: 0; flex: 1; }
.inbox__boattitle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 600; font-size: 1.0625rem; }
.inbox__boattitle a { color: inherit; text-decoration: none; }
.inbox__boattitle a:hover { color: var(--sea); }
.inbox__adlink { font-size: var(--fs-1); white-space: nowrap; }
.threads { display: grid; gap: 10px; }
.inbox__h2 { font-size: var(--fs1); margin: 28px 0 10px; }
.inbox__asked { margin-top: 36px; }
.inbox__asked .inbox__h2 { margin: 0 0 4px; }
.inbox__asked + .threads { margin-top: 14px; }
.inbox__boathead + .threads, .inbox__boathead + .empty + .threads { margin-top: 4px; }
.thread { background: var(--gelcoat); border: 1px solid var(--foam); border-left: 4px solid var(--foam); border-radius: var(--radius); }
.thread--new { border-left-color: var(--falu); }
.thread__summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 14px 18px; cursor: pointer; }
.thread__summary::-webkit-details-marker { display: none; }
.thread__summary:hover .thread__name { color: var(--sea); }
.thread__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.thread__name { font-weight: 600; font-size: 1.0625rem; }
.thread__boat { color: var(--granite); font-size: var(--fs-1); }
.thread__meta { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; }
.thread__when { color: var(--granite); font-size: var(--fs-1); white-space: nowrap; }
.thread__chevron { width: 14px; height: 14px; flex: none; color: var(--granite); transition: transform .15s ease; }
.thread[open] .thread__chevron { transform: rotate(180deg); }
.thread__excerpt { grid-column: 1; color: var(--granite); font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread[open] .thread__excerpt { display: none; }
.thread__body { padding: 0 18px 18px; }
.thread__contact { margin: -6px 0 8px; }
.thread__messages { list-style: none; margin: 10px 0 0; padding: 0; }
.msg + .msg { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--foam); }
.msg__time { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); color: var(--granite); }
.msg__author { font-weight: 600; color: var(--ink); }
.msg__body { margin-top: 4px; font-size: 1.125rem; }
.msg--mine { background: var(--bris); border-radius: var(--radius); padding: 10px 14px 12px; }
.msg + .msg--mine, .msg--mine + .msg { border-top: 0; padding-top: 10px; }
.msg--mine + .msg { padding-top: 12px; }
.msg__body .attachment { margin: 8px 0 0; }
.msg__body .attachment img { max-width: min(100%, 420px); max-height: 300px; width: auto; height: auto; border-radius: 4px; display: block; }
.msg__body .attachment__caption { font-family: var(--ui); font-size: var(--fs-1); color: var(--granite); margin-top: 4px; }
/* ---------- reviews: the deal in a thread, a review as read, "Omdömen", the seller's page ---------- */
.newpill--review { background: var(--bris); color: var(--sea-dark); }
.deal { margin-top: 14px; padding: 12px 14px 14px; background: var(--mist); border-radius: var(--radius); }
.deal__what { font-weight: 500; }
.deal__state { margin-top: 4px; }
.deal__form { margin-top: 10px; }
.deal__fieldset { margin-bottom: 12px; }
.deal__text { min-height: 72px; }
.deal__rules { margin: 6px 0 10px; }
/* the four answers, from green to red, quiet enough to sit beside a name */
.rating { display: inline-block; font-size: var(--fs-1); font-weight: 600; line-height: 1.5; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.rating--4 { background: var(--sea); color: #fff; }
.rating--3 { background: var(--sea-tint); color: var(--sea-dark); }
.rating--2 { background: var(--sand-tint); color: var(--ochre-dark); }
.rating--1 { background: var(--falu-tint); color: var(--falu-dark); }
.reviews { display: grid; gap: 12px; }
.review { padding: 14px 16px; background: var(--gelcoat); border: 1px solid var(--foam); border-radius: var(--radius); }
.review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.review__who { font-weight: 500; }
.review__body { margin-top: 6px; font-family: var(--text); font-size: 1.125rem; line-height: 1.5; overflow-wrap: anywhere; }
.review__meta { margin-top: 4px; }
.review__reply { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--foam); overflow-wrap: anywhere; }
.review__reply-label { font-weight: 600; color: var(--granite); }
.review__actions { margin-top: 8px; }
.myreviews__due { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.myreviews__due .deal { margin-top: 6px; }
.myreviews__score { font-size: var(--fs0); font-weight: 400; }
.myreviews__reply { margin-top: 8px; padding: 0 16px 4px; }
.myreviews__reply summary { list-style: none; display: inline; }
.myreviews__reply summary::-webkit-details-marker { display: none; }
.myreviews__reply form { margin-top: 8px; }
.myreviews__reply[open] summary { color: var(--granite); text-decoration: none; }
.myreviews__state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; padding: 0 16px; }
.sellerpage__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sellerpage__score { margin-top: 6px; font-size: var(--fs1); font-weight: 600; color: var(--sea); }
.sellerpage__h2 { font-size: var(--fs1); margin: 32px 0 12px; }
.sellerpage__how { margin: 16px 0 48px; }

.reply { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--foam); }
.reply__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.reply__note { flex-basis: 100%; }
lexxy-editor {
  display: block; background: var(--gelcoat); border: 1px solid var(--line-strong); border-radius: 4px;
  font-family: var(--text); font-size: 1.125rem; line-height: 1.5; color: var(--ink);
  --lexxy-color-accent-dark: var(--sea); --lexxy-color-accent-medium: var(--sea); --lexxy-color-accent-light: var(--sea-tint);
  --lexxy-color-link: var(--sea); --lexxy-color-selected: var(--sea-tint); --lexxy-color-ink: var(--ink);
  --lexxy-color-text: var(--ink); --lexxy-color-text-subtle: var(--granite);
}
lexxy-editor:focus-within { border-color: var(--sea); outline: 2px solid var(--sea); outline-offset: 1px; }
lexxy-editor [contenteditable] { min-height: 4.5em; }
.reply:not(.reply--open) lexxy-toolbar { display: none; }
.reply:not(.reply--open) lexxy-editor [contenteditable] { min-height: 2.6em; }
lexxy-toolbar { font-family: var(--ui); }
@media (max-width: 719px) {
  .inbox__adlink { display: none; }
  .thread__summary { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .thread__meta { grid-column: 1; grid-row: auto; }
  .thread__body { padding: 0 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .thread__chevron { transition: none; } }

/* ---------- admin: dense on purpose ---------- */
.adm { font-size: 0.8125rem; padding-top: 20px; padding-bottom: 48px; max-width: none; } /* the whole window: three wide tables must fit without a scroll bar */
.adm h1 { font-size: var(--fs2); margin: 0 0 2px; }
.adm__stats { color: var(--granite); margin: 0 0 18px; }
.adm h2 { font-size: 0.9375rem; margin: 22px 0 6px; display: flex; gap: 14px; align-items: baseline; }
.adm h2 .textbutton { font-size: 0.8125rem; font-weight: 400; }
.adm-scroll { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; background: var(--gelcoat); border: 1px solid var(--foam); }
.adm-table th { text-align: left; font-weight: 500; color: var(--granite); padding: 5px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.adm-table td { padding: 4px 8px; border-bottom: 1px solid var(--foam); vertical-align: top; line-height: 1.4; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-table .nowrap { white-space: nowrap; }
.adm-table__act { text-align: right; white-space: nowrap; }
.adm-table .textbutton { font-size: inherit; }
.adm-table__done { width: 1%; text-align: center; }
.adm-table__done input { margin: 0; vertical-align: middle; cursor: pointer; }
.adm-table tr.adm-open td { background: var(--falu-tint); } /* a report nobody has decided on yet, or a blocked user */
.adm-table tr.adm-blocked td { background: var(--falu-tint); }
.adm-table tr.adm-hidden td { background: var(--sand-tint); }
.adm-table tr.is-filtered { display: none; }
.adm h2 .textbutton[aria-pressed="true"] { color: var(--ink); text-decoration: none; font-weight: 600; }
.adm h2 .textbutton[aria-pressed="true"]::before { content: "✓ "; }
.adm h2 .textbutton:disabled { color: var(--granite); text-decoration: none; cursor: default; }
.adm-table__text { min-width: 16em; max-width: 32em; overflow-wrap: anywhere; }
.adm-clip { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; width: 100%; background: none; border: 0; padding: 0; margin: 0; font: inherit; line-height: inherit; color: inherit; text-align: left; cursor: pointer; }
.adm-clip[aria-expanded="true"] { display: block; white-space: pre-line; }
.adm-toggle { background: none; border: 0; padding: 0; font: inherit; color: var(--sea); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.adm-toggle::before { content: "▸ "; display: inline-block; text-decoration: none; }
.adm-toggle[aria-expanded="true"]::before { content: "▾ "; }
.adm-mail { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; } /* a mail's text in the outbox */
.adm-new { color: var(--falu); font-weight: 600; }
.adm-bad { color: var(--falu-dark); font-weight: 600; }
.adm-detail td { background: var(--mist); padding: 8px 12px 6px 32px; }
/* the admin pages' tabs (admin/_nav), the same list as the user menu's Admin section; the reports tab counts the open ones */
.adm-nav { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line-strong); margin: 0 0 16px; }
.adm-nav__item { padding: 7px 12px; color: var(--granite); text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.adm-nav__item:hover { color: var(--ink); }
.adm-nav__item.is-current { color: var(--ink); border-bottom-color: var(--sea); }
.adm-count { display: inline-block; min-width: 1.5em; padding: 0 5px; border-radius: 999px; background: var(--falu); color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1.5; text-align: center; }
.adm h1 { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.adm h1 .textbutton { font-size: 0.8125rem; font-weight: 400; }
.adm-waiting { margin: 0; padding-left: 18px; line-height: 1.7; }
/* the audit log's search (admin/events): the box, a type list and two dates, the hint and its help, then how the box was read */
.adm-search { margin: 0 0 10px; }
.adm-search__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-search__row .input, .adm-search__row .select { padding-top: 5px; padding-bottom: 5px; font-size: 0.875rem; }
.adm-search__row .input, .adm-search__row .select { width: auto; }
.adm-search__q.input { flex: 1 1 22em; }
.adm-search__date { display: inline-flex; align-items: center; gap: 6px; color: var(--granite); }
.adm-search__hint { position: relative; margin-top: 6px; color: var(--granite); max-width: 110ch; }
.adm-help, .adm-help summary { display: inline; margin-left: 6px; }
.adm-help summary { list-style: none; cursor: pointer; color: var(--sea); text-decoration: underline; text-underline-offset: 3px; }
.adm-help summary::-webkit-details-marker { display: none; }
.adm-help__panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; width: min(680px, 100%); padding: 12px 14px; background: var(--gelcoat); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(27, 42, 46, .14); color: var(--granite); line-height: 1.45; }
.adm-help__panel code { font-family: inherit; color: var(--ink); background: var(--mist); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.adm-help__table { border-collapse: collapse; margin: 8px 0; }
.adm-help__table td { padding: 3px 12px 3px 0; vertical-align: top; }
.adm-help__table td:first-child { width: 40%; }
.adm-readings { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; padding: 0; }
.adm-reading { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 2px 1px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--gelcoat); }
.adm-reading--none { border-color: var(--falu); background: var(--falu-tint); }
.adm-reading__drop { padding: 0 7px; border-radius: 50%; color: var(--granite); text-decoration: none; font-size: 1rem; line-height: 1.3; }
/* a value in the log that narrows it (event_filter_link): quiet until pointed at */
.adm-filter { color: inherit; text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; }
.adm-filter:hover { color: var(--sea); text-decoration-color: currentColor; }
.adm-reading__drop:hover { color: var(--ink); background: var(--mist); }
.adm-thread { margin-bottom: 8px; }
.adm-thread__head { font-weight: 500; }
.adm-thread__head span { font-weight: 400; color: var(--granite); }
.adm-msgs { margin-top: 2px; }
.adm-msg { display: grid; grid-template-columns: 7em 6em minmax(0, 1fr); gap: 0 10px; padding: 1px 0; }
.adm-msg__t { color: var(--granite); white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-msg__who { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-msg__text { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 719px) { .adm-msg { grid-template-columns: 1fr; } }

/* ---------- the private-preview gate ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--mist); }
.gate__card { background: var(--gelcoat); border: 1px solid var(--foam); border-radius: var(--radius-lg); padding: 36px 32px; max-width: 440px; width: 100%; }
.gate__title { font-size: var(--fs3); margin: 24px 0 8px; }
.gate__lede { color: var(--granite); margin-bottom: 20px; }
.gate__alert { background: var(--falu-tint); border-left: 4px solid var(--falu); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 16px; }
.gate__form .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.gate__g { width: 18px; height: 18px; flex: none; }
.gate__fake { display: block; margin-bottom: 12px; font-size: 0.9375rem; color: var(--granite); }
.gate__fake .input { margin-top: 4px; }
.gate__note { color: var(--granite); font-size: 0.9375rem; margin-top: 16px; }
.site-footer__gate { margin-top: 16px; color: var(--granite); font-size: 0.9375rem; }