/* The event page's "Reis" module — how you get to this appointment.
 *
 * Its sibling on the calendar grid (the hatched strip before an event) is
 * styled in apps/events/styling/all.css, because that one only ever appears
 * inside the Events app. This module renders on every event detail page —
 * central, team-space, and the calendar app's own — so it lives here, outside
 * any app scope, and ships with the global chrome.
 *
 * All three modes are always listed, the unroutable ones included, showing a
 * dash. See the note in partials/quaive_section_travel.html for why.
 */
.kik-travel-module {
  --kik-travel-module-ink: var(--colour-accent);

  .kik-travel-leave {
    margin: 0 0 0.5em;
    color: var(--kik-travel-module-ink);
    font-weight: 600;
  }

  .kik-travel-modes {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kik-travel-option {
    display: grid;
    /* icon · name · duration · departure — the legs wrap onto their own row
       under the name, because an itinerary is longer than a cell. */
    grid-template-columns: 1.4em minmax(6em, 1fr) auto auto;
    align-items: baseline;
    gap: 0.2em 0.6em;
    padding: 0.35em 0;
    border-bottom: 1px solid var(--colour-separation-lines);

    &:last-child {
      border-bottom: 0;
    }

    /* The mode this event is set to. Not a colour change — the module is read
       top to bottom and weight is what survives a glance. */
    &.is-chosen {
      font-weight: 600;
    }

    /* No route: the row stays, quietly. */
    &.is-unknown {
      opacity: 0.6;
    }
  }

  .kik-travel-duration {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .kik-travel-depart-at {
    color: var(--kik-travel-module-ink);
    font-variant-numeric: tabular-nums;
  }

  /* "bus 4 › walk" — the public-transport itinerary, the one thing a duration
     alone cannot tell you. Spans the whole row under its mode. */
  .kik-travel-legs {
    grid-column: 2 / -1;
    font-size: 0.9em;
    opacity: 0.75;
  }

  .kik-travel-origin {
    margin: 0.6em 0 0;
    font-size: 0.9em;
    opacity: 0.7;
  }

  .kik-travel-icon:before {
    font-family: fontello;
    font-style: normal;
    font-weight: normal;
  }
  .kik-travel-bicycle .kik-travel-icon:before { content: var(--glyph-bicycle); }
  .kik-travel-transit .kik-travel-icon:before { content: var(--glyph-bus); }
  /* The fontello set ships no plain car; the taxi glyph IS a car silhouette at
     this size, and nothing else in the set reads as one. */
  .kik-travel-car .kik-travel-icon:before { content: var(--glyph-taxi); }
}

/* The departure line on an event card — the upcoming-events sidebar and the
   dashboard's Events portlet, which is why this is not Events-app CSS. Orange
   and right-aligned under the byline, so it reads as an instruction rather
   than another detail of the appointment. It is the one number the calendar's
   travel strip exists to produce, carried to a surface with no time axis to
   draw it on. */
/* The byline is a `-webkit-box` clamped to 3 lines (link-list.css), and a
   clamped box is only as tall as N *line boxes* — a pill is a block child
   taller than one line-height, so the box's own height stops short of it and
   `overflow: hidden` slices the bottom off. It only shows when the byline text
   itself wraps: on a one-line byline the pill still fits inside the 3-line
   budget. A byline carrying a pill therefore leaves the clamp behind — these
   bylines are "time · place", short by construction. */
.pat-link-list li a .item-byline:has(.kik-travel-depart) {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.item-byline .kik-travel-depart,
.kik-dagbalk-depart {
  display: block;
  text-align: left;
  /* The brand orange, NOT --colour-accent. Inside an application body and
     inside a portlet, --colour-accent is reassigned to that app's own tint
     (application-body.css, portlet.css), and the events tint is orangered —
     so the badge came out red, which reads as an error rather than as the
     time to leave. --color-accent-hover is the same orange the theme sets at
     :root and nothing reassigns it per app, so the badge is the same colour
     on every surface it appears on. */
  background: var(--color-accent-hover);
  font-size: 0.85em;
  padding: 3px 9px;
  color: white;
  border-radius: var(--border-radii);
  margin: 6px auto 0 0;
  width: max-content;

  body[dir=rtl] & {
    margin: 6px 0 0 auto;
  }
}

/* In the dagbalk the pill sits ABOVE the row's own line — it says when to
   leave FOR the event beneath it, and under the line it read as a caption on
   the next event down. Inside a column whose line-height is the 27px the
   stacking pass reserves per row, so left alone the pill would inherit that
   and stand two-thirds taller than the box dagbalk.py budgeted. These three
   numbers ARE DEPART_ROW_HEIGHT (4 + 2 + 16 + 2), so change them together;
   margin-block (not margin-top) so the shared rule's `auto` inline edge, and
   with it the RTL flip, survives the override. */
.kik-dagbalk-depart {
  margin-block: 0 4px;
  padding: 2px 8px;
  line-height: 16px;
}