/* Plan my time, in the desk's own window (outing.js): the map in the card, the plan beside it (below it on a phone). The map keeps the
   chart's parchment and ink (atlas.css); everything round it is the window's own look. */
.ot-map { position: relative; z-index: 0; isolation: isolate; scroll-margin-top: 110px; width: 100%; height: 56dvh; min-height: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line, #3a2c1b); background: #cfd8cc; touch-action: none; }
.ot-map.compact { height: 34dvh; min-height: 220px; }
.ot-map .atlas-host { position: absolute; inset: 0; }
.ot-banner { position: absolute; z-index: 2; left: 8px; right: 62px; top: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(36, 26, 14, 0.9); color: #f5e7c6; font: 600 12.5px/1.4 var(--font, system-ui); border-left: 4px solid #c9a24a; pointer-events: none; }
.ot-banner.late { border-left-color: #d9534f; }
.ot-banner.ok { border-left-color: #6fa35a; }
.ot-tools { position: absolute; z-index: 2; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; transition: opacity 0.15s; }
.ot-map.inking .ot-tools { opacity: 0; pointer-events: none; }
.ot-tool { min-width: 46px; min-height: 36px; padding: 4px 8px; border-radius: 10px; border: 1px solid #8a6c42; background: rgba(240, 225, 190, 0.95); color: #3d2a18; font: 700 13px Georgia, serif; cursor: pointer; }
.ot-tool:active { background: #e0cb97; }
.ot-map .route-ink { z-index: 5; }
.ot-busy { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 10px; border-radius: 10px; background: var(--panel-2, rgba(255, 255, 255, 0.06)); font-weight: 600; }
.ot-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted, #8a8a8a); border-top-color: var(--gold, #c9a24a); animation: ot-turn 0.8s linear infinite; flex: none; }
@keyframes ot-turn { to { transform: rotate(360deg); } }
.ot-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.ot-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; margin: 12px 0 0; }
.ot-row .ot-field { margin: 0; }
.ot-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, #8a8a8a); }
.ot-field input[type=time], .ot-field input[type=text], .ot-select { min-height: 44px; border-radius: 8px; border: 1px solid var(--line, #3a2c1b); background: var(--bg, #14100b); color: var(--text, #eee); font: 600 16px var(--font, system-ui); padding: 0 10px; width: 100%; box-sizing: border-box; }
.ot-seg { display: flex; border: 1px solid var(--line, #3a2c1b); border-radius: 8px; overflow: hidden; min-height: 44px; }
.ot-segb { flex: 1; border: 0; background: transparent; color: var(--text, #eee); font: 700 15px var(--font, system-ui); cursor: pointer; }
.ot-segb.on { background: #a3261b; color: #fbf1d6; }
.ot-go { width: 100%; margin: 14px 0 0; min-height: 46px; }
.ot-msg { min-height: 1.2em; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--warn, #d9a441); }
.ot-fallback { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ot-areas { width: 100%; }
.ot-bars { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.ot-bar { display: grid; grid-template-columns: 3.2em 1fr auto; gap: 8px; align-items: center; font-size: 12px; color: var(--muted, #8a8a8a); }
.ot-bar-t { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ot-bar-t i { display: block; height: 100%; background: var(--ok, #6fa35a); border-radius: 3px; transition: width 0.4s; }
.ot-bar:nth-child(2) .ot-bar-t i { background: var(--gold, #c9a24a); }
.ot-sum { font: 700 15px/1.35 Georgia, serif; margin: 6px 0 2px; }
.ot-spare { font-size: 13px; color: var(--ok, #6fa35a); font-weight: 600; }
.ot-late { font-size: 13px; color: var(--warn, #d9a441); font-weight: 700; }
.ot-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ot-step { display: flex; align-items: stretch; gap: 10px; border: 1px solid var(--line, #3a2c1b); border-radius: 10px; overflow: hidden; }
.ot-step.next { border-color: #a3261b; box-shadow: 0 0 0 2px rgba(163, 38, 27, 0.25); }
.ot-step.done { opacity: 0.55; }
.ot-step.done .ot-name { text-decoration: line-through; }
.ot-step.skipped { opacity: 0.4; }
.ot-time { flex: none; width: 3.4em; padding: 10px 0 10px 10px; font: 700 15px var(--font, system-ui); font-variant-numeric: tabular-nums; color: var(--gold, #c9a24a); }
.ot-main { flex: 1; min-width: 0; text-align: left; align-items: flex-start; border: 0; background: none; padding: 9px 10px 9px 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: inherit; font: inherit; }
.ot-name { font: 700 15px/1.3 var(--font, system-ui); overflow-wrap: anywhere; }
.ot-sub { font-size: 12px; color: var(--muted, #8a8a8a); line-height: 1.35; }
.ot-left { font-size: 13px; color: var(--muted, #8a8a8a); margin-top: 8px; }
.ot-leftline { padding: 3px 0 0 4px; }
.ot-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (min-width: 820px) { .detail.wide .panel-cols.ot-cols { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); }
  .ot-map, .ot-map.compact { height: calc(100dvh - 190px); } }
@media (prefers-reduced-motion: reduce) { .ot-spin { animation: none; } .ot-bar-t i { transition: none; } }

/* The map's own medallion in the header (Chris, 27 Oct: "the map should have its own medallion"): the same round of glass as the reload button
   and his medallion, a small chart of the coast with a route and a pin; gold while a trip is on. */
.plan-open { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; margin-left: 10px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.plan-open svg { display: block; width: 100%; height: 100%; }
/* The map medallion is a compass (Chris, 29 Oct: the first one, a clay band round a dark disc with an orange star, read as a flag): a gold rim,
   a band of deep bronze with stopped meanders, and a tondo of night-blue glaze with a compass card in ivory and brass, north in vermilion
   and the one marker that never moves on the rim. compass.js turns the card (#pm-card) with the device's own compass where there is one. */
.plan-open .pm-rim { fill: #c9a24a; }
.plan-open .pm-band { fill: #5a3a22; }
.plan-open .pm-hooks { fill: none; stroke: #c9a24a; stroke-width: 2; stroke-linecap: round; }
.plan-open .pm-sea { fill: #0b1620; }
.plan-open .pm-ring { fill: none; stroke: #c9a24a; stroke-width: 0.9; }
.plan-open .pm-tick { fill: none; stroke: #9c845a; stroke-width: 0.7; }
.plan-open .pm-tick.major { stroke: #e6c46a; stroke-width: 1.1; }
.plan-open .pm-tip { fill: #d9553a; }
.plan-open .pm-lit { fill: #f1e6c4; } .plan-open .pm-shade { fill: #9a8458; }
.plan-open .pm-n-lit { fill: #e0603f; } .plan-open .pm-n-shade { fill: #a63a24; }
.plan-open .pm-lub { fill: #e6c46a; stroke: #0b1620; stroke-width: 0.8; stroke-linejoin: round; }
.plan-open .pm-hub { fill: #c9a24a; stroke: #0b1620; stroke-width: 0.9; }
.plan-open .pm-pin { fill: #0b1620; }
@media (min-width: 1000px) { .top .plan-open { align-self: flex-start; margin-top: 4px; } }
.plan-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.plan-open.on .pm-rim { fill: #e6c46a; }
html.yacht3d body.in-room .plan-open { margin-top: 6px; }
body:has(#detail.fill[open]) .plan-open { display: none; }

/* Plan my time follows the day's route (outing-route.js) and has a compass of its own (compass.js rose). */
.ot-route { margin: 12px 0 0; padding: 12px; border-radius: 12px; border: 1px solid var(--gold, #c9a24a); background: var(--panel-2, rgba(255, 255, 255, 0.05)); }
.ot-route-k { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold, #c9a24a); }
.ot-route-t { margin-top: 2px; font-weight: 700; font-size: 16px; }
.ot-route-n { margin-top: 4px; font-size: 13px; color: var(--muted, #8a8a8a); }
.ot-route .ot-go { margin-top: 10px; }
.ot-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.ot-ctl .ot-seg { flex: none; min-height: 38px; }
.ot-ctl .ot-segb { padding: 0 14px; font-size: 14px; }
.ot-ctl-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted, #8a8a8a); }
.ot-ask { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(201, 162, 74, 0.12); }
.ot-ask-q { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold, #c9a24a); }
.ot-ask-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ot-rose { align-self: center; margin-top: 6px; width: 46px; height: 46px; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.ot-rose svg { display: block; width: 100%; height: 100%; }
.ot-rose .ro-disc { fill: #0b1620; stroke: #c9a24a; stroke-width: 3; }
.ot-rose .ro-ring { fill: none; stroke: #9c845a; stroke-width: 1; stroke-dasharray: 1.2 3.2; }
.ot-rose .ro-n { fill: #e0603f; } .ot-rose .ro-s { fill: #f1e6c4; } .ot-rose .ro-ew { fill: #9a8458; }
.ot-rose .ro-t { fill: #e6c46a; font: 700 11px Georgia, serif; }
.ot-rose .ro-lub { fill: #e6c46a; stroke: #0b1620; stroke-width: 1; stroke-linejoin: round; }

/* The window's second pass (29 Oct, Chris: a running trip with 0 of 0 stops and nothing to do): the stop he is heading for is a card at
   the head of the sheet with its own ways, the timeline is a rail, and on a phone the map leaves the sheet in view. */
.ot-next { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gold, #c9a24a); border-left-width: 5px; background: var(--panel-2, rgba(255, 255, 255, 0.05)); }
.ot-next.here { border-color: var(--ok, #6fa35a); background: rgba(111, 163, 90, 0.1); }
.ot-next.end { border-color: var(--line, #3a2c1b); }
.ot-next-k { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold, #c9a24a); }
.ot-next.here .ot-next-k { color: var(--ok, #6fa35a); }
.ot-next-t { margin-top: 2px; font: 700 19px/1.25 Georgia, serif; overflow-wrap: anywhere; }
.ot-next-m { margin-top: 2px; font-size: 13px; color: var(--muted, #8a8a8a); }
.ot-next-n { margin-top: 6px; font: 700 15px/1.3 var(--font, system-ui); font-variant-numeric: tabular-nums; }
.ot-next-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ot-steps { position: relative; gap: 0; margin-top: 14px; padding-left: 4px; }
.ot-steps::before { content: ''; position: absolute; left: 66px; top: 14px; bottom: 14px; width: 2px; background: var(--line, #3a2c1b); }
.ot-step { position: relative; border: 0; border-radius: 0; background: none; overflow: visible; }
.ot-step::before { content: ''; position: absolute; left: 62px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg, #14100b); border: 2px solid var(--gold, #c9a24a); }
.ot-step.next { box-shadow: none; }
.ot-step.next::before { background: #a3261b; border-color: #a3261b; box-shadow: 0 0 0 4px rgba(163, 38, 27, 0.25); }
.ot-step.done::before { background: var(--ok, #6fa35a); border-color: var(--ok, #6fa35a); }
.ot-step .ot-time { width: 3.6em; padding: 12px 0; }
.ot-step .ot-main { padding: 9px 4px 9px 18px; border-radius: 10px; }
.ot-step .ot-main:hover, .ot-step.next .ot-main { background: var(--panel-2, rgba(255, 255, 255, 0.05)); }
.ot-acts .btn, .ot-acts button { min-height: 40px; }
.ot-ctl { position: sticky; top: 0; z-index: 3; padding: 4px 0 8px; background: var(--card, var(--bg, transparent)); }
@media (max-width: 819px) { .ot-map { height: 42dvh; min-height: 260px; } .ot-map.compact { height: 30dvh; } .ot-next-t { font-size: 17px; } }

/* The trip's dashboard (outing-board.js): what the visits waiting are for, the numbers that run the trip, what to say, and the report. */
.ot-sect { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #3a2c1b); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold, #c9a24a); }
.ot-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted, #8a8a8a); }
.ot-field[hidden] { display: none; }
.ot-wait { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-2, rgba(255, 255, 255, 0.05)); }
.ot-wait-k { font-weight: 700; font-size: 14px; }
.ot-wait-n { margin-top: 4px; font-size: 13px; color: var(--muted, #8a8a8a); }
.ot-wait-row { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 13px; }
.ot-wait-p { flex: none; min-width: 5.5em; font-weight: 700; color: var(--gold, #c9a24a); }
.ot-wait-t { color: var(--muted, #8a8a8a); }
.ot-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 6px; }
.ot-kpi { padding: 7px 8px; border-radius: 10px; background: var(--panel-2, rgba(255, 255, 255, 0.05)); min-width: 0; }
.ot-kpi-k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #8a8a8a); }
.ot-kpi-v { margin-top: 2px; font: 700 15px/1.2 Georgia, serif; font-variant-numeric: tabular-nums; }
.ot-kpi-s { margin-top: 1px; font-size: 11px; color: var(--muted, #8a8a8a); }
.ot-kpi.ok .ot-kpi-v { color: var(--ok, #6fa35a); } .ot-kpi.warn .ot-kpi-v { color: var(--warn, #d9a441); } .ot-kpi.late .ot-kpi-v { color: #d9534f; }
.ot-boards { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px; border-left: 4px solid var(--gold, #c9a24a); background: rgba(201, 162, 74, 0.1); font-size: 12.5px; }
.ot-board { font-weight: 600; }
.ot-brief { margin: 10px 0 0; font-size: 13.5px; }
.ot-brief summary { cursor: pointer; font-weight: 700; color: var(--gold, #c9a24a); }
.ot-brief-t { margin: 6px 0; white-space: pre-wrap; line-height: 1.45; }
.ot-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 1px 0; }
.ot-chip { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--line, #3a2c1b); color: var(--muted, #8a8a8a); }
.ot-chip.count { border-color: var(--gold, #c9a24a); color: var(--gold, #c9a24a); }
.ot-chip.warn { border-color: var(--warn, #d9a441); color: var(--warn, #d9a441); }
.ot-report { margin: 10px 0 0; padding: 14px; border-radius: 12px; border: 1px solid var(--ok, #6fa35a); border-left-width: 5px; background: rgba(111, 163, 90, 0.1); }
.ot-report-k { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok, #6fa35a); }
.ot-report-t { margin-top: 2px; font: 700 19px/1.25 Georgia, serif; }
.ot-report-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
@media (max-width: 520px) { .ot-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* No visit waiting: the exact reason, the day's moves, one ask, and his own gentle reminders (outing-hours.js). */
.ot-hours { margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ot-hr-block { padding: 11px 13px; border-radius: 12px; background: var(--panel-2, rgba(255, 255, 255, 0.05)); }
.ot-hr-k { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold, #c9a24a); }
.ot-hr-p2 { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.ot-hr-n { margin: 6px 0 0; font-size: 12.5px; color: var(--muted, #8a8a8a); line-height: 1.4; }
.ot-hr-row { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 8px; align-items: baseline; margin-top: 6px; font-size: 13.5px; }
.ot-hr-p { font-weight: 700; color: var(--gold, #c9a24a); }
.ot-hr-m { font-variant-numeric: tabular-nums; color: var(--muted, #8a8a8a); }
.ot-hr-block > button { margin-top: 8px; }
.ot-rem-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ot-rem-item { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 32px; }
.ot-rem-item input { width: 18px; height: 18px; }
.ot-rem-item input:checked + span { text-decoration: line-through; opacity: 0.6; }
.ot-hr-acts { display: flex; gap: 14px; margin-top: 6px; }
.ot-rem-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ot-rem-edit textarea { width: 100%; border-radius: 8px; border: 1px solid var(--line, #3a2c1b); background: var(--bg, #14100b); color: var(--text, #eee); font: 14px/1.4 var(--font, system-ui); padding: 8px; }