/* ============================================================
   GP Team Hub - plannerweek.css

   The weekly calendar on Strategy: the hour gutter, the three-week
   window, the blocks a rep draws on it, the line between two of them
   and the presses that add and remove one. planner.css holds the
   settings, the figures and the day cards above it.

   Loaded by the css/planner.css set in includes/manifest.php.

   Doc: docs/notes/new/css/plannerweek.css.md
   ============================================================ */

/* ---- the weekly calendar ----
   The hour gutter on the left, then the days in a window that shows one
   week and holds three, so the week before and the week after can be
   pulled into view by their heads. The hours before the field day, when
   a booking falls in them, sit folded under the heads and open on a
   press; --plearly is their height as shown right now. */
.plnr-cal{padding-bottom:6px;--plearly:0px;}
.plnr-cal[data-plnr-earlyopen="1"]{--plearly:var(--plearlyh);}
.plnr-frame{display:flex;align-items:flex-start;}
.plnr-gut{flex:0 0 52px;position:relative;z-index:2;}
.plnr-gut-sp{height:calc(56px + var(--plstrip));}
.plnr-gut-early{position:relative;height:var(--plearly);overflow:hidden;transition:height .22s ease;}
.plnr-gut-in{position:relative;height:var(--plh);}
.plnr-hlab{
  position:absolute;right:6px;transform:translateY(-7px);
  font-size:.66rem;color:var(--ink-faint);white-space:nowrap;
}
.plnr-hlab:first-child{transform:none;}
.plnr-view{position:relative;flex:1 1 auto;min-width:0;}
.plnr-scroller{overflow:hidden;}
.plnr-lines{
  position:absolute;left:0;right:0;
  top:calc(56px + var(--plstrip) + var(--plearly));height:var(--plh);
  pointer-events:none;transition:top .22s ease;
}
.plnr-lines-early{top:calc(56px + var(--plstrip));height:var(--plearly);overflow:hidden;transition:height .22s ease;}
.plnr-hr{position:absolute;left:0;right:0;height:1px;background:var(--line);}
.plnr-eveline{position:absolute;left:0;right:0;height:1px;background:var(--line-strong);}
.plnr-weeks{
  display:grid;column-gap:6px;
  grid-template-columns:repeat(var(--pln3),minmax(0,1fr));
  width:calc(300% + 12px);
}
.plnr-col{min-width:0;position:relative;z-index:1;}
.plnr-col-head{
  position:relative;
  height:56px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 12px;background:var(--surface-high);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  cursor:grab;touch-action:pan-y;user-select:none;
}
.plnr-panning,.plnr-panning .plnr-col-head{cursor:grabbing;}
/* Today is said, not tinted. A wash over the whole head changed the
   color of every block reading against it; a tag in the corner says the
   same thing and leaves the day looking like the others. */
.plnr-dtoday{
  position:absolute;right:6px;bottom:5px;
  padding:2px 7px;border-radius:99px;
  background:var(--accent-strong);color:var(--ink-inverse);
  font-size:.62rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  pointer-events:none;
}
.plnr-early{position:relative;height:var(--plearly);overflow:hidden;margin-top:var(--plstrip);transition:height .22s ease;}
.plnr-blk-early{position:absolute;left:0;right:0;margin:0;}
/* A column, not a stack of pinned coordinates. The blocks tile the day,
   so stacking them in order with each one's height set to its length
   draws the same timeline and leaves an ordinary list behind it, which
   is the thing that can actually be picked up and reordered. */
.plnr-track{
  position:relative;height:var(--plh);
  display:flex;flex-direction:column;
}
.plnr-lead{flex:0 0 auto;}
.plnr-blk{
  position:relative;flex:0 0 auto;margin-bottom:4px;
  border-radius:3px;padding:5px 9px;overflow:hidden;box-sizing:border-box;
  display:flex;flex-direction:column;gap:1px;
  color:var(--ink-inverse);background:var(--accent-strong);
}
.plnr-blk-hv{background:var(--pl-hv);}
.plnr-blk-followup{background:var(--pl-fol);}
.plnr-blk-evedoors{background:var(--pl-eve);}
.plnr-blk-train{background:var(--pl-train);}
.plnr-blk-ent{background:var(--pl-ent);}
.plnr-blk-call{background:var(--hue-blue-btn);}
.plnr-blk-green{background:var(--hue-green-btn);}
.plnr-blk-purple{background:var(--hue-purple-btn);}
.plnr-blk-rest{background:var(--surface-high);color:var(--ink-soft);border:1px solid var(--line);}
/* Filled like every other block. An outline read as a placeholder for
   work that had not been decided yet, and the admin is decided. The
   fill is the one the day bar and the legend already use for it. */
.plnr-blk-eve{background:var(--ink-faint);color:var(--surface-page);}
/* An hour somebody else booked. Darker than anything the rep sets, so
   the two kinds of block read apart at a glance: this one is the wall
   the day is built around. */
.plnr-blk-meet{background:var(--ink);color:var(--surface-raised);}
.plnr-blk-o2o{background:var(--ink-soft);color:var(--surface-raised);}

/* The clock line and the name inside a block. Both were lost when the
   drag styles above them were taken out, which left the text at
   whatever size it inherited. */
.plnr-bh{display:flex;justify-content:space-between;gap:8px;font-size:.64rem;line-height:1.25;opacity:.82;}
.plnr-bh em{font-style:normal;}
.plnr-bt{font-size:.76rem;font-weight:700;line-height:1.25;}

/* What the block is worth reads as part of its name: 29 Doors, not
   Doors with 29 doors under it. The figure follows the block as it is
   moved and resized, so it is always the one the block currently
   earns. */
.plnr-bt b{font-weight:700;}

/* The days and the hours are one answer to one question, so they share
   a row: which days are worked, and between what times. */
.plnr-rc-pair{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
/* The hours are the second answer in the row, so they sit at its far
   end. The label reads along the clocks, because stacked it made the
   hours two lines tall against one line of day chips and left the
   space under the Working days title empty. */
.plnr-hrs{
  margin-left:auto;
  display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;
}
.plnr-hrs-in{display:flex;align-items:center;gap:8px;}
.plnr-pair-l{
  font-size:.72rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}
@media (max-width:640px){
  .plnr-hrs{margin-left:0;justify-content:flex-start;}
}

/* The hour, the minute and the meridiem as one box. A native time box
   reads in the machine's locale, which on a twenty four hour machine
   shows no AM or PM at all and turns a typed 1 into one in the
   morning. */
.plnr-t12{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--surface-page);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:3px 5px;
}
.plnr-t12:focus-within{border-color:var(--accent-edge);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.plnr-t12-n{
  width:2.3em;background:transparent;border:0;color:var(--ink);
  font:inherit;font-size:.86rem;text-align:center;padding:4px 0;
}
.plnr-t12-n:focus{outline:none;}
.plnr-t12-c{color:var(--ink-faint);font-size:.86rem;}
.plnr-t12-ap{
  margin-left:4px;padding:4px 7px;border-radius:var(--radius-sm);
  font-size:.74rem;font-weight:700;letter-spacing:.4px;
  color:var(--ink);background:var(--surface-high);
}
.plnr-t12-ap:hover{background:var(--accent-strong);color:var(--ink-inverse);}
.plnr-t12-ap[hidden]{display:none;}
.plnr-seg-sm .plnr-segb{padding:5px 9px;font-size:.74rem;}

/* ---- the rep's own blocks ----
   Every piece of the rep's day can be picked up, so the cursor says so
   on all of them. The booked hours and the evening are drawn where they
   are and keep the ordinary cursor. */
.plnr-can{cursor:grab;}
.plnr-can:active{cursor:grabbing;}
.plnr-fixed{cursor:default;}
/* A booking on the track moves too, up or down its day, for that week. */
.plnr-pin{cursor:grab;}
.plnr-pin:active{cursor:grabbing;}
/* Blocks picked with Ctrl+click, to be carried together. */
.plnr-picked{outline:3px solid var(--accent-strong);outline-offset:-3px;}
.plnr-lift-n{
  position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;
  padding:0 6px;border-radius:11px;background:var(--accent-strong);color:#fff;
  font-size:12px;font-weight:700;line-height:22px;text-align:center;
}
/* Open time: minutes with nothing on them, drawn as an outline so the
   hole reads as a hole and not as a block. */
.plnr-blk-gap{
  background:transparent;color:var(--ink-faint);
  border:1px dashed var(--line-strong);
}
.plnr-seg-gap{background:transparent;}
/* A block the rep named carries its own color, so the class says only
   where to read it from. */
.plnr-blk-custom{background:var(--pl-cust,var(--accent-strong));}
.plnr-seg-custom{background:var(--pl-cust,var(--accent-strong));}
/* A block being carried sideways: the copy under the pointer, and the
   hole it left, which moves to wherever it would land. A block being
   slid up or down its own track is not copied; it is the block itself
   that moves, with everything under it. */
.plnr-ghost{opacity:.3;outline:2px dashed var(--line-strong);outline-offset:-2px;}
.plnr-ghost > *{visibility:hidden;}
.plnr-lifted{
  position:fixed;z-index:70;pointer-events:none;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  opacity:.95;margin:0;
}
.plnr-dragging,.plnr-dragging *{cursor:grabbing;user-select:none;}
.plnr-sliding .plnr-can{transition:none;}

/* ---- the line between two blocks ----
   Sits in the 4px the block above leaves under itself, so the column
   still adds up to the day exactly. The line itself is thin; the area
   that answers the pointer reaches a few pixels into both blocks, so it
   can be caught without aiming. */
.plnr-div{
  position:relative;flex:0 0 auto;height:4px;margin-top:-4px;
  cursor:row-resize;touch-action:none;z-index:3;
}
.plnr-div::before{
  content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px;
}
.plnr-div::after{
  content:"";position:absolute;left:3%;right:3%;top:1px;height:2px;
  border-radius:1px;background:var(--line-strong);opacity:.9;
}
.plnr-div:hover::after,.plnr-div-live::after{background:var(--accent-strong);opacity:1;left:0;right:0;}
/* While a block is being carried the lines stay where they were, which
   is not where the blocks are, so they step out of sight until the
   column is drawn again. */
.plnr-dragging .plnr-div{visibility:hidden;}
.plnr-sizing,.plnr-sizing *{cursor:row-resize;user-select:none;}

/* Under an hour the padding pulls in so the clock line and the name
   both fit. Under half an hour the block is one line: the name, then
   how long it runs; the start time goes to the hover, which appears
   only when a block is too short to read. */
.plnr-blk-sm{padding:2px 8px;gap:0;justify-content:center;}
.plnr-blk-xs{
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:6px;padding:0 7px;
}
/* Too short a block for a range and a length both, so the length is
   what stays: it is the half that says how much of the day this is. */
.plnr-blk-xs .plnr-bh span{display:none;}
.plnr-blk-xs .plnr-bh{flex:0 0 auto;order:1;}
.plnr-blk-xs .plnr-bt{order:0;}
.plnr-blk-xs .plnr-bt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.7rem;}

@media (max-width:820px){
  .plnr-row{flex-direction:column;align-items:stretch;gap:9px;}
  .plnr-rc{justify-content:flex-start;}
  .plnr-tab span{display:none;}
  .plnr-gut{flex-basis:44px;}
  .plnr-weeks{column-gap:5px;width:calc(300% + 10px);}
  .plnr-strip{gap:6px;}
}

/* ---- the heading with a control on its right ---- */
.plnr-h2row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.plnr-h2row h2{margin-bottom:0;}
/* Three sets of tiles: the flat week, the focus weeks, the weeks that
   move the street between the days. Each set is its own bordered strip
   and the sets sit a few pixels apart. */
.plnr-spread{display:inline-flex;flex-shrink:0;align-items:stretch;}
.plnr-spread .plnr-segb{
  padding:6px 10px;font-size:.76rem;white-space:nowrap;
  border:1px solid var(--line);border-left-width:0;border-radius:0;
}
.plnr-spread .plnr-segb:first-child,.plnr-spread .plnr-spread-gap + .plnr-segb{
  border-left-width:1px;border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);
}
.plnr-spread .plnr-segb:last-child,.plnr-spread .plnr-segb:has(+ .plnr-spread-gap){
  border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);
}
.plnr-spread-gap{display:inline-block;width:10px;flex-shrink:0;}
@media (max-width:720px){
  /* Seven methods do not fit a phone across and none of them can be
     dropped, so the strip carries its own sideways scroll and the page
     keeps its width. Squeezing the tiles instead did nothing, because a
     flex item's automatic minimum is its widest word. */
  .plnr-spread{
    width:100%;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .plnr-spread::-webkit-scrollbar{display:none;}
  .plnr-spread .plnr-segb{flex:0 0 auto;min-width:0;text-align:center;padding:7px 10px;}
}

/* ---- the arrangement controls ----
   In the bar over the calendar, beside the layout of the week, since they
   act on what is directly under them and a rep reaching for undo has
   just dragged something two inches away. */
.plnr-arr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.plnr-arrb{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:6px 11px;
  color:var(--ink);font:inherit;font-size:.8rem;font-weight:600;
  cursor:pointer;
}
.plnr-arrb i{color:var(--ink-faint);}
.plnr-arrb:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-high);}
.plnr-arrb:disabled{opacity:.45;cursor:default;}
.plnr-arrb[hidden]{display:none;}
.plnr-arr-seg[hidden]{display:none;}

/* ---- add and remove ----
   A menu on the block under the pointer. Right clicking a calendar is
   how every other calendar is edited, so the browser's own menu gives
   way here and nowhere else on the page. */
.plnr-menu{
  position:fixed;z-index:60;min-width:196px;max-height:70vh;overflow-y:auto;
  background:var(--surface-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  padding:5px;
}
.plnr-menu[hidden]{display:none;}
.plnr-menu-h{
  padding:7px 10px 5px;
  font-size:.66rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-faint);
}
.plnr-menu-i{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 10px;border:0;border-radius:3px;
  background:transparent;color:var(--ink);
  font:inherit;font-size:.85rem;text-align:left;cursor:pointer;
}
.plnr-menu-i:hover{background:var(--surface-high);}
.plnr-menu-off{color:var(--ink-faint);cursor:default;}
.plnr-menu-off:hover{background:transparent;}
.plnr-menu-i i{color:var(--ink-faint);font-size:.78rem;width:14px;text-align:center;}
.plnr-menu-sep{height:1px;margin:4px 6px;background:var(--line);}
/* The mark that says which color a job wears on the grid, so the menu
   reads against the calendar behind it. */
.plnr-menu-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
/* Three ways to place a job, each a grid of chips, so the menu stays a
   screen tall. */
.plnr-menu{min-width:300px;}
.plnr-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:0 4px 4px;}
.plnr-menu-chip{
  display:flex;align-items:center;gap:7px;
  padding:6px 8px;border:0;border-radius:3px;
  background:transparent;color:var(--ink);
  font:inherit;font-size:.8rem;text-align:left;cursor:pointer;white-space:nowrap;
}
.plnr-menu-chip:hover{background:var(--surface-high);}

/* Naming a block from the menu: what to call it, what color it is, and
   the press that puts it on the day. */
.plnr-cust{display:flex;align-items:center;gap:6px;padding:0 8px 8px;}
.plnr-cust-t{
  flex:1 1 auto;min-width:0;
  background:var(--surface-page);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--ink);
  padding:6px 8px;font:inherit;font-size:.8rem;
}
.plnr-cust-t:focus{outline:none;border-color:var(--accent-edge);box-shadow:0 0 0 3px var(--accent-ring-soft);}
/* The color itself is the control, so it fills its own corner rounded
   square instead of sitting as a small square inside a padded box. */
.plnr-cust-c{
  flex:0 0 auto;width:31px;height:31px;padding:0;
  border:0;border-radius:8px;overflow:hidden;cursor:pointer;
  background:transparent;
}
.plnr-cust-c::-webkit-color-swatch-wrapper{padding:0;}
.plnr-cust-c::-webkit-color-swatch{border:0;border-radius:8px;}
.plnr-cust-c::-moz-color-swatch{border:0;border-radius:8px;}

/* The colors already in use, under the box that names the block. No
   heading, because a row of colors under a color says what it is. */
.plnr-cust-sw{display:flex;flex-wrap:wrap;gap:5px;padding:0 8px 9px;}
.plnr-cust-swb{
  width:20px;height:20px;border:0;border-radius:6px;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.plnr-cust-swb:hover{transform:scale(1.12);}

/* The three ways to place a block. One set of chips behind three tabs,
   so the menu is one screen instead of three lists of the same jobs. */
.plnr-menu-tabs{
  display:flex;gap:3px;padding:4px 6px 0;
}
.plnr-menu-tab{
  flex:1 1 0;padding:6px 4px;border:0;border-radius:5px;
  background:transparent;color:var(--ink-faint);
  font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;white-space:nowrap;
}
.plnr-menu-tab:hover{background:var(--surface-high);color:var(--ink);}
.plnr-menu-tab-on,.plnr-menu-tab-on:hover{background:var(--accent-strong);color:var(--ink-inverse);}
.plnr-menu-body{padding-top:4px;}
/* The color written the way it is written everywhere else. */
.plnr-cust-h{
  flex:0 0 auto;width:8ch;
  background:var(--surface-page);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--ink);
  padding:6px 7px;font:inherit;font-size:.78rem;text-transform:lowercase;
}
.plnr-cust-h:focus{outline:none;border-color:var(--accent-edge);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.plnr-cust-go{
  flex:0 0 auto;padding:7px 11px;border-radius:var(--radius-sm);
  background:var(--accent-strong);color:var(--ink-inverse);
  font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
}
.plnr-cust-go:hover{filter:brightness(1.08);}