:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #1f2b2f;
  background: #f5f1e8;
  line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { max-width: 1100px; margin: auto; padding: 24px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #d5ddd8; }
a { color: #1f3c68; text-underline-offset: 4px; }
.brand { font-size: 1.4rem; font-weight: 800; text-decoration: none; color: inherit; }
.brand span { color: #1f3c68; }
nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
nav a { color: inherit; }
nav a[aria-current="page"] { font-weight: 700; }
.intro { padding: 32px 0 8px; }
.eyebrow { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #1f3c68; }
h1 { font-family: Georgia, serif; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.1; margin: 12px 0; }
h2 { font-family: Georgia, serif; font-size: 1.7rem; margin: 40px 0 12px; }
h3 { margin: 0 0 6px; font-size: 1.1rem; }
p { margin: 10px 0; }
.note, .facts { color: #55625f; font-size: .9rem; }

/* Tours */
.tour-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.tour, .panel, .results li, .basket li, .manage-result:not(:empty) {
  padding: 20px; border: 1px solid #d5ddd8; border-radius: 12px; background: white;
}
.highlights { margin: 8px 0; padding-left: 20px; }

/* Forms */
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: start; margin-top: 40px; }
/* Line the search heading up with the heading inside the padded panel. */
.booking-layout h2 { margin-top: 20px; }
.panel h2 { margin-top: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 16px; align-items: start; }
fieldset { margin: 0 0 20px; padding: 0; border: 0; }
legend { padding: 0; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; }
.tickets { margin-top: 16px; }
.tickets legend { font-family: inherit; font-size: 1rem; }
label { display: block; margin: 14px 0 6px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px; font: inherit; color: inherit; border: 1px solid #9aa8a3; border-radius: 6px; background: white; }
textarea { resize: vertical; }
button { margin-top: 16px; padding: 10px 16px; font: inherit; color: white; border: 1px solid #1f3c68; border-radius: 6px; background: #1f3c68; cursor: pointer; }
button:hover { background: #162c4d; }
/* A quieter button for taking a trip out of the basket. */
button.secondary { color: #1f3c68; background: white; }
button.secondary:hover { background: #f5f1e8; }
:focus-visible { outline: 3px solid #b3540d; outline-offset: 3px; }
.field-error { margin: 6px 0 0; color: #a3261b; font-size: .9rem; font-weight: 600; }
[aria-invalid="true"] { border-color: #a3261b; }
/* Line the button up with the inputs beside it, below their labels. */
#manage-form button { margin-top: 44px; }

/* Results, basket and reservations */
.results, .basket { display: grid; gap: 12px; padding: 0; list-style: none; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 4px; text-align: left; vertical-align: top; border-bottom: 1px solid #e1e7e3; }
th { border-bottom: 2px solid #c7d1cc; }
.confirmation { margin-top: 24px; padding: 20px; border: 1px solid #7da58b; border-radius: 12px; background: #eef6f0; }
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0; }
.summary dt { font-weight: 600; }
.summary dd { margin: 0; overflow-wrap: anywhere; }
.manage-result { margin-top: 16px; }

/* Policies */
.toc { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; border-block: 1px solid #d5ddd8; }
section > table { max-width: 640px; background: white; }

footer { margin-top: 40px; color: #55625f; font-size: .875rem; border-top: 1px solid #d5ddd8; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  header, main, footer { padding: 18px; }
  header { flex-direction: column; align-items: start; gap: 12px; }
  .booking-layout { grid-template-columns: 1fr; gap: 0; }
  /* Give the Find reservation button its own row, with space above it. */
  #manage-form .field:last-child { grid-column: 1 / -1; }
  #manage-form button { margin-top: 16px; }
}

/* Assistant layout, in the site's palette. */
.assistant { margin-top: 48px; }

/* The runtime reads these variables for its chat, settings and agent panels.
   The chat background below also uses --ns-bg. White text sits on --ns-primary (the
   visitor's messages, Send, and the chat form and settings buttons) and on --ns-accent
   (Send while a turn is steered), so give both at least 4.5:1 contrast with white.
   --ns-accent also underlines the chat header. The site's navy is 11:1 and its
   focus orange is 5:1 with white. */
#agent-app {
  --ns-font: system-ui, sans-serif;
  --ns-bg: #ffffff;
  --ns-fg: #1f2b2f;
  --ns-primary: #1f3c68;
  --ns-accent: #b3540d;
  --ns-border: #d5ddd8;
  --ns-panelbg: #ffffff;
  --ns-msgbg: #f5f1e8;
  --ns-muted: #55625f;
}

.assistant-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px;
  margin-top: 16px;
}

/* Set the height once the runtime has mounted the chat, so a failed load leaves no
   empty box. */
#agent-app.ns-composed-app [data-ns-slot="chat"] { height: 720px; }
/* The runtime gives the chat no background of its own. Keep --ns-msgbg different from
   --ns-bg, or bot replies lose their bubble. */
#agent-app .ns-chat { background: var(--ns-bg); }

/* Site-wide form rules often stretch the runtime's own controls. Undo them here. */
#agent-app input[type="checkbox"],
#agent-app input[type="radio"] { width: auto; }
#agent-app .ns-header { flex-wrap: wrap; }
/* Site label rules add margins and bold text, and the inputs inside the labels inherit
   the weight. */
#agent-app .ns-settings-body label { margin: 4px 0; font-weight: 400; }
/* Chat forms label radio groups with a legend, so site legend fonts would reach them. */
#agent-app .ns-w-label { font-family: inherit; }
/* Site label rules add margins to chat form fields and make their options bold. */
#agent-app .ns-widget label { margin: 0; }
#agent-app .ns-w-radio label,
#agent-app .ns-w-multi label,
#agent-app .ns-w-toggle { font-weight: 400; }
/* The runtime sizes radio and multi-choice options but not the checkbox label. */
#agent-app .ns-w-toggle { font-size: 13px; }
/* The runtime spaces its buttons with gap. A site's button margin pushes Send below the input. */
#agent-app button { margin: 0; }
/* Chat choices are buttons with a light background. A site's button color can hide their
   titles. */
#agent-app .ns-w-choice { color: var(--ns-fg); }
/* A site's button:hover background also reaches the runtime's plain buttons, behind
   their dark text. Keep the runtime's own backgrounds. */
#agent-app .ns-devtoggle:not(.on):hover,
#agent-app .ns-modal-close:hover { background: transparent; }
#agent-app .ns-w-choice:disabled:hover { background: #fafbfc; }
/* The runtime's message rule hides the partner consent card's own background, and its
   Decline label then has too little contrast. */
#agent-app .ns-consent { background: #fffbeb; }
/* While a consent card waits, the status line above it already says "Contacting", though
   nothing has been sent. Hide it until the visitor answers. */
#agent-app .ns-msgs:has(.ns-consent-actions) > .ns-turn-status { display: none; }
/* Long links in a reply would run out of the bubble on a phone. "anywhere" would also
   let the consent card's buttons shrink and split their labels. */
#agent-app .ns-msg { overflow-wrap: break-word; }
/* On a phone the consent card is too narrow for its three buttons in one row, and
   "Always allow" breaks onto two lines. Keep each label whole and wrap the row. */
#agent-app .ns-consent-actions { flex-wrap: wrap; }
#agent-app .ns-consent-actions button { white-space: nowrap; }

/* site.js and the runtime add their confirmation dialogs to <body>, outside #agent-app.
   Site h2 rules reach the heading, and the two buttons touch. A right margin keeps
   wrapped buttons lined up on the left. */
body > dialog h2 { margin: 0 0 12px; font: 700 1.25em system-ui, sans-serif; }
body > dialog button { margin-right: 8px; }
/* site.js's dialog: the details in two columns, and a plain decline button, so the two
   choices do not look the same. */
.assistant-review { max-width: 640px; width: 85%; max-height: 85vh; overflow: auto; border: 1px solid #888; border-radius: 12px; padding: 24px; font: 16px system-ui, sans-serif; }
.assistant-review dl { display: grid; grid-template-columns: fit-content(40%) 1fr; gap: 4px 16px; margin: 12px 0; }
.assistant-review dt { font-weight: 600; }
.assistant-review dd { margin: 0; overflow-wrap: anywhere; }
.assistant-review details { margin: 12px 0; }
.assistant-review pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-review .assistant-decline { background: transparent; color: inherit; border: 1px solid currentColor; }

@media (max-width: 760px) {
  .assistant-panels { grid-template-columns: 1fr; }
  /* On a phone, each detail goes under its label, so an email is not split. */
  .assistant-review dl { grid-template-columns: 1fr; gap: 0; }
  .assistant-review dd { margin-bottom: 8px; }
}

/* Decreed receipts */
.receipt-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.receipt { border: 1px solid #d6dbe3; border-radius: 8px; padding: 0.6rem 0.8rem; }
.receipt p { margin: 0.15rem 0; }
.receipt-badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.85em; }
.receipt-verified .receipt-badge { background: #0f6b45; color: #fff; }
.receipt-not-verified .receipt-badge, .receipt-unsigned .receipt-badge { background: #a93d35; color: #fff; }
.receipt-signing .receipt-badge { background: #e6e9ee; color: #222; }
.receipt-note { font-size: 0.9em; color: #4a5260; }
.receipt-time { font-size: 0.85em; color: #4a5260; margin-left: 0.25rem; }
.receipt-list { border-left: 2px solid #d6dbe3; padding-left: 0.75rem; }
.receipt { scroll-margin-top: 1rem; }
.receipt:target { outline: 2px solid #1f3c68; outline-offset: 2px; }
.ns-msg.receipt-chip { align-self: flex-start; font-size: 0.9em; border: 1px solid #d6dbe3; border-radius: 8px; padding: 0.35rem 0.6rem; background: #fff; }