/* Our Trips — the same Apple look as the other apps (built from Our Dog's styles, which came from Our Apartment's
   and Our Contacts'). The trip list, the day plan, the checklists and the map are at the end. */
:root {
  /* Apple's light-mode system colours */
  --bg: #f2f2f7;          /* grouped background */
  --surface: #ffffff;     /* grouped cells */
  --raised: #ffffff;
  --fill: rgba(118, 118, 128, .12);   /* search fields, inputs, segmented controls */
  --hover: #ebebf0;
  --ink: #1d1d1f;
  --muted: #55555a;       /* secondary label (same grey as Our Calendar and Our Flights) */
  --line: #e0e0e5;        /* separators */
  --accent: #007aff;      /* systemBlue */
  --on-accent: #ffffff;
  --mark: #ffe58a;
  --warn: #ff3b30;        /* systemRed */
  --amber: #ff9500;
  --bar: rgba(249, 249, 251, .86);
  --shadow: 0 12px 40px rgba(0, 0, 0, .18);
  --av-blue: #007aff; --av-green: #34c759; --av-indigo: #5856d6; --av-orange: #ff9500;
  --av-pink: #ff2d55; --av-purple: #af52de; --av-red: #ff3b30; --av-teal: #30b0c7;
  --av-yellow: #f2b300; --av-mint: #00c7be; --av-brown: #a2845e; --av-cyan: #32ade6;
  color-scheme: light;
}
/* Dark colours: used when the device is in dark mode (unless Light was chosen under ? → Appearance),
   or always when Dark was chosen. Keep the two blocks below identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --raised: #2c2c2e; --fill: rgba(118, 118, 128, .24); --hover: #2c2c2e;
    --ink: #f5f5f7; --muted: #b5b5ba; --line: #38383a;
    --accent: #0a84ff; --on-accent: #ffffff; --mark: #6b5a12; --warn: #ff453a; --amber: #ff9f0a;
    --bar: rgba(22, 22, 24, .86); --shadow: 0 12px 40px rgba(0, 0, 0, .6);
    --av-blue: #0a84ff; --av-green: #30d158; --av-indigo: #5e5ce6; --av-orange: #ff9f0a;
    --av-pink: #ff375f; --av-purple: #bf5af2; --av-red: #ff453a; --av-teal: #40c8e0;
    --av-yellow: #e6b800; --av-mint: #63e6e2; --av-brown: #ac8e68; --av-cyan: #64d2ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --raised: #2c2c2e; --fill: rgba(118, 118, 128, .24); --hover: #2c2c2e;
  --ink: #f5f5f7; --muted: #b5b5ba; --line: #38383a;
  --accent: #0a84ff; --on-accent: #ffffff; --mark: #6b5a12; --warn: #ff453a; --amber: #ff9f0a;
  --bar: rgba(22, 22, 24, .86); --shadow: 0 12px 40px rgba(0, 0, 0, .6);
  --av-blue: #0a84ff; --av-green: #30d158; --av-indigo: #5e5ce6; --av-orange: #ff9f0a;
  --av-pink: #ff375f; --av-purple: #bf5af2; --av-red: #ff453a; --av-teal: #40c8e0;
  --av-yellow: #e6b800; --av-mint: #63e6e2; --av-brown: #ac8e68; --av-cyan: #64d2ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
:root { --hair: 1px; }
@media (min-resolution: 2dppx) { :root { --hair: .5px; } }
html, body { margin: 0; height: 100%; }
/* Everything sized in rem scales from here. Text size (? → slider): Small · Medium (default) · Large · Extra large · Largest */
html { font-size: 16.5px; }
html[data-size="small"] { font-size: 15.5px; }
html[data-size="large"] { font-size: 18.5px; }
html[data-size="xlarge"] { font-size: 20.5px; }
html[data-size="xxlarge"] { font-size: 22.5px; }
@media (max-width: 760px) {   /* phones: Medium = iPhone standard reading size */
  html { font-size: 17px; }
  html[data-size="small"] { font-size: 16px; }
  html[data-size="large"] { font-size: 19px; }
  html[data-size="xlarge"] { font-size: 21px; }
  html[data-size="xxlarge"] { font-size: 23px; }
}
body {
  font: 400 1rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.01em;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons: soft grey fill by default, solid blue for the main action, plain blue text for links */
button {
  font: inherit; font-weight: 500; color: var(--accent); background: var(--fill);
  border: 0; border-radius: 10px; padding: 7px 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:hover { filter: brightness(.96); }
button:active { opacity: .7; }
button.primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.icon { width: 34px; height: 34px; padding: 0; font-size: 1.1rem; line-height: 1; flex: none; border-radius: 50%; font-weight: 600; }
button.link { background: none; padding: 2px 0; color: var(--accent); text-align: left; border-radius: 0; }
button.link:hover { background: none; text-decoration: underline; filter: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

input, textarea, select {
  font: inherit; color: var(--ink); background: var(--fill);
  border: 0; border-radius: 10px; padding: 8px 11px; min-width: 0;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
textarea { resize: vertical; line-height: 1.45; }

/* ── Screens ── */
.center-screen { min-height: 100dvh; display: grid; place-items: center; padding: 16px; color: var(--muted); }
.signin-card {
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow);
  padding: 36px 28px; text-align: center; max-width: 360px; width: 100%; color: var(--ink);
}
.signin-card h1 { margin: 0 0 6px; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.signin-card p { color: var(--muted); margin: 0 0 22px; }
.signin-card .primary { padding: 10px 22px; border-radius: 99px; }

#app { display: flex; flex-direction: column; height: 100dvh; }
main { flex: 1; min-height: 0; position: relative; display: flex; overflow: hidden; }
/* Pull-to-refresh (home-screen app on phones) */
.ptr { position: absolute; top: 0; left: 50%; width: 30px; height: 30px; margin-left: -15px; z-index: 5;
  opacity: 0; transform: translateY(-40px); pointer-events: none; }
.ptr-ring { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent);
  background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.15); box-sizing: border-box; }
.ptr.spinning .ptr-ring { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.ptr.settle, .list.settle { transition: transform .25s ease, opacity .25s ease; }

/* ── Header: translucent bar with a large title, like iOS ── */
.bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--hair) solid var(--line); position: relative; z-index: 3;
}
.app-title { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; flex: 1; min-width: 0; }
.app-title button { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 10px; }
.app-title button:hover { filter: none; }
.title-icon { width: 32px; height: 32px; border-radius: 22.5%; box-shadow: 0 0 0 .5px var(--line), 0 1px 3px rgba(0,0,0,.12); }
.tools { display: flex; align-items: center; gap: 8px; }
.search { position: relative; }
#search { width: 300px; padding: 8px 12px 8px 32px; }
/* Magnifying glass inside the search box, like Apple's search fields */
.search-icon { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  color: var(--muted); pointer-events: none; }
#new-btn { border-radius: 99px; padding: 7px 16px; }

.banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 20px; font-size: .88rem;
  background: color-mix(in srgb, var(--amber) 16%, var(--surface)); border-bottom: var(--hair) solid var(--line);
}
.banner span { flex: 1; min-width: 12rem; }
.banner.update { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.banner.offline { background: var(--surface); color: var(--muted); }
.banner button { padding: 4px 12px; font-size: .85rem; border-radius: 99px; background: var(--surface); }
.banner button.primary { background: var(--accent); }
.banner button.icon { width: 26px; height: 26px; padding: 0; background: var(--fill); color: var(--muted); }

/* ── List: inset grouped sections, one per letter ── */
.list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 56px; }
.list > * { width: min(780px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.lh {
  position: sticky; top: 0; z-index: 2; margin: 0 auto; padding: 14px 16px 6px;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--muted);
  background: var(--bg);
}
.group { background: var(--surface); border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 0; border-radius: 0; padding: 9px 16px; background: var(--surface); color: var(--ink); font-weight: 400;
}
.row:not(:last-child)::after {   /* hairline separator, inset past the icon */
  content: ""; position: absolute; left: calc(16px + 2.1rem + 12px); right: 0; bottom: 0; height: var(--hair); background: var(--line);
}
.row:hover { background: var(--hover); filter: none; }
.row:active { opacity: 1; background: var(--hover); }
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rn { flex: 1; min-width: 0; }
.rn b { font-weight: 600; }
.rc { display: block; font-size: .8rem; color: var(--muted); margin-top: 1px; }
.rd { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.empty, .count { padding: 24px 16px; color: var(--muted); }
.count .link, .empty .link { margin-left: 6px; font-size: inherit; }
.rc.in-notes { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { padding: 12px 16px 6px; font-size: .82rem; }

/* ── Dialogs ── */
dialog {
  border: 0; border-radius: 16px; padding: 20px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  width: min(600px, 94vw);
}
dialog::backdrop { background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; }
dialog h2[tabindex="-1"]:focus { outline: none; }

/* ── Contact card: centred avatar and name, quick actions, grouped details ── */
.card { width: min(560px, 94vw); max-height: 92vh; background: var(--bg); padding: 14px 20px 20px; }
.card-top { display: flex; justify-content: space-between; align-items: center; margin: 0 -8px 2px; }
.nav-btn { background: none; padding: 6px 8px; font-size: 1rem; font-weight: 500; color: var(--accent); }
.nav-btn:hover { background: var(--fill); filter: none; }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 0 6px; }
.hero h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; margin: 12px 0 0; overflow-wrap: anywhere; }
.sub { margin: 3px 0 0; color: var(--muted); }
.view-body { margin: 16px 0 4px; display: flex; flex-direction: column; gap: 14px; }
.view-body .group, .mini .group, .hv-text .group { margin: 0; }
.cell { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 9px 16px 10px; overflow-wrap: anywhere; }
.cell + .cell::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: var(--hair); background: var(--line); }
.cell .lbl { font-size: .8rem; color: var(--ink); text-transform: lowercase; }
.cell .val { font-size: 1rem; }
.notes { display: block; white-space: normal; font-size: .95rem; max-height: 40vh; overflow-y: auto; }
.card-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.card-actions.sticky { position: sticky; bottom: -20px; background: var(--bg); padding: 12px 0 4px; margin-bottom: -4px; border-top: var(--hair) solid var(--line); }
.meta { flex: 1; font-size: .8rem; color: var(--muted); }
#delete-btn { color: var(--warn); }
.note {
  font-size: .85rem; padding: 9px 12px; border-radius: 10px; margin: 0;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* Edit form: white grouped fields on the grey card background */
#edit { display: flex; flex-direction: column; gap: 12px; }
#edit h2 { margin-bottom: 0; }
#edit label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
#edit label > input:not([type="radio"]), #edit label > textarea { font-size: 1rem; color: var(--ink); width: 100%; }
#edit input, #edit textarea, #edit select { background: var(--surface); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
legend { font-size: .8rem; color: var(--muted); padding: 0; margin-bottom: 4px; }
.rows { display: flex; flex-direction: column; gap: 6px; }
fieldset .link { align-self: flex-start; font-size: .9rem; font-weight: 500; }
.conflict { border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--amber) 12%, var(--surface)); }
.conflict > p { margin: 0 0 10px; font-weight: 600; }
.conflict-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.history-wrap:has(#history-btn[hidden]) { display: none; }
.history-wrap { margin-top: 10px; }
.history { margin-top: 8px; max-height: 40vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.hv { border-radius: 12px; padding: 10px 12px; background: var(--surface); font-size: .85rem; }
.hv summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hv-text { margin: 8px 0; }
.hv-text .group { background: var(--bg); }

/* ── Help & import ── */
.help { width: min(640px, 94vw); max-height: 88vh; }
.help h3 { margin: 20px 0 8px; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Title row with a Close button that stays pinned while the panel scrolls */
.dialog-head { position: sticky; top: -20px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -20px -20px 0; padding: 16px 20px 12px; background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: var(--hair) solid var(--line); }
.dialog-head h2 { margin: 0; }
#help-close-top { background: none; font-weight: 600; }
/* Appearance choice: an iOS segmented control */
.theme-seg { display: inline-flex; border-radius: 9px; padding: 2px; background: var(--fill); }
.theme-seg button { background: transparent; padding: 5px 16px; font-size: .9rem; font-weight: 500; color: var(--ink); border-radius: 7px; }
.theme-seg button.on { background: var(--raised); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04); }
/* Text size slider, like iOS: small A — track — big A */
.size-slider { display: flex; align-items: center; gap: 12px; max-width: 360px; }
.size-slider input { flex: 1; accent-color: var(--accent); height: 28px; margin: 0; padding: 0; border: 0; background: none; }
.size-a { font-weight: 700; line-height: 1; color: var(--ink); }
.size-a.small { font-size: 13px; } .size-a.big { font-size: 24px; }
.size-name { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.keys { border-collapse: collapse; font-size: .9rem; }
.keys td { padding: 4px 12px 4px 0; vertical-align: top; }
.keys td:first-child { white-space: nowrap; }
kbd {
  display: inline-block; min-width: 1.6em; text-align: center; font: 600 .8rem ui-monospace, "SF Mono", Menlo, monospace;
  border-radius: 5px; padding: 1px 5px; margin-right: 2px; background: var(--fill); box-shadow: inset 0 -1px 0 var(--line);
}
code { font: .8rem ui-monospace, "SF Mono", Menlo, monospace; }
.toggle { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); }
.toggle input { accent-color: var(--accent); }
.help-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

.import { width: min(760px, 94vw); max-height: 90vh; }
.import p { margin: 0 0 12px; font-size: .9rem; }
#import-file { font: inherit; margin-bottom: 8px; max-width: 100%; border: 0; padding: 0; background: none; }
.import-preview { font-size: .9rem; }
.import-preview ul { padding-left: 20px; margin: 8px 0 12px; }
.import-preview li { margin-bottom: 4px; }
.import-preview .warn { color: var(--warn); }
.import-preview .summary { font-size: .95rem; margin-top: 8px; }
.mapping, .samples { margin: 8px 0; }
.mapping summary, .samples summary { cursor: pointer; color: var(--accent); }
.mapping table { border-collapse: collapse; margin-top: 8px; font-size: .85rem; width: 100%; }
.mapping td { padding: 3px 8px 3px 0; vertical-align: middle; }
.mapping td:last-child { overflow-wrap: anywhere; }
.mapping select { padding: 4px 8px; font-size: .85rem; }
.mini { border-radius: 12px; padding: 10px 12px; margin-top: 8px; background: var(--bg); }
.mini .group { margin-top: 6px; }
.mini .notes { max-height: 6rem; }
#import-progress { width: 100%; margin: 8px 0; accent-color: var(--accent); }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50; bottom: 32px;
  border-radius: 99px; padding: 10px 18px; box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--raised) 92%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font-size: .9rem; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 14px;
}
.toast[hidden] { display: none; }
.toast-btn { white-space: nowrap; background: none; padding: 2px 4px; color: var(--accent); font-weight: 700; }
.toast-btn:hover { background: none; text-decoration: underline; filter: none; }
.toast.error { color: var(--warn); border-radius: 14px; }

/* ── Desktop / mobile switch ── */
@media (min-width: 761px) { .mobile-only { display: none !important; } }
@media (max-width: 760px) {
  .desktop-only { display: none !important; }
  /* Extra room at the top so the title clears the iPhone clock / Dynamic Island area. */
  .bar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; padding-top: calc(max(10px, env(safe-area-inset-top)) + 14px); }
  .app-title { font-size: 1.75rem; }
  .title-icon { width: 30px; height: 30px; }
  .tools { width: 100%; }
  .search { flex: 1; min-width: 0; }
  #search { width: 100%; font-size: max(16px, 1rem); } /* 16px+ stops iOS zooming */
  input, textarea, select { font-size: max(16px, 1rem); }
    .list > * { width: calc(100% - 24px); }
  dialog.card {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0; padding: 12px 16px 16px;
    padding-top: calc(max(12px, env(safe-area-inset-top)) + 10px); padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .grid2 { grid-template-columns: 1fr; }
  .card-actions { flex-wrap: wrap; }
  .meta { width: 100%; flex-basis: 100%; order: 9; }
}

/* ── Printing ──
   With a contact open: just that contact's card. Otherwise: the whole list (or the search results)
   as a compact address book. Always light colours, whatever the screen is set to. */
@page { margin: 0.5in; }
@media print {
  html:root:not([data-print-dark]) {
    --bg: #fff; --surface: #fff; --raised: #fff; --fill: #f2f2f7; --hover: #fff;
    --ink: #000; --muted: #55555a; --line: #c7c7cc;
    --accent: #0062cc; --on-accent: #fff; --mark: #ffe58a; --warn: #d70015; --amber: #c96f00;
    --bar: #fff; --shadow: none; --hair: 1px;
    --av-blue: #007aff; --av-green: #34c759; --av-indigo: #5856d6; --av-orange: #ff9500;
    --av-pink: #ff2d55; --av-purple: #af52de; --av-red: #ff3b30; --av-teal: #30b0c7;
    --av-yellow: #f2b300; --av-mint: #00c7be; --av-brown: #a2845e; --av-cyan: #32ade6;
    color-scheme: light;
    font-size: 10.5pt;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body, #app { height: auto !important; background: #fff !important; }
  #app { display: block; }
  main { display: block; overflow: visible; }
  /* Screen-only things */
  .tools, .banner, .ptr, .toast, #help, #import, .link, .count .link { display: none !important; }
  .list > * { width: auto !important; }
  .bar { padding: 0 0 8px !important; flex-wrap: nowrap !important; border-bottom: 2px solid var(--ink); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app-title { font-size: 1.6rem; }
  .title-icon { width: 26px; height: 26px; box-shadow: none; }

}

/* Help panel footer (same in all three apps): Sign out, the web address and version, Close */
.help-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.help-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.help-meta { font-size: .8rem; color: var(--muted); }

/* Sign-in screen, as in Our Calendar */
.signin-card { border-radius: 22px; padding: 36px 30px 30px; }
.signin-icon { width: 76px; height: 76px; border-radius: 22.5%; box-shadow: 0 2px 10px rgba(0,0,0,.15); margin-bottom: 14px; }
.signin-card .primary { width: 100%; padding: 11px 16px; }

/* Help panel: the app's logo, name and author at the top (same in all three apps) */
.help-hero { display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; }
.help-hero-icon { width: 58px; height: 58px; border-radius: 22.5%; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.14); flex: none; }
.help-hero-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.help-hero-by { font-size: .9rem; color: var(--muted); margin-top: 1px; }
/* Sign out: Apple's red on the grey capsule, the same in all three apps */
#signout-btn2 { color: #ff3b30; font-weight: 600; }

/* Sign-in screen: identical in Our Calendar, Our Contacts and Our Flights (fixed sizes, centred in the window) */
#signin .signin-card { box-sizing: border-box; width: 100%; max-width: 360px; padding: 36px 30px 30px; border-radius: 22px; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  font-size: 16.5px; font-weight: 500; line-height: 1.4; letter-spacing: -.005em; }
#signin .signin-icon { display: block; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 22.5%; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
#signin .signin-card h1 { margin: 0 0 6px; font-size: 29px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
#signin .signin-card p { margin: 0 0 22px; font-size: 16.5px; color: var(--muted); }
#signin .signin-card button { width: 100%; padding: 11px 16px; border: 0; border-radius: 999px; font: inherit; font-weight: 600;
  display: block; text-align: center; }
/* Same spot for the card (and its logo) in every app, however long the line under the name is */
#signin { align-items: start !important; justify-items: center; padding-top: max(16px, calc(50dvh - 150px)) !important; }

/* ── Header: the same in all three apps (logo + name left, search · New · ? right) ── */
.app-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.app-title button { gap: 10px; white-space: nowrap; }
.title-icon { width: 34px; height: 34px; border-radius: 22.5%; flex: none; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.12); }
#search { width: 260px; }
@media (max-width: 760px) { #search { width: 100%; } .title-icon { width: 30px; height: 30px; } }

/* Sign-in button waits 2s so it does not flash on reload */
#signin-btn { animation: signin-appear .25s ease 2s both; }
@keyframes signin-appear { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

/* Big screens (an Apple Studio Display, say): roomier windows */
@media (min-width: 1200px) and (min-height: 700px) {
  dialog.card { width: min(760px, 92vw); }
    .help { width: min(760px, 92vw); }
  .import { width: min(900px, 92vw); }
}

/* Dark mode: windows (a domain's card, a contact) stand out from the page behind them:
   a lighter window, lighter groups inside it, a thin light edge and a darker backdrop. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) dialog { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 70px rgba(0, 0, 0, .7); }
  :root:not([data-theme="light"]) dialog::backdrop { background: rgba(0, 0, 0, .62); }
  :root:not([data-theme="light"]) dialog.card { background: var(--surface); }
  :root:not([data-theme="light"]) dialog.card .group { background: var(--raised); }
}
:root[data-theme="dark"] dialog { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 70px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .62); }
:root[data-theme="dark"] dialog.card { background: var(--surface); }
:root[data-theme="dark"] dialog.card .group { background: var(--raised); }

/* ════════════════ Care (the same as Our Apartment's items) ════════════════ */
:root { --av-gray: #8e8e93; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --av-gray: #98989d; } }
:root[data-theme="dark"] { --av-gray: #98989d; }

/* Category symbols: the emoji on a soft tint of the category's colour, in Apple's rounded square */
.cat-icon { --c: var(--av-gray); flex: none; width: 2.1rem; height: 2.1rem; border-radius: 22.5%; display: inline-grid; place-items: center;
  font-size: 1.1rem; line-height: 1; background: color-mix(in srgb, var(--c) 20%, var(--surface)); user-select: none; }
.cat-icon.xl { width: 4.6rem; height: 4.6rem; font-size: 2.4rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 30%, transparent); }
.c-teal { --c: var(--av-teal); } .c-mint { --c: var(--av-mint); } .c-yellow { --c: var(--av-yellow); } .c-green { --c: var(--av-green); }
.c-orange { --c: var(--av-orange); } .c-blue { --c: var(--av-blue); } .c-cyan { --c: var(--av-cyan); } .c-red { --c: var(--av-red); }
.c-indigo { --c: var(--av-indigo); } .c-brown { --c: var(--av-brown); } .c-gray { --c: var(--av-gray); }

/* Header: the three views as an iOS segmented control, on their own row */
.bar { flex-wrap: wrap; }
.seg { display: inline-flex; border-radius: 9px; padding: 2px; background: var(--fill); }
.seg button { background: transparent; padding: 5px 16px; font-size: .9rem; font-weight: 500; color: var(--ink); border-radius: 7px; }
.seg button.on { background: var(--raised); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04); }
.seg button:hover { filter: none; }
.tabs { flex: 0 0 auto; display: flex; width: min(460px, 100%); margin: 0 calc((100% - min(460px, 100%)) / 2); }  /* its own row (the margins fill it), centred, never wider than 460px */
.tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tab-n { min-width: 1.3em; padding: 0 .4em; border-radius: 99px; font-size: .72rem; font-weight: 700; line-height: 1.45; color: #fff; background: var(--warn); }
.tab-n:empty { display: none; }
[data-tab="shop"] .tab-n { background: var(--muted); }

/* Lists */
.summary-line { margin-top: 14px; margin-bottom: 2px; padding: 0 4px; font-size: .9rem; color: var(--muted); }
.summary-line b { color: var(--ink); }
.lh { display: flex; align-items: baseline; gap: 8px; }
.lh-n { font-weight: 500; opacity: .8; }
.lh-red { color: var(--warn); }
.row-wrap { position: relative; display: flex; align-items: center; background: var(--surface); }
.row-wrap:not(:last-child)::after { content: ""; position: absolute; left: calc(16px + 2.1rem + 12px); right: 0; bottom: 0; height: var(--hair); background: var(--line); }
.row::after { display: none; }
.row-wrap .row { flex: 1; min-width: 0; }
.rt { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.rc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint-line { font-style: italic; }
.rs { flex: none; font-size: .85rem; color: var(--muted); text-align: right; max-width: 40%; }
.st-overdue { color: var(--warn) !important; font-weight: 600; }
.st-today { color: var(--amber) !important; font-weight: 600; }
.st-soon { color: var(--accent) !important; }
.st-unscheduled { font-style: italic; }
.who { font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--fill); color: var(--muted); }
.row-done { flex: none; width: 34px; height: 34px; margin-right: 12px; padding: 0; border-radius: 50%; font-size: 1rem; font-weight: 700;
  color: var(--av-green); background: color-mix(in srgb, var(--av-green) 14%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--av-green) 55%, transparent); }
.row-done:hover { background: var(--av-green); color: #fff; filter: none; }
.row-bought, .buy { flex: none; margin-right: 10px; padding: 5px 12px; border-radius: 99px; font-size: .85rem; font-weight: 600; }
.buy { background: var(--fill); }
.buy:hover { text-decoration: none; filter: brightness(.96); }
.row-wrap.shop .row-bought { margin-right: 12px; }
.group-seg { display: flex; width: fit-content; margin: 14px auto 0; }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; margin-bottom: 8px; }
.shop-head .summary-line { margin: 0; }
.shop-head button { border-radius: 99px; }
.empty { text-align: center; line-height: 1.5; }
.empty-start { margin-top: 40px !important; text-align: center; background: var(--surface); border-radius: 16px; padding: 26px 22px; }
.empty-start p { margin: 0 0 10px; }
.empty-start button { border-radius: 99px; padding: 9px 18px; margin: 4px; }

/* The card */
.card { width: min(600px, 94vw); }
.status-pill { margin: 8px 0 0; padding: 3px 12px; border-radius: 99px; font-size: .85rem; font-weight: 600; background: var(--surface); color: var(--muted); }
.hero-actions { display: flex; gap: 8px; margin-top: 14px; }
.hero-actions .primary { border-radius: 99px; padding: 9px 22px; background: var(--av-green); }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper .icon { width: 28px; height: 28px; font-size: 1.05rem; }
.stepper b { min-width: 1.5em; text-align: center; font-size: 1.05rem; }
button.link.small { font-size: .85rem; margin-left: 4px; }
.log-row { display: grid; grid-template-columns: 7.5em 4em 1fr auto; gap: 8px; align-items: center; padding: 4px 0; font-size: .92rem; }
.log-row + .log-row { border-top: var(--hair) solid var(--line); }
.log-date { font-weight: 500; }
.log-who { color: var(--muted); font-size: .85rem; }
.log-note { color: var(--muted); overflow-wrap: anywhere; }
.log-row .rm { width: 26px; height: 26px; background: none; color: var(--muted); font-size: 1.1rem; opacity: .6; }
.log-row .rm:hover { color: var(--warn); opacity: 1; }

/* Edit form */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.often-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.every-wrap { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 1rem; }
.every-wrap.off { opacity: .4; }
#f-every { width: 5em; }
#edit select { font-size: 1rem; color: var(--ink); }
#edit .toggle input { width: auto !important; }
#edit .toggle { flex-direction: row !important; align-items: center; font-size: 1rem !important; color: var(--ink) !important; gap: 8px !important; }
.hint { font-size: .78rem; color: var(--muted); min-height: 1em; }
.details summary { cursor: pointer; color: var(--accent); font-size: .9rem; font-weight: 500; margin-bottom: 8px; }
.details[open] { display: flex; flex-direction: column; gap: 10px; }
.details[open] summary { margin-bottom: 0; }

/* Small windows: Mark done, Bought more */
dialog.small { width: min(440px, 94vw); }
dialog.small form { display: flex; flex-direction: column; gap: 12px; }
dialog.small h2 { margin: 0; }
dialog.small p { margin: 0; }
dialog.small label:not(.toggle) { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
dialog.small label input:not([type="checkbox"]) { font-size: 1rem; }
.d-next { font-size: .92rem; }
.help-actions.end { justify-content: flex-end; margin-top: 6px; }
.help-actions button { border-radius: 99px; padding: 8px 18px; }

/* Add suggested items */
.suggest section { margin-bottom: 14px; }
.suggest h3 { margin: 0 0 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.sg { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border-radius: 10px; background: var(--bg); margin-bottom: 4px; cursor: pointer; }
.sg input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.sg > span { display: flex; flex-direction: column; }
.sg .muted { font-size: .85rem; }
.sg.got { opacity: .5; cursor: default; }
#suggest .help-actions { position: sticky; bottom: -20px; background: var(--surface); padding: 12px 0 4px; margin-bottom: -4px; border-top: var(--hair) solid var(--line); }

@media (max-width: 760px) {
  .tabs { width: 100%; }
  .rs { max-width: 34%; font-size: .8rem; }
  .row-done { margin-right: 10px; }
  .log-row { grid-template-columns: 6.5em 1fr auto; }
  .log-who { display: none; }
  dialog.small { width: calc(100vw - 24px); }
}
@media print {
  .tabs, .row-done, .row-bought, .buy, .group-seg, #shop-copy { display: none !important; }
  .row { padding: 5px 0; break-inside: avoid; }
  .row-wrap::after { left: 0 !important; }
}

/* Previous / next item at the top of an open item (← → and a swipe do the same) */
.card-top { gap: 8px; }
.card-nav { display: inline-flex; align-items: center; gap: 6px; }
.card-pos { font-size: .8rem; color: var(--muted); min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.step-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--fill); color: var(--accent); }
.step-btn svg { width: 15px; height: 15px; }
.step-btn:disabled { opacity: .35; cursor: default; }
dialog.card.step-r #view { animation: step-in-r .18s ease-out; }
dialog.card.step-l #view { animation: step-in-l .18s ease-out; }
@keyframes step-in-r { from { opacity: .4; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes step-in-l { from { opacity: .4; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.card.step-r #view, dialog.card.step-l #view { animation: none; } }

/* ════════════════ Our Dog ════════════════ */
:root { --av-purple: #af52de; }
.c-purple { --c: var(--av-purple); }
.dog-switch { display: flex; width: fit-content; margin: 14px auto 0 !important; flex-wrap: wrap; }
.profile { margin-top: 14px !important; background: var(--surface); border-radius: 18px; overflow: hidden; }
.hero-photo { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: var(--fill); cursor: zoom-in; }
.hero-photo:hover { filter: none; }
.hero-photo img { display: block; width: 100%; max-height: 56vh; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 16 / 7;
  border-radius: 0; background: color-mix(in srgb, var(--av-brown) 14%, var(--surface)); color: var(--accent); font-size: 1rem; }
.photo-empty span { font-size: 2.4rem; }
.profile-text { padding: 16px 20px 18px; }
.dog-name { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.profile .sub { margin: 2px 0 0; }
.profile .line { margin: 8px 0 0; font-size: .95rem; }
.profile .status-pill { display: inline-block; background: var(--fill); }
.profile .hero-actions { flex-wrap: wrap; justify-content: flex-start; }
.profile .hero-actions button { border-radius: 99px; padding: 7px 14px; }
.weight { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spark { width: 120px; height: 30px; color: var(--av-brown); }
.team-notes { display: block; font-size: .88rem; margin-top: 2px; }
.pad { margin: 0; padding: 12px 16px; }
.more { margin: 6px 4px 0 !important; text-align: right; }
.lh-big { font-size: .9rem; color: var(--ink); margin-top: 10px; }
.big-paw { font-size: 3rem; margin: 0 !important; }
.warn-text { color: var(--warn); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-bottom: 8px !important; }
.thumb { aspect-ratio: 1; padding: 0; border-radius: 12px; overflow: hidden; background: var(--fill); border: 0; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.main::after { content: "★"; position: absolute; top: 6px; right: 7px; color: #fff; font-size: .9rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.thumb.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--accent); font-size: .85rem; font-weight: 600; }
.thumb.add span { font-size: 1.6rem; font-weight: 400; }
.thumb:hover { filter: brightness(.95); }
/* Profile editor */
#dog-form { display: flex; flex-direction: column; gap: 12px; }
#dog-form h2 { margin-bottom: 0; }
#dog-form label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
#dog-form label > input, #dog-form label > textarea, #dog-form label > select { font-size: 1rem; color: var(--ink); width: 100%; background: var(--surface); }
.team-row { display: grid; grid-template-columns: 8em 1fr 9em 30px; gap: 6px; align-items: start; }
.team-row .t-notes { grid-column: 1 / 4; }
.team-row input { background: var(--surface); }
.team-row .rm { width: 30px; height: 30px; background: none; color: var(--warn); font-size: 1.3rem; grid-row: 1; grid-column: 4; }
.team-row + .team-row { border-top: var(--hair) solid var(--line); padding-top: 8px; }
fieldset .link { align-self: flex-start; font-size: .9rem; font-weight: 500; }
/* Weight */
.w-list { display: flex; flex-direction: column; }
.w-row { display: grid; grid-template-columns: 1fr auto 30px; align-items: center; gap: 8px; padding: 4px 0; font-size: .92rem; border-top: var(--hair) solid var(--line); }
.w-row .rm { width: 26px; height: 26px; background: none; color: var(--muted); }
/* A new photo, and looking at one */
.pa-img { width: 100%; max-height: 40vh; object-fit: contain; border-radius: 12px; background: var(--fill); }
dialog.photo-view { width: min(1100px, 96vw); max-height: 96vh; padding: 12px 16px 16px; background: var(--surface); }
.pv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 -8px 8px; }
.pv-img { display: block; width: 100%; max-height: 74vh; object-fit: contain; border-radius: 12px; background: #000; }
.pv-caption { margin: 10px 2px 0; font-size: .95rem; min-height: 1.2em; }
.pv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pv-actions button { border-radius: 99px; }
/* The Studio Display: a wider profile, the photo beside the details */
@media (min-width: 1200px) {
  .list > * { width: min(1040px, calc(100% - 40px)); }
  .profile { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  .hero-photo img { max-height: 520px; height: 100%; aspect-ratio: auto; min-height: 340px; }
  .photo-empty { aspect-ratio: auto; min-height: 340px; }
  .profile-text { padding: 26px 28px; align-self: center; }
  .dog-name { font-size: 2.4rem; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 760px) {
  .team-row { grid-template-columns: 1fr 1fr 30px; }
  .team-row .t-role { grid-column: 1; } .team-row .t-name { grid-column: 2; }
  .team-row .t-phone, .team-row .t-notes { grid-column: 1 / 3; }
  .team-row .rm { grid-column: 3; }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  dialog.photo-view { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
    padding-top: calc(max(12px, env(safe-area-inset-top)) + 6px); display: flex; flex-direction: column; }
  .pv-img { flex: 1; max-height: none; min-height: 0; }
  dialog#dog-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
    padding: 12px 16px 16px; padding-top: calc(max(12px, env(safe-area-inset-top)) + 10px); }
  .dog-name { font-size: 1.8rem; }
}

/* ════════════════ Our Trips ════════════════ */
:root { --av-pink: #ff2d55; }
.c-pink { --c: var(--av-pink); }
.list > * { width: min(1040px, calc(100% - 40px)); }
.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .76rem; font-weight: 600; white-space: nowrap; background: var(--fill); color: var(--muted); }
.p-green { color: #248a3d; background: color-mix(in srgb, #34c759 16%, var(--surface)); }
.p-red { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.p-amber { color: #b25000; background: color-mix(in srgb, var(--amber) 18%, var(--surface)); }
.small { font-size: .8rem; }
/* All trips */
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 6px !important; }
.trip-grid.small { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.trip-card { display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; overflow: hidden; color: var(--ink); }
.trip-card:hover { text-decoration: none; filter: brightness(.98); }
.tc-photo { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, color-mix(in srgb, var(--av-cyan) 40%, var(--surface)), color-mix(in srgb, var(--av-orange) 35%, var(--surface))); }
.trip-grid.small .tc-photo { aspect-ratio: 3 / 1; }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-none { display: grid; place-items: center; height: 100%; font-size: 2.2rem; }
.tc-text { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; }
.tc-text b { font-size: 1.05rem; }
.tc-text .muted { font-size: .85rem; }
.tc-dates { font-size: .88rem; }
.tc-bits { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
/* A trip */
.trip-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 10px auto 0 !important; }
.trip-top .right { justify-self: end; }
a.step-btn { display: inline-grid; place-items: center; }
a.step-btn.off { opacity: .35; pointer-events: none; }
a.nav-btn { display: inline-block; padding: 6px 8px; border-radius: 8px; font-weight: 500; }
.trip-hero { margin-top: 8px !important; background: var(--surface); border-radius: 18px; overflow: hidden; }
.trip-name { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.hero-text { padding: 16px 20px 18px; }
.hero-text .line { margin: 6px 0 0; font-size: .95rem; }
.hero-text .sub { margin: 2px 0 0; color: var(--muted); }
.trip-hero .status-pill { display: inline-block; background: var(--fill); margin-top: 8px; }
.trip-hero .status-pill.st-now { color: #248a3d; background: color-mix(in srgb, #34c759 16%, var(--surface)); }
.trip-hero .hero-actions { flex-wrap: wrap; justify-content: flex-start; }
.trip-hero .hero-actions button { border-radius: 99px; padding: 7px 14px; }
.trip-tabs { display: flex; margin: 14px auto 0 !important; overflow-x: auto; scrollbar-width: none; }
.trip-tabs::-webkit-scrollbar { display: none; }
.trip-tabs a { flex: 1 0 auto; text-align: center; padding: 6px 12px; font-size: .9rem; font-weight: 500; color: var(--ink); border-radius: 7px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.trip-tabs a:hover { text-decoration: none; }
.trip-tabs a.on { background: var(--raised); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .04); }
.tab-n.warn { background: var(--warn); }
.trip-tabs .tab-n { background: var(--muted); }
.tab-body { margin-top: 4px !important; }
/* The plan */
.day { margin-top: 10px; }
.day-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 6px 6px; position: sticky; top: 0; z-index: 2; background: var(--bg); }
.day-n { font-size: .78rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; }
.day.today .day-head b::after { content: " · today"; color: #248a3d; font-weight: 600; }
.day-head .wx { margin-left: auto; font-size: .9rem; }
.pe { display: grid; grid-template-columns: 6.2em 2.1rem 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 16px; background: var(--surface);
  border: 0; border-radius: 0; color: var(--ink); font-weight: 400; position: relative; }
.pe + .pe::before { content: ""; position: absolute; left: calc(16px + 6.2em + 10px); right: 0; top: 0; height: var(--hair); background: var(--line); }
.pe:hover { background: var(--hover); text-decoration: none; filter: none; }
.pe.stay { opacity: .75; }
.pe.add { color: var(--accent); }
.pt-time { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.15; }
.pt-time small { font-size: .7rem; font-weight: 500; color: var(--muted); }
.pe-icon { width: 2.1rem; height: 2.1rem; border-radius: 22.5%; display: grid; place-items: center; font-size: 1.05rem; background: color-mix(in srgb, var(--c, var(--av-orange)) 18%, var(--surface)); }
.pe.flight .pe-icon { --c: var(--av-orange); }
.pe-text { display: flex; flex-direction: column; min-width: 0; }
.pe-text b { font-weight: 500; }
.pe-text .muted { font-size: .84rem; }
.pe-cost { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Checklists */
.lh-date { font-weight: 500; }
.lh .pill { margin-left: 4px; }
.checks .check { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; position: relative; flex-wrap: wrap; }
.checks .check + .check::before { content: ""; position: absolute; left: 48px; right: 0; top: 0; height: var(--hair); background: var(--line); }
.check label { flex: 1; display: flex; gap: 12px; align-items: center; cursor: pointer; min-width: 12em; }
.check input[type=checkbox] { width: 20px; height: 20px; accent-color: #34c759; flex: none; }
.check.done label span { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.check .rm { width: 26px; height: 26px; background: none; color: var(--muted); opacity: .5; }
.check .rm:hover { color: var(--warn); opacity: 1; }
.who-btn { font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--fill); color: var(--muted); }
.exp { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); }
.exp input { padding: 3px 6px; font-size: .85rem; background: var(--bg); }
.add-row { display: flex; gap: 8px; padding: 6px 12px 8px 48px; border-top: var(--hair) solid var(--line); }
.add-row input { flex: 1; background: var(--bg); padding: 6px 10px; }
.add-row.standalone { padding: 8px 4px; border: 0; margin-top: 4px !important; }
.pack-head { display: flex; align-items: center; gap: 14px; margin-top: 10px !important; }
.pack-head .summary-line { margin: 0 !important; }
.meter { display: inline-block; height: 7px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.meter.wide { flex: 1; max-width: 340px; }
.meter > span { display: block; height: 100%; background: #34c759; border-radius: 99px; }
.templates { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 10px; text-align: left; }
.empty-start .templates { align-items: center; }
.more-lists { margin-top: 14px !important; }
.more-lists summary { cursor: pointer; color: var(--accent); font-weight: 500; }
/* Costs, map, photos */
.cost-row { display: grid; grid-template-columns: 6em 1fr auto; gap: 12px; padding: 9px 16px; border-top: var(--hair) solid var(--line); font-variant-numeric: tabular-nums; }
.cost-row:first-child { border-top: 0; }
.cost-row.total { font-weight: 700; background: var(--fill); }
.trip-map { height: min(70vh, 720px); border-radius: 16px; overflow: hidden; margin-top: 10px !important; background: var(--fill); }
.photo-grid.big { margin-top: 12px !important; }
.small-note { font-size: .82rem; margin: 6px 0 0; }
/* The plan window */
.kind-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.kind { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 99px; font-size: .85rem; background: var(--surface); color: var(--ink); font-weight: 500; }
.kind.on { background: var(--accent); color: #fff; }
#item-form { display: flex; flex-direction: column; gap: 12px; }
#item-form label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
#item-form label > input, #item-form label > textarea, #item-form label > select, .city-pick input { font-size: 1rem; color: var(--ink); width: 100%; background: var(--surface); }
#item-form h2 { margin: 0; }
.city-pick { display: flex; align-items: center; gap: 8px; }
.city-results { display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; overflow: hidden; margin-top: -6px; }
.city-results button { text-align: left; background: none; border-radius: 0; padding: 8px 12px; color: var(--ink); font-weight: 400; }
.city-results button + button { border-top: var(--hair) solid var(--line); }
.city-results button:hover { background: var(--hover); }
.nav-btn.strong { font-weight: 700; }
.right { text-align: right; }
@media (min-width: 1200px) {
  .list > * { width: min(1240px, calc(100% - 48px)); }
  .trip-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .trip-hero .hero-photo img { max-height: 460px; height: 100%; aspect-ratio: auto; min-height: 320px; }
  .trip-hero .photo-empty { aspect-ratio: auto; min-height: 320px; }
  .hero-text { padding: 26px 28px; align-self: center; }
  .trip-name { font-size: 2.4rem; }
}
@media (min-width: 1600px) {
  .list > * { width: min(1500px, calc(100% - 64px)); }
  .trip-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}
@media (max-width: 760px) {
  .pe { grid-template-columns: 4.6em 1.9rem 1fr; padding: 9px 12px; }
  .pe-cost { grid-column: 3; }
  .pe + .pe::before { left: calc(12px + 4.6em + 10px); }
  .trip-name { font-size: 1.7rem; }
  .trip-top .card-pos { display: none; }
  dialog#item-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 12px 16px 16px; padding-top: calc(max(12px, env(safe-area-inset-top)) + 10px); }
  .add-row { padding-left: 16px; }
  .trip-grid { grid-template-columns: 1fr; }
}