/* 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 {
    border-bottom: 1px solid var(--colour-separation-lines);

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

    /* The row's content is one box — a link into the Maps app when the
       account has it, a span otherwise — and THAT box is the grid, so the
       whole row is the target and the hover paints the whole row. */
    > a,
    > .kik-travel-row {
      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.5em;
      /* The highlight reaches half a step past the text on both sides while
         the text itself stays on the module's own edge. */
      margin: 0 -0.5em;
      border-radius: var(--border-radii);
      color: inherit;
      text-decoration: none;
    }

    /* A journey you can open (Daniel, 2026-09-08): the row lights the way a
       toolbar button does — the same quiet wash, in the ink's own colour, so
       it is one tint on every theme — and the departure keeps its orange. */
    @media (hover: hover) {
      > a:hover {
        background-color: var(--button-background-colour-hover);
        text-decoration: none;
      }
    }

    > a:focus-visible {
      outline: var(--pat-form-input-field-outline-focus);
      outline-offset: var(--pat-form-input-field-outline-offset);
    }

    /* 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;
  }

}

/* The mode's glyph — on the Reis module's rows and on the departure pill of
   an event card alike, which is why this sits outside the module's scope.
   The class naming the mode (kik-travel-bicycle …) is on the row or the pill;
   the glyph is drawn into the empty icon span inside it. */
.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;
  }

  /* HOW you leave, before WHEN (Daniel, 2026-09-08): the glyph of the mode
     the time was computed for, in the pill's own white, a small step before
     the words. A pill with no known mode draws no glyph and loses nothing.
     AND WHETHER TO TAKE AN UMBRELLA: a second glyph, only when rain is
     expected on the way there or back (events.travel.rain_expected). */
  .kik-travel-icon:before,
  .kik-travel-rain:before {
    margin-right: 0.4em;
  }

  body[dir=rtl] & .kik-travel-icon:before,
  body[dir=rtl] & .kik-travel-rain:before {
    margin-right: 0;
    margin-left: 0.4em;
  }
}

.kik-travel-rain:before {
  content: var(--glyph-umbrella);
  font-family: fontello;
  font-style: normal;
  font-weight: normal;
}

/* 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;
}