@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&family=Fraunces:opsz,wght,SOFT@9..144,500,50;9..144,600,50;9..144,700,50&display=swap');
/* @import 'react-slideshow-image/dist/styles.css';
@import 'react-lazy-load-image-component/src/effects/black-and-white.css'; */

/* Cocoso */

*,
*:hover {
  box-sizing: border-box;
}

/* Essential CSS Reset and Base Styles for SSR */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem 0;
}

/* Form elements */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

/* Links */
a {
  color: var(--cocoso-colors-theme-500);
  text-decoration: none;
}

/* Lists */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

#main-viewport {
  height: 100%;
  width: calc(100% - 72px);
  background-color: #f3f3f3;
  background: var(--cocoso-colors-theme-50);
  background: linear-gradient(
    0deg,
    var(--cocoso-colors-theme-50) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

@media (max-width: 960px) {
  #main-viewport {
    width: 100%;
  }
}

/* One measure for the page: content is at most --cocoso-page wide and
   keeps --cocoso-gutter from the screen's edge, on every block from the
   hero to the footer. */
:root {
  --cocoso-page: 1180px;
  --cocoso-gutter: 24px;
}

@media (max-width: 959px) {
  :root {
    --cocoso-gutter: 16px;
  }
}

.page-wrap {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: calc(var(--cocoso-page) + 2 * var(--cocoso-gutter));
  padding-left: var(--cocoso-gutter);
  padding-right: var(--cocoso-gutter);
  width: 100%;
}

/* The footer sits at the bottom even when the page is short */
.wrapper {
  background-color: var(--cocoso-colors-gray-100);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 0;
  transition: all 0.5s ease;
}

#main-content-container {
  flex: 1 0 auto;
}

.wrapper.mobile-wrapper {
  padding-top: 0;
}

@media (min-width: 960px) {
  .logo-container {
    z-index: 1001;
  }
}

.logo {
  max-width: 360px;
  max-height: 120px;
}

.smaller-logo.logo {
  max-height: 48px;
}

@media (max-width: 460px) {
  .logo {
    max-width: 180px;
  }
}

.is-terms-page h1,
.is-terms-page h2,
.is-terms-page h3 {
  font-weight: bold;
  margin-bottom: 0.5em;
  margin-top: 1em;
}

.is-terms-page h1:nth-of-type(1) {
  margin-top: 0;
}

.is-terms-page h1 {
  font-size: 2em;
}

.is-terms-page h2 {
  font-size: 1.6em;
}

.is-terms-page h3 {
  font-size: 1.2em;
}

.sortableHelper {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  font-family: 'sans-serif';
  cursor: grab;
}

/* --- When an event happens (DatesAndTimes.tsx) --- */

.occurrences {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* tegel, the warm accent the site uses for what is near in time, not
   the theme's tint that is used all over the form */
.occurrence {
  padding: 10px 12px 12px;
  min-width: 0;
  border-radius: var(--cocoso-radius-falt);
  background: color-mix(
    in srgb,
    var(--cocoso-tegel-100) 45%,
    var(--cocoso-papper)
  );
  box-shadow: inset 0 0 0 1px var(--cocoso-tegel-100);
}

.occurrence.is-warning {
  box-shadow: inset 0 0 0 2px #d9922e;
}

.occurrence.is-conflict {
  box-shadow: inset 0 0 0 2px var(--cocoso-colors-red-600, #c53030);
}

.occurrence-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.occurrence-title {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
  font-weight: 700;
}

/* the date in words, since the picker shows it as numbers */
.occurrence-day {
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
  font-weight: 400;
}

.occurrence-day::first-letter {
  text-transform: uppercase;
}

/* "Ändra till flera dagar" / "Ändra till en dag": a link that switches */
.occurrence-days {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cocoso-tegel-600);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

.occurrence-days:hover {
  text-decoration-thickness: 2px;
}

/* narrow: the date (or dates) on a row, the times side by side under it;
   wide: all on one row */
.occurrence {
  container-type: inline-size;
}

.occurrence-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.occurrence-fields:not(.is-range) > .is-date {
  grid-column: 1 / -1;
}

@container (min-width: 440px) {
  .occurrence-fields {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .occurrence-fields:not(.is-range) > .is-date {
    grid-column: auto;
  }

  .occurrence-fields.is-range {
    grid-template-columns: repeat(4, 1fr);
  }
}

.occurrence-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.occurrence-field > span {
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-ui);
  font-size: 12px;
  font-weight: 600;
}

.occurrence-field input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--cocoso-papper);
  box-shadow: inset 0 0 0 1px var(--cocoso-tegel-100);
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.occurrence-field input:focus-visible {
  outline: 2px solid var(--cocoso-tegel);
  outline-offset: 1px;
}

.occurrence-conflict {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--cocoso-colors-red-600, #c53030);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 600;
}

.occurrence.is-warning .occurrence-conflict {
  color: #9a5b12;
}

.occurrence-conflict svg {
  flex: none;
  margin-top: 2px;
}

.occurrences .occurrence-add {
  justify-content: center;
  border-color: color-mix(in srgb, var(--cocoso-tegel) 45%, transparent);
  color: var(--cocoso-tegel-600);
}

.occurrences .occurrence-add:hover {
  background: color-mix(in srgb, var(--cocoso-tegel-100) 45%, transparent);
}

/* --- Pictures for an entry (ImageUploader.tsx) --- */

/* where pictures are dropped or chosen: a slim dashed row */
.image-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1.5px dashed var(--cocoso-colors-theme-300, #b9c9a5);
  border-radius: var(--cocoso-radius-falt);
  background: var(--cocoso-colors-theme-50);
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.image-drop:hover,
.image-drop.is-over {
  border-color: var(--cocoso-colors-theme-700);
  background: var(--cocoso-colors-theme-100);
}

.image-drop-art {
  flex: none;
  width: 44px;
  height: 37px;
}

.image-drop.is-tile .image-drop-art {
  width: 40px;
  height: 33px;
}

.image-drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--cocoso-mylla);
  font-size: 14px;
}

.image-drop-text strong {
  color: var(--cocoso-colors-theme-700);
}

.image-drop-formats {
  color: var(--cocoso-mylla-soft);
  font-size: 12px;
}

/* the same, as the last tile of the grid */
.image-drop.is-tile {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 0;
  aspect-ratio: 4 / 3;
  padding: 8px;
  text-align: center;
}

.image-drop.is-tile .image-drop-text {
  color: var(--cocoso-colors-theme-700);
  font-size: 13px;
  font-weight: 700;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.image-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--cocoso-radius-falt);
  background-color: var(--cocoso-colors-theme-100);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px var(--cocoso-linje);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.image-thumb--dragged {
  z-index: 1500;
  box-shadow: var(--cocoso-skugga-meny);
  cursor: grabbing;
}

/* "Huvudbild" on the first, its place in the order on the others */
.image-thumb-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cocoso-papper) 92%, transparent);
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.image-thumb:first-child .image-thumb-badge {
  background: var(--cocoso-colors-theme-700);
  color: var(--cocoso-papper);
}

.image-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cocoso-papper) 92%, transparent);
  color: var(--cocoso-mylla);
  cursor: pointer;
}

.image-thumb-remove:hover {
  background: var(--cocoso-papper);
  color: var(--cocoso-tegel);
}

.image-uploader-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
}

.react-slideshow-container .nav.default-nav {
  margin: 12px;
  padding: 6px;
}

.text-link-container:hover .text-link {
  text-decoration: underline;
}

input::placeholder {
  color: rgba(40, 40, 40, 0.6);
}

.menu-drawer {
  width: 72px;
  transition: all 0.2s ease-in-out;
}

.menu-drawer.menu-drawer--open {
  width: 300px;
  transition: all 0.2s ease-in-out;
}

/* Sexy Thumb */

.thumb-cover-container {
  border: 1px solid;
  border-color: white;
  border-radius: var(--cocoso-border-radius);
  cursor: pointer;
  font-weight: bold;
  position: relative;
  width: 100%;
}

.thumb-cover-container:hover .thumb-cover {
  filter: brightness(70%);
}

.thumb-cover-child-lazy-image {
  width: 30px;
}

.thumb-cover {
  width: 100%;
  filter: brightness(50%);
  transition: all ease-in-out 200ms;
}

.thumb-text-container {
  font-family: Raleway, sans-serif;
  height: 100%;
  padding: 24px;
  position: absolute;
  text-align: left;
  top: 0;
  width: 100%;
}

.lazy-load-image-background {
  width: 100%;
}

.cover-highlight-title {
  background-color: rgba(234, 57, 36, 0.9);
}

.thumb-title {
  color: #fff;
  font-size: 24px;
  margin-bottom: 6px;
  line-height: 32px;
  overflow-wrap: anywhere;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
}

.thumb-subtitle {
  color: #fff;
  font-size: 16px;
  line-height: 21px;
  font-weight: normal;
}

.my-masonry-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* the columns carry the gutter on their left; pull the first one back */
  margin-left: -8px;
  width: auto;
}
.my-masonry-grid_column {
  padding-left: 8px; /* gutter size */
  background-clip: padding-box;
  flex-basis: 320px;
  flex-grow: 1;
  max-width: 420px;
}

.ant-select-dropdown {
  box-shadow: none;
  border-radius: 0;
}

.ant-cascader-menus > ul.ant-cascader-menu {
  border-radius: 8px;
  overflow-y: visible;
  width: 150px;
  height: 280px;
}

ul.ant-cascader-menu,
.show-thumb {
  overflow-y: auto;
  line-height: 1em;
}

ul.ant-cascader-menu::-webkit-scrollbar,
.show-thumb {
  -webkit-appearance: none;
}

ul.ant-cascader-menu::-webkit-scrollbar:vertical,
.show-thumb {
  width: 11px;
}

ul.ant-cascader-menu::-webkit-scrollbar:horizontal,
.show-thumb {
  height: 11px;
}

ul.ant-cascader-menu::-webkit-scrollbar-thumb,
.show-thumb {
  border-radius: 8px;
  border: 2px solid white; /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, 0.5);
}

.federation-logo {
  animation: slidedown 400ms;
}

.federation-logo:hover {
  cursor: pointer;
}

@keyframes slidedown {
  from {
    top: -36px;
  }
  to {
    top: 0;
  }
}

.bottom-toolbar {
  color: var(--cocoso-colors-blue-100);
}

.bottom-toolbar:not(.updated) {
  transition: all 0.5s ease-out;
}

.bottom-toolbar.updated {
  color: var(--cocoso-colors-green-200);
}

// Text-content, Quill, etc.

a,
.text-content a {
  color: var(--cocoso-colors-theme-500);
  text-decoration: none;
}

.platform-footer a,
.platform-footer .text-content a,
.text-content.dark a {
  color: var(--cocoso-colors-theme-100);
}

.hoverable:hover {
  background-color: rgb(248, 248, 248);
}

.text-content p {
  /* color: rgba(0, 0, 0, 0.85); */
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 0.8em;
  white-space: pre-line;
}

.text-content li {
  margin: 0.5em 1em;
  font-size: 16px;
}

.text-content {
  blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
    font-size: 16px;
  }

  .ql-size-huge {
    font-size: 2.5em;
  }
  .ql-size-large {
    font-size: 1.5em;
  }
  .ql-size-small {
    font-size: 0.75em;
  }

  .ql-align-center {
    text-align: center;
  }
  .ql-align-right {
    text-align: right;
  }
  .ql-align-justify {
    text-align: justify;
  }

  .ql-font-monospace {
    font-family: Monaco, Courier New, monospace;
  }
  .ql-font-monospace {
    font-family: Georgia, Times New Roman, serif;
  }

  pre {
    background-color: #33352c;
    color: #f8f8f2;
    overflow: visible;
    white-space: pre-wrap;
    margin: 16px 0;
    padding: 12px 16px;
  }
}

.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.embla__button {
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 0 0 1px var(--cocoso-colors-gray-300);
  width: 1.8rem;
  height: 1.8rem;
  z-index: 1;
  border-radius: 50%;
  color: var(--text-body);
  display: flex;
  align-items: center;
  justify-content: center;
}

.embla__button__svg {
  width: 50%;
  height: 50%;
}

/* Cocoso */

:root {
  --cocoso-colors-gray-50: rgb(250, 247, 245);
  --cocoso-colors-gray-100: rgb(240, 235, 230);
  --cocoso-colors-gray-200: rgb(228, 222, 218);
  --cocoso-colors-gray-300: rgb(215, 210, 208);
  --cocoso-colors-gray-400: rgb(205, 200, 195);
  --cocoso-colors-gray-500: rgb(155, 148, 140);
  --cocoso-colors-gray-600: rgb(88, 80, 75);
  --cocoso-colors-gray-700: rgb(68, 60, 52);
  --cocoso-colors-gray-800: rgb(48, 40, 32);
  --cocoso-colors-gray-900: rgb(25, 20, 15);

  --cocoso-colors-bluegray-50: #f8fafc;
  --cocoso-colors-bluegray-100: #eef4fd;
  --cocoso-colors-bluegray-200: #e1e9f8;
  --cocoso-colors-bluegray-300: #cdd5ea;
  --cocoso-colors-bluegray-400: #bec9e4;
  --cocoso-colors-bluegray-500: #8f9bba;
  --cocoso-colors-bluegray-600: #a3aed0;
  --cocoso-colors-bluegray-700: #707eae;
  --cocoso-colors-bluegray-800: #505b81;
  --cocoso-colors-bluegray-900: #1b2559;

  --cocoso-colors-red-50: #fef2f2;
  --cocoso-colors-red-100: #fee2e2;
  --cocoso-colors-red-200: #fecaca;
  --cocoso-colors-red-300: #fca5a5;
  --cocoso-colors-red-400: #f87171;
  --cocoso-colors-red-500: #ef4444;
  --cocoso-colors-red-600: #dc2626;
  --cocoso-colors-red-700: #b91c1c;
  --cocoso-colors-red-800: #991b1b;
  --cocoso-colors-red-900: #7f1d1d;

  --cocoso-colors-green-50: #f0fdf4;
  --cocoso-colors-green-100: #dcfce7;
  --cocoso-colors-green-200: #bbf7d0;
  --cocoso-colors-green-300: #86efac;
  --cocoso-colors-green-400: #4ade80;
  --cocoso-colors-green-500: #22c55e;
  --cocoso-colors-green-600: #16a34a;
  --cocoso-colors-green-700: #15803d;
  --cocoso-colors-green-800: #166534;
  --cocoso-colors-green-900: #14532d;

  --cocoso-colors-orange-50: #fff7ed;
  --cocoso-colors-orange-100: #ffedd5;
  --cocoso-colors-orange-200: #fed7aa;
  --cocoso-colors-orange-300: #fdba74;
  --cocoso-colors-orange-400: #fb923c;
  --cocoso-colors-orange-500: #f97316;
  --cocoso-colors-orange-600: #ea580c;
  --cocoso-colors-orange-700: #c2410c;
  --cocoso-colors-orange-800: #9a3412;
  --cocoso-colors-orange-900: #7c2d12;

  --cocoso-colors-blue-50: #eff6ff;
  --cocoso-colors-blue-100: #dbeafe;
  --cocoso-colors-blue-200: #bfdbfe;
  --cocoso-colors-blue-300: #93c5fd;
  --cocoso-colors-blue-400: #60a5fa;
  --cocoso-colors-blue-500: #3b82f6;
  --cocoso-colors-blue-600: #2563eb;
  --cocoso-colors-blue-700: #1d4ed8;
  --cocoso-colors-blue-800: #1e40af;
  --cocoso-colors-blue-900: #1e3a8a;
}

body {
  background-color: var(--cocoso-colors-theme-50);
}

.cocoso-input {
  width: 100%;
  border-radius: var(--cocoso-radius-falt, 0.625rem);
  border: 1.5px solid var(--cocoso-linje, #ccc);
  background: var(--cocoso-papper, #fff);
  color: var(--cocoso-mylla, #222);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cocoso-input--sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.cocoso-input--md {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.cocoso-input--lg {
  padding: 0.75rem 1.25rem;
  font-size: 1.125rem;
}

.cocoso-input:hover {
  border-color: var(--cocoso-colors-theme-300, #3182ce);
}

.cocoso-input:focus {
  border-color: var(--cocoso-colors-theme-500, #3182ce);
  box-shadow: 0 0 0 3px var(--cocoso-colors-theme-100);
}

.cocoso-input:active {
  border-color: var(--cocoso-colors-theme-500, #3182ce);
}

.cocoso-input[aria-invalid='true'] {
  border-color: var(--cocoso-colors-red-500, #e53e3e);
}

.cocoso-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f5f5f5;
}

.cocoso-textarea {
  width: 100%;
  min-height: 6rem;
  border-radius: var(--cocoso-radius-falt, 0.625rem);
  border: 1.5px solid var(--cocoso-linje, #ccc);
  background: var(--cocoso-papper, #fff);
  color: var(--cocoso-mylla, #222);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.cocoso-textarea--sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.cocoso-textarea--md {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.cocoso-textarea--lg {
  padding: 0.75rem 1.25rem;
  font-size: 1.125rem;
}

.cocoso-textarea:hover {
  border-color: var(--cocoso-colors-theme-300, #3182ce);
}

.cocoso-textarea:focus {
  border-color: var(--cocoso-colors-theme-500, #3182ce);
  box-shadow: 0 0 0 3px var(--cocoso-colors-theme-100);
}

.cocoso-textarea:active {
  border-color: var(--cocoso-colors-theme-500, #3182ce);
}

.cocoso-textarea[aria-invalid='true'] {
  border-color: var(--cocoso-colors-red-500, #e53e3e);
}

.cocoso-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f5f5f5;
}

.cocoso-select {
  width: 100%;
  border-radius: var(--cocoso-radius-falt, 0.625rem);
  border: 1.5px solid var(--cocoso-linje, #ccc);
  background: var(--cocoso-papper, #fff);
  color: var(--cocoso-mylla, #222);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  font-family: inherit;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
}

.cocoso-select--sm {
  padding: 0.25rem 2.5rem 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.cocoso-select--md {
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  font-size: 1rem;
}

.cocoso-select--lg {
  padding: 0.75rem 2.5rem 0.75rem 1.25rem;
  font-size: 1.125rem;
}

.cocoso-select:hover {
  border-color: var(--cocoso-colors-theme-300, #3182ce);
}

.cocoso-select:focus {
  border-color: var(--cocoso-colors-theme-500, #3182ce);
  box-shadow: 0 0 0 3px var(--cocoso-colors-theme-100);
}

.cocoso-select:active {
  border-color: var(--cocoso-colors-theme-500, #3182ce);
}

.cocoso-select[aria-invalid='true'] {
  border-color: var(--cocoso-colors-red-500, #e53e3e);
}

.cocoso-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f5f5f5;
}

.cocoso-slide {
  position: fixed;
  width: 100%;
  z-index: 1000;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.cocoso-slide-top {
  top: 0;
  transform: translateY(-100%);
}

.cocoso-slide-top-ping {
  transform: translateY(0);
}

.cocoso-slide-bottom {
  bottom: 0;
  transform: translateY(100%);
}

.cocoso-slide-bottom-ping {
  transform: translateY(0);
}

.cocoso-slide-left {
  left: 0;
  transform: translateX(-100%);
}

.cocoso-slide-left-ping {
  transform: translateX(0);
}

.cocoso-slide-right {
  right: 0;
  transform: translateX(100%);
}

.cocoso-slide-right-ping {
  transform: translateX(0);
}

.cocoso-fade {
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.cocoso-fade-ping {
  opacity: 1;
}

.szh-accordion {
  width: 100%;
}
.szh-accordion__item-btn {
  background-color: var(--cocoso-papper);
  border-radius: var(--cocoso-radius-falt);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-mylla);
  cursor: pointer;
  font-family: var(--cocoso-font-ui);
  font-weight: 600;
  margin: 0.5rem 0;
  padding: 0.85rem 1rem;
  width: 100%;
}
.szh-accordion__item-btn:hover {
  background-color: var(--cocoso-colors-theme-50);
}
.szh-accordion__item-btn:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}
.szh-accordion__item-btn--open {
  background-color: var(--cocoso-colors-theme-700);
  color: white;
}
.szh-accordion__item-content {
  background-color: var(--cocoso-papper);
  border-radius: var(--cocoso-radius-falt);
  box-shadow: var(--cocoso-skugga);
  padding: 1rem;
}

/* === Panels ===
   Every drop-down (search results, account, place, info) is the same
   soft paper panel: a little see-through, blurred behind, 14px corners.
   The menu library's own sheet loads after this one, hence the doubled
   selectors. */
:root {
  --cocoso-panel-bg: rgba(255, 253, 247, 0.94);
}

.szh-menu-container {
  z-index: 1002;
}
.szh-menu-container .szh-menu,
.site-search-panel {
  padding: 6px;
  border: 1px solid var(--cocoso-linje);
  border-radius: var(--cocoso-radius-meny);
  background: var(--cocoso-panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--cocoso-skugga-meny);
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
}
.szh-menu-container .szh-menu__item {
  padding: 8px 10px;
  border-radius: var(--cocoso-radius-falt);
  font-weight: 600;
}
.szh-menu-container .szh-menu__item--hover {
  background: var(--cocoso-colors-theme-100);
  color: var(--cocoso-mylla);
}
.szh-menu-container .szh-menu__divider {
  margin: 4px 0;
  background: var(--cocoso-linje);
}

@keyframes rainbow-slide {
  0% {
    backgroundposition: '200% 50%';
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rainbow-slide {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* === New Button === */

/* The plus in the header (next to the search) for those who may create
   content. The ring draws itself around it the first time it appears. */
.new-button-wrapper {
  border-radius: 999px;
  display: inline-flex;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.new-button-wrapper:hover {
  transform: scale(1.12);
}

.site-new-button {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-new {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-500);
  box-shadow: var(--site-island-shadow);
  color: #fff;
}

.site-new svg {
  transition: rotate 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The pen: same round island as the search, so the plus stays the one
   filled button. It only darkens on hover; the turn is the plus's. */
.site-edit {
  background: var(--site-island);
  color: var(--site-ink-soft);
}

.new-button-wrapper:hover .site-edit {
  color: var(--site-ink);
}

/* Only the plus turns on hover; the pens, green or white, keep still */
.new-button-wrapper:hover .site-plus svg {
  rotate: 90deg;
}

.site-new-button:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 3px;
  border-radius: 999px;
}

/* SVG ring — sits exactly on the button border, hidden by default */
.new-button-ring {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.new-button-ring-path {
  fill: none;
  stroke: var(--cocoso-colors-theme-500);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  stroke-width: 4;
}

/* --- Intro animation (first page visit only) --- */

.new-button-intro .new-button-ring {
  opacity: 1;
}

.new-button-intro .new-button-ring-path {
  /* 300 ms delay so button finishes scaling before the border starts drawing */
  animation: new-button-border-seq 2.5s linear 300ms both;
}

.new-button-intro {
  animation: new-button-scale-intro 2.5s linear 300ms both;
}

/*
 * Draw easing:  slow start → very fast → creeps to close
 *               cubic-bezier(0.6, 0, 0.05, 1)
 *
 * Erase easing: mathematical reverse of draw = cubic-bezier(0.95, 0, 0.4, 1)
 *               very fast opening → decelerates → slow erase at origin
 *
 * Negative dashoffset reverses the draw direction → counter-clockwise erase
 *
 * 0–28% of the 2500 ms animation = 700 ms = heading-slide duration.
 * The button scales in during that window; the border draws afterwards.
 */
@keyframes new-button-border-seq {
  /* 0–28 %: button sliding in from below — border stays hidden */
  0% {
    stroke-dashoffset: 100;
  }
  /* 28–55 %: draw clockwise, slow → very fast → creeps to close */
  28% {
    stroke-dashoffset: 100;
    animation-timing-function: cubic-bezier(0.6, 0, 0.05, 1);
  }
  55% {
    stroke-dashoffset: 0;
  }
  /* 55–75 %: hold fully drawn while scale spring plays */
  75% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.95, 0, 0.4, 1);
  }
  /* 75–100 %: erase counter-clockwise, fast open → slows at origin */
  100% {
    stroke-dashoffset: -100;
  }
}

@keyframes new-button-scale-intro {
  /* 0–28 %: slide up from below alongside the heading slide */
  0% {
    opacity: 0;
    transform: translateY(20px) scale(1);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  28% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  /* 28–55 %: hold at rest while border draws */
  55% {
    transform: translateY(0) scale(1);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  /* 55–65 %: spring up */
  65% {
    transform: translateY(0) scale(1.14);
    animation-timing-function: ease-out;
  }
  /* 65–75 %: settle back */
  75%,
  100% {
    transform: translateY(0) scale(1);
  }
}

/* --- Subtle animation (page navigation) --- */

.new-button-subtle {
  animation: new-button-fade-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.new-button-subtle::after {
  animation: new-button-bloom 0.8s ease-out forwards;
  background: radial-gradient(
    ellipse at center,
    var(--cocoso-colors-theme-200) 0%,
    transparent 65%
  );
  border-radius: 999px;
  content: '';
  inset: -8px;
  pointer-events: none;
  position: absolute;
}

@keyframes new-button-fade-in {
  from {
    opacity: 0.5;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes new-button-bloom {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  35% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

#filtrer-sorter {
  @media (min-width: 960px) {
    margin-top: -88px;
  }
}

/* === Calendar === */

/* The calendar on paper: Raleway in the grid, Fraunces for the month, and
   every event in its place's colour world (--ev-ink / --ev-tint set per
   event in CalendarView). One-off events are filled, weekly ones outlined. */

.rbc-calendar {
  font-family: var(--cocoso-font-ui);
}

/* Each view sets its own height: the grids need one to lay out their rows,
   the list grows with its content. */
/* The month grows with its rows: a six-week month must not lose its last
   row to the panel's hidden overflow. */
.rbc-calendar .rbc-month-view {
  flex: 1 1 auto;
  height: auto;
  min-height: 640px;
}
.rbc-calendar .rbc-month-row {
  flex: 1 1 auto;
}
.rbc-calendar.is-narrow .rbc-month-view {
  min-height: 460px;
}
.rbc-calendar .rbc-time-view {
  min-height: 560px;
}
.rbc-calendar .rbc-agenda-view {
  flex: 1 1 auto;
  min-height: 200px;
  overflow: visible;
}

.rbc-calendar .rbc-agenda-view .rbc-agenda-content {
  overflow: visible;
}

.rbc-time-view,
.rbc-month-view,
.rbc-agenda-content {
  background-color: transparent;
}

/* --- Toolbar --- */

.rbc-calendar .rbc-toolbar {
  /* above the grid, so the pills' shadows fall onto it uncut */
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.rbc-toolbar .rbc-toolbar-label {
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-display);
  font-size: 1.4rem;
  font-variation-settings: 'SOFT' 60;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rbc-toolbar .rbc-toolbar-label::first-letter {
  text-transform: uppercase;
}

.rbc-toolbar .rbc-btn-group {
  background-color: var(--cocoso-papper);
  border-radius: 999px;
  box-shadow: var(--cocoso-skugga-kort);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.rbc-toolbar .rbc-btn-group button,
.rbc-toolbar .rbc-btn-group > button:first-child:not(:last-child),
.rbc-toolbar .rbc-btn-group > button:last-child:not(:first-child),
.rbc-toolbar .rbc-btn-group > button:not(:first-child):not(:last-child) {
  background-color: transparent;
  border: none;
  border-radius: 999px;
  color: var(--cocoso-mylla);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
}

.rbc-toolbar .rbc-btn-group button:hover {
  background-color: var(--cocoso-colors-theme-100);
  color: var(--cocoso-mylla);
}

.rbc-toolbar .rbc-btn-group button:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

/* !important: the corner rules above are more specific than .rbc-active */
.rbc-toolbar .rbc-btn-group button.rbc-active,
.rbc-toolbar .rbc-btn-group button.rbc-active:hover {
  background-color: var(--cocoso-colors-theme-700) !important;
  border: none;
  box-shadow: none;
  color: #fff !important;
  font-weight: 700;
}

/* The toolbar and, beside it at the end, the Filter (CalendarView.tsx):
   a pill like the button groups, with the toggle icon */
.cal-toolbar-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* The toolbar's parts and the Filter on one line, the Filter just left of
   the views: the toolbar gives its parts to the row (display: contents),
   and the Filter itself stays outside it, out of reach of the library's
   button styles */
.rbc-calendar .cal-toolbar-row > .rbc-toolbar {
  display: contents;
}

.cal-toolbar-row .rbc-toolbar-label {
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
}

.cal-toolbar-end {
  flex: none;
  order: 2;
}

.cal-toolbar-row .rbc-btn-group:not(:first-child) {
  order: 3;
}

/* The Filter beside the toolbar: a pill like the button groups */
.view-menu-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-height: 38px;
  padding: 3px 16px 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga-kort);
  color: var(--cocoso-mylla);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.view-menu-pill:hover,
.view-menu-pill.is-open {
  background: var(--cocoso-colors-theme-100);
}

.view-menu-pill:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

/* The back / today / forward buttons with their player icons */
.rbc-toolbar .cal-nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* the 3dicons backward and forward, in the switch's red to orange */
.rbc-toolbar .cal-nav .threed-icon {
  width: auto;
  height: 14px;
  flex: none;
}

/* Smaller screens: all the tools on one paper card, as the text editor's
   toolbar. The month between back and forward on top; under a line, on a
   tinted strip, today, the views and the Filter. The toolbar and the back /
   today / forward group give their parts to the card (display: contents),
   so the buttons lose their own pills and share its paper. */
@media (max-width: 1000px) {
  .cal-toolbar-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    grid-template-areas:
      'prev label label label next'
      'today . views . filter';
    align-items: center;
    gap: 0;
    border-radius: var(--cocoso-radius-kort);
    background: var(--cocoso-papper);
    box-shadow: inset 0 0 0 1px var(--cocoso-linje), var(--cocoso-skugga);
  }

  /* the tinted strip under a line, as the editor's toolbar */
  .cal-toolbar-row::before {
    content: '';
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: stretch;
    border-top: 1px solid var(--cocoso-linje);
    border-radius: 0 0 var(--cocoso-radius-kort) var(--cocoso-radius-kort);
    background: color-mix(
      in srgb,
      var(--cocoso-linje) 22%,
      var(--cocoso-papper)
    );
  }

  .rbc-calendar .cal-toolbar-row > .rbc-toolbar,
  .cal-toolbar-row .rbc-btn-group.cal-nav {
    display: contents;
  }

  .rbc-calendar .cal-toolbar-row .rbc-toolbar-label {
    grid-area: label;
    padding: 12px 4px 11px;
    font-size: 1.2rem;
    text-align: center;
  }

  /* the buttons on the card's paper, no pills of their own */
  .cal-toolbar-row .rbc-btn-group {
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .cal-toolbar-row .cal-nav-prev {
    grid-area: prev;
    margin-left: 6px !important;
  }

  .cal-toolbar-row .cal-nav-next {
    grid-area: next;
    margin-right: 6px !important;
  }

  .cal-toolbar-row .cal-nav-today {
    grid-area: today;
    margin: 5px 0 5px 6px !important;
  }

  .cal-toolbar-row .rbc-btn-group:not(.cal-nav) {
    grid-area: views;
    margin: 5px 0;
  }

  .cal-toolbar-end {
    grid-area: filter;
    margin: 5px 6px 5px 0;
  }

  .cal-toolbar-row .view-menu-pill {
    min-height: 34px;
    background: none;
    box-shadow: none;
  }

  .cal-toolbar-row .view-menu-pill:hover,
  .cal-toolbar-row .view-menu-pill.is-open {
    background: var(--cocoso-colors-theme-100);
  }
}

/* A phone: back and forward as their icons only, the views a little
   tighter, so the strip holds today, the views and the Filter */
@media (max-width: 560px) {
  .cal-toolbar-row .cal-nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cal-toolbar-row .rbc-toolbar-label {
    font-size: 1.1rem;
  }

  .rbc-toolbar .rbc-btn-group button,
  .rbc-toolbar .rbc-btn-group > button:first-child:not(:last-child),
  .rbc-toolbar .rbc-btn-group > button:last-child:not(:first-child),
  .rbc-toolbar .rbc-btn-group > button:not(:first-child):not(:last-child) {
    padding: 0.4rem 0.6rem;
  }

  .cal-toolbar-row .view-menu-pill {
    padding: 3px 10px 3px 6px;
  }
}

/* The narrowest: the Filter as its switch alone */
@media (max-width: 359px) {
  .cal-toolbar-row .view-menu-pill > :not(.filter-switch) {
    display: none;
  }

  .cal-toolbar-row .view-menu-pill {
    font-size: 0;
    padding: 3px 6px;
  }
}

/* --- Panels --- */

/* The calendar spans the viewport, gutter to gutter, outside the page's
   column: a month needs the width. */
.cal-full {
  box-sizing: border-box;
  width: 100%;
  padding: 0 8px 1.5rem;
}

/* The grid has no colour of its own: the page shows through, with the
   weave drawn on top, so the paper events and the white weekly ones read
   against the floor. */
.rbc-calendar .rbc-month-view,
.rbc-calendar .rbc-time-view,
.rbc-calendar .rbc-agenda-view {
  background-color: transparent;
  background-image: repeating-linear-gradient(
      0deg,
      rgba(30, 79, 27, 0.03) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(30, 79, 27, 0.03) 0 1px,
      transparent 1px 7px
    );
  border: none;
  border-radius: var(--cocoso-radius-meny);
  box-shadow: none;
  overflow: hidden;
}

/* The weekdays as a line of their own: the display face, normal case, in
   ink on a light paper band across the top of the board. */
.rbc-calendar .rbc-month-view .rbc-header,
.rbc-calendar .rbc-time-header .rbc-header {
  /* flat floor behind the names, no weave */
  background-color: var(--cocoso-season-golv, var(--cocoso-colors-gray-100));
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.7rem 0 0.6rem;
  text-transform: none;
}

.rbc-calendar .rbc-header::first-letter {
  text-transform: uppercase;
}

.rbc-calendar .rbc-month-view .rbc-header,
.rbc-calendar .rbc-month-view > .rbc-month-row + .rbc-month-row,
.rbc-calendar .rbc-row-bg > .rbc-day-bg + .rbc-day-bg,
.rbc-calendar .rbc-month-view > .rbc-month-header .rbc-header + .rbc-header,
.rbc-calendar .rbc-time-header > .rbc-row > * + *,
.rbc-calendar .rbc-time-header > .rbc-row:first-child,
.rbc-calendar .rbc-time-header-content,
.rbc-calendar .rbc-header + .rbc-header,
.rbc-calendar .rbc-time-content > * + * > *,
.rbc-calendar .rbc-timeslot-group,
.rbc-calendar .rbc-day-slot .rbc-time-slot {
  /* a warm line that sits in the board's own colour, not the paper's */
  border-color: rgba(60, 50, 30, 0.09);
}

.rbc-calendar .rbc-month-row {
  min-height: 112px;
}

.rbc-calendar .rbc-date-cell {
  color: var(--cocoso-mylla-soft);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 6px 2px;
}

.rbc-calendar .rbc-date-cell .rbc-button-link {
  border-radius: 999px;
  display: inline-block;
  line-height: 1.6rem;
  min-width: 1.6rem;
  padding: 0 4px;
  text-align: center;
}

/* Days outside the month: flat floor, no weave, so the month reads as the
   woven area */
.rbc-day-bg.rbc-off-range-bg {
  background-color: var(--cocoso-season-golv, var(--cocoso-colors-gray-100));
}

.rbc-calendar .rbc-off-range {
  color: var(--cocoso-mylla-soft);
  opacity: 0.5;
}

.rbc-day-bg:not(.rbc-off-range-bg) {
  background-color: transparent;
}

.rbc-day-bg.rbc-selected-cell:not(.rbc-off-range-bg) {
  background-color: var(--cocoso-colors-theme-100);
}

/* Today: a soft green day with its date in a green circle */
.rbc-calendar .rbc-row-bg .rbc-day-bg.rbc-today,
.rbc-calendar .rbc-today {
  background-color: rgba(255, 253, 247, 0.5);
  border: none;
}

.rbc-calendar .rbc-date-cell.rbc-now .rbc-button-link {
  background-color: var(--cocoso-colors-theme-700);
  color: #fff;
  font-weight: 700;
}

.rbc-calendar .rbc-show-more {
  background: transparent;
  color: var(--cocoso-colors-theme-700);
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
}

.rbc-calendar .rbc-time-content {
  border-top: 1px solid var(--cocoso-linje);
}

/* No all-day row in the week: it only ever held multi-day events and
   pushed the hours down. */
.rbc-calendar .rbc-time-view .rbc-allday-cell {
  display: none;
}

.rbc-calendar .rbc-time-header-content > .rbc-row:not(:first-child) {
  display: none;
}

/* Hour rows tall enough to read a title and a place */
.rbc-calendar .rbc-time-view .rbc-timeslot-group {
  min-height: 64px;
}

.rbc-calendar .rbc-time-gutter,
.rbc-calendar .rbc-time-header-gutter {
  color: var(--cocoso-mylla-soft);
  font-size: 0.75rem;
}

/* The column of hours is a margin, not part of the board: the flat floor
   behind it (as behind the weekdays), and no hour lines */
.rbc-calendar .rbc-time-gutter,
.rbc-calendar .rbc-time-header-gutter {
  background-color: var(--cocoso-season-golv, var(--cocoso-colors-gray-100));
}

.rbc-calendar .rbc-time-gutter .rbc-timeslot-group {
  border-bottom: 0;
}

/* The line under the weekdays runs over the days only, not the hours */
.rbc-calendar .rbc-time-content {
  border-top: 0;
}

.rbc-calendar .rbc-time-header-content {
  border-bottom: 1px solid var(--cocoso-linje);
}

.rbc-calendar .rbc-current-time-indicator {
  background-color: var(--cocoso-tegel);
  height: 2px;
}

.rbc-calendar .rbc-row-content {
  z-index: 0;
}

/* --- Events --- */

.rbc-calendar .rbc-event {
  --ev-ink: var(--cocoso-colors-theme-700);
  --ev-tint: var(--cocoso-colors-theme-100);
  background-color: var(--ev-tint);
  border: none;
  border-left: 3px solid var(--ev-ink);
  border-radius: 6px;
  color: var(--ev-ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 6px 2px 5px;
  transition: filter 0.15s ease;
}

.rbc-calendar .rbc-event:hover {
  filter: brightness(0.96);
}

.rbc-calendar .rbc-event:focus,
.rbc-calendar .rbc-event.rbc-selected {
  background-color: var(--ev-tint);
  outline: 2px solid var(--ev-ink);
  outline-offset: 1px;
}

.rbc-calendar .rbc-event.is-recurring {
  background-color: var(--cocoso-papper);
  box-shadow: inset 0 0 0 1px var(--cocoso-linje);
  font-weight: 500;
}

.rbc-calendar .rbc-event-content,
.rbc-calendar .rbc-event-label {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.rbc-calendar .rbc-event-label {
  opacity: 0.75;
}

.cal-event-title {
  align-items: center;
  display: flex;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

.cal-event-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-calendar .rbc-day-slot .cal-event-text,
.rbc-calendar .rbc-agenda-view .cal-event-text {
  white-space: normal;
}

.cal-event-repeat {
  flex-shrink: 0;
  opacity: 0.75;
}

.rbc-calendar .rbc-day-slot .rbc-event {
  border: none;
  border-left: 3px solid var(--ev-ink);
  display: block;
}

.rbc-calendar .rbc-day-slot .rbc-event-content {
  line-height: 1.3;
}

.rbc-calendar .rbc-day-slot .rbc-event {
  padding: 4px 8px 4px 7px;
}

/* On a phone the month grid shows each event as a coloured bar: enough to
   see where the busy days are, the list carries the titles. */
.rbc-calendar.is-narrow .rbc-month-row {
  min-height: 64px;
}

.rbc-calendar.is-narrow .rbc-month-view .rbc-event {
  border-left: none;
  border-radius: 3px;
  height: 6px;
  margin: 1px 3px;
  padding: 0;
  background-color: var(--ev-ink);
}

.rbc-calendar.is-narrow .rbc-month-view .rbc-event.is-recurring {
  background-color: var(--ev-tint);
  box-shadow: inset 0 0 0 1px var(--ev-ink);
}

.rbc-calendar.is-narrow .rbc-month-view .rbc-event-content {
  display: none;
}

.rbc-calendar.is-narrow .rbc-show-more {
  font-size: 10px;
  padding: 0 3px;
}

/* --- The list (agenda) --- */

.rbc-calendar .rbc-agenda-view table.rbc-agenda-table {
  border: none;
  /* separate cells, so each event can be its own rounded card */
  border-collapse: separate;
  border-spacing: 0 6px;
  font-family: var(--cocoso-font-ui);
}

.rbc-calendar .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  border-bottom: 1px solid var(--cocoso-linje);
  color: var(--cocoso-mylla-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.6rem 0.85rem 0.45rem;
  text-transform: uppercase;
}

.rbc-calendar .rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  border: none;
  color: var(--cocoso-mylla);
  font-size: 14px;
  font-weight: 500;
  padding: 0.6rem 0.85rem;
  vertical-align: top;
}

/* Each event a rounded paper card, like the day view's rows; date and
   time stay on the floor */
.rbc-calendar
  .rbc-agenda-view
  table.rbc-agenda-table
  tbody
  > tr
  > td.rbc-agenda-event-cell {
  background-color: var(--cocoso-papper);
  border-radius: var(--cocoso-radius-falt);
  box-shadow: var(--cocoso-skugga-kort);
  padding: 0.7rem 0.9rem;
}

.rbc-calendar .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: none;
}

.rbc-calendar .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: none;
}

.rbc-calendar .rbc-agenda-date-cell {
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-display);
  font-size: 15px;
  font-variation-settings: 'SOFT' 60;
  font-weight: 600;
  white-space: nowrap;
}

.rbc-calendar .rbc-agenda-date-cell::first-letter {
  text-transform: uppercase;
}

.rbc-calendar .rbc-agenda-time-cell {
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding-top: 0.75rem;
  white-space: nowrap;
}

.rbc-calendar .rbc-agenda-date-cell {
  padding-top: 0.75rem;
}

.rbc-calendar .rbc-agenda-event-cell {
  cursor: pointer;
}

.rbc-calendar .rbc-agenda-view tbody > tr {
  --ev-ink: var(--cocoso-colors-theme-700);
}

.rbc-calendar .rbc-agenda-event-cell .cal-event-title {
  color: var(--cocoso-mylla);
  font-weight: 600;
}

.rbc-calendar .rbc-agenda-event-cell .cal-event-title::before {
  background-color: var(--ev-ink);
  border-radius: 999px;
  content: '';
  flex-shrink: 0;
  height: 9px;
  width: 9px;
}

/* Hover lights the event's own cells only: resting on the date, which
   spans the day's rows, must not light the first event. */
.rbc-calendar
  .rbc-agenda-view
  tbody
  > tr:has(> .rbc-agenda-time-cell:hover, > .rbc-agenda-event-cell:hover)
  > td.rbc-agenda-event-cell {
  background-color: var(--cocoso-colors-theme-50);
}

.rbc-calendar .rbc-agenda-empty {
  color: var(--cocoso-mylla-soft);
  padding: 2rem 1rem;
  text-align: center;
}

@media (max-width: 720px) {
  .rbc-calendar .rbc-agenda-view table.rbc-agenda-table thead {
    display: none;
  }
  .rbc-calendar .rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
    font-size: 13.5px;
    padding: 0.5rem 0.6rem;
  }
  .rbc-calendar .rbc-agenda-date-cell {
    font-size: 13.5px;
  }
  .rbc-calendar .rbc-agenda-time-cell {
    font-size: 12px;
  }
}

/* --- The day, on paper (DayView.tsx) --- */

.cal-day {
  background: var(--cocoso-papper);
  border-radius: var(--cocoso-radius-kort);
  box-shadow: var(--cocoso-skugga-kort);
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.cal-day > li + li {
  border-top: 1px solid var(--cocoso-linje);
}

.cal-day-row {
  all: unset;
  --ev-ink: var(--cocoso-colors-theme-700);
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  gap: 2px 14px;
  grid-template-columns: 7.5rem 1fr;
  padding: 0.8rem 1rem;
  width: 100%;
}

.cal-day-row:hover {
  background: var(--cocoso-colors-theme-50);
}

.cal-day-row:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: -2px;
}

.cal-day-time {
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-ui);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding-top: 2px;
  white-space: nowrap;
}

.cal-day-what {
  min-width: 0;
}

.cal-day-what strong {
  align-items: center;
  color: var(--cocoso-mylla);
  display: flex;
  font-family: var(--cocoso-font-display);
  font-size: 1.05rem;
  font-variation-settings: 'SOFT' 60;
  font-weight: 600;
  gap: 8px;
  line-height: 1.25;
}

.cal-day-what strong::before {
  background: var(--ev-ink);
  border-radius: 999px;
  content: '';
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}

.cal-day-what small {
  color: var(--cocoso-mylla-soft);
  display: block;
  font-family: var(--cocoso-font-ui);
  font-size: 0.82rem;
  margin-top: 2px;
  padding-left: 18px;
}

/* "Nothing here" lines: grey italic display face, centred. The calendar's
   empty day and the entry pages' empty lists share it. */
.cal-day-empty,
.empty-note {
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-display);
  font-size: 1.05rem;
  font-style: italic;
  padding: 2rem 1rem;
  text-align: center;
}

.empty-note {
  margin: 0;
}

@media (max-width: 720px) {
  .cal-day-row {
    grid-template-columns: 1fr;
    padding: 0.7rem 0.85rem;
  }
}

/* The "+2 more" popup */
.rbc-overlay {
  background-color: var(--cocoso-papper);
  border: none;
  border-radius: var(--cocoso-radius-meny);
  box-shadow: var(--cocoso-skugga-meny);
  font-family: var(--cocoso-font-ui);
  padding: 10px;
}

.rbc-overlay-header {
  border-bottom: 1px solid var(--cocoso-linje);
  color: var(--cocoso-mylla-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: -10px -10px 8px;
  padding: 8px 12px;
  text-transform: capitalize;
}

.rbc-overlay .rbc-event + .rbc-event {
  margin-top: 4px;
}

/* The resource picker when there are many venues */
.cal-resource-select {
  font-family: var(--cocoso-font-ui);
}

/* Quill Editor */

.ql-container .ql-editor {
  min-height: 18em;
}

.ql-container .ql-editor {
  p,
  li,
  blockquote {
    line-height: 1.5;
    margin-bottom: 1em;
    font-size: 16px;
    font-family: var(--cocoso-body-font-family);
  }
}

/* The editor as one framed field: the toolbar a quiet bar along its top,
   the text on paper under it, the whole frame ringed when writing */
.quill-megacontainer {
  overflow: hidden;
  border-radius: var(--cocoso-radius-kort);
  background: var(--cocoso-papper);
  box-shadow: inset 0 0 0 1px var(--cocoso-linje), var(--cocoso-skugga);
  transition: box-shadow 0.15s ease;
}

.quill-megacontainer:hover:not(.is-focused) {
  box-shadow: inset 0 0 0 1px var(--cocoso-colors-theme-300, #b9c9a5),
    var(--cocoso-skugga);
}

.quill-megacontainer:focus-within,
.quill-megacontainer.is-focused {
  box-shadow: inset 0 0 0 2px var(--cocoso-colors-theme-700),
    var(--cocoso-skugga);
}

.quill-megacontainer .quill > .ql-toolbar.ql-snow {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--cocoso-linje);
  background: color-mix(in srgb, var(--cocoso-linje) 18%, var(--cocoso-papper));
  font-family: var(--cocoso-font-ui);
}

.quill-megacontainer .ql-toolbar.ql-snow .ql-formats {
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
  padding-right: 4px;
  border-right: 1px solid var(--cocoso-linje);
}

.quill-megacontainer .ql-toolbar.ql-snow .ql-formats:last-child {
  border-right: 0;
}

.quill-megacontainer .ql-toolbar.ql-snow button,
.quill-megacontainer .ql-toolbar.ql-snow .ql-picker-label {
  border-radius: 6px;
}

.quill-megacontainer .ql-toolbar.ql-snow button:hover,
.quill-megacontainer .ql-toolbar.ql-snow .ql-picker-label:hover,
.quill-megacontainer .ql-toolbar.ql-snow button.ql-active {
  background: var(--cocoso-colors-theme-100);
}

.quill-megacontainer .ql-toolbar.ql-snow .ql-stroke {
  stroke: var(--cocoso-mylla);
}

.quill-megacontainer .ql-toolbar.ql-snow .ql-fill {
  fill: var(--cocoso-mylla);
}

.quill-megacontainer .ql-toolbar.ql-snow .ql-picker {
  color: var(--cocoso-mylla);
}

.quill-megacontainer .ql-toolbar.ql-snow .ql-picker-options {
  border: 0;
  border-radius: var(--cocoso-radius-meny);
  box-shadow: var(--cocoso-skugga-meny);
}

.quill-megacontainer .ql-container.ql-snow {
  border: 0;
  font-family: inherit;
}

.quill-megacontainer .ql-container.ql-snow .ql-editor {
  min-height: 14em;
  padding: 16px 18px;
  border: 0;
  background: none;
}

.quill-megacontainer .ql-editor.ql-blank::before {
  left: 18px;
  right: 18px;
  color: var(--cocoso-mylla-soft);
  font-style: normal;
}

.quill.ql-editor-text-align-center .ql-editor {
  text-align: center;
}

.quill .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.quill .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '';
}

.pageheading-container {
  transition: width 0.5s ease;
}

/* === Site header ===
   One row: brand/location pill left, menu pill centre, account right.
   Transparent on the page background; "floating islands" of white. Below
   960px the menu becomes a scrolling chip row under the bar. */

.site-header {
  font-family: Raleway, var(--cocoso-body-font-family, sans-serif);
  --site-ink: var(--cocoso-colors-theme-800);
  --site-ink-soft: var(--cocoso-colors-theme-700);
  --site-island: var(--cocoso-papper);
  --site-island-shadow: var(--cocoso-skugga);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Scrolled: the bar itself stays clear; each island turns to glass, the
   page blurring through it, with a thin light rim and a soft shadow. */
.site-header.is-scrolled {
  --site-island: color-mix(in srgb, var(--cocoso-papper) 74%, transparent);
  --site-island-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(30, 50, 25, 0.08), 0 8px 24px rgba(30, 50, 25, 0.1);
}

.site-header.is-scrolled .site-brand,
.site-header.is-scrolled .site-nav,
.site-header.is-scrolled .site-more,
.site-header.is-scrolled .site-search-toggle,
.site-header.is-scrolled .site-search-field,
.site-header.is-scrolled .site-new,
.site-header.is-scrolled .site-edit,
.site-header.is-scrolled .site-user-bell,
.site-header.is-scrolled .site-avatar {
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.site-header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 14px;
}

.site-header-bar > .site-brand {
  justify-self: start;
}

/* When brand, menu and buttons do not fit on one row (Header.tsx measures
   this), all three shrink by the same factor; only when that is not
   enough does the menu pill take a row of its own under the other two. */
@media (min-width: 960px) {
  .site-header-bar > .site-brand,
  .site-header-bar > .site-nav,
  .site-header-bar > .site-header-right {
    zoom: var(--bar-zoom, 1);
  }

  .site-header-bar.is-stacked {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'brand right'
      'nav nav';
    row-gap: 4px;
    height: auto;
    padding: 10px 14px 8px;
  }

  .site-header-bar.is-stacked > .site-brand {
    grid-area: brand;
  }

  .site-header-bar.is-stacked > .site-nav {
    grid-area: nav;
    justify-self: center;
  }

  .site-header-bar.is-stacked > .site-header-right {
    grid-area: right;
  }

  .site-header-bar.is-stacked:has(.site-search.is-open) {
    grid-template-columns: 1fr;
    grid-template-areas: 'right';
  }
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

/* --- brand pill --- */

.site-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 40px;
  padding: 3px 4px 3px 3px;
  border-radius: 999px;
  background: var(--site-island);
  box-shadow: var(--site-island-shadow);
  color: var(--site-ink);
}

.site-brand-home {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

.site-brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-700);
  color: #fff;
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: 18px;
  font-weight: 700;
  object-fit: cover;
  flex: 0 0 auto;
}

/* The crane mark: no disc behind it, the pill is its background */
/* The crane's bust on its disc: the disc is the 32px mark, the head is
   drawn larger and sits a little up, so it steps over the disc's edge
   and just past the pill's. */
.site-brand-mark-trana {
  position: relative;
  overflow: visible;
}

.site-brand-mark-trana .threed-icon {
  position: absolute;
  top: -7px;
  left: 50%;
  /* the bust leans left in its picture; nudged right so the neck sits on
     the disc and the head rises a little above it */
  translate: calc(-50% + 5px) 0;
  width: 31px;
  height: 46px;
  /* trimmed by a circle whose bottom coincides with the disc's, so the
     base ends in a curve against the green rather than a straight cut */
  clip-path: circle(30px at 10.5px 9px);
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(30, 50, 25, 0.28));
}

.site-brand-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.site-brand-sep {
  margin: 0 2px 0 8px;
  color: var(--cocoso-colors-theme-300);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.site-brand .szh-menu-button {
  all: unset;
  display: inline-flex;
  cursor: pointer;
}

.site-brand-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 8px 0 4px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--site-ink-soft);
  white-space: nowrap;
}

/* The orttag inside the pill and the menu: a little larger than on cards */
.site-brand-loc .place-tag,
.site-loc-item .place-tag {
  height: 28px;
  font-size: 14px;
}

.site-loc-item .place-tag {
  padding-left: 0;
}

.site-brand-loc .place-tag {
  padding-left: 6px;
}

.site-brand-loc:hover,
.site-brand .szh-menu-button--open .site-brand-loc {
  background: var(--cocoso-colors-theme-100);
}

.site-brand-loc.is-root {
  width: 28px;
  padding: 0;
  margin-left: 2px;
  justify-content: center;
  opacity: 0.7;
}

/* The cross that leaves the place: bare, no disc of its own */
.site-brand-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 4px 0 -4px;
  border-radius: 999px;
  color: var(--site-ink-soft);
}

.site-brand-clear:hover {
  background: var(--cocoso-colors-theme-100);
  color: var(--site-ink);
}

/* --- location menu --- */

.site-loc-menu {
  width: 272px;
}

/* "Hela kommunen": a row like the places, its mark a dark green disc with
   the landmark; a check at the end when it is the current choice */
.site-loc-home {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--site-ink);
}

.site-loc-home-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-700);
  color: #fff;
}

.site-loc-home-icon svg {
  width: 13px;
  height: 13px;
}

.site-loc-home-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.site-loc-home-text b {
  font-size: 14px;
  font-weight: 600;
}

.site-loc-home-text small {
  color: var(--site-ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.site-loc-home-end {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--cocoso-colors-theme-500);
}

.site-loc-home.is-current {
  background: var(--cocoso-colors-theme-100);
}

.site-loc-label {
  padding: 8px 10px 4px;
  color: var(--site-ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-loc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--site-ink);
}

.site-loc-item.is-current {
  background: var(--cocoso-colors-theme-100);
  font-weight: 700;
}

/* --- menu pill (desktop) --- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--site-island);
  box-shadow: var(--site-island-shadow);
}

.site-nav .szh-menu-button {
  all: unset;
  display: inline-flex;
  cursor: pointer;
}

.site-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--site-ink-soft);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.site-nav-item:hover {
  background: var(--cocoso-colors-theme-100);
}

.site-nav-item.is-active,
.site-nav-item.is-active:hover {
  background: var(--cocoso-colors-theme-700);
  color: #fff;
}

.site-nav-chevron {
  opacity: 0.7;
}

/* The Info menu and the account menu: rows like the search results, in
   the same paper panel (.szh-menu carries the panel itself). */
.site-info-menu {
  min-width: 220px;
  max-height: 480px;
  max-width: 320px;
  overflow-y: auto;
  font-family: var(--cocoso-font-ui);
}

.site-info-menu .szh-menu__item--hover {
  background: transparent;
}

.site-info-menu-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--cocoso-radius-falt);
  color: var(--site-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.site-info-menu-link:hover,
.szh-menu__item--hover > .site-info-menu-link {
  background: var(--cocoso-colors-theme-100);
  color: var(--site-ink);
}

/* The account menu's first row: who, as a search hit's title and detail */
.site-account-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--cocoso-linje);
}

.site-account-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--site-ink);
}

.site-account-role {
  font-size: 12px;
  color: var(--site-ink-soft);
  text-transform: lowercase;
}

.site-account-notice {
  justify-content: space-between;
  gap: 10px;
}

.site-account-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cocoso-tegel);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* Language choice inside the account menu: same chips, no pill around */
.site-account-langs {
  margin: 4px 0;
  padding: 6px 10px;
  border-top: 1px solid var(--cocoso-linje);
  border-bottom: 1px solid var(--cocoso-linje);
}

.site-footer-langs.is-row {
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}

.site-account-logout {
  gap: 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* --- the menu button (mobile) --- */

/* The four squares right after the crane, carrying the name of the page
   one is on; a little taller than the other buttons and taking the free
   width of the row. Opens the menu panel. Only on phones; the desktop has
   the menu pill in the bar. */
.site-more {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--site-island);
  box-shadow: var(--site-island-shadow);
  color: var(--site-ink-soft);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.site-more svg {
  flex: none;
}

/* The button measures itself, so the start page's hint can step out of
   the label when the button is narrow. */
.site-more {
  container-type: inline-size;
}

.site-more-hint {
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
}

.site-more.is-open .site-more-hint {
  color: rgba(255, 255, 255, 0.75);
}

@container (max-width: 145px) {
  .site-more-hint {
    display: none;
  }
}

.site-more-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-more.is-open {
  background: var(--cocoso-colors-theme-700);
  color: #fff;
}

/* --- the full menu panel (mobile) --- */

.site-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: var(--cocoso-gutter);
  right: var(--cocoso-gutter);
  z-index: 1002;
  padding: 6px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  border: 1px solid var(--cocoso-linje);
  border-radius: var(--cocoso-radius-meny);
  background: color-mix(in srgb, var(--cocoso-papper) 97%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--cocoso-skugga-meny);
  animation: site-menu-in 0.18s ease-out;
}

@keyframes site-menu-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* One row per page: the page's own 3D icon and its name, as a search hit */
.site-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--cocoso-radius-falt);
  color: var(--site-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.site-menu-row .threed-icon {
  flex: none;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 2px rgba(30, 50, 25, 0.18));
}

.site-menu-row:hover {
  background: var(--cocoso-colors-theme-100);
  color: var(--site-ink);
}

.site-menu-row.is-active {
  background: var(--cocoso-colors-theme-700);
  color: #fff;
}

.site-menu-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.site-menu-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-menu-row-detail {
  overflow: hidden;
  color: var(--site-ink-soft);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-menu-row.is-active .site-menu-row-detail {
  color: rgba(255, 255, 255, 0.8);
}

/* Hem: a small chip in the language row's style, left of the globe */
.site-menu-home {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-menu-langs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 10px 4px;
}

/* Catches a tap outside the panel and dims the page a touch */
.site-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20, 30, 15, 0.12);
}

/* --- account --- */

.site-login {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-500);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-login:hover {
  background: var(--cocoso-colors-theme-600);
  color: #fff;
}

/* --- site search (header, left of the account) ---
   A magnifier button that unfolds into a field to its left; below 1200px
   the open field takes the whole bar instead. The results drop down from
   the field, grouped by section. */

.site-search {
  position: relative;
  display: flex;
  align-items: center;
}

.site-search-toggle {
  order: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--site-island);
  box-shadow: var(--site-island-shadow);
  color: var(--site-ink-soft);
  cursor: pointer;
}

.site-search-toggle:hover {
  color: var(--site-ink);
}

.site-search-field {
  display: none;
  align-items: center;
  gap: 6px;
  width: 280px;
  height: 34px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  background: var(--site-island);
  box-shadow: var(--site-island-shadow);
  color: var(--site-ink-soft);
  transition: box-shadow 0.2s ease;
}

/* Unfolds to the left of the button, floating over the bar so the menu
   does not move while someone searches. */
.site-search.is-open .site-search-field {
  position: absolute;
  top: 50%;
  right: 44px;
  display: flex;
  translate: 0 -50%;
  animation: site-search-unfold 0.2s ease-out;
}

.site-search-field:focus-within {
  box-shadow: var(--site-island-shadow),
    0 0 0 2px var(--cocoso-colors-theme-300);
}

@keyframes site-search-unfold {
  from {
    width: 40px;
    opacity: 0;
  }
  to {
    width: 280px;
    opacity: 1;
  }
}

.site-search-icon {
  flex: 0 0 auto;
}

.site-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--site-ink);
  font-family: var(--cocoso-font-ui, inherit);
  font-size: 14px;
  outline: none;
}

.site-search-input:focus,
.site-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.site-search-input::placeholder {
  color: var(--site-ink-soft);
  opacity: 0.8;
}

.site-search-input::-webkit-search-cancel-button,
.site-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.site-search-clear {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-100);
  color: var(--site-ink-soft);
  cursor: pointer;
}

.site-search-clear:hover {
  background: var(--cocoso-colors-theme-200);
  color: var(--site-ink);
}

.site-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1002;
  width: 380px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.site-search-empty {
  padding: 14px 12px;
  color: var(--site-ink-soft);
  font-size: 14px;
}

.site-search-group + .site-search-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--cocoso-linje);
}

.site-search-group-label {
  padding: 8px 10px 4px;
  color: var(--site-ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-search-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--cocoso-radius-falt);
  color: var(--site-ink);
  text-decoration: none;
}

.site-search-hit.is-active,
.site-search-hit:hover {
  background: var(--cocoso-colors-theme-100);
  color: var(--site-ink);
}

.site-search-hit-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.site-search-hit-title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An event that has already taken place: dimmed, and says so */
.site-search-hit.is-past .site-search-hit-title,
.site-search-hit.is-past .site-search-hit-detail {
  color: var(--site-ink-soft);
  opacity: 0.85;
}

.site-search-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-100);
  color: var(--site-ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.site-search-hit-detail {
  overflow: hidden;
  color: var(--site-ink-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-200);
  color: var(--site-ink);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.site-search-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Visa alla resultat": the foot of the results, Enter's way out */
.site-search-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 10px;
  border-top: 1px solid var(--cocoso-linje);
  color: var(--cocoso-colors-theme-700);
  font-weight: 700;
  text-decoration: none;
}

.site-search-all:hover {
  border-radius: var(--cocoso-radius-falt);
  background: var(--cocoso-colors-theme-100);
}

.site-search-all kbd {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--cocoso-papper);
  box-shadow: inset 0 0 0 1px var(--cocoso-linje);
  color: var(--cocoso-mylla-soft);
  font-family: inherit;
  font-size: 12px;
}

/* --- The search results page (pages/search/SearchPage.tsx) --- */

.search-page {
  --site-ink: var(--cocoso-colors-theme-800);
  --site-ink-soft: var(--cocoso-colors-theme-700);
  width: 100%;
  max-width: calc(var(--cocoso-page) + 2 * var(--cocoso-gutter));
  margin: 0 auto;
  padding: 28px var(--cocoso-gutter) 48px;
  font-family: var(--cocoso-font-ui);
}

/* the field, the count and rows of text keep a reading width */
.search-page .search-page-form,
.search-page .search-page-status,
.search-section .search-page-hits {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

/* A section as its page heads itself: the 3D icon, the name, the count */
.search-section {
  margin-bottom: 40px;
}

.search-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.search-section-head .threed-icon {
  width: 40px;
  height: 40px;
  flex: none;
  filter: drop-shadow(0 2px 3px rgba(30, 50, 25, 0.18));
}

.search-section .search-page-hits {
  margin-left: 0;
}

/* Tidigare | Kommande at the right of the events heading */
.search-section-seg {
  margin-left: auto;
  background: var(--cocoso-colors-theme-100);
}

.search-section-seg .seg-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.search-seg-count {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.7;
}

/* On a phone the switch takes its own line under the heading */
@media (max-width: 560px) {
  .search-section-head {
    flex-wrap: wrap;
  }

  .search-section-seg {
    display: flex;
    width: 100%;
    margin-left: 0;
  }

  .search-section-seg .seg-button {
    flex: 1;
    justify-content: center;
  }
}

/* "Visa alla 18" under a section showing its first few */
.search-section-more {
  justify-content: center;
  margin-top: 14px;
}

/* Organizers start at the left, under their heading, as the other
   sections do (centred on the organizers page itself) */
.search-section .search-people {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
}

/* the cards are links: no underline, the card's own hover */
.search-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.search-page-form {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  margin: 8px 0 10px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-mylla-soft);
}

.search-page-form:focus-within {
  box-shadow: var(--cocoso-skugga), 0 0 0 2px var(--cocoso-colors-theme-300);
}

.search-page-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--cocoso-mylla);
  font-family: inherit;
  font-size: 17px;
  outline: none;
}

.search-page-form input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-page-form button {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-700);
  color: var(--cocoso-papper);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.search-page-status {
  margin: 0 0 18px;
  color: var(--cocoso-mylla-soft);
  font-size: 14px;
  text-align: center;
}

.search-page-group-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-100);
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* the hits of a section on one paper card */
.search-page-hits {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: var(--cocoso-radius-kort);
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
}

.search-page-hit {
  padding: 10px 12px;
  font-size: 15px;
}

.site-search-toggle:focus-visible,
.site-search-clear:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

.site-header-right .szh-menu-button {
  all: unset;
  display: inline-flex;
  cursor: pointer;
}

.site-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-user-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--site-island);
  box-shadow: var(--site-island-shadow);
  color: var(--site-ink-soft);
}

.site-user-count {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d9383a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* The account avatar: the same paper island as the search, the pen and
   the bell, with the initial in Fraunces when there is no picture, so the
   right side of the header reads as one row. */
.site-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--site-island);
  box-shadow: var(--site-island-shadow);
  color: var(--site-ink);
  font-family: var(--cocoso-font-display);
  font-size: 17px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 60;
  line-height: 1;
  text-transform: uppercase;
  overflow: visible;
}

.site-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.site-avatar-role {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--cocoso-colors-theme-800);
  box-shadow: 0 0 0 1px var(--cocoso-colors-theme-200);
}

/* Up to 1199px the open field takes the bar: brand and menu step aside
   and the account stays on the right. */
@media (max-width: 1199px) {
  .site-header-bar:has(.site-search.is-open) {
    grid-template-columns: 1fr;
  }

  .site-header-bar:has(.site-search.is-open) > .site-brand,
  .site-header-bar:has(.site-search.is-open) > .site-nav,
  .site-header-bar:has(.site-search.is-open) > .site-more,
  .site-header-bar:has(.site-search.is-open) .new-button-wrapper {
    display: none;
  }

  .site-header-bar:has(.site-search.is-open) > .site-header-right {
    width: 100%;
    justify-self: stretch;
  }

  .site-search.is-open {
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-search.is-open .site-search-field {
    position: static;
    flex: 1 1 auto;
    width: auto;
    height: 36px;
    margin-right: 8px;
    translate: none;
    animation: none;
  }

  .site-search-input {
    font-size: 16px; /* keeps iOS from zooming into the field */
  }

  .site-search-panel {
    position: fixed;
    top: 66px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 80px);
  }
}

@media (max-width: 959px) {
  .site-search-panel {
    top: 60px;
    max-height: calc(100vh - 72px);
  }
}

@media (max-width: 959px) {
  /* The menu pill is gone from the bar, so two columns: brand, account.
     Otherwise the right side would land in the empty middle column. */
  .site-header-bar {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    height: 52px;
    padding: 0 10px;
  }

  .site-header-bar:has(.site-search.is-open) {
    grid-template-columns: 1fr;
  }

  .site-nav {
    display: none;
  }

  /* One row: crane pill, the menu button with the free width, buttons */
  .site-more {
    display: flex;
  }

  /* Everything in the bar is 32px tall, like the round buttons */
  .site-brand {
    height: 32px;
    padding: 2px 3px 2px 2px;
  }

  .site-brand-mark {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .site-brand-mark-trana {
    width: 28px;
    height: 28px;
  }

  .site-brand-mark-trana .threed-icon {
    top: -6px;
    translate: calc(-50% + 4px) 0;
    width: 27px;
    height: 40px;
    clip-path: circle(26px at 9px 8px);
  }

  .site-more {
    height: 32px;
    padding: 0 10px 0 12px;
    font-size: 14px;
  }

  .site-brand-name {
    font-size: 14px;
  }

  .site-brand-loc {
    height: 26px;
    padding: 0 8px;
    font-size: 13px;
  }

  .site-login {
    height: 30px;
    padding: 0 12px;
  }

  .site-search-toggle,
  .site-new,
  .site-edit {
    width: 32px;
    height: 32px;
  }

  .site-avatar,
  .site-user-bell {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 400px) {
  .site-brand.has-location .site-brand-name,
  .site-brand.has-location .site-brand-sep {
    display: none;
  }
}

/* === Start page hero ===
   The welcome band under the compact header: name, one line, and the
   places as the way in. Generated shapes fade into the page behind it. */

/* Woven texture from Väveriet: two repeating hairline gradients, no image. */
.vav {
  background-color: var(--cocoso-colors-theme-100);
  background-image: repeating-linear-gradient(
      0deg,
      rgba(30, 79, 27, 0.07) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(30, 79, 27, 0.07) 0 1px,
      transparent 1px 7px
    );
}

.home-hero,
.home-hero.vav {
  position: relative;
  overflow: hidden;
  margin-top: -56px;
  padding: 96px 0 88px;
  font-family: var(--cocoso-font-ui);
  background-color: var(--cocoso-season-golv);
  background-image: radial-gradient(
      circle at 88% 12%,
      var(--cocoso-season-glod-a),
      transparent 42%
    ),
    radial-gradient(
      circle at 8% 100%,
      var(--cocoso-season-glod-b),
      transparent 40%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 79, 27, 0.07) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(30, 79, 27, 0.07) 0 1px,
      transparent 1px 7px
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 calc(100% - 72px),
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%);
}

.home-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  box-sizing: border-box;
  max-width: calc(var(--cocoso-page) + 2 * var(--cocoso-gutter));
  margin: 0 auto;
  padding: 0 var(--cocoso-gutter);
}

.home-hero-text {
  flex: 1 1 380px;
  max-width: 620px;
  position: relative;
  z-index: 2;
  /* the title is sized by this column, so it keeps its desktop shape */
  container-type: inline-size;
}

.home-hero-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--cocoso-season-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-hero-title {
  margin: 0;
  color: var(--cocoso-colors-theme-800);
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  /* As on a desktop at every width: the long second line
     ("Tranemokalendern") filling the column, never wider */
  font-size: min(62px, 10cqi);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Beside the desktop scene the column is wider than the room left
   by it: the title also follows the screen there, as it always has */
@media (min-width: 960px) {
  .home-hero-title {
    font-size: min(62px, 10cqi, 5.4vw);
  }
}

.home-hero-tagline {
  margin: 16px 0 0;
  max-width: 52ch;
  color: #4b4239;
  font-family: var(--cocoso-body-font-family);
  font-size: 17px;
  line-height: 1.5;
}

.home-hero-places {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.home-hero-label {
  color: var(--cocoso-colors-theme-700);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The row scrolls sideways, and a scrolling box clips what sticks out of
   it, so it gets room around the cards for their hover lift and shadow,
   taken back with negative margins so the row sits where it did. */
.location-cards {
  display: flex;
  gap: 12px;
  max-width: calc(100% + 32px);
  overflow-x: auto;
  scrollbar-width: none;
  margin: -8px -16px -32px;
  padding: 8px 16px 32px;
}

.location-cards::-webkit-scrollbar {
  display: none;
}

.location-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 200px;
  height: 128px;
  border-radius: var(--cocoso-radius-kort);
  overflow: hidden;
  background: var(--cocoso-colors-theme-100) center / cover no-repeat;
  box-shadow: var(--cocoso-skugga-kort);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.location-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -14px rgba(60, 40, 20, 0.55);
}

.location-card-shapes {
  opacity: 0.6;
  mix-blend-mode: multiply;
}

.location-card-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 12px 10px;
  background: linear-gradient(
    to top,
    rgba(42, 37, 32, 0.72),
    rgba(42, 37, 32, 0)
  );
  color: #fff;
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: 19px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* === Stamps: a place's postmark === */

.stamp {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--cocoso-papper);
  font-family: var(--cocoso-font-ui);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  flex: 0 0 auto;
}

.stamp-sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1.5px var(--stamp-ink);
}

.stamp-md {
  width: 76px;
  height: 76px;
  font-size: 9px;
  padding: 10px;
  box-shadow: inset 0 0 0 2px var(--stamp-ink),
    inset 0 0 0 5px var(--cocoso-papper), inset 0 0 0 6px var(--stamp-ink);
}

.stamp-lg {
  width: 112px;
  height: 112px;
  font-size: 12px;
  padding: 14px;
  box-shadow: inset 0 0 0 2.5px var(--stamp-ink),
    inset 0 0 0 7px var(--cocoso-papper), inset 0 0 0 8.5px var(--stamp-ink);
}

.stamp-note {
  display: block;
  margin-top: 2px;
  font-family: var(--cocoso-body-font-family);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}

@media (max-width: 959px) {
  .home-hero,
  .home-hero.vav {
    margin-top: -104px;
    /* room between the chip row and the icon row on the eyebrow's line */
    padding: 162px 0 64px;
  }

  .home-hero-inner {
    gap: 20px;
  }

  .home-hero-tagline {
    font-size: 16px;
  }

  /* The places scroll sideways; the third card peeks in from the edge so
     the row reads as a row. */
  .location-cards {
    margin: -8px calc(-1 * var(--cocoso-gutter)) -32px;
    padding: 8px var(--cocoso-gutter) 32px;
    scroll-snap-type: x proximity;
    scroll-padding: 0 16px;
  }

  .location-card {
    width: clamp(132px, 40vw, 168px);
    height: 104px;
    scroll-snap-align: start;
  }

  .location-card-name {
    font-size: 17px;
    padding: 24px 10px 8px;
  }
}

/* === 3D icons (3dicons.co, CC0) === */

.threed-icon {
  display: inline-block;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 6px 10px rgba(30, 50, 25, 0.18));
}

/* Listing page heading: icon + title side by side */

/* The heading row: the heading centred, and room at the right for
   something that floats beside it (the events page's switch). */
.page-heading-row {
  position: relative;
  display: flex;
  justify-content: center;
}

.page-heading-aside {
  position: absolute;
  top: 50%;
  right: var(--cocoso-gutter);
  translate: 0 -50%;
}

.page-heading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* "Visar bara kulturevenemangen i Limmared" under the heading, with a
   small cross that widens to the whole municipality */
/* The notice on its own row under the kind strip (events page) */
.place-notice-row:not(:empty) {
  margin: -0.5rem auto 1rem;
}

.place-notice-row .page-heading-place {
  margin: 0;
}

/* The site's notice bar (see also generic/Notice.tsx): a light green,
   see-through pill with one line of text. The place notice is the link
   kind with a cross; .site-notice the plain kind. */
.page-heading-place,
.site-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 4px 5px 4px 14px;
  border-radius: 999px;
  /* a light green wash, see-through onto the floor */
  background: color-mix(
    in srgb,
    var(--cocoso-colors-theme-500) 8%,
    transparent
  );
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-notice {
  margin: 0;
  padding: 6px 14px;
}

/* Back to the page an admin form was opened from */
.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1rem;
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.admin-back-link:hover {
  text-decoration: underline;
}

/* A section heading on an entry page with the section's 3D icon */
.entry-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.entry-section-title .threed-icon {
  flex: none;
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 4px 6px rgba(30, 50, 25, 0.18));
}

.page-heading-place:hover {
  color: var(--cocoso-colors-theme-800);
  background: color-mix(
    in srgb,
    var(--cocoso-colors-theme-500) 14%,
    transparent
  );
}

.page-heading-clear {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--cocoso-colors-theme-700);
}

.page-heading-place:hover .page-heading-clear {
  color: var(--cocoso-colors-theme-800);
}

/* The listing icon sits a little below the header and bobs slowly. */
.page-heading-icon {
  flex: 0 0 auto;
  margin-top: 16px;
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .page-heading-icon {
    animation: heading-float 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@keyframes heading-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

/* Start page hero: a small cluster of icons, lifted off the page */

.home-hero-inner {
  position: relative;
}

.home-hero-icons {
  position: absolute;
  right: 24px;
  top: -40px;
  width: 320px;
  height: 260px;
  pointer-events: none;
}

.home-hero-icon {
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0 14px 18px rgba(30, 50, 25, 0.22));
}

/* The crane behind the cluster, to its left, faded a little into the
   floor and looking at the icons. */
/* The crane behind the cluster: beak at the title's second line, toes in
   the band's mist */
.home-hero-crane {
  position: absolute;
  left: -266px;
  top: 152px;
  width: 206px;
  height: 206px;
  z-index: 0;
  filter: drop-shadow(0 10px 14px rgba(30, 50, 25, 0.16));
  pointer-events: none;
}

.home-hero-icon.is-1 {
  left: 40px;
  top: 10px;
  transform: rotate(-8deg);
}
.home-hero-icon.is-2 {
  left: 190px;
  top: 70px;
  transform: rotate(6deg);
}
.home-hero-icon.is-3 {
  left: 0;
  top: 140px;
  transform: rotate(-4deg);
}
.home-hero-icon.is-4 {
  left: 150px;
  top: 180px;
  transform: rotate(10deg);
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero-icon {
    animation: hero-float 7s ease-in-out infinite;
  }
  .home-hero-icon.is-2 {
    animation-delay: -2s;
  }
  .home-hero-icon.is-3 {
    animation-delay: -4s;
  }
  .home-hero-icon.is-4 {
    animation-delay: -1s;
  }
}

@keyframes hero-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@media (max-width: 1100px) {
  .home-hero-icons {
    width: 260px;
    height: 220px;
    top: -20px;
  }
  .home-hero-crane {
    left: -120px;
    top: -10px;
    width: 180px;
    height: 180px;
  }
  .home-hero-icon.is-1 {
    width: 120px;
    height: 120px;
    left: 30px;
  }
  .home-hero-icon.is-2 {
    width: 96px;
    height: 96px;
    left: 150px;
    top: 60px;
  }
  .home-hero-icon.is-3 {
    width: 88px;
    height: 88px;
    top: 120px;
  }
  .home-hero-icon.is-4 {
    width: 72px;
    height: 72px;
    left: 120px;
    top: 150px;
  }
}

/* Between the desktop cluster and the phone row: a smaller cluster still
   to the right of the text, the crane behind it. */
@media (min-width: 720px) and (max-width: 959px) {
  .home-hero-text {
    max-width: calc(100% - 350px);
  }

  .home-hero-icons {
    width: 220px;
    height: 190px;
    right: 8px;
    top: 0;
  }

  .home-hero-crane {
    left: -110px;
    top: 40px;
    width: 160px;
    height: 160px;
  }

  .home-hero-icon.is-1 {
    width: 100px;
    height: 100px;
    left: 20px;
    top: 0;
  }
  .home-hero-icon.is-2 {
    width: 82px;
    height: 82px;
    left: 130px;
    top: 46px;
  }
  .home-hero-icon.is-3 {
    width: 74px;
    height: 74px;
    left: 0;
    top: 100px;
  }
  .home-hero-icon.is-4 {
    width: 62px;
    height: 62px;
    left: 110px;
    top: 128px;
  }
}

@media (max-width: 719px) {
  /* Narrow (phones): a miniature of the desktop scene, tucked into the
     top-right corner beside "Välkommen till" and the short first line of
     the title. The crane stands at the right edge with its feet on the
     baseline of "Tranemo"; the seasonal icons float around it at
     different sizes. The title is held to two lines so the first line
     stays short and the second gets the whole width below the scene. */
  .home-hero-text {
    max-width: 440px;
  }

  .home-hero-icons {
    position: absolute;
    right: var(--cocoso-gutter);
    top: -58px;
    width: 196px;
    height: 132px;
  }

  .home-hero-crane {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 8px 10px rgba(30, 50, 25, 0.22));
  }

  .home-hero-icon {
    filter: drop-shadow(0 6px 8px rgba(30, 50, 25, 0.2));
  }
  .home-hero-icon.is-1 {
    width: 66px;
    height: 66px;
    left: 0;
    top: 18px;
    transform: rotate(-6deg);
  }
  .home-hero-icon.is-2 {
    width: 50px;
    height: 50px;
    left: 80px;
    top: -2px;
    transform: rotate(6deg);
  }
  .home-hero-icon.is-3 {
    width: 46px;
    height: 46px;
    left: 30px;
    top: 82px;
    transform: rotate(-4deg);
  }
  .home-hero-icon.is-4 {
    width: 38px;
    height: 38px;
    left: 156px;
    top: 84px;
    transform: rotate(10deg);
  }
}

@media (max-width: 400px) {
  /* The smallest phones: pull the scene in a touch so it clears the
     first line of the title. */
  .home-hero-icons {
    width: 180px;
    height: 124px;
    top: -54px;
  }
  .home-hero-crane {
    width: 112px;
    height: 112px;
  }
  .home-hero-icon.is-1 {
    width: 60px;
    height: 60px;
  }
  .home-hero-icon.is-2 {
    left: 70px;
  }
  .home-hero-icon.is-3 {
    left: 24px;
    top: 76px;
  }
  .home-hero-icon.is-4 {
    left: 142px;
    top: 80px;
  }
}

/* === Place tag (orttag) === */

.place-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  font-family: var(--cocoso-font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}

.place-tag.on-image {
  background: rgba(255, 253, 247, 0.92);
}

/* On a card's own paper: the same tag, no pill behind it */
.place-tag.bare {
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Keyboard focus on the header's menu buttons (place, info, account) */
.site-brand .szh-menu-button:focus-visible,
.site-nav .szh-menu-button:focus-visible,
.site-header-right .szh-menu-button:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
  border-radius: 999px;
}

/* The author under a request's title: a link around avatar and name */
.tably-author-name {
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 4px;
}

/* A form field's label, when it points at its control */
.form-field-label {
  color: var(--cocoso-colors-gray-800);
  display: inline-block;
  font-weight: 700;
}

/* label and helper on one line (FormField helperInline) */
.form-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
}

/* "(valfritt)" after an optional field's label; required ones carry no mark */
.form-field-optional {
  color: var(--cocoso-mylla-soft);
  font-weight: 400;
}

/* === Skip link === */

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-700);
  color: #fff;
  font-family: var(--cocoso-font-ui);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}

.skip-link:focus-visible {
  outline: 3px solid var(--cocoso-colors-theme-200);
  transform: translateY(0);
}

/* === Account pages ===
   Login (email → code), the link from the login email, and the
   administrators' password form. One sheet of paper in the middle of the
   page; see imports/ui/pages/auth/AuthPanel.tsx. */

.auth-page {
  display: flex;
  justify-content: center;
  padding: clamp(1.5rem, 6vh, 4rem) 16px 3rem;
  min-height: 60vh;
}

.auth-column {
  width: 100%;
  max-width: 420px;
}

.auth-panel {
  background: var(--cocoso-papper);
  border: 1px solid var(--cocoso-linje);
  border-radius: calc(var(--cocoso-radius-kort) + 4px);
  box-shadow: var(--cocoso-skugga-kort);
  padding: 2.25rem 2rem 1.75rem;
  text-align: center;
}

@media (max-width: 480px) {
  .auth-panel {
    padding: 1.75rem 1.25rem 1.5rem;
  }
}

.auth-badge {
  align-items: center;
  background: var(--cocoso-colors-theme-100);
  border-radius: 999px;
  color: var(--cocoso-colors-theme-800);
  display: inline-flex;
  height: 3.25rem;
  justify-content: center;
  margin-bottom: 1rem;
  width: 3.25rem;
}

.auth-badge svg {
  height: 1.5rem;
  width: 1.5rem;
}

.auth-badge--error {
  background: #fdecea;
  color: #b42318;
}

/* A lead that must not be missed, e.g. "only for administrators" */
.auth-notice {
  color: var(--cocoso-lingon);
}

.auth-title {
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-display);
  font-size: clamp(1.6rem, 5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.auth-lead {
  color: var(--cocoso-mylla-soft);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 auto 1.5rem;
  max-width: 32ch;
}

.auth-lead strong {
  color: var(--cocoso-mylla);
  overflow-wrap: anywhere;
}

/* The form itself reads left to right */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.auth-label {
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
}

.auth-form .cocoso-input {
  font-size: 1.0625rem;
  min-height: 3rem;
  padding: 0.65rem 1rem;
}

.auth-form .cocoso-input:focus,
.auth-code input:focus {
  outline: none;
}

.auth-form .cocoso-input:focus {
  box-shadow: 0 0 0 3px var(--cocoso-colors-theme-200);
}

.auth-error {
  align-items: flex-start;
  background: #fdecea;
  border-radius: var(--cocoso-radius-falt);
  color: #8a1c13;
  display: flex;
  font-size: 0.9375rem;
  gap: 0.5rem;
  line-height: 1.4;
  padding: 0.65rem 0.85rem;
  text-align: left;
}

.auth-error svg {
  flex-shrink: 0;
  height: 1.1rem;
  margin-top: 0.1rem;
  width: 1.1rem;
}

/* Six boxes for the code from the email */
.auth-code {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(6, 1fr);
}

.auth-code input {
  aspect-ratio: 5 / 6;
  background: var(--cocoso-papper);
  border: 1.5px solid var(--cocoso-linje);
  border-radius: var(--cocoso-radius-falt);
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: clamp(1.4rem, 6vw, 1.75rem);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 700;
  min-width: 0;
  outline: none;
  padding: 0;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.auth-code input:hover {
  border-color: var(--cocoso-colors-theme-300);
}

.auth-code input:focus {
  border-color: var(--cocoso-colors-theme-500);
  box-shadow: 0 0 0 3px var(--cocoso-colors-theme-200);
}

.auth-code[data-invalid='true'] input {
  border-color: #d92d20;
}

.auth-code input:disabled {
  opacity: 0.6;
}

.auth-footer {
  border-top: 1px solid var(--cocoso-linje);
  color: var(--cocoso-mylla-soft);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
}

.auth-footer p {
  margin: 0;
}

.auth-footer p + p {
  margin-top: 0.5rem;
}

.auth-footer a,
.auth-text-button {
  background: none;
  border: none;
  color: var(--cocoso-colors-theme-700);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.auth-text-button:disabled {
  color: var(--cocoso-mylla-soft);
  cursor: default;
  font-weight: 400;
  text-decoration: none;
}

.auth-footer a:focus-visible,
.auth-text-button:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

.auth-back {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
}

.auth-back svg {
  height: 1rem;
  width: 1rem;
}

.auth-spinner {
  animation: spin 1s linear infinite;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.auth-panel-link {
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-weight: 700;
  text-decoration: none;
}

.auth-panel-link:hover {
  text-decoration: underline;
}

.auth-panel-link--quiet {
  color: var(--cocoso-mylla-soft);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Confirming a new account: what it means, then the terms */
.auth-facts {
  background: var(--cocoso-colors-theme-50);
  border: 1px solid var(--cocoso-linje);
  border-radius: var(--cocoso-radius-falt);
  color: var(--cocoso-mylla);
  font-size: 0.9375rem;
  line-height: 1.45;
  list-style: none;
  margin: 0;
  padding: 0.85rem 1rem;
}

.auth-facts li {
  padding-left: 1.5rem;
  position: relative;
}

.auth-facts li + li {
  margin-top: 0.45rem;
}

.auth-facts li::before {
  color: var(--cocoso-colors-theme-500);
  content: '✓';
  font-weight: 700;
  left: 0.1rem;
  position: absolute;
}

.auth-check {
  align-items: flex-start;
  color: var(--cocoso-mylla);
  cursor: pointer;
  display: flex;
  font-size: 0.9375rem;
  gap: 0.65rem;
  line-height: 1.45;
}

.auth-check input {
  accent-color: var(--cocoso-colors-theme-500);
  flex-shrink: 0;
  height: 1.25rem;
  margin: 0.05rem 0 0;
  width: 1.25rem;
}

.auth-check a {
  color: var(--cocoso-colors-theme-700);
  font-weight: 700;
}

.auth-form .auth-text-button {
  align-self: center;
}

/* /welcome after a new account */
.welcome-column {
  max-width: 520px;
}

.welcome-panel {
  padding-top: 2rem;
}

.welcome-icon {
  display: block;
  margin: 0 auto 0.5rem;
}

.welcome-kicker {
  color: var(--cocoso-colors-theme-600);
  font-family: var(--cocoso-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.welcome-title {
  font-size: clamp(1.75rem, 6vw, 2.25rem);
}

.welcome-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  text-align: left;
}

.welcome-step {
  align-items: center;
  border: 1px solid var(--cocoso-linje);
  border-radius: var(--cocoso-radius-kort);
  display: flex;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
}

.welcome-step img {
  flex-shrink: 0;
}

.welcome-step h2 {
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
}

.welcome-step p {
  color: var(--cocoso-mylla-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
  margin: 0;
}

.welcome-actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The quiet link sits on its own line under the main one */
.auth-links .auth-panel-link--quiet {
  flex-basis: 100%;
  text-align: center;
}

/* === Start page: the places ===
   After the week's rhythm: one card per place, with the whole municipality
   first, in the same card style as everywhere else. */
.home-places {
  margin: 2.5rem 0 0;
}

.location-card-all {
  background-image: linear-gradient(
    135deg,
    var(--cocoso-colors-theme-200),
    var(--cocoso-colors-theme-600)
  );
}

/* === The place cards as a picker ===
   At the top of a listing (Äta/handla/bo) the same cards choose the place:
   lower, the chosen one ringed and the places with nothing dimmed. */
.location-cards.is-compact {
  justify-content: safe center;
}

/* The name sits in the flow here, so a card grows to fit a long name
   ("Hela kommunen" in a wide font) instead of cutting it off. */
.location-cards.is-compact .location-card {
  display: flex;
  align-items: flex-end;
  width: auto;
  min-width: 156px;
  height: 84px;
}

.location-cards.is-compact .location-card-name {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 22px 12px 8px 10px;
  font-size: 16px;
  white-space: nowrap;
}

.location-card.is-current::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 3px solid var(--cocoso-colors-theme-800);
  border-radius: inherit;
  pointer-events: none;
}

.location-card.is-empty:not(.is-current) {
  opacity: 0.55;
}

@media (max-width: 640px) {
  .location-cards.is-compact {
    justify-content: flex-start;
  }

  .location-cards.is-compact .location-card {
    min-width: clamp(132px, 38vw, 150px);
    height: 76px;
  }

  .location-cards.is-compact .location-card-name {
    font-size: 15px;
  }
}

/* === Start page: the site's sections ===
   One paper card per section of the menu, with its 3D icon, the menu's
   label and a line about what it is for. */
.home-sections {
  margin: 2.5rem 0 1rem;
}

.home-sections-title {
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.home-sections-intro {
  color: var(--cocoso-mylla-soft);
  margin: 0 0 1rem;
  max-width: 60ch;
}

.home-section-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.home-section {
  align-items: center;
  background: var(--cocoso-papper);
  border-radius: var(--cocoso-radius-kort);
  box-shadow: var(--cocoso-skugga-kort);
  color: var(--cocoso-mylla);
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  /* lifted with top, not transform: a transform puts the card on a layer
     of its own and its 3D icon's drop shadow can be cut square there */
  position: relative;
  top: 0;
  transition: top 0.18s ease, box-shadow 0.18s ease;
}

.home-section:hover {
  box-shadow: 0 16px 28px -14px rgba(60, 40, 20, 0.5);
  top: -3px;
}

.home-section:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

.home-section .threed-icon {
  flex: 0 0 auto;
}

.home-section-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-section-text strong {
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: 1.15rem;
  font-weight: 600;
}

.home-section-text span {
  color: var(--cocoso-mylla-soft);
  font-size: 0.9rem;
  line-height: 1.35;
}

@media (max-width: 599px) {
  .home-section-grid {
    grid-template-columns: 1fr;
  }
}

/* === Event kind chips ===
   Under the events heading: one chip per kind that has an upcoming event,
   a soft 3D icon and the name, green when chosen. Swipes on phones. */
/* === Segmented switch ===
   Two or three choices in one pill, the chosen one filled: Idag/Imorgon
   on the start page, Kommande/Tidigare on the events page. */
.seg {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.7);
}

.seg-button {
  padding: 0.35rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cocoso-colors-theme-800);
  font-family: var(--cocoso-font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.seg-button.is-active {
  background: var(--cocoso-colors-theme-700);
  color: #fff;
}

.seg-button:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

/* The kinds on the events page: a strip of 3D icons with small
   uppercase labels, centred, nothing boxed. The chosen one carries a
   green bar under its label. */
/* The kinds centred on the page, the filter tile at the right edge: three
   columns, the outer two equal, so the middle one stays centred while
   there is room, and gives way rather than run into the filter */
.kind-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: start;
  column-gap: 32px;
  /* auto at the sides keeps .page-wrap centred on a wide screen */
  margin: 4px auto 1.25rem;
}

/* Centred while it fits, scrolling sideways from its start when it does
   not: auto margins instead of justify-content, which would cut off the
   first kinds once the row is too wide */
.kind-bar > .kind-strip {
  grid-column: 2;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}

.kind-bar > .kind-strip::-webkit-scrollbar {
  display: none;
}

.kind-bar > .kind-strip > :first-child {
  margin-left: auto;
}

.kind-bar > .kind-strip > :last-child {
  margin-right: auto;
}

.kind-bar > .view-menu {
  grid-column: 3;
  justify-self: end;
}

.kind-strip {
  display: flex;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.kind-tile {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 84px;
  padding: 8px 10px 10px;
  border-radius: var(--cocoso-radius-kort);
  color: var(--cocoso-mylla-soft);
  cursor: pointer;
  font-family: var(--cocoso-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* A fixed box for every icon, whatever its proportions, so the labels
   line up */
.kind-tile .threed-icon {
  /* lifted with top, not transform (see .home-section) */
  position: relative;
  top: 0;
  width: 40px;
  height: 40px;
  transition: top 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kind-tile > span {
  position: relative;
  padding-bottom: 6px;
}

.kind-tile > span::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-500);
  opacity: 0;
  scale: 0.4 1;
  transition: opacity 0.15s ease, scale 0.2s ease;
}

.kind-tile:hover {
  color: var(--cocoso-colors-theme-800);
}

.kind-tile:hover .threed-icon {
  top: -2px;
}

.kind-tile.is-active {
  color: var(--cocoso-colors-theme-800);
}

.kind-tile.is-active > span::after {
  opacity: 1;
  scale: 1 1;
}

.kind-tile:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

/* The view menu at the end of the kinds (EventViewMenu.tsx): a tile like
   them, a little apart, opening a panel in the header's menu style */
.view-menu {
  position: relative;
  flex: none;
}

/* Phone: the strip scrolls and the filter stays put at its right */
@media (max-width: 599px) {
  .kind-bar {
    display: flex;
    justify-content: flex-end;
    column-gap: 12px;
  }
}

/* the kinds' underline is for the label only, not the switch's box */
.view-menu-button > .view-menu-icon::after {
  display: none;
}

/* a little lower still, nearer its label */
.view-menu-button .filter-switch {
  translate: 0 3px;
}

/* The switch sits at the foot of the icon's box, close to its label,
   which stays on the line of the kinds' labels */
.view-menu-icon {
  position: relative;
  display: grid;
  place-items: end center;
  height: 40px;
}

.view-menu-button.is-open {
  color: var(--cocoso-colors-theme-800);
}

/* The Filter's switch (FilterSwitch in EventViewMenu.tsx): the toggle
   icon's red to orange track and silver knob, in CSS. Off: a quiet track,
   knob left. On, while anything is filtered: the colour, knob right. */
.filter-switch {
  --switch-w: 46px;
  --switch-h: 26px;
  --switch-pad: 3px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: 999px;
  background: linear-gradient(180deg, #e4ddcf 0%, #d6cebd 100%);
  box-shadow: inset 0 2px 3px rgba(60, 40, 20, 0.18),
    inset 0 -1px 1px rgba(255, 255, 255, 0.6);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.filter-switch.is-small {
  --switch-w: 34px;
  --switch-h: 20px;
  --switch-pad: 2px;
}

.filter-switch.is-on {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28) 0%,
      transparent 45%
    ),
    linear-gradient(90deg, #b3233a 0%, #d63d3c 50%, #ee7b33 100%);
  box-shadow: inset 0 -3px 4px rgba(110, 15, 25, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 3px 7px -3px rgba(150, 40, 25, 0.55);
}

.filter-switch-knob {
  position: absolute;
  top: var(--switch-pad);
  left: var(--switch-pad);
  width: calc(var(--switch-h) - 2 * var(--switch-pad));
  height: calc(var(--switch-h) - 2 * var(--switch-pad));
  border-radius: 999px;
  background: radial-gradient(
    circle at 35% 30%,
    #ffffff 0%,
    #eef0f1 40%,
    #c5cacd 100%
  );
  box-shadow: 0 2px 3px rgba(40, 20, 10, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.12);
  transition: translate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filter-switch.is-on .filter-switch-knob {
  translate: calc(var(--switch-w) - var(--switch-h)) 0;
}

.view-menu-panel {
  --site-ink: var(--cocoso-colors-theme-800);
  --site-ink-soft: var(--cocoso-colors-theme-700);
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: min(380px, calc(100vw - 2 * var(--cocoso-gutter)));
  font-family: var(--cocoso-font-ui);
  text-align: left;
}

/* Tidigare | Kommande at the top of the panel, across its width */
.view-menu-seg {
  display: flex;
  margin: 4px 4px 2px;
}

.view-menu-seg .seg-button {
  flex: 1;
}

/* Kinds and places: small rows with a check, two to a line */
.view-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 0 2px;
}

.view-menu-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--cocoso-radius-falt);
  background: none;
  color: var(--site-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.view-menu-check-row:hover {
  background: var(--cocoso-colors-theme-100);
}

.view-menu-check-row .threed-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.view-menu-check-row > span:not(.view-menu-box) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-menu-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--cocoso-colors-theme-300, #b9c9a5);
  color: var(--cocoso-papper);
}

.view-menu-check-row.is-checked .view-menu-box {
  background: var(--cocoso-colors-theme-700);
  box-shadow: none;
}

.view-menu-box svg {
  width: 13px;
  height: 13px;
}

.view-menu-heading {
  margin: 8px 10px 4px;
  color: var(--cocoso-mylla-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.view-menu-heading:first-child {
  margin-top: 4px;
}

.view-menu-row {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.view-menu-row .site-menu-row-text {
  flex: 1;
}

.view-menu-check {
  flex: none;
  width: 18px;
  height: 18px;
}

.view-empty {
  margin-top: 8px;
  margin-bottom: 24px;
  color: var(--cocoso-mylla-soft);
  font-style: italic;
  text-align: center;
}

.view-empty button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cocoso-colors-theme-700);
  font: inherit;
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 720px) {
  /* Narrow: the switch under the heading instead of beside it */
  .page-heading-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .page-heading-aside {
    position: static;
    translate: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 599px) {
  /* Phone: the strip scrolls sideways, starting at the gutter */
  .kind-strip {
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-padding: 0 var(--cocoso-gutter);
    scrollbar-width: none;
  }

  .kind-strip::-webkit-scrollbar {
    display: none;
  }
}

/* === Card grid (föreningar) === */

.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.card-grid > * {
  min-width: 0;
}

@media (max-width: 599px) {
  .card-grid {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 379px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Event cards carry a date label, a tag and a title on the picture, and
   need the whole width of a phone. */
@media (max-width: 599px) {
  .card-grid.card-grid-wide {
    grid-template-columns: 1fr;
  }
}

/* === Filter chips === */

.filter-chip {
  display: inline-flex;
  align-items: center;
  margin: 3px;
  border-radius: 999px;
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.filter-chip-button {
  all: unset;
  cursor: pointer;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.filter-chip-button:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

.filter-chip:not(.is-checked):hover {
  background: var(--cocoso-colors-theme-100) !important;
}

.filter-chip-remove {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border-radius: 999px;
  color: inherit;
  opacity: 0.7;
}

.filter-chip-remove:hover {
  background: rgba(0, 0, 0, 0.08);
  opacity: 1;
}

/* === New entry helper / empty state === */

.new-entry-helper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 315px;
  padding: 28px 22px;
  border-radius: var(--cocoso-radius-kort);
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-mylla);
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.new-entry-helper.is-small {
  min-height: 240px;
}

.new-entry-helper:hover {
  transform: translateY(-3px);
  box-shadow: var(--cocoso-skugga-kort);
}

.new-entry-helper h3 {
  margin: 6px 0 0;
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.new-entry-helper p {
  margin: 0;
  max-width: 34ch;
  color: var(--cocoso-mylla-soft);
  font-size: 14px;
  line-height: 1.45;
}

.new-entry-helper-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-top: 16px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-500);
  color: #fff;
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 700;
}

/* === Place landing === */

/* One rhythm down the page: intro, then each section 56px apart. */
.landing-intro {
  margin-bottom: 40px;
  text-align: center;
}

.landing-section {
  margin-bottom: 56px;
}

.landing-section:last-of-type {
  margin-bottom: 8px;
}

.landing-head {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.landing-head-icon {
  flex: 0 0 auto;
}

.landing-title {
  flex: 1 1 auto;
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  min-width: 0;
}

.landing-title-place {
  color: var(--cocoso-mylla-soft);
  font-size: 1.1rem;
  font-weight: 500;
  white-space: nowrap;
}

.landing-more {
  align-self: center;
  background: var(--cocoso-papper);
  border-radius: 999px;
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-colors-theme-800);
  flex: 0 0 auto;
  font-family: var(--cocoso-font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 7px 14px;
  text-decoration: none;
  white-space: nowrap;
}

.landing-more:hover {
  background: var(--cocoso-colors-theme-50);
  text-decoration: none;
}

.landing-more:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

.landing-empty {
  color: var(--cocoso-mylla-soft);
  margin: 0;
}

@media (max-width: 959px) {
  .landing-intro {
    margin-bottom: 32px;
  }

  .landing-section {
    margin-bottom: 44px;
  }

  .landing-head {
    gap: 10px;
  }

  .landing-head-icon {
    width: 36px;
    height: 36px;
  }

  .landing-title {
    font-size: 1.3rem;
  }

  .landing-title-place {
    display: block;
    font-size: 0.95rem;
    white-space: normal;
  }
}

/* === Place landing hero === */

.location-hero-stamp {
  background: rgba(255, 253, 247, 0.92);
  box-shadow: inset 0 0 0 2.5px var(--stamp-ink),
    inset 0 0 0 7px rgba(255, 253, 247, 0.92),
    inset 0 0 0 8.5px var(--stamp-ink), var(--cocoso-skugga-kort);
}

.text-content blockquote {
  border-left: 4px solid var(--cocoso-tegel);
  font-family: var(--cocoso-font-display);
  font-style: italic;
}

/* === Footer === */

.site-footer {
  margin-top: 48px;
  padding: 44px 0 40px;
  background-color: var(--cocoso-season-golv);
  border-top: 1px solid var(--cocoso-linje);
  color: var(--cocoso-mylla);
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-sizing: border-box;
  max-width: calc(var(--cocoso-page) + 2 * var(--cocoso-gutter));
  margin: 0 auto;
  padding: 0 var(--cocoso-gutter);
}

.site-footer-text {
  min-width: 0;
  max-width: 640px;
}

.site-footer-name {
  margin: 0;
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: 24px;
  font-weight: 600;
  color: var(--cocoso-colors-theme-800);
}

/* Logged in: a quiet line under the pills, name linking to one's admin */
.site-footer-account {
  margin: 12px 0 0;
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
}

.site-footer-account a {
  color: var(--cocoso-colors-theme-700);
  font-weight: 600;
}

.site-footer-logout {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cocoso-colors-theme-700);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.site-footer-byline {
  margin: 18px 0 0;
  max-width: 52ch;
  color: var(--cocoso-mylla-soft);
  font-size: 14px;
  line-height: 1.5;
}

.site-footer-byline p {
  margin: 0;
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 16px;
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 600;
}

.site-footer-nav a {
  color: var(--cocoso-colors-theme-700);
}

.site-footer-nav a:hover {
  text-decoration: underline;
}

.site-footer-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* About, feedback and languages as paper pills with line icons, like the
   header */
.site-footer-pill,
.site-footer-tools .cocoso-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-colors-theme-800);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 600;
}

.site-footer-pill {
  text-decoration: none;
}

.site-footer-pill:hover,
.site-footer-tools .cocoso-button:hover {
  background: var(--cocoso-papper);
  color: var(--cocoso-colors-theme-800);
  box-shadow: var(--cocoso-skugga), 0 0 0 2px var(--cocoso-colors-theme-200);
}

.site-footer-langs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-colors-theme-800);
}

.site-footer-langs-icon {
  display: inline-flex;
  margin-right: 6px;
  color: var(--cocoso-colors-theme-700);
}

.site-footer-lang {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.site-footer-lang:hover {
  color: var(--cocoso-colors-theme-800);
  background: var(--cocoso-colors-theme-100);
}

.site-footer-lang.is-active {
  background: var(--cocoso-colors-theme-500);
  color: #fff;
}

.site-footer-lang:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 1px;
}

/* The marks: the municipality's, and on a second card Uddebo Makerspace's
   with Maskinrepubliken's wordmark under it, in ink on paper. The
   municipality and Maskinrepubliken link to their sites. */
.site-footer-marks {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.site-footer-mark {
  display: flex;
  justify-content: center;
  padding: 14px 18px;
  border-radius: var(--cocoso-radius-kort);
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: #1c1613;
}

.site-footer-mark img {
  display: block;
  height: 56px;
  width: auto;
}

/* The makers' card: the square mark above, the wordmark under it */
.site-footer-mark-makers {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.site-footer-mark-makers > a {
  display: block;
  line-height: 0;
}

.site-footer-mark-makers > a:first-child img {
  height: 84px;
  width: auto;
}

.site-footer-mark-makers > a:last-child img {
  width: 128px;
  height: auto;
}

@media (max-width: 720px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 16px;
  }

  .site-footer {
    padding: 32px 0 36px;
  }

  .site-footer-marks {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .site-footer-mark-makers > a:first-child img {
    height: 64px;
  }
}

/* === Motion and focus === */

:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

@keyframes card-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sexy-thumb-container,
  #main-content-container article,
  .new-entry-helper {
    animation: card-in 0.45s ease both;
  }

  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

::selection {
  background: var(--cocoso-colors-theme-200);
  color: var(--cocoso-colors-theme-800);
}

/* === Print ===
   An event page or a list printed as a notice: the content on white, no
   header, menus, shelf or footer, cards kept whole across pages. */
@media print {
  .skip-link,
  .site-header,
  .site-footer,
  .cocoso-slide,
  #slide-widget,
  .new-entry-helper,
  .filter-chip,
  #filtrer-sorter,
  .szh-accordion__item-btn,
  .rbc-toolbar .rbc-btn-group,
  .cal-toolbar-end,
  main form {
    display: none !important;
  }

  html,
  body,
  .home-hero,
  .home-hero.vav {
    background: #fff !important;
    background-image: none !important;
    color: #000;
  }

  main {
    padding-top: 0 !important;
  }

  article,
  .card-grid > *,
  .rbc-agenda-view tr {
    break-inside: avoid;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .threed-icon,
  .home-hero-icons,
  .home-hero-icon {
    display: none !important;
  }
}

/* === Lightbox (generic/Lightbox.tsx) === */

/* A picture that opens large: the whole picture is the button */
.lightbox-trigger {
  all: unset;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.lightbox-trigger > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox-trigger:focus-visible {
  outline: 3px solid var(--cocoso-colors-theme-500);
  outline-offset: -3px;
}

/* "1 / 4" on the main picture when the page has more */
.lightbox-count-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--cocoso-panel-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 64px 72px;
  background: rgba(16, 28, 14, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: pan-y;
  animation: lightbox-in 0.18s ease-out;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  object-fit: contain;
  user-select: none;
  animation: lightbox-image-in 0.2s ease-out;
}

@keyframes lightbox-image-in {
  from {
    opacity: 0;
    scale: 0.98;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/* Paper islands on the dark, like the header's buttons */
.lightbox-button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-colors-theme-700);
  cursor: pointer;
}

.lightbox-button:hover {
  background: var(--cocoso-colors-theme-100);
}

.lightbox-button:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

.lightbox-close {
  top: 14px;
  right: 14px;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  translate: 0 -50%;
}

.lightbox-prev {
  left: 14px;
}

.lightbox-next {
  right: 14px;
}

.lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  translate: -50% 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .lightbox {
    padding: 64px 12px 72px;
  }

  /* on a phone the arrows sit at the bottom beside the count */
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 12px;
    translate: none;
  }

  .lightbox-prev {
    left: 12px;
  }

  .lightbox-next {
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-image {
    animation: none;
  }
}

/* --- the entry form sheet ---
   Every "new" and "edit" form opens in one pane of glass over the page, as
   large as the screen allows: the page blurs through it, a thin light rim
   and a soft shadow lift it, like the header's islands when scrolled. Save
   and Cancel live in the sticky footer, beside what saving is up to. */

.entry-sheet-root {
  --entry-sheet-inset: 16px;
  --entry-sheet-measure: 1600px;
  --entry-sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  padding: var(--entry-sheet-inset);
  visibility: visible;
}

.entry-sheet-root[data-state='closed'] {
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.26s;
}

.entry-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 48, 42, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.4s ease;
}

.entry-sheet-root[data-state='closed'] .entry-sheet-backdrop {
  opacity: 0;
  transition-duration: 0.26s;
}

.entry-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(var(--cocoso-radius-meny) + 6px);
  background: color-mix(in srgb, var(--cocoso-papper) 80%, transparent);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(30, 50, 25, 0.08), 0 24px 64px -12px rgba(30, 50, 25, 0.35);
  color: var(--cocoso-mylla);
  outline: none;
  transform-origin: 50% 70%;
  transition: opacity 0.45s var(--entry-sheet-ease),
    transform 0.55s var(--entry-sheet-ease);
}

.entry-sheet-root[data-state='closed'] .entry-sheet {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition: opacity 0.22s ease-in, transform 0.26s ease-in;
}

/* the three parts follow the pane in, one after the other */
.entry-sheet-head,
.entry-sheet-inner,
.entry-sheet-foot {
  transition: opacity 0.5s var(--entry-sheet-ease),
    translate 0.6s var(--entry-sheet-ease);
}
.entry-sheet-head {
  transition-delay: 0.08s;
}
.entry-sheet-inner {
  transition-delay: 0.14s;
}
.entry-sheet-foot {
  transition-delay: 0.2s;
}
.entry-sheet-root[data-state='closed'] .entry-sheet-head,
.entry-sheet-root[data-state='closed'] .entry-sheet-inner {
  opacity: 0;
  translate: 0 14px;
}
.entry-sheet-root[data-state='closed'] .entry-sheet-foot {
  opacity: 0;
  translate: 0 100%;
}
/* leaving, they stay put while the pane fades, and reset once it is gone */
.entry-sheet-root[data-state='closed']
  :is(.entry-sheet-head, .entry-sheet-inner, .entry-sheet-foot) {
  transition: opacity 0s linear 0.26s, translate 0s linear 0.26s;
}

.entry-sheet-head {
  position: relative;
  flex: none;
  padding: 22px 72px 16px 28px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--cocoso-linje) 70%, transparent);
}

.entry-sheet-close {
  position: absolute;
  top: 50%;
  right: 20px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-mylla);
  cursor: pointer;
  translate: 0 -50%;
}

.entry-sheet-close:hover:not(:disabled) {
  background: var(--cocoso-colors-theme-100);
}

.entry-sheet-close:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.entry-sheet-title {
  max-width: var(--entry-sheet-measure);
  margin: 0 auto;
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
}

.entry-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px 40px;
  container: entry-sheet / inline-size;
}

.entry-sheet-inner {
  max-width: var(--entry-sheet-measure);
  margin: 0 auto;
}

.entry-sheet-foot {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--cocoso-linje) 70%, transparent);
  background: color-mix(in srgb, var(--cocoso-papper) 55%, transparent);
}

.entry-sheet-progress {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
}
.entry-sheet-progress > span {
  display: block;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: var(--cocoso-colors-theme-500);
  transition: width 0.5s var(--entry-sheet-ease);
}

.entry-sheet-status {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  animation: entry-sheet-status-in 0.3s ease-out;
}

.entry-sheet-status-mark {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cocoso-colors-theme-500);
}
.entry-sheet-status[data-status='creating'] .entry-sheet-status-mark,
.entry-sheet-status[data-status='uploading'] .entry-sheet-status-mark,
.entry-sheet-status[data-status='sending'] .entry-sheet-status-mark {
  animation: entry-sheet-pulse 1s ease-in-out infinite;
}
.entry-sheet-status[data-status='success'] {
  color: var(--cocoso-colors-theme-700);
}
.entry-sheet-status[data-status='blocked'] {
  color: var(--cocoso-lingon);
}
.entry-sheet-status[data-status='blocked'] .entry-sheet-status-mark {
  background: var(--cocoso-lingon);
}

.entry-sheet-actions {
  flex: none;
  display: flex;
  gap: 10px;
  margin-left: auto;
}

@keyframes entry-sheet-pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

@keyframes entry-sheet-status-in {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}

/* on a phone the pane fills the screen, edge to edge */
@media (max-width: 720px) {
  .entry-sheet-root {
    --entry-sheet-inset: 0px;
  }
  .entry-sheet {
    border-radius: 0;
  }
  .entry-sheet-head {
    padding: 16px 60px 12px 16px;
  }
  .entry-sheet-close {
    right: 12px;
  }
  .entry-sheet-body {
    padding: 16px 16px 32px;
  }
  .entry-sheet-foot {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .entry-sheet-status:empty {
    display: none;
  }
  .entry-sheet-actions {
    flex: 1 1 100%;
  }
  .entry-sheet-actions > * {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-sheet,
  .entry-sheet-head,
  .entry-sheet-inner,
  .entry-sheet-foot,
  .entry-sheet-backdrop {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
  .entry-sheet-root[data-state='closed'] .entry-sheet {
    transform: none;
  }
}

/* --- the entry form's columns ---
   With room for it, what matters most (the name, the text, the pictures,
   the dates) takes the wide main column, and the details sit beside it on
   a pane of their own. On a wide screen the details flow in two columns.
   Narrow, it is one column: the main fields first, then the details. */

.entry-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 48px;
  align-items: start;
}

.entry-form-side {
  padding: 8px 22px;
  border-radius: var(--cocoso-radius-kort);
  background: color-mix(in srgb, var(--cocoso-papper) 50%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 0 1px color-mix(in srgb, var(--cocoso-linje) 55%, transparent);
}

/* spacing as padding, so both columns of details start level */
.entry-form-side > * {
  break-inside: avoid;
  margin-block: 0 !important;
  padding-block: 14px;
}

/* the name, set large like the title it becomes */
.entry-form-lead .cocoso-input {
  height: auto;
  padding-block: 0.6rem;
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 60;
  font-size: 1.6rem;
  font-weight: 600;
}

@container entry-sheet (min-width: 900px) {
  .entry-form-grid[data-columns='two'] {
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  }
}

@container entry-sheet (min-width: 1360px) {
  .entry-form-grid[data-columns='two'] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr);
  }
  .entry-form-side {
    columns: 2;
    column-gap: 36px;
  }
}

/* one column of content still reads best at a measure */
.entry-form-grid[data-columns='one'] {
  max-width: 960px;
  margin-inline: auto;
}

/* === Event form: organizer and where (pages/activities/form) === */

/* A read-only line in a form, e.g. "Du (Anna)" as organizer */
.form-static {
  margin: 0;
  font-family: var(--cocoso-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--cocoso-mylla);
}

/* What the choice brings in: the profile's details, or the fields */
.form-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-preview-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--cocoso-radius-falt);
  background: var(--cocoso-colors-theme-50);
  list-style: none;
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
  color: var(--cocoso-mylla);
}

.form-preview-lines li {
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-word;
}

.form-preview-lines svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--cocoso-colors-theme-700);
}

.form-preview-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--cocoso-radius-falt);
  background: color-mix(in srgb, var(--cocoso-tegel) 10%, transparent);
  color: var(--cocoso-mylla);
  font-size: 14px;
}

.form-preview-note {
  margin: 0;
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
  line-height: 1.4;
}

.form-preview-note a {
  color: var(--cocoso-colors-theme-700);
  font-weight: 600;
}

/* --- Settings cards: organizers, place, booking --- */

.form-card {
  position: relative;
  margin: 0 0 16px;
  padding: 16px 16px 6px;
  border-radius: var(--cocoso-radius-kort);
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
}

.form-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--cocoso-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cocoso-mylla);
}

.form-card-body > * + * {
  margin-top: 4px;
}

/* --- A modern on/off switch --- */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0 12px;
}

.toggle-row + .toggle-row {
  border-top: 1px solid var(--cocoso-linje);
}

/* a number with − and + on either side, in the chips' pill */
.stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 36px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-50);
  box-shadow: inset 0 0 0 1px var(--cocoso-linje);
}

.stepper button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cocoso-colors-theme-700);
  cursor: pointer;
}

.stepper button:hover:not(:disabled) {
  background: var(--cocoso-colors-theme-100);
}

.stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.stepper input {
  width: 3.2em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.stepper input:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-700);
  outline-offset: 2px;
  border-radius: 6px;
}

.toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toggle-label {
  font-family: var(--cocoso-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--cocoso-mylla);
  cursor: pointer;
}

.toggle-helper {
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
  line-height: 1.4;
}

.toggle-switch {
  position: relative;
  flex: none;
  display: block;
  width: 46px;
  min-width: 46px;
  height: 28px;
  margin: 0;
  padding: 0;
  line-height: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-200, #d9e3cc);
  box-shadow: inset 0 1px 2px rgba(30, 50, 25, 0.18);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.toggle-switch.is-on {
  background: var(--cocoso-colors-theme-700);
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: translate 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.toggle-switch.is-on .toggle-knob {
  translate: 18px 0;
}

.toggle-switch:focus-visible {
  outline: 2px solid var(--cocoso-colors-theme-500);
  outline-offset: 2px;
}

/* --- People and places as cards with a picture --- */

.person-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--cocoso-colors-theme-700);
  border-radius: 999px;
  background: var(--cocoso-colors-theme-700);
  box-sizing: border-box;
}

.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-avatar.is-initial {
  border-color: var(--cocoso-linje);
  background: var(--cocoso-papper);
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-display);
  font-weight: 700;
}

/* a contact person's details under their name, as the place's address */
.contact-card-lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
}

.contact-card-lines > span {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-card-lines svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--cocoso-tegel);
}

.person-card,
.place-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--cocoso-radius-falt);
  background: var(--cocoso-colors-theme-50);
}

.person-card-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.person-card-name {
  overflow: hidden;
  font-family: var(--cocoso-font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--cocoso-mylla);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card-note {
  overflow: hidden;
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card-action {
  flex: none;
}

.person-card-button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-papper);
  box-shadow: var(--cocoso-skugga);
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.person-card-button:hover {
  background: var(--cocoso-colors-theme-100);
}

.person-card-remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cocoso-mylla-soft);
  cursor: pointer;
}

.person-card-remove:hover {
  background: var(--cocoso-colors-theme-100);
  color: var(--cocoso-mylla);
}

.person-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* "+ Lägg till medarrangör", "Välj en plats": a dashed invitation */
.person-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px dashed var(--cocoso-colors-theme-300, #b9c9a5);
  border-radius: var(--cocoso-radius-falt);
  background: transparent;
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.person-add:hover {
  background: var(--cocoso-colors-theme-50);
}

.person-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.place-thumb {
  display: grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cocoso-colors-theme-700);
  color: #fff;
}

.place-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- The searchable picker --- */

.picker-anchor {
  position: relative;
}

.picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 6px;
  border: 1px solid var(--cocoso-linje);
  border-radius: var(--cocoso-radius-meny);
  background: color-mix(in srgb, var(--cocoso-papper) 97%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--cocoso-skugga-meny);
  animation: site-menu-in 0.16s ease-out;
}

.picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-bottom: 4px;
  padding: 0 10px;
  border-radius: var(--cocoso-radius-falt);
  background: var(--cocoso-colors-theme-50);
  color: var(--cocoso-mylla-soft);
}

.picker-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 15px;
  outline: none;
}

.picker-list {
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--cocoso-radius-falt);
  background: none;
  text-align: left;
  cursor: pointer;
}

/* the picker in place, as part of the form: a framed search and list */
.picker-inline {
  padding: 6px;
  border-radius: var(--cocoso-radius-falt);
  background: var(--cocoso-papper);
  box-shadow: inset 0 0 0 1px var(--cocoso-linje);
}

.picker-inline .picker-list {
  max-height: 240px;
}

.picker-row.is-selected {
  box-shadow: inset 0 0 0 2px var(--cocoso-colors-theme-700);
}

.picker-row:hover {
  background: var(--cocoso-colors-theme-50);
}

.picker-row.is-active {
  background: var(--cocoso-colors-theme-100);
}

.picker-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.picker-row-title {
  overflow: hidden;
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-row-detail {
  overflow: hidden;
  color: var(--cocoso-mylla-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-empty {
  margin: 0;
  padding: 12px;
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-display);
  font-style: italic;
  text-align: center;
}

/* --- The kind of event as 3D tiles --- */

.kind-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  margin: 8px 0 10px;
}

.kind-picker-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border: 0;
  border-radius: var(--cocoso-radius-falt);
  background: var(--cocoso-colors-theme-50);
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  /* lifted with top, not transform (see .home-section) */
  position: relative;
  top: 0;
  transition: background-color 0.15s ease, top 0.15s ease;
}

.kind-picker-tile .threed-icon {
  width: 36px;
  height: 36px;
}

.kind-picker-tile:hover {
  top: -1px;
}

.kind-picker-tile.is-active {
  background: var(--cocoso-colors-theme-700);
  color: #fff;
}

/* The entry form's side column holds the event form's cards on its own:
   no glass frame around them (a card in a card), and room between them
   (the column's own rule zeroes margins on its children). */
.entry-form-side:has(> .form-card) {
  padding: 0;
  background: none;
  box-shadow: none;
}

.entry-form-side > .form-card {
  margin-block: 0 18px !important;
  padding: 18px 18px 8px;
}

/* --- A choice as a row of chips (ChoiceChips.tsx) --- */

.choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-50);
  box-shadow: inset 0 0 0 1px var(--cocoso-linje);
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.choice-chip:has(> .person-avatar) {
  padding-left: 4px;
}

.choice-chip > svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.choice-chip:hover:not(:disabled) {
  background: var(--cocoso-colors-theme-100);
}

.choice-chip.is-chosen {
  background: var(--cocoso-colors-theme-700);
  box-shadow: none;
  color: var(--cocoso-papper);
}

.choice-chip:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.choice-description {
  margin: 0;
  color: var(--cocoso-mylla-soft);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  line-height: 1.4;
}

/* its parts sit in the choice's column, so the line about the choice
   comes right under a preview, before any link to change it */
.choice-body {
  display: contents;
}

.choice-description {
  order: 1;
}

.choice-body > .form-preview-link {
  order: 2;
}

/* fields under a choice sit close: FormField's own margins
   (my="4", my="2") are for fields on the page */
.choice-body :has(> div > .form-field-label) {
  margin-block: 2px !important;
}

.choice-body > * {
  margin-block: 0 !important;
}

.choice-body .form-field-label,
.choice-body :has(> div > .form-field-label) > div:first-child p {
  font-size: 13px;
  line-height: 1.3;
}

.choice-body :has(> div > .form-field-label) > div:not(:first-child) {
  padding-top: 4px !important;
}

/* "+ Lägg till medarrangör": small, at the foot of the card */
.person-add-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.person-add-small:hover:not(:disabled) {
  background: var(--cocoso-colors-theme-50);
}

.person-add-small:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.organizer-people {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
}

.organizer-contact {
  margin: 18px 0 10px;
}

.organizer-contact > .form-card-title {
  margin-bottom: 10px;
}

.organizer-foot {
  position: absolute;
  top: 14px;
  right: 12px;
}

.organizer-foot > .picker-popover {
  left: auto;
  right: 0;
  width: min(320px, calc(100vw - 56px));
}

.form-preview-link {
  align-self: flex-start;
  color: var(--cocoso-colors-theme-700);
  font-family: var(--cocoso-font-ui);
  font-size: 13px;
  font-weight: 700;
}

.where-fields {
  padding: 4px 0 12px;
}

/* Start page hero, text version (the default): a large title with the
   part after the short name in a soft green, the tagline, and a beta
   badge beneath */
.home-hero.is-text .home-hero-text {
  flex-basis: 100%;
  max-width: 820px;
}

.home-hero.is-text .home-hero-eyebrow {
  margin-bottom: 14px;
}

/* A glass pill with a 3D flask tipping out of its left end */
.home-hero-beta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 7px 20px 7px 8px;
  border: 1px solid rgba(30, 79, 27, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px -14px rgba(30, 79, 27, 0.45);
  color: #4b4239;
  font-size: 14px;
  line-height: 1.35;
}

.home-hero-beta-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fffdf6, #f1e6c6);
  box-shadow: inset 0 0 0 1px rgba(30, 79, 27, 0.1);
}

.home-hero-beta-icon .threed-icon {
  width: 50px;
  height: 50px;
  /* 10px wider than the disc: 5px out on each side, so it stays centred */
  margin: -14px -5px 0;
  rotate: -14deg;
  /* the tilt swings the heavy bulb right; nudged back so it looks centred */
  translate: -5% 0;
  filter: drop-shadow(0 5px 6px rgba(60, 30, 70, 0.3));
}

.home-hero-beta strong {
  margin-right: 6px;
  color: var(--cocoso-colors-theme-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 699px) {
  .home-hero-beta {
    border-radius: 24px;
    font-size: 13px;
  }
}

.home-hero.is-text .home-hero-title {
  /* "Tranemokalendern" on one line, as large as the column allows */
  font-size: min(104px, 12.4cqi);
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: nowrap;
}

.home-hero-title-rest {
  /* the theme's green, toned down towards the hero's warm grey */
  color: color-mix(in oklab, var(--cocoso-colors-theme-500) 62%, #8c8571);
}

.home-hero.is-text .home-hero-tagline {
  margin-top: 22px;
  max-width: 44ch;
  font-size: 19px;
  line-height: 1.5;
}

@media (max-width: 959px) {
  .home-hero.is-text .home-hero-tagline {
    font-size: 17px;
  }
}

/* Start page hero, logo version (?hem=mats): the word logo in place of
   the title */
.home-hero.is-logo .home-hero-text {
  flex-basis: 100%;
  max-width: 760px;
}

.home-hero-logo {
  margin: 0;
  line-height: 0;
}

.home-hero.is-logo .home-hero-tagline {
  margin-top: 24px;
}

.home-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* === Cookie notice (layout/CookieNotice.tsx) === */

/* A glass card at the bottom left on a first visit, the beta flask
   tipping out of its corner */
.cookie-notice {
  position: fixed;
  z-index: 1000;
  left: var(--cocoso-gutter);
  bottom: var(--cocoso-gutter);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 2 * var(--cocoso-gutter)));
  padding: 20px 22px 18px 18px;
  border: 1px solid rgba(30, 79, 27, 0.14);
  border-radius: 20px;
  background: rgba(253, 251, 244, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -24px rgba(30, 50, 25, 0.55);
  color: #4b4239;
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
  line-height: 1.5;
  animation: cookie-notice-in 0.35s ease-out both;
}

@keyframes cookie-notice-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.cookie-notice-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fffdf6, #f1e6c6);
  box-shadow: inset 0 0 0 1px rgba(30, 79, 27, 0.1);
}

.cookie-notice-icon .threed-icon {
  width: 56px;
  height: 56px;
  margin: -16px -4px 0;
  rotate: -14deg;
  translate: -5% 0;
  filter: drop-shadow(0 5px 6px rgba(60, 30, 70, 0.3));
}

.cookie-notice-body p {
  margin: 0 0 8px;
}

.cookie-notice-title {
  margin: 2px 0 8px;
  color: var(--cocoso-colors-theme-800);
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 100;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.cookie-notice-beta {
  color: var(--cocoso-season-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cookie-notice-body .cookie-notice-cookies {
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
}

.cookie-notice-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 4px;
}

.cookie-notice-links a,
.cookie-notice-links button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cocoso-colors-theme-700);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cookie-notice-ok {
  grid-column: 2;
  justify-self: start;
  margin-top: 12px;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-700);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cookie-notice-ok:hover {
  background: var(--cocoso-colors-theme-800);
}

@media (max-width: 599px) {
  .cookie-notice {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 16px 16px 14px 14px;
    gap: 4px 12px;
  }

  .cookie-notice-ok {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

@media print {
  .cookie-notice {
    display: none;
  }
}

/* === Feedback form (layout/FeedbackForm.tsx) === */

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--cocoso-font-ui);
}

.feedback-intro {
  margin: 0;
  color: #4b4239;
  font-size: 15px;
  line-height: 1.5;
}

.feedback-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.feedback-kinds legend,
.feedback-field > span {
  margin-bottom: 8px;
  padding: 0;
  color: var(--cocoso-mylla);
  font-size: 14px;
  font-weight: 700;
}

.feedback-field > span small {
  color: var(--cocoso-mylla-soft);
  font-weight: 500;
}

.feedback-kind {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1.5px solid rgba(30, 79, 27, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--cocoso-mylla);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.feedback-kind:hover {
  transform: translateY(-2px);
}

.feedback-kind input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-kind .threed-icon {
  width: 44px;
  height: 44px;
  transition: transform 0.2s;
}

.feedback-kind.is-chosen {
  border-color: var(--cocoso-colors-theme-700);
  background: var(--cocoso-colors-theme-50, #f1f6ea);
  box-shadow: 0 8px 20px -14px rgba(30, 79, 27, 0.6);
}

.feedback-kind.is-chosen .threed-icon {
  transform: scale(1.12) rotate(-6deg);
}

.feedback-kind:has(input:focus-visible) {
  outline: 2px solid var(--cocoso-colors-theme-700);
  outline-offset: 2px;
}

.feedback-field {
  display: flex;
  flex-direction: column;
}

.feedback-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.feedback-error {
  margin: 0;
  color: #a6482a;
  font-size: 14px;
  font-weight: 600;
}

.feedback-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.feedback-actions small {
  color: var(--cocoso-mylla-soft);
  font-size: 13px;
  line-height: 1.4;
}

.feedback-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 16px;
  font-family: var(--cocoso-font-ui);
  text-align: center;
}

.feedback-thanks .threed-icon {
  width: 96px;
  height: 96px;
  animation: feedback-thanks-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

@keyframes feedback-thanks-in {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-12deg);
  }
}

.feedback-thanks h3 {
  margin: 8px 0 0;
  color: var(--cocoso-mylla);
  font-family: var(--cocoso-font-display);
  font-variation-settings: 'SOFT' 100;
  font-size: 28px;
}

.feedback-thanks p {
  max-width: 34ch;
  margin: 0 0 14px;
  color: #4b4239;
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 479px) {
  .feedback-kind {
    padding: 12px 4px 10px;
    font-size: 13px;
  }

  .feedback-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
  }
}

/* === View as (layout/ViewAsBanner.tsx) === */

/* While an admin views the site as a member: a dark pill floating at the
   foot of the screen, out of the way of the header */
.view-as-bar {
  position: fixed;
  z-index: 1300;
  left: 50%;
  bottom: 20px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  max-width: calc(100vw - 2 * var(--cocoso-gutter));
  padding: 8px 8px 8px 10px;
  border-radius: 999px;
  background: var(--cocoso-colors-theme-800);
  box-shadow: 0 18px 40px -16px rgba(20, 35, 18, 0.7);
  color: #fff;
  font-family: var(--cocoso-font-ui);
  font-size: 14px;
  line-height: 1.3;
  animation: view-as-in 0.35s ease-out both;
}

@keyframes view-as-in {
  from {
    opacity: 0;
    translate: -50% 16px;
  }
}

.view-as-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.view-as-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.view-as-text strong {
  font-weight: 800;
}

.view-as-role {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.view-as-back {
  flex: none;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--cocoso-colors-theme-800);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.view-as-back:hover {
  background: #f1e6c6;
}

.view-as-back:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (max-width: 599px) {
  .view-as-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    translate: none;
    max-width: none;
    border-radius: 20px;
    flex-wrap: wrap;
    padding: 10px 10px 10px 12px;
  }

  @keyframes view-as-in {
    from {
      opacity: 0;
    }
  }

  .view-as-text {
    flex: 1 1 0;
  }

  .view-as-back {
    flex: 1 1 100%;
  }
}

@media print {
  .view-as-bar {
    display: none;
  }
}