/* ============================================================================
   NAUTIKA · Accounts on the public site
   ----------------------------------------------------------------------------
   The navbar's account control, the sign-in panel, and the My trips page.

   Mobile first throughout: every rule here is written for the narrow viewport
   and widened by min-width queries, rather than written for a desktop and
   clawed back with max-width. Most people book a ferry on a phone, often
   one-handed and often on a poor connection, so the phone layout is the one
   that must be right by default and the one nothing can override by accident.
   ========================================================================== */

/* ---- Navbar account control -------------------------------------------------------------------
   Deliberately never nk-hide-mobile. Whether you are signed in is the one thing the bar has to say
   at a glance, and hiding it behind the hamburger on the width where most visitors are would be
   hiding it from nearly everyone. It sits beside the hamburger at every width. */
.site-account{display:flex;align-items:center;gap:.4rem}

/* Below 380px the label goes and the button becomes its icon: at that width the logo, the account
   control and the hamburger are competing for the whole bar, and a truncated word helps nobody. */
.site-account-signin{white-space:nowrap}
@media(max-width:379px){
  .site-account-signin-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-account-signin{padding-left:.6rem;padding-right:.6rem}
}

.site-account-toggle{border:none;min-width:auto;background:none;padding:.3rem;display:flex;align-items:center;gap:.15rem}
/* The framework sizes a dropdown menu at min-width:100% OF ITS TOGGLE, and this toggle is an avatar
   and a caret — about 60px. Left alone the menu comes out ~114px wide and wraps "My trips" and
   "Sign out" onto two lines each, which on a phone is where anyone would first see it. Give it a
   width of its own and keep the items on one line. */
.site-account-menu .nk-dropdown-menu{min-width:11rem}
.site-account-menu .nk-dropdown-item{white-space:nowrap}
.site-account-toggle .nk-avatar{background:var(--nk-primary);color:#fff;font-weight:700}
.site-account-toggle .nk-avatar .material-symbols-outlined{font-size:1.15rem}
.site-account-toggle .nk-caret{color:var(--nk-ink);font-size:1.1rem}
/* The name is a heading for the menu, not a target: it wraps rather than being clipped, because a
   long social-profile name is common and a half-shown one reads as a bug. */
.site-account-name{max-width:14rem;white-space:normal;line-height:1.3}
.site-account-signout{width:100%;border:none;background:none;text-align:left;cursor:pointer}

/* ---- Sign-in panel ------------------------------------------------------------------------------
   On a phone this is a sheet that rises from the bottom, with its controls in the lower half where
   a thumb already is. A dialog centred in the viewport puts its buttons in the one place a hand
   holding the phone cannot comfortably reach. */
.site-signin-backdrop{align-items:flex-end}
.site-signin{width:100%;max-width:none;margin:0;border-radius:var(--nk-radius-lg) var(--nk-radius-lg) 0 0;
  max-height:92vh;display:flex;flex-direction:column}
/* iOS puts a home indicator across the bottom edge; without this the last button sits under it. */
.site-signin-body{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));overflow-y:auto}

@media(min-width:640px){
  /* From a tablet up it becomes an ordinary centred dialog — there is no thumb-reach problem on a
     device being held in two hands or sitting on a desk. */
  .site-signin-backdrop{align-items:center}
  .site-signin{width:min(26rem,calc(100vw - 2rem));border-radius:var(--nk-radius-lg);max-height:85vh}
  .site-signin-body{padding-bottom:1.25rem}
}

.site-signin-lede{margin:0 0 1rem;color:var(--nk-ink-soft);font-size:var(--nk-text-sm);line-height:1.5}

.site-signin-pane{display:flex;flex-direction:column;gap:.65rem}

/* Every button in the panel is full-width and at least 48px tall: the WCAG target size, and about
   what a thumb actually needs on glass. */
.site-signin-primary{width:100%;justify-content:center;min-height:3rem}
.site-signin-primary{margin-top:.25rem}

/* Continue as guest. Quiet by design: signing in is what this panel is for, so the three options
   above it lead and this follows. Quiet is not hidden, though — full width, its own 44px target
   (larger than the 40px the providers are pinned to, because nothing constrains this one), and a
   plain readable label. A visitor who does not want an account has to be able to see at a glance
   that they do not need one; burying that would cost bookings, which is the opposite of the point. */
.site-signin-guest{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;padding:.6rem;cursor:pointer;
  color:var(--nk-ink-soft);font-size:var(--nk-text-sm);font-weight:600}
.site-signin-guest:hover,.site-signin-guest:focus-visible{color:var(--nk-ink);text-decoration:underline}

.site-signin-divider{display:flex;align-items:center;gap:.75rem;margin:.5rem 0 .25rem;
  color:var(--nk-ink-soft);font-size:var(--nk-text-xs);text-transform:uppercase;letter-spacing:.06em}
.site-signin-divider::before,.site-signin-divider::after{content:"";flex:1;height:1px;background:var(--nk-line)}

/* ---- Provider buttons -------------------------------------------------------------------------
   Google renders its own button and its appearance is theirs — their brand terms do not allow
   restyling it. So the Facebook button is built to match what Google actually draws. Every value
   below was measured off the rendered element rather than guessed at: 40px tall, a 20px pill
   radius, a #dadce0 hairline, a white ground, an 18px mark inset 12px, and a label that takes the
   remaining space and centres itself in it. (Measure with offsetHeight, not
   getBoundingClientRect — the modal animates in on a transform, and a rect taken mid-flight
   reports 38 and sends you chasing a difference that is not there.)

   The font is Google's own stack because their widget loads Google Sans into the page, so both
   buttons resolve to the same face instead of merely to similar ones. White and #3c4043 are
   hardcoded rather than taken from theme tokens for the same reason the rest of this is: Google's
   button is always light, and a themed neighbour would drift away from it the moment anyone looks
   at the site in dark mode.

   All three sign-in options use this, including our own phone one. 40px is shorter than the 48px
   touch target the rest of this panel keeps to; that is Google's height and there is no taller
   variant, so matching it is the only way the three can agree. Continue as guest is not one of
   these — it sits below them under its own divider, quieter, and keeps a target of its own size
   (.site-signin-guest), since nothing about it is constrained by what Google will draw. */
.site-signin-provider{display:flex;align-items:center;width:100%;height:40px;padding:0 12px;
  border:1px solid #dadce0;border-radius:20px;background:#fff;cursor:pointer;
  font-family:"Google Sans",Roboto,arial,sans-serif;font-size:14px;letter-spacing:.25px;
  transition:background-color .218s,border-color .218s;-webkit-appearance:none;appearance:none}
/* Google's own hover is a 4% tint drawn by an overlay element with this exact transition. */
.site-signin-provider:hover:not(:disabled){background-color:rgba(66,133,244,.04)}
.site-signin-provider:focus-visible{outline:none;background-color:rgba(66,133,244,.12)}
.site-signin-provider:disabled{opacity:.38;cursor:default}
.site-signin-provider-mark{flex:0 0 18px;height:18px;display:flex;align-items:center;justify-content:center}
/* Our own mark — the phone — sits in the same 18px box the providers' marks do. A Material Symbol
   is sized by font-size rather than by width, so it has to be told. It keeps the site's own colour
   while Google's and Facebook's keep theirs: three marks that belong to three different parties,
   in three identical buttons. */
.site-signin-provider-mark .material-symbols-outlined{font-size:18px;line-height:1;
  color:var(--nk-primary,#1a73e8)}
/* flex:1 + centre, so the label centres in what is left after the mark rather than in the button —
   the same slight leftward offset Google's own label has. */
.site-signin-provider-label{flex:1;margin-left:7px;text-align:center;color:#3c4043;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Google draws its own button in here; the container only has to hold its place and centre it. */
.site-signin-google{display:flex;justify-content:center;min-height:40px}
.site-signin-google > iframe{margin:0 auto!important}

.site-signin-back{align-self:flex-start;display:inline-flex;align-items:center;gap:.3rem;border:none;
  background:none;padding:.4rem .1rem;margin-bottom:.25rem;color:var(--nk-ink-soft);
  font-size:var(--nk-text-sm);font-weight:600;cursor:pointer}
.site-signin-back:hover{color:var(--nk-primary-700)}
.site-signin-back .material-symbols-outlined{font-size:1.1rem}

.site-signin-phone{display:flex;align-items:stretch;gap:.5rem}
.site-signin-cc{display:flex;align-items:center;padding:0 .75rem;border:1px solid var(--nk-line);
  border-radius:var(--nk-radius-sm);background:var(--nk-surface-2,var(--nk-surface));
  color:var(--nk-ink-soft);font-weight:600;white-space:nowrap}
.site-signin-phone .nk-input{flex:1;min-width:0;min-height:3rem;
  /* 16px minimum: anything smaller and iOS Safari zooms the page on focus, which on this panel
     means the sheet jumps and the keyboard covers the button. */
  font-size:max(1rem,var(--nk-text-base))}

.site-signin-help{margin:.15rem 0 .25rem;color:var(--nk-ink-soft);font-size:var(--nk-text-xs)}

.site-signin-code{min-height:3.25rem;font-size:1.5rem;letter-spacing:.5em;text-align:center;
  font-variant-numeric:tabular-nums;padding-left:.5em}

.site-signin-resend{border:none;background:none;padding:.6rem;color:var(--nk-primary-700);
  font-size:var(--nk-text-sm);font-weight:600;cursor:pointer}

.site-signin-error{margin:.75rem 0 0;padding:.6rem .75rem;border-radius:var(--nk-radius-sm);
  background:var(--nk-error-50,rgba(220,38,38,.08));color:var(--nk-error,#b91c1c);
  font-size:var(--nk-text-sm);line-height:1.4}

/* While a request is in flight the panel stops taking input, so a slow connection cannot turn one
   tap into two codes — or two sign-ins. */
.site-signin-busy .site-signin-pane{opacity:.6;pointer-events:none}

/* ---- My trips ----------------------------------------------------------------------------------
   Every rule below is scoped under .trips-page, the class this page's <main> carries. This
   stylesheet is loaded by the layout on EVERY page, so an unscoped page-specific rule is a rule
   applied to the whole site: .trip-leg here silently restyled the search panel's own journey rows
   (Views/Partials/booking/_SearchPanel.cshtml owns that class) and distorted the panel everywhere.
   Site-wide chrome — the account control and the sign-in panel — stays unscoped above; anything
   belonging to one page goes here, under the scope. */

.trips-page{padding:1.25rem 0 3rem}
.trips-page .trips-head{margin-bottom:1.25rem}
.trips-page .trips-head h1{margin:0 0 .25rem;font-size:var(--nk-text-2xl)}
.trips-page .trips-head p{margin:0;color:var(--nk-ink-soft);font-size:var(--nk-text-sm)}

.trips-page .trips-group{margin-top:1.5rem}
.trips-page .trips-group h2{margin:0 0 .75rem;font-size:var(--nk-text-lg)}

.trips-page .trips-list{display:grid;gap:.85rem}
@media(min-width:900px){
  /* Two across only where a card still has room to breathe. Below this a single column keeps every
     line of a journey on one line, which matters more than density. */
  .trips-page .trips-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.trips-page .trip-card{border:1px solid var(--nk-line);border-radius:var(--nk-radius-md);background:var(--nk-surface);
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.75rem}
.trips-page .trip-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.trips-page .trip-card-ref{font-size:var(--nk-text-xs);color:var(--nk-ink-soft);letter-spacing:.03em}
.trips-page .trip-card-ref strong{display:block;color:var(--nk-ink);font-size:var(--nk-text-sm);
  font-variant-numeric:tabular-nums;letter-spacing:0}

/* Named trips-leg, NOT trip-leg: the search panel already owns .trip-leg for each journey row it
   renders (Views/Partials/booking/_SearchPanel.cshtml), and this stylesheet is loaded on every page
   by the layout. Styling that name here turned every search panel on the site into a stack of
   bordered rows. Anything added below belongs to the My trips card and must stay under a name only
   this page uses. */
.trips-page .trips-leg{display:flex;flex-direction:column;gap:.2rem;padding-top:.65rem;border-top:1px dashed var(--nk-line)}
.trips-page .trips-leg:first-of-type{padding-top:0;border-top:none}
.trips-page .trips-leg-route{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;font-weight:700}
.trips-page .trips-leg-route .material-symbols-outlined{font-size:1rem;color:var(--nk-ink-soft)}
.trips-page .trips-leg-when{color:var(--nk-ink-soft);font-size:var(--nk-text-sm)}
.trips-page .trips-leg-meta{display:flex;flex-wrap:wrap;gap:.35rem .75rem;color:var(--nk-ink-soft);font-size:var(--nk-text-xs)}
.trips-page .trips-leg-pnr{font-variant-numeric:tabular-nums}

.trips-page .trip-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.trips-page .trip-card-total{font-weight:700}
.trips-page .trip-card-foot .nk-btn{min-height:2.75rem}

.trips-page .trips-empty{border:1px dashed var(--nk-line);border-radius:var(--nk-radius-md);padding:2rem 1.25rem;
  text-align:center;color:var(--nk-ink-soft)}
.trips-page .trips-empty .material-symbols-outlined{font-size:2.5rem;display:block;margin:0 auto .5rem;opacity:.5}
.trips-page .trips-empty p{margin:0 0 1rem}