@import "src/features/board/board.css";
@import "src/features/budget/budget.css";
@import "src/features/builder/builder.css";
@import "src/features/calendar/calendar.css";
@import "src/features/tiles/tiles.css";
@import "src/features/tiles/desktop-size.css";
@import "src/features/tiles/tile-popup.css";
@import "src/features/transfer/transfer.css";
@import "src/features/account/account.css";
@import "src/ui/groups.css";
@import "src/ui/people.css";
@import "src/ui/bars.css";

/* Vertical centring: Segoe UI (Windows) and Roboto (Android) place their capitals below the middle of the line box, so text looked a hair low in every button, tab, search box, drop-down and input. These two faces are the same fonts with their ascent/descent split moved so the capital letters sit on the middle of the line (the total height, and so every control size, is unchanged). Other systems fall through to system-ui. */
@font-face { font-family: "Planner Segoe"; font-weight: 400; src: local("Segoe UI"); ascent-override: 101.5%; descent-override: 31.5%; line-gap-override: 0%; }
@font-face { font-family: "Planner Segoe"; font-weight: 600; src: local("Segoe UI Semibold"); ascent-override: 101.5%; descent-override: 31.5%; line-gap-override: 0%; }
@font-face { font-family: "Planner Segoe"; font-weight: 700; src: local("Segoe UI Bold"); ascent-override: 101.5%; descent-override: 31.5%; line-gap-override: 0%; }
@font-face { font-family: "Planner Roboto"; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"); ascent-override: 94.1%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Planner Roboto"; font-weight: 500; src: local("Roboto Medium"), local("Roboto-Medium"); ascent-override: 94.1%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Planner Roboto"; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"); ascent-override: 94.1%; descent-override: 23%; line-gap-override: 0%; }
/* Colour tokens: night mode overrides these under [data-theme="dark"]. */
:root {
  --bg: #e8eaf0;
  --surface: #ffffff;
  --surface-alt: #f9fafb;
  --border: #c8ccd5;
  --text: #111827;
  --text-muted: #4b5563;
  --text-faint: #6b7280;
  --accent: #4f46e5;
  --accent-deep: #3730a3; /* outline for Location tiles and fields */
  --accent-text: #ffffff;
  /* Event tile colours (one place to change them): fill, outline, and the night-mode tint, outline and popup accent */
  --event-fill: #fdebcb; --event-edge: #d97706; --event-tint: rgba(245, 158, 11, 0.2); --event-edge-night: rgba(251, 191, 36, 0.5); --event-accent-night: #fcd34d;
  --danger: #dc2626; /* invalid fields, Needs Update */
  --danger-ink: #b91c1c; /* Delete icon and outline share one red: dark red by day... */
  --danger-hover: #b91c1c; /* the bin buttons' red when pointed at, the same in both modes */
  --radius: 6px; /* tiles, fields and buttons */
  --radius-panel: 10px; /* every panel: Day boxes, Drawing Board groups, Budget panels */
  --text-secondary: var(--text-muted); /* dimmer second lines on tiles */
  /* Surface scale: --bg is the page, --surface a panel, --surface-alt a raised or title strip. Group and panel outlines use --border-soft; only inputs keep --border. */
  --border-soft: #c9cfda;
  --shadow-raised: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-row: rgba(17, 24, 39, 0.3); /* the colour of the shadow under each Drawing Board group */
  /* Tile colours: fill, thin outline, and the strong Bar part colour (night mode overrides the fill and outline with quiet tints) */
  --tile-transport-fill: #d0e2ff; --tile-transport-line: #2563eb; --tile-transport-bar: #2563eb;
  --tile-activity-fill: #FFE9F2; --tile-activity-line: #FB4493; --tile-activity-bar: #FB4493;
  --tile-stay-fill: #d6efe0; --tile-stay-line: #16a34a; --tile-stay-bar: #16a34a;
  --font: "Planner Segoe", "Planner Roboto", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Night mode palette, taken from the reference screenshot; toggled by src/features/theme. */
[data-theme="dark"] {
  --bg: #0e0d15;
  --surface: #252439;
  --surface-alt: #302f46;
  --border: #4b4a5c;
  --text: #f3f4f6;
  --text-muted: #c7c7d1;
  --text-faint: #a3a2b3;
  --icon: #e0e7ff;
  --border-soft: #4a4966;
  --shadow-raised: none;
  --shadow-row: rgba(0, 0, 0, 0.6);
  --tint: 30%; /* night fill strength: the strong bar colour at this share, shared by Itinerary tiles, Drawing Board rows and Budget */
  --tint-loc: 34%;
  --tile-transport-bar: #38bdf8; --tile-activity-bar: #ec4899; --tile-stay-bar: #22c55e; --tile-location-bar: #818cf8; --event-bar-night: #f59e0b;
  --tile-transport-fill: color-mix(in srgb, var(--tile-transport-bar) var(--tint), transparent); --tile-transport-line: color-mix(in srgb, var(--tile-transport-bar) 50%, transparent);
  --tile-activity-fill: color-mix(in srgb, var(--tile-activity-bar) var(--tint), transparent); --tile-activity-line: color-mix(in srgb, var(--tile-activity-bar) 50%, transparent);
  --tile-stay-fill: color-mix(in srgb, var(--tile-stay-bar) var(--tint), transparent); --tile-stay-line: color-mix(in srgb, var(--tile-stay-bar) 50%, transparent);
  --tile-location-fill: color-mix(in srgb, var(--tile-location-bar) var(--tint-loc), transparent);
  --event-tint: color-mix(in srgb, var(--event-bar-night) var(--tint), transparent); --event-edge-night: color-mix(in srgb, var(--event-bar-night) 50%, transparent);
  --danger-ink: #e5a3a3; /* ...and the lighter red at night */
}

* { box-sizing: border-box; }

/* Keep [hidden] winning over display rules such as .day-grid's grid. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, select:focus-visible, .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* one visible keyboard focus ring */

/* Header */
.sticky-top { position: sticky; top: 0; z-index: 10; }
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 26px; /* 26px each side: the buttons line up with the edges of the full-width Drawing Board card and stay clear of the scrollbar */
  background: var(--surface);
}
/* The title sits on the left of the Header Bar, the global icons on the right. */
.title-block { display: flex; align-items: center; min-width: 0; }
.app-header h1 { margin: 0; font-size: 1.3rem; line-height: 1.2; white-space: nowrap; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.app-header [data-action="more"] { display: none; } /* phones only (rule in the 560px block) */
.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--icon, var(--accent));
}
/* Sun icon shown in night mode, always white. */
[data-theme="dark"] [data-action="theme"] { color: #fff; }
.icon-btn:disabled { cursor: default; }
.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5; /* a finer line than the 2 used on the Menu Bar icons */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn svg .fill { fill: currentColor; stroke: none; }
@media (hover: hover) { .app-header .icon-btn:not(:disabled):not([data-action="purge"]):hover, [data-theme="dark"] .app-header .icon-btn:not(:disabled):not([data-action="purge"]):hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } /* pointed at, the button inverts: a purple tile with a white icon, like the search, sort and filter icons */ }

/* Tabs */
.tabs {
  --bar-h: 52px;
  height: var(--bar-h);
  display: flex;
  gap: 16px; /* as wide as the space left of the first button */
  padding: 0 26px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tabs-nav { display: flex; gap: 8px; }
.tabs-nav a, .builder-btn {
  display: flex;
  align-items: center;
  align-self: center;
  height: 28px;
  padding: 0 14px;
  line-height: 1;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tabs .builder-btn svg, .tabs .view-toggle button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* icons stand in for the words on these Menu Bar buttons (the words stay as tooltips) */
.tabs-nav a, .builder-btn, .tabs .view-toggle button { padding-left: 5px; padding-right: 5px; } /* Menu Bar text buttons use the same 5px side padding as the Menu Bar icons */
.tabs .view-toggle button:not(.active), .tabs .builder-btn:not([aria-pressed="false"]) { color: var(--icon, var(--accent)); } /* unselected Menu Bar icons are purple like the Header Bar icons; the selected side stays white on purple */
.tabs-nav a { color: var(--icon, var(--accent)); } /* unselected tab words are purple like the unselected icons; the selected tab rule below sets white */

/* Tab switching without JS: Itinerary shows by default, a targeted panel replaces it. */
.panel { display: none; }
body:not(:has(.panel:target)) #itinerary,
.panel:target { display: block; }

body:not(:has(.panel:target)) [data-tab="itinerary"],
body:has(#itinerary:target) [data-tab="itinerary"],
body:has(#drawing-board:target) [data-tab="drawing-board"],
body:has(#budget:target) [data-tab="budget"] {
  background: var(--accent);
  border-color: var(--accent); /* no grey outline on the selected page */
  color: var(--accent-text);
}

/* Main area */
main {
  max-width: 1540px;
  margin: 0 auto;
  padding: 24px 44px 48px; /* side room so the slim add-day strip fits outside the Day 1 box */
}
body:not(:has(#drawing-board:target)):not(:has(#budget:target)) main { padding-top: 8px; } /* Itinerary (Calendar and Day by Day): the first row sits the same 8px under the Menu Bar or weekday bar line as the Day boxes sit from each other */
@media screen and (min-width: 561px) { body:is(:has(#drawing-board:target), :has(#budget:target)) main { padding-top: 0; } } /* Drawing Board and Budget set their own gap under the Menu Bar */

.view-toggle, .dlg-type {
  display: flex;
  width: fit-content;
  flex: none;
  align-self: center;
  height: 28px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.view-toggle button, .dlg-type button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  line-height: 1;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
}
body:has(#drawing-board:target) .view-toggle:not(.sort-toggle):not(.filter-toggle), body:has(#budget:target) .view-toggle:not(.budget-toggle) { display: none; }
.budget-toggle { display: none; } /* Budget only */
body:has(#budget:target) .budget-toggle { display: flex; }
.sort-toggle { display: none; } /* Drawing Board only */
body:has(#drawing-board:target) .sort-toggle { display: flex; }
/* The Drawing Board table uses the full width: its panel lines up with the header text on the left and the Print button on the right. */
body:has(#drawing-board:target) main { max-width: none; padding-left: 26px; padding-right: 26px; }
/* Menu Bar buttons show words, not icons, on every screen (accessible names stay on the buttons). */
.tabs-right .builder-btn svg, .tabs-right .view-toggle button svg { display: none; }
.tabs-right .view-toggle button { padding-left: 12px; padding-right: 12px; }
.tabs-right .builder-btn { padding-left: 12px; padding-right: 12px; }
.tabs-right .builder-btn::after { content: "Wizard"; }
.tabs-right [data-view="calendar"]::after { content: "Calendar"; }
.tabs-right [data-view="days"]::after { content: "Day by Day"; }
.tabs-right [data-mode="view"]::after { content: "View"; }
.tabs-right [data-mode="edit"]::after { content: "Edit"; }
.tabs-right [data-detail="detailed"]::after, .tabs-right [data-budget-detail="detailed"]::after { content: "Detailed"; }
.tabs-right [data-detail="basic"]::after, .tabs-right [data-budget-detail="basic"]::after { content: "Basic"; }
.view-toggle .active, .dlg-type .active { background: var(--accent); color: var(--accent-text); }

.tabs-right { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
/* While a Saved / No changes message shows, the other right-hand buttons turn invisible (still taking their space, so nothing shifts). */
.menu-note { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; white-space: nowrap; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; max-width: min(420px, calc(100vw - 32px)); }
.menu-note.error { color: var(--danger); }
[data-theme="dark"] .menu-note.error { color: #f87171; }
.tabs-right.noting > :not(.menu-note) { visibility: hidden; }

/* Day cards */
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* auto-fit: with few days the columns grow to fill the row, like a full week */
  gap: 8px;
}
.day {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}
/* Every second day gets a pale blue Box and Title Pane in print only (see print.css); on screen all Boxes share one fill. */
.day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 46px; /* a Title Pane without a date line is as tall as one with, so the bin has room to sit centred */
  padding: 10px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.85rem;
  line-height: 1.3;
}

.add-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--surface-alt); color: var(--accent);
  font: inherit; font-size: 0.75rem; opacity: 0.8; transition: opacity 0.15s; cursor: pointer; min-height: 90px;
}
.add-day:hover, .add-day:focus-visible { opacity: 1; font-weight: 700; border-style: solid; }
.add-day-plus { font-size: 1.4rem; font-weight: 700; line-height: 1; }
/* Day-by-day view: a slim strip hangs outside the left edge, as tall as Day 1 (absolutely placed in Day 1's grid cell). */
.days:not(.calendar) .add-day-before {
  position: absolute;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  right: 100%;
  margin-right: var(--box-gap, 2px);
  top: 0;
  bottom: 0;
  width: 36px;
  min-height: 0;
  padding: 0;
}
.days:not(.calendar) .day-grid { position: relative; }
/* Fewer than seven days: the + after button is the same slim 36px strip as the + before button, hanging off the right edge, so the days fill the row. */
.days:not(.calendar) .few-days .add-day-after { position: absolute; left: 100%; margin-left: var(--box-gap, 2px); top: 0; bottom: 0; width: 36px; min-height: 0; padding: 0; }
.days:not(.calendar) .few-days .add-day-after .add-day-date { display: none; }
.days:not(.calendar) .few-days .add-day-after .add-day-plus { font-size: 1rem; }
.days:not(.calendar) .add-day-before .add-day-date { display: none; }
/* When the last row has a gap beside the last day, the + after box fills that gap as an ordinary cell (set by fitAddAfter in builder.js). */
.days:not(.calendar) .day-grid .add-day-after.inline {
  position: static;
  grid-column: auto;
  left: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  width: auto;
  height: auto;
  min-height: 90px;
  padding: 0;
}
.day, .day-head { position: relative; }
.day.selected { outline: 3px solid var(--accent); outline-offset: -1px; }
.day-del {
  position: absolute; top: 8px; bottom: 8px; right: 8px; aspect-ratio: 1; display: none; place-items: center; padding: 0; /* phones: 8px above and below, 8px in from the right edge, lined up with the + Add buttons; the bin is as tall as the room left, so it shrinks with the Title Pane */
  border: 1px solid var(--danger-ink); border-radius: var(--radius); background: var(--surface); color: var(--danger-ink);
}
.day.selected .day-del { display: grid; }
.day.selected .day-head .day-date { visibility: hidden; } /* the date steps aside while the bin is showing */
.day-del svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.day-del:disabled { color: var(--text-faint); border-color: var(--border); cursor: not-allowed; }
.day-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; padding: 10px 14px;
  background: var(--text); color: var(--bg); border-radius: var(--radius); font-size: 0.85rem;
}
.day-toast button { margin-left: 8px; border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; }
/* Phones and other thin screens (days stack in one column): the + strips lie above Day 1 and below the last day instead of at the sides. */
@media (max-width: 560px) {
  :root { --phone-inset: 12px; } /* one side inset on phones: Header Bar, Menu Bar and every page's panels share it */
  /* Menu Bar: tighter tab padding and gaps so the tabs and buttons fit without sideways scrolling. */
  .tabs { padding: 0 6px; gap: 0; overflow-x: auto; scrollbar-width: none; } /* the Menu Bar scrolls sideways instead of cutting buttons off */
  .tabs::-webkit-scrollbar { display: none; }
  .tabs-nav a, .builder-btn { padding: 0 8px; font-size: 0.85rem; }
  .tabs-right { gap: 3px; }
  /* A second Menu Bar: the tabs keep the first row; the page's own tools (Builder Panel, toggles, search, sort) get a row of their own below it. */
  .tabs { height: auto; flex-direction: column; padding: 0; overflow: visible; }
  .tabs-nav, .tabs-right { box-sizing: border-box; height: var(--bar-h); align-items: center; overflow-x: auto; scrollbar-width: none; padding: 0 var(--phone-inset); flex: none; }
  .tabs-nav::-webkit-scrollbar, .tabs-right::-webkit-scrollbar { display: none; }
  .tabs-nav { gap: 6px; }
  .tabs-right { margin-left: 0; border-top: 1px solid var(--border); gap: 6px; }
  .menu-note { right: var(--phone-inset); max-width: calc(100% - 2 * var(--phone-inset)); } /* the message keeps the shared phone inset at its right end */
  /* Header Bar: "Travel Planner" and the Folder and Cloud Save buttons on row one; the trip name and the ⋯ and Sign Out buttons on row two. Buttons stay right aligned. A trip name too long to sit beside its two buttons sends them up to row one (.title-long, set in ui/headmenu.js). */
  .app-header { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 0; padding: 8px var(--phone-inset) 4px; position: relative; }
  .title-block, .app-header h1, .toolbar { display: contents; }
  .app-name { order: 1; flex: 1 1 0; min-width: 0; }
  .app-header [data-action="trips"] { order: 2; }
  .app-header [data-action="save-cloud"] { order: 3; }
  .app-header::after { content: ""; order: 4; flex: 0 0 100%; height: 0; }
  .trip-title { order: 5; flex: 1 1 0; min-width: 0; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; }
  .trip-title::before { content: none; }
  .app-header [data-action="more"] { order: 6; display: grid; margin: 8px 0 0 auto; }
  .app-header [data-action="sign-out"] { order: 7; margin-top: 8px; }
  .app-header.title-long [data-action="more"] { order: 4; margin-top: 0; }
  .app-header.title-long [data-action="sign-out"] { order: 5; margin-top: 0; }
  .app-header.title-long::after { order: 6; }
  .app-header.title-long .trip-title { order: 7; flex-basis: 100%; }
  .app-header [data-action="more"][aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
  .more-panel { position: absolute; right: var(--phone-inset); top: calc(100% - 2px); z-index: 30; display: flex; gap: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
  .more-panel:not(.open) { display: none; }
  .icon-btn { width: 34px; height: 34px; }
  .tabs { gap: 0; } .tabs-nav a, .builder-btn { padding: 0 clamp(4px, 1.6vw, 10px); font-size: clamp(0.72rem, 3.4vw, 0.85rem); }
  .view-toggle button { padding: 0 clamp(3px, 1.2vw, 8px); font-size: clamp(0.72rem, 3.4vw, 0.85rem); }
  .view-toggle button { padding: 0 8px; font-size: 0.85rem; }
  main { padding-left: var(--phone-inset); padding-right: var(--phone-inset); }
  body:has(#drawing-board:target) main { padding-left: var(--phone-inset); padding-right: var(--phone-inset); }
  main { padding-top: 8px; } /* the Drawing Board and Budget sit the same 8px under the Menu Bar as the Itinerary's Day boxes */
  #budget > .budget-layout { gap: 8px; padding-top: calc(var(--phone-inset) - 8px); } /* 8px of main padding plus this = the 12px phone inset under the Menu Bar */
  #budget .budget-layout > .board-card { margin-bottom: 0; }
  .days:not(.calendar) .day-grid .add-day-before,
  .days:not(.calendar) .day-grid .add-day-after {
    position: static; grid-column: 1 / -1; grid-row: auto; right: auto; left: auto; top: auto; bottom: auto;
    margin: 0; width: auto; height: 36px; min-height: 0; padding: 0;
  }
  .days:not(.calendar) .day-grid .add-day-date { display: none; }
  .days:not(.calendar) .day-grid .add-day-plus { font-size: 1rem; }
  /* Everything spans the inset-to-inset width so the three rows line up: icons spread evenly, tabs share the row, page tools fill their row. */
  .tabs-nav a { flex: 1 1 0; justify-content: center; }
  .tabs-right { justify-content: space-between; }
  .tabs-right .board-search-box, .tabs-right .sort-toggle, .tabs-right .filter-toggle, .tabs-right .budget-sort-toggle, .tabs-right .budget-detail-toggle { flex: 1 1 0; min-width: 0; width: auto; } /* Drawing Board and Budget: search, Sort By and Filter By (or Detailed / Basic) share the row in equal thirds */
  .tabs-right .board-search { flex: 1 1 auto; width: auto; }
  /* Every button in the top bars is 34px tall, with 8px above and below in each row (Header Bar padding, Menu Bar rows). */
  .tabs { --bar-h: 50px; }
  /* The gap between every pair of button rows is 8px, the same as under the last row, above the bar line. */
  .app-header { padding-bottom: 4px; }
  .tabs-nav { height: 42px; }
  .tabs-right { height: 46px; padding-top: 4px; padding-bottom: 8px; }
  .tabs-nav a, .tabs-right .builder-btn, .tabs-right .view-toggle, .tabs-right .board-search-box { height: 34px; }
  .tabs-right .board-search-icon { width: 34px; height: 34px; padding: 8px; }
  .tabs-right svg.sort-label { width: 34px; height: 34px; padding: 8px; } /* the Sort By and Filter By icon tiles match the search icon tile */
  .tabs-right .sort-pick { flex: 1 1 0; min-width: 0; }
  .tabs-right .sort-pick select { width: 100%; min-width: 0; padding-left: 8px; padding-right: 24px; }
  .tabs-right .budget-detail-toggle button { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; justify-content: center; } /* Detailed and Basic take half each */
  /* Itinerary row: Wizard, View / Edit and Detailed / Basic grow to fill the line, like the tabs above. */
  .tabs-right .builder-btn, .tabs-right .mode-toggle, .tabs-right .detail-toggle { flex: 1 1 0; width: auto; justify-content: center; }
  .tabs-right .builder-btn, .tabs-right .mode-toggle, .tabs-right .detail-toggle, .tabs-right .mode-toggle button, .tabs-right .detail-toggle button { min-width: 0; padding-left: 0; padding-right: 0; }
  .tabs-right .builder-btn, .tabs-right .mode-toggle, .tabs-right .detail-toggle { box-sizing: border-box; }
  .tabs-right .mode-toggle, .tabs-right .detail-toggle { flex-grow: 1; flex-basis: 2px; } /* the toggles draw their borders on the buttons, so they start 2px wide, as the Wizard button does with its own border */ /* Wizard, View / Edit and Detailed / Basic sit under Itinerary, Drawing Board and Budget, each toggle split in halves */
  .tabs-right .mode-toggle button, .tabs-right .detail-toggle button { flex: 1 1 0; justify-content: center; }
  /* One line under the whole Menu Bar, none between the bars' rows. */
  .tabs { border-top: 0; }
  .tabs-right { border-top: 0; }
}
.empty { color: var(--text-muted); text-align: center; padding: 48px 0; }

/* Desktop Itinerary layout; sized directly in pixels (no CSS zoom, which put outlines on fractional pixels). */
@media screen and (min-width: 561px) {
  .weekday-row { font-size: 0.85rem; }
  #itinerary .day-head { min-height: 0; padding-top: 8px; padding-bottom: 8px; } /* 8px above and below the text, like every other gap; the bin sits 5px inside it on each side, so it is as tall as the room left */
  #itinerary .day-del { top: 5px; bottom: 5px; right: 8px; } /* 5px above and below (halfway between the 8px of the + Add buttons and the old 2px); its right edge lines up with the right edge of the + Add buttons (8px in) */
  #itinerary .day-grid { --box-gap: 8px; gap: var(--box-gap); } /* like the weekday boxes */
  #itinerary .day-grid:not(.few-days) { grid-template-columns: repeat(auto-fit, minmax(max(209px, calc((100% - 6 * 8px) / 7)), 1fr)); } /* never more than seven columns, so the + after box does not become an eighth */
  #itinerary .days.calendar .day-grid:not(.few-days) { grid-template-columns: repeat(7, minmax(0, 1fr)); } /* Calendar view is always seven columns, whatever the width, to match the weekday boxes */
  /* Day 1 and Day 7 line up with the outer edges of the Drawing Board panel (about 1792px wide at most, otherwise the window minus 45px a side); the slim + strip and its box-gap hang in the room beside it, out to the bars' 26px edge */
  body:not(:has(#drawing-board:target)):not(:has(#budget:target)) main { max-width: 1882px; padding-left: 73.6px; padding-right: 73.6px; }
  .weekday-row { max-width: 1882px; padding: 0 45px; gap: 8px; } /* the weekday boxes stay lined up with the day columns */
}

/* Date boxes (ui/datebox.js): plain text at rest, no icon of our own; a click opens the browser's calendar. */
@media print { .board-table input.date-fmt::placeholder { color: transparent; } } /* an empty date prints blank, not as its hint */

/* Dark mode: the dashed "+ Add" and add-day outlines use a lighter indigo so they stand out on the dark cards. */
[data-theme="dark"] .add-day, [data-theme="dark"] .day-content .add { border-color: #a5b4fc; color: #a5b4fc; }

/* Header Bar and Menu Bar: pointing at a button outlines it in indigo, like the "+ Add" rows. */
@media (hover: hover) { .app-header .icon-btn:not(:disabled):hover, .tabs-nav a:hover, .builder-btn:hover, :is(.tabs-right, .trip-tools) .sort-pick:hover { border-color: var(--accent); } }
@media (hover: hover) { [data-theme="dark"] .app-header .icon-btn:not(:disabled):hover, [data-theme="dark"] .tabs-nav a:hover, [data-theme="dark"] .builder-btn:hover, [data-theme="dark"] :is(.tabs-right, .trip-tools) .sort-pick:hover { border-color: #a5b4fc; } /* same as the + Add rows in night mode */ }
@media (hover: hover) { .app-header .icon-btn[data-action="purge"]:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--accent-text); } /* the bin and its outline turn the same red when pointed at, in both modes */ }
@media (hover: hover) { [data-theme="dark"] .app-header .icon-btn[data-action="purge"]:not(:disabled):hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--accent-text); } /* night mode: the same dark red as day, with no light indigo edge */ }
@media (hover: hover) { .day-del:not(:disabled):hover, .dlg-delete:hover, [data-theme="dark"] .day-del:not(:disabled):hover, [data-theme="dark"] .dlg-delete:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--accent-text); } /* every delete control flips to a red tile with a white icon or label when pointed at, like the Header Bar bin */ }
.builder-btn { display: none; cursor: pointer; font-weight: 400; font-family: inherit; }
.builder-btn[aria-pressed="false"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } /* lit while the Builder Panel is showing, like the selected tab */ /* Itinerary only */
body:not(:has(.panel:target)) .builder-btn, body:has(#itinerary:target) .builder-btn { display: flex; }

/* Menu Bar toggles and the search box are built like the tiles: two separate shapes that touch (the purple half like the Bar part, the white half like the Tile part), each with its own border and its own outer corners, so no clipped corners. */
:is(.tabs-right, .trip-tools) .view-toggle, :is(.tabs-right, .trip-tools) .board-search-box { border: 0; border-radius: 0; overflow: visible; background: transparent; gap: 0; }
:is(.tabs-right, .trip-tools) .view-toggle > *, :is(.tabs-right, .trip-tools) .board-search-box > * { box-sizing: border-box; border: 1px solid var(--border); background: var(--surface); }
:is(.tabs-right, .trip-tools) .view-toggle > :first-child, :is(.tabs-right, .trip-tools) .board-search-box > :first-child { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
:is(.tabs-right, .trip-tools) .view-toggle > :last-child, :is(.tabs-right, .trip-tools) .board-search-box > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
:is(.tabs-right, .trip-tools) .view-toggle > .active, :is(.tabs-right, .trip-tools) .view-toggle > .sort-label, :is(.tabs-right, .trip-tools) .board-search-box > .board-search-icon { background: var(--accent); border-color: var(--accent); }
@media (hover: hover) { :is(.tabs-right, .trip-tools) .view-toggle:hover > *, :is(.tabs-right, .trip-tools) .board-search-box:hover > * { border-color: var(--accent); } }
@media (hover: hover) { [data-theme="dark"] :is(.tabs-right, .trip-tools) .view-toggle:hover > *, [data-theme="dark"] :is(.tabs-right, .trip-tools) .board-search-box:hover > * { border-color: #a5b4fc; } }
@media (hover: hover) { :is(.tabs-right, .trip-tools) .view-toggle:hover > :last-child:not(.active):not(.sort-label), :is(.tabs-right, .trip-tools) .board-search-box:hover > .board-search { border-left-color: var(--border); } /* the line between the two parts stays unpainted on hover (both modes) */ }
@media (hover: hover) { [data-theme="dark"] :is(.tabs-right, .trip-tools) .view-toggle:hover > :last-child:not(.active):not(.sort-label), [data-theme="dark"] :is(.tabs-right, .trip-tools) .board-search-box:hover > .board-search { border-left-color: var(--border); } }

/* Search box: icon, field, then a purple clear button (a Bar part again, rounded on the far side); the field in between has no right edge so it meets the cross. */
:is(.tabs-right, .trip-tools) .board-search-box > .board-search { border-left: 0; border-right: 0; border-radius: 0; } /* no grey line beside the purple icon, like the cross side */
:is(.tabs-right, .trip-tools) .board-search-box > .board-search-clear { border-left: 0; cursor: pointer; display: grid; place-items: center; padding: 0; } /* the cross sits dead centre of its tile at any tile size */
.board-search::-webkit-search-cancel-button { display: none; }
.board-search-clear svg { display: block; width: 18px; height: 18px; fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; }
/* Search box outline: a thin 1px purple line while pointed at or typed in (no thicker focus ring, however many times it is hovered while focused). */
:is(.tabs-right, .trip-tools) .board-search-box > .board-search:focus, :is(.tabs-right, .trip-tools) .board-search-box > .board-search:focus-visible { outline: none; box-shadow: none; }
:is(.tabs-right, .trip-tools) .board-search-box:focus-within > * { border-color: var(--accent); }
[data-theme="dark"] :is(.tabs-right, .trip-tools) .board-search-box:focus-within > * { border-color: #a5b4fc; }
:is(.tabs-right, .trip-tools) .board-search-box:focus-within > .board-search, [data-theme="dark"] :is(.tabs-right, .trip-tools) .board-search-box:focus-within > .board-search { border-left-color: var(--border); }
:is(.tabs-right, .trip-tools) .board-search-box > .board-search { margin-left: -1px; } /* the field tucks 1px under the purple icon, so no hairline can show between them at fractional browser zoom */
:is(.tabs-right, .trip-tools) .board-search-box > svg.board-search-icon { position: relative; z-index: 1; }
/* No grey line where a purple half meets its neighbour: the neighbour drops its left edge (the purple half's own border already outlines the pair). */
:is(.tabs-right, .trip-tools) .view-toggle > .sort-label + *, :is(.tabs-right, .trip-tools) .view-toggle > .active:first-child + * { border-left: 0; }
/* On hover the line between the two parts keeps the purple fill's colour (never the hover indigo), so it never reads as a divider, in both modes. */
@media (hover: hover) { .tabs-right .view-toggle:hover > .active:last-child, [data-theme="dark"] .tabs-right .view-toggle:hover > .active:last-child { border-left-color: var(--accent); } }
/* A selected right-hand half has no left edge either, so no purple (or any) line can show between the two parts, hovered or not, in both modes. */
.tabs-right .view-toggle > .active:last-child, .tabs-right .view-toggle:hover > .active:last-child, [data-theme="dark"] .tabs-right .view-toggle:hover > .active:last-child { border-left-width: 0; }

/* View mode: read-only itinerary */
.view-only .add-wrap, .view-only .add-day { display: none; }
.view-only .day-grid * { cursor: default; touch-action: auto; -webkit-user-select: none; user-select: none; }
.view-only .day-grid .tile-fold { cursor: pointer; }

@media (max-width: 560px) { .calendar-toggle { display: none !important; } } /* phones: Day by Day only */

/* Laptop and up: every working panel spans the same width as the Header Bar and Menu Bar contents (26px side padding). The one exception is the Itinerary in Day by Day mode, whose Day boxes keep 73.6px a side so the slim add-day strips fit; its Builder Panel hangs 47.6px into that room so it still lines up with the bars. */
@media screen and (min-width: 561px) {
  body:has(#budget:target) main { max-width: none; padding-left: 26px; padding-right: 26px; }
  body:has(.days.calendar):not(:has(#drawing-board:target)):not(:has(#budget:target)) main { max-width: none; padding-left: 26px; padding-right: 26px; }
  .weekday-row { max-width: none; padding: 0 26px; }
  body:not(:has(.days.calendar)):not(:has(#drawing-board:target)):not(:has(#budget:target)) main { max-width: none; } /* no centred cap, so the Builder Panel's edges stay on the bars' edges at any window width */
  #itinerary:not(:has(.days.calendar)) .builder { margin-left: -47.6px; margin-right: -47.6px; }
  /* Day by Day with full weeks: only the left strip needs the extra room, so the Day boxes' right edge lines up with the bars (a short trip keeps both sides, as its add-day strip hangs on the right). */
  body:not(:has(.days.calendar)):not(:has(.few-days)):not(:has(#drawing-board:target)):not(:has(#budget:target)) main { padding-right: 26px; }
  #itinerary:not(:has(.days.calendar)):not(:has(.few-days)) .builder { margin-right: 0; }
  /* View mode has no add-day strips, so the Day boxes take that side room and line up with the bars. */
  body:not(:has(.days.calendar)):not(:has(#drawing-board:target)):not(:has(#budget:target)):has(.view-only) main { padding-left: 26px; padding-right: 26px; }
  #itinerary.view-only:not(:has(.days.calendar)) .builder { margin-left: 0; margin-right: 0; }
}

/* Laptop and up: Menu Bar buttons are 34px tall like the Header Bar icons, with 8px above and below (34px + 16px). */
@media screen and (min-width: 561px) {
  .tabs { --bar-h: 50px; }
  .tabs-nav a, .builder-btn, .tabs-right .view-toggle, .tabs-right .board-search-box { height: 34px; }
  .tabs-right .board-search-icon, .tabs-right svg.sort-label { width: 34px; height: 34px; padding: 8px; } /* 8px keeps the glyph 18px, so its stroke stays 1.5px like the Header Bar icons */
}

@media screen and (min-width: 561px) { .tabs-nav a { padding-left: 12px; padding-right: 12px; } } /* tab words get the same 12px side gap as the right-hand Menu Bar buttons */