/* ================== RESPONSIVE BREAKPOINTS ================== */

/* ── Navbar label collapse: driven by js/navbar-fit.js measuring actual fit,
     not viewport constants (the 1360/1560px numbers dated from the 12-link LC
     row and collapsed labels beside empty space). Stage 1: brand-overflow
     labels. Stage 2: nav-button labels too. Stage 3: the brand's name and
     tagline go as well, gaps and padding tighten, and the row scrolls sideways
     rather than break. ──

   WHERE THESE APPLY — two blocks, identical declarations, deliberately.
   A media query cannot be made conditional on a class, and as of 2026-08-07 the
   two editions need different floors, so "at every width for one navbar, ≥992px
   for the other" cannot be written once:
     • `@media (min-width: 992px) { .navbar.nav-fit-N … }` — every navbar above
       lg. That is where the meal edition's `navbar-expand-lg` row lives; below
       lg Bootstrap collapses it into a VERTICAL flat list inside the hamburger,
       and squeezing that to icons would be nonsense.
     • `.navbar.nav-no-burger.nav-fit-N …`, unwrapped — adds the union navbar at
       every width. It is `navbar-expand` with no toggler and no collapsed list,
       so there is no hamburger to hand over to and these stages are the only
       thing between it and a row hanging off the right edge of a phone.
   The two overlap above 992px on a union navbar. The declarations are identical
   there, so the overlap is a no-op; the `.nav-no-burger` copy is also the more
   specific of the two, so where they do differ it wins, which is the direction
   you want. js/navbar-fit.js makes the SAME split (its 992px guard is skipped
   for a nav carrying `nav-no-burger`) and the two must agree: a stage class
   stamped with no rule behind it is a silent no-op, and a rule with no class
   stamped never fires. EDIT BOTH BLOCKS TOGETHER. */
@media (min-width: 992px) {
  /* Transitions off for the measurement pass. A forced read taken while a
     property is animating returns an INTERPOLATED width, so EVERY width the
     pass reads that also animates has to be listed here. Two come from this
     feature itself (the labels, the brand-overflow padding). The other five
     come from the navbar-shrink restyle, which the scroll handler in
     views/partials/navbar.php now re-measures on:
       1. nav button padding                 (.navbar-nav .btn-outline-light)
       2. the theme toggle's padding         -- SAME declaration, but it sits
          inside `.navbar-brand`, NOT `.navbar-nav`, so a row-scoped selector
          silently misses it. That is why the selector below is scoped to the
          navbar rather than to the row.
       3. the brand heading's font-size      (.navbar-brand h4)
       4. the logo image's height            (.navbar-logo-img; `width: auto`,
          so its height drives its width)
       5. the logo chip's padding            (.navbar-logo)
     Items 2-5 all live inside `.navbar-brand` and so feed `brandW`.
     NOT listed, deliberately, because they carry no transition and therefore
     land instantly: the `.navbar-nav` and `.navbar-brand` gaps, and the
     buttons' font-size (the button transition covers padding only).
     If you add a transition to any width the navbar shows, add it here too --
     an unlisted one does not fail loudly, it just measures slightly wrong.
     ACCEPTED CONSEQUENCE: forcing `transition: none` mid-flight CANCELS the
     running shrink transition, so these snap to their end state rather than
     easing. That is the right trade. The re-measure fires once, on one
     animation frame, with no settle callback behind it -- so a stage decided
     on interpolated numbers would simply stay wrong until the next resize. A
     slightly snappier scroll animation is cheaper than a navbar that is
     confidently wrong. If the snap does offend, defer the re-measure to
     `transitionend` -- do NOT un-suppress, that just brings the interpolated
     reads back. */
  .navbar.nav-fit-measure .nav-label,
  .navbar.nav-fit-measure .navbar-brand-overflow,
  .navbar.nav-fit-measure .btn-outline-light,
  .navbar.nav-fit-measure .navbar-brand h4,
  .navbar.nav-fit-measure .navbar-logo-img,
  .navbar.nav-fit-measure .navbar-logo { transition: none !important; }
  .navbar.nav-fit-1 .navbar-brand-overflow .nav-label,
  .navbar.nav-fit-2 .navbar-brand-overflow .nav-label {
    max-width: 0 !important;
    opacity: 0;
    margin-left: 0 !important;
  }
  .navbar.nav-fit-1 .navbar-brand-overflow,
  .navbar.nav-fit-2 .navbar-brand-overflow { padding: 0.5rem 0.75rem !important; }
  .navbar.nav-fit-1 .navbar-brand-overflow i,
  .navbar.nav-fit-2 .navbar-brand-overflow i,
  .navbar.nav-fit-1 .navbar-brand-overflow .bi,
  .navbar.nav-fit-2 .navbar-brand-overflow .bi { font-size: 1.15rem !important; }
  .navbar.nav-fit-2 .navbar-nav .btn-outline-light .nav-label {
    max-width: 0 !important;
    opacity: 0;
    margin-left: 0 !important;
  }
  .navbar.nav-fit-2 .navbar-nav .btn-outline-light { padding: 0.5rem 0.75rem; }
  .navbar.nav-fit-2 .navbar-nav .btn-outline-light i,
  .navbar.nav-fit-2 .navbar-nav .btn-outline-light .bi { font-size: 1.15rem; }
  /* Stage 3: the last stop before the row has to scroll. The brand keeps its
     logo chip and loses its name + tagline column; the row's gap and the
     buttons' padding tighten.
     NOTHING HERE IS ADDED TO THE SUPPRESSION ENUMERATION ABOVE, and each
     omission was checked rather than assumed:
     The `!important` on the brand text is not decoration either, and it was
     caught in a browser rather than reasoned about: the element carries
     Bootstrap's `d-flex` utility (views/partials/navbar.php), which is
     `display: flex !important`, so a plain `display: none` here loses and the
     wordmark simply stays up while the row overflows behind it.
       — `.navbar-brand-text` goes to `display: none`. Display is not an
         interpolated property (nothing in css/ sets `transition-behavior:
         allow-discrete`), so it lands instantly and its children's own
         transitions — the h4's font-size and the tagline's opacity/max-height in
         css/navbar-footer.css — never get a frame to run in.
       — `gap` carries no transition on `.navbar-nav` in any sheet; the "NOT
         listed, deliberately" note above already names the gaps as instant.
       — the buttons' padding DOES transition, and it is item 1 of the
         enumeration, already covered by the same selector.
     The `!important` on the gap is not decoration: `gap-2` on the row
     (views/partials/navbar.php) is Bootstrap's `gap: 0.5rem !important`, and
     `.navbar.navbar-shrink .navbar-nav` is a second `!important`. A plain
     declaration here loses to both, and it would look right until you scrolled. */
  .navbar.nav-fit-3 .navbar-brand-text { display: none !important; }
  .navbar.nav-fit-3 .navbar-nav { gap: 0.25rem !important; }
  .navbar.nav-fit-3 .navbar-nav .btn-outline-light { padding: 0.4rem 0.55rem; }
}

/* ── The same stages, unwrapped, for the union navbar (`nav-no-burger`) at every
     width. Read the block comment at the top of this file before editing either
     copy: they are duplicated because a media query cannot be class-conditional,
     and they must stay in step. ── */
.navbar.nav-no-burger.nav-fit-measure .nav-label,
.navbar.nav-no-burger.nav-fit-measure .navbar-brand-overflow,
.navbar.nav-no-burger.nav-fit-measure .btn-outline-light,
.navbar.nav-no-burger.nav-fit-measure .navbar-brand h4,
.navbar.nav-no-burger.nav-fit-measure .navbar-logo-img,
.navbar.nav-no-burger.nav-fit-measure .navbar-logo { transition: none !important; }
.navbar.nav-no-burger.nav-fit-1 .navbar-brand-overflow .nav-label,
.navbar.nav-no-burger.nav-fit-2 .navbar-brand-overflow .nav-label {
  max-width: 0 !important;
  opacity: 0;
  margin-left: 0 !important;
}
.navbar.nav-no-burger.nav-fit-1 .navbar-brand-overflow,
.navbar.nav-no-burger.nav-fit-2 .navbar-brand-overflow { padding: 0.5rem 0.75rem !important; }
.navbar.nav-no-burger.nav-fit-1 .navbar-brand-overflow i,
.navbar.nav-no-burger.nav-fit-2 .navbar-brand-overflow i,
.navbar.nav-no-burger.nav-fit-1 .navbar-brand-overflow .bi,
.navbar.nav-no-burger.nav-fit-2 .navbar-brand-overflow .bi { font-size: 1.15rem !important; }
.navbar.nav-no-burger.nav-fit-2 .navbar-nav .btn-outline-light .nav-label {
  max-width: 0 !important;
  opacity: 0;
  margin-left: 0 !important;
}
.navbar.nav-no-burger.nav-fit-2 .navbar-nav .btn-outline-light { padding: 0.5rem 0.75rem; }
.navbar.nav-no-burger.nav-fit-2 .navbar-nav .btn-outline-light i,
.navbar.nav-no-burger.nav-fit-2 .navbar-nav .btn-outline-light .bi { font-size: 1.15rem; }
.navbar.nav-no-burger.nav-fit-3 .navbar-brand-text { display: none !important; }
/* The no-JS floor gives up the wordmark too, but only where the screen is small
   enough for it to matter. The brand is `flex-shrink: 0` under the floor as it is
   at stage 3, so at 320px a full-width RailNest wordmark plus its tagline left the
   row a 96px scrollport — narrower than the pinned bell+avatar box itself, which
   then hung 5px off the right edge. With the wordmark gone the row gets its width
   back. Above the lg breakpoint the row fits anyway, so a desktop whose script
   died keeps its name. */
@media (max-width: 991.98px) {
  .navbar.nav-no-burger.nav-fit-nojs .navbar-brand-text { display: none !important; }
}
.navbar.nav-no-burger.nav-fit-3 .navbar-nav { gap: 0.25rem !important; }
.navbar.nav-no-burger.nav-fit-3 .navbar-nav .btn-outline-light { padding: 0.4rem 0.55rem; }

/* Never-break fallback, union only. If even stage 3 overflows — five icon
   buttons, a bell, an avatar and a logo against a 375px phone is genuinely
   tight — the ROW scrolls sideways. Nothing wraps, nothing clips, and no
   horizontal scrollbar lands on the page as a whole.
   `min-width: 0` is what makes it work at all and is not tidy-up: a flex item's
   automatic minimum size is its content size, so without this `.navbar-collapse`
   and `.navbar-nav` refuse to shrink below the row's intrinsic width, the
   overflow never engages, and the row pushes the page sideways instead. The
   brand keeps `flex-shrink: 0` so the logo chip is never the thing that squashes.
   `scrollbar-width: none` hides the scrollbar itself: it would sit under the
   navbar buttons on every page at every scroll position, and the row is
   swipeable on the touch devices this stage is for. */
/* `nav-fit-nojs` rides along on every selector in this fallback, and only here.
   views/partials/navbar.php stamps it on the union navbar and js/navbar-fit.js
   strips it in its first reset, so it means exactly "no measurement has landed a
   stage" — the state a phone is in when that script 404s or throws. Same
   fallback, same reason: without it the row lays out at its full intrinsic width
   and Chrome answers that on a 375px phone by widening the layout viewport to
   963px and zooming the whole page out to fit (measured 2026-08-07).
   It is a SEPARATE class rather than a `:not(.nav-fit-1):not(.nav-fit-2)…` chain
   because stage 0 — the ordinary desktop state — also carries no stage class, and
   these rules must never reach it: `overflow-x: auto` forces the y axis to `auto`
   too, which CLIPS every dropdown this navbar owns. Measured at 1100px: 22 of 22
   menu items became unhittable while their rectangles stayed exactly the same
   size, so a screenshot with no menu open looks perfect.
   And it must never be on during a measurement pass either, for a second reason:
   `min-width: 0` + a scrolling `.navbar-nav` stops `.navbar-collapse` overflowing
   at all, and `.navbar-collapse`.scrollWidth is the quantity navbar-fit.js reads.
   Left on, every width measures as a fit and the stage system stops working —
   measured: at 375px the stage went to none, the five labels and the brand
   wordmark came back, inside a scroller whose bar is hidden. */
.navbar.nav-no-burger .navbar-collapse { min-width: 0; }
.navbar.nav-no-burger.nav-fit-3 .navbar-brand,
.navbar.nav-no-burger.nav-fit-nojs .navbar-brand { flex-shrink: 0; }
.navbar.nav-no-burger.nav-fit-3 .navbar-nav,
.navbar.nav-no-burger.nav-fit-nojs .navbar-nav {
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.navbar.nav-no-burger.nav-fit-3 .navbar-nav::-webkit-scrollbar,
.navbar.nav-no-burger.nav-fit-nojs .navbar-nav::-webkit-scrollbar { display: none; }

/* The bell and the avatar do not ride that scroll. They are the row's last two
   children and the ONLY route on RailNest to notifications, Settings, Issues and
   Logout, and at rest — scrollLeft 0, which is where every page load starts —
   they sat off the right edge of the frame: measured 70px past at 375, 194px at
   320, with the scrollbar hidden so nothing on screen said to swipe. So they are
   pinned out of the scroll instead, and the rest of the row slides underneath.
   `position: sticky` and not a second flex container outside `.navbar-nav`,
   because the row is what scrolls and a sibling of the row could not sit inside
   it; sticky keeps the pair in normal flow (so the row's width, and every
   measurement of it, is unchanged) and only offsets it once it would leave the
   scrollport. ONE box, wrapped in the partial, rather than two sticky children
   with `right: 0` and `right: <avatar width>`: that second offset would be the
   avatar's rendered width hardcoded, and it changes with the initials chip, the
   caret, the stage's padding and the shrink state.
   The background is the navbar's own, through `--navbar-bg` (declared beside the
   `.navbar` background rule it mirrors, in css/navbar-footer.css and
   css/dark-mode.css) so the two cannot drift into a visible seam. It must be
   fully opaque: a translucent pin shows the buttons sliding under it as a smear.
   `z-index` puts it above those siblings; the open menus keep Bootstrap's own
   z-index above that, so a sheet still covers the pair as it should. */
.navbar.nav-no-burger .navbar-trailing {
  display: flex;
  align-items: center;
  gap: inherit;
  flex-shrink: 0;
}
.navbar.nav-no-burger.nav-fit-3 .navbar-trailing,
.navbar.nav-no-burger.nav-fit-nojs .navbar-trailing {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--navbar-bg);
  padding-left: 0.25rem;
}

/* …and the price of that scroll container, paid here. A scroll container CLIPS
   its own popups: `overflow-x: auto` forces the y axis to `auto` too, so a
   dropdown hanging below the row is painted outside the box and is neither
   visible nor clickable. MEASURED, not reasoned about — at a 375px viewport the
   Violations menu opened with a real 160x149 rect and `elementFromPoint` at its
   centre returned `.container-fluid`. All four job menus, which on a phone are
   the entire navigation, were dead. Bootstrap will not save us either: inside a
   navbar it switches Popper off and positions the menu with plain CSS.
   So at stage 3 the menus leave the scroller. `position: fixed` is laid out
   against the viewport rather than the clipping ancestor, and no ancestor here
   establishes a containing block for it (`.navbar` is `position: sticky`, which
   does not, and nothing on the way up carries a transform or a filter).
   `top: auto` is load-bearing: it keeps the browser's own static position, which
   is the bottom edge of the button that opened the menu, so the menu tracks that
   button as the navbar restyles — `navbar-shrink` moves it 8px and the menu
   follows — without a hardcoded offset or a JS-measured navbar height. (It buys
   nothing horizontally: the left/right inset below pins that axis to the
   viewport regardless.)
   KNOWN LIMIT of that static position: it resolves from where the navbar sits in
   FLOW, not from where `position: sticky` paints it. With nothing above the
   navbar the two coincide, which is the case on every page today. Arm
   views/partials/maintenance-banner.php (~99px, and currently dark —
   MAINTENANCE_BANNER_TO in app_config.php is empty) and they diverge once the
   page is scrolled: the navbar pins to the top while its flow position stays
   that far down, so a stage-3 menu opens ~99px below the button that opened it.
   Still on screen and still clickable, but visibly detached. If the banner is
   ever armed while RailNest is live, this is the line to come back to.
   The left/right inset makes the menu a full-width sheet, because at this width
   an `-end`-anchored menu opened from the far-right button would otherwise sit
   half off the screen. Verified at 375px on all six menus at three row-scroll
   offsets, and at scrollY 200 with `navbar-shrink` applied: every item on screen
   and hit-testable. */
.navbar.nav-no-burger.nav-fit-3 .navbar-nav .dropdown-menu,
.navbar.nav-no-burger.nav-fit-nojs .navbar-nav .dropdown-menu {
  position: fixed;
  top: auto;
  left: 0.5rem;
  right: 0.5rem;
  /* The notification menu carries an INLINE `min-width: 320px; max-width: 360px`
     (views/partials/navbar.php), sized for the desktop dropdown. Left and right
     are both set here, so a max-width over-constrains the box and CSS resolves
     that by dropping `right`: measured at a 700px viewport, the bell's menu came
     out 360px wide pinned to the LEFT edge while every other menu spanned the
     screen. Inline styles need `!important` to beat, hence both. The min-width
     goes for the matching reason: below a ~336px viewport it would push the
     sheet wider than the screen. */
  min-width: 0 !important;
  max-width: none !important;
  max-height: 70vh;
  overflow-y: auto;
}

/* ── All trip types: stack vertically at <1000px ── */
@media (max-width: 999px) {
  /* Stack all leg grids to a single column */
  .trip-horizontal-container,
  .trip-horizontal-container.two-leg-paired,
  .trip-horizontal-container.two-leg-turn,
  .trip-horizontal-container.three-leg {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.5rem;
  }
  .trip-horizontal-container.two-leg-incomplete,
  .compact-trip-card.incomplete-trip .trip-horizontal-container:not(.two-leg-incomplete) {
    grid-template-columns: 1fr !important;
  }
  /* Layover pills become horizontal rows */
  .trip-layover-item {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
  }
  /* Summary items wrap below legs as a 2-col grid */
  .trip-summary-items-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-column: 1 / -1;
    gap: 0.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
  }
  .trip-summary-item {
    width: auto;
    padding-top: 0;
    text-align: center;
  }
  /* Trip number badge goes static so it doesn't overlap stacked legs */
  .trip-number {
    position: static;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-bottom: 0.5rem;
    text-align: right;
  }
  .compact-trip-card .card-body {
    padding: 0.75rem 0.625rem;
  }
  .trip-summary-card .col-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Hide navbar-brand overflow buttons on all screens smaller than lg ── */
@media (max-width: 991.98px) {
  .navbar-brand-overflow {
    display: none !important;
  }
}

/* ── Medium screens: tablets ── */
@media (max-width: 767.98px) {
  .navbar-brand h4 {
    font-size: 1.1rem !important;
  }
  .dashboard-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: stretch;
    margin-left: auto;
  }
  .dashboard-actions .btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    display: block;
    width: 100%;
    margin: 0;
  }
  /* Site footer */
  .site-footer .d-flex.flex-wrap {
    justify-content: center;
    text-align: center;
  }
  /* Dashboard stat cards */
  .year-stat-card .card-title {
    font-size: 0.8rem;
  }
  .year-stat-card .card-text {
    font-size: 0.9rem;
  }
}

/* ── Further tightening for narrow screens ≤600px ── */
@media (max-width: 600px) {
  .leg-details {
    font-size: 0.85rem;
  }
  .trip-horizontal-container {
    gap: 0.4rem !important;
  }
  .trip-summary-item {
    font-size: 0.8rem;
    padding: 0.3rem 0.25rem;
    background-color: rgba(var(--primary-blue-rgb), 0.05);
    border-radius: var(--radius-sm);
  }
  .trip-summary-item > div:first-child {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.75;
    margin-bottom: 0.15rem;
  }
  .trip-summary-card .col-6.col-md-3 .card-body {
    padding: 0.4rem 0.3rem;
  }
  .trip-summary-card .col-6.col-md-3 h6 {
    font-size: 0.8rem;
  }
}


/* ── Small screens: phones ── */
@media (max-width: 575.98px) {
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .navbar-brand-overflow {
    display: none !important;
  }
  .card {
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
  }
  .trip-summary-card .col-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .trip-form-row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
  .compact-trip-card .card-body {
    padding: 0.5rem;
  }
  .leg-details {
    font-size: 0.875rem;
  }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
  .trip-actions {
    flex-wrap: wrap;
  }
  .table-responsive td, .table-responsive th {
    white-space: nowrap;
  }
  .modal-dialog {
    margin: 0.5rem;
  }
  .alert {
    padding: 0.75rem;
    font-size: 0.875rem;
  }
  #year_filter_wrapper {
    flex-wrap: wrap;
  }
  .text-center .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .dashboard-table th:nth-child(3),
  .dashboard-table td:nth-child(3),
  .dashboard-table th:nth-child(4),
  .dashboard-table td:nth-child(4) {
    display: none;
  }
  .dashboard-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.3rem;
    align-items: center;
    justify-content: flex-end;
  }
  .dashboard-actions .btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
    min-width: 2rem;
  }
  .temp-station-form .col-md-1 {
    margin-top: 0.5rem;
  }
  /* Dashboard year card actions */
  .year-card-actions .btn span {
    display: none;
  }
  .year-card-actions .btn {
    padding: 0.35rem 0.5rem;
  }
}

/* ── Trophy grid responsive ─────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .trophy-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
  .trophy-card {
    padding: 12px 6px 10px;
  }
  .trophy-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .trophy-name {
    font-size: 0.78rem;
  }
  .trophy-desc {
    font-size: 0.68rem;
  }
  .trophy-tabs .nav-link {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
  }
}

/* ===== Dashboard Zones ===== */
@media (max-width: 767.98px) {
  .dash-year-chips { display: none; }
  .dash-year-select { display: inline-block; }
  .dash-hero { flex-direction: column; }
  .dash-hero-actions { width: 100%; }

  /* Tables reflow into stacked year blocks */
  .dash-table thead { display: none; }
  .dash-table, .dash-table tbody, .dash-table tr, .dash-table td { display: block; width: 100%; }
  .dash-table tbody tr.dash-year-row {
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    margin-bottom: var(--space-2); padding: var(--space-2);
  }
  .dash-table tbody tr.dash-detail-row { border: none; }
  .dash-table td.num { text-align: right; display: flex; justify-content: space-between; border: none; padding: 0.2rem 0.4rem; }
  .dash-table td.num::before { content: attr(data-label); color: var(--text-secondary); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.04em; }
  .dash-table td.act { display: flex; gap: 0.4rem; justify-content: flex-start; padding-top: var(--space-2); }
  .dash-total-row td { display: flex; justify-content: space-between; }
}