/*
 * Rimstuga: julbonad.
 * Red linen edge to edge, cross-stitch bands of hearts and granar, stitched headings
 * (Silkscreen), rhymes in readable mixed case (Libre Franklin; the start page bonad sews its verse
 * in Tiny5 cross-stitch). Plain CSS, no build step.
 * Fonts are self-hosted from /fonts (SIL Open Font License, see /fonts/OFL.txt).
 */

@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* The stitched verse in the start page bonad: stygn.js samples it, one font pixel per stitch. */
@font-face {
  font-family: "Tiny5";
  src: url("/fonts/tiny5.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --lin: #a3212b;
  --lin-mork: #7d1820;
  --vagg: #3a0b10;
  --garn: #fbf3e4;
  --garn-svag: #f2c9c9;
  --guld: #e8b23a;
  --guld-ljus: #f3c96a;
  --indigo: #1f3366;
  /* The free-rhyme bonad on the wall: unbleached linen, red and green thread, dark red ink. */
  --linne: #ddd3c2;
  --linne-mork: #c9bda8;
  --black: #5c1118;
  --rod: #b42b35;
  --gron: #2f7a4b;
  /* Cream yarn that is not re-pointed inside the linen bonad (which turns --garn into dark ink). */
  --garn-fast: #fbf3e4;

  --stygn: "Silkscreen", "Libre Franklin", system-ui, sans-serif;
  --text: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;

  --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='36' viewBox='0 0 60 36'%3E%3Cg fill='none' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath stroke='%23fbf3e4' stroke-opacity='.55' d='M0 1.5h3M6 1.5h3M12 1.5h3M18 1.5h3M24 1.5h3M30 1.5h3M36 1.5h3M42 1.5h3M48 1.5h3M54 1.5h3M3 34.5h3M9 34.5h3M15 34.5h3M21 34.5h3M27 34.5h3M33 34.5h3M39 34.5h3M45 34.5h3M51 34.5h3M57 34.5h3'/%3E%3Cpath stroke='%23fbf3e4' d='M7.5 9.5l2 2M9.5 9.5l-2 2M10.5 9.5l2 2M12.5 9.5l-2 2M16.5 9.5l2 2M18.5 9.5l-2 2M19.5 9.5l2 2M21.5 9.5l-2 2M4.5 12.5l2 2M6.5 12.5l-2 2M7.5 12.5l2 2M9.5 12.5l-2 2M10.5 12.5l2 2M12.5 12.5l-2 2M13.5 12.5l2 2M15.5 12.5l-2 2M16.5 12.5l2 2M18.5 12.5l-2 2M19.5 12.5l2 2M21.5 12.5l-2 2M22.5 12.5l2 2M24.5 12.5l-2 2M4.5 15.5l2 2M6.5 15.5l-2 2M7.5 15.5l2 2M9.5 15.5l-2 2M10.5 15.5l2 2M12.5 15.5l-2 2M13.5 15.5l2 2M15.5 15.5l-2 2M16.5 15.5l2 2M18.5 15.5l-2 2M19.5 15.5l2 2M21.5 15.5l-2 2M22.5 15.5l2 2M24.5 15.5l-2 2M7.5 18.5l2 2M9.5 18.5l-2 2M10.5 18.5l2 2M12.5 18.5l-2 2M13.5 18.5l2 2M15.5 18.5l-2 2M16.5 18.5l2 2M18.5 18.5l-2 2M19.5 18.5l2 2M21.5 18.5l-2 2M10.5 21.5l2 2M12.5 21.5l-2 2M13.5 21.5l2 2M15.5 21.5l-2 2M16.5 21.5l2 2M18.5 21.5l-2 2M13.5 24.5l2 2M15.5 24.5l-2 2'/%3E%3Cpath stroke='%23e8b23a' d='M44.5 6.5l2 2M46.5 6.5l-2 2M41.5 9.5l2 2M43.5 9.5l-2 2M44.5 9.5l2 2M46.5 9.5l-2 2M47.5 9.5l2 2M49.5 9.5l-2 2M38.5 12.5l2 2M40.5 12.5l-2 2M41.5 12.5l2 2M43.5 12.5l-2 2M44.5 12.5l2 2M46.5 12.5l-2 2M47.5 12.5l2 2M49.5 12.5l-2 2M50.5 12.5l2 2M52.5 12.5l-2 2M41.5 15.5l2 2M43.5 15.5l-2 2M44.5 15.5l2 2M46.5 15.5l-2 2M47.5 15.5l2 2M49.5 15.5l-2 2M38.5 18.5l2 2M40.5 18.5l-2 2M41.5 18.5l2 2M43.5 18.5l-2 2M44.5 18.5l2 2M46.5 18.5l-2 2M47.5 18.5l2 2M49.5 18.5l-2 2M50.5 18.5l2 2M52.5 18.5l-2 2M35.5 21.5l2 2M37.5 21.5l-2 2M38.5 21.5l2 2M40.5 21.5l-2 2M41.5 21.5l2 2M43.5 21.5l-2 2M44.5 21.5l2 2M46.5 21.5l-2 2M47.5 21.5l2 2M49.5 21.5l-2 2M50.5 21.5l2 2M52.5 21.5l-2 2M53.5 21.5l2 2M55.5 21.5l-2 2M44.5 24.5l2 2M46.5 24.5l-2 2M44.5 27.5l2 2M46.5 27.5l-2 2'/%3E%3C/g%3E%3C/svg%3E");
  --som: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9' viewBox='0 0 24 9'%3E%3Cg fill='none' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath stroke='%23fbf3e4' d='M0.5 3.5l2 2M2.5 3.5l-2 2M12.5 3.5l2 2M14.5 3.5l-2 2'/%3E%3Cpath stroke='%23e8b23a' d='M6.5 3.5l2 2M8.5 3.5l-2 2M18.5 3.5l2 2M20.5 3.5l-2 2'/%3E%3C/g%3E%3C/svg%3E");
  --vav:
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.09) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 4px);
  /* Stramalj: the holes of the canvas on a 10px grid. stygn.js snaps 5 and 10px stitches onto them. */
  --hal: radial-gradient(circle at 5px 5px, rgb(40 4 8 / 0.5) 0 1.1px, transparent 1.6px) 0 0 / 10px 10px;

  --sid: 1.25rem;
  --ease-ut: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
  accent-color: var(--guld);
  scrollbar-color: var(--garn-svag) var(--lin-mork);
}

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

body,
h1,
h2,
h3,
p,
ol,
ul,
figure,
blockquote {
  margin: 0;
}

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

body {
  min-height: 100dvh;
  background: var(--lin);
  color: var(--garn);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--guld);
}

::selection {
  background: var(--garn);
  color: var(--lin-mork);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--lin-mork);
}

::-webkit-scrollbar-thumb {
  background: var(--garn-svag);
  border: 3px solid var(--lin-mork);
  border-radius: 6px;
}

:focus-visible {
  outline: 3px solid var(--guld-ljus);
  outline-offset: 3px;
}

a {
  color: inherit;
  text-decoration-color: var(--guld-ljus);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--guld-ljus);
}

img,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

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

.skip {
  position: absolute;
  left: var(--sid);
  top: 0.75rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--garn);
  color: var(--lin-mork);
  font: 700 0.8125rem/1 var(--text); /* small text: pixel font only for logo and stitched headings */
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* ---------- The bonad: linen panel with bands top and bottom ---------- */

.bonad {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--lin);
  isolation: isolate;
}

.bonad::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--hal), var(--vav);
}

/* ---------- Cross-stitch (public/js/stygn.js) ---------- */

/*
 * Bands and stitched headings are sized in whole cells (--cell), so the stitched SVG takes
 * exactly the box the CSS fallback had. Thread colours are named for stygn.js: --trad-a for
 * hearts and stars, --trad-b for granar, --trad and --trad-em for headings.
 */
.band {
  --cell: 5px;
  --trad-a: garn;
  --trad-b: guld;

  height: calc(var(--cell) * 9);
  background-image: var(--band);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 60px 36px;
}

.som {
  --cell: 5px;
  --trad-a: garn;
  --trad-b: guld;

  height: var(--cell);
  margin-block: 2.5rem;
  background-image: var(--som);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 24px 9px;
}

.band.is-sydd,
.som.is-sydd {
  background: none;
}

.band-svg {
  width: 100%;
  overflow: visible;
}

[data-stygn] {
  --trad: garn;
  --trad-em: guld;
  --rader: 9;

  font-size: calc(var(--cell, 4px) * 8);
  line-height: calc(var(--cell, 4px) * var(--rader));
  letter-spacing: 0;
}

/* Stitched: the text stays for screen readers and search engines, the stitches are what you see. */
.is-sydd > .stygn-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stygn-svg {
  overflow: visible;
  max-width: none;
}

@media (prefers-reduced-motion: no-preference) {
  .stygn-svg.sy use {
    animation: stygn-in 420ms var(--ease-ut) both;
    transform-box: fill-box;
    transform-origin: center;
  }
}

@keyframes stygn-in {
  from {
    opacity: 0;
    transform: scale(0.35) rotate(-25deg);
  }
}

/* The logo keeps its width; the account link takes what is left and cuts a long address short. */
.topp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem var(--sid) 0;
}

.logo {
  --cell: 3px;
  --rader: 8;

  justify-self: start;
  font-family: var(--stygn);
  font-weight: 700;
  text-decoration: none;
  padding: 0.5rem 0.25rem;
}

.logo:hover .stygn-svg {
  filter: brightness(1.12) saturate(1.2);
}

.topp-nav {
  justify-self: end;
  display: flex;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}

.topp-nav a {
  font: 400 0.8125rem/1 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.06em;
  color: var(--garn-svag);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.75rem 0;
}

.topp-nav a:hover {
  color: var(--guld-ljus);
}

/* The account link is a stitched person (stygn.js); its text names it and is the no-JS fallback. */
.topp-nav .konto {
  --cell: 3px;
  --trad: garn;

  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 160ms ease;
}

.topp-nav .konto.is-sydd {
  padding: 0.5rem 0.75rem;
}

.topp-nav .konto:hover {
  background: rgb(58 11 16 / 0.35);
}

/* Logged in: the stitched person, then the mail address in plain linen-coloured text. */
.topp-nav .konto--inloggad,
.topp-nav .konto--inloggad.is-sydd {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  max-width: min(100%, 24rem);
  padding: 0.5rem 0.75rem;
}

.konto-ikon {
  flex: none;
  display: block;
  line-height: 0;
}

.konto-ikon .stygn-ikon {
  display: block;
}

.topp-nav .konto-mail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 0.875rem/1.3 var(--text);
  letter-spacing: 0;
  color: var(--linne);
}

.topp-nav .konto--inloggad:hover .konto-mail {
  color: var(--guld-ljus);
  text-decoration: underline 1px;
  text-underline-offset: 0.22em;
}

.stygn-ikon {
  overflow: visible;
  transition: filter 160ms ease;
}

.konto:hover .stygn-ikon {
  filter: sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.05);
}

.sida {
  flex: 1;
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding: 1.5rem var(--sid) 3rem;
}

.sida--smal {
  max-width: 34rem;
}

.sida--text {
  max-width: 44rem;
}

/*
 * The footer: a deeper field under the closing pattern band. The wordmark and one line,
 * the site's own pages, and the Christmas family as small sewn-on tags (dashed at rest,
 * solid on hover, like every other seam).
 */
.band--fot {
  margin-top: 1rem;
}

.fot {
  padding: 2rem var(--sid) 1.25rem;
  background: rgb(58 11 16 / 0.32);
  color: var(--garn-svag);
  font-size: 0.9375rem;
}

.fot-yta {
  display: grid;
  gap: 2rem;
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
}

.fot-logo {
  --cell: 3px;
  --rader: 8;

  display: inline-block;
  font-family: var(--stygn);
  font-weight: 700;
  text-decoration: none;
  padding: 0.25rem 0;
}

.fot-logo:hover .stygn-svg {
  filter: brightness(1.12) saturate(1.2);
}

.fot-varumarke p {
  max-width: 22rem;
  margin-top: 0.625rem;
  text-wrap: pretty;
}

.fot-rubrik {
  margin-bottom: 0.5rem;
  font: 700 0.8125rem/1.2 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--guld-ljus);
}

.fot-kolumn ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fot-kolumn a {
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--garn);
}

.fot-kolumn a:hover {
  color: var(--guld-ljus);
}

.familj {
  display: grid;
  gap: 0.625rem;
}

.fot-kolumn .familj-kort {
  display: grid;
  gap: 0.125rem;
  height: 100%;
  padding: 0.75rem 0.875rem;
  border: 2px dashed rgb(251 243 228 / 0.4);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.fot-kolumn .familj-kort:hover {
  border-style: solid;
  border-color: var(--guld-ljus);
  background: rgb(58 11 16 / 0.35);
  color: var(--garn);
}

.familj-namn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
}

.familj-rad {
  color: var(--garn-svag);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Authored, not a glyph: a small arrow out of the cloth, in the link colour. */
.ut-pil {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  transition: transform 160ms var(--ease-ut);
}

.familj-kort:hover .ut-pil {
  transform: translate(1px, -1px);
}

.fot-finstilt {
  max-width: 76rem;
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 2px dashed rgb(251 243 228 / 0.2);
  font-size: 0.8125rem;
  text-align: center;
}

@media (min-width: 40rem) {
  .familj {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .fot-yta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 2fr);
    gap: 2.5rem;
  }

  .fot-finstilt {
    text-align: left;
  }
}

/* ---------- Type ---------- */

.stygn {
  font-family: var(--stygn);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  /* Last resort only: a word is never hyphenated, so names stay whole. */
  overflow-wrap: anywhere;
  hyphens: manual;
}

.stygn em {
  font-style: normal;
  color: var(--guld);
}

.rubrik {
  font-size: 2rem;
  line-height: 1.12;
  text-align: center;
}

.rubrik--sida {
  /* Small phones: shrink with the viewport so "MORMOR BIRGITTA" and "PERSONLIGA" stay on one line. */
  font-size: clamp(1.125rem, 5.6vw, 1.5rem);
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.ingress {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  text-align: center;
  color: var(--garn-svag);
  font-size: 1rem;
  text-wrap: pretty;
}

.meta {
  margin-top: 0.5rem;
  text-align: center;
  color: var(--garn-svag);
  font-size: 0.9375rem;
}

.prosa {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.65;
}

.prosa h1 {
  margin-bottom: 1.5rem;
}

.prosa h2 {
  margin: 2.5rem 0 0.75rem;
  overflow-wrap: anywhere;
  font: 700 1rem/1.3 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--guld-ljus);
}

.prosa p,
.prosa ul {
  margin-bottom: 1rem;
  text-wrap: pretty;
}

.prosa ul {
  padding-left: 1.25rem;
}

.prosa li + li {
  margin-top: 0.375rem;
}

.prosa li::marker {
  color: var(--guld-ljus);
}

.saknas {
  padding: 0 0.25em;
  background: var(--garn);
  color: var(--lin-mork);
  font-weight: 700;
}

/* ---------- Controls ---------- */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.25rem;
  border: 2px solid var(--garn);
  border-radius: 4px;
  background: var(--garn);
  color: var(--lin-mork);
  font: 700 1rem/1 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.6);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-ut);
}

.knapp:hover {
  background: var(--guld-ljus);
  border-color: var(--guld-ljus);
  color: var(--lin-mork);
}

.knapp:active {
  transform: translateY(1px);
}

.knapp:disabled,
.knapp[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
}

.knapp--bred {
  width: 100%;
}

.knapp--tom {
  background: transparent;
  color: var(--garn);
  box-shadow: none;
}

.knapp--tom:hover {
  background: var(--garn);
  border-color: var(--garn);
  color: var(--lin-mork);
}

.falt {
  display: grid;
  gap: 0.375rem;
}

.falt + .falt {
  margin-top: 1rem;
}

.etikett {
  font: 700 0.8125rem/1.2 var(--text); /* small text: pixel font only for logo and stitched headings */
  overflow-wrap: anywhere;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--guld-ljus);
}

.inmatning {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 2px dashed rgb(251 243 228 / 0.7);
  border-radius: 4px;
  background: var(--lin-mork);
  color: var(--garn);
  font: 600 1.1875rem/1.3 var(--text);
  transition: border-color 160ms ease;
}

.inmatning::placeholder {
  color: var(--garn-svag);
  font-weight: 400;
  opacity: 1;
}

.inmatning:hover {
  border-color: var(--garn);
}

.inmatning:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--guld-ljus);
  box-shadow: 0 0 0 3px rgb(243 201 106 / 0.35);
}

.inmatning[aria-invalid="true"] {
  border-color: var(--garn);
  border-style: solid;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.kryss {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 1rem;
  cursor: pointer;
}

.kryss input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--garn);
  border-radius: 2px;
  background: var(--lin-mork);
  cursor: pointer;
}

/* Checked: an X stitch in gold yarn, drawn as two crossing threads. */
.kryss input::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background:
    linear-gradient(45deg, transparent 42%, var(--guld) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--guld) 42% 58%, transparent 58%);
  transform: scale(0);
  transition: transform 140ms var(--ease-ut);
}

.kryss input:checked::before {
  transform: scale(1);
}

.kryss input:hover {
  border-color: var(--guld-ljus);
}

.kryss input:focus-visible {
  outline: 3px solid var(--guld-ljus);
  outline-offset: 3px;
}

.kryss input[aria-invalid="true"] {
  border-style: dashed;
}

@media (forced-colors: active) {
  .kryss input {
    appearance: auto;
    -webkit-appearance: auto;
  }

  .kryss input::before {
    content: none;
  }
}

/* Alerts sit on garn so they read as a different cloth, not as more red. */
.besked {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 4px;
  background: var(--garn);
  color: var(--lin-mork);
  font-weight: 600;
}

.besked a {
  color: var(--lin-mork);
  text-decoration-color: var(--lin);
}

/* Focus rings on garn need a dark ring: gold on cream is about 1.4:1. */
.besked :focus-visible {
  outline-color: var(--lin-mork);
}

.besked--lugn :focus-visible {
  outline-color: var(--guld-ljus);
}

.besked--lugn {
  background: var(--lin-mork);
  color: var(--garn);
  border: 2px dashed rgb(251 243 228 / 0.55);
  font-weight: 400;
}

.besked--lugn a {
  color: var(--garn);
  text-decoration-color: var(--guld-ljus);
}

/* ---------- Search ---------- */

.sok {
  max-width: 34rem;
  margin: 1.75rem auto 0;
}

.sok-rad {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.375rem;
}

.knapp .laddar {
  display: none;
}

.knapp[data-loading] .laddar,
.knapp.is-loading .laddar {
  display: inline;
}

.knapp[data-loading] .vilar,
.knapp.is-loading .vilar {
  display: none;
}

.sok-svar {
  margin-top: 1.25rem;
}

.sok-svar p + p {
  margin-top: 0.5rem;
}

.sok-svar .forslag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.875rem 0;
  padding: 0;
  list-style: none;
}

.forslag a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}

.besked .forslag a:hover {
  background: var(--lin-mork);
  color: var(--garn);
  border-color: var(--lin-mork);
}

.skriver {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 4px;
  background: var(--lin-mork);
}

.skriver .band {
  --cell: 3px;

  margin-bottom: 0.75rem;
  background-size: 40px 24px;
}

/* ---------- Verses ---------- */

.vers {
  font: 500 1.125rem/1.6 var(--text);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.vers-rad {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

.kopiera-status:empty {
  display: none;
}

.kopiera-status {
  flex-basis: 100%;
  color: var(--garn);
  font-size: 0.875rem;
}

/* The signature moment: a verse is sewn in line by line, left to right, once. */
@media (prefers-reduced-motion: no-preference) {
  .sys .vers-rad {
    animation: sy-rad 300ms var(--ease-ut) both;
    animation-delay: calc(var(--rad, 0) * 100ms + var(--ram, 0) * 70ms);
  }

  .skriver .band {
    animation: sy-band 2400ms var(--ease-ut) infinite;
  }
}

@keyframes sy-rad {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.4;
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes sy-band {
  from {
    clip-path: inset(0 100% 0 0);
  }

  70%,
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- Stitched headings ---------- */

/* Sized in cells so the fallback text and the stitches take the same box (see [data-stygn]). */
.rubrik[data-stygn] {
  font-size: calc(var(--cell) * 8);
  line-height: calc(var(--cell) * var(--rader));
  letter-spacing: 0;
}

.rubrik--sida[data-stygn] {
  --cell: 3px;
}

/* ---------- Start page: the hero ---------- */

/*
 * One stramalj cloth edge to edge. Left: the stitched question, the search and quick picks.
 * Right: the bonad hanging on a pine rod, where the rhymes are shown. Phones stack them,
 * bonad last; choosing a present scrolls it into view (public/js/hero.js).
 */
.bonad[data-kant] .sida {
  max-width: 90rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero {
  display: grid;
  gap: 1.5rem;
  grid-template-areas:
    "rubrik"
    "sok"
    "bonad";
}

.hero-yta {
  display: contents;
}

.hero-rubrik {
  grid-area: rubrik;
  padding-top: 0.5rem;
}

.rubrik--hero {
  --cell: 4px;
  --rader: 8;
}

.hero-rubrik .ingress {
  margin-top: 1rem;
  font-size: 1.0625rem;
}

.hero-sok {
  grid-area: sok;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.sok--hero {
  position: relative;
  max-width: none;
  margin: 0;
}

.sok-falt {
  position: relative;
}

.sok-falt .inmatning {
  padding-left: 2.875rem;
}

.lupp {
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  pointer-events: none;
  fill: none;
  stroke: var(--garn);
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* The typing demo over the empty field (hero.js): the placeholder's face and colour, a gold caret. */
.sok-demo {
  position: absolute;
  inset: 0 1rem 0 2.875rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  color: var(--garn-svag);
  font: 400 1.1875rem/1.3 var(--text);
}

.sok-markor {
  flex-shrink: 0;
  width: 2px;
  height: 1.25em;
  margin-left: 1px;
  background: var(--guld-ljus);
  animation: markor 1.05s steps(1) infinite;
}

@keyframes markor {
  50% {
    opacity: 0;
  }
}

.inmatning.is-demo::placeholder {
  color: transparent;
}

.sok--hero .sok-rad {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.sok--hero .knapp {
  padding-inline: 0.875rem;
  font-size: 0.875rem;
}

/* Suggestions: a list sewn under the field, the active one filled with yarn. */
.forslagslista {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 5;
  display: grid;
  gap: 2px;
  margin: 0.375rem 0 0;
  padding: 0.375rem;
  list-style: none;
  border-radius: 4px;
  background: var(--lin-mork);
  box-shadow: inset 0 0 0 2px rgb(251 243 228 / 0.85), 0 22px 36px -18px rgb(0 0 0 / 0.85);
}

.forslag-rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 3px;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
}

.forslag-antal {
  flex-shrink: 0;
  color: var(--garn-svag);
  font-size: 0.875rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.forslag-rad.is-aktiv {
  background: var(--garn);
  color: var(--lin-mork);
}

.forslag-rad.is-aktiv .forslag-antal {
  color: var(--lin);
}

.snabbval ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.snabbval a {
  display: inline-block;
  padding-block: 0.5rem;
  font-weight: 600;
  text-decoration: underline dashed rgb(251 243 228 / 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.snabbval a:hover,
.snabbval a[aria-current="true"] {
  color: var(--guld-ljus);
  text-decoration-style: solid;
  text-decoration-color: var(--guld-ljus);
}

/*
 * The bonad on the wall: a linen hanging with a pinked hem, its top folded over a turned pine rod
 * that hangs from a nail on a red and white cord (resources/views/components/bonad-stang.blade.php).
 * The rod's SVG is drawn in px for this geometry: the rod centre 78px down, the cloth 2.5rem in.
 */
.vagg {
  grid-area: bonad;
  position: relative;
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding-top: 65px;
  scroll-margin-top: 1rem;
}

.stang {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 140px;
  pointer-events: none;
}

.stang--fram {
  z-index: 2;
}

.stang-lager {
  position: absolute;
  top: 0;
  width: 50%;
  height: 140px;
}

.stang-halva--v {
  left: 0;
}

/* The right half is the left half mirrored: one drawing, symmetric rod and cord. */
.stang-halva--h {
  right: 0;
  transform: scaleX(-1);
}

.stang-halva {
  display: block;
  width: 100%;
  max-width: none;
  height: 140px;
  overflow: visible;
}

.hangbonad {
  --garn: var(--black);
  --garn-svag: #6f3a33;
  --lin-mork: var(--black);
  --guld-ljus: var(--black);

  --pad: 1.25rem;

  position: relative;
  z-index: 1;
  isolation: isolate;
  margin-inline: 2.5rem;
  padding: 0 var(--pad) 2.25rem;
  background:
    radial-gradient(circle at 5px 5px, rgb(92 64 40 / 0.32) 0 1px, transparent 1.5px) 0 0 / 10px 10px,
    repeating-linear-gradient(0deg, rgb(70 48 30 / 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 1px, transparent 1px 3px),
    var(--linne);
  color: var(--black);
  box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.75), inset 0 0 0 1px rgb(70 48 30 / 0.2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.75rem), 95% 100%, 90% calc(100% - 0.75rem), 85% 100%, 80% calc(100% - 0.75rem), 75% 100%, 70% calc(100% - 0.75rem), 65% 100%, 60% calc(100% - 0.75rem), 55% 100%, 50% calc(100% - 0.75rem), 45% 100%, 40% calc(100% - 0.75rem), 35% 100%, 30% calc(100% - 0.75rem), 25% 100%, 20% calc(100% - 0.75rem), 15% 100%, 10% calc(100% - 0.75rem), 5% 100%, 0 calc(100% - 0.75rem));
  transition: opacity 200ms ease;
}

/* The top hem folded over the rod: rounded where it wraps, doubled cloth below, a running seam. */
.kanal {
  position: relative;
  height: 40px;
  margin-inline: calc(-1 * var(--pad));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='5' viewBox='0 0 11 5'%3E%3Cpath d='M1.6 2.6h6' stroke='%23400a10' stroke-opacity='.35' stroke-width='2.4' stroke-linecap='round' transform='translate(.3 .5)'/%3E%3Cpath d='M1.6 2.6h6' stroke='%237d1820' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2.6 2h3.6' stroke='%23fff' stroke-opacity='.4' stroke-width='.6' stroke-linecap='round'/%3E%3C/svg%3E") 3px 30px / 11px 5px repeat-x,
    linear-gradient(180deg,
      rgb(58 36 18 / 0.42) 0,
      rgb(58 36 18 / 0.12) 2px,
      rgb(255 250 240 / 0.34) 5px,
      rgb(255 250 240 / 0.12) 10px,
      rgb(58 36 18 / 0) 13px,
      rgb(58 36 18 / 0.14) 18px,
      rgb(58 36 18 / 0.3) 23px,
      rgb(58 36 18 / 0.06) 25px,
      rgb(255 250 240 / 0.1) 27px,
      rgb(58 36 18 / 0) 29px,
      rgb(58 36 18 / 0) 36px,
      rgb(58 36 18 / 0.16) 37px,
      rgb(255 250 240 / 0.12) 38.5px,
      transparent 40px);
}

/* The doubled cloth is a touch thicker at the sides where it wraps the rod. */
.kanal::before,
.kanal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 3px;
  width: 6px;
}

.kanal::before {
  left: 0;
  background: linear-gradient(90deg, rgb(58 36 18 / 0.28), transparent);
}

.kanal::after {
  right: 0;
  background: linear-gradient(270deg, rgb(58 36 18 / 0.28), transparent);
}

.hangbonad ::selection {
  background: var(--black);
  color: var(--linne);
}

.hangbonad :focus-visible {
  outline-color: var(--black);
}

.hangbonad.is-laddar {
  opacity: 0.6;
}

.band--bonad {
  --cell: 4px;

  /* Without JavaScript the cream band would vanish on linen; the space stays, the band does not. */
  margin-top: 0.5rem;
  background-image: none;
  --trad-a: rod;
  --trad-b: gron;
}

.hangbonad-rubrik {
  margin: 0.75rem 0 1rem;
  font: 700 0.875rem/1.3 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  /* Bonad Ink: 8.9:1 on the linen (the brighter --rod was 4.25:1). */
  color: var(--black);
}

/*
 * The verse, sewn straight onto the linen without a frame. stygn.js stitches it in Tiny5 at
 * --cell px a stitch (rows of 11 cells, 2 more between verse lines, continuation rows flush left).
 * Before it has, the text is set in Tiny5 at the same pitch but not shown, so the bonad already
 * has the height the stitches will take. Without JavaScript the text is the verse.
 */
.hangbonad-vers {
  /* --cell is the stitch size the verse wants; stygn.js goes down to --cell-min to keep every line on one row. */
  --cell: 3.5px;
  --cell-min: 2.5px;
  --trad: vin;

  display: block;
  padding: 0.25rem 0 0.5rem;
}

.hangbonad .vers,
.hangbonad-vers .vers-rad,
.vers-stygn {
  display: block;
}

.hangbonad .vers {
  color: var(--black);
}

.js .hangbonad-vers .vers {
  font: 400 calc(var(--cell) * 8) / calc(var(--cell) * 11) "Tiny5", var(--text);
  color: transparent;
  /* Fails visible: if the stitches never come, the text shows after a moment. */
  animation: vers-visas 0s 4s forwards;
}

.js .hangbonad-vers .vers-rad {
  padding-left: 0;
  text-indent: 0;
  text-wrap: balance;
}

.js .hangbonad-vers .vers-rad + .vers-rad {
  margin-top: calc(var(--cell) * 2);
}

/* Couplets (AABB) in a rhyme of 4, 6 or 8 lines: a wider gap after every second line (poem.gapBefore). */
.js .hangbonad-vers .vers:has(> .vers-rad:nth-child(4)):not(:has(> .vers-rad:last-child:nth-child(odd))) > .vers-rad:nth-child(2n + 3) {
  margin-top: calc(var(--cell) * 5);
}

.js.stygn-vers-av .hangbonad-vers .vers {
  font: 500 1.125rem/1.6 var(--text);
  color: var(--black);
  animation: none;
}

.js.stygn-vers-av .hangbonad-vers .vers-rad {
  padding-left: 0;
  text-indent: 0;
}

.js.stygn-vers-av .hangbonad-vers .vers-rad + .vers-rad {
  margin-top: 0;
}

@keyframes vers-visas {
  to {
    color: var(--black);
  }
}

/* Stitched: the text stays for screen readers and Kopiera, the stitches are what you see. */
.hangbonad-vers:has(> .vers-stygn .stygn-rad) > .vers {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vers-rader {
  display: block;
  width: max-content;
}

.vers-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.stygn-rad {
  display: block;
  max-width: none;
  overflow: visible;
}

/* The verse is the copy button: no frame, a faint wash on hover, green for a moment once copied. */
.vers-kopiera {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: copy;
  transition: background-color 200ms ease;
}

.vers-kopiera:hover {
  background: rgb(92 17 24 / 0.05);
}

.vers-kopiera[data-state="copied"] {
  background: rgb(47 122 75 / 0.12);
}

html:not(.js) .vers-kopiera {
  cursor: auto;
}

.kopiera-rad {
  min-height: 1.5em;
  margin-top: 0.375rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--garn-svag);
}

.kopiera-rad .kopiera-status {
  color: var(--garn);
  font-weight: 600;
}

.kopiera-rad:has(.kopiera-status:not(:empty)) .kopiera-tips,
html:not(.js) .kopiera-rad {
  display: none;
}

/* The one offer in the bonad: a line at the very bottom, in the indigo of the paid cloth. */
.hangbonad-uppsalj {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 2px dashed rgb(92 17 24 / 0.28);
  text-align: center;
  font-size: 0.9375rem;
  text-wrap: balance;
}

.hangbonad-uppsalj a {
  font-weight: 600;
  color: var(--indigo);
  text-decoration-color: var(--indigo);
}

.hangbonad-uppsalj a:hover {
  color: var(--black);
}

.hangbonad-text,
.hangbonad-besked {
  padding: 0.5rem 0.25rem;
  font-size: 1.0625rem;
  text-wrap: pretty;
}

.hangbonad-besked p + p,
.hangbonad-besked div + p,
.hangbonad-besked ul + p {
  margin-top: 0.75rem;
}

.hangbonad-besked a {
  text-decoration-color: var(--rod);
}

/*
 * New rhymes are being written: stygn.js sews a motif at a time onto the linen with a needle and a
 * red thread ([data-stygn-syr]). 10 px stitches land on the stramalj holes. The space is reserved
 * before it has, so the bonad does not jump. Reduced motion: the first motif, sewn, still.
 */
.hangbonad-syr {
  padding: 1.75rem 0 1.25rem;
}

.syr {
  --cell: 10px;

  display: flex;
  justify-content: center;
  min-height: 160px;
}

.syr-duk {
  position: relative;
  flex: none;
}

.syr-motiv {
  position: absolute;
  inset: 0;
}

.syr:not(.is-syr) .syr-motiv + .syr-motiv {
  display: none;
}

.syr.is-syr .syr-motiv,
.syr.is-syr .syr-svg use {
  opacity: 0;
}

.syr-svg {
  display: block;
  overflow: visible;
  max-width: none;
}

.syr-svg use {
  transform-box: fill-box;
  transform-origin: center;
}

.syr-nal {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

/* The needle goes in and out of the cloth as it travels. */
.syr-nal-stick {
  animation: nal-stick 340ms ease-in-out infinite alternate;
}

@keyframes nal-stick {
  to {
    transform: translate(-2px, 2px);
  }
}

/* After three minutes: one quiet line under the motif, no frame. */
.hangbonad-drojer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9375rem;
  text-wrap: balance;
  color: var(--black);
}

.hangbonad-forslag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.hangbonad-forslag a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 2px dashed rgb(92 17 24 / 0.55);
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}

.hangbonad-forslag a:hover {
  border-style: solid;
  border-color: var(--black);
}

@media (prefers-reduced-motion: no-preference) {
  .hangbonad-vers.sys .vers-rad {
    animation-delay: calc(var(--rad, 0) * 140ms + 80ms);
  }

  /* The signature moment in the bonad: each stitched row is sewn in, left to right, one after the other. */
  .vers-stygn.sy .stygn-rad {
    animation: sy-rad 380ms var(--ease-ut) both;
    animation-delay: calc(var(--rad, 0) * 110ms + 60ms);
  }
}

/* Narrow phones: the button goes under the field, so the placeholder is never cut off. */
@media (max-width: 29.99rem) {
  .sok--hero .sok-rad {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The rod reaches into the page gutter, so the cloth keeps its width and the finials stay on screen. */
  .vagg {
    width: auto;
    margin-inline: calc(4px - var(--sid));
  }

  .hangbonad {
    --pad: 0.875rem;
  }
}

@media (min-width: 30rem) {
  .rubrik--hero {
    --cell: 5px;
  }
}

@media (min-width: 48rem) {
  .rubrik--hero {
    --cell: 8px;
  }

  .rubrik--sida[data-stygn] {
    --cell: 5px;
  }

  .hangbonad {
    --pad: 1.75rem;
  }

  .hangbonad-vers {
    --cell: 4px;
    --cell-min: 3.5px;
  }
}

/* Two columns: the search left, the bonad on the wall right. The cloth runs edge to edge. */
@media (min-width: 64rem) {
  body:has(.bonad[data-kant]) {
    background: var(--lin);
  }

  .bonad[data-kant] {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    box-shadow: none;
  }

  /* The bonad takes up to 48rem (58% of the row) so a verse line needs fewer stitched rows. */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(48rem, 58%));
    /* The bonad spans both rows; its extra height goes below the search, not between heading and search. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "rubrik bonad"
      "sok bonad";
    gap: 1.75rem clamp(2rem, 5vw, 5rem);
    align-items: start;
    padding-block: 1rem 2rem;
  }

  /* The left column stays put while the bonad grows or shrinks with each rhyme. */
  .hero-rubrik {
    padding-top: clamp(2rem, 9vh, 7rem);
  }

  .rubrik--hero {
    --cell: 6px;

    text-align: left;
  }

  .hero-rubrik .ingress {
    margin-left: 0;
    text-align: left;
    font-size: 1.125rem;
  }

  .hero-sok {
    align-self: start;
    margin-inline: 0;
  }

  .vagg {
    max-width: none;
  }
}

@media (min-width: 80rem) {
  .rubrik--hero {
    --cell: 8px;
  }
}

@media (min-width: 100rem) {
  .rubrik--hero {
    --cell: 10px;
  }
}

/* ---------- Present page ---------- */

/*
 * The landing page from Google: no hero. The stitched heading and intro, then one bonad on the wall
 * with a rhyme at a time. Below: the personal line, related presents, a search.
 */
.presentsida,
.bonadsida {
  display: grid;
  gap: 2.5rem;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding-top: 1rem;
}

.presentsida-huvud,
.bonadsida-huvud {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}

/* The heading: the hero's stitched face, a size smaller, since names run long. */
.rubrik--present {
  --cell: 4px;
  --rader: 8;
}

@media (min-width: 48rem) {
  .rubrik--present {
    --cell: 5px;
  }
}

@media (min-width: 80rem) {
  .rubrik--present {
    --cell: 6px;
  }
}

.presentsida-huvud .ingress,
.bonadsida-huvud .ingress {
  margin-top: 1rem;
  font-size: 1.0625rem;
}

/*
 * The rhymes: one bonad on the wall (the start page's rod, cord and linen), one rhyme at a time.
 * public/js/bladdra.js pages through them; the arrows sit either side of the bonad from 64rem and
 * under it, round the counter, below that. Without JavaScript every rhyme is listed in the bonad.
 */
.bladdra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "bonad bonad bonad"
    "forra rakna nasta";
  align-items: center;
  gap: 1rem;
}

.bladdra-vagg {
  grid-area: bonad;
}

/* Vertical scrolling stays with the browser; a horizontal drag turns the page (bladdra.js). */
.bladdra .hangbonad {
  touch-action: pan-y;
}

.rimrad {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rimrad .hangbonad-rim {
  padding-top: 0.75rem;
}

/* The stitched verse is as tall as the tallest rhyme (stygn.js); a shorter one sits in the middle. */
.rimrad .vers-stygn {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The status line of each rhyme takes no room until it says "Kopierat", in place of the shared hint. */
.rimrad .kopiera-rad {
  min-height: 0;
  margin-top: 0;
}

.hangbonad:has(.kopiera-status:not(:empty)) .bladdra-tips {
  display: none;
}

/* Without JavaScript: every rhyme, one after the other, a stitched seam between them. */
html:not(.js) .rimrad > li[hidden] {
  display: block !important;
}

html:not(.js) .rimrad > li + li {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 2px dashed rgb(92 17 24 / 0.28);
}

.rimrad > li {
  scroll-margin-top: 9rem;
}

/* The arrows: stitched in cream yarn, in the dashed frame of the related-present links. */
.bladdra-knapp {
  --cell: 4px;
  --trad: garn;

  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px dashed rgb(251 243 228 / 0.55);
  border-radius: 4px;
  background: none;
  color: var(--garn);
  font: 600 0.75rem/1.1 var(--text);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.bladdra-knapp--forra {
  grid-area: forra;
  justify-self: end;
}

.bladdra-knapp--nasta {
  grid-area: nasta;
  justify-self: start;
}

.bladdra-knapp:hover:not([aria-disabled="true"]) {
  border-style: solid;
  border-color: var(--guld-ljus);
  background: var(--lin-mork);
}

.bladdra-knapp:active:not([aria-disabled="true"]) .stygn-ikon {
  transform: translateY(1px);
}

/* At the first or last rhyme: still focusable (the arrow keys keep working), clearly resting. */
.bladdra-knapp[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.bladdra-rakna {
  grid-area: rakna;
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--garn-svag);
}

@media (forced-colors: active) {
  .bladdra-knapp {
    border-color: ButtonText;
  }

  .bladdra-knapp[aria-disabled="true"] {
    border-color: GrayText;
  }
}

@media (min-width: 64rem) {
  .bladdra {
    grid-template-columns: minmax(0, 1fr) minmax(0, 48rem) minmax(0, 1fr);
    grid-template-areas:
      "forra bonad nasta"
      ". rakna .";
    column-gap: 2rem;
    row-gap: 0.5rem;
  }

  .bladdra-vagg {
    max-width: none;
  }

  /* Level with the middle of the cloth, below the rod. */
  .bladdra-knapp {
    --cell: 5px;

    width: 3.5rem;
    height: 3.5rem;
    margin-top: 65px;
  }
}

/*
 * The rhymes bought with rim: gift tags of natural linen tied to the foot of the bonad by a short red
 * and white string (components/presentlappar.blade.php). The strings start under the pinked hem;
 * each tag hangs a little askew from where its string is tied, and swings when pointed at.
 */
.presentlappar {
  --snore: 2.75rem;

  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 7vw, 6rem);
  margin: -1.25rem 2.5rem 0;
  padding: 0;
  list-style: none;
}

.presentlapp {
  flex: 0 1 12rem;
  min-width: 0;
  filter: drop-shadow(0 10px 9px rgb(26 3 6 / 0.45));
}

.presentlapp--annat {
  --vrid: -4deg;
}

.presentlapp--eget {
  --vrid: 3deg;
  --lapp-som: var(--indigo);

  margin-top: 0.75rem;
}

/* The tag swings from where the string is tied, so the link starts there. */
.lapp {
  position: relative;
  display: block;
  padding-top: var(--snore);
  color: var(--black);
  text-decoration: none;
  white-space: normal;
  transform: rotate(var(--vrid));
  transform-origin: 50% 0;
}

/* Two strands of the twisted cord: one runs in front of the tag into the hole, one behind it. */
.lapp::before,
.lapp::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1.25px);
  width: 2.5px;
  height: calc(var(--snore) + 0.95rem);
  border-radius: 2px;
  background: repeating-linear-gradient(-35deg, var(--rod) 0 2.2px, #f6eedd 2.2px 4.4px);
  box-shadow: 0 0 0 0.5px rgb(90 58 48 / 0.6);
  transform-origin: 50% 0;
}

.lapp::before {
  z-index: 2;
  transform: rotate(-3deg);
}

.lapp::after {
  z-index: 0;
  transform: rotate(4deg);
}

.lapp-kort {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  padding: 1.75rem 0.875rem 0.875rem;
  text-align: center;
}

/* The tag itself: linen with the bonad's weave, top corners cut, a punched hole for the string. */
.lapp-kort::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgb(70 48 30 / 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.2) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #e6ddce, var(--linne) 60%, #d6cbb8);
  clip-path: polygon(1.1rem 0, calc(100% - 1.1rem) 0, 100% 1.1rem, 100% 100%, 0 100%, 0 1.1rem);
  -webkit-mask: radial-gradient(circle at 50% 0.9rem, transparent 0.28rem, #000 calc(0.28rem + 0.5px));
  mask: radial-gradient(circle at 50% 0.9rem, transparent 0.28rem, #000 calc(0.28rem + 0.5px));
}

/* The paper ring round the hole. */
.lapp-kort::after {
  content: "";
  position: absolute;
  top: calc(0.9rem - 0.5rem);
  left: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  border: 0.22rem solid #cfc3ae;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgb(58 36 18 / 0.35);
}

.lapp-titel {
  font: 700 0.8125rem/1.3 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline 2px transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 160ms ease;
}

/* A short running stitch between the name and the price: wine, or indigo on the personal tag. */
.lapp-pris {
  padding-top: 0.375rem;
  border-top: 2px dashed var(--lapp-som, rgb(92 17 24 / 0.55));
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #5a2a26;
}

.lapp:hover {
  color: var(--black);
}

.lapp:hover .lapp-titel {
  text-decoration-color: var(--rod);
}

.lapp:focus-visible {
  outline: none;
}

.lapp:focus-visible .lapp-kort {
  outline: 3px solid var(--guld-ljus);
  outline-offset: 4px;
}

.lapp ::selection {
  background: var(--black);
  color: var(--linne);
}

@media (prefers-reduced-motion: no-preference) {
  .lapp:hover {
    animation: lapp-gunga 1100ms var(--ease-ut);
  }
}

@keyframes lapp-gunga {
  20% {
    transform: rotate(calc(var(--vrid) + 7deg));
  }

  45% {
    transform: rotate(calc(var(--vrid) - 4deg));
  }

  70% {
    transform: rotate(calc(var(--vrid) + 1.5deg));
  }
}

@media (forced-colors: active) {
  .lapp-kort {
    border: 2px solid LinkText;
  }
}

@media (max-width: 29.99rem) {
  .presentlappar {
    --snore: 2rem;

    gap: 1.5rem;
    margin-inline: 1.5rem;
  }

  .presentlapp {
    flex-basis: 9rem;
  }

  .presentlapp--annat {
    --vrid: -3deg;
  }

  .presentlapp--eget {
    --vrid: 2.5deg;
  }

  .lapp-kort {
    padding: 1.6rem 0.5rem 0.75rem;
  }

  .lapp-titel {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .lapp-pris {
    font-size: 0.875rem;
  }
}

/*
 * Onwards, under the bonad: neighbouring presents as one or two lines of plain links with a small
 * cross-stitch between them, and the way back to the search. No boxes; then the footer band.
 */
.fler {
  max-width: 62rem;
  margin: 1.5rem auto 1rem;
  text-align: center;
  text-wrap: balance;
}

/*
 * The posts are separated by plain (wide) spaces, so a line can only break between two posts and
 * the space at a break disappears. Each separator is glued to the front of the post after it and
 * takes no width; app.js hides the one that starts a line. So no line ever ends on a cross.
 */
.fler-rad {
  margin: 0;
  line-height: 2;
  word-spacing: 1.25rem;
}

.fler-rubrik {
  font: 700 0.75rem/1 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.1em;
  word-spacing: normal;
  text-transform: uppercase;
  color: var(--guld-ljus);
}

.fler a {
  color: var(--garn);
  text-decoration-color: rgb(251 243 228 / 0.4);
  text-underline-offset: 0.25em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.fler a:hover {
  color: var(--guld-ljus);
  text-decoration-color: currentColor;
}

.fler-post {
  white-space: nowrap;
  word-spacing: normal;
}

.fler-prick {
  position: relative;
  display: inline-block;
  width: 0;
  height: 7px;
}

/* Drawn in the middle of the space before the post. */
.fler-prick::before {
  content: "";
  position: absolute;
  top: calc(50% - 3.5px - 0.15em);
  right: calc(0.625rem + 0.125em - 3.5px);
  width: 7px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M1.2 1.2l4.6 4.6M5.8 1.2l-4.6 4.6' fill='none' stroke='%23e8b23a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 7px 7px no-repeat;
}

.fler-post.is-radstart .fler-prick {
  visibility: hidden;
}

.fler-sok {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

/* A plain text button in the bonad (Försök igen), read like the links around it. */
.lank-knapp {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rod);
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.lank-knapp:disabled {
  opacity: 0.5;
  cursor: default;
}

.tomt {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

/* ---------- All presents, A to Ö ---------- */

/* The breadcrumb on /julklappsrim. */
.smulor ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--garn-svag);
}

.smulor li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.6;
}

.smulor a {
  color: var(--garn-svag);
}

.smulor a:hover {
  color: var(--guld-ljus);
}

@media (min-width: 64rem) {
  .smulor ol {
    justify-content: flex-start;
  }
}

.register .ingress {
  margin-bottom: 2rem;
}

.register-bokstaver ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.register-bokstaver a {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 2px dashed rgb(251 243 228 / 0.45);
  border-radius: 4px;
  font: 700 0.9375rem/1 var(--stygn);
  text-decoration: none;
}

.register-bokstaver a:hover {
  border-style: solid;
  border-color: var(--guld-ljus);
}

.register-grupp {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  border-top: 2px dashed rgb(251 243 228 / 0.25);
  scroll-margin-top: 1rem;
}

.register-bokstav {
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--guld);
}

.register-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.register-lista a {
  display: inline-block;
  padding-block: 0.375rem;
  font-weight: 600;
}

/* ---------- Forms on their own page (login, checkout) ---------- */

.formular {
  margin-top: 1.75rem;
}

.formular .knapp {
  margin-top: 1.25rem;
}

.lagom {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--garn-svag);
  font-size: 0.9375rem;
}

/* ---------- Personal rhyme: the form and the draft page ---------- */

.formular--rim .falt + .falt {
  margin-top: 1.375rem;
}

/* Fields are a dashed seam on the linen, like the sketch's third screen. */
.inmatning--linje {
  min-height: 3rem;
  padding: 0.375rem 0.125rem 0.5rem;
  border: 0;
  border-bottom: 2px dashed rgb(251 243 228 / 0.75);
  border-radius: 0;
  background: transparent;
  font-size: 1.0625rem;
}

.inmatning--linje:hover {
  border-bottom-color: var(--garn);
}

.inmatning--linje:focus-visible {
  border-bottom-style: solid;
  border-bottom-color: var(--guld-ljus);
  box-shadow: 0 2px 0 0 var(--guld-ljus);
}

.inmatning--linje[aria-invalid="true"] {
  border-bottom-style: solid;
  border-bottom-color: var(--garn);
}

textarea.inmatning {
  resize: vertical;
  line-height: 1.45;
}

.falt-hjalp {
  color: var(--garn-svag);
  font-size: 0.875rem;
}

.falt-fel {
  justify-self: start;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  background: var(--garn);
  color: var(--lin-mork);
  font-size: 0.875rem;
  font-weight: 600;
}

.falt-fel a {
  color: var(--lin-mork);
}

fieldset.val {
  min-width: 0;
  margin-inline: 0;
  padding: 0;
  border: 0;
}

fieldset.val legend {
  padding: 0;
  margin-bottom: 0.375rem;
}

.val-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.val-knapp {
  position: relative;
  cursor: pointer;
}

.val-knapp input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.val-knapp span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid rgb(251 243 228 / 0.6);
  border-radius: 3px;
  font: 700 0.8125rem/1 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.val-knapp:hover span {
  border-color: var(--garn);
}

.val-knapp input:checked + span {
  background: var(--garn);
  border-color: var(--garn);
  color: var(--lin-mork);
}

.val-knapp input:focus-visible + span {
  outline: 3px solid var(--guld-ljus);
  outline-offset: 3px;
}

.formular--rim .knapp {
  margin-top: 1.75rem;
}

.formular--rim .knapp + .meta {
  margin-top: 0.5rem;
}

/*
 * ---------- The bought part, on the bonad ----------
 * The form, a bought rhyme, login, checkout and Mina rim hang the present page's bonad (rod, cord,
 * linen) with their content sewn onto the linen. Inside .hangbonad the yarn colours are already
 * re-pointed to the bonad ink; the rules below turn the cream controls into their linen versions.
 */
/* The rod and cloth from the start page, one under the other here, not in the hero's grid area. */
.bonadsida .vagg {
  grid-area: auto;
}

.vagg.vagg--form {
  max-width: 38rem;
}

.formular--bonad {
  padding: 1.25rem 0 0.75rem;
}

.formular--bonad > :first-child,
.formular--bonad > .formular:first-child {
  margin-top: 0;
}

.hangbonad {
  caret-color: var(--black);
}

.hangbonad .inmatning--linje {
  color: var(--black);
  border-bottom-color: rgb(92 17 24 / 0.55);
}

.hangbonad .inmatning--linje:hover {
  border-bottom-color: var(--black);
}

.hangbonad .inmatning--linje:focus-visible,
.hangbonad .inmatning--linje[aria-invalid="true"] {
  border-bottom-color: var(--black);
  box-shadow: 0 2px 0 0 var(--black);
}

.hangbonad .inmatning::selection {
  background: var(--black);
  color: var(--linne);
}

/* Buttons on the linen: wine thread filled, linen ink; the outline one is a wine line. */
.hangbonad .knapp {
  line-height: 1.3;
  text-wrap: balance;
  background: var(--black);
  border-color: var(--black);
  color: var(--linne);
  box-shadow: 0 8px 14px -8px rgb(58 11 16 / 0.7);
}

.hangbonad .knapp:hover {
  background: #3d080d;
  border-color: #3d080d;
  color: var(--linne);
}

.hangbonad .knapp--tom {
  background: transparent;
  color: var(--black);
  box-shadow: none;
}

.hangbonad .knapp:focus-visible,
.hangbonad .val-knapp input:focus-visible + span,
.hangbonad .kryss input:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}

/* Tone and length: dashed while open, filled with wine thread once chosen (the Seam Rule). */
.hangbonad .val-knapp span {
  border: 2px dashed rgb(92 17 24 / 0.55);
  color: var(--black);
}

.hangbonad .val-knapp:hover span {
  border-style: solid;
  border-color: var(--black);
}

.hangbonad .val-knapp input:checked + span {
  background: var(--black);
  border: 2px solid var(--black);
  color: var(--linne);
}

/* Errors and alerts: a wine patch with linen ink, never cream on cream. */
.hangbonad .falt-fel,
.hangbonad .besked {
  background: var(--black);
  color: var(--linne);
}

.hangbonad .falt-fel a,
.hangbonad .besked a {
  color: var(--linne);
  text-decoration-color: currentColor;
}

.hangbonad .besked :focus-visible {
  outline-color: var(--black);
}

.hangbonad .besked--lugn {
  border: 2px dashed rgb(92 17 24 / 0.45);
  background: rgb(255 250 240 / 0.4);
  color: var(--black);
  font-weight: 500;
}

/* The terms box: a light well with a wine X stitch. */
.hangbonad .kryss input {
  border-color: var(--black);
  background: rgb(255 250 240 / 0.55);
}

.hangbonad .kryss input::before {
  background:
    linear-gradient(45deg, transparent 40%, var(--black) 40% 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--black) 40% 60%, transparent 60%);
}

.hangbonad-text--mitt {
  text-align: center;
  text-wrap: balance;
}

.formular--bonad .hangbonad-text + .hangbonad-text {
  padding-top: 0;
}

/* What it costs, sewn off from the fields by a running stitch, right above the button. */
.bonad-pris {
  margin-top: 1.75rem;
  padding-top: 0.875rem;
  border-top: 2px dashed rgb(92 17 24 / 0.3);
  text-align: center;
  text-wrap: balance;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}

.formular--bonad .bonad-pris + .knapp {
  margin-top: 0.875rem;
}

.formular--bonad .bonad-pris + .formular {
  margin-top: 1.25rem;
}

.formular--bonad > .bonad-pris:first-child {
  padding-top: 0;
  border-top: 0;
}

/*
 * Which rhyme: the two gift tags from the present page, hanging from a red and white cord across
 * the linen. The chosen one hangs straight with its name filled in wine; the radio stays over the tag.
 */
.lappval-rad {
  --snore: 1.5rem;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.75rem, 5vw, 2.5rem);
  margin-top: 0.5rem;
}

.lappval-rad::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(-55deg, var(--rod) 0 2.4px, #f6eedd 2.4px 4.8px);
  box-shadow: 0 0 0 0.5px rgb(90 58 48 / 0.6), 0 4px 5px -2px rgb(58 36 18 / 0.4);
}

.lappval-lapp {
  flex: 0 1 12rem;
  min-width: 0;
  cursor: pointer;
  filter: drop-shadow(0 8px 7px rgb(58 36 18 / 0.35));
}

.lappval-lapp--annat {
  --vrid: -4deg;
}

.lappval-lapp--eget {
  --vrid: 3deg;
  --lapp-som: var(--indigo);
}

.lappval-lapp input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* A shade lighter than the cloth they hang on. */
.lappval .lapp-kort::before {
  background:
    repeating-linear-gradient(0deg, rgb(70 48 30 / 0.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f7f2e8, #ece4d5 60%, #e0d6c4);
}

.lappval .lapp-titel {
  padding: 0.25rem 0.375rem;
  border-radius: 2px;
  transition: background-color 160ms ease, color 160ms ease;
}

.lappval-lapp:has(input:checked) {
  --vrid: 0deg;

  filter: drop-shadow(0 12px 10px rgb(58 36 18 / 0.5));
}

.lappval-lapp:has(input:checked) .lapp-titel {
  background: var(--black);
  color: var(--linne);
  text-decoration: none;
}

.lappval-lapp:has(input:focus-visible) .lapp-kort {
  outline: 3px solid var(--black);
  outline-offset: 4px;
}

.val-par {
  display: grid;
  gap: 1.375rem;
  margin-top: 1.375rem;
}

/* Under the bonad, on the red: notes, the rewrite form, the account actions. Form measure. */
.under-bonad {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.under-bonad > .lagom:first-child {
  margin-top: 0;
}

.omskriv {
  margin-top: 1.5rem;
}

/* ---------- Mina rim ---------- */

/* The heading is the balance; the gold stitches under it are decoration, one per rim. */
.minarim-huvud {
  display: grid;
  gap: 1rem;
  text-align: center;
}

.minarim-huvud .saldo-stygn {
  margin-inline: auto;
}

.saldo-stygn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 22rem;
  margin: 0;
}

/* An X stitch: the under-diagonal darker, the over-diagonal lighter, like stygn.js. */
.saldo-stygn span {
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 11.5l9-9' stroke='%23a8771b' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M2.5 2.5l9 9' stroke='%23f3c96a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.saldo-stygn--bonad {
  margin: 0.5rem auto 1rem;
}

.saldo-stygn--bonad span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 11.5l9-9' stroke='%237a1720' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M2.5 2.5l9 9' stroke='%23b42b35' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/*
 * The next step: "Vad vill du sy?" and the two gift tags from the present page, hanging from a red
 * and white cord across the cloth. Buying more is one quiet line under them; with no rim left the
 * buy button leads and the tags follow.
 */
.minarim-sy {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 34rem;
  margin: -0.5rem auto 0;
  text-align: center;
}

.minarim-fraga {
  margin: 0 0 1.25rem;
  font: 700 0.875rem/1.3 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--guld-ljus);
}

.minarim-fraga--sen {
  margin-top: 2.25rem;
  color: var(--garn-svag);
  font-size: 0.8125rem;
}

.minarim-kop {
  min-width: min(100%, 20rem);
}

.presentlappar--snore {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding-inline: 0.5rem;
}

.presentlappar--snore::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(-55deg, var(--rod) 0 2.4px, #f6eedd 2.4px 4.8px);
  box-shadow: 0 0 0 0.5px rgb(58 11 16 / 0.6), 0 4px 5px -2px rgb(26 3 6 / 0.45);
}

.presentlappar--snore .presentlapp {
  --snore: 1.5rem;
}

/* A tag that costs more than you have says how many more it needs. */
.lapp-brist {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--black);
}

.minarim-mer {
  margin: 2.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--garn-svag);
}

.minarim-mer a {
  color: var(--garn);
  text-decoration-thickness: 1px;
}

.minarim-mer a:hover {
  color: var(--guld-ljus);
}

/* The saved rhymes, after the next step: a smaller stitched heading, then one bonad each. */
.minarim-dina {
  display: grid;
  gap: 2.5rem;
  margin-top: 1.5rem;
}

.minarim-dina-rubrik {
  --cell: 3px;
  --rader: 8;

  margin-bottom: -1rem;
}

/* Logga ut: a quiet text button at the very foot. */
.utloggning {
  margin-top: 3.5rem;
  text-align: center;
}

.textknapp {
  padding: 0.75rem 0.5rem;
  border: 0;
  background: none;
  color: var(--garn-svag);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: rgb(242 201 201 / 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

.textknapp:hover {
  color: var(--guld-ljus);
  text-decoration-color: currentColor;
}

.textknapp:focus-visible {
  outline: 3px solid var(--guld-ljus);
  outline-offset: 3px;
  border-radius: 2px;
}

.minarim-rim {
  display: grid;
  gap: 1.25rem;
}

.minarim-rim .vagg {
  max-width: 44rem;
}

.minarim-rim .hangbonad-rubrik {
  margin-bottom: 0.25rem;
}

.minarim-atgarder {
  display: grid;
  gap: 0.25rem;
  text-align: center;
}

.minarim-val summary {
  cursor: pointer;
  list-style: none;
}

.minarim-val summary::-webkit-details-marker {
  display: none;
}

.minarim-val[open] > :not(summary) {
  margin-top: 1rem;
  text-align: left;
}

/* Radera is a quiet text link; the confirmation is outlined, never the primary button. */
.minarim-radera summary {
  display: inline-block;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  color: var(--garn-svag);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: rgb(242 201 201 / 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.minarim-radera summary:hover {
  color: var(--guld-ljus);
}

.minarim-radera[open] summary {
  color: var(--garn);
}

.minarim-radera[open] > :not(summary) {
  margin-top: 0.5rem;
}

.knapp--fara {
  background: transparent;
  border-style: dashed;
  color: var(--garn);
  box-shadow: none;
}

.knapp--fara:hover {
  background: var(--garn);
  border-style: solid;
  color: var(--lin-mork);
}

/* ---------- Checkout ---------- */

.kop-pris {
  margin: 0;
  text-align: center;
  color: var(--black);
}

.kop-summa {
  font: 700 2.25rem/1 var(--stygn);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kop-antal {
  display: block;
  margin-top: 0.5rem;
  font: 700 0.8125rem/1.2 var(--text); /* small text: pixel font only for logo and stitched headings */
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.formular--bonad .kryss {
  color: var(--black);
}

/* Phones: the linen is narrow, so button labels close up a little before they wrap. */
@media (max-width: 29.99rem) {
  .hangbonad .knapp {
    padding-inline: 0.75rem;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
  }
}


/* ---------- Wider screens: the same bonad, hung on the wall ---------- */

@media (min-width: 48rem) {
  :root {
    --sid: 2.5rem;
  }

  .rubrik {
    font-size: 3rem;
  }

  .rubrik--sida {
    font-size: 2.25rem;
  }

  .vers {
    font-size: 1.25rem;
  }

  .sok-rad {
    grid-template-columns: 1fr auto;
  }

  .sok-rad .knapp {
    padding-inline: 1.75rem;
  }

  .topp {
    padding-top: 1rem;
  }
}

@media (min-width: 64rem) {
  body {
    background: var(--vagg);
  }

  .bonad {
    width: min(100% - 4rem, 80rem);
    min-height: calc(100dvh - 4rem);
    margin: 2rem auto;
    box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(0 0 0 / 0.3);
  }

  .topp {
    padding-inline: 2.5rem;
  }
}

/* Bonaden: inget mellan versen och avgränsaren. Kopieringsbeskedet tar ingen plats,
   det lägger sig över versens nederkant en stund och försvinner. */
.hangbonad-rim { position: relative; }
.hangbonad-rim .kopiera-rad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  min-height: 0;
  margin: 0;
  pointer-events: none;
}
.hangbonad-rim .kopiera-rad .kopiera-status:not(:empty) {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 2px;
  background: var(--black, #5c1118);
  color: var(--garn-fast);
}