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

   The planner's newer pieces, in their own file since planner.css had
   reached its size ceiling: 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 the same
   way the settings panel saves 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. Three 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;}
/* One ramp across the whole bar. The three zone colors are named here
   and the stops that blend them are worked out beside the zones
   themselves, so the bar and the words under it cannot drift apart. */
: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 color of the work it is about, the same fills the
   blocks on the calendar use, so the row reads as subjects. A tag
   about the hours themselves takes the page's ink, since the hours are
   not one of the jobs. */
.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, so a card reads
   as one thing. */
.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 field 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: one per day, in the strip the fold reserves above the
   track. It wears the color of the block that sits closest to the fold
   on that day, so the sliver reads as the top edge of what is folded
   away. A day with nothing hidden shows an empty sliver, which keeps
   the row level. */
.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;}
}

/* Two 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 one 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;}