/* The public pages' one stylesheet (M4). The colours are the application's
   tokens (frontend/src/styles/tokens.css), repeated here because these pages
   are served without the application's bundle. No page carries a style
   attribute or a style element: the policy is `default-src 'self'`. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* The same address the page preloads. A changed file gets a new name. */
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --radius: 12px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
}

a {
  color: var(--brand);
}

a:hover {
  color: var(--brand-hover);
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  line-height: 1.2;
}

h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.3rem;
}

h3 {
  margin: 0;
  font-size: 1.05rem;
}

.ts-skip {
  position: absolute;
  left: -999px;
}

.ts-skip:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
}

/* The bar (10 October 2026): the mark and the name on the left; on the right
   the operators' page, the sign-in and the language, and nothing else. Its
   content keeps to the landing page's width. */
.ts-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.8rem max(1.25rem, calc((100% - 1180px) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ts-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.ts-brand:hover {
  color: var(--text);
}

/* The mark, here and not in the page: a page's images are its content. */
.ts-brand::before {
  content: '';
  width: 2rem;
  height: 2rem;
  background: url('/static/mark.svg') center / contain no-repeat;
}

.ts-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.ts-nav-button {
  padding: 0.45rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.ts-nav-button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* The two languages as one control: the one being read, and the other. */
.ts-lang {
  display: inline-flex;
  padding: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.ts-lang > * {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}

.ts-lang [aria-current] {
  background: var(--brand);
  color: #ffffff;
}

.ts-lang a:hover {
  color: var(--text);
}

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

.ts-crumbs,
.ts-main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.ts-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.ts-crumbs li + li::before {
  content: '›';
  margin-right: 0.35rem;
}

.ts-main {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.ts-lead {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.ts-muted {
  color: var(--muted);
}

.ts-status {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.ts-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 1.25rem 0;
}

.ts-button {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  background: var(--brand);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.ts-button:hover {
  background: var(--brand-hover);
  color: #ffffff;
}

/* A second button: an action that matters on the page and is not its one
   primary action (the request). Outlined, so the two never look alike. */
.ts-button--ghost {
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--brand);
}

.ts-button--ghost:hover {
  background: var(--brand);
  color: #ffffff;
}

/* --- The landing page (10 October 2026) -----------------------------------
   A first screen from edge to edge, with the bar lying over it; then the
   sections, in a column 1180px wide. */
.ts-main--bleed {
  max-width: none;
  padding: 0 0 3.5rem;
}

.ts-home .ts-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  background: transparent;
  border-bottom: 0;
}

.ts-landing {
  display: grid;
  gap: 3rem;
}

.ts-landing > section:not(.ts-hero) {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

.ts-landing section > h2,
.ts-landing section > div > h2 {
  margin-top: 0;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

.ts-landing-intro {
  max-width: 44rem;
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.ts-hero {
  padding: 6.5rem 1.25rem 3rem;
  background: linear-gradient(180deg, #e0ecff 0%, #eef4ff 55%, var(--bg) 100%);
}

.ts-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.ts-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.ts-accent {
  color: var(--brand);
  /* The two words stay together when the heading breaks. */
  white-space: nowrap;
}

.ts-landing-lead {
  max-width: 34rem;
  margin: 0 0 1.75rem;
  font-size: 1.15rem;
}

/* The search: one field and its button, in one white box. The suggested
   addresses, when the script has some, hang under the whole box. */
.ts-search {
  position: relative;
  max-width: 36rem;
}

.ts-search label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.ts-search-row {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgb(15 23 42 / 10%);
}

.ts-search-row:focus-within {
  border-color: var(--brand);
  box-shadow:
    0 0 0 3px rgb(37 99 235 / 20%),
    0 12px 32px rgb(15 23 42 / 10%);
}

/* The ring is the box's: the field inside it draws none of its own. */
.ts-search input[type='text']:focus {
  outline: none;
}

.ts-search-field {
  flex: 1;
  min-width: 0;
}

.ts-search input[type='text'] {
  width: 100%;
  height: 100%;
  padding: 0.75rem 0.9rem;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}

.ts-search .ts-button {
  padding: 0.8rem 1.4rem;
  border-radius: 12px;
  font-size: 1.05rem;
  white-space: nowrap;
}

.ts-suggest {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 5;
  margin: 0.4rem 0 0;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(15 23 42 / 12%);
  list-style: none;
}

.ts-suggest li {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
}

.ts-suggest li[aria-selected='true'],
.ts-suggest li:hover {
  background: #eff6ff;
}

.ts-hero-figures {
  max-width: 36rem;
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
}

.ts-hero-map {
  margin: 0;
}

.ts-landing-map-frame {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgb(37 99 235 / 14%);
}

/* The frame's own two images, not the tiles the script puts inside it. */
.ts-landing-map-frame > img {
  display: block;
  width: 100%;
  height: auto;
}

/* The same size as the map under it, so a dot is where its town is. */
.ts-landing-map-frame .ts-landing-map-dots {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* The map to move and zoom, which the script lays over the two images
   (`site.js`, 3). The images keep giving the frame its size. A layer of its
   own, so that nothing inside it can come over the bar. Until its first tiles
   are in it shows the image through; then it covers it. */
.ts-landing-map-frame .ts-landing-map-live {
  position: absolute;
  inset: 0;
  z-index: 0;
  font: inherit;
  background: transparent;
}

/* The library adds the light of two tiles where they overlap, which it uses
   for its fade; with the pixel of overlap the script gives them (`site.js`)
   that would draw a white line along every edge. */
.ts-landing-map-frame .ts-landing-map-live img.leaflet-tile {
  mix-blend-mode: normal;
}

.ts-landing-map-frame--live .ts-landing-map-dots {
  display: none;
}

.ts-landing-map-frame--loaded .ts-landing-map-live {
  background: #f1f5f9;
}

.ts-landing-map-live:focus-visible {
  outline: 3px solid var(--brand, #2563eb);
  outline-offset: -3px;
}

.ts-nowrap {
  white-space: nowrap;
}

.ts-hero-map figcaption {
  max-width: 440px;
  margin: 0.4rem auto 0;
  font-size: 0.85rem;
  text-align: center;
}

.ts-tile {
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.ts-tile p {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.ts-landing-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-steps {
  counter-reset: step;
}

.ts-steps li::before {
  counter-increment: step;
  content: counter(step);
  display: inline-block;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-weight: 700;
  line-height: 1.9rem;
  text-align: center;
}

.ts-landing .ts-action {
  margin: 1.5rem 0 0;
}

.ts-sub {
  margin: 1.25rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.ts-landing-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.ts-landing .ts-landing-partner h2 {
  margin: 0;
  font-size: 1.2rem;
}

.ts-landing-partner p {
  color: var(--text);
}

/* The operators' page: its two ways in, side by side. */
.ts-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.ts-ways .ts-tile {
  display: flex;
  flex-direction: column;
}

.ts-ways h2 {
  margin: 0;
  font-size: 1.15rem;
}

.ts-ways .ts-action {
  margin: auto 0 0;
  padding-top: 1rem;
}

@media (max-width: 820px) {
  .ts-ways {
    grid-template-columns: 1fr;
  }
}

/* The regions, in one small line at the foot of the page: every region stays
   one link from the home page. */
/* The newest guides: a row to slide, three cards wide and one on a narrow
   screen, with two arrows the script shows when the row does not fit. */
.ts-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ts-carousel-arrows {
  display: flex;
  gap: 0.5rem;
}

.ts-carousel-arrows[hidden] {
  display: none;
}

.ts-carousel-arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 1.15rem;
  cursor: pointer;
}

.ts-carousel-arrow:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}

.ts-carousel-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.ts-carousel {
  scroll-snap-type: x mandatory;
}

.ts-carousel > li {
  scroll-snap-align: start;
}

.ts-guide-cards {
  display: grid;
  grid-auto-columns: calc((100% - 2rem) / 3);
  grid-auto-flow: column;
  gap: 1rem;
  margin: 0;
  padding: 0.25rem 0.1rem 0.75rem;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

/* All the guides, in `/guide`: the same cards, in rows. */
.ts-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* A guide as a card. Its title's link covers it all. */
.ts-guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.ts-guide-card:hover {
  border-color: var(--brand);
}

.ts-guide-card:focus-within {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.ts-guide-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--brand);
}

.ts-guide-card-text {
  padding: 1rem 1.2rem 1.2rem;
}

.ts-guide-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.ts-guide-card h3 a {
  color: var(--text);
  text-decoration: none;
}

.ts-guide-card h3 a::after {
  position: absolute;
  inset: 0;
  content: '';
}

.ts-guide-card h3 a:focus-visible {
  outline: none;
}

.ts-guide-card p {
  display: -webkit-box;
  margin: 0.4rem 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.95rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* A guide's cover, under its heading. */
.ts-guide-cover {
  display: block;
  width: 100%;
  height: auto;
  margin: 1rem 0 1.5rem;
  border-radius: var(--radius);
}

/* Stora's way in, in the corner of every public page. Under the consent
   bar, which covers it until it is answered. */
.ts-stora-launch {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9;
  padding: 0.75rem 1.2rem;
  background: var(--brand);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgb(37 99 235 / 30%);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.ts-stora-launch:hover,
.ts-stora-launch:focus-visible {
  filter: brightness(1.08);
}

@media (max-width: 820px) {
  .ts-hero-inner,
  .ts-landing-points {
    grid-template-columns: 1fr;
  }

  .ts-guide-cards {
    grid-auto-columns: 85%;
  }

  .ts-hero {
    padding-top: 7.5rem;
  }

  .ts-landing-map-frame {
    max-width: 340px;
  }

  .ts-search-row {
    flex-direction: column;
  }
}

.ts-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-card {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ts-card p {
  margin: 0.25rem 0 0;
}

.ts-facts {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.ts-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.3rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-details {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ts-details dt {
  color: var(--muted);
}

.ts-details dd {
  margin: 0;
}

.ts-prose {
  white-space: pre-line;
}

.ts-map,
.ts-photos img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.ts-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.ts-provenance {
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Tables of the price index and of the calculator (M5): they scroll inside
   their own box on a narrow screen, the page never does. */
.ts-table {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

caption {
  padding: 0.75rem 1rem 0.25rem;
  color: var(--muted);
  text-align: left;
}

th,
td {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

thead th {
  border-top: 0;
  color: var(--muted);
  font-weight: 600;
}

tr[data-unavailable] td {
  color: var(--muted);
}

.ts-notice,
.ts-result {
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ts-result h2 {
  margin-top: 0;
}

.ts-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.ts-form legend {
  padding: 0 0.35rem;
  font-weight: 600;
}

.ts-form button {
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* A guide, and a city's own text: prose at a readable width. */
.ts-text {
  max-width: 44rem;
}

.ts-text h3 {
  margin: 1.5rem 0 0.4rem;
}

.ts-text blockquote {
  margin: 1rem 0;
  padding: 0.25rem 1rem;
  border-left: 3px solid var(--border);
  color: var(--muted);
}

.ts-text table {
  margin: 1rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* The footer: the name and what the site is, four short lists, and a last
   line for the address to write to. From edge to edge, its content in the
   landing page's column. */
.ts-footer {
  margin-top: 3rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

.ts-footer-inner,
.ts-footer-foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.ts-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: 2rem 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

.ts-footer-brand p {
  max-width: 16rem;
  margin: 0.6rem 0 0;
}

.ts-footer-brand .ts-brand {
  font-size: 1.1rem;
}

.ts-footer-brand .ts-brand::before {
  width: 1.75rem;
  height: 1.75rem;
}

.ts-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.ts-footer-nav h2 {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ts-footer-nav ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-footer-nav a {
  color: var(--text);
  text-decoration: none;
}

.ts-footer-nav a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.ts-footer-foot {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

.ts-footer-foot p {
  margin: 0.25rem 0;
}

@media (max-width: 820px) {
  .ts-footer-inner {
    grid-template-columns: 1fr;
  }

  .ts-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34rem) {
  .ts-details {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .ts-details dd {
    margin-bottom: 0.6rem;
  }
}

/* The consent banner (M6): rendered only when a Google Analytics id is set,
   and shown by the script when no answer is remembered. Fixed to the bottom,
   over the page and not in its flow, so it moves nothing when it appears. */
.ts-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.ts-consent[hidden] {
  display: none;
}

.ts-consent p {
  max-width: 62rem;
  margin: 0 auto 0.6rem;
}

.ts-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

button.ts-button {
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ts-linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* The unit converter (M7): two short fields for a number. */
.ts-form input[type='text'] {
  width: 7rem;
  padding: 0.3rem 0.5rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}