/* The page somebody arrives at.

   It used to be a different product from the planner: navy and cool grey out
   here, fern green and warm paper in there, two type scales, and four dead
   rule-sets left behind by earlier drafts of the brief form. One palette now,
   and one scale. */

.welcome-page {
    min-height: 100vh;
    background: var(--canvas);
}

/* --------------------------------------------------------------------- nav */

.public-nav {
    height: var(--space-8);
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    position: relative;
    z-index: 2;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.public-nav nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* -------------------------------------------------------------------- hero */

.home-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: min(70vh, 620px);
    overflow: hidden;
    background: var(--canvas-2);
}
.home-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% center;
}
/* Legible type over a photograph, without a slab of flat white over the
   picture: the veil is strongest exactly where the words are and gone by the
   time it reaches the mountains. */
.home-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(96deg,
            rgba(246, 247, 245, 0.97) 0%,
            rgba(246, 247, 245, 0.94) 26%,
            rgba(246, 247, 245, 0.62) 46%,
            rgba(246, 247, 245, 0) 70%);
}
.home-hero-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}
.hero-eyebrow {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--fern);
}
.home-hero-copy h1 {
    margin: 0 0 var(--space-4);
    max-width: 15ch;
    font-size: clamp(32px, 4.4vw, var(--text-2xl));
    line-height: 1.05;
    letter-spacing: var(--tracking-hero);
    font-weight: var(--weight-bold);
}
.welcome-lead {
    max-width: 46ch;
    margin: 0 0 var(--space-5);
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.hero-plan-form { max-width: 380px; }
.hero-plan-label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
}
.hero-plan-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.hero-date {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-1);
    color: var(--ink-3);
    transition: border-color var(--dur-1) var(--ease);
}
.hero-date:hover { border-color: var(--line-strong); }
.hero-date:focus-within { border-color: var(--fern); box-shadow: 0 0 0 3px var(--fern-tint-2); }
.hero-date svg { flex: none; }
.hero-date input {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.hero-date input:focus { outline: 0; }
.hero-date input::-webkit-calendar-picker-indicator { opacity: 0; width: 0; padding: 0; }
.hero-date-arrow { flex: none; color: var(--ink-3); }

.welcome-page .start-button { width: 100%; }

.privacy-note {
    margin: var(--space-2) 0 0;
    min-height: 18px;
    color: var(--ink-3);
    font-size: var(--text-xs);
}
.privacy-note:empty { display: none; }

/* ----------------------------------------------------------------- library */

.home-library {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-7) var(--space-6);
    display: grid;
    gap: var(--space-7);
}
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}
.section-head h2 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-tight);
}

/* Nobody signed in has trips to show, so the section is not there at all
   rather than there and empty. */
.welcome-page:not(.is-signed-in-home) .saved-trips { display: none; }

/* And the reverse: somebody who is signed in has already read the pitch. The
   hero shrinks to the one control still worth having up there, the reasons to
   use this go away, and their own trips are the first thing on the page. */
.welcome-page.is-signed-in-home .home-hero { min-height: 0; }
.welcome-page.is-signed-in-home .home-hero-copy {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}
.welcome-page.is-signed-in-home .hero-eyebrow,
.welcome-page.is-signed-in-home .welcome-lead,
.welcome-page.is-signed-in-home .home-why { display: none; }
.welcome-page.is-signed-in-home .home-hero-copy h1 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
}

/* ------------------------------------------------------------- your trips */

.trip-groups { display: grid; gap: var(--space-6); }
.trip-group-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
}

.trip-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-4);
}
/* Trips already taken are a shelf, not a workspace: one row until asked for. */
.trip-list.is-folded { grid-template-rows: 1fr; overflow: hidden; max-height: 300px; }

/* When a trip is, which is the reason the list is grouped at all. */
.trip-row-when {
    align-self: start;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--canvas-2);
    color: var(--ink-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.trip-group:first-child .trip-row-when { background: var(--fern-tint); color: var(--fern); }
.trip-row { position: relative; min-width: 0; }
.trip-row-open {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    text-align: left;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
}
.trip-row-open:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}
.trip-row-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4) var(--space-4);
}
.trip-row-body strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.trip-row-shape { color: var(--ink-2); font-size: var(--text-xs); }
.trip-row-route {
    color: var(--ink-3);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trip-row-body small {
    margin-top: var(--space-1);
    color: var(--ink-3);
    font-size: var(--text-2xs);
}

/* Managing a trip, rather than opening it. Both used to sit on the card at all
   times - a delete one click away from the thing you were trying to open. They
   are behind a menu now, and the menu only appears on hover or focus. */
.trip-row-tools {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease);
}
.trip-row:hover .trip-row-tools,
.trip-row:focus-within .trip-row-tools { opacity: 1; }
.trip-row-menu-button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink-2);
    backdrop-filter: blur(4px);
}
.trip-row-menu-button:hover { background: var(--paper); color: var(--ink); }
.trip-row-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 3;
    min-width: 176px;
    padding: var(--space-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-3);
}
.trip-row-menu button {
    width: 100%;
    min-height: 36px;
    padding: 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    font-size: var(--text-xs);
    text-align: left;
}
.trip-row-menu button:hover { background: var(--canvas); }
.trip-row-menu button.is-danger { color: var(--alert); }
.trip-row-menu button.is-danger:hover { background: var(--alert-tint); }

.trip-list-more {
    justify-self: start;
    margin-top: var(--space-4);
    min-height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--paper);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}
.trip-list-more:hover { border-color: var(--ink-3); color: var(--ink); }

.trip-list-empty {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--ink-3);
    text-align: center;
    font-size: var(--text-xs);
}

/* ------------------------------------------------------- today & tomorrow */
/* See the note at the top of today.js. Everything else on this page is about a
   trip that has not happened; this is the two days where an answer can actually
   be checked. */

.today-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}
.today-when {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-full);
    background: var(--canvas-2);
}
.today-day {
    min-height: 34px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}
.today-day.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
#today-question {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
}
#today-question:focus { border-color: var(--fern); outline: 0; box-shadow: 0 0 0 3px var(--fern-tint-2); }

.today-suggested {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.today-suggested:empty { display: none; }
.today-suggested-lead {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--fern);
}
.today-suggestion {
    min-height: 30px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--paper);
    color: var(--ink-2);
    font-size: var(--text-xs);
}
.today-suggestion:hover { border-color: var(--fern); color: var(--fern); background: var(--fern-tint); }

.today-status { margin: var(--space-3) 0 0; color: var(--ink-3); font-size: var(--text-xs); }
.today-status:empty { display: none; }

/* Enough to look back over a morning, not a diary. */
.today-results {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    max-height: 620px;
    overflow-y: auto;
}
.today-results:empty { display: none; }

.today-card {
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
}
.today-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.today-card-head h3 { margin: 0; font-size: var(--text-md); }
.today-card-where {
    margin: 0;
    color: var(--ink-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.today-forecast {
    margin: var(--space-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--ink-2);
}
.today-forecast strong {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--calm-tint);
    color: var(--calm);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.today-forecast small { color: var(--ink-3); font-size: var(--text-2xs); }
.today-forecast.is-missing { color: var(--ink-3); }

.today-summary {
    margin: var(--space-3) 0 0;
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.today-block { margin-top: var(--space-4); }
.today-block h4, .today-sources h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
}
.today-block ul {
    margin: 0;
    padding-left: var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
.today-block li + li { margin-top: var(--space-1); }
.today-block.is-check li::marker { color: var(--caution); }

.today-sources { margin-top: var(--space-4); }
.today-source-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.today-source {
    display: grid;
    gap: 1px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--canvas);
    text-decoration: none;
}
.today-source:hover { border-color: var(--fern); background: var(--fern-tint); }
.today-source strong { color: var(--fern); font-size: var(--text-xs); font-weight: var(--weight-semi); }
.today-source small { color: var(--ink-3); font-size: var(--text-2xs); }

.today-note {
    margin: var(--space-4) 0 0;
    color: var(--ink-3);
    font-size: var(--text-2xs);
    line-height: var(--leading-normal);
}

/* --------------------------------------------------------------- why strip */
/* Three things this app does that a general trip planner does not. All three
   are claims the code actually keeps. */

.home-why {
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.home-why-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-7) var(--space-6);
}
.why-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.why-list li { display: grid; gap: var(--space-2); align-content: start; }
.why-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--fern-tint);
    color: var(--fern);
}
.why-list strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-tight);
}
.why-list p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.home-foot {
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.home-foot p {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-5) var(--space-6);
    color: var(--ink-3);
    font-size: var(--text-2xs);
}

/* ------------------------------------------------------------------- auth */

.auth-panel {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    background: var(--scrim);
    backdrop-filter: blur(3px);
    animation: overlay-in var(--dur-2) var(--ease) both;
}
.auth-panel.is-signed-in { display: none !important; }
body:has(#auth-panel:not([hidden]):not(.is-signed-in)) { overflow: hidden; }
.auth-card {
    width: min(420px, 100%);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--paper);
    box-shadow: var(--shadow-4);
    animation: panel-in var(--dur-3) var(--ease-out) both;
}
.auth-copy h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.auth-copy p:last-child { margin: 0; color: var(--ink-2); font-size: var(--text-xs); }
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--canvas-2);
}
.auth-tab {
    min-height: 36px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
}
.auth-tab.is-active { color: var(--ink); background: var(--paper); box-shadow: var(--shadow-1); }
.auth-form { display: grid; gap: var(--space-3); }
.auth-form label { display: grid; gap: var(--space-1); }
.auth-form label span,
.trip-dates-form label span {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
}
.auth-status { min-height: 18px; margin: 0; color: var(--ink-3); font-size: var(--text-xs); }
.auth-status.is-error { color: var(--alert); }
.auth-dismiss {
    justify-self: center;
    border: 0;
    padding: 0;
    color: var(--ink-3);
    background: transparent;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.auth-dismiss:hover { color: var(--ink); }

.account-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: min(220px, 42vw);
    padding: 4px 12px 4px 4px;
    border-radius: var(--radius-full);
}
.account-avatar {
    width: 26px;
    height: 26px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--fern);
    background: var(--fern-tint);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
}
.account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- loading */

.loading-view { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); }
.loading-card {
    width: min(460px, 100%);
    padding: var(--space-7);
    border-radius: var(--radius-xl);
    background: var(--paper);
    box-shadow: var(--shadow-2);
    text-align: center;
}
.loading-mark { width: 44px; height: 44px; margin: 0 auto var(--space-5); border-radius: var(--radius-lg); }
.loading-card h2 { margin-bottom: var(--space-2); }
.loading-card p { margin: 0; color: var(--ink-3); font-size: var(--text-xs); }
.loading-steps { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }
.loading-steps span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fern);
    animation: pulse 1.1s infinite ease-in-out;
}
.loading-steps span:nth-child(2) { animation-delay: 0.14s; }
.loading-steps span:nth-child(3) { animation-delay: 0.28s; }
@keyframes pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------ narrow home */

@media (max-width: 1040px) {
    .why-list { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 700px) {
    .public-nav { height: 56px; padding: 0 var(--space-4); }
    .home-hero { min-height: 0; }
    .home-hero-shade {
        background: linear-gradient(180deg,
            rgba(246, 247, 245, 0.2) 0%,
            rgba(246, 247, 245, 0.86) 34%,
            rgba(246, 247, 245, 0.98) 52%);
    }
    .home-hero-copy { padding: 180px var(--space-4) var(--space-6); }
    .home-hero-copy h1 { max-width: none; }
    .hero-plan-form { max-width: none; }
    .hero-date-arrow { display: none; }
    .home-library { padding: var(--space-5) var(--space-4); gap: var(--space-6); }
    .home-why-inner, .home-foot p { padding-left: var(--space-4); padding-right: var(--space-4); }
    .trip-list { grid-template-columns: 1fr; }
    .today-form { grid-template-columns: 1fr; }
    .today-when { justify-self: start; }
    .trip-row-tools { opacity: 1; }
    .section-head { display: block; }
    .section-head span { display: block; margin-top: var(--space-1); }
}

/* What a saved trip comes to, on its card. Same words as the planner uses. */
.trip-row-cost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    font-variant-numeric: tabular-nums;
}
.trip-row-cost svg { flex: none; color: var(--ink-3); }

/* Somebody took this and licensed it for reuse on the condition of being
   named. Over the picture, so it costs the card no room. */
.trip-cover { position: relative; }
.trip-cover-credit {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 76%;
    padding: 2px var(--space-2);
    background: rgba(10, 20, 16, 0.5);
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-credit);
    line-height: 1.5;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm) 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}