/* Westerbone Medieval Calendar & Travel Calculator
   Layout: a kalendar leaf. Feasts are written in rubric red (red-letter days), controls in lapis.
   Everything is scoped under .wbt so it sits safely inside WordPress / Thrive Architect pages.

   Robustness rules for living inside someone else's theme:
   - Type sizes are fixed px tokens and spacing is in em, so a theme that changes the root
     font size (html { font-size: 62.5% }) can't shrink the tool.
   - Inputs stay at 16px so iPhones don't zoom the page when a field is tapped.
   - Layout responds to the width of the tool itself (container queries), not the screen,
     so it also works in a narrow column on a tablet or desktop.
   - A short "guard" block at the end resets the theme styles that most often break
     forms, lists, tables and buttons. */
.wbt {
  --wbt-ground: #eef0ec;       /* limewashed stone */
  --wbt-leaf: #f8f9f6;         /* the working surface */
  --wbt-ink: #1d2230;          /* iron-gall ink, blue-black */
  --wbt-faded: #5c6270;        /* faded ink for secondary text */
  --wbt-rule: #cfd3cc;         /* ruling lines */
  --wbt-rubric: #a8322a;       /* vermilion: feasts */
  --wbt-lapis: #2b4b8c;        /* ultramarine: controls */
  --wbt-gold: #9a7a2c;         /* gilding: the sun */
  --wbt-night: #2a3146;        /* night band */
  --wbt-warn: #8a5a00;
  --wbt-warn-bg: #f6ecd2;
  --wbt-chip: #e4e7e1;
  --wbt-display: "IM Fell English SC", "IM Fell English", Garamond, "Times New Roman", serif;
  --wbt-body: "Alegreya", Georgia, "Times New Roman", serif;
  --wbt-ui: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --wbt-step--2: 12px;
  --wbt-step--1: 14px;
  --wbt-step-0: 16px;
  --wbt-step-1: 19px;
  --wbt-step-2: 24px;
  --wbt-step-3: 32px;
  --wbt-h1: 32px;              /* tool title and the day's date */
  --wbt-h3: 24px;              /* section headings */
  --wbt-lead: 19px;            /* the dating clause and journey summary */
  container-type: inline-size;
  container-name: wbt;
  color: var(--wbt-ink);
  font-family: var(--wbt-body);
  font-size: var(--wbt-step-0);
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  max-width: 64em;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: left;
  overflow-wrap: break-word;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wbt.wbt-auto {
    --wbt-ground: #121620; --wbt-leaf: #1a1f2c; --wbt-ink: #e3e1d9; --wbt-faded: #a3a7b2;
    --wbt-rule: #333a4b; --wbt-rubric: #e27a68; --wbt-lapis: #93acec; --wbt-gold: #d9b45a;
    --wbt-night: #0b0e16; --wbt-warn: #e8bd63; --wbt-warn-bg: #3a2f17; --wbt-chip: #262c3b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .wbt.wbt-auto {
  --wbt-ground: #121620; --wbt-leaf: #1a1f2c; --wbt-ink: #e3e1d9; --wbt-faded: #a3a7b2;
  --wbt-rule: #333a4b; --wbt-rubric: #e27a68; --wbt-lapis: #93acec; --wbt-gold: #d9b45a;
  --wbt-night: #0b0e16; --wbt-warn: #e8bd63; --wbt-warn-bg: #3a2f17; --wbt-chip: #262c3b;
  color-scheme: dark;
}
.wbt *, .wbt *::before, .wbt *::after { box-sizing: border-box; }
.wbt-sheet { background: var(--wbt-ground); padding: 2em; border-radius: 6px; display: grid; gap: 1.5em; min-width: 0; }

/* header and tabs */
.wbt-head { display: grid; gap: 0.25em; min-width: 0; }
.wbt-eyebrow { font-family: var(--wbt-ui); font-size: var(--wbt-step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wbt-faded); }
.wbt-title { font-family: var(--wbt-display); font-weight: 400; font-size: var(--wbt-h1); line-height: 1.1; color: var(--wbt-ink); text-wrap: balance; }
.wbt-title b { color: var(--wbt-rubric); font-weight: 400; }
.wbt-lede { color: var(--wbt-faded); max-width: 62ch; }
.wbt-tabs { display: flex; gap: 0.25em; border-bottom: 1px solid var(--wbt-rule); }
.wbt-tab { font-family: var(--wbt-ui); font-size: var(--wbt-step-0); background: none; border: 0; border-bottom: 3px solid transparent; padding: 0.6em 1em; color: var(--wbt-faded); cursor: pointer; margin-bottom: -1px; }
.wbt-tab[aria-selected="true"] { color: var(--wbt-ink); border-bottom-color: var(--wbt-rubric); }
.wbt-panel { display: grid; gap: 1.25em; min-width: 0; }
.wbt .wbt-panel[hidden] { display: none !important; }
.wbt-tab:focus-visible, .wbt button:focus-visible, .wbt input:focus-visible, .wbt select:focus-visible { outline: 2px solid var(--wbt-lapis); outline-offset: 2px; }

/* forms */
.wbt-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11em), 1fr)); gap: 0.9em 1em; align-items: end; }
.wbt-field { display: grid; gap: 0.3em; min-width: 0; }
.wbt-field > span, .wbt-legend { font-family: var(--wbt-ui); font-size: var(--wbt-step--1); letter-spacing: 0.04em; color: var(--wbt-faded); }
.wbt input[type="number"], .wbt select {
  font-family: var(--wbt-ui); font-size: 16px; color: var(--wbt-ink); background-color: var(--wbt-leaf);
  border: 1px solid var(--wbt-rule); border-radius: 4px; padding: 0.55em 0.6em; width: 100%; min-width: 0;
}
.wbt-field--date { grid-column: 1 / -1; max-width: 26em; }
.wbt-date { display: grid; grid-template-columns: 4em minmax(0, 1fr) 5.5em; gap: 0.4em; }
.wbt-wide { grid-column: 1 / -1; }
.wbt-calstyle { border: 0; padding: 0; margin: 0; display: grid; gap: 0.4em; min-width: 0; }
.wbt-choices { display: flex; flex-wrap: wrap; gap: 0.5em 1.2em; font-family: var(--wbt-ui); font-size: var(--wbt-step--1); }
.wbt-choices label { display: inline-flex; gap: 0.5em; align-items: flex-start; cursor: pointer; min-width: 0; }
.wbt-choices input { accent-color: var(--wbt-lapis); flex: none; margin-top: 0.2em; }
.wbt-buttons { display: flex; flex-wrap: wrap; gap: 0.5em; }
.wbt-btn { font-family: var(--wbt-ui); font-size: var(--wbt-step--1); border-radius: 4px; padding: 0.6em 1em; cursor: pointer; border: 1px solid var(--wbt-lapis); background: var(--wbt-leaf); color: var(--wbt-lapis); }
.wbt-btn--solid { background: var(--wbt-lapis); color: var(--wbt-leaf); }
.wbt-btn:hover { filter: brightness(1.08); }

/* the day */
.wbt-leaf { background: var(--wbt-leaf); border: 1px solid var(--wbt-rule); border-radius: 4px; padding: 1.75em; display: grid; gap: 1.25em; min-width: 0; }
.wbt-dayhead { display: grid; gap: 0.35em; border-bottom: 1px solid var(--wbt-rule); padding-bottom: 1em; }
.wbt-date-big { font-family: var(--wbt-display); font-size: var(--wbt-h1); line-height: 1.1; font-weight: 400; text-wrap: balance; }
.wbt-sub { font-family: var(--wbt-ui); font-size: var(--wbt-step--1); color: var(--wbt-faded); }
.wbt-clause { font-style: italic; font-size: var(--wbt-lead); max-width: 62ch; }
.wbt-feasts { display: grid; gap: 0.3em; }
.wbt-feast { display: flex; flex-wrap: wrap; gap: 0.25em 0.5em; align-items: baseline; }
.wbt-feast-name { font-size: var(--wbt-step-1); }
.wbt-feast--principal .wbt-feast-name, .wbt-feast--major .wbt-feast-name { color: var(--wbt-rubric); }
.wbt-feast--principal .wbt-feast-name { font-weight: 700; }
.wbt-chip { display: inline-block; font-family: var(--wbt-ui); font-size: var(--wbt-step--2); letter-spacing: 0.05em; text-transform: uppercase; background: var(--wbt-chip); color: var(--wbt-faded); padding: 0.1em 0.5em; border-radius: 3px; white-space: nowrap; }
.wbt-chip--fish { color: var(--wbt-lapis); }
.wbt-chip--warn { background: var(--wbt-warn-bg); color: var(--wbt-warn); }
.wbt-nofeast { color: var(--wbt-faded); }
.wbt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17em), 1fr)); gap: 1.5em 2em; }
.wbt-sec { display: grid; gap: 0.6em; align-content: start; min-width: 0; }
.wbt-sec h3 { font-family: var(--wbt-display); font-weight: 400; font-size: var(--wbt-h3); line-height: 1.15; }
.wbt-dl { display: grid; grid-template-columns: minmax(7.5em, auto) minmax(0, 1fr); gap: 0.4em 1em; }
.wbt-dl dt { font-family: var(--wbt-ui); font-size: var(--wbt-step--1); color: var(--wbt-faded); padding-top: 0.15em; }
.wbt-dl dd { font-variant-numeric: tabular-nums; min-width: 0; }
.wbt-note { font-size: var(--wbt-step--1); color: var(--wbt-faded); }
.wbt-notes { padding-left: 1.1em; display: grid; gap: 0.2em; }

/* sun bar */
.wbt-sunbar { width: 100%; height: auto; display: block; }
.wbt-sunbar text { font-family: var(--wbt-ui); font-size: 12px; fill: var(--wbt-faded); }
.wbt-offices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wbt-offices td { padding: 0.35em 0.6em 0.35em 0; border-top: 1px solid var(--wbt-rule); vertical-align: top; text-align: left; }
.wbt-offices td:first-child { font-family: var(--wbt-display); font-size: 17px; width: 5.5em; }
.wbt-offices td:nth-child(2) { white-space: nowrap; width: 6em; }
.wbt-offices td:last-child { color: var(--wbt-faded); font-size: var(--wbt-step--1); }

/* moon */
.wbt-moon { display: flex; gap: 1em; align-items: center; }
.wbt-moon svg { flex: none; }

/* journey */
.wbt-summary { font-size: var(--wbt-lead); max-width: 62ch; }
.wbt-summary strong { font-weight: 700; }
.wbt-days { display: grid; }
.wbt-dayrow { display: grid; grid-template-columns: 3.5em minmax(0, 13em) minmax(0, 1fr) 4.5em; gap: 0.25em 1em; padding: 0.9em 0; border-top: 1px solid var(--wbt-rule); align-items: start; }
.wbt-dayno { font-family: var(--wbt-display); font-size: var(--wbt-step-2); line-height: 1; color: var(--wbt-faded); }
.wbt-daydate { display: grid; gap: 0.15em; min-width: 0; }
.wbt-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--wbt-lapis); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wbt-stage { display: grid; gap: 0.2em; min-width: 0; }
.wbt-stage-line { font-size: var(--wbt-step-1); line-height: 1.25; }
.wbt-miles { font-family: var(--wbt-ui); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wbt-miles b { font-size: var(--wbt-step-1); font-weight: 700; display: block; line-height: 1.1; }
.wbt-dayrow--rest .wbt-stage-line { color: var(--wbt-faded); font-style: italic; }
.wbt-stagebox { grid-column: 2 / -1; background: var(--wbt-ground); border-radius: 4px; padding: 0.75em 1em; margin-top: 0.4em; }
.wbt-stagebox dd.wbt-warn { color: var(--wbt-warn); font-size: inherit; }
.wbt-red { color: var(--wbt-rubric); }
.wbt-tagrow { display: flex; flex-wrap: wrap; gap: 0.3em; }
.wbt-warn { color: var(--wbt-warn); font-size: var(--wbt-step--1); }
.wbt-path { font-size: var(--wbt-step--1); color: var(--wbt-faded); }
.wbt-cta { display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--wbt-rule); padding-top: 1em; }
.wbt-cta a { color: var(--wbt-rubric); font-family: var(--wbt-ui); }
.wbt-status { font-family: var(--wbt-ui); font-size: var(--wbt-step--1); color: var(--wbt-faded); min-height: 1.2em; }
.wbt-status:empty { display: none; }
.wbt-error { color: var(--wbt-rubric); }

/* ------------------------------------------------------------ narrow: phones, narrow columns */
@container wbt (max-width: 640px) {
  .wbt .wbt-tab { padding: 0.7em 0.5em !important; }
  .wbt-sheet { padding: 1.1em 0.9em; gap: 1.2em; border-radius: 4px; --wbt-h1: 28px; --wbt-h3: 22px; --wbt-lead: 17px; }
  .wbt-leaf { padding: 1em 0.9em; gap: 1em; }
  .wbt-feast-name, .wbt-stage-line { font-size: 17px; }
  .wbt-tab { flex: 1 1 0; text-align: center; padding: 0.7em 0.5em; }
  .wbt-field--date { max-width: none; }
  .wbt-date { grid-template-columns: 3.6em minmax(0, 1fr) 5em; }
  .wbt-buttons .wbt-btn { flex: 1 1 auto; }
  .wbt-grid { gap: 1.4em; }
  .wbt-dl { grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 0.35em 0.8em; }

  /* the hours table becomes a list: name and time on one line, the note under them */
  .wbt-offices, .wbt-offices tbody { display: block; }
  .wbt-offices tr { display: grid; grid-template-columns: 5.5em 1fr; column-gap: 0.6em; padding: 0.4em 0; border-top: 1px solid var(--wbt-rule); }
  .wbt-offices td { display: block; border: 0; padding: 0; width: auto; }
  .wbt-offices td:first-child, .wbt-offices td:nth-child(2) { width: auto; }
  .wbt-offices td:last-child { grid-column: 1 / -1; padding-top: 0.15em; }

  /* journey rows: number, date and miles on one line; stage below; details full width */
  .wbt-dayrow { grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 0.2em 0.6em; }
  .wbt-daydate { grid-column: 2; }
  .wbt-miles { grid-column: 3; grid-row: 1; }
  .wbt-miles b { display: inline; font-size: 17px; }
  .wbt-stage { grid-column: 1 / -1; }
  .wbt-stagebox { grid-column: 1 / -1; padding: 0.7em 0.8em; }
  .wbt-stagebox.wbt-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wbt-stagebox.wbt-dl dt { padding-top: 0.5em; }
  .wbt-stagebox.wbt-dl dt:first-child { padding-top: 0; }
}
@container wbt (max-width: 360px) {
  .wbt-sheet { padding: 0.9em 0.7em; --wbt-h1: 25px; }
  .wbt-leaf { padding: 0.9em 0.75em; }
  .wbt-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wbt-dl dt { padding-top: 0.5em; }
}
@media (prefers-reduced-motion: reduce) { .wbt * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------ guard against theme styles
   Themes (Thrive included) style bare inputs, labels, lists, tables, headings and buttons
   with selectors that can beat the rules above. These reset only what breaks the layout. */
.wbt p, .wbt h2, .wbt h3, .wbt dl, .wbt dt, .wbt dd, .wbt ul, .wbt ol, .wbt li, .wbt fieldset, .wbt legend, .wbt table, .wbt tr, .wbt td {
  margin: 0 !important; float: none !important; background-image: none !important; text-indent: 0 !important;
}
.wbt h2, .wbt h3 { padding: 0 !important; letter-spacing: normal !important; text-transform: none !important; border: 0 !important; }
.wbt .wbt-title { font-family: var(--wbt-display) !important; font-size: var(--wbt-h1) !important; line-height: 1.1 !important; color: var(--wbt-ink) !important; }
.wbt .wbt-date-big { font-family: var(--wbt-display) !important; font-size: var(--wbt-h1) !important; color: var(--wbt-ink) !important; line-height: 1.1 !important; font-weight: 400 !important; }
.wbt .wbt-sec h3 { font-family: var(--wbt-display) !important; font-size: var(--wbt-h3) !important; color: var(--wbt-ink) !important; line-height: 1.15 !important; font-weight: 400 !important; }
.wbt ul, .wbt ol { list-style: none !important; padding-left: 0 !important; }
.wbt ul.wbt-notes { list-style: disc !important; padding-left: 1.1em !important; }
.wbt li::before { content: none !important; }
.wbt li { padding-left: 0 !important; }
.wbt dt, .wbt dd { width: auto !important; clear: none !important; font-weight: 400 !important; }
.wbt table { table-layout: auto !important; border: 0 !important; background: none !important; }
.wbt td { background: none !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
.wbt label { margin: 0 !important; width: auto !important; float: none !important; font-weight: 400 !important; }
.wbt .wbt-field { display: grid !important; }
.wbt .wbt-date { display: grid !important; }
.wbt .wbt-choices label { display: inline-flex !important; }
.wbt input[type="number"], .wbt select {
  height: auto !important; min-height: 2.6em !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important;
  margin: 0 !important; box-shadow: none !important; line-height: 1.3 !important; font-size: 16px !important;
  display: block !important; float: none !important; text-transform: none !important;
}
.wbt input[type="radio"], .wbt input[type="checkbox"] {
  width: 1.05em !important; height: 1.05em !important; min-height: 0 !important; margin: 0.2em 0 0 !important; padding: 0 !important;
  position: static !important; opacity: 1 !important; display: inline-block !important; -webkit-appearance: auto !important; appearance: auto !important;
  box-shadow: none !important; flex: none !important;
}
.wbt button {
  width: auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important;
  text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; line-height: 1.3 !important;
  text-shadow: none !important; float: none !important;
}
.wbt .wbt-tab { margin-bottom: -1px !important; }
.wbt svg { max-width: 100% !important; }
.wbt .wbt-dayrow { display: grid !important; padding-left: 0 !important; }
.wbt .wbt-dl { display: grid !important; }
.wbt .wbt-stagebox { margin-top: 0.4em !important; }

/* paragraphs: themes often set a large size and loose leading on every p */
.wbt p { line-height: 1.5 !important; padding: 0 !important; }
.wbt .wbt-lede, .wbt .wbt-nofeast, .wbt .wbt-cta p { font-size: var(--wbt-step-0) !important; }
.wbt .wbt-eyebrow, .wbt .wbt-sub, .wbt .wbt-note, .wbt .wbt-path, .wbt .wbt-warn, .wbt .wbt-status { font-size: var(--wbt-step--1) !important; }
.wbt .wbt-clause, .wbt .wbt-summary { font-size: var(--wbt-lead) !important; }
.wbt fieldset { border: 0 !important; padding: 0 !important; min-width: 0 !important; }
.wbt legend { padding: 0 !important; float: none !important; width: auto !important; }

/* buttons: themes pad, fill and upper-case every button */
.wbt .wbt-btn { padding: 0.6em 1em !important; font-family: var(--wbt-ui) !important; font-size: var(--wbt-step--1) !important; font-weight: 400 !important;
  border: 1px solid var(--wbt-lapis) !important; border-radius: 4px !important; background: var(--wbt-leaf) !important; color: var(--wbt-lapis) !important; }
.wbt .wbt-btn--solid { background: var(--wbt-lapis) !important; color: var(--wbt-leaf) !important; }
.wbt .wbt-tab { padding: 0.6em 1em !important; font-family: var(--wbt-ui) !important; font-size: var(--wbt-step-0) !important; font-weight: 400 !important;
  background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; color: var(--wbt-faded) !important; }
.wbt .wbt-tab[aria-selected="true"] { color: var(--wbt-ink) !important; border-bottom-color: var(--wbt-rubric) !important; }
.wbt .wbt-linkbtn { padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; text-align: left !important;
  font: inherit !important; color: var(--wbt-lapis) !important; text-decoration: underline !important; }

/* number fields: no spinners (they eat the space on desktop), numbers only */
.wbt input[type="number"] { -moz-appearance: textfield; appearance: textfield; padding-left: 0.6em !important; padding-right: 0.4em !important; }
.wbt input[type="number"]::-webkit-inner-spin-button, .wbt input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wbt select { padding-left: 0.6em !important; }

/* drawings: themes size every svg as an icon */
.wbt .wbt-sunbar { width: 100% !important; height: auto !important; }
.wbt .wbt-moon svg { width: 64px !important; height: 64px !important; }
.wbt .wbt-stagebox dd.wbt-warn { font-size: inherit !important; }