/* Rules Tailwind utilities can't express neatly, shared across pages. */

html { -webkit-text-size-adjust: 100%; }
body { background: #F3F4EF; color: #14201B; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
a { color: #1F6F5C; }
a:hover { color: #14503F; }

:focus-visible { outline: 3px solid #1F6F5C; outline-offset: 2px; }

/* The bar across the top while a page that is slow to come is on its way. */
.turbo-progress-bar { background: #1F6F5C; }

/* Signed-in frame: sidebar on desktop, a single column on phones. */
.app { min-height: 100vh; }
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
}

.icon-btn {
  width: 44px; height: 44px; border-radius: 22px; background: #FFFFFF; border: 1px solid #DCDFD7;
  color: #14201B; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-btn:hover { border-color: #14201B; color: #14201B; }

.tab {
  min-height: 44px; padding: 0 16px; display: flex; align-items: center; text-decoration: none;
  color: #5A645F; font-weight: 500; font-size: 15px; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.tab:hover { color: #14201B; }
.tab-on { color: #14201B; font-weight: 600; border-bottom-color: #14201B; }

.navbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; text-decoration: none; color: #5A645F; font-size: 12px; font-weight: 500; border-radius: 12px;
}
.navbtn:hover { color: #14201B; }
.navbtn-on { color: #14201B; font-weight: 600; background: #EEF0E9; }

.btn {
  min-height: 52px; padding: 0 22px; border-radius: 14px; background: #14201B; color: #FFFFFF !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  font-weight: 600; font-size: 15px; border: 0; cursor: pointer;
}
.btn:hover { background: #2A3631; }
.btn-quiet {
  min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid #DCDFD7; background: #FFFFFF; color: #14201B !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.btn-quiet:hover { border-color: #14201B; }
.btn-danger { border-color: #E8C4BD; color: #A3291A !important; }
.btn-danger:hover { border-color: #A3291A; }

/* A form that takes a while (looking places up on Google Maps): its button
   says what it is doing, with a turning ring, until the answer is in. Turbo
   disables the button and swaps its words (data-turbo-submits-with). */
button[data-turbo-submits-with]:disabled { opacity: 0.75; cursor: progress; }
button[data-turbo-submits-with]:disabled::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: turning 0.7s linear infinite;
}
@keyframes turning { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button[data-turbo-submits-with]:disabled::before { animation: none; } }
/* What was typed stays put while it is on its way. */
form[aria-busy="true"]:has(button[data-turbo-submits-with]) textarea { opacity: 0.6; pointer-events: none; }

.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5A645F; }

.card { background: #FFFFFF; border: 1px solid #DCDFD7; border-radius: 18px; }
a.card { text-decoration: none; color: #14201B; }
a.card:hover { border-color: #14201B; color: #14201B; }

.chip { font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }

.field-input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid #DCDFD7; background: #FFFFFF;
  font: 400 16px 'IBM Plex Sans', sans-serif; color: #14201B; box-sizing: border-box;
}
.field-input:focus { border-color: #14201B; outline: none; box-shadow: 0 0 0 3px rgba(31, 111, 92, 0.25); }

/* Inline-edit inputs on the booking detail page. */
.line-input {
  font: 500 16px 'IBM Plex Sans', sans-serif; color: #14201B; border: 0; background: transparent;
  padding: 4px 0; min-height: 36px; flex-grow: 1; min-width: 0; box-sizing: border-box; border-bottom: 1px dashed transparent;
}
.line-input:hover { border-bottom-color: #DCDFD7; }
.line-input:focus { outline: none; border-bottom-color: #14201B; }
.line-input.mono { font-family: 'IBM Plex Mono', monospace; }

.stripe { background: repeating-linear-gradient(45deg, #D99A12 0 3px, #FFF3D6 3px 6px); }

.reading-bar { width: 76px; height: 4px; border-radius: 2px; background: #DCDFD7; overflow: hidden; display: block; }
.reading-bar > span { display: block; height: 4px; width: 40%; background: #14201B; animation: reading 1.4s ease-in-out infinite; }
@keyframes reading { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .reading-bar > span { animation: none; width: 55%; } }

/* Drop zone highlight while a file is dragged over it. */
.dropzone.drag { border-color: #1F6F5C; background: #E3EEE9; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.pb-nav { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .pb-nav { padding-bottom: 48px; } }

html { scroll-padding-top: 16px; }

.add-tile {
  min-height: 72px; border-radius: 16px; border: 1px solid #DCDFD7; background: #FFFFFF; color: #14201B;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 12px 14px;
  font: 600 14px 'IBM Plex Sans', sans-serif; text-align: left; cursor: pointer; text-decoration: none;
}
.add-tile:hover { border-color: #14201B; color: #14201B; }
.add-tile:focus-within { outline: 3px solid #1F6F5C; outline-offset: 2px; }

/* Desktop itinerary calendar. */
.cal-night { background: repeating-linear-gradient(135deg, #E9EBE5 0 6px, #F1F2EE 6px 12px); }
/* The hours before sunrise and after sunset, over the day and under its cards. */
.cal-dark { background: rgba(40, 58, 92, 0.13); border-color: rgba(40, 58, 92, 0.3); }
.cal-ev:hover { border-color: #14201B !important; }
.cal-tile > svg { width: 70%; height: 70%; }
.cal-ev:focus-visible { outline-offset: 1px; z-index: 1; }

/* Dragging a plan onto the calendar. */
[data-plan][draggable="true"] { cursor: grab; }
.drop-marker {
  position: absolute; left: 3px; right: 3px; z-index: 2; pointer-events: none; box-sizing: border-box;
  border: 2px dashed #1F6F5C; border-radius: 10px; background: rgba(227, 238, 233, 0.75);
  font: 600 11px 'IBM Plex Mono', monospace; color: #14503F; padding: 3px 6px;
}
.drop-on { outline: 2px dashed #1F6F5C; outline-offset: -2px; background: #E3EEE9 !important; }

/* Getting between places: the pop-up with the ways to go. A sheet from the
   bottom on phones; beside the slot that opened it on desktop. */
.ride-dialog {
  border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88vh; overflow-y: auto;
  border-radius: 24px 24px 0 0; background: #FFFFFF; color: #14201B; box-shadow: 0 -8px 32px rgba(20, 32, 27, 0.18);
}
.ride-dialog::backdrop { background: rgba(20, 32, 27, 0.45); }
@media (min-width: 1024px) {
  .ride-dialog {
    width: 360px; margin: 0; max-height: calc(100vh - 24px); border: 1px solid #DCDFD7; border-radius: 16px;
    box-shadow: 0 12px 32px rgba(20, 32, 27, 0.18);
  }
  .ride-dialog::backdrop { background: transparent; }
  .ride-dialog:has([data-pop-wide]) { width: 440px; } /* the plan form needs the room */
}
/* Going on from what the pop-up shows: it stays, dimmed, with a bar across
   the top, until the answer is in. */
.ride-dialog [data-refilling] > * { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }
.ride-dialog [data-refilling]::before {
  content: ""; position: sticky; top: 0; z-index: 1; display: block; height: 3px; margin-bottom: -3px;
  background: linear-gradient(90deg, transparent, #1F6F5C, transparent) 0 0 / 40% 100% no-repeat;
  animation: refilling 1.1s ease-in-out infinite;
}
@keyframes refilling { 0% { background-position: -70% 0; } 100% { background-position: 170% 0; } }
@media (prefers-reduced-motion: reduce) { .ride-dialog [data-refilling]::before { animation: none; background-size: 100% 100%; } }
.cal-slot:hover { border-color: #14201B !important; background: #FFFFFF; }

/* An empty hour on the calendar: pressing it offers what to add there. */
[data-drop-grid] [data-day] { cursor: pointer; }
.cell-menu {
  position: absolute; left: 3px; z-index: 3; box-sizing: border-box; width: max(calc(100% - 6px), 184px);
  display: flex; flex-direction: column; gap: 2px; padding: 6px; cursor: default;
  background: #FFFFFF; border: 1px solid #DCDFD7; border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 32, 27, 0.16);
}
.cell-menu-end { left: auto; right: 3px; }
.cell-ghost { position: absolute; left: 3px; right: 3px; opacity: 0; pointer-events: none; }
.cell-menu a {
  min-height: 44px; padding: 4px 8px; border-radius: 10px; display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: #14201B; font-size: 13px; font-weight: 600; line-height: 1.25;
}
.cell-menu a:hover { background: #EEF0E9; color: #14201B; }
.cell-menu-text { min-width: 0; }
.cell-menu-text small { display: block; font-size: 11px; font-weight: 400; color: #4A544F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-menu-tile {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 500; line-height: 1;
}
.cell-menu-plan { background: #E2F0E7; color: #22603C; }
.cell-menu-stay {
  border: 1px dashed #B4560F; background: repeating-linear-gradient(135deg, #FBEBDD 0 6px, #FFFFFF 6px 12px);
}

/* "Have you booked it?" on the flight form: the booking ref shows only once
   Booked is picked, and what a placeholder is only until then. */
.booked-ask .booked-yes { display: none; }
.booked-ask:has(input[value="yes"]:checked) .booked-yes { display: flex; }
.booked-ask:has(input[value="yes"]:checked) .booked-no { display: none; }

/* Exporting the itinerary: a format to pick, the picked one outlined. */
.export-pick {
  min-height: 72px; padding: 12px; border-radius: 14px; border: 1px solid #DCDFD7; background: #FFFFFF;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.export-pick:hover { border-color: #14201B; }
.export-pick:has(input:checked) { border-color: #14201B; box-shadow: inset 0 0 0 1px #14201B; background: #FBFBF8; }
.export-pick:has(input:focus-visible) { outline: 3px solid rgba(31, 111, 92, 0.4); outline-offset: 2px; }