/* ============================================================
   Pipezoom - planner.css
   The Week Planner on Strategy: its settings, the week's figures, the
   strip of day cards and the 2 charts. The calendar under them is in
   plannerweek.css, in the same set.

   Split out of tools.css at its size ceiling.
   ============================================================ */

/* 2 across on a desk, an even 2x2 for 4 cards. */
.pln-pick{display:grid;gap:7px;grid-template-columns:1fr;}
@media (min-width:760px){
  .pln-pick{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.pln-opt{
  display:flex;align-items:center;gap:12px;
  text-align:left;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 15px;
  color:var(--ink);
}
.pln-opt:hover{border-color:var(--line-strong);background:var(--surface-high);}
.pln-on{background:var(--accent-wash);border-color:var(--line-strong);}
.pln-opt-ic{font-size:1.05rem;width:21px;flex-shrink:0;text-align:center;color:var(--ink-faint);}
.pln-on .pln-opt-ic{color:var(--ink);}
.pln-opt-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pln-opt-label{font-weight:600;font-size:.93rem;line-height:1.35;}
.pln-opt-hint{color:var(--ink-faint);font-size:.79rem;line-height:1.35;}

.pln-out{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-raised);
  padding:16px 17px;
  margin-top:12px;
}
.pln-out-head{
  display:flex;align-items:center;gap:10px;
  font-size:1.06rem;font-weight:700;line-height:1.35;
  color:var(--ink);
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.pln-facts{margin:0;}
.pln-facts dt{
  display:flex;align-items:center;gap:8px;
  color:var(--ink-faint);font-size:.68rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;margin-top:13px;
}
.pln-facts dd{margin:3px 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-soft);max-width:96ch;}
.pln-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}

/* ============================================================
   PLANNER (planner.php)

   The week as a strip of day cards and again as an hour by hour grid.
   Every measurement on the page comes from the server as an inline
   style; this file sets no block length.
   ============================================================ */

/* The 2 colors the planner owns outright: the high value run at the
   street, and enterprise. Everything that mentions either wears these,
   the block, the bar, the tag, the figure, the legend and the charts. */
:root{--pl-hv:#289dd1;--pl-ent:#7586e6;--pl-fol:#ba73d0;--pl-eve:#325ca2;--pl-train:#5aa9a3;}

/* the head, with the settings button on the right */
.plnr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.plnr-head-txt{min-width:0;flex:1 1 380px;}
.plnr-cfg-btn{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 14px;margin-top:4px;
  color:var(--ink);font-size:.86rem;font-weight:600;
}
.plnr-cfg-btn:hover{border-color:var(--line-strong);background:var(--surface-high);}
.plnr-cfg-btn i{color:var(--ink-faint);}

/* the settings panel. A list of rows: the setting's name on the left,
   its control on the right, 1 line each. The 6 that decide the layout
   of the week are open, and the settings a rep sets once are behind
   Fine tuning. */
.plnr-panel{
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius);margin:0 0 22px;
}
.plnr-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 17px;border-bottom:1px solid var(--line);
}
.plnr-panel-t{margin:0;font-size:1rem;font-weight:700;}
.plnr-panel-t i{color:var(--ink-faint);margin-right:8px;}
.plnr-x{color:var(--ink-faint);font-size:1rem;padding:4px 6px;border-radius:var(--radius-sm);}
.plnr-x:hover{color:var(--ink);background:var(--surface-high);}

.plnr-set{display:flex;flex-direction:column;}
.plnr-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px 20px;padding:13px 17px;
}
.plnr-row + .plnr-row{border-top:1px solid var(--line);}
.plnr-row[hidden]{display:none;}
.plnr-rt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px;}
.plnr-rn{font-size:.9rem;font-weight:600;line-height:1.35;}
.plnr-rh{color:var(--ink-faint);font-size:.78rem;line-height:1.4;}
/* The controls half of a row. It shrinks and wraps inside itself, and a
   row carrying 2 labeled figures stays inside the page. */
.plnr-rc{
  display:flex;align-items:center;justify-content:flex-end;
  gap:8px;flex-wrap:wrap;min-width:0;
}
.plnr-to{color:var(--ink-faint);font-size:.82rem;}
.plnr-unit{color:var(--ink-faint);font-size:.8rem;white-space:nowrap;}
.plnr-when{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
/* A figure with its name over it: 2 of them read as 2 answers to 1
   question. */
.plnr-rc-wrap{flex-wrap:wrap;justify-content:flex-end;gap:10px 16px;}
.plnr-pair{display:flex;align-items:center;gap:7px;min-width:0;}
.plnr-pair-t{
  font-size:.72rem;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}
.plnr-when[hidden]{display:none;}

/* Because 7 chips beside a label form a second column, the days go
   under their label. */
.plnr-row-stack{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;}
/* In a column the label's flex basis reads as a height; flex:0 0 auto
   removes it. */
.plnr-row-stack .plnr-rt{flex:0 0 auto;}
.plnr-row-stack .plnr-rc{justify-content:flex-start;}

.plnr-in{
  background:var(--surface-page);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--ink);
  padding:7px 9px;font:inherit;font-size:.86rem;
}
.plnr-in:focus{outline:none;border-color:var(--accent-edge);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.plnr-in-t{width:118px;}
.plnr-in-n{width:66px;text-align:center;}

/* fine tuning */
/* The 4 groups of settings, in a segmented strip with each group
   named. */
.plnr-tabs{
  display:flex;gap:4px;padding:4px;margin:0 14px 0;
  background:var(--surface-high);border:1px solid var(--line);
  border-radius:var(--radius);
  overflow-x:auto;scrollbar-width:none;
}
.plnr-tabs::-webkit-scrollbar{display:none;}
.plnr-tab{
  display:inline-flex;align-items:center;gap:7px;flex:1 0 auto;justify-content:center;
  padding:7px 13px;border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--ink-soft);
  font-size:.82rem;font-weight:600;white-space:nowrap;cursor:pointer;
}
.plnr-tab:hover{background:var(--surface-hover);color:var(--ink);}
.plnr-tab-on,.plnr-tab-on:hover{background:var(--accent-strong);color:var(--ink-inverse);}
.plnr-tab i{font-size:.76rem;}

.plnr-panel-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  padding:13px 17px;border-top:1px solid var(--line);
}
.plnr-said{font-size:.79rem;color:var(--ink-faint);}

/* day pickers and segmented choices */
.plnr-days{display:flex;flex-wrap:wrap;gap:6px;}
.plnr-day{
  background:var(--surface-page);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--ink-faint);
  padding:7px 11px;font-size:.78rem;font-weight:700;letter-spacing:.4px;
}
.plnr-day:hover{border-color:var(--line-strong);color:var(--ink);}
.plnr-day-on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.plnr-days-sm .plnr-day{padding:5px 8px;font-size:.72rem;}
.plnr-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.plnr-segb{padding:7px 12px;font-size:.8rem;font-weight:600;color:var(--ink-faint);background:var(--surface-page);}
.plnr-segb + .plnr-segb{border-left:1px solid var(--line);}
.plnr-segb-on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}

/* the week's figures
   The mark and its figure on 1 line, the name centered underneath.
   Both wear the hue, and only while Splash of color is on.

   Because a hue as text needs more weight than the same hue as a mark,
   the light pages get their own darker set: the tokens in base.css are
   pitched for the dark page and measure near 2:1 on white. */
.plnr-figs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 0 22px;
  --fig-green:var(--hue-green);
  --fig-blue:var(--hue-blue);
  --fig-purple:var(--hue-purple);
}
[data-theme="white"] .plnr-figs,
[data-theme="light"] .plnr-figs{
  --fig-green:#3d7a5c;
  --fig-blue:#2c6b9c;
  --fig-purple:#5d43a0;
}
.plnr-fig{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:20px 14px 21px;text-align:center;min-width:0;
}
.plnr-fig + .plnr-fig{border-left:1px solid var(--line);}
.plnr-fig-top{display:flex;align-items:center;justify-content:center;gap:10px;}
/* The mark stays under its figure. The number carries the size. */
.plnr-fig-i{font-size:1.2rem;line-height:1;color:var(--ink-faint);}
.plnr-fig-n{
  font-size:1.95rem;font-weight:700;line-height:1;
  letter-spacing:-1px;font-variant-numeric:tabular-nums;
}
.plnr-fig-l{
  font-size:.68rem;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.4;
}
.plnr-fig-lead .plnr-fig-i,
.plnr-fig-lead .plnr-fig-n{color:var(--accent);}

[data-splash="on"] .plnr-fig[data-hue="green"] .plnr-fig-i,
[data-splash="on"] .plnr-fig[data-hue="green"] .plnr-fig-n{color:var(--fig-green);}
[data-splash="on"] .plnr-fig[data-hue="blue"] .plnr-fig-i,
[data-splash="on"] .plnr-fig[data-hue="blue"] .plnr-fig-n{color:var(--fig-blue);}
[data-splash="on"] .plnr-fig[data-hue="purple"] .plnr-fig-i,
[data-splash="on"] .plnr-fig[data-hue="purple"] .plnr-fig-n{color:var(--fig-purple);}
[data-splash="on"] .plnr-fig[data-hue="call"] .plnr-fig-i,
[data-splash="on"] .plnr-fig[data-hue="call"] .plnr-fig-n{color:var(--fig-blue);}
[data-splash="on"] .plnr-fig[data-hue="hv"] .plnr-fig-i,
[data-splash="on"] .plnr-fig[data-hue="hv"] .plnr-fig-n{color:var(--pl-hv);}
[data-splash="on"] .plnr-fig[data-hue="ent"] .plnr-fig-i,
[data-splash="on"] .plnr-fig[data-hue="ent"] .plnr-fig-n{color:var(--pl-ent);}

@media (max-width:620px){
  .plnr-fig{padding:15px 9px 16px;gap:7px;}
  .plnr-fig-i{font-size:1rem;}
  .plnr-fig-n{font-size:1.55rem;}
  .plnr-fig-l{font-size:.63rem;letter-spacing:.6px;}
}

/* the strip of day cards */
/* A week is 1 row that fits the screen, the days sharing its width.
   Each column's floor is 0, and the row scrolls when the width runs
   out. */
.plnr-strip{
  display:grid;gap:11px;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
}
.plnr-card{
  display:flex;flex-direction:column;
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;
}
.plnr-card-head{padding:10px 13px 9px;background:var(--surface-high);border-bottom:1px solid var(--line);}
.plnr-dn{display:block;font-size:.74rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;}
.plnr-dd{display:block;margin-top:2px;font-size:.74rem;color:var(--ink-soft);}
.plnr-card-body{display:flex;flex-direction:column;padding:13px;flex:1;}
.plnr-doors{display:flex;flex-direction:column;gap:3px;}
.plnr-doors-n{font-size:1.85rem;font-weight:700;line-height:.9;letter-spacing:-1px;color:var(--accent);}
.plnr-doors-l{font-size:.66rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-soft);}
/* A day named: 1 short word on 1 line, with the rest of the day's
   content in the tags under it. */
.plnr-doors-w{
  font-size:1.15rem;line-height:1.2;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.plnr-mini{margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px;}
.plnr-mini > div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.plnr-mini dt{font-size:.76rem;color:var(--ink-soft);line-height:1.3;}
.plnr-mini dd{margin:0;font-size:.82rem;font-weight:700;}
/* Every card holds 2 tag rows open, filled or not, and the bar under the
   tags lines up across the week. */
.plnr-tags{
  display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;
  gap:4px;margin-top:12px;min-height:40px;max-height:40px;overflow:hidden;
}
.plnr-tags .plnr-tag{flex:0 0 auto;}
/* Short codes, 1 per activity on the day, each in the color its
   blocks wear on the grid. */
.plnr-tag{
  font-size:.6rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;padding:3px 5px;border-radius:3px;white-space:nowrap;line-height:1.2;
}
.plnr-tag-plan{background:var(--hue-green-btn);}
.plnr-tag-door{background:var(--accent-strong);}
.plnr-tag-hv{background:var(--pl-hv);}
.plnr-tag-call{background:var(--hue-blue-btn);}
.plnr-tag-ref,.plnr-tag-net{background:var(--hue-purple-btn);}
.plnr-tag-ep{background:var(--pl-ent);}
.plnr-tag-adm{background:var(--ink-faint);}

/* the day drawn as 1 bar */
.plnr-bar{display:flex;height:10px;margin-top:auto;border-radius:2px;overflow:hidden;background:var(--surface-page);}
.plnr-bar .plnr-seg{display:block;height:100%;border:0;border-radius:0;}
.plnr-seg-blue{background:var(--accent-strong);}
.plnr-seg-hv{background:var(--pl-hv);}
.plnr-seg-followup{background:var(--pl-fol);}
.plnr-seg-evedoors{background:var(--pl-eve);}
.plnr-seg-train{background:var(--pl-train);}
.plnr-seg-ent{background:var(--pl-ent);}
.plnr-seg-call{background:var(--hue-blue-btn);}
.plnr-seg-green{background:var(--hue-green-btn);}
.plnr-seg-purple{background:var(--hue-purple-btn);}
.plnr-seg-rest{background:var(--line-strong);}
.plnr-seg-eve{background:var(--ink-faint);}
.plnr-seg-meet{background:var(--ink);}
.plnr-seg-o2o{background:var(--ink-soft);}
.plnr-seg-none{background:transparent;}
.plnr-bar-ends{display:flex;justify-content:space-between;margin-top:5px;font-size:.63rem;color:var(--ink-soft);}
.plnr-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:13px;font-size:.79rem;color:var(--ink-faint);}
.plnr-legend span{display:flex;align-items:center;gap:7px;}
.plnr-sw{width:11px;height:11px;border-radius:2px;display:inline-block;}
.plnr-sw-blue,.plnr-sw-door{background:var(--accent-strong);}
.plnr-sw-hv{background:var(--pl-hv);}
.plnr-sw-call{background:var(--hue-blue-btn);}
.plnr-sw-green{background:var(--hue-green-btn);}
.plnr-sw-purple,.plnr-sw-ref{background:var(--hue-purple-btn);}
.plnr-sw-ent,.plnr-sw-ep{background:var(--pl-ent);}
.plnr-sw-rest{background:var(--line-strong);}
.plnr-sw-eve,.plnr-sw-adm{background:var(--ink-faint);}
.plnr-sw-plan{background:var(--hue-green-btn);}
.plnr-sw-fol{background:var(--pl-fol);}
.plnr-sw-eve2{background:var(--pl-eve);}
.plnr-sw-train{background:var(--pl-train);}
.plnr-sw-meet{background:var(--ink);}
.plnr-sw-own{background:var(--ink-soft);}

/* the 2 charts of the week
   The ring is the week's minutes by activity and the columns are each
   day's, both in the colors the grid wears. The fills read the same
   tokens as the blocks. */
.plnr-charts{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;margin:14px 0 22px;
}
/* The 2 panels share 1 height, and the shorter one's contents are
   centered in it. */
.plnr-chart{
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 15px 11px;min-width:0;
  display:flex;flex-direction:column;
}
.plnr-ch-t{margin:0 0 10px;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);}
.plnr-ch-ring{display:flex;align-items:center;justify-content:center;gap:18px;flex:1;}
.plnr-donut{width:220px;height:220px;flex:0 0 220px;}
.plnr-donut path{stroke:var(--surface-raised);stroke-width:2;}
.plnr-k-door{fill:var(--accent-strong);}
.plnr-k-hv{fill:var(--pl-hv);}
.plnr-k-call{fill:var(--hue-blue-btn);}
.plnr-k-ref{fill:var(--hue-purple-btn);}
.plnr-k-fol{fill:var(--pl-fol);}
.plnr-k-eve2{fill:var(--pl-eve);}
.plnr-k-train{fill:var(--pl-train);}
.plnr-k-ep{fill:var(--pl-ent);}
.plnr-k-plan{fill:var(--hue-green-btn);}
.plnr-k-adm{fill:var(--ink-faint);}
.plnr-k-meet{fill:var(--ink);}
.plnr-k-own{fill:var(--ink-soft);}
.plnr-ch-on{fill:#fff;font-size:11px;font-weight:700;letter-spacing:.4px;pointer-events:none;}
.plnr-ch-big{fill:var(--ink);font-size:26px;font-weight:700;letter-spacing:-1px;}
.plnr-ch-sub{fill:var(--ink-faint);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;}
.plnr-ch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0;flex:1;}
.plnr-ch-list li{display:flex;align-items:center;gap:8px;font-size:.8rem;min-width:0;}
.plnr-ch-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft);}
.plnr-ch-val{font-weight:700;font-variant-numeric:tabular-nums;}
.plnr-ch-pct{color:var(--ink-faint);font-size:.74rem;width:32px;text-align:right;font-variant-numeric:tabular-nums;}
.plnr-cols{display:block;width:100%;height:auto;max-height:330px;}
.plnr-ch-grid{stroke:var(--line);stroke-width:1;}
.plnr-ch-ax{fill:var(--ink-faint);font-size:10px;}
.plnr-sr{
  position:absolute;
  /* Because a table treats width and height as minimums, a fixed layout
     plus the maximums holds it to the pixel. */
  table-layout:fixed;
  width:1px;height:1px;max-width:1px;max-height:1px;
  padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
@media (max-width:760px){
  .plnr-charts{grid-template-columns:minmax(0,1fr);}
  .plnr-donut{width:180px;height:180px;flex-basis:180px;}
}