/* The planner's days and nights (P12, P13): the Days tab (the days as cards, each with its night), the markers that end a day, the plan at a glance (a dialog), and the page that
   prints. Sent with the page, after plan-next.css and plan-phone.css; the embed does not have it. The site's own tokens (--ink 16:1, --ink-soft 8.9:1, --pine 9.6:1 on the paper,
   --line, --paper, --paper-2, --card), never the lighter --muted; sides written as start and end (tests/plan-css-test.js holds that and the contrast of every colour of type).
   A day's colour (--day-c, one of eight, plan/days.js) marks the card's edge, the dot with its number and the tint on the map and in the profile; the number is always there, so
   colour is never the only cue. The booking status is its words (Not booked, Contacted, Booked) with a symbol, never a colour alone. */

/* ---- the Days tab ---- */
.plan.next .plan-days-none { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.plan.next .plan-days-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; }
.plan.next .plan-days-bar .plan-stepper { margin: 0; }
.plan.next .plan-stepper button { color: var(--ink); background: var(--card); border-color: var(--line); }
.plan.next .plan-stepper button:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.plan.next .plan-glance-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 40px; padding: 5px 12px; border: 1px solid var(--pine); border-radius: 10px; background: var(--card); color: var(--pine); font: inherit; font-size: .88rem; font-weight: 600; text-align: start; cursor: pointer; }
.plan.next .plan-glance-btn:hover { background: var(--paper-2); }
.plan.next .plan-glance-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.plan.next .plan-glance-btn small { color: var(--ink-soft); font-size: .74rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.plan.next .plan-glance-btn small:empty { display: none; }
.plan.next .plan-days-start { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin: 0 0 8px; }
.plan.next .plan-days-start .plan-note { flex: 1 1 12rem; margin: 0; color: var(--ink-soft); }
.plan.next #plan-days-date { width: 8.6rem; }
.plan.next .plan-days-times { margin: 0 0 8px; }
.plan.next .plan-days-times summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ink); padding: 6px 0; }
.plan.next .plan-days-times summary:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 4px; }
.plan.next .plan-days-timegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 4px 0 6px; }
.plan.next .plan-days-timegrid input { width: 100%; }
.plan.next .plan-timeclear-row { display: flex; align-items: center; gap: 6px; }
.plan.next .plan-timeclear-row .plan-linklike { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: 1.1rem; line-height: 1; text-decoration: none; }
.plan.next .plan-timeclear-row .plan-linklike[hidden] { display: none; }
.plan.next .plan-days-places { margin: 0 0 8px; }
.plan.next .plan-days-places .plan-note { margin: 4px 0 0; color: var(--ink-soft); }
.plan.next .plan-linkbtn { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.plan.next .plan-linkbtn:hover:not(:disabled) { background: var(--paper-2); }
.plan.next .plan-linkbtn:disabled { opacity: .55; cursor: default; }
.plan.next .plan-linkbtn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.plan.next .plan-days-private, .plan.next .plan-days-keepfail { color: var(--ink-soft); }
.plan.next .plan-days-keepfail { color: var(--finish); font-weight: 600; }
.plan.next .plan-days-keepfail[hidden] { display: none; }
/* the panel is the containing block of the words only a screen reader reads, so that one deep in a long list cannot make the page scroll */
.plan.next .plan-tabpanel { position: relative; }
.plan.next .plan-sr, .plan-glance .plan-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }

/* the days as cards */
.plan.next .plan-days-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; font-size: .88rem; }
.plan.next .plan-days-list:empty { display: none; }
.plan.next .plan-day { padding: 10px 12px; border: 1px solid var(--line); border-inline-start: 5px solid var(--day-c, var(--pine)); border-radius: 10px; background: var(--card); }
.plan.next .plan-day-head { display: flex; align-items: center; gap: 8px; }
.plan.next .plan-day-dot { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--day-c, var(--pine)); color: #fff; font: 700 12px/1 system-ui, sans-serif; }
.plan.next .plan-day-title { margin: 0; font-size: .96rem; font-weight: 700; color: var(--ink); letter-spacing: 0; text-transform: none; }
.plan.next .plan-day-when { margin-inline-start: auto; color: var(--ink-soft); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan.next .plan-day-namebox { display: block; margin: 6px 0 0; }
.plan.next .plan-day-name { box-sizing: border-box; width: 100%; min-height: 34px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem; }
.plan.next .plan-day-name::placeholder { color: var(--ink-soft); opacity: 1; }
.plan.next .plan-day-figs, .plan.next .plan-day-times { margin: 4px 0 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.plan.next .plan-day-figs { color: var(--ink); font-weight: 600; }
.plan.next .plan-day-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin: 6px 0 0; color: var(--ink); }
.plan.next .plan-day-endtools { display: inline-flex; align-items: center; gap: 6px; }
.plan.next .plan-ibtn, .plan-glance .plan-ibtn { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.plan.next .plan-ibtn:hover, .plan-glance .plan-ibtn:hover { background: var(--paper-2); }
.plan.next .plan-ibtn:focus-visible, .plan-glance .plan-ibtn:focus-visible, .plan.next .plan-day .plan-linklike:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.plan.next .plan-picker { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--paper-2); }
.plan.next .plan-picker[hidden], .plan.next .plan-finder[hidden] { display: none; }
.plan.next .plan-picker h4 { margin: 0 0 4px; font-size: .8rem; color: var(--ink-soft); }
.plan.next .plan-pick { display: block; width: 100%; box-sizing: border-box; padding: 6px 8px; margin: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .88rem; text-align: start; cursor: pointer; }
.plan.next .plan-pick:hover { background: var(--card); }
.plan.next .plan-pick:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-pick small { display: block; color: var(--ink-soft); font-size: .78rem; }
.plan.next .plan-pick .chip { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--card); color: var(--ink-soft); font-size: .72rem; }
.plan.next .plan-picker .plan-note, .plan.next .plan-finder .plan-note { color: var(--ink-soft); margin: 4px 0 0; }

/* the night under a day */
.plan.next .plan-night-li { list-style: none; }
.plan.next .plan-night-li > .plan-night { margin: 0; padding: 4px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--card); }
.plan.next .plan-night { margin-top: 8px; padding-top: 4px; border-top: 1px dashed var(--line); }
.plan.next .plan-night > summary { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 4px 0; padding-inline-start: 18px; position: relative; cursor: pointer; list-style: none; }
.plan.next .plan-night > summary::-webkit-details-marker { display: none; }
.plan.next .plan-night > summary::before { content: "›"; position: absolute; inset-inline-start: 2px; inset-block-start: 3px; font-size: 1.25rem; line-height: 1.1; color: var(--ink-soft); transition: transform .12s; }
.plan.next .plan-night[open] > summary::before { transform: rotate(90deg); }
.plan.next .plan-night > summary:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 4px; }
.plan.next .plan-night-t { font-size: .88rem; font-weight: 700; color: var(--ink); }
.plan.next .plan-night-s { font-size: .84rem; color: var(--ink-soft); }
.plan.next .plan-night-body { display: grid; gap: 8px; padding: 6px 0 4px; }
.plan.next .plan-nf, .plan-glance .plan-nf { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; font-size: .76rem; font-weight: 600; color: var(--ink-soft); }
.plan.next .plan-nf legend { padding: 0; font-size: .76rem; font-weight: 600; color: var(--ink-soft); }
.plan.next .plan-nf input[type="text"], .plan.next .plan-nf select, .plan.next .plan-nf textarea, .plan-glance .plan-nf select, .plan-glance .plan-rate-in {
  box-sizing: border-box; width: 100%; min-height: 36px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 400; }
.plan.next .plan-nf textarea { min-height: 54px; resize: vertical; }
.plan.next .plan-nf input[aria-invalid="true"] { border-color: var(--finish); border-width: 2px; }
.plan.next .plan-nf input:focus-visible, .plan.next .plan-nf select:focus-visible, .plan.next .plan-nf textarea:focus-visible, .plan-glance .plan-nf select:focus-visible, .plan-glance .plan-rate-in:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.plan.next .plan-nf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 5.4rem) auto; align-items: end; gap: 8px; }
.plan.next .plan-nf-check { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.plan.next .plan-nf-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--pine); }
.plan.next .plan-seg { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.plan.next .plan-seg-i { position: relative; flex: 1 1 auto; display: block; margin: 0; }
.plan.next .plan-seg-i + .plan-seg-i { border-inline-start: 1px solid var(--line); }
.plan.next .plan-seg-i input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.plan.next .plan-seg-i span { display: block; box-sizing: border-box; min-height: 36px; padding: 8px 12px; background: var(--card); color: var(--ink); font-size: .86rem; font-weight: 600; text-align: center; white-space: nowrap; }
.plan.next .plan-seg-i.is-on span { background: var(--pine); color: #fff; }
.plan.next .plan-seg-i.is-on span::before { content: "✓ "; }
.plan.next .plan-seg-i input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: -3px; }
.plan.next .plan-night-books .books { display: flex; flex-wrap: wrap; gap: 6px; }
.plan.next .plan-night-books .plan-note { margin: 4px 0 0; color: var(--ink-soft); }
.plan.next .plan-night-tools { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.plan.next .plan-night-tools .plan-linklike { font-size: .84rem; }
.plan.next .plan-finder { padding: 6px 8px; border-radius: 8px; background: var(--paper-2); }

/* the marker that ends a day: a button on the map, to drag along the line (or move with the arrow keys) */
.ga-day-end { padding: 0; border: 0; cursor: grab; }
.ga-day-end:focus-visible { outline: 3px solid #1c201d; outline-offset: 2px; }
.ga-day-end:active { cursor: grabbing; }
.plan.plan-dropping::after { content: ""; position: absolute; inset: 6px; border: 3px dashed var(--pine); border-radius: 12px; pointer-events: none; z-index: 30; }

/* ---- the plan at a glance (a dialog) ---- */
.plan-glance { width: min(580px, calc(100vw - 24px)); max-height: min(88dvh, 780px); }
.plan-glance[open] { display: flex; }
.plan-glance-in { display: flex; flex-direction: column; min-height: 0; width: 100%; box-sizing: border-box; padding: 16px 16px 12px; }
.plan-glance-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.plan-glance-head > div { min-width: 0; }
.plan-glance-head .plan-ibtn { flex: 0 0 auto; }
.plan-glance-head h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; color: var(--ink, #1C201D); }
.plan-glance-sub { margin: 2px 0 0; font-size: .86rem; line-height: 1.35; color: var(--ink-soft, #3a423c); font-variant-numeric: tabular-nums; }
.plan-glance-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 2px; }
.plan-gl-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.plan-gl-row { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--line, #E4DFD1); border-radius: 10px; background: var(--card, #FFFFFF); }
.plan-gl-when { font-size: .88rem; font-weight: 700; color: var(--ink, #1C201D); font-variant-numeric: tabular-nums; }
.plan-gl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .86rem; color: var(--ink-soft, #3a423c); }
.plan-gl-place { font-size: .95rem; color: var(--ink, #1C201D); overflow-wrap: anywhere; }
.plan-gl-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.plan-gl-status { font-weight: 700; color: var(--ink, #1C201D); }
.plan-gl-status i { font-style: normal; display: inline-block; width: 1.1em; text-align: center; }
.plan-gl-price { font-variant-numeric: tabular-nums; color: var(--ink, #1C201D); }
.plan-gl-price.is-none { color: var(--ink-soft, #3a423c); }
.plan-gl-note { font-style: italic; overflow-wrap: anywhere; }
.plan-gl-edit { align-self: flex-start; font-size: .82rem; }
.plan-gl-totals { list-style: none; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--paper-2, #F2EEE3); display: grid; gap: 2px; font-size: .9rem; color: var(--ink, #1C201D); font-variant-numeric: tabular-nums; }
.plan-gl-totals[hidden] { display: none; }
.plan-gl-totals li:first-child { font-weight: 700; }
.plan-glance-money { display: grid; gap: 8px; margin: 0 0 8px; }
.plan-glance-money .plan-nf-cur { max-width: 14rem; }
.plan-glance-ratesbox h3 { margin: 0 0 4px; font-size: .86rem; color: var(--ink, #1C201D); }
.plan-glance-ratesbox[hidden] { display: none; }
.plan-glance-rates { display: grid; gap: 6px; }
.plan-rate { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink, #1C201D); }
.plan-rate .plan-rate-in { width: 6rem; flex: 0 0 auto; }
.plan-glance .plan-note { margin: 0 0 8px; color: var(--ink-soft, #3a423c); }
.plan-glance .plan-note[hidden] { display: none; }
.plan-glance .plan-days-keepfail { color: var(--finish, #a63a26); font-weight: 600; }
.plan-glance-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line, #E4DFD1); }
.plan-glance-actions button { padding: 9px 14px; border: 1px solid var(--line, #E4DFD1); border-radius: 9px; background: var(--card, #FFFFFF); color: var(--ink, #1C201D); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.plan-glance-actions button:hover { background: var(--paper-2, #F2EEE3); }
.plan-glance-actions button:focus-visible { outline: 2px solid var(--pine, #1F4A38); outline-offset: 2px; }
.plan-glance-actions .primary { background: var(--pine, #1F4A38); border-color: var(--pine, #1F4A38); color: #fff; }
.plan-glance-actions .primary:hover { background: #173b2c; }
.plan-glance-clear { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 10px; font-size: .84rem; }
.plan-glance .plan-linklike { color: var(--pine, #1F4A38); }

/* ---- a phone: a finger's size ---- */
@media (max-width: 860px) {
  .plan.next .plan-glance-btn { min-height: 44px; }
  .plan.next .plan-linkbtn { min-height: 44px; }
  .plan.next .plan-days-times summary { min-height: 44px; display: flex; align-items: center; padding-block: 0; }
  .plan.next .plan-when-field input { min-height: 44px; font-size: max(16px, 1rem); }
  .plan.next .plan-timeclear-row .plan-linklike { width: 44px; height: 44px; }
  .plan.next .plan-day-name { min-height: 44px; font-size: max(16px, 1rem); }
  .plan.next .plan-ibtn, .plan-glance .plan-ibtn { width: 44px; height: 44px; }
  .plan.next .plan-day .plan-linklike, .plan.next .plan-night-tools .plan-linklike { display: inline-flex; align-items: center; min-height: 44px; }
  .plan.next .plan-pick { min-height: 44px; }
  .plan.next .plan-night > summary { min-height: 44px; justify-content: center; }
  .plan.next .plan-nf input[type="text"], .plan.next .plan-nf select, .plan.next .plan-nf textarea, .plan-glance .plan-nf select, .plan-glance .plan-rate-in { min-height: 44px; font-size: max(16px, 1rem); }
  .plan.next .plan-seg-i span { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .plan.next .plan-nf-check { min-height: 44px; }
  .plan.next .plan-nf-check input { width: 24px; height: 24px; }
  .plan.next .plan-night-books .book { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; }
  .plan.next .plan-nf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 5.4rem); }
  .plan.next .plan-nf-row .plan-nf-check { grid-column: 1 / -1; }
  .plan-glance-actions button { min-height: 44px; }
  .plan-glance .plan-gl-edit, .plan-glance .plan-glance-clear .plan-linklike { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
@media (max-width: 640px) {
  .plan-glance { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .plan-gl-row { grid-template-columns: 4.6rem minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .plan.next .plan-days-timegrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- on paper ---- */
@media print {
  .pp-glance .pp-note { margin: 0; color: #555; }
  .pp-glance .plan-gl-list { list-style: none; margin: 0; padding: 0; display: block; }
  .pp-glance .plan-gl-row { display: grid; grid-template-columns: 24mm minmax(0, 1fr); gap: 0 4mm; padding: 2mm 0; border: 0; border-bottom: .3mm solid #d9d3c5; border-radius: 0; background: none; break-inside: avoid; }
  .pp-glance .plan-gl-when { font-size: 10pt; color: #1C201D; }
  .pp-glance .plan-gl-main { gap: .5mm; font-size: 9.5pt; color: #333; }
  .pp-glance .plan-gl-place { font-size: 11pt; color: #1C201D; }
  .pp-glance .plan-gl-line { gap: 0 5mm; }
  .pp-glance .plan-gl-status, .pp-glance .plan-gl-price { color: #1C201D; }
  .pp-glance .plan-gl-totals { display: block; margin: 3mm 0 0; padding: 2mm 0 0; border-top: .4mm solid #1C201D; border-radius: 0; background: none; list-style: none; font-size: 10pt; color: #1C201D; }
  .pp-glance .plan-gl-totals li { margin: 0 0 .6mm; }
}
@media (prefers-reduced-motion: reduce) {
  .plan.next .plan-night > summary::before { transition: none; }
}