/* ============================================================
   Pipezoom - plannerui.css

   Because planner.css reached its size ceiling, the planner's newer
   pieces are in this file: the figures edited in place, the Challenge
   Meter, the day heads named by their job on a single focus week, the
   calendar's week arrows and folded early hours, and the panel a team
   meeting opens.
   ============================================================ */

/* the figures, edited in place
   A figure is a setting read back. The pencil appears on hover, and a
   press turns the number into a box; the new figure is saved through
   the settings panel's save, and the week is drawn again. */
.plnr-fig{position:relative;}
.plnr-fig-top{width:100%;}
.plnr-fig-edit{
  position:absolute;top:7px;right:7px;
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:transparent;color:var(--ink-faint);
  font-size:.72rem;opacity:0;
}
.plnr-fig:hover .plnr-fig-edit,
.plnr-fig:focus-within .plnr-fig-edit{opacity:1;}
.plnr-fig-edit:hover{background:var(--surface-high);color:var(--ink);border-color:var(--line);}
.plnr-fig-edit:focus-visible{opacity:1;outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.plnr-fig-in{
  width:5.2ch;
  border:1px solid var(--accent);border-radius:var(--radius-sm);
  background:var(--surface-sunken);color:var(--ink);
  font:inherit;font-size:1.5rem;font-weight:700;text-align:center;
  padding:1px 4px;
}
.plnr-fig-in:focus{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}
.plnr-fig[data-plnr-busy="1"] .plnr-fig-n{opacity:.5;}

/* the Challenge Meter
   A gauge under the calendar. 3 zones in the colors the week's jobs
   already wear, the light blue for a week with room in it, the green for
   a realistic one and the purple for a hard one, and a needle at the
   reading. */
.plnr-meter{
  margin:18px 0 8px;padding:14px 16px 13px;
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.plnr-meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px;}
.plnr-meter-t{font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-soft);}
.plnr-meter-t i{color:var(--ic);margin-right:2px;}
.plnr-meter-v{font-size:1rem;font-weight:700;color:var(--ink);}
.plnr-meter-bar{position:relative;height:22px;}
/* 1 ramp across the whole bar. The 3 zone colors are named here, and
   the stops that blend them are worked out beside the zones, in step
   with the words under the bar. */
:root{
  --plnr-meter-easy:var(--hue-blue-btn);
  --plnr-meter-ok:var(--hue-green-btn);
  --plnr-meter-hard:var(--hue-purple-btn);
}
.plnr-meter-zones{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:var(--surface-high);}
.plnr-meter-needle{
  position:absolute;top:-5px;bottom:-5px;width:3px;
  transform:translateX(-50%);border-radius:2px;
  background:var(--ink);box-shadow:0 0 0 2px var(--surface-raised);
}
.plnr-meter-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft);}
.plnr-meter-why{margin-top:8px;font-size:.8rem;color:var(--ink-soft);line-height:1.5;}
.plnr-meter-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.plnr-mtag{
  display:inline-flex;align-items:center;
  padding:5px 11px;border-radius:6px;
  font-size:.74rem;font-weight:600;color:var(--ink-inverse);
  background:var(--accent-strong);
}
/* A tag wears the fill of its job's blocks on the calendar. Because the
   hours are not a job, a tag about the hours takes the page's ink. */
.plnr-mtag-blue{background:var(--accent-strong);}
.plnr-mtag-call{background:var(--hue-blue-btn);}
.plnr-mtag-purple{background:var(--hue-purple-btn);}
.plnr-mtag-ent{background:var(--pl-ent);}
.plnr-mtag-followup{background:var(--pl-fol);}
.plnr-mtag-green{background:var(--hue-green-btn);}
.plnr-mtag-rest{background:var(--surface-high);color:var(--ink);}
.plnr-mtag-eve{background:var(--ink-faint);color:var(--surface-page);}
.plnr-mtag-hours{background:var(--ink);color:var(--surface-raised);}

/* a day named by its job
   On a single focus week the head of a day card wears the color of the
   job the day is given to. The calendar heads stay plain. */
.plnr-card-head[data-plnr-role]{color:#fff;}
.plnr-card-head[data-plnr-role] .plnr-dn,
.plnr-card-head[data-plnr-role] .plnr-dd{color:#fff;}
.plnr-card-head[data-plnr-role="doors"]{background:var(--accent-strong);border-color:var(--accent-strong);}
.plnr-card-head[data-plnr-role="calls"]{background:var(--hue-blue-btn);border-color:var(--hue-blue-btn);}
.plnr-card-head[data-plnr-role="referrals"],
.plnr-card-head[data-plnr-role="networking"]{background:var(--hue-purple-btn);border-color:var(--hue-purple-btn);}
.plnr-card-head[data-plnr-role="enterprise"]{background:var(--pl-ent);border-color:var(--pl-ent);}
.plnr-card-head[data-plnr-role="admin"]{background:var(--ink-faint);border-color:var(--ink-faint);}
.plnr-card-head[data-plnr-role="route"]{background:var(--hue-green-btn);border-color:var(--hue-green-btn);}

/* The figure under the head takes the head's own color. */
.plnr-card:has(> .plnr-card-head[data-plnr-role="doors"]) .plnr-doors-n{color:var(--accent-strong);}
.plnr-card:has(> .plnr-card-head[data-plnr-role="calls"]) .plnr-doors-n{color:var(--hue-blue-btn);}
.plnr-card:has(> .plnr-card-head[data-plnr-role="referrals"]) .plnr-doors-n,
.plnr-card:has(> .plnr-card-head[data-plnr-role="networking"]) .plnr-doors-n{color:var(--hue-purple-btn);}
.plnr-card:has(> .plnr-card-head[data-plnr-role="enterprise"]) .plnr-doors-n{color:var(--pl-ent);}
.plnr-card:has(> .plnr-card-head[data-plnr-role="route"]) .plnr-doors-n{color:var(--hue-green-btn);}
.plnr-card:has(> .plnr-card-head[data-plnr-role="admin"]) .plnr-doors-n{color:var(--ink-faint);}

/* the calendar's frame
   The week arrows at the top right, the bar of controls over the grid,
   and the strip that holds the folded hours before the working day. */
.plnr-calhead{margin-top:4px;}
.plnr-wknav{display:inline-flex;align-items:center;gap:6px;}
.plnr-wkb{padding:6px 9px;}
.plnr-wkb i{color:var(--ink-soft);}
.plnr-wklab{min-width:9.5em;text-align:center;font-size:.82rem;font-weight:600;color:var(--ink-soft);}
.plnr-calbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 14px;flex-wrap:wrap;margin:10px 0 12px;
}
/* The peek: 1 per day, in the strip the fold reserves above the
   track. It wears the color of that day's block closest to the fold:
   the top edge of the folded hours. A day with nothing hidden shows an
   empty sliver at the same height. */
.plnr-peek{
  position:absolute;left:0;right:0;top:56px;z-index:4;
  display:flex;align-items:center;justify-content:center;
  height:12px;margin:3px 0;padding:0;box-sizing:border-box;
  border:0;border-radius:6px 6px 0 0;
  color:var(--ink-inverse);
  font-size:.58rem;line-height:1;
  cursor:pointer;
}
.plnr-peek-blue{background:var(--accent-strong);}
.plnr-peek-hv{background:var(--pl-hv);}
.plnr-peek-ent{background:var(--pl-ent);}
.plnr-peek-call{background:var(--hue-blue-btn);}
.plnr-peek-green{background:var(--hue-green-btn);}
.plnr-peek-purple{background:var(--hue-purple-btn);}
.plnr-peek-rest{background:var(--surface-high);color:var(--ink-soft);}
.plnr-peek-eve{background:var(--ink-faint);color:var(--surface-page);}
.plnr-peek-meet{background:var(--ink);color:var(--surface-raised);}
.plnr-peek-o2o{background:var(--ink-soft);color:var(--surface-raised);}
.plnr-peek-none{background:var(--surface-high);cursor:default;}
.plnr-peek:hover{filter:brightness(1.12);}
.plnr-peek:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}
/* A fold put back the way it was after a redraw does not animate. */
.plnr-nofx .plnr-early,.plnr-nofx .plnr-gut-early,.plnr-nofx .plnr-lines,.plnr-nofx .plnr-lines-early{transition:none;}
@media (prefers-reduced-motion:reduce){
  .plnr-early,.plnr-gut-early,.plnr-lines,.plnr-lines-early{transition:none;}
}

/* 2 rows of tags keep clear of the timeline under them. */
.plnr-tags{margin-bottom:10px;}

/* The close button at the foot of the settings. */
.plnr-closeb{display:inline-flex;align-items:center;gap:6px;}
.plnr-resetb{display:inline-flex;align-items:center;gap:6px;}
.plnr-panel-foot .plnr-said{margin-right:auto;}
.plnr-resetb-armed,.plnr-resetb-armed:hover{background:var(--danger);border-color:var(--danger);color:var(--ink-inverse);}

/* a team meeting's details
   A pinned meeting opens its link, dial-in and PIN in 1 small panel
   over the page. */
.plnr-blk[data-plnr-meet]{cursor:pointer;}
.plnr-blk[data-plnr-meet]:hover{filter:brightness(1.12);}
.plnr-meet{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--scrim);
}
.plnr-meet[hidden]{display:none;}
.plnr-meet-box{
  width:min(420px,100%);
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-overlay);
  padding:18px 20px 16px;
}
.plnr-meet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.plnr-meet-t{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink);}
.plnr-meet-when{display:block;margin-top:3px;font-size:.82rem;color:var(--ink-soft);}
.plnr-meet-x{
  width:32px;height:32px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:transparent;color:var(--ink-soft);
}
.plnr-meet-x:hover{background:var(--surface-high);color:var(--ink);}
.plnr-meet-rows{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:.88rem;}
.plnr-meet-rows dt{font-size:.68rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-faint);padding-top:3px;}
.plnr-meet-rows dd{margin:0;color:var(--ink);word-break:break-all;}
.plnr-meet-rows a{color:var(--accent);font-weight:600;}
.plnr-meet-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}