/* LIP-064: the cabinsizer pages' own stylesheet.

   Was an 913-line <style> block in partials/carry-on-styles, included in the
   head of every page on that host, which meant every page re-shipped it and
   nothing was cached between them. The same change site.css got, and moved
   verbatim: this is the same CSS in the same order, so the cascade is
   unchanged.

   No `:root` block of its own. These pages load site.css as well, which
   carries the generated tokens, and a second copy would be a second thing to
   keep in step.

   Built by scripts/build-site-css.mjs; edit this file, not public/css. */

.co-page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---- The cabinsizer mark (LIP-058) --------------------------------- */

/* An app icon shaped tile carrying the sizer glyph. Same corner ratio and
   same float as littledots' own icon, because the two are one family; the
   fill is the brand violet so it reads as a logo rather than as another
   glass control on a page already full of them. */

/* Header, mirroring the community map's proportions */
.co-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: left;
}
.co-header-text { display: flex; flex-direction: column; }
@media (max-width: 480px) {
  .co-header { flex-direction: column; text-align: center; gap: 0.75rem; }
}
@media (min-width: 768px) {
  .co-header { align-items: flex-start; }
  .co-header > .ld-floating-app-icon,
  .co-header .cs-mark { margin-top: 22px; }
}
.co-count {
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.co-count-unit { font-size: 0.4em; font-weight: 600; letter-spacing: -0.01em; opacity: 0.55; }
.co-count-sub {
  margin-top: 0.15rem;
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.45;
}
.co-title {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.35rem 0 0;
  opacity: 0.7;
}

/* Card surface, same glass as the rest of the public pages */
.co-card {
  border-radius: 24px;
  padding: 1.25rem 1.4rem;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 20px 50px rgba(91, 33, 182, 0.12);
}
[data-bs-theme="dark"] .co-card {
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.co-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 0.6rem;
}
.co-report {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6d28d9;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.75;
}
.co-report:hover { opacity: 1; }
.co-report svg { flex: none; }
.co-report:hover { text-decoration: underline; }
[data-bs-theme="dark"] .co-report { color: #c4b5fd; }

/* Kept: the sheet still uses it for the "last checked" line. The card this
   once belonged to, its clamp mask and its Read more toggle went with the
   move to the footer. */
.co-disclaimer-dates { font-size: 0.88rem; opacity: 0.6; }

/* The fine print as a line in the page's footer plus a sheet, rather than
   a panel of prose at the bottom of the page. What it says matters and
   almost nobody needs it on arrival, which is the shape of a thing that
   belongs in a footer and opens on request.

   No surface of its own: it sits in the footer row beside the theme
   switch, and a panel there would be one more thing to look at under a
   page that has already finished. */
.co-fineprint {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.1rem;
}
.co-fineprint-title { font-size: 0.85rem; font-weight: 600; opacity: 0.55; }
/* The one that opens something gets a button; Report stays the quiet link
   it has always been, so the line has one clear action rather than two
   competing ones. */
.co-fineprint-more {
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(109, 40, 217, 0.22);
  border-radius: 999px;
  background: transparent;
  color: #6d28d9;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.co-fineprint-more:hover { background: rgba(139, 92, 246, 0.14); border-color: rgba(109, 40, 217, 0.4); }
.co-fineprint-more:focus-visible { outline: 2px solid #6d28d9; outline-offset: 1px; }
[data-bs-theme="dark"] .co-fineprint-more { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.28); }

/* The sheet the bar opens. A native <dialog>, so Esc, focus trapping and
   the backdrop are the browser's job. Opaque, because a column of prose
   over a moving gradient is unreadable. */
/* A side drawer, not a centered modal. Four documents of very different
   lengths in one dialog meant the box resized on every tab switch; anchored
   to the edge at full height, the frame holds still and only the panel
   inside it scrolls.

   The geometry mirrors `.fd-drawer` in partials/filter-drawer, deliberately
   rather than by sharing a class: that partial is not included on every
   page this sheet appears on (the landing and the carrier pages carry no
   filters), so depending on it would leave the sheet unstyled exactly where
   nothing else would show the fault. A change to one wants the same change
   to the other. */
.co-sheet {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  margin: 0;
  width: min(1100px, 96vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 22px 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fdfcff;
  color: #1e1b32;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: -30px 0 80px rgba(30, 12, 70, 0.35);
}
/* The slide, and the scroll lock behind it. Both scoped to co-js, because
   without the script the sheet is a block in the page and a translated one
   would sit off the side of it. `allow-discrete` is what lets the closing
   half animate at all. */
html.co-js .co-sheet {
  translate: 100% 0;
  transition: translate 260ms cubic-bezier(0.32, 0.72, 0, 1),
              display 260ms allow-discrete,
              overlay 260ms allow-discrete;
}
html.co-js .co-sheet[open] { translate: 0 0; }
@starting-style {
  html.co-js .co-sheet[open] { translate: 100% 0; }
}
/* Padded by exactly the scrollbar that `overflow: hidden` removes, or the
   page shifts under the panel. The width is measured in JS and handed over,
   because CSS cannot know it and an overlay scrollbar takes none. */
html.co-js.co-locked { overflow: hidden; padding-right: var(--co-lock-pad, 0px); }
@media (prefers-reduced-motion: reduce) {
  html.co-js .co-sheet { transition: none; }
}
[data-bs-theme="dark"] .co-sheet { background: #17132e; color: #ede9fe; }
.co-sheet::backdrop { background: rgba(24, 10, 56, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.co-sheet-inner { padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; }

/* Sticky, and bleeding to the sheet's edges so nothing scrolls through it.
   The negative margins cancel `.co-sheet-inner`'s padding, which the head
   then re-applies to itself; without that the background stops short of
   the corners and text slides past in the gap. */
.co-sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: -1.5rem -1.6rem 0;
  padding: 1.5rem 1.6rem 0;
  background: #fdfcff;
}
[data-bs-theme="dark"] .co-sheet-head { background: #17132e; }
.co-sheet-head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* Tabs, in the pill vocabulary the toolbars already use. */
.co-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(109, 40, 217, 0.14);
}
[data-bs-theme="dark"] .co-tabs { border-bottom-color: rgba(255, 255, 255, 0.1); }
.co-tab {
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0.6;
  cursor: pointer;
  transition: background-color 120ms ease, opacity 120ms ease, color 120ms ease;
}
.co-tab:hover { opacity: 1; background: rgba(139, 92, 246, 0.14); }
.co-tab:focus-visible { opacity: 1; outline: 2px solid #6d28d9; outline-offset: 1px; }
.co-tab[aria-selected="true"],
.co-tab[aria-selected="true"]:hover { background: #8b5cf6; color: #fff; opacity: 1; }
.co-tabpanel { display: flex; flex-direction: column; gap: 1.4rem; }
.co-tabpanel[hidden] { display: none; }
.co-sheet-title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
/* One block per dataset, plus the rule that applies to both. The heading
   carries the weight and the rule above it does the separating, so the
   sheet reads as three answers rather than as one wall. */
.co-sheet-section + .co-sheet-section {
  border-top: 1px solid rgba(109, 40, 217, 0.14);
  padding-top: 1rem;
}
[data-bs-theme="dark"] .co-sheet-section + .co-sheet-section { border-top-color: rgba(255, 255, 255, 0.1); }
.co-sheet-heading {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}
/* The one block in the sheet that asks for something rather than
   explaining something, so it is the one block that is not plain prose. */
.co-sheet-callout {
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(109, 40, 217, 0.2);
  background: rgba(139, 92, 246, 0.1);
}
[data-bs-theme="dark"] .co-sheet-callout {
  border-color: rgba(196, 181, 253, 0.24);
  background: rgba(139, 92, 246, 0.16);
}
.co-sheet-callout .co-sheet-heading,
.co-sheet-callout.co-sheet-doc h2 { opacity: 0.75; }
.co-sheet-callout p:last-child { margin-bottom: 0; }

/* A legal document rendered from its page row arrives as flat markdown,
   so the shape the hand written panels had is rebuilt from the headings:
   each h2 opens what was a .co-sheet-section, and the rule above it does
   the separating. Same look, one source. */
.co-sheet-doc h2 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}
.co-sheet-doc h2 ~ h2 {
  border-top: 1px solid rgba(109, 40, 217, 0.14);
  padding-top: 1rem;
  margin-top: 1rem;
}
[data-bs-theme="dark"] .co-sheet-doc h2 ~ h2 { border-top-color: rgba(255, 255, 255, 0.1); }
.co-sheet-doc code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: rgba(109, 40, 217, 0.1);
}
[data-bs-theme="dark"] .co-sheet-doc code { background: rgba(255, 255, 255, 0.1); }

.co-sheet-section p,
.co-sheet-callout p,
.co-sheet-doc p,
.co-sheet-body p { margin: 0 0 0.7rem; line-height: 1.55; font-size: 0.95rem; opacity: 0.8; }
.co-sheet-section p:last-child,
.co-sheet-doc p:last-child,
.co-sheet-body p:last-child { margin-bottom: 0; }
/* Close plus the backdrop plus Esc. No X. Lives in the sticky header, so
   the way out is on screen wherever the reader has scrolled to. */
.co-sheet-close {
  flex: none;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(109, 40, 217, 0.22);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.co-sheet-close:hover { background: rgba(139, 92, 246, 0.14); }
.co-sheet-close:focus-visible { outline: 2px solid #6d28d9; outline-offset: 1px; }
[data-bs-theme="dark"] .co-sheet-close { border-color: rgba(196, 181, 253, 0.28); }

/* Without the script the sheet cannot be opened, so it flattens into the
   page instead of vanishing: this is the copy that says where every figure
   came from, and it is worth more to a reader than the tidiness is. It
   keeps its own heading, which names what is in it rather than repeating
   the bar.

   Same trick the filter drawer uses, with its own marker: each partial sets
   the class it reads, so neither depends on the other being included. */
html:not(.co-js) .co-fineprint-more,
html:not(.co-js) .co-tabs,
html:not(.co-js) .co-sheet-close { display: none; }
html:not(.co-js) .co-sheet {
  display: block;
  position: static;
  height: auto;
  width: 100%;
  max-height: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  overflow: visible;
}
html:not(.co-js) .co-sheet-inner { padding: 1rem 0 0; }

/* The link between /airlines and /luggage, carried by both. A full-width
   band rather than a line of text: the two datasets are halves of one
   question, and a traveler who lands on the wrong half should not have to
   hunt for the other. */
.co-crosslink {
  /* Anchors the chevron once the wide layout takes it out of the flow. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: rgba(109, 40, 217, 0.09);
  border: 1px solid rgba(109, 40, 217, 0.14);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.co-crosslink:hover { background: rgba(109, 40, 217, 0.15); border-color: rgba(109, 40, 217, 0.28); }
[data-bs-theme="dark"] .co-crosslink { background: rgba(196, 181, 253, 0.1); border-color: rgba(196, 181, 253, 0.16); }
[data-bs-theme="dark"] .co-crosslink:hover { background: rgba(196, 181, 253, 0.18); border-color: rgba(196, 181, 253, 0.3); }
/* Sizes whatever glyph is dropped in, so the band does not depend on the
   intrinsic size of an icon partial authored for somewhere else. */
.co-crosslink-icon { flex: none; display: inline-flex; opacity: 0.6; }
.co-crosslink-icon svg { width: 22px; height: 22px; opacity: 1; }
.co-crosslink-text { font-size: 0.88rem; line-height: 1.45; opacity: 0.75; min-width: 0; }
.co-crosslink-text strong { display: block; font-size: 0.98rem; opacity: 1; margin-bottom: 0.1rem; }
.co-crosslink-go { flex: none; margin-left: auto; opacity: 0.45; }
/* At the very bottom, full width. It is where you go next once the page has
   answered its own question, not something to cross on the way in, so it
   gets the same air the closing panels above it get. */
.co-page > .co-crosslink { margin-top: 0.5rem; padding: 1.1rem 1.3rem; }
.co-page > .co-crosslink .co-crosslink-icon svg { width: 26px; height: 26px; }
.co-page > .co-crosslink .co-crosslink-text strong { font-size: 1.05rem; }


/* Toolbar */
.co-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0.5rem;
  z-index: 5;
}
.co-search-wrap { position: relative; flex: 1 1 260px; min-width: 0; }
.co-search {
  width: 100%;
  padding: 0.8rem 8.2rem 0.8rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(91, 33, 182, 0.2);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  font-size: 1rem;
  color: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.co-search::-webkit-search-decoration,
.co-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.co-search:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.2); }
[data-bs-theme="dark"] .co-search {
  background: rgba(20, 12, 45, 0.85);
  border-color: rgba(196, 181, 253, 0.25);
  color: #ede9fe;
}
[data-bs-theme="dark"] .co-search:focus { border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.25); }
.co-search-tail {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.co-result-count {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.45;
  pointer-events: none;
  white-space: nowrap;
}
.co-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.45;
  cursor: pointer;
  padding: 0;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.co-clear svg { width: 17px; height: 17px; display: block; }
.co-clear:hover { opacity: 1; background: rgba(139, 92, 246, 0.14); }
.co-clear:focus-visible { opacity: 1; outline: 2px solid #6d28d9; outline-offset: 1px; }
.co-clear[hidden] { display: none; }

.co-units {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
[data-bs-theme="dark"] .co-units { background: rgba(20, 12, 45, 0.8); }
.co-units button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.6;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.co-units button:hover { opacity: 1; background: rgba(139, 92, 246, 0.12); }
.co-units button.active, .co-units button.active:hover { background: #8b5cf6; color: #fff; opacity: 1; }

/* Carrier cards */
.co-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 1rem; }
/* One panel per row once the card is too narrow to split it in two. */
@media (max-width: 430px) {
  .co-allowances { grid-template-columns: 1fr; }
}
.co-carrier { display: flex; flex-direction: column; gap: 0.85rem; }
.co-carrier[hidden] { display: none; }
.co-carrier-head { display: flex; align-items: center; gap: 0.7rem; }
/* Fixed slot so every airline name starts at the same x down the grid,
   whatever shape its mark is. Wide wordmarks fill the width, square marks
   fill the height, and both are contained. */
.co-logo {
  flex: none;
  width: 74px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(60, 26, 142, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  overflow: hidden;
}
.co-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Two marks in the set are near-white and disappear on the white tile. */
.co-logo-dark { background: #16123a; border-color: rgba(255, 255, 255, 0.14); }
/* Quiet until it means something: an outline star that only fills once the
   carrier is saved. Sits left of the flag and outside the linked title, so
   a tap here never navigates. */
.co-fav {
  margin-left: auto;
  align-self: flex-start;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(60, 26, 142, 0.35);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
[data-bs-theme="dark"] .co-fav { color: rgba(237, 233, 254, 0.35); }
.co-fav:hover { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.co-fav[hidden] { display: none; }
.co-fav .co-fav-on { display: none; }
.co-fav.is-fav { color: #f59e0b; }
.co-fav.is-fav .co-fav-off { display: none; }
.co-fav.is-fav .co-fav-on { display: block; }

/* LIP-056: the way into the matcher. On the list it is a bare glyph beside
   the star; on a carrier's own page it earns its words, because there is
   room and it is the main thing to do next. */
.co-match-icon {
  align-self: flex-start;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 0.35rem;
  border-radius: 999px;
  color: rgba(60, 26, 142, 0.4);
  transition: color 120ms ease, background-color 120ms ease;
}
.co-match-icon svg { width: 19px; height: 19px; }
.co-match-icon:hover { color: #6d28d9; background: rgba(139, 92, 246, 0.14); }
[data-bs-theme="dark"] .co-match-icon { color: rgba(237, 233, 254, 0.4); }
[data-bs-theme="dark"] .co-match-icon:hover { color: #c4b5fd; }

.co-match {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(109, 40, 217, 0.22);
  color: #6d28d9;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.co-match svg { width: 20px; height: 20px; }
.co-match:hover { background: rgba(139, 92, 246, 0.14); border-color: rgba(109, 40, 217, 0.45); }
[data-bs-theme="dark"] .co-match { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.3); }

/* The flag no longer opens the gap on its own once a star precedes it. */
.co-fav + .co-flag { margin-left: 0.5rem; }

/* Pushed to the card's right edge: it labels the carrier rather than
   introducing it, and the name should start at the same x as everything
   else in the card. */
.co-flag {
  margin-left: auto;
  align-self: flex-start;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  flex: none;
}
.co-carrier-id { min-width: 0; }
.co-carrier-name { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.co-carrier-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
.co-code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: rgba(109, 40, 217, 0.12);
}
[data-bs-theme="dark"] .co-code { background: rgba(196, 181, 253, 0.16); }
.co-carrier-name a { color: inherit; text-decoration: none; }
.co-carrier-name a:hover { text-decoration: underline; }
a.co-code { color: inherit; text-decoration: none; }
a.co-code:hover { background: rgba(109, 40, 217, 0.22); }
[data-bs-theme="dark"] a.co-code:hover { background: rgba(196, 181, 253, 0.28); }
.co-country, .co-region { font-size: 0.8rem; opacity: 0.55; }
/* Separator only when the country is actually there to separate from. */
.co-country + .co-region::before { content: '·'; margin-right: 0.4rem; opacity: 0.6; }

/* Two panels, carry-on left and personal item right, so the pair reads as
   one comparison rather than two stacked lists.

   Pulled out by exactly the panel's own horizontal padding, so the text
   inside a panel sits on the same left and right edge as the note and the
   footer below it. Without this the panels read as indented from
   everything else in the card. */
.co-allowances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.co-allowance {
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 16px;
  background: rgba(109, 40, 217, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
[data-bs-theme="dark"] .co-allowance { background: rgba(255, 255, 255, 0.06); }
.co-allowance-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 0.45rem;
}
.co-allowance-icon { width: 26px; height: 26px; opacity: 0.55; margin-bottom: 0.35rem; }
.co-figures { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* Label above value, two lines each, so a long "55 × 40 × 23 cm" gets the
   panel's full width instead of competing with its own label. */
.co-figures > div { display: flex; flex-direction: column; min-width: 0; }
.co-figures dt {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 0.1rem;
}
.co-figures dd { margin: 0; min-width: 0; }
.co-state { margin: 0; font-size: 0.9rem; opacity: 0.55; font-style: italic; }
.co-state-none { opacity: 0.8; font-style: normal; font-weight: 600; }
.co-extra { margin: 0.3rem 0 0; font-size: 0.78rem; font-weight: 600; opacity: 0.55; }

/* The figure pair. Published leads by default; the unit toggle reorders
   without any arithmetic in the browser, because both sides are rendered. */
.co-fig { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.co-pub { order: 1; font-weight: 600; font-size: 0.95rem; }
.co-conv { order: 2; font-size: 0.82rem; opacity: 0.5; cursor: help; }
/* "As published" means exactly that: the airline's own figures, with none
   of ours alongside them. Both are still in the DOM, so picking a unit
   brings the conversion back without a round trip. */
[data-units="published"] .co-conv { display: none; }
/* Keyed on `data-published` alone, never on the card class. These were
   scoped to `.co-carrier` and so did nothing at all on /luggage, whose
   cards are `.lg-bag`: picking cm or in looked like a dead control. Only
   a card carries `data-published`, so the bare attribute is specific
   enough and works for whatever the next page calls its rows. */
[data-units="metric"] [data-published="imperial"] .co-pub,
[data-units="imperial"] [data-published="metric"] .co-pub {
  order: 2; font-weight: 400; font-size: 0.82rem; opacity: 0.5;
}
[data-units="metric"] [data-published="imperial"] .co-conv,
[data-units="imperial"] [data-published="metric"] .co-conv {
  order: 1; font-weight: 600; font-size: 0.95rem; opacity: 1;
}

.co-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.65;
}

.co-carrier-foot {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(109, 40, 217, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
[data-bs-theme="dark"] .co-carrier-foot { border-top-color: rgba(255, 255, 255, 0.1); }
.co-source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6d28d9;
  text-decoration: none;
  min-width: 0;
}
.co-source:hover { text-decoration: underline; }
.co-source svg { width: 13px; height: 13px; flex: none; }
[data-bs-theme="dark"] .co-source { color: #c4b5fd; }
.co-verified { font-size: 0.75rem; opacity: 0.45; white-space: nowrap; }

.co-empty { text-align: center; padding: 2rem 1rem; opacity: 0.6; font-size: 0.95rem; }
.co-empty[hidden] { display: none; }

/* `hidden` alone loses to the grid's own display, so both need the guard. */
.co-list[hidden] { display: none; }
.co-sample-label {
  margin: 0 0 -0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
}
.co-sample-label[hidden] { display: none; }
/* No card behind it. It stands in for the list, so it should read as the
   page speaking rather than as one more panel to scan. */
.co-prompt {
  text-align: center;
  padding: 3.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: text;
}
.co-prompt[hidden] { display: none; }
.co-prompt-icon { width: 46px; height: 46px; opacity: 0.35; margin-bottom: 0.9rem; }
.co-prompt-headline {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.co-prompt-body { margin: 0; max-width: 30rem; line-height: 1.55; opacity: 0.65; font-size: 0.95rem; }

/* Extra air above the closing panels so they read as the end of the page
   rather than two more results. A rule would be the wrong instrument: on
   these pages hairlines live inside a card, and sections are separated by
   space. The page gap is 1.5rem, so this doubles it. */
.co-footer-panels { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 860px) {
  .co-footer-panels { grid-template-columns: 1fr 1fr; }
  /* DOM order keeps the join CTA first for stacked screens; here it moves
     to the right and whatever shares the row takes the left, so the left
     column reads as the tail of the list above it.

     Scoped to the row rather than to the card, so it stays true whatever
     a page decides to pair the join panel with. */
  .co-footer-panels .co-next { order: 1; }
  .co-footer-panels .co-join { order: 2; }
}

/* The shape both closing panels share: a mark, a headline, a line of copy
   and one button. Structurally identical on purpose, so that what tells
   them apart is the skin rather than the layout: one is another room in
   this same tool, the other is a different product.

   `.co-join` still carries its own copy of these four lines because
   /airlines has not been moved over yet. When it is, that rule collapses
   into this one and only the brand modifier stays behind. */
.co-next,
.co-join {
  text-align: center;
  padding: 2rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.co-join-headline { font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 800; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.co-join-body { margin: 0 auto 1.2rem; max-width: 34rem; line-height: 1.55; opacity: 0.75; }

/* A tile rather than a bare glyph, at the size of the app icon across the
   row, so the two panels start on the same line and carry the same weight.
   A 52px outline drawing beside a 52px solid icon reads as an unfinished
   version of it. */
.co-next-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.9rem;
  border-radius: 12px;
  background: rgba(109, 40, 217, 0.1);
  border: 1px solid rgba(109, 40, 217, 0.16);
  color: #6d28d9;
}
.co-next-icon svg { width: 28px; height: 28px; }
[data-bs-theme="dark"] .co-next-icon {
  background: rgba(196, 181, 253, 0.14);
  border-color: rgba(196, 181, 253, 0.2);
  color: #c4b5fd;
}
/* A step below the brand panel's headline: this is a longer sentence, and
   the two should not compete for the same glance. */
.co-next-headline { font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 800; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.co-next-body { margin: 0 auto 1.2rem; max-width: 34rem; line-height: 1.55; opacity: 0.75; }

/* Deliberately NOT one of the page's cards. Everything else down here is
   this directory talking about itself, and beside a crosslink wearing the
   page's own glass, a second glass panel reads as one more section of the
   same thing. This is a different product, so it is filled in the brand's
   own violet and carries the app's icon: littledots speaking, rather than
   another panel to scan.

   Kept identical in both themes for that reason. Every other surface here
   flips with the theme because it belongs to the page; this one belongs to
   the app and should look the same wherever it turns up.

   A modifier rather than a change to `.co-join`, so /airlines keeps its
   current footer until it is deliberately moved over. */
.co-join-brand,
[data-bs-theme="dark"] .co-join-brand {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 45%, #4c1d95 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(76, 29, 149, 0.38);
}
.co-join-brand .ld-floating-app-icon { margin-bottom: 0.9rem; }
.co-join-brand .co-join-body { opacity: 0.85; }
/* Inverted: on a filled panel the standard violet button disappears into
   its own background. Specificity has to clear the layout's dark-theme
   `.ld-cta` rule, which is parsed after this file. */
.co-join-brand .ld-cta,
[data-bs-theme="dark"] .co-join-brand .ld-cta {
  background: #fff;
  color: #4c1d95;
  box-shadow: 0 10px 24px rgba(30, 12, 70, 0.35);
}
.co-join-brand .ld-cta:hover,
.co-join-brand .ld-cta:focus,
[data-bs-theme="dark"] .co-join-brand .ld-cta:hover,
[data-bs-theme="dark"] .co-join-brand .ld-cta:focus {
  background: #f5f3ff;
  color: #4c1d95;
}

/* Single-carrier page */
.co-page-one { max-width: 760px; }
/* Back link left, the floating mark right. The list page carries the mark
   in its big header; this page has no header to put it in. */
.co-solo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* A link since LIP-058, so it has to say no to the underline and inherit
   the page's ink rather than the link color. It is the mark and the name,
   and the mark is not a word to be decorated. */
.co-solo-mark { display: inline-flex; flex: none; align-items: center; color: inherit; text-decoration: none; }
.co-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #6d28d9;
  text-decoration: none;
  opacity: 0.8;
}
.co-back:hover { opacity: 1; text-decoration: underline; }
[data-bs-theme="dark"] .co-back { color: #c4b5fd; }
.co-carrier-solo .co-carrier-name { font-size: 1.5rem; }
.co-carrier-solo .co-logo { width: 96px; height: 48px; }
.co-units-solo { align-self: flex-start; }
.co-ceased {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(180, 83, 9, 0.12);
  color: #92400e;
  font-size: 0.88rem;
  line-height: 1.5;
}
[data-bs-theme="dark"] .co-ceased { background: rgba(251, 191, 36, 0.14); color: #fde68a; }