/* ============================================================================
   F27  BOOK SEVERAL DAYS AT ONCE
   Bookings over several days drawn as bars across the Calendar, the grip that
   stretches one, the days lighting up under a drag (mouse or finger), the
   label that says which days, and the booking drawer's More days section with
   its Copy to other days picker. Tokens only, so both themes work. Nothing
   here sits between z-index 60 and 62 (F00's notice rule).
   ============================================================================ */

/* ------------------------------------------------------------- the bars */
/* Every piece of a booking can carry the grip, so it is positioned. A title
   kept to one line must never widen its day: without min-width 0 a grid
   column grows to fit the longest title, and the phone's month grid ran to
   twice its width (found on the 390px test, 13 Oct). */
.cal .day,.calw .wcell{min-width:0}
.cal .ev,.calw .ev{position:relative;min-width:0;overflow:hidden}
.ev .f27-t{display:block;overflow:hidden;text-overflow:ellipsis}
.cal .ev .f27-t{white-space:nowrap}

/* A booking over several days: one line, the same height on every day, so
   its pieces line up into a bar. Square ends where it carries on, and the
   piece reaches across the cell's padding and the 1px rule to meet the next. */
.ev.f27-span{white-space:nowrap}
.ev.f27-span .f27-t{white-space:nowrap}
.ev.f27-carry{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-8px}
.ev.f27-cont{border-top-left-radius:0;border-bottom-left-radius:0;border-left-width:0;margin-left:-8px;padding-left:8px}
.calw .ev.f27-carry{margin-right:-6px}
.calw .ev.f27-cont{margin-left:-6px;padding-left:6px}
/* The title sits where the bar starts and where each week row picks it up;
   the other pieces keep their height but not the words (they are in the
   tooltip, and a screen reader hears the bar once per row). */
.ev.f27-span:not(.f27-head) .f27-t{color:transparent}
.ev.f27-span:not(.f27-head) .f27-t *{visibility:hidden}
/* F15's "(p)" for a pencilled booking goes inside the words, so it sits on
   the same line (a second line made the first piece of a bar taller than the
   rest) and comes once per bar, not on every day of it. */
.ev.f15-pencil::after{content:none}
.ev.f15-pencil .f27-t::after{content:" (p)";color:var(--ink-3);font-weight:600}
.ev.f27-span:not(.f27-head) .f27-t::after{content:none}
/* The title runs along the bar to the end of the week row: the head piece
   lets its words overflow (above the pieces after it), sized to the number of
   days the bar covers in this row. The cell pitch is about the piece's width
   plus 7px in the month (6px in the week), hence the small sums. */
.ev.f27-head{overflow:visible;z-index:1}
/* The words lying over the next days must not catch the pointer: a press on
   Tuesday's part of the bar is Tuesday (a move is measured from the day it was
   picked up on), not the first day the title started on. */
.ev.f27-head .f27-t{pointer-events:none}
.ev.f27-w2 .f27-t{width:calc(200% + 7px)}
.ev.f27-w3 .f27-t{width:calc(300% + 14px)}
.ev.f27-w4 .f27-t{width:calc(400% + 21px)}
.ev.f27-w5 .f27-t{width:calc(500% + 28px)}
.ev.f27-w6 .f27-t{width:calc(600% + 35px)}
.ev.f27-w7 .f27-t{width:calc(700% + 42px)}
/* How many days, beside the title. */
.f27-n{display:inline-block;margin-left:5px;padding:0 4px;border-radius:3px;font-family:var(--mono);font-size:9.5px;
  font-weight:700;color:var(--ink-2);background:var(--panel-3)}
/* An empty lane on a day, so the bars underneath stay in line. */
.f27-gap{display:block;min-height:calc(10.5px * 1.3 + 6px);flex:none}

/* The grip: the last day of every booking, the end Adam drags to make it
   longer or shorter. A thin bar at rest, wider under a finger. */
.f27-grip{position:absolute;top:0;right:0;bottom:0;width:10px;cursor:ew-resize;z-index:2;border-radius:0 3px 3px 0}
.f27-grip::before{content:"";position:absolute;top:3px;bottom:3px;right:3px;width:2px;border-radius:1px;
  background:currentColor;opacity:.28}
.ev:hover .f27-grip::before{opacity:.6}
.ev .f27-t{padding-right:6px}
@media (pointer:coarse){
  .f27-grip{width:20px}
  .f27-grip::before{right:5px;opacity:.45}
  .ev .f27-t{padding-right:14px}
}

/* --------------------------------------------------------------- the drag */
/* A long press on a phone must not select text or open the phone's menu. */
.cal,.calw{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cal .day.f27-range,.calw .wcell.f27-range{box-shadow:inset 0 0 0 2px var(--lime);background:var(--lime-ghost)}
.f27-dragging{touch-action:none}
.f27-dragging .ev{cursor:grabbing}
body.f27-is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
/* "Book Mon 19 Oct to Thu 22 Oct, 4 days", following the pointer. */
.f27-tip{position:fixed;z-index:50;pointer-events:none;max-width:220px;padding:6px 9px;border-radius:4px;
  font-size:12px;font-weight:600;line-height:1.35;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--lime);box-shadow:0 6px 18px rgba(0,0,0,.28)}

/* The booking form: the line under Last day turns red when it is before the first. */
.frm small.f27-bad{color:var(--crit)}

/* ------------------------------------------------------ the drawer section */
.f27{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.f27 h4{margin:0 0 8px}
.f27-said{margin:0 0 10px;padding:8px 10px;border-radius:4px;font-size:12.5px;line-height:1.45;
  background:var(--panel-2);border-left:3px solid var(--lime);color:var(--ink)}
.f27-said.warn{border-left-color:var(--warn)}
.f27-link{background:none;border:0;padding:0;font:inherit;color:var(--lime);cursor:pointer;text-align:left;
  text-decoration:underline;text-underline-offset:2px}
.f27-warn{color:var(--warn)}
.f27-btns{flex-wrap:wrap}

.f27-batch{border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin:0 0 12px}
.f27-bh{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0 0 6px}
.f27-batch ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.f27-batch li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12.5px}
.f27-job{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.f27-state{font-size:11.5px;font-weight:600}
.f27-state.ok{color:var(--lime)}
.f27-state.warn{color:var(--warn)}
.f27-state.dim{color:var(--ink-3)}
.f27-here{font-size:11px;color:var(--ink-3)}
.f27-tell{flex-wrap:wrap;margin:0}
.f27-tell .x-note{margin:4px 0}

.f27-ask{border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:4px;padding:10px 12px;
  background:var(--panel-2);margin:10px 0 0}
.f27-q{margin:0 0 6px;font-size:13px;line-height:1.45;color:var(--ink);font-weight:600}
.f27-practice{margin:0 0 8px;font-size:12px;color:var(--warn)}

/* The day picker: a small month, days to tap. */
.f27-cal-h{display:flex;align-items:center;gap:10px;margin:4px 0 8px}
.f27-cal-t{font-weight:700;min-width:130px;text-align:center}
.f27-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:340px;margin:0 0 12px}
.f27-dow{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.f27-d{min-height:36px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);
  font:inherit;font-family:var(--mono);font-size:12.5px;cursor:pointer}
.f27-d:hover{border-color:var(--lime)}
.f27-d.own{background:var(--lime-ghost);border-color:var(--lime);border-style:dashed}
.f27-d.busy{box-shadow:inset 0 -3px 0 var(--panel-3)}
.f27-d.on{background:var(--lime);border-color:var(--lime);color:var(--ground);font-weight:700}
.f27-picked{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.f27-picked li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.f27-pd{min-width:150px;font-size:12.5px;font-weight:600}
.f27-picked select{flex:1;min-width:0;max-width:100%;font:inherit;font-size:12.5px;padding:6px 8px;
  border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink)}
.f27-x{border:0;background:none;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
.f27-err{color:var(--crit);font-size:12.5px;margin:0 0 8px}
.f27-err:empty{display:none}

@media(max-width:700px){
  .f27{margin-top:14px;padding-top:12px}
  .f27 .btnrow .btn{min-height:40px}
  .f27-cal{max-width:none}
  .f27-d{min-height:42px}
  .f27-pd{min-width:0;flex:1 1 100%}
  .f27-picked select{min-height:40px}
}