/* =========================================================
   Zeal Portal — Planner controls (date nav, month picker,
   multi-select, axis view segment)
   ---------------------------------------------------------
   Extracted from planner.css on 2026-08-04 (arc F final)
   because these are NOT the planner's — they are the portal's
   shared date-and-filter controls, and `planner-shared.js`
   emits them on every surface that loads it, including the
   person page.

   The DateNav comment already said "shared by both planners".
   It was shared by more than that and nobody had noticed: the
   person page's calendar tab loads planner-shared.js, emits
   .plx-datenav__*, .plx-msel* and .plx-axisctl, and linked
   only planner.css's absence. So its date navigation rendered
   as unstyled buttons — the same fault as the stats block,
   one directory over.

   Any page whose JS emits these classes links THIS file. It
   does not link planner.css to borrow them, and it certainly
   does not re-declare them locally.

   Kept under the .plx- prefix deliberately: renaming 21 call
   sites to prove a point would be churn, and the prefix is
   now simply the portal's control namespace rather than the
   planner's.
   ========================================================= */

/* ── TypeaheadMulti: the multi-select facet (arc A §4.3) ──
   chip shows the facet and its live count; open = search + toggles.
   metrics match the toolbar's 28px control height. */
.plx-msel { position: relative; }
.plx-msel__btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-soft);
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  cursor: pointer;
  white-space: nowrap;
}
.plx-msel__btn:hover { background: var(--warm); }
.plx-msel__btn.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plx-msel__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 160;
  min-width: 240px;
  background: var(--surface, #fff);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-soft);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 6px;
}
.plx-msel__input {
  display: block;
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-soft);
  font-family: var(--font-std);
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
}
.plx-msel__list { max-height: 280px; overflow-y: auto; }
.plx-msel__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 6px 8px;
  border-radius: var(--r-soft);
  font-family: var(--font-std);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.plx-msel__opt:hover { background: var(--warm); }
.plx-msel__opt.is-on .plx-msel__optlabel { font-weight: var(--w-medium); }
.plx-msel__tick { width: 14px; color: var(--accent); flex-shrink: 0; }
.plx-msel__optlabel { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plx-msel__optmeta { font-family: var(--font-cd); font-size: 10px; color: var(--ink-3); flex-shrink: 0; }
.plx-msel__clear {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 0;
  border-top: 1px solid var(--rule);
  background: transparent;
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-align: left;
  cursor: pointer;
}
.plx-msel__clear:hover { color: var(--ink); }
/* ── axis view controls (week / fortnight / month + rotate) ── */.plx-axisctl { display: inline-flex; align-items: center; gap: 8px; }
.plx-rotate {
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-soft);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}
.plx-rotate:hover { background: var(--warm); }
.plx-rotate.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* DateNav (arc D §5): arrows · month name · today. shared by both planners. */.plx-datenav { position: relative; display: flex; align-items: center; gap: 8px; }
.plx-datenav__seg {
  display: flex; align-items: center; height: 28px;
  border: 1px solid var(--rule-2); border-radius: var(--r-soft);
  background: var(--paper); overflow: hidden;
}
.plx-datenav__btn {
  border: none; background: none; cursor: pointer;
  height: 100%; padding: 0 10px;
  font-size: 13px; color: var(--ink-2); line-height: 1;
}
.plx-datenav__btn:hover { background: var(--warm); }
.plx-datenav__div { width: 1px; align-self: stretch; background: var(--rule-2); }
.plx-datenav__month {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-ex); font-weight: var(--w-bold);
  font-size: 13px; letter-spacing: -0.01em; text-transform: lowercase;
  color: var(--ink); padding: 0 4px; min-width: 110px; text-align: center;
}
.plx-datenav__month:hover, .plx-datenav__month.is-open { color: var(--accent); }
.plx-datenav__today {
  height: 28px; padding: 0 12px;
  border: 1px solid var(--ink); border-radius: var(--r-soft);
  background: var(--paper); cursor: pointer;
  font-family: var(--font-cd); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: lowercase; color: var(--ink);
}
.plx-datenav__today:hover { background: var(--ink); color: var(--paper); }
.plx-datenav__panel {
  position: absolute; top: 34px; left: 0; z-index: 30;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r-soft);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  padding: 10px; min-width: 230px;
}
.plx-datenav__yrrow {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.plx-datenav__yrrow b { font-family: var(--font-ex); font-size: 13px; }
.plx-datenav__yrrow .plx-datenav__btn { border: 1px solid var(--rule-2); border-radius: var(--r-soft); height: 24px; }
.plx-datenav__months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.plx-datenav__m {
  border: 1px solid var(--rule-2); border-radius: var(--r-soft); background: var(--paper);
  cursor: pointer; padding: 6px 0;
  font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.04em; text-transform: lowercase;
  color: var(--ink-2);
}
.plx-datenav__m:hover { background: var(--warm); color: var(--ink); }
.plx-datenav__m.is-now { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* --- the typeahead select (.plx-ts), moved here 2026-08-04 for the
       same reason as the rest of this file: planner-shared.js emits it
       on every host, including the person page, and it was reachable
       only through planner.css. --- */

/* =========================================================
   Shared planner primitives (planner-shared.js) — the
   typeahead, the axis view controls, coverage-state chips,
   and the band list (board) view. `plx-` = shared prefix.
   All corners on --r-soft: the portal-wide radius knob.
   ========================================================= *//* ── typeahead (the searchable select every picker uses) ── */.plx-ts { position: relative; width: 100%; }
.plx-ts__display {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  font-family: var(--font-std);
  font-size: var(--t-form);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-3);
  border-radius: var(--r-soft);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}
.plx-ts__display:hover { border-color: var(--ink-3); }
.plx-ts__display.is-empty .plx-ts__value { color: var(--ink-4); }
.plx-ts.is-disabled .plx-ts__display { opacity: 0.5; cursor: not-allowed; }
.plx-ts__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plx-ts__caret { font-size: 9px; color: var(--ink-4); flex-shrink: 0; }
.plx-ts__clear {
  position: absolute;
  right: 28px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 0; background: transparent;
  color: var(--ink-4);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.plx-ts__clear:hover { color: var(--red-status); }
.plx-ts__input {
  width: 100%;
  font-family: var(--font-std);
  font-size: var(--t-form);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: var(--r-soft);
  padding: 8px 10px;
  outline: 2px solid var(--accent-soft);
}
.plx-ts__list {
  position: absolute;
  top: calc(100% + 3px); left: 0; right: 0;
  z-index: 120;
  max-height: 240px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule-3);
  border-radius: var(--r-soft);
  box-shadow: var(--shadow-2);
}
.plx-ts__opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%;
  border: 0; background: transparent;
  font-family: var(--font-std);
  font-size: var(--t-form);
  color: var(--ink);
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
}
.plx-ts__opt.is-hi { background: var(--warm); }
.plx-ts__opt.is-current { color: var(--accent); }
.plx-ts__addnew { border-top: 1px dashed var(--warm); color: var(--accent); font-weight: var(--w-medium); }
.plx-ts__optlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plx-ts__optmeta {
  font-family: var(--font-cd);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  flex-shrink: 0;
}
.plx-ts__none {
  padding: 10px;
  font-family: var(--font-cd);
  font-size: 11px;
  color: var(--ink-4);
}