/* calltime-planner-card.css — styles for the Call Time Planner card.
 *
 * Loaded by templates2/calltime-planner-card.php. Pairs with:
 *   css2/shared-tokens.css    every var(--…) below resolves from there
 *   css2/shared-tooltip.css   the ⓘ tooltips (.ov-info / .ov-tip)
 *
 * ⚠ RULE ORDER IN THIS FILE IS THE ORIGINAL CASCADE ORDER and must be kept:
 *   base → light overrides → mobile @media → fullscreen overlay
 * Several pairs tie on specificity and are resolved by order alone — e.g.
 * .overlap-section padding is set in base and again in the 480px block, both
 * (0,1,0). Reordering these sections silently changes the layout.
 *
 * ⚠ The .ov- prefix is historical ("overlap"), not a namespace. The .ov-info /
 * .ov-tip tooltip classes are NOT here — they are site-wide and live in
 * shared-tooltip.css. The .ov-tip .ov-hint-* legend swatches ARE here: they are
 * planner-only, and they are deliberately scoped under .ov-tip so they outweigh
 * shared-tooltip.css's `.ov-tip strong` (0,2,1). Do not flatten those selectors.
 *
 * Not here: .card-head / .card-title / .card-head-right, still supplied by the
 * host page. They move in step 3f, when the card is made standalone-capable.
 */

/* ══ CARD HEADER ═══════════════════════════════════════
   Private copies of the host page's shared .card-head / .card-title rules, so the
   card is not left unstyled on a page that has no other cards. .card-head-right
   deliberately KEEPS its shared name — the card-reorder system finds its ▲▼
   injection point by that exact class — but is scoped under .ctp-head so it
   cannot reach other cards. Same approach as css2/notes-card.css. */
.ctp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ctp-title { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-family: 'Inter', sans-serif; }
.ctp-head .card-head-right { display: flex; align-items: center; gap: 6px; }

/* ══ BASE ══════════════════════════════════════════════ */
/* ══ FULL-SCREEN PLANNER MODE ══ */
.ov-fs-btn { background:none; border:1px solid rgba(241,240,249,.15); border-radius:6px; color:rgba(241,240,249,.38); font-size:12px; font-family:'Inter',sans-serif; padding:3px 8px; cursor:pointer; transition:color .15s,border-color .15s; letter-spacing:.04em; }
.ov-fs-btn:hover { color:rgba(241,240,249,.8); border-color:rgba(241,240,249,.35); }
.planner-fullscreen .ov-fs-btn { display:none; }
#plannerFsBody .share-bar       { padding-top: 0; }
#plannerFsBody .overlap-section { padding-top: 28px; }
.planner-fullscreen .card-ctrl-btn { display:none; }

/* ══ PLANNER HINT ══ */
.planner-hint { position:fixed; bottom:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 20px; background:rgba(251,146,60,.12); border-top:1px solid rgba(251,146,60,.3); cursor:pointer; transition:opacity .4s,transform .4s; user-select:none; }
.planner-hint:hover { background:rgba(251,146,60,.2); }
.planner-hint-text { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(251,146,60,.9); font-family:'Inter',sans-serif; }
.planner-hint-arrow { font-size:14px; color:rgba(251,146,60,.9); animation:hintBounce 1.6s ease-in-out infinite; }
@keyframes hintBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
.planner-hint.hidden { opacity:0; pointer-events:none; transform:translateY(100%); }
/* ══ OVERLAP / BEST TIME TO CALL ══ */
.planner-tagline { font-size:14px; color:var(--dim); font-family:'Inter',sans-serif; letter-spacing:.02em; margin-bottom:18px; }
.overlap-section { padding: 0 28px 28px; }
.ov-card {
  max-width: 700px; margin: 0 auto;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 24px; padding: 22px 28px 20px;
  /* ⚠ backdrop-filter creates a STACKING CONTEXT on .ov-card, which traps every descendant
     ⓘ tooltip's z-index:300 INSIDE this card. A downward .ov-tip on the card's lowest row
     (e.g. the Presets ⓘ, calltime-planner-card.php) then overflows past the bottom edge and
     is painted BEHIND the next card. Fix on such tips: add .ov-tip-up so they open upward and
     stay within the card (done on the Presets ⓘ and the bar-hint ⓘ). Do NOT remove
     backdrop-filter to "fix" a tooltip — it IS the card's frosted-glass look; flip the tip. */
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.ov-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.ov-section-title { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); font-weight:500; }
.ov-section-sub { font-size:13px; color:var(--dim); font-family:'Inter',sans-serif; margin-top:4px; }
.ov-pick-wrap { position:relative; }
.ov-chips-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ov-city-chip  { display:inline-flex; align-items:center; gap:5px; padding:4px 8px 4px 10px; background:rgba(129,140,248,.08); border:1.5px solid rgba(129,140,248,.22); border-radius:100px; font-size:13px; color:var(--accent2); font-family:'Inter',sans-serif; user-select:none; }
.ov-chip-x     { cursor:pointer; font-size:13px; color:var(--dim); line-height:1; padding:0 1px; transition:color .15s; }
.ov-chip-x:hover { color:var(--text); }
.ov-add-chip   { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; background:rgba(129,140,248,.05); border:1.5px dashed rgba(129,140,248,.25); border-radius:100px; cursor:pointer; font-size:13px; color:var(--dim); font-family:'Inter',sans-serif; transition:background .15s,border-color .15s,color .15s; }
.ov-add-chip:hover { background:rgba(129,140,248,.13); border-color:rgba(129,140,248,.45); color:var(--accent2); }
/* max-height + scroll is load-bearing, not polish: the empty-box view lists every
   city with a page (760+), and the ↓ footer can grow a typed query to the same.
   Unbounded, the dropdown ran ~1300px past the viewport and put its own ↓ out of
   reach. Same treatment as #wcFsDropdown in city-template.php, but a tighter cap —
   that one is anchored near the top of the viewport in fullscreen, this one opens
   partway down a card, so calc(100vh - 80px) would still overflow. */
.ov-pick-dd {
  position:absolute; top:calc(100% + 8px); right:0; width:238px;
  background:#0c0c1a; border:1.5px solid var(--border); border-radius:14px;
  z-index:200; box-shadow:0 16px 48px rgba(0,0,0,.6);
  max-height:min(60vh, 520px); overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .18s,transform .18s;
}
.ov-pick-dd::-webkit-scrollbar { width:4px; }
.ov-pick-dd::-webkit-scrollbar-track { background:transparent; }
.ov-pick-dd::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:4px; }
.ov-pick-dd.open { opacity:1; transform:none; pointer-events:auto; }
.ov-pick-input {
  width:100%; padding:11px 14px; background:transparent;
  border:none; border-bottom:1px solid var(--border); outline:none;
  color:var(--text); font-family:'Inter',sans-serif; font-size:14px;
}
.ov-pick-input::placeholder { color:var(--dim); }
.ov-pick-item {
  display:flex; align-items:center; gap:9px; padding:9px 14px;
  cursor:pointer; font-size:14px; border-bottom:1px solid rgba(255,255,255,.04); transition:background .1s;
}
.ov-pick-item:last-child { border-bottom:none; }
.ov-pick-item:hover { background:rgba(255,255,255,.055); }
.ov-pick-flag { font-size:16px; flex-shrink:0; }
.ov-pick-city { color:var(--text); font-weight:500; }
.ov-pick-rgn  { color:var(--dim); font-size:12px; }
/* "8 of 22 results ↓" footer. Same look as the menu-banner search's .dd-footer /
   .dd-more-btn, but its OWN classes: those two live in city-template.php, so
   borrowing them would leave this card unstyled on a page that is not a city page.
   Both rules are token-driven, so they need no [data-theme="light"] override. */
.ov-pick-footer { padding:7px 16px; font-size:13px; color:var(--dim); text-align:center; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:6px; }
.ov-pick-more { background:none; border:none; color:var(--accent2); cursor:pointer; font-size:15px; line-height:1; padding:0; opacity:.75; transition:opacity .15s, transform .15s; }
.ov-pick-more:hover { opacity:1; transform:translateY(2px); }
.ov-rows { display:flex; flex-direction:column; gap:18px; }
.ov-row  { display:flex; align-items:center; gap:10px;
  /* position:relative = the positioning context for the OUT-OF-FLOW ⓘ marker (.ov-mtg), at
     desktop (the ≥521px block) as well as mobile (the ≤520px block sets it again, explicitly).
     Safe: position:relative with z-index:auto does NOT create a stacking context, so descendant
     tooltips are not trapped; and the bar's overlays (.ov-seg/.ov-nl/.ov-pin/.ov-zone-*) anchor
     to .ov-bar, which is position:relative itself — so nothing re-anchors to the row. */
  position:relative;
  /* --ov-bar-h is the SINGLE SOURCE for the base/mobile bar height: .ov-bar reads it
     (below) and the mobile ⓘ marker .ov-mtg matches it (in the ≤520px block) so those two
     26px values can't drift apart on a future edit. ⚠ Scope: the ≥1100/≥1400 breakpoints
     override .ov-bar height DIRECTLY (30/36px) — those have no marker to track, so they stay
     explicit, greppable literals rather than driving this var. So at desktop this var still
     reads 26 while the bar is 30/36; that's intentional (it governs base+mobile only). */
  --ov-bar-h:26px; }
/* Two-line label: name (city, or a custom team name later) + tz line under it.
   A flex column right-aligned against the bar. The bar keeps its own height; when
   this label is taller than the bar the ROW grows and the bar stays centred — so
   the bars never thicken, the extra height is the label + the roomier row gap. */
.ov-row-lbl {
  width:110px; flex-shrink:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
}
.ov-row-name { font-size:12.5px; font-weight:500; color:var(--mid); line-height:1.25; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
/* Hover cue standing in for a pen icon — signals the name is editable without clutter. */
.ov-row-name:hover { color:var(--text); text-decoration:underline dotted rgba(129,140,248,.6); text-underline-offset:2px; }
.ov-row-tz   { font-size:10.5px; color:var(--dim); line-height:1.2; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Inline rename field — sized to the label column. text-align:left is fine even on
   the right-aligned desktop label; it just reads as a normal text field while editing. */
.ov-row-name-input { width:100%; box-sizing:border-box; font-size:inherit; font-family:'Inter',sans-serif; text-align:left; background:rgba(255,255,255,.08); border:1px solid var(--accent); border-radius:4px; color:var(--text); padding:1px 5px; outline:none; }
[data-theme="light"] .ov-row-name-input { background:rgba(0,0,0,.05); border-color:var(--accent); color:var(--text); }
.ov-bar {
  flex:1; height:var(--ov-bar-h); background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06); border-radius:7px;
  position:relative; overflow:visible; cursor:pointer;
  transition:background .1s, border-color .1s;
}
.ov-bar:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.ov-zone-night  { position:absolute; top:0; height:100%; background:rgba(239,68,68,.11); pointer-events:none; }
.ov-zone-fringe { position:absolute; top:0; height:100%; background:rgba(251,191,36,.09); pointer-events:none; }
.ov-seg { position:absolute; top:0; height:100%; background:rgba(129,140,248,.22); border-radius:5px; pointer-events:none; }
.ov-seg.hi { top:4px; height:calc(100% - 8px); background:rgba(52,211,153,.35); border:1px solid rgba(52,211,153,.4); border-radius:3px; }
/* Call Planner bar-hint legend swatches (dark) — mirror the bar colours at glyph-readable opacity.
   These are <strong> glyphs inside the shared tooltip, so they must out-colour shared-tooltip.css's
   `.ov-tip strong` rule (css2/shared-tooltip.css:37). Scoping under .ov-tip (0,2,0 vs 0,1,1) already
   wins today; `!important` keeps them correct even if that shared, cross-file rule is later hardened
   with an id-scope or its own !important — a decorative, planner-owned colour that must always win. */
.ov-tip .ov-hint-night  { color:rgba(239,68,68,.8) !important; }
.ov-tip .ov-hint-fringe { color:rgba(251,191,36,.6) !important; }
.ov-tip .ov-hint-work   { color:rgba(129,140,248,.9) !important; }
.ov-tip .ov-hint-ovl    { color:rgba(52,211,153,.9) !important; }
.ov-tip .ov-hint-meet   { color:rgba(251,191,36,.9) !important; }
.ov-nl {
  position:absolute; top:-6px; bottom:-6px; width:2px;
  /* Line broken by a transparent gap at the vertical centre, so the time label
     (centred in that gap, see .ov-nl-time) reads with the line above AND below it
     rather than struck through it. Gap is centred on 50% to match the label.
     ⚠ The gap size is the SINGLE SOURCE --ov-nl-gap below — it must stay big enough
     for the .ov-nl-time label font (12px, :303). This gradient (dark) AND the
     light-theme one (see [data-theme="light"] .ov-nl) both read the var, so the two
     copies can't drift on a one-sided edit or a font bump. Stops are ±half the gap. */
  --ov-nl-gap:18px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.72) 0, rgba(255,255,255,.72) calc(50% - var(--ov-nl-gap)/2),
    transparent           calc(50% - var(--ov-nl-gap)/2), transparent calc(50% + var(--ov-nl-gap)/2),
    rgba(255,255,255,.72) calc(50% + var(--ov-nl-gap)/2), rgba(255,255,255,.72) 100%);
  border-radius:1px;
  transform:translateX(-50%); pointer-events:none; z-index:1;
}
.ov-ticks-row { display:flex; align-items:flex-start; gap:10px; margin:4px 0 14px; }
.ov-ticks     { flex:1; position:relative; height:16px; }
@media (max-width:520px) {
  .ov-rows { gap:22px; }
  .ov-row { flex-direction:column; align-items:stretch; gap:3px; position:relative; }
  .ov-row-lbl { width:auto; align-items:flex-start; text-align:left; order:2; }
  .ov-bar { flex:none; order:1; }
  /* Keep the ⓘ LEVEL with the bar (not stacked above it): pull it out of the column flow
     and pin it to the bar's right edge, vertically centred ON the bar. top:0 + height
     :var(--ov-bar-h) span the bar (--ov-bar-h = the base/mobile bar height, so this marker
     tracks the bar automatically instead of hardcoding 26px; the 30/36px heights are the
     min-width/desktop breakpoints, which have no marker), and the marker's own
     align-items:center centres the glyph in that box.
     ⚠ Do NOT centre it with transform:translateY(-50%): a transform creates a STACKING
     CONTEXT on .ov-mtg, which traps the tooltip's z-index:300 inside the marker so the tip
     renders BEHIND the next row's bar (that bug shipped once). right:-18px parks it just
     past the bar in the card's ~28px right padding, so the bar keeps its FULL width. The
     tooltip keeps .ov-tip-r, so it still opens leftward and stays on-screen. */
  .ov-mtg { position:absolute; top:0; right:-18px; height:var(--ov-bar-h); }
  .ov-ticks-row .ov-row-lbl { display:none; }
}
/* DESKTOP counterpart of the mobile ⓘ rule above. It lives in a min-width block, NOT as a base
   rule, precisely because of the warning above: the ≤520px block sits EARLIER in the file, so a
   later base .ov-mtg rule would beat it and break the mobile marker. min-width:521px and
   max-width:520px are mutually exclusive, so neither block can ever override the other.
   WHY THIS EXISTS: in flow, the ⓘ is a THIRD flex item in .ov-row, so the moment a meeting was
   pinned .ov-bar's flex:1 lost 23px (the 13px glyph + the row's 10px gap) — i.e. the bar CHANGED
   LENGTH depending on whether a meeting was pinned. .ov-ticks-row has no marker, so its tick
   track kept the full width; every .ov-tk label then drifted right, worst at the 100% end, and
   the last one (00:00) rendered under the ⓘ instead of at the bar's right end. Taking the marker
   OUT of flow keeps .ov-bar at FULL width in BOTH the pinned and unpinned states, so the bars and
   the tick track are the same width BY CONSTRUCTION — no margin, no offset, no per-state
   correction, and no layout jump when pinning. (Mobile never had the bug for this same reason.)
   Deliberately NO top/height here (unlike the mobile rule): with top/bottom auto, .ov-row's own
   align-items:center centres the marker — the same centring the bar gets — so the ⓘ stays LEVEL
   with the bar at all three bar heights (26/30/36) with NO transform (see the transform/stacking
   warning above). right:-18px parks it in the card's 28px+ right padding, same as mobile; the
   marker's tooltip is .ov-tip-r (set in calltime-planner-card.js) so it opens leftward on-screen. */
@media (min-width:521px) {
  .ov-mtg { position:absolute; right:-18px; }
}
@media (min-width:1100px) {
  .ov-card    { max-width:950px; }
  .ov-bar     { height:30px; }
  .ov-row-lbl { width:120px; }
  .ov-row-name { font-size:13.5px; }   /* scale the team/city name with the 30px bar */
  .ov-tk      { font-size:12px; }
}
@media (min-width:1400px) {
  .ov-card         { max-width:1060px; padding:26px 36px 24px; }
  .ov-bar          { height:36px; }
  .ov-row-lbl      { width:128px; }
  .ov-row-name     { font-size:14.5px; }   /* and with the 36px bar */
  .ov-section-title{ font-size:15px; }
  .ov-section-sub  { font-size:14px; }
  .ov-btime        { font-size:16px; }
  .ov-bcity        { font-size:13px; }
  .ov-tk           { font-size:12px; }
}
/* white-space:nowrap is LOAD-BEARING. Each tick is absolutely positioned with left:<pct> and
   width:auto, so its shrink-to-fit width is capped by the space LEFT of the container's right edge
   (available = .ov-ticks width − left). The last tick sits at left:100% → available = 0 → the label
   collapses to its MIN-CONTENT width and breaks at any space it contains. 24h labels ("00:00") have
   no break opportunity so they survive, but 12h labels are "12 AM" (a space, see hLabel in
   calltime-planner-card.js) and stacked as "12" over "AM" under the bar's right end. nowrap removes
   the break opportunity so every label stays on one line and centres on its tick via the translateX. */
.ov-tk { position:absolute; transform:translateX(-50%); white-space:nowrap; font-size:11px; color:rgba(241,240,249,.22); }
.ov-result    { border-top:1px solid var(--border); padding-top:14px; }
.ov-best      { display:flex; flex-wrap:wrap; gap:8px 32px; }
.ov-best-pair { display:flex; flex-direction:column; gap:4px; }
.ov-brow      { display:flex; align-items:center; gap:7px; }
.ov-bdot      { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.ov-btime     { font-family:'Outfit',sans-serif; font-size:15px; font-weight:300; color:var(--text); }
.ov-bcity     { font-size:13px; color:var(--dim); }
.ov-no-ov     { color:var(--dim); font-size:14px; font-style:italic; margin:0; }
.ov-empty     { color:var(--dim); font-size:14px; padding:10px 0; text-align:center; }
.dst-warn  { margin-top:12px; padding:10px 14px; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.22); border-radius:9px; display:flex; flex-direction:column; gap:5px; }
.dst-row   { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:rgba(241,240,249,.5); line-height:1.45; }
.dst-row strong { color:rgba(241,240,249,.78); font-weight:500; }
.dst-icon  { flex-shrink:0; font-size:13px; }
.ov-share-btn { background:none; border:none; cursor:pointer; color:rgba(241,240,249,.32); font-size:13px; padding:3px 5px; border-radius:6px; line-height:1; transition:color .15s,background .15s; }
.ov-share-btn:hover { color:rgba(241,240,249,.72); background:rgba(241,240,249,.07); }
.ov-plan-btn { background:none; border:none; cursor:pointer; color:rgba(129,140,248,.55); font-size:13px; padding:2px 0; font-family:'Inter',sans-serif; transition:color .15s; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(129,140,248,.3); }
.ov-plan-btn:hover { color:rgba(129,140,248,.9); text-decoration-color:rgba(129,140,248,.7); }
@keyframes planBtnColorShift {
  0%   { color:rgba(129,140,248,.55); text-decoration-color:rgba(129,140,248,.3); text-shadow:none; }
  45%  { color:rgba(255,255,255,.92); text-decoration-color:rgba(255,255,255,.75); text-shadow:0 0 9px rgba(129,140,248,.55); }
  100% { color:rgba(129,140,248,.55); text-decoration-color:rgba(129,140,248,.3); text-shadow:none; }
}
.ov-plan-btn.plan-btn-hi { animation:planBtnColorShift 1.1s ease-in-out 2; }
/* ⓘ tooltip (.ov-info / .ov-tip / .ov-tip-up / .ov-tip-r) moved to
   css2/shared-tooltip.css — six cards use it, not just this one. The
   .ov-tip .ov-hint-* legend swatches above stay here: planner-only. */
.ov-share-panel { padding:0 0 14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ov-share-label { font-size:13px; color:var(--dim); }
.ov-datewrap { position:relative; display:inline-flex; align-items:center; }
.ov-share-input { background:rgba(241,240,249,.07); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:'Inter',sans-serif; font-size:14px; padding:5px 28px 5px 10px; outline:none; color-scheme:dark; }
.ov-share-input:focus { border-color:rgba(129,140,248,.55); }
.ov-share-input::-webkit-calendar-picker-indicator { opacity:0; pointer-events:none; position:absolute; }
.ov-datepick-btn { position:absolute; right:5px; background:none; border:none; cursor:pointer; font-size:13px; padding:0; line-height:1; color:rgba(241,240,249,.38); transition:color .15s; }
.ov-datepick-btn:hover { color:rgba(241,240,249,.8); }
.ov-meeting-title-inp { background:rgba(241,240,249,.07); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:'Inter',sans-serif; font-size:14px; padding:5px 10px; outline:none; color-scheme:dark; width:124px; }
.ov-meeting-title-inp:focus { border-color:rgba(129,140,248,.55); }
.ov-dur-sel { background:rgba(241,240,249,.07); border:1px solid var(--border); border-radius:6px; color:var(--dim); font-family:'Inter',sans-serif; font-size:13px; padding:3px 6px; outline:none; color-scheme:dark; width:60px; text-align:center; }
.ov-dur-sel:focus { border-color:rgba(129,140,248,.55); }
.ov-dur-sel::-webkit-inner-spin-button,.ov-dur-sel::-webkit-outer-spin-button { opacity:.5; }
.ov-dur-unit { font-size:13px; color:var(--dim); margin-left:2px; }
.ov-share-copy { background:rgba(129,140,248,.16); border:1px solid rgba(129,140,248,.28); border-radius:7px; color:var(--accent2); font-size:13px; padding:5px 12px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s; }
.ov-share-copy:hover { background:rgba(129,140,248,.28); }
.ov-copy-text-btn { background:none; border:1px solid rgba(251,191,36,.25); border-radius:7px; color:rgba(251,191,36,.65); font-size:13px; padding:5px 12px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s,border-color .15s,color .15s; }
.ov-copy-text-btn:hover { background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.5); color:rgba(251,191,36,.9); }
.ov-cal-btn { background:none; border:1px solid rgba(52,211,153,.25); border-radius:7px; color:rgba(52,211,153,.65); font-size:13px; padding:5px 12px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s,border-color .15s,color .15s; }
.ov-cal-btn:hover { background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.5); color:rgba(52,211,153,.9); }
.ov-nudge-btn { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:7px; color:rgba(241,240,249,.55); font-size:13px; padding:4px 8px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s,border-color .15s,color .15s; user-select:none; }
.ov-nudge-btn:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.2); color:var(--text); }
.ov-nudge-group { display:grid; grid-template-columns:auto auto auto auto; grid-template-rows:1fr 1fr; gap:3px; }
#ovNudgeBack     { grid-column:1; grid-row:1/3; }
#ovNudgeFwd      { grid-column:2; grid-row:1/3; }
#ovNudgeDayBack  { grid-column:3; grid-row:1; }
#ovNudgeDayFwd   { grid-column:4; grid-row:1; }
#ovNudgeWeekBack { grid-column:3; grid-row:2; }
#ovNudgeWeekFwd  { grid-column:4; grid-row:2; }
.ov-nudge-sm { font-size:12px; padding:2px 7px; }
/* Clear the pinned time. Deliberately labelled "× Clear", NOT a bare corner × —
   a corner × reads as "close panel", the exact confusion we removed by making the
   header button a pure open/close toggle. `margin-left:auto` parks it at the far
   right of the share row, set apart from the Share/Copy/Calendar buttons. Kept OUT
   of the time row on purpose: there it added ~65px to the row's one-line width and
   so raised the panel's ~831px floor. Neutral until hover, then a muted red so the
   destructive action looks it. */
.ov-clear-btn { margin-left:auto; background:none; border:1px solid rgba(255,255,255,.1); border-radius:7px; color:rgba(241,240,249,.4); font-size:12px; padding:2px 9px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s,border-color .15s,color .15s; user-select:none; white-space:nowrap; }
.ov-clear-btn:hover { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.35); color:rgba(239,68,68,.85); }
.ov-presets-row { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:8px; padding:2px 0; font-size:13px; color:var(--dim); font-family:'Inter',sans-serif; }
.ov-preset-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 10px; background:rgba(129,140,248,.06); border:1.5px solid rgba(129,140,248,.18); border-radius:100px; font-size:13px; color:rgba(129,140,248,.65); font-family:'Inter',sans-serif; cursor:pointer; user-select:none; transition:background .15s,border-color .15s,color .15s; }
.ov-preset-chip:hover { background:rgba(129,140,248,.13); border-color:rgba(129,140,248,.38); color:var(--accent2); }
.ov-preset-x { cursor:pointer; color:rgba(241,240,249,.28); font-size:13px; padding:0 2px; transition:color .15s; line-height:1; }
.ov-preset-x:hover { color:rgba(239,68,68,.65); }
.ov-save-preset-btn { background:none; border:1.5px dashed rgba(129,140,248,.22); border-radius:100px; color:rgba(241,240,249,.28); font-size:13px; padding:3px 10px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s,border-color .15s,color .15s; }
.ov-save-preset-btn:hover { background:rgba(129,140,248,.08); border-color:rgba(129,140,248,.4); color:rgba(129,140,248,.8); }
.ov-preset-name-inp { background:rgba(241,240,249,.07); border:1px solid rgba(129,140,248,.35); border-radius:6px; color:var(--text); font-family:'Inter',sans-serif; font-size:13px; padding:3px 8px; outline:none; width:150px; color-scheme:dark; }
.ov-preset-name-inp:focus { border-color:rgba(129,140,248,.65); }
.ov-preset-save-ok { background:rgba(129,140,248,.16); border:1px solid rgba(129,140,248,.3); border-radius:6px; color:var(--accent2); font-size:13px; padding:3px 10px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s; }
.ov-preset-save-ok:hover { background:rgba(129,140,248,.28); }
.ov-preset-save-cancel { background:none; border:none; color:var(--dim); font-size:14px; padding:1px 4px; cursor:pointer; line-height:1; transition:color .15s; }
.ov-preset-save-cancel:hover { color:rgba(239,68,68,.7); }
.ov-share-fb { font-size:13px; color:var(--green); }
.ov-share-tz-lbl { font-size:13px; color:var(--dim); font-family:'Inter',sans-serif; }
.ov-hours-row { display:flex; align-items:center; gap:7px; margin-top:10px; padding:2px 0; font-size:13px; color:var(--dim); font-family:'Inter',sans-serif; }
.ov-hours-sel { background:rgba(241,240,249,.07); border:1px solid var(--border); border-radius:6px; color:var(--dim); font-family:'Inter',sans-serif; font-size:13px; padding:3px 6px; outline:none; color-scheme:dark; cursor:pointer; transition:border-color .15s; }
.ov-hours-sel:focus { border-color:rgba(129,140,248,.55); }
.ov-hours-sel option { color:#f1f0f9; background:#07070e; }
.ov-per-city-toggle { background:none; border:1px solid rgba(255,255,255,.12); border-radius:5px; color:var(--dim); font-size:12px; padding:2px 7px; cursor:pointer; font-family:'Inter',sans-serif; margin-left:4px; transition:border-color .15s,color .15s; }
.ov-per-city-toggle:hover { border-color:rgba(255,255,255,.28); color:var(--mid); }
.ov-per-city-section { display:flex; flex-direction:column; gap:6px; padding:8px 0 2px; border-top:1px solid var(--border); margin-top:6px; }
.ov-per-city-row { display:flex; align-items:center; gap:7px; }
.ov-per-city-lbl { font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--mid); text-transform:uppercase; width:80px; text-align:right; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ov-pc-reset { background:none; border:none; color:rgba(241,240,249,.22); font-size:14px; cursor:pointer; padding:0 2px; line-height:1; transition:color .15s; }
.ov-pc-reset:hover { color:rgba(241,240,249,.72); }
.ov-pin-dur { position:absolute; top:3px; bottom:3px; background:rgba(251,191,36,.14); border:1px solid rgba(251,191,36,.32); border-radius:2px; pointer-events:none; z-index:1; }
.ov-weekend-lbl { position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:10px; font-weight:700; letter-spacing:.06em; color:rgba(251,191,36,.45); pointer-events:none; z-index:1; }
/* ⓘ meeting-info marker — a row sibling placed to the RIGHT of the bar (OUTSIDE .ov-bar,
   so the bar's click/drag handlers stay untouched). Uses the shared .ov-info/.ov-tip
   tooltip. Only rendered when a meeting is pinned. On desktop it needs NO rule here — it
   rides the flex row's align-items:center. The mobile override lives in the @media
   (max-width:520px) block ABOVE (`.ov-mtg { order:0; align-self:flex-end }`), which moves
   it above the stacked bar and right-aligns it so its tooltip opens leftward on-screen.
   The SAT/SUN weekend label above is left exactly as-is.
   ⚠ Do NOT add an `.ov-mtg { align-self:… }` rule at THIS point in the file: the 520px
   @media block sits EARLIER, so a later equal-specificity base rule would beat it and the
   marker would lose its mobile right-alignment (that bug shipped once — the marker stuck
   centered and its tooltip overflowed the viewport's left edge at ~360px). */
.ov-bar-weekend { border-color:rgba(251,191,36,.22) !important; }
.ov-pin { position:absolute; top:-6px; bottom:-6px; width:2px; background:rgba(251,191,36,.8); border-radius:1px; transform:translateX(-50%); pointer-events:none; z-index:2; }
.ov-nl-time { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:12px; color:rgba(255,255,255,.72); white-space:nowrap; font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums; pointer-events:none; }
.ov-pin-icon { position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); font-size:12px; white-space:nowrap; line-height:1; pointer-events:none; }
.ov-dst-zone { position:absolute; top:0; bottom:0; pointer-events:none; z-index:2; }
.ov-dst-zone.spring { background:rgba(251,146,60,.13); border-left:2px solid rgba(251,146,60,.8); }
.ov-dst-zone.fall   { background:rgba(251,146,60,.07); border-right:2px solid rgba(251,146,60,.8); }
.ov-dst-lbl { position:absolute; bottom:2px; font-size:10px; font-weight:700; letter-spacing:.02em; color:rgba(251,146,60,.95); white-space:nowrap; font-family:'Inter',sans-serif; pointer-events:none; line-height:1; }
.ov-dst-zone.spring .ov-dst-lbl { left:4px; }
.ov-dst-zone.fall   .ov-dst-lbl { right:4px; }
/* Time panel — steel aqua (dark), a muted blue-grey with a whisper of aqua
   (slate nudged toward cyan). The amber it replaced echoed the amber meeting
   marker on the bars; that link is deliberately dropped for a calmer panel that
   sits better under the indigo/green/amber action buttons. The bar markers
   (.ov-pin / .ov-pin-dur) stay amber — they are the meeting, not the panel.
   ⚠ Light-theme .pin-banner is still amber (see the [data-theme="light"] block) —
   that recolour is a separate, not-yet-done step. */
/* max-width caps how wide the panel gets on the widest card breakpoint (1060) so
   it doesn't stretch to the full bar width with the controls clustered left. No
   media query needed: at the 700px base card the panel is already narrower than
   this cap, so it has no effect there — it only bites once the card grows past it.
   Centred via `margin:0 auto` — where the cap leaves slack (the 1060 card) the
   spare room splits evenly on both sides instead of pooling on the right. At
   narrower cards the panel fills the width, so the auto margins do nothing there.
   ⚠ FLOOR is CITY-DEPENDENT. The only variable-width element in the time-controls
   row is the tz label ("<City> time"), so the one-line width climbs with the home
   city's name: Tokyo ~761 (floor 789), New York ~784 (812), Ho Chi Minh City ~828
   (856), San Cristóbal de las Casas ~888 (916). Floor = row need + this rule's 28px
   padding. Cap 860 fits essentially every city up through ~16-char names; only very
   long ones (25+ chars, a handful of the 761 pages) wrap the nudge group to a 2nd
   line and grow the panel taller there. Do NOT drop below ~812 or New York — a
   flagship page — wraps. To go genuinely narrower, trim the row CONTENT (meeting-
   title field / nudge buttons), don't just lower the cap. The 950 card (~892px
   panel) is already below this cap, so the trim only shows at 1060. */
.pin-banner { padding:10px 14px; max-width:860px; background:rgba(126,166,182,.08); border:1px solid rgba(126,166,182,.28); border-radius:9px; font-size:13px; color:rgba(241,240,249,.5); display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0 auto 26px; }
#ovBarsWrap { margin-top:20px; }
.pin-row1 { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.pin-city-block { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pin-city-time { font-size:16px; font-weight:600; color:rgba(241,240,249,.95); font-family:'Outfit',sans-serif; line-height:1.2; }
.pin-city-time strong { font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.pin-city-name { font-size:12px; color:rgba(241,240,249,.38); font-family:'Inter',sans-serif; line-height:1; }
.pin-after-change { font-size:12px; color:rgba(251,146,60,.75); font-style:italic; }
.pin-r1-dow { font-size:13px; font-weight:600; color:rgba(241,240,249,.45); margin-left:1px; }
.pin-r1-dow-we { color:rgba(251,191,36,.9); }
.pin-r1-date { font-size:13px; color:rgba(241,240,249,.5); font-weight:400; }
.pin-r1-sep { color:rgba(241,240,249,.22); font-size:14px; }
.pin-countdown { font-size:13px; color:rgba(241,240,249,.4); font-family:'Inter',sans-serif; }
.pin-meta { font-size:13px; color:rgba(241,240,249,.5); font-family:'Inter',sans-serif; margin-bottom:2px; }
.pin-banner-actions { display:flex; flex-direction:column; gap:8px; padding-top:6px; border-top:1px solid rgba(126,166,182,.2); width:100%; }
.pin-row-time  { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pin-row-share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ov-bar-hint { font-size:13px; color:var(--dim); text-align:center; margin:6px 0 0; font-family:'Inter',sans-serif; }
.ov-bar-hint.hint-new { color:rgba(251,146,60,.88); font-weight:500; }

/* Pin-banner holiday line — was filed under the host page's HOLIDAY BADGE
   block, but only the planner's pin banner ever renders it. */
.pin-city-holiday {
  display:block; font-size:8.5px; color:rgba(129,140,248,.7);
  font-style:italic; line-height:1; margin-top:2px;
}

/* ══ LIGHT THEME ═══════════════════════════════════════ */
[data-theme="light"] .pin-city-holiday { color:rgba(91,95,232,.7); }
[data-theme="light"] .planner-hint { background:rgba(251,146,60,.07); border-top-color:rgba(251,146,60,.22); }
[data-theme="light"] .ov-card { background:rgba(255,255,255,.78); border-color:rgba(0,0,0,.09); }
[data-theme="light"] .ov-bar { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.07); }
[data-theme="light"] .ov-bar:hover { background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.13); }
/* Only the COLOUR changes for light theme; the gap geometry comes from --ov-nl-gap
   (set on .ov-nl above, same element) so it stays locked to the dark copy. */
[data-theme="light"] .ov-nl { background:linear-gradient(to bottom,
    rgba(0,0,0,.75) 0, rgba(0,0,0,.75) calc(50% - var(--ov-nl-gap)/2),
    transparent     calc(50% - var(--ov-nl-gap)/2), transparent calc(50% + var(--ov-nl-gap)/2),
    rgba(0,0,0,.75) calc(50% + var(--ov-nl-gap)/2), rgba(0,0,0,.75) 100%); }
[data-theme="light"] .ov-nl-time { color:rgba(0,0,0,.85); }
[data-theme="light"] .ov-tk { color:rgba(24,24,39,.42); }
[data-theme="light"] .ov-pick-dd { background:#fff; box-shadow:0 16px 48px rgba(0,0,0,.15); scrollbar-color:rgba(0,0,0,.15) transparent; }
[data-theme="light"] .ov-pick-dd::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); }
[data-theme="light"] .ov-pick-input { color:var(--text); border-bottom-color:rgba(0,0,0,.08); }
[data-theme="light"] .ov-pick-input::placeholder { color:var(--dim); }
[data-theme="light"] .ov-pick-item { border-bottom-color:rgba(0,0,0,.05); }
[data-theme="light"] .ov-pick-item:hover { background:rgba(0,0,0,.04); }
[data-theme="light"] .ov-share-input { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); color:var(--text); color-scheme:light; }
[data-theme="light"] .ov-meeting-title-inp { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); color:var(--text); color-scheme:light; }
[data-theme="light"] .ov-dur-sel { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); color:var(--text); color-scheme:light; }
[data-theme="light"] .ov-hours-sel { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); color:var(--text); color-scheme:light; }
[data-theme="light"] .ov-hours-sel option { background:#fff; color:#181827; }
[data-theme="light"] .ov-nudge-btn { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); color:var(--mid); }
[data-theme="light"] .ov-nudge-btn:hover { background:rgba(0,0,0,.09); border-color:rgba(0,0,0,.2); color:var(--text); }
[data-theme="light"] .ov-clear-btn { border-color:rgba(0,0,0,.12); color:rgba(24,24,39,.5); }
[data-theme="light"] .ov-clear-btn:hover { background:rgba(220,38,38,.09); border-color:rgba(220,38,38,.4); color:rgba(185,28,28,.95); }
[data-theme="light"] .ov-preset-name-inp { background:rgba(0,0,0,.05); border-color:rgba(99,102,241,.3); color:var(--text); color-scheme:light; }
/* Time panel — steel aqua (light). Currently the DARK theme's exact values
   (fill .08 / border .28), being trialled on white. Expect it faint — a light
   steel-blue border that pops on near-black has little contrast on white. If it
   reads too weak, the "soft" light tuning was fill .16 / border rgba(96,134,156,.5)
   / separator rgba(96,134,156,.3). Was amber; link to the bars' marker dropped. */
[data-theme="light"] .pin-banner { background:rgba(126,166,182,.08); border-color:rgba(126,166,182,.28); }
[data-theme="light"] .pin-banner-actions { border-top-color:rgba(126,166,182,.2); }
[data-theme="light"] .dst-warn { background:rgba(251,191,36,.06); border-color:rgba(251,191,36,.18); }
[data-theme="light"] .ov-result { border-top-color:rgba(0,0,0,.09); }
[data-theme="light"] .ov-per-city-section { border-top-color:rgba(0,0,0,.09); }
/* Pin banner text (hardcoded light colours invisible on light bg) */
[data-theme="light"] .pin-banner { color:rgba(24,24,39,.68); }
[data-theme="light"] .pin-city-time { color:rgba(24,24,39,.95); }
[data-theme="light"] .pin-city-time strong { color:#181827; }
[data-theme="light"] .pin-city-name { color:rgba(24,24,39,.6); }
[data-theme="light"] .pin-r1-dow { color:rgba(24,24,39,.68); }
[data-theme="light"] .pin-r1-date { color:rgba(24,24,39,.7); }
[data-theme="light"] .pin-r1-sep { color:rgba(24,24,39,.4); }
[data-theme="light"] .pin-countdown { color:rgba(24,24,39,.65); }
[data-theme="light"] .pin-meta { color:rgba(24,24,39,.68); }
/* DST warning text */
[data-theme="light"] .dst-row { color:rgba(24,24,39,.68); }
[data-theme="light"] .dst-row strong { color:rgba(24,24,39,.8); }
/* Planner controls */
[data-theme="light"] .ov-save-preset-btn { border-color:rgba(91,95,232,.35); color:rgba(24,24,39,.5); }
[data-theme="light"] .ov-save-preset-btn:hover { background:rgba(91,95,232,.08); border-color:rgba(91,95,232,.52); color:rgba(91,95,232,.85); }
/* [data-theme="light"] .ov-info / .ov-tip → css2/shared-tooltip.css */
[data-theme="light"] .ov-share-btn { color:rgba(24,24,39,.48); }
[data-theme="light"] .ov-share-btn:hover { color:rgba(24,24,39,.72); background:rgba(24,24,39,.06); }
[data-theme="light"] .ov-datepick-btn { color:rgba(24,24,39,.52); }
[data-theme="light"] .ov-datepick-btn:hover { color:rgba(24,24,39,.8); }
[data-theme="light"] .ov-preset-x { color:rgba(24,24,39,.48); }
[data-theme="light"] .ov-pc-reset { color:rgba(24,24,39,.45); }
[data-theme="light"] .ov-pc-reset:hover { color:rgba(24,24,39,.72); }
/* Planner accent elements — light theme (deeper colours; pale accents wash out on white) */
[data-theme="light"] .ov-city-chip { color:#5b5fe8; background:rgba(91,95,232,.07); border-color:rgba(91,95,232,.32); }
[data-theme="light"] .ov-add-chip { border-color:rgba(91,95,232,.3); }
[data-theme="light"] .ov-add-chip:hover { background:rgba(91,95,232,.08); border-color:rgba(91,95,232,.5); color:#5b5fe8; }
[data-theme="light"] .ov-plan-btn { color:rgba(91,95,232,.9); text-decoration-color:rgba(91,95,232,.45); }
[data-theme="light"] .ov-plan-btn:hover { color:#4338ca; text-decoration-color:rgba(91,95,232,.75); }
[data-theme="light"] .ov-preset-chip { color:#5b5fe8; background:rgba(91,95,232,.06); border-color:rgba(91,95,232,.3); }
[data-theme="light"] .ov-preset-chip:hover { background:rgba(91,95,232,.12); border-color:rgba(91,95,232,.5); color:#4338ca; }
[data-theme="light"] .ov-share-copy { color:#4f46e5; background:rgba(91,95,232,.13); border-color:rgba(91,95,232,.34); }
[data-theme="light"] .ov-share-copy:hover { background:rgba(91,95,232,.22); }
[data-theme="light"] .ov-preset-save-ok { color:#4f46e5; background:rgba(91,95,232,.13); border-color:rgba(91,95,232,.34); }
[data-theme="light"] .ov-copy-text-btn { color:#b45309; border-color:rgba(180,83,9,.35); }
[data-theme="light"] .ov-copy-text-btn:hover { background:rgba(180,83,9,.08); border-color:rgba(180,83,9,.55); color:#92400e; }
[data-theme="light"] .ov-cal-btn { color:#047857; border-color:rgba(4,120,87,.35); }
[data-theme="light"] .ov-cal-btn:hover { background:rgba(4,120,87,.08); border-color:rgba(4,120,87,.55); color:#065f46; }
[data-theme="light"] .ov-share-fb { color:#047857; }
[data-theme="light"] .ov-weekend-lbl { color:rgba(180,83,9,.75); }
[data-theme="light"] .planner-hint-text { color:#c2410c; }
[data-theme="light"] .planner-hint-arrow { color:#c2410c; }
[data-theme="light"] .pin-after-change { color:#c2410c; }
[data-theme="light"] .pin-r1-dow-we { color:#b45309; }
/* Light-mode bar fills — an opaque "cool-neutral" palette. Chosen over the dark theme's
   translucent tints (which wash out on white) AND over an earlier candy-pastel set whose
   salmon-pink night band read too soft/feminine for a broad audience. Solid, lightly-
   muted hues: slate blue-grey = night (reads as "night", gender-neutral), sand =
   twilight, soft blue = working hours, sage = overlap (best time). ⚠ This set trades the
   red-ish "night = bad time" cue for a calmer slate — deliberate. The overlap keeps a
   deeper green border (#74A063) so it stays the hero among the softer bands. The now-line
   stays black (.ov-nl rule, unchanged). Dark mode keeps its translucent values —
   light-theme only. (Legend swatches .ov-hint-* below are intentionally left more
   saturated — muted glyphs are too faint to read on the tooltip.) */
[data-theme="light"] .ov-seg { background:#9DBBDC; }
[data-theme="light"] .ov-seg.hi { background:#A9C79B; border-color:#74A063; }
[data-theme="light"] .ov-zone-night { background:#B0B5BF; }
[data-theme="light"] .ov-zone-fringe { background:#E4C596; }
/* The DST-transition zones and the pinned meeting-duration block are translucent amber/orange
   overlays tuned for DARK bars; on white the FILLS wash out (the .8 DST borders survive, but the
   .13/.07 zone fills and the .14 pin-dur block go faint). Keep their semantic hues — orange = DST
   warning, amber = the meeting — but deepen the fills and borders so they read on white. Kept
   deliberately translucent so the coloured bar segments still show THROUGH the meeting block. */
[data-theme="light"] .ov-pin-dur { background:rgba(251,191,36,.32); border-color:rgba(217,119,6,.7); }
[data-theme="light"] .ov-dst-zone.spring { background:rgba(251,146,60,.2); border-left-color:rgba(194,65,12,.85); }
[data-theme="light"] .ov-dst-zone.fall   { background:rgba(251,146,60,.13); border-right-color:rgba(194,65,12,.85); }
/* bar-hint legend (light) — match the deepened light-mode bars above. Same !important rationale as
   the dark block: out-colours [data-theme="light"] .ov-tip strong (shared-tooltip.css:40-42), today by
   specificity (0,3,0 vs 0,2,1) and robustly if that shared rule is ever hardened. The light rule still
   wins over the dark !important block above by specificity, so the theme split is preserved. */
[data-theme="light"] .ov-tip .ov-hint-night  { color:rgba(220,38,38,.9) !important; }
[data-theme="light"] .ov-tip .ov-hint-fringe { color:rgba(180,83,9,.9) !important; }
[data-theme="light"] .ov-tip .ov-hint-work   { color:rgba(91,95,232,.95) !important; }
[data-theme="light"] .ov-tip .ov-hint-ovl    { color:rgba(4,120,87,.95) !important; }
[data-theme="light"] .ov-tip .ov-hint-meet   { color:rgba(251,191,36,.9) !important; }
[data-theme="light"] .ov-fs-btn { border-color:rgba(24,24,47,.28); color:rgba(24,24,47,.58); }
[data-theme="light"] .ov-fs-btn:hover { color:rgba(24,24,47,.8); border-color:rgba(24,24,47,.32); }

/* ══ MOBILE ════════════════════════════════════════════ */
@media (max-width:480px) {
  /* Planner: tighten outer padding */
  .overlap-section { padding:0 16px 24px; }
  /* Planner: "per city ▾" button wraps onto its own line */
  .ov-hours-row       { flex-wrap:wrap; }
  .ov-per-city-toggle { flex:0 0 100%; margin-left:0; margin-top:3px; }
  /* Per-city dropdown: city flag+name on its own line, selects below */
  .ov-per-city-row    { flex-wrap:wrap; row-gap:3px; }
  .ov-per-city-lbl    { flex:0 0 100%; width:auto; text-align:left; }
  .ov-pc-reset        { margin-left:auto; }
}

/* ══ FULLSCREEN OVERLAY ════════════════════════════════ */
/* ══ CALL PLANNER FULLSCREEN OVERLAY ══ */
#plannerFsOverlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  flex-direction: column;
}
body.planner-fullscreen { overflow: hidden; }
body.planner-fullscreen #plannerFsOverlay { display: flex; }
body.planner-fullscreen #site-header,
body.planner-fullscreen #menu_banner { display: none; }
#plannerFsHeader {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative; z-index: 10;
}
#plannerFsClose {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  border-radius: 8px; color: var(--dim); font-size: 11px;
  font-family: 'Inter', sans-serif; font-weight: 500;
  padding: 4px 12px; cursor: pointer; letter-spacing: .04em;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
#plannerFsClose:hover { color: var(--text); border-color: rgba(129,140,248,.4); }
#plannerFsBody {
  flex: 1; overflow-y: auto; padding-top: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
#plannerFsBody::-webkit-scrollbar { width: 6px; }
#plannerFsBody::-webkit-scrollbar-track { background: transparent; }
#plannerFsBody::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
[data-theme="light"] #plannerFsBody { scrollbar-color: rgba(0,0,0,.15) transparent; }
[data-theme="light"] #plannerFsBody::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
@media (max-width: 600px) {
  #plannerFsHeader { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  #plannerFsClose { font-size: 10px; padding: 3px 8px; }
}