/* ============================================================
   Pipezoom - plannerweek.css

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

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

   Doc: docs/notes/app.pipezoom.com/css/plannerweek.css.md
   ============================================================ */

/* the weekly calendar
   The hour gutter on the left, then the days in a window that shows 1
   week and holds 3: a rep pulls the week before or after into view by
   its head. With a booking in the hours before the working day, those
   hours are folded under the heads and open on a press;
   --plearly is their current height. */
.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 marked by a tag in the corner, with no wash over the head,
   and the day keeps the look of 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 of blocks in order, each one's height set to its length.
   Because the blocks tile the day, the column draws the timeline, and
   the list behind it can 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, in the fill the day bar and the legend
   use for admin. */
.plnr-blk-eve{background:var(--ink-faint);color:var(--surface-page);}
/* An hour somebody else booked, darker than any block the rep sets: the
   fixed point 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, each with its own size. */
.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;}

/* The block's worth reads as part of its name: 29 Doors. The
   figure follows the block as it is moved and resized and always shows
   the block's current worth. */
.plnr-bt b{font-weight:700;}

/* The working days and their hours share a row. */
.plnr-rc-pair{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
/* The hours are at the far end of the row, with the label along the
   clocks on 1 line beside the day chips. */
.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 1 box. A native time box
   reads in the machine's locale: on a 24 hour machine it shows no AM or
   PM and reads a typed 1 as 1 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 and shows the grab
   cursor. The booked hours and the evening stay in place with 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. */
.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 in --pl-cust; the class
   reads it from there. */
.plnr-blk-custom{background:var(--pl-cust,var(--accent-strong));}
.plnr-seg-custom{background:var(--pl-cust,var(--accent-strong));}
/* A block carried sideways: the copy under the pointer, and the hole it
   left, moving to the landing position. A block slid up or down its own
   track is moved itself, with everything under it, and has no copy. */
.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 2 blocks
   It is placed in the 4px the block above leaves under itself, inside
   the day's exact length. The line is thin, and its pointer area
   reaches a few pixels into both blocks. */
.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 carried, the lines between blocks are hidden 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 to fit the clock line and the
   name. Under 30 minutes the block is 1 line: the name, then its
   length; the start time moves to the hover, shown only on a block 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;
}
/* On a block too short for a range and a length, the length stays. */
.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;}
/* 3 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 stand 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){
  /* Because 7 methods do not fit across a phone and all 7 stay, the
     strip carries its own sideways scroll and the page keeps its width. */
  .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
   Because they act on the calendar directly under them, they are in the
   bar over it, beside the layout of the week. */
.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. Because every other calendar
   is edited by right click, the calendar takes over the browser's own
   menu 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 showing a job's color on the grid. */
.plnr-menu-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
/* 3 ways to place a job, each a grid of chips, in a menu 1 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: its name, its color, 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 and fills its own rounded square. */
.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, with
   no heading. */
.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 3 ways to place a block: 1 set of chips behind 3 tabs, in a menu 1
   screen tall. */
.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 in the site's usual format. */
.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);}